feat(TransactionsImport): match contribution

components/dashboard/sections/contributions/CreatePendingOrderModal.tsx

@@ -15,14 +15,15 @@ import { API_V2_CONTEXT, gql } from '../../../../lib/graphql/helpers';
 import type { CreatePendingContributionModalQuery, OrderPageQuery } from '../../../../lib/graphql/types/v2/graphql';
 import useLoggedInUser from '../../../../lib/hooks/useLoggedInUser';
 import formatCollectiveType from '../../../../lib/i18n/collective-type';
+import { i18nPendingOrderPaymentMethodTypes } from '../../../../lib/i18n/pending-order-payment-method-type';
 import { i18nTaxType } from '../../../../lib/i18n/taxes';
 import { require2FAForAdmins } from '../../../../lib/policies';
 import { omitDeep } from '../../../../lib/utils';
 
 import AccountingCategorySelect from '../../../AccountingCategorySelect';
 import CollectivePicker, { DefaultCollectiveLabel } from '../../../CollectivePicker';
 import CollectivePickerAsync from '../../../CollectivePickerAsync';
-import { confirmContributionFieldsFragment } from '../../../ContributionConfirmationModal';
+import { confirmContributionFieldsFragment } from '../../../contributions/ConfirmContributionForm';
 import FormattedMoneyAmount from '../../../FormattedMoneyAmount';
 import { Box, Flex } from '../../../Grid';
 import LoadingPlaceholder from '../../../LoadingPlaceholder';
@@ -387,11 +388,10 @@ const CreatePendingContributionForm = ({ host, onClose, error, edit }: CreatePen
       ),
     });
   }
-  const paymentMethodOptions = [
-    { value: 'UNKNOWN', label: intl.formatMessage({ id: 'Unknown', defaultMessage: 'Unknown' }) },
-    { value: 'BANK_TRANSFER', label: intl.formatMessage({ defaultMessage: 'Bank Transfer', id: 'Aj4Xx4' }) },
-    { value: 'CHECK', label: intl.formatMessage({ id: 'PaymentMethod.Check', defaultMessage: 'Check' }) },
-  ];
+  const paymentMethodOptions = Object.keys(i18nPendingOrderPaymentMethodTypes).map(key => ({
+    label: intl.formatMessage(i18nPendingOrderPaymentMethodTypes[key]),
+    value: key,
+  }));
 
   const amounts = getAmountsFromValues(values);
   return (

components/dashboard/sections/transactions-imports/FilterWithRawValueButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { ALargeSmall, Filter } from 'lucide-react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '../../../ui/Button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/Tooltip';
+
+export function FilterWithRawValueButton({
+  SecondaryIcon = ALargeSmall,
+  message,
+  onClick,
+}: {
+  SecondaryIcon?: LucideIcon;
+  message?: React.ReactNode | string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          className="relative inline-block h-4 w-4 p-0 text-neutral-500 hover:bg-white hover:text-neutral-700"
+          onClick={onClick}
+        >
+          <Filter size={14} className="inline" />
+          {SecondaryIcon && (
+            <SecondaryIcon size={12} className="radius-50 absolute -bottom-1 -right-1 bg-white bg-opacity-50" />
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{message || <FormattedMessage defaultMessage="Search term" id="UD/BhG" />}</TooltipContent>
+    </Tooltip>
+  );
+}