[Cashier-V2] george / FEQ-1928 / add Payment Agent Deposit module (de…

…riv-com#14206)

* feat(cashier-v2): ✨ add Payment Agent Deposit module

* test(cashier-v2): 🧪 add tests

* fix(cashier-v2): 🔥 remove payment method normalization, remove Skrill/Netteller checks

packages/cashier-v2/package.json

@@ -13,13 +13,15 @@
     },
     "dependencies": {
         "@deriv-com/ui": "1.11.2",
+        "@deriv-com/utils": "latest",
         "@deriv/api-v2": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/quill-icons": "^1.19.0",
         "@deriv/utils": "^1.0.0",
         "clsx": "^2.0.0",
         "formik": "^2.1.4",
         "i18next": "^22.4.6",
+        "lodash.debounce": "^4.0.8",
         "qrcode.react": "^3.1.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/PaymentAgentCardDescription.tsx

@@ -5,7 +5,6 @@ import { Text } from '@deriv-com/ui';
 import type { THooks } from '../../../../hooks/types';
 import { capitalizeFirstLetter } from '../../../../utils';
 import { paymentMethodIcons } from '../../constants';
-import { getNormalizedIconPaymentMethod } from '../../utils';
 import styles from './PaymentAgentCardDescription.module.scss';
 
 type TProps = {
@@ -23,11 +22,9 @@ const PaymentAgentDepositCardDescription: React.FC<TProps> = ({ paymentAgent })
     const theme: 'dark' | 'light' = 'light';
 
     const icons = supportedPaymentMethods.reduce((acc, { payment_method: paymentMethod }) => {
-        if (!paymentMethod) return acc;
-        const normalizedIconPaymentMethod = getNormalizedIconPaymentMethod(paymentMethod);
-        if (!normalizedIconPaymentMethod) return acc;
-        if (!acc.has(paymentMethodIcons[normalizedIconPaymentMethod][theme])) {
-            acc.add(paymentMethodIcons[normalizedIconPaymentMethod][theme]);
+        if (!paymentMethod || !paymentMethodIcons[paymentMethod]) return acc;
+        if (!acc.has(paymentMethodIcons[paymentMethod][theme])) {
+            acc.add(paymentMethodIcons[paymentMethod][theme]);
         }
         return acc;
     }, new Set<{ icon: IconTypes; key: string }>());

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/__tests__/PaymentAgentCardDescription.spec.tsx

@@ -14,7 +14,7 @@ describe('PaymentAgentCardDescription', () => {
             paymentAgent: {
                 further_information: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
                 name: 'Payment agent name',
-                supported_payment_methods: [{ payment_method: 'Visa' }, { payment_method: 'Ethereum' }],
+                supported_payment_methods: [{ payment_method: 'Card' }, { payment_method: 'Diamondbank' }],
                 urls: [{ url: 'https://url1.com' }, { url: 'https://url2.com' }],
             },
         };

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/PaymentAgentMethodsDropdown.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { Dropdown } from '@deriv-com/ui';
 import ChevronIcon from '../../../../assets/images/chevron-icon.svg';
+import { usePaymentAgentContext } from '../../provider';
 import styles from './PaymentAgentMethodsDropdown.module.scss';
 
 const PaymentAgentMethodsDropdown = () => {
-    const supportedPaymentMethodsList = [{ text: 'All payment methods', value: '0' }];
+    const { onSelectPaymentMethodHandler, selectedPaymentMethod, supportedPaymentMethods } = usePaymentAgentContext();
+
+    const supportedPaymentMethodsList = [
+        { text: 'All payment methods', value: '0' },
+        ...supportedPaymentMethods.map(paymentMethod => ({ text: paymentMethod, value: paymentMethod })),
+    ];
 
     return (
         <div className={styles.container}>
@@ -14,8 +20,8 @@ const PaymentAgentMethodsDropdown = () => {
                 list={supportedPaymentMethodsList}
                 listHeight='sm'
                 name='payment_methods'
-                onSelect={() => undefined}
-                value={'0'}
+                onSelect={onSelectPaymentMethodHandler}
+                value={selectedPaymentMethod}
                 variant='comboBox'
             />
         </div>

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/__tests__/PaymentAgentMethodsDropdown.spec.tsx

@@ -7,6 +7,14 @@ jest.mock('@deriv-com/ui', () => ({
     Dropdown: jest.fn(() => <div>Dropdown</div>),
 }));
 
+jest.mock('../../../provider', () => ({
+    usePaymentAgentContext: jest.fn(() => ({
+        onSelectPaymentMethodHandler: jest.fn(),
+        selectedPaymentMethod: 'Card',
+        supportedPaymentMethods: ['Card', 'Crypto'],
+    })),
+}));
+
 describe('PaymentAgentMethodsDropdown', () => {
     it('should render PaymentAgentMethodsDropdown', () => {
         render(<PaymentAgentMethodsDropdown />);

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/PaymentAgentSearchBox.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { SearchBox } from '../../../../components';
+import { usePaymentAgentContext } from '../../provider';
 import styles from './PaymentAgentSearchBox.module.scss';
 
 const PaymentAgentSearchBox = () => {
+    const { onChangeSearchTermHandler } = usePaymentAgentContext();
+
     return (
         <div className={styles.container}>
-            <SearchBox onSearchHandler={() => undefined} placeholder='Search payment agent name' />
+            <SearchBox onSearchHandler={onChangeSearchTermHandler} placeholder='Search payment agent name' />
         </div>
     );
 };

packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/__tests__/PaymentAgentSearchBox.spec.tsx

@@ -6,6 +6,10 @@ jest.mock('../../../../../components', () => ({
     SearchBox: jest.fn(() => <div>SearchBox</div>),
 }));
 
+jest.mock('../../../provider', () => ({
+    usePaymentAgentContext: jest.fn(() => ({ onChangeSearchTermHandler: jest.fn() })),
+}));
+
 describe('PaymentAgentSearchBox', () => {
     it('should render PaymentAgentSearchBox', () => {
         render(<PaymentAgentSearchBox />);

packages/cashier-v2/src/lib/PaymentAgent/components/index.ts

@@ -1,3 +1,6 @@
 import { PaymentAgentCardDescription } from './PaymentAgentCardDescription';
+import { PaymentAgentMethodsDropdown } from './PaymentAgentMethodsDropdown';
+import { PaymentAgentSearchBox } from './PaymentAgentSearchBox';
+import { PaymentAgentSearchWarning } from './PaymentAgentSearchWarning';
 
-export { PaymentAgentCardDescription };
+export { PaymentAgentCardDescription, PaymentAgentMethodsDropdown, PaymentAgentSearchBox, PaymentAgentSearchWarning };

packages/cashier-v2/src/lib/PaymentAgent/constants/index.ts

@@ -1,2 +1 @@
 export * from './paymentMethodIcons';
-export * from './paymentMethods';

packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethodIcons.ts

@@ -54,7 +54,7 @@ import {
 } from '@deriv/quill-icons';
 import type { TIconTypes } from '../../../types';
 
-type TPaymentMethodIcons = Record<string, { dark: TIconTypes.TIcon; light: TIconTypes.TIcon; variants: string[] }>;
+type TPaymentMethodIcons = Record<string, { dark: TIconTypes.TIcon; light: TIconTypes.TIcon }>;
 
 export const paymentMethodIcons: TPaymentMethodIcons = {
     Alipay: {
@@ -66,7 +66,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodAlipayBrandIcon,
             key: 'PaymentMethodAlipayBrandIcon',
         },
-        variants: ['alipay'],
     },
     Bank: {
         dark: {
@@ -77,18 +76,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodInstantBankTransferBlackIcon,
             key: 'PaymentMethodInstantBankTransferBlackIcon',
         },
-        variants: [
-            'bank',
-            'bankdeposit',
-            'banks',
-            'banktransfer',
-            'bankwire',
-            'bankwiretransfer',
-            'localbankwire',
-            'localbank',
-            'localbanks',
-            'localbanktransfer',
-        ],
     },
     Bankbri: {
         dark: {
@@ -99,7 +86,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodBankRakyatIndonesiaBriBrandIcon,
             key: 'PaymentMethodBankRakyatIndonesiaBriBrandIcon',
         },
-        variants: ['bri', 'bankbri'],
     },
     Bca: {
         dark: {
@@ -110,7 +96,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodBankCentralAsiaBcaBrandIcon,
             key: 'PaymentMethodBankCentralAsiaBcaBrandIcon',
         },
-        variants: ['bca', 'grupbca'],
     },
     Bch: {
         dark: {
@@ -121,7 +106,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodBitcoinCashBrandIcon,
             key: 'PaymentMethodBitcoinCashBrandIcon',
         },
-        variants: ['bch'],
     },
     Bitcoin: {
         dark: {
@@ -132,7 +116,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodBitcoinBrandIcon,
             key: 'PaymentMethodBitcoinBrandIcon',
         },
-        variants: ['bitcoin', 'btc'],
     },
     Bni: {
         dark: {
@@ -143,7 +126,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodBankNegaraIndonesiaBniBrandIcon,
             key: 'PaymentMethodBankNegaraIndonesiaBniBrandIcon',
         },
-        variants: ['bni'],
     },
     Card: {
         dark: {
@@ -154,7 +136,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodCreditDebitBrandIcon,
             key: 'PaymentMethodCreditDebitBrandIcon',
         },
-        variants: ['card', 'cards', 'visa', 'mastercard'],
     },
     Cimbniaga: {
         dark: {
@@ -165,7 +146,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodCimbniagaBrandIcon,
             key: 'PaymentMethodCimbniagaBrandIcon',
         },
-        variants: ['cimbniaga'],
     },
     Crypto: {
         dark: {
@@ -176,7 +156,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodCryptosBrandIcon,
             key: 'PaymentMethodCryptosBrandIcon',
         },
-        variants: ['crypto', 'cryptos', 'cryptocurrencies', 'cryptocurrency', 'weacceptcrypto'],
     },
     Dai: {
         dark: {
@@ -187,7 +166,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodDaiBrandIcon,
             key: 'PaymentMethodDaiBrandIcon',
         },
-        variants: ['dai'],
     },
     Diamondbank: {
         dark: {
@@ -198,7 +176,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodDiamondBankBrandIcon,
             key: 'PaymentMethodDiamondBankBrandIcon',
         },
-        variants: ['diamondbank'],
     },
     Eth: {
         dark: {
@@ -209,7 +186,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodEthereumBrandIcon,
             key: 'PaymentMethodEthereumBrandIcon',
         },
-        variants: ['eth', 'ethd', 'ethereum'],
     },
     Ewallet: {
         dark: {
@@ -220,7 +196,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodEWalletBrandIcon,
             key: 'PaymentMethodEWalletBrandIcon',
         },
-        variants: ['ewallet', 'ewallets', 'ewalletpayment', 'skrill'],
     },
     Firstbank: {
         dark: {
@@ -231,7 +206,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodFirstBankBrandIcon,
             key: 'PaymentMethodFirstBankBrandIcon',
         },
-        variants: ['firstbank'],
     },
     Gtbank: {
         dark: {
@@ -242,7 +216,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodGuaranteeTrustBankGtcoBrandIcon,
             key: 'PaymentMethodGuaranteeTrustBankGtcoBrandIcon',
         },
-        variants: ['gtbank'],
     },
     Icbc: {
         dark: {
@@ -253,7 +226,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodIcbcBankBrandIcon,
             key: 'PaymentMethodIcbcBankBrandIcon',
         },
-        variants: ['icbc'],
     },
     Libertyreserve: {
         dark: {
@@ -264,7 +236,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodLibertyReserveBrandIcon,
             key: 'PaymentMethodLibertyReserveBrandIcon',
         },
-        variants: ['libertyreserve'],
     },
     LiteCoin: {
         dark: {
@@ -275,7 +246,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodLitecoinBrandIcon,
             key: 'PaymentMethodLitecoinBrandIcon',
         },
-        variants: ['ltc', 'litecoin'],
     },
     Mandiri: {
         dark: {
@@ -286,7 +256,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodMandiriBrandIcon,
             key: 'PaymentMethodMandiriBrandIcon',
         },
-        variants: ['mandiri'],
     },
     Mandirisyariah: {
         dark: {
@@ -297,7 +266,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodMandiriSyariahBrandIcon,
             key: 'PaymentMethodMandiriSyariahBrandIcon',
         },
-        variants: ['mandirisyariah'],
     },
     Moneygram: {
         dark: {
@@ -308,7 +276,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodMoneygramBrandIcon,
             key: 'PaymentMethodMoneygramBrandIcon',
         },
-        variants: ['moneygram'],
     },
     Paypal: {
         dark: {
@@ -319,7 +286,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodPaypalBrandIcon,
             key: 'PaymentMethodPaypalBrandIcon',
         },
-        variants: ['paypal'],
     },
     PerfectMoney: {
         dark: {
@@ -330,7 +296,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodPerfectMoneyBrandIcon,
             key: 'PaymentMethodPerfectMoneyBrandIcon',
         },
-        variants: ['perfectmoneyandwebmoney', 'perfectmoney'],
     },
     Permatabank: {
         dark: {
@@ -341,7 +306,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodPermataBankBrandIcon,
             key: 'PaymentMethodPermataBankBrandIcon',
         },
-        variants: ['permatabank'],
     },
     Tether: {
         dark: {
@@ -352,7 +316,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodTetherUsdtBrandIcon,
             key: 'PaymentMethodTetherUsdtBrandIcon',
         },
-        variants: ['tether'],
     },
     Verve: {
         dark: {
@@ -363,7 +326,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodVerveBrandIcon,
             key: 'PaymentMethodVerveBrandIcon',
         },
-        variants: ['verve'],
     },
     WebMoney: {
         dark: {
@@ -374,7 +336,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodWebmoneyBrandIcon,
             key: 'PaymentMethodWebmoneyBrandIcon',
         },
-        variants: ['perfectmoneyandwebmoney', 'webmoney'],
     },
     Wechatpay: {
         dark: {
@@ -385,7 +346,6 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodWechatPayBrandIcon,
             key: 'PaymentMethodWechatPayBrandIcon',
         },
-        variants: ['wechatpay'],
     },
     Zenithbank: {
         dark: {
@@ -396,6 +356,5 @@ export const paymentMethodIcons: TPaymentMethodIcons = {
             icon: PaymentMethodZenithBankBrandIcon,
             key: 'PaymentMethodZenithBankBrandIcon',
         },
-        variants: ['zenithbank'],
     },
 };