diff --git a/packages/cashier-v2/package.json b/packages/cashier-v2/package.json index 3e8f80c5bdd5..ea1b18e4e3ec 100644 --- a/packages/cashier-v2/package.json +++ b/packages/cashier-v2/package.json @@ -13,6 +13,7 @@ }, "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", @@ -20,6 +21,7 @@ "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", diff --git a/packages/cashier-v2/src/constants/.gitkeep b/packages/cashier-v2/src/constants/.gitkeep deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/cashier-v2/src/hooks/.gitkeep b/packages/cashier-v2/src/hooks/.gitkeep deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/PaymentAgentCardDescription.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/PaymentAgentCardDescription.tsx index e341b130ab88..37ddfe6c606e 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/PaymentAgentCardDescription.tsx +++ b/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 = ({ 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 }>()); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/__tests__/PaymentAgentCardDescription.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/__tests__/PaymentAgentCardDescription.spec.tsx index 5522ddc85b21..49d18f90a073 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentCardDescription/__tests__/PaymentAgentCardDescription.spec.tsx +++ b/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' }], }, }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/PaymentAgentMethodsDropdown.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/PaymentAgentMethodsDropdown.tsx index 3b5d1d4ce01c..619dad943bd9 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/PaymentAgentMethodsDropdown.tsx +++ b/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 (
@@ -14,8 +20,8 @@ const PaymentAgentMethodsDropdown = () => { list={supportedPaymentMethodsList} listHeight='sm' name='payment_methods' - onSelect={() => undefined} - value={'0'} + onSelect={onSelectPaymentMethodHandler} + value={selectedPaymentMethod} variant='comboBox' />
diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/__tests__/PaymentAgentMethodsDropdown.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/__tests__/PaymentAgentMethodsDropdown.spec.tsx index 49870ca0289f..7745d9135187 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/__tests__/PaymentAgentMethodsDropdown.spec.tsx +++ b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentMethodsDropdown/__tests__/PaymentAgentMethodsDropdown.spec.tsx @@ -7,6 +7,14 @@ jest.mock('@deriv-com/ui', () => ({ Dropdown: jest.fn(() =>
Dropdown
), })); +jest.mock('../../../provider', () => ({ + usePaymentAgentContext: jest.fn(() => ({ + onSelectPaymentMethodHandler: jest.fn(), + selectedPaymentMethod: 'Card', + supportedPaymentMethods: ['Card', 'Crypto'], + })), +})); + describe('PaymentAgentMethodsDropdown', () => { it('should render PaymentAgentMethodsDropdown', () => { render(); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/PaymentAgentSearchBox.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/PaymentAgentSearchBox.tsx index e139f9ef9c2d..cfbfe7017dc0 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/PaymentAgentSearchBox.tsx +++ b/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 (
- undefined} placeholder='Search payment agent name' /> +
); }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/__tests__/PaymentAgentSearchBox.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/__tests__/PaymentAgentSearchBox.spec.tsx index 4b45c05fcb07..df49587bb96d 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/__tests__/PaymentAgentSearchBox.spec.tsx +++ b/packages/cashier-v2/src/lib/PaymentAgent/components/PaymentAgentSearchBox/__tests__/PaymentAgentSearchBox.spec.tsx @@ -6,6 +6,10 @@ jest.mock('../../../../../components', () => ({ SearchBox: jest.fn(() =>
SearchBox
), })); +jest.mock('../../../provider', () => ({ + usePaymentAgentContext: jest.fn(() => ({ onChangeSearchTermHandler: jest.fn() })), +})); + describe('PaymentAgentSearchBox', () => { it('should render PaymentAgentSearchBox', () => { render(); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/components/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/components/index.ts index 125ef8b3e0c2..02da820a7c1d 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/components/index.ts +++ b/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 }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/constants/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/constants/index.ts index 9d02aa8dc0a1..acce963b8790 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/constants/index.ts +++ b/packages/cashier-v2/src/lib/PaymentAgent/constants/index.ts @@ -1,2 +1 @@ export * from './paymentMethodIcons'; -export * from './paymentMethods'; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethodIcons.ts b/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethodIcons.ts index d02368009c96..8c2351eeb70b 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethodIcons.ts +++ b/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; +type TPaymentMethodIcons = Record; 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'], }, }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethods.ts b/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethods.ts deleted file mode 100644 index 16c9ca2cdf98..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/constants/paymentMethods.ts +++ /dev/null @@ -1,709 +0,0 @@ -/* eslint-disable sonarjs/no-duplicate-string */ -export const paymentMethods = { - AbokiFX: ['AbokiFX', 'A BOKI FX'], - 'ABSA Bank': [ - 'Absa', - 'ABSA', - 'ABSA Bank', - 'ABSABank', - 'ABSABANK', - 'Absabank', - 'ABSA Bank Transfer', - 'ABSA Cash Send', - 'Absa fund transfer and orange money services', - 'ABSA GHANA LIMITED', - 'Direct deposit FNB and ABSA', - ], - 'Access bank': ['Access bank', 'Access Bank', 'Accessbank', 'AccessBank', 'ACCESS BANK', 'Acess Bank'], - 'Access forex': ['Access Forex', 'ACCESS FOREX', 'Access forex'], - 'Afriland First Bank': ['Afriland First Bank', 'AFRILAND FIRST BANK'], - 'Airtel Mobile money': [ - 'Airtel Mobile money', - 'airtel', - 'Airtel', - 'AIRTEL MOBILE MONEY', - 'airtel money', - 'Airtel money', - 'Airtelmoney', - 'Airtel Money', - 'AirtelMoney', - 'AIRTELMONEY', - 'AIRTEL MONEY', - 'Airtel Tigo', - 'AirtelTigo cash', - 'all mobile money', - ], - Airtm: ['airtm', 'Airtm'], - AlfalahBank: ['AlfalahBank', 'bank alfalfa', 'Alflah Bank'], - 'All banks': [ - 'All banks', - 'All local banks', - 'All local Banks', - 'All local banks ZWL', - 'All Local Bank transfer', - 'bank', - 'Bank', - 'BANK', - 'banks', - 'Banks', - 'local banks', - 'Local banks', - 'Local Banks', - 'Pakistani Local All banks', - 'Local Indian banks', - 'LocalBanks', - ], - Astropay: ['astropay', 'Astropay', 'Astro Pay'], - 'ATM transfer': [ - 'ATM', - 'ATMDeposits', - 'ATMdeposit', - 'ATM transfer', - 'ATM Transfer', - 'BanktransferATM', - 'FNB ATM deposit', - ], - AzamPesa: ['AzamPesa', 'Azampesa'], - 'Banco Bradesco': ['Banco Bradesco', 'Bradesco'], - 'Banco de Pichincha': ['Banco de Pichincha', 'BANCO DE PICHINCHA', 'Pichincha'], - 'Banco de Produbanco': ['Banco de Produbanco', 'BANCO DE PRODUBANCO'], - 'Banco del Pacifico': ['Banco del Pacifico', 'BANCO DE PACIFICO', 'Pacifico'], - 'Banco Internacional': ['Banco Internacional', 'BANCO INTERNACIONAL'], - 'Banco Internacional de Moçambique (BIM)': ['Banco Internacional de Moçambique (BIM)', 'Bim', 'Transferencia Bim'], - 'Bancobu Bank eNoti': ['Bancobu Bank eNoti', 'Bancobu e-noti'], - 'Bank AL Habib': ['Bank AL Habib', 'bank al habib', 'Bank Alhabib'], - 'Bank BTN': ['Bank BTN', 'BTN'], - 'Bank Negara Indonesia (BNI)': ['Bank Negara Indonesia (BNI)', 'BNI', 'BankBNI'], - 'Bank Of Ceylon (BOC)': ['Bank Of Ceylon (BOC)', 'Bankofceylon', 'Boc Peoples Bank'], - 'Bank of the Philippine Islands (BPI)': ['Bank of the Philippine Islands (BPI)', 'BPI'], - 'Bank Rakyat Indonesia (BRI)': ['Bank Rakyat Indonesia (BRI)', 'BankBri', 'BankBRI', 'BRI', 'BRI dan Ewallet'], - 'Bank transfer': [ - 'All Local Bank payment Accept', - 'All local bank payments', - 'All Local Bank transfer', - 'bank', - 'Bank', - 'BANK', - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'Bank and E-wallet', - 'bank deposit', - 'Bank deposit', - 'Bankdeposit', - 'Bank Deposit', - 'Bank deposits', - 'bank ewallet', - 'bank payment', - 'banks', - 'Banks', - 'Bank to Bank account transfer', - 'bank transfer', - 'Bank transfer', - 'Banktransfer', - 'Bank Transfer', - 'BankTransfer', - 'BANK TRANSFER', - 'BANKTRANSFER', - 'bank transfer and all form of E-payments', - 'Bank Transfer and all Forms of E-payments', - 'BanktransferATM', - 'bank transfers', - 'Bank transfers', - 'Bank Transfers', - 'Ban transfer', - 'Depositos direto em conta', - 'Direct deposit FNB and ABSA', - 'E-wallet Bank transfer', - 'Internet Banking', - 'Internet transfer', - 'Internet Transfer', - 'LocalBank', - 'local banks', - 'Local banks', - 'Local Banks', - 'Local bank transfer', - 'Local bank Transfers', - 'Local deposits', - 'Local deposit', - 'local deposits', - 'BANKTRANSFERS', - 'Bank Deposits', - 'Bank deposit and transfer', - 'Bank transfer and e-wallets', - 'BankDeposit', - 'Fiat', - 'LOCALBANK', - 'OnlineTransfer', - 'ZWbanktransfers', - 'localbanktransfer', - 'Bank transfer Bank wire', - ], - 'Bank wire': [ - 'bank', - 'Bank', - 'BANK', - 'bank payment', - 'banks', - 'Banks', - 'bank wire', - 'bankwire', - 'Bank wire', - 'Bankwire', - 'Bank Wire', - 'BankWire', - 'BANKWIRE', - 'Bank wire and e-wallets', - 'Bank wire and E-wallets', - 'Bank wires', - 'Bankwires', - 'bank wires and e-wallet', - 'Bank wires and e-wallets', - 'BankWire transfer', - 'E-wallets and bank wires', - 'local bank wire', - 'LocalBankWire', - 'LocalBankwire', - 'Wire Bank Transfer', - 'WIRE TRANSFER', - 'Bank Wire transfer', - 'Fiat', - 'OnlineTransfer', - 'Bank transfer Bank wire', - ], - BankABC: ['BankABC', 'BANCABC BANK'], - 'BCA bank': ['BCA bank', 'BCA', 'BankBCA', 'bca'], - 'BDO Unibank': ['BDO Unibank', 'BDO'], - BHIM: ['BHIM', 'Bhim', 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe'], - 'BMCE Bank': ['BMCE Bank', 'Bmce Bank'], - 'CABS Bank': ['CABS Bank', 'Cabs bank', 'CABS transfer'], - Card: [ - 'Card', - 'card', - 'cards', - 'Cards', - 'Credit card', - 'Debit Card', - 'Mastercard', - 'MasterCard', - 'visa', - 'Visa', - 'VISA', - 'Visa card', - 'Bank cards', - 'Carteiras Electronicas', - 'Fiat', - 'Master card', - ], - Cash: [ - 'cash', - 'Cash', - 'Cash deposit', - 'Cash deposits', - 'Cash in USD or Local', - 'electronic transfers and cash deposits', - 'FNB cash deposit', - 'physical local and foreign bank notes', - 'USD', - 'USD cash', - 'Cash Deposit', - 'Fiat', - 'INR', - 'USDCash', - 'Zwcash', - ], - 'Cash send ABSA bank': [ - 'Cash send ABSA bank', - 'ABSA Cash Send', - 'Cashsend', - 'Cash Send', - 'CashSend', - 'cash send Absa', - 'Cash send Absa bank', - ], - 'Chipper Cash': ['Chipper Cash', 'Chipper', 'Chippercash', 'Chipperchash'], - 'CIH Bank': ['CIH Bank', 'Cih Bank'], - CIMB: ['CIMB', 'CIMBNIAGA', 'NIAGA'], - 'City Hopper': ['City hopper', 'City Hopper'], - 'Co-operative Bank of Kenya': ['Co-operative Bank of Kenya', 'cooperativebank'], - 'Commercial Bank': ['Commercial Bank', 'Commercialbank'], - 'CRDB Bank': ['CRDB Bank', 'CRDBBANK'], - Crypto: [ - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'bitcoin', - 'Bitcoin', - 'BITCOIN', - 'bitcoins', - 'Bitcoins', - 'btc', - 'BTC', - 'btc smega', - 'Cripto', - 'crypto', - 'Crypto', - 'Cyptocurrency', - 'cryptocurrencies', - 'Cryptocurrencies', - 'Crypto Currencies', - 'CRYPTOCURRENCIES', - 'cryptocurrency', - 'Cryptocurrency', - 'CRYPTOCURRENCY', - 'Cryptos', - 'ETH', - 'eUSDT', - 'EUSDT', - 'LTC', - 'Tether', - 'TRON', - 'USDC', - 'USDT', - 'UST', - 'We accept Crypto', - 'BCH', - 'Btc', - 'Criptomoedas', - 'Crypto Payment', - 'Crypto transfer', - 'CryptoTransfer', - 'E-Wallets and Crypto', - 'E-wallets and Crypto', - 'Ethereum', - 'Etherium', - 'Litecoin', - 'Skrill Neteller Crypto', - 'SkrillCrypto', - 'Tether ERC20', - 'Tether Omni', - 'Thether', - 'Usdt', - 'cryptos', - 'ethereum', - 'litecoin', - ], - 'Diamond Bank': ['Diamond bank', 'Diamond Bank', 'DiamondBank'], - 'E-Mola': ['E-Mola', 'E-mola', 'Emola'], - 'E-money': ['E-money', 'e money'], - 'E-payment': [ - 'E-payment', - 'all form of E-payments', - 'All form of E-payments', - 'all forms of E-payments', - 'and all other forms of Epayment', - 'bank transfer and all form of E-payments', - 'Bank Transfer and all Forms of E-payments', - 'E-payments', - 'Epayments', - 'All forms of E-Payments', - 'DigitalPayment', - 'OnlineTransfer', - 'all forms of E-Payment', - ], - 'E-transfer': ['E-transfer', 'electronic transfers and cash deposits', 'E-Transfers', 'OnlineTransfer'], - 'E-wallet': [ - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'Bank and E-wallet', - 'bank ewallet', - 'Bank wire and e-wallets', - 'Bank wire and E-wallets', - 'bank wires and e-wallet', - 'Bank wires and e-wallets', - 'Digital Wallets', - 'electronic wallets', - 'e-wallers', - 'e-wallet', - 'ewallet', - 'eWallet', - 'E-wallet', - 'Ewallet', - 'EWALLET', - 'E-wallet Bank transfer', - 'E wallet FNB', - 'E-wallet payment', - 'Ewallet payment', - 'e-wallets', - 'ewallets', - 'e-Wallets', - 'e-WALLETS', - 'E- wallets', - 'E-wallets', - 'Ewallets', - 'E-Wallets', - 'E-wallets and bank wires', - 'fnb ewallet', - 'MY WALLET', - 'wallet', - 'Bank transfer and e-wallets', - 'E-Wallets and Crypto', - 'E-wallets and Crypto', - 'E-Wallet', - 'EWallets', - 'Fiat', - 'OnlineTransfer', - 'ewalllets', - 'ewalltets', - 'local bank wallets and Orange money', - ], - Easypaisa: ['easypaisa', 'Easy paisa', 'Easypaisa', 'Easy Paisa', 'EasyPaisaTransfer'], - Ecobank: ['Ecobank', 'Eco Bank', 'ECO BANK', 'Eco bank Transfers'], - EcoCash: [ - 'Eco cash', - 'Ecocash', - 'EcoCash', - 'ECOCASH', - 'Ecocash FCA', - 'Ecocash method', - 'ECOCASH WALLET', - 'Ecocash ZWL', - 'EcocashMobileMoney', - 'Zwecocash', - ], - 'Electronic Funds Transfer (EFT)': ['Electronic Funds Transfer (EFT)', 'EFT'], - 'Equity Bank': ['Equity bank', 'Equity Bank', 'equitybankmoneytransfer'], - 'EU Mobile Money': ['EU Mobile Money', 'all mobile money', 'EU MONEY'], - EzyPesa: ['EzyPesa', 'Ezypesa', 'Ezzy pesa', 'Ezzy Pesa', 'EzzyPesa'], - FasaPay: ['fasapay', 'Fasa pay', 'FasaPay'], - 'Fast Payment': ['Fast payment', 'Fast Payment'], - 'Faysal Bank': ['Faysal Bank', 'FaysalBank'], - 'FBC Bank': ['FBC Bank', 'FBC BANK'], - 'Fidelity Bank': ['Fidelity Bank', 'fidelitybank'], - Finbank: ['Finbank', 'Fin bank', 'FinBank'], - 'First Bank of Nigeria': [ - 'First Bank of Nigeria', - 'First bank', - 'First Bank', - 'FirstBank', - 'FIRST BANK', - 'Firstbank', - ], - 'First City Monument Bank (FCMB)': ['First City Monument Bank (FCMB)', 'FCMB', 'fcmb'], - 'First MicroFinanceBank (FMFB)': ['First MicroFinanceBank (FMFB)', 'FMFB'], - 'First National Bank (FNB)': [ - 'First National Bank (FNB)', - 'Direct deposit FNB and ABSA', - 'E wallet FNB', - 'First National Bank', - 'fnb', - 'FNB', - 'FNB ATM deposit', - 'Fnbbank', - 'FNB Bank', - 'FNBB Bank Transfer', - 'FNB cash deposit', - 'fnb ewallet', - 'FNB First National Bank', - 'FNB pay2cell', - 'FNB pay to cell', - 'FNB pay to sell', - 'Pay to cell FNB', - 'FNB bank transfer', - 'FNBB', - 'FNBBank', - 'FirNationalBank', - 'First National Bank of Botswana', - 'Firstnationalbank', - 'Fnb', - ], - Gmoney: ['Gmoney', 'GMONEY'], - 'Google Pay': [ - 'Google Pay', - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'Google pay', - 'gpay', - 'Gpay', - 'GPay', - ], - 'Grup BCA': ['Grup BCA', 'GrupBCA'], - 'GT bank': [ - 'GT bank', - 'Gtb', - 'GTB', - 'Gt Bank', - 'GT Bank', - 'GTBank', - 'GT BANK', - 'Gtbank', - 'Guarantee Trust Bank', - 'GuarantyTrustBank', - ], - Halopesa: ['halopesa', 'Halo pesa', 'Halopesa', 'Halo Pesa', 'HaloPesa', 'HALOPESA'], - 'Hatton National Bank': ['Hatton National Bank', 'HattonNationalBank'], - HBL: ['HBL', 'HBLMFB', 'KONNET HBL'], - Help2Pay: ['Help2Pay', 'help2pay'], - 'HNB Bank': ['HNB Bank', 'HNB'], - 'IMPS Transfer': ['imps', 'Imps', 'IMPS', 'IMPS Transfer'], - 'ING Bank': ['ING Bank', 'ING'], - Innbucks: ['Innbucks', 'INNBUCKS'], - 'Instant Money': [ - 'Instant Money', - 'InstantMoney', - 'Instant money stambic bank', - 'Instant money stanbic', - 'Instant money', - ], - 'Inter Bank Fund Transfer': ['Inter Bank Fund Transfer', 'InterBankfundtransfer', 'Interbank Transfer'], - 'Itau Bank': ['Itau Bank', 'Itau'], - IZI: ['IZI', 'Izzy'], - JazzCash: ['JazzCash', 'jazzcash', 'Jazz cash', 'Jazzcash', 'Jazz-Cash', 'JazzCashTransfer'], - JENIUS: ['JENIUS', 'Jenius'], - Jeton: ['Jeton', 'jeton', 'JetonWallet'], - 'Key Stone Bank': ['Key Stone Bank', 'Keystone'], - 'Kuda Bank': [ - 'Kuda Bank', - 'KUDA BANK', - 'Kuda MFB', - 'KudaMFB', - 'KUDA MICROFINANCE BANK 2014563937', - 'Kuda Microfinance', - 'KUDA', - ], - 'Luno Wallet': ['Luno Wallet', 'Luno', 'Luno crypto wallet', 'Luno e-wallet', 'Luno ewallet', 'luno'], - 'M-PESA': [ - 'AbesafaricomMpesa Transfers', - 'mpesa', - 'M pesa', - 'M-pesa', - 'Mpesa', - 'M Pesa', - 'M-Pesa', - 'MPesa', - 'M PESA', - 'M-PESA', - 'MPESA', - 'M-Pesa Tigo-Pesa T-Pesa', - 'Pesa', - 'safaricom mpesa', - 'MPESA 0710393947 Albert Kyalo', - 'VodacomMpesa', - ], - 'Mandiri Bank': ['Mandiri Bank', 'Mandiri', 'MANDIRI', 'MandiriSyariah', 'BankMandiri'], - 'Meezan Bank': ['Meezan Bank', 'MeezanBank'], - 'Millenium Bim Visa': ['Millenium Bim Visa', 'Millenium Bim'], - MIX: ['mix', 'Mix', 'MIX', 'Mixed'], - 'Mobile money': [ - 'all mobile money', - 'mobile banking', - 'Mobile banking', - 'Mobile money', - 'Mobile Money', - 'MobileMoney', - 'Mobile money MTN', - 'Mobile Money transfer', - 'MOBILE MONEY TRANSFER', - 'Mobile money transfers', - 'Mobilemoneyoption', - 'OnlineTransfer', - ], - 'Mojo Mula': ['Mojo money', 'Mojo Mula', 'MOJO MULA', 'MoMo pay', 'Mojo Moolah'], - MoMo: ['MoMo', 'MOMO', 'MoMo pay', 'MTN MOMO', 'MTNMOMO'], - MoneyGram: ['Moneygram', 'Money Gram', 'MoneyGram', 'Money grame'], - 'MTN MOMO': [ - 'all mobile money', - 'Mobile money MTN', - 'MoMo', - 'MOMO', - 'MTN', - 'MTN mobile money', - 'MTN Mobile money', - 'MTN Mobile Money', - 'MTN MOBILE MONEY', - 'MTNMOBILEMONEY', - 'MTN MOMO', - 'MTNMOMO', - 'MTN MONEY', - ], - 'Mukuru money transfers': ['Mukuru', 'Mukuru money transfers', 'MukuruMoneyTransfer', 'USDMukurutransfer'], - 'MyZaka Mascom Money': [ - 'MyZaka Mascom Money', - 'mascom', - 'mascom myZaka', - 'Mascom MyZaka', - 'myzaka', - 'My zaka', - 'Myzaka', - 'MyZaka', - 'My zaka mascom money', - 'my Zaka', - 'myzaaka', - ], - Neft: ['neft', 'Neft', 'NEFT'], - Nequi: ['Nequi', 'Nequi o Daviplata al 300 6839026'], - Neteller: ['neTeller', 'Neteller', 'NETELLER', 'NETelle', 'Skrill Neteller Crypto', 'neteller', 'netteller'], - 'Nigeria local bank': ['Nigeria Local', 'Nigeria local bank', 'NIGERIA LOCAL BANK'], - 'NMB Bank': ['NMB Bank', 'NATIONALMICROFINANCEBANK', 'Nmb bank'], - 'One Money': ['OM', 'Onemoney', 'One Money', 'One money service', 'OneMoney', 'OneMoneyMobileMoney'], - Opay: ['Opay', 'OPAY'], - 'Orange Money Transfer': [ - 'Absa fund transfer and orange money services', - 'Orange Cameroon', - 'orange money', - 'orangemoney', - 'Orange money', - 'Orangemoney', - 'Orange Money', - 'OrangeMoney', - 'ORANGE MONEY', - 'Orange Money Transfer', - 'local bank wallets and Orange money', - ], - PalmPay: ['PalmPay', 'PALMPAY'], - 'Pay safe Card': ['paysafecard', 'Pay safe Card'], - Pay2Cell: [ - 'FNB pay2cell', - 'FNB pay to cell', - 'FNB pay to sell', - 'Pay2cell', - 'Pay2Cell', - 'PAY2CELL', - 'pay to cell', - 'Pay to cell', - 'Paytocell', - 'Pay to Cell', - 'Pay to cell FNB', - 'PayToCell', - 'pay2cell', - ], - 'Payment Checks': ['Payment checks', 'Payment Checks'], - PayPal: [ - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'Paypal', - 'PayPal', - 'PAYPAL', - 'paypal', - ], - PayTM: ['Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', 'Paytm', 'PayTM'], - 'Perfect Money': [ - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'perfect money', - 'perfectmoney', - 'Perfect money', - 'Perfectmoney', - 'Perfect Money', - 'PerfectMoney', - 'PERFECT MONEY', - 'Perfect Money and Webmoney', - 'PM', - 'PERFECTMONEY', - 'PERFECT', - ], - 'Permata Bank': ['Permata Bank', 'PermataBank', 'PERMATA'], - PhonePhe: [ - 'PhonePhe', - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'Phonepay', - 'phonepe', - 'Phonepe', - 'PhonePe', - 'Phone pay', - 'PhonePay', - ], - Pix: ['Pix', 'PIX'], - 'Polaris Bank': ['Polaris Bank', 'Polaris'], - 'Ponto 24': ['Conta movel', 'Conta Movel', 'ContamovelBCI', 'Ponto 24', 'Ponto24'], - 'Pos deposit': ['Pos', 'POS', 'Pos deposit'], - 'Postal transfer': ['Postal transfer', 'Egyptian postal transfers'], - RIA: ['Ria', 'RIA'], - 'RTGS Transfers': ['RTGS Transfers', 'rtgs', 'RTGS', 'Rtgs bank transfer', 'RTGS transfers', 'Rtgs'], - Safaricom: ['Safaricom', 'AbesafaricomMpesa Transfers', 'AbeSafaricomMpesaTransfers', 'safaricom mpesa'], - 'Sama Money': ['Sama Money', 'Sama money'], - ShopeePay: ['ShopeePay', 'SHOPEEPAY'], - Skrill: [ - 'Skrill', - 'Skill', - 'Skril', - 'skrill', - 'SKRILL', - 'skrillpayments', - 'Skrll', - 'SkrillCrypto', - 'Skrill Neteller Crypto', - ], - Smega: ['btc smega', 'smega', 'Smega'], - 'Stanbic Bank': [ - 'Instant money stambic bank', - 'Instant money stanbic', - 'stanbic', - 'Stanbic', - 'Stanbic Bank', - 'StanbicBank', - 'Stanbic Bank Transfer', - 'Stanbic Money Transfer', - 'Standbic', - 'Stanbic IBTC', - 'Stanbic bank', - ], - 'Standard Bank Namibia': ['Standard Bank Namibia', 'Standard Bank', 'StandardBank'], - 'Standard Charted Bank': [ - 'STANCHART', - 'Standard Charted Bank', - 'Standard chartered', - 'Standard chartered bank', - 'Standard Chartered Bank Transfer', - 'Standard Chatterd Bank', - ], - 'Steward remit': ['Steward remit', 'Steward Remmitt'], - 'T-pesa': ['M-Pesa Tigo-Pesa T-Pesa', 'Pesa', 'T-pesa', 'Tpesa', 'T PESA', 'TTCLpesa'], - 'Tigo Cash': ['Tigo', 'Tigo Cash', 'AirtelTigo cash'], - 'Tigo Mobile Money': [ - 'Tigo Mobile Money', - 'Airtel Tigo', - 'all mobile money', - 'Tigo', - 'TIGO MOBILE MONEY', - 'TIGOMOBILEMONEY', - 'AirtelTigo cash', - ], - 'Tigo Pesa': [ - 'M-Pesa Tigo-Pesa T-Pesa', - 'Pesa', - 'Tigo', - 'tigopesa', - 'Tigo pesa', - 'Tigopesa', - 'Tigo Pesa', - 'TigoPesa', - 'TIGO PESA', - 'TTCLpesa', - 'TIGOPESA', - ], - 'Transferencia bancaria': [ - 'Transferencia bancaria', - 'Transferencia Eletronica TED', - 'Transferencias bancarias', - 'Ted', - 'Transferencia Bancaria', - ], - 'UBA Bank': ['UBA', 'UBA Bank', 'UBA BANK'], - 'Union Bank': ['Union Bank', 'Unionbank', 'Union'], - 'United Bank Limited (UBL)': ['United Bank Limited (UBL)', 'UBL Bank'], - UPI: [ - 'All UPI Transfer', - 'Banks BHIMUP BTC Ewallet GooglePay LocalBank Paypal Paytm Perfect Money PhonePhe', - 'upi', - 'UPI', - 'UPI transfer', - 'AmazonUPI', - 'PaytmUPI', - 'Upi', - ], - 'USSD code transfer': [ - 'USSD code transfer', - 'Or USSD transfer from all Nigeria banks', - 'USSD Code', - 'USSD CODE', - 'Ussd code Transfer from all Nigerian banks', - 'Ussd transfer', - 'USSD transfer', - 'USSD Transfer', - 'ussd transfer', - ], - Vodacom: ['Vodacom', 'VodacomMpesa'], - 'Vodafone Cash': ['Vodafon Cash Methods', 'Vodafone cash', 'Vodafone Cash', 'VODAFONE CASH', 'VODAFONECASH'], - Webmoney: ['Perfect Money and Webmoney', 'Webmoney', 'WebMoney', 'Web Money', 'Web money'], - 'WeChat Pay': ['WeChat Pay', 'WeChatPay'], - 'Wema Bank': ['Wema Bank', 'Wema'], - WesternUnion: ['Western union', 'Western Union', 'WesternUnion', 'westernunion'], - Wise: ['Wise', 'transferwise'], - 'World Remit': ['World remit', 'World Remit', 'CoinbaseworldRemit'], - 'Zanaco bank': ['ZANACO', 'Zanaco bank'], - 'Zenith bank': ['Zenith bank', 'Zenithbank', 'Zenith Bank', 'ZenithBank', 'ZENITH BANK', 'Zenith', 'zenithbank'], - Zipit: ['Zipit', 'ZIPIT', 'ZIPIT bank transfers'], -}; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/index.ts new file mode 100644 index 000000000000..e03ccec44f2f --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/index.ts @@ -0,0 +1,3 @@ +import { PaymentAgentDepositModule } from './lib/PaymentAgentDeposit'; + +export { PaymentAgentDepositModule }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.module.scss b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.module.scss new file mode 100644 index 000000000000..d0f475e240df --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.module.scss @@ -0,0 +1,15 @@ +.container { + display: flex; + flex-direction: column; + gap: 1.6rem; + margin: 0 auto; +} + +.search-container { + display: flex; + gap: 1.6rem; + + @include mobile-cashier-v2 { + flex-direction: column; + } +} diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.tsx b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.tsx new file mode 100644 index 000000000000..51f1b55dc63c --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/PaymentAgentDeposit.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Loader, Text } from '@deriv-com/ui'; +import { PaymentAgentMethodsDropdown, PaymentAgentSearchBox } from '../../components'; +import { PaymentAgentProvider, usePaymentAgentContext } from '../../provider'; +import { PaymentAgentDepositList } from './components'; +import styles from './PaymentAgentDeposit.module.scss'; + +const PaymentAgentDeposit = () => { + const { isPaymentAgentListLoading } = usePaymentAgentContext(); + + if (isPaymentAgentListLoading) return ; + + return ( +
+ Contact your preferred payment agent for payment instructions and make your deposit. +
+ + +
+ +
+ ); +}; + +const PaymentAgentDepositModule = () => { + return ( + + + + ); +}; + +export default PaymentAgentDepositModule; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/__tests__/PaymentAgentDeposit.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/__tests__/PaymentAgentDeposit.spec.tsx new file mode 100644 index 000000000000..f1114a0c63d0 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/__tests__/PaymentAgentDeposit.spec.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentDeposit from '../PaymentAgentDeposit'; +import { usePaymentAgentContext } from '../../../provider'; + +const mockUsePaymentAgentContext = usePaymentAgentContext as jest.MockedFunction; + +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + Loader: () =>
Loader
, +})); + +jest.mock('../../../provider', () => ({ + PaymentAgentProvider: ({ children }: { children: React.ReactNode }) =>
{children}
, + usePaymentAgentContext: jest.fn(() => ({ + isPaymentAgentListLoading: false, + })), +})); + +jest.mock('../../../components', () => ({ + PaymentAgentMethodsDropdown: () =>
PaymentAgentMethodsDropdown
, + PaymentAgentSearchBox: () =>
PaymentAgentSearchBox
, +})); + +jest.mock('../components', () => ({ + PaymentAgentDepositList: () =>
PaymentAgentDepositList
, +})); + +describe('PaymentAgentDeposit', () => { + it('should render PaymentAgentDeposit component', () => { + render(); + + expect( + screen.getByText('Contact your preferred payment agent for payment instructions and make your deposit.') + ).toBeInTheDocument(); + expect(screen.getByText('PaymentAgentMethodsDropdown')).toBeInTheDocument(); + expect(screen.getByText('PaymentAgentSearchBox')).toBeInTheDocument(); + expect(screen.getByText('PaymentAgentDepositList')).toBeInTheDocument(); + }); + + it('should show Loader if isPaymentAgentListLoading is equal to true', () => { + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + mockUsePaymentAgentContext.mockReturnValueOnce({ + isPaymentAgentListLoading: true, + }); + + render(); + + expect(screen.getByText('Loader')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/.gitkeep b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/.gitkeep deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.module.scss b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.module.scss new file mode 100644 index 000000000000..c1df4280aeb0 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.module.scss @@ -0,0 +1,5 @@ +.container { + display: flex; + flex-direction: column; + gap: 1.6rem; +} diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.tsx b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.tsx new file mode 100644 index 000000000000..160a2e7d9b4b --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/PaymentAgentDepositList.tsx @@ -0,0 +1,28 @@ +import React, { useMemo } from 'react'; +import { Loader } from '@deriv-com/ui'; +import { PaymentAgentSearchWarning } from '../../../../components'; +import { usePaymentAgentContext } from '../../../../provider'; +import { PaymentAgentDepositCard } from '../PaymentAgentDepositCard'; +import styles from './PaymentAgentDepositList.module.scss'; + +const PaymentAgentDepositList = () => { + const { isSearchLoading, paymentAgentList } = usePaymentAgentContext(); + + const memoizedPaymentAgentList = useMemo( + () => + paymentAgentList?.map(paymentAgent => { + return ; + }), + [paymentAgentList] + ); + + if (isSearchLoading) return ; + + return ( +
+ {paymentAgentList?.length ? memoizedPaymentAgentList : } +
+ ); +}; + +export default PaymentAgentDepositList; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/__tests__/PaymentAgentDepositList.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/__tests__/PaymentAgentDepositList.spec.tsx new file mode 100644 index 000000000000..1c0f60581775 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/__tests__/PaymentAgentDepositList.spec.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentDepositList from '../PaymentAgentDepositList'; +import { usePaymentAgentContext } from '../../../../../provider'; + +const mockUsePaymentAgentContext = usePaymentAgentContext as jest.MockedFunction; + +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + Loader: () =>
Loader
, +})); + +jest.mock('../../../../../provider', () => ({ + usePaymentAgentContext: jest.fn(() => ({ + isSearchLoading: false, + paymentAgentList: [{ name: 'PaymentAgent-1' }, { name: 'PaymentAgent-2' }], + })), +})); + +jest.mock('../../PaymentAgentDepositCard', () => ({ + PaymentAgentDepositCard: ({ name }: { name: string }) =>
PaymentAgentDepositCard
, +})); + +jest.mock('../../../../../components', () => ({ + PaymentAgentSearchWarning: () =>
PaymentAgentSearchWarning
, +})); + +describe('PaymentAgentDepositList', () => { + it('should show 2 payment agent cards', () => { + render(); + + expect(screen.getAllByText('PaymentAgentDepositCard').length).toBe(2); + }); + + it('should show PaymentAgentSearchWarning when there are no payment agents', () => { + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + mockUsePaymentAgentContext.mockReturnValueOnce({ + isSearchLoading: false, + paymentAgentList: [], + }); + + render(); + + expect(screen.getByText('PaymentAgentSearchWarning')).toBeInTheDocument(); + }); + + it('should show Loader if isSearchLoading is equal to true', () => { + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + mockUsePaymentAgentContext.mockReturnValueOnce({ + isSearchLoading: true, + paymentAgentList: [], + }); + + render(); + + expect(screen.getByText('Loader')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/index.ts new file mode 100644 index 000000000000..25c894760cbe --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/PaymentAgentDepositList/index.ts @@ -0,0 +1 @@ +export { default as PaymentAgentDepositList } from './PaymentAgentDepositList'; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/index.ts index 2b06bbfaa69e..ba47d38acf95 100644 --- a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/index.ts +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/components/index.ts @@ -1,3 +1,4 @@ import { PaymentAgentDepositCard } from './PaymentAgentDepositCard'; +import { PaymentAgentDepositList } from './PaymentAgentDepositList'; -export { PaymentAgentDepositCard }; +export { PaymentAgentDepositCard, PaymentAgentDepositList }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/index.ts new file mode 100644 index 000000000000..bbec1a45640b --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/lib/PaymentAgentDeposit/index.ts @@ -0,0 +1 @@ +export { default as PaymentAgentDepositModule } from './PaymentAgentDeposit'; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/provider/PaymentAgentProvider.tsx b/packages/cashier-v2/src/lib/PaymentAgent/provider/PaymentAgentProvider.tsx new file mode 100644 index 000000000000..fc791a85dc12 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/provider/PaymentAgentProvider.tsx @@ -0,0 +1,124 @@ +import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'; +import debounce from 'lodash.debounce'; +import { usePaymentAgentList } from '@deriv/api-v2'; +import type { THooks } from '../../../hooks/types'; +import { shuffleArray } from '../../../utils'; + +type TPaymentAgentContext = { + isPaymentAgentListLoading: boolean; + isSearchLoading: boolean; + onChangeSearchTermHandler: (value: string) => void; + onSelectPaymentMethodHandler: (value: React.SyntheticEvent | string) => void; + paymentAgentList?: THooks.PaymentAgentList; + selectedPaymentMethod?: string; + supportedPaymentMethods: string[]; +}; + +const PaymentAgentContext = createContext(null); + +export const usePaymentAgentContext = () => { + const context = useContext(PaymentAgentContext); + + if (!context) + throw new Error('usePaymentAgentContext() must be called within a component wrapped in PaymentAgentProvider.'); + + return context; +}; + +const defaultPaymentMethod = '0'; + +const PaymentAgentProvider: React.FC = ({ children }) => { + const { data: list, isLoading: isPaymentAgentListLoading } = usePaymentAgentList(); + const allPaymentAgentList = useMemo(() => shuffleArray(list), [list]); + const [isSearchLoading, setIsSearchLoading] = useState(false); + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(defaultPaymentMethod); + const [searchTerm, setSearchTerm] = useState(''); + + const supportedPaymentMethods = useMemo(() => { + const supportedPaymentMethods = new Set(); + + allPaymentAgentList?.forEach(paymentAgent => { + paymentAgent.supported_payment_methods.forEach(({ payment_method: paymentMethod }) => { + if (!paymentMethod) return; + + if (!supportedPaymentMethods.has(paymentMethod)) { + supportedPaymentMethods.add(paymentMethod); + } + }); + }); + + return [...supportedPaymentMethods].sort((a, b) => a.localeCompare(b)); + }, [allPaymentAgentList]); + + const filteredByPaymentMethodPaymentAgentList = useMemo(() => { + return defaultPaymentMethod === selectedPaymentMethod + ? allPaymentAgentList + : allPaymentAgentList?.filter(paymentAgent => { + const paymentMethods = paymentAgent.supported_payment_methods; + const paymentMethodIndex = paymentMethods + .map(({ payment_method: paymentMethod }) => { + if (!paymentMethod) return; + return paymentMethod; + }) + .indexOf(selectedPaymentMethod); + + if (paymentMethodIndex !== -1) return paymentAgent; + }); + }, [allPaymentAgentList, selectedPaymentMethod]); + + const searchedByTermPaymentAgentList = useMemo(() => { + return !searchTerm + ? filteredByPaymentMethodPaymentAgentList + : filteredByPaymentMethodPaymentAgentList?.filter(paymentAgent => { + return paymentAgent.name?.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase()); + }); + }, [filteredByPaymentMethodPaymentAgentList, searchTerm]); + + const debouncedOnChangeSearchTermHandler = useMemo( + () => + debounce((value: string) => { + setSearchTerm(value); + setIsSearchLoading(false); + }, 500), + [] + ); + + const onSelectPaymentMethodHandler = useCallback( + (value: React.SyntheticEvent | string) => { + setSelectedPaymentMethod(value as string); + }, + [] + ); + + const onChangeSearchTermHandler = useCallback( + (value: string) => { + if (!value) { + debouncedOnChangeSearchTermHandler.cancel(); + setSearchTerm(''); + setIsSearchLoading(false); + return; + } + setIsSearchLoading(true); + debouncedOnChangeSearchTermHandler(value); + }, + [debouncedOnChangeSearchTermHandler] + ); + + return ( + + {children} + + ); +}; + +export default PaymentAgentProvider; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/PaymentAgentProvider.spec.tsx b/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/PaymentAgentProvider.spec.tsx new file mode 100644 index 000000000000..484b58bf5e52 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/PaymentAgentProvider.spec.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { act, waitFor } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; +import { mockPaymentAgents } from './mockPaymentAgents'; +import PaymentAgentProvider, { usePaymentAgentContext } from '../PaymentAgentProvider'; + +jest.mock('../../../../utils', () => ({ + shuffleArray: jest.fn(array => array), +})); + +jest.mock('@deriv/api-v2', () => ({ + ...jest.requireActual('@deriv/api-v2'), + usePaymentAgentList: jest.fn(() => ({ + data: mockPaymentAgents, + })), +})); + +describe('PaymentAgentProvider', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + + it('should return all payment agent list by default (5 elements)', () => { + const { result } = renderHook(() => usePaymentAgentContext(), { wrapper }); + + expect(result.current.paymentAgentList?.length).toBe(5); + expect(result.current.paymentAgentList?.length).toBe(mockPaymentAgents.length); + }); + + it('should properly filter payment agent list by selected payment method', () => { + const { result } = renderHook(() => usePaymentAgentContext(), { wrapper }); + + act(() => result.current.onSelectPaymentMethodHandler('Bank wire')); + expect(result.current.paymentAgentList?.length).toBe(2); + + act(() => result.current.onSelectPaymentMethodHandler('DiamondBank')); + expect(result.current.paymentAgentList?.length).toBe(1); + }); + + it('should properly filter payment agent list by search term', async () => { + const { result } = renderHook(() => usePaymentAgentContext(), { wrapper }); + + act(() => result.current.onChangeSearchTermHandler('one')); + await waitFor(() => expect(result.current.paymentAgentList?.length).toBe(3)); + + act(() => result.current.onChangeSearchTermHandler('Nimble')); + await waitFor(() => expect(result.current.paymentAgentList?.length).toBe(1)); + }); + + it('should return all payment agent list if there is no search term', async () => { + const { result } = renderHook(() => usePaymentAgentContext(), { wrapper }); + + act(() => result.current.onChangeSearchTermHandler('')); + await waitFor(() => expect(result.current.paymentAgentList?.length).toBe(5)); + }); +}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/mockPaymentAgents.ts b/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/mockPaymentAgents.ts new file mode 100644 index 000000000000..29d12d528641 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/provider/__tests__/mockPaymentAgents.ts @@ -0,0 +1,173 @@ +export const mockPaymentAgents = [ + { + currencies: 'USD', + deposit_commission: '0', + email: 'malamtela9@gmail.com', + further_information: 'Payment agent services', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'A ONE EXCHANGE', + paymentagent_loginid: 'CR2086126', + phone_numbers: [ + { + phone_number: '+2349079375796', + }, + ], + summary: '', + supported_payment_methods: [ + { + payment_method: 'ewallets', + }, + ], + urls: [ + { + url: 'https://chat.whatsapp.com/JCV2wvFfBs06ZUNA8RzqTJ', + }, + ], + withdrawal_commission: '0', + }, + { + currencies: 'USD', + deposit_commission: '0', + email: 'Sendpel@gmail.com', + further_information: 'Fund your Deriv Account with AbdullNG (Fast&Reable)', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'AbdullNG one', + paymentagent_loginid: 'CR1733311', + phone_numbers: [ + { + phone_number: '+2348085074606', + }, + ], + summary: '', + supported_payment_methods: [ + { + payment_method: 'Bank wire', + }, + ], + urls: [ + { + url: 'https://wa.me/message/4GU2XRB5RDZ5F1', + }, + ], + withdrawal_commission: '0', + }, + { + currencies: 'USD', + deposit_commission: '1', + email: 'omoniyijoel10@gmail.com', + further_information: + 'I want to be making deposit and withdrawal for client. For funding their deriv account to trade and also to help client withdraw from their Deriv account.', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'Nimble Exchange', + paymentagent_loginid: 'CR4907956', + phone_numbers: [ + { + phone_number: '+2347012840691', + }, + ], + summary: '', + supported_payment_methods: [ + { + payment_method: 'Local bank transfer', + }, + { + payment_method: 'Perfect Money', + }, + ], + urls: [ + { + url: 'https://chat.whatsapp.com/LwczHOmUBlm766UvT5rb3S', + }, + ], + withdrawal_commission: '1', + }, + { + currencies: 'USD', + deposit_commission: '0', + email: 'bamsokisteve@gmail.com', + further_information: + 'STARPOINT EXCHANGE is a new-age cryptocurrency exchange platform with reliable, trusted, faster, and smarter service delivery.', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'STARPOINT EXCHANGE', + paymentagent_loginid: 'CR5524028', + phone_numbers: [ + { + phone_number: '+2348071495125', + }, + ], + summary: '', + supported_payment_methods: [ + { + payment_method: 'bank deposit', + }, + { + payment_method: 'bank transfer', + }, + { + payment_method: 'E-payments', + }, + { + payment_method: 'E-wallet', + }, + { + payment_method: 'Bank wire', + }, + ], + urls: [ + { + url: 'https://wa.me/message/P6XRWVO27Y7BN1', + }, + ], + withdrawal_commission: '0', + }, + { + currencies: 'USD', + deposit_commission: '0', + email: 'payments@truexgold.com', + further_information: + 'TruexGOLD is a subsidiary of Truex Access Resources, an e-currency exchange company registered in Nigeria with the CAC to provide various e-currency exchange services to Registered members of her official website truexgold.com. TruexGOLD makes it easier for you to fund and withdraw from your BINARY.COM account. TruexGOLD accepts local bank deposits, western union money transfer, money gram, bank wire and e-currencies such as Perfect Money, Okpay, Neteller, Webmoney and Payeer.', + max_withdrawal: '5000', + min_withdrawal: '10', + name: 'Truexgold one', + paymentagent_loginid: 'CR111145', + phone_numbers: [ + { + phone_number: '+2348183270403', + }, + ], + summary: '', + supported_payment_methods: [ + { + payment_method: 'DiamondBank', + }, + { + payment_method: 'FirstBank', + }, + { + payment_method: 'GTBank', + }, + { + payment_method: 'MoneyGram', + }, + { + payment_method: 'PerfectMoney', + }, + ], + urls: [ + { + url: 'https://truexgold.com/exchange_div_2_ngn/', + }, + { + url: 'https://truexgold.com/exchange_ngn_2_div/', + }, + ], + withdrawal_commission: '0', + }, +]; + +// eslint-disable-next-line @typescript-eslint/no-empty-function +it('plug', () => {}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/provider/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/provider/index.ts new file mode 100644 index 000000000000..b2e3da222fe7 --- /dev/null +++ b/packages/cashier-v2/src/lib/PaymentAgent/provider/index.ts @@ -0,0 +1,3 @@ +import PaymentAgentProvider, { usePaymentAgentContext } from './PaymentAgentProvider'; + +export { PaymentAgentProvider, usePaymentAgentContext }; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedIconPaymentMethod.spec.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedIconPaymentMethod.spec.ts deleted file mode 100644 index 5bd5d6cbb477..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedIconPaymentMethod.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { getNormalizedIconPaymentMethod } from '../getNormalizedIconPaymentMethod'; - -describe('should normalize icon payment methods', () => { - it('should normalize different spellings of "banktransfer" to "Bank"', () => { - const paymentMethods = ['banktransfer', 'bank-transfer', 'bankt ransfer', "bank'transfer", 'bank,transfer']; - - paymentMethods.forEach(paymentMethod => { - const result = getNormalizedIconPaymentMethod(paymentMethod); - - expect(result).toBe('Bank'); - }); - }); - - it('should normalize different spellings of "ewallets" to "Bank"', () => { - const paymentMethods = ['ewallets', 'ewalletpayment', 'ewallet-payment', 'ewallet payment', 'e-wallets']; - - paymentMethods.forEach(paymentMethod => { - const result = getNormalizedIconPaymentMethod(paymentMethod); - - expect(result).toBe('Ewallet'); - }); - }); - - it('should return empty string if there are no matches with provided payment method', () => { - const result = getNormalizedIconPaymentMethod('non-existent payment method'); - - expect(result).toBe(''); - }); -}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedPaymentMethod.spec.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedPaymentMethod.spec.ts deleted file mode 100644 index e3e5bd002bb6..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getNormalizedPaymentMethod.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { getNormalizedPaymentMethod } from '../getNormalizedPaymentMethod'; - -describe('should normalize payment methods', () => { - it('should normalize "ABSA Cash Send" to proper payment methods', () => { - const result = getNormalizedPaymentMethod('ABSA Cash Send'); - - expect(result).toEqual(['ABSA Bank', 'Cash send ABSA bank']); - }); - - it('should normalize "Direct deposit FNB and ABSA" to proper payment methods', () => { - const result = getNormalizedPaymentMethod('Direct deposit FNB and ABSA'); - - expect(result).toEqual(['ABSA Bank', 'Bank transfer', 'First National Bank (FNB)']); - }); - - it('should normalize "GPay" to proper payment method', () => { - const result = getNormalizedPaymentMethod('GPay'); - - expect(result).toEqual(['Google Pay']); - }); - - it('should return the same method that was provided', () => { - const result = getNormalizedPaymentMethod('mocked payment method'); - - expect(result).toEqual(['mocked payment method']); - }); -}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getSupportedPaymentMethods.spec.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getSupportedPaymentMethods.spec.ts deleted file mode 100644 index d65be128a3e8..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/__tests__/getSupportedPaymentMethods.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { getSupportedPaymentMethods } from '../getSupportedPaymentMethods'; - -describe('should combine all payment methods', () => { - const paymentAgentList = [ - { supported_payment_methods: [{ payment_method: 'ABSA Cash Send' }, { payment_method: 'GPay' }] }, - { - supported_payment_methods: [ - { payment_method: 'ABSA Cash Send' }, - { payment_method: 'GPay' }, - { payment_method: 'Visa' }, - ], - }, - { - supported_payment_methods: [ - { payment_method: 'Mastercard' }, - { payment_method: 'Visa' }, - { payment_method: 'My payment method' }, - ], - }, - { - supported_payment_methods: [], - }, - ]; - - it('should normalize, combine and sort all payment methods into an array without duplications', () => { - //@ts-expect-error since this is a mock, we only need partial properties of payment agent - const result = getSupportedPaymentMethods(paymentAgentList); - - expect(result).toEqual(['ABSA Bank', 'Card', 'Cash send ABSA bank', 'Google Pay', 'My payment method']); - }); -}); diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedIconPaymentMethod.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedIconPaymentMethod.ts deleted file mode 100644 index fc4d46e38928..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedIconPaymentMethod.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { paymentMethodIcons } from '../constants'; - -export const getNormalizedIconPaymentMethod = (paymentMethod: string) => { - return Object.entries(paymentMethodIcons).reduce( - (method, [key, value]) => - value.variants.some((el: string) => el === paymentMethod.replace(/[' ,-]/g, '').toLowerCase()) - ? key - : method, - '' - ); -}; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedPaymentMethod.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedPaymentMethod.ts deleted file mode 100644 index 302296d4e945..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/getNormalizedPaymentMethod.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { paymentMethods } from '../constants'; - -export const getNormalizedPaymentMethod = (paymentMethod: string) => { - const normalizedPaymentMethods = Object.entries(paymentMethods).reduce((methods, [key, value]) => { - if (value.includes(paymentMethod)) { - methods.push(key); - } - return methods; - }, [] as string[]); - - return normalizedPaymentMethods.length === 0 ? [paymentMethod] : normalizedPaymentMethods; -}; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/getSupportedPaymentMethods.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/getSupportedPaymentMethods.ts deleted file mode 100644 index b3f8f95a673a..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/getSupportedPaymentMethods.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { THooks } from '../../../hooks/types'; -import { getNormalizedPaymentMethod } from './getNormalizedPaymentMethod'; - -export const getSupportedPaymentMethods = (paymentAgentList?: THooks.PaymentAgentList) => { - const supportedPaymentMethods = new Set(); - - paymentAgentList?.forEach(paymentAgent => { - paymentAgent.supported_payment_methods - .map(({ payment_method: paymentMethod }) => { - if (!paymentMethod) return; - - const normalizedPaymentMethods = getNormalizedPaymentMethod(paymentMethod); - - //remove Skrill and Neteller from payment methods list (dropdown menu) as per mandate from Paysafe - return normalizedPaymentMethods.filter(method => !['Neteller', 'Skrill'].includes(method)); - }) - .forEach((paymentMethod?: string[]) => { - if (!paymentMethod) return; - - paymentMethod.forEach(method => { - if (!supportedPaymentMethods.has(method)) { - supportedPaymentMethods.add(method); - } - }); - }); - }); - - return [...supportedPaymentMethods].sort((a, b) => a.localeCompare(b)); -}; diff --git a/packages/cashier-v2/src/lib/PaymentAgent/utils/index.ts b/packages/cashier-v2/src/lib/PaymentAgent/utils/index.ts deleted file mode 100644 index f0b817f75216..000000000000 --- a/packages/cashier-v2/src/lib/PaymentAgent/utils/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './getNormalizedIconPaymentMethod'; -export * from './getNormalizedPaymentMethod'; -export * from './getSupportedPaymentMethods'; diff --git a/packages/cashier-v2/src/routes/Router.tsx b/packages/cashier-v2/src/routes/Router.tsx index f0d52c5d29dc..3852637ae66c 100644 --- a/packages/cashier-v2/src/routes/Router.tsx +++ b/packages/cashier-v2/src/routes/Router.tsx @@ -7,9 +7,10 @@ import DepositIcon from '../assets/images/ic-cashier-add.svg'; import WithdrawalIcon from '../assets/images/ic-cashier-minus.svg'; import OnRampIcon from '../assets/images/ic-cashier-on-ramp.svg'; import PaymentAgentIcon from '../assets/images/ic-payment-agent.svg'; -import { DummyComponent } from '../components'; +import { DummyComponent, PageContainer } from '../components'; import { Cashier } from '../containers'; import { Deposit, PaymentAgentTransfer, Withdrawal } from '../flows'; +import { PaymentAgentDepositModule } from '../lib/PaymentAgent/lib/PaymentAgentDeposit'; import { TRouteTypes } from '../types'; import RouteWithSubRoutes from './RouteWithSubRoutes'; @@ -44,7 +45,11 @@ const routesConfig: TRouteTypes.IRouteConfig[] = [ }, { path: cashierPathRoutes.cashierPaymentAgents, - component: DummyComponent, + component: () => ( + + + + ), icon: , title: 'Payment agents', }, diff --git a/packages/cashier-v2/src/utils/utils.ts b/packages/cashier-v2/src/utils/utils.ts index 460dd24eaf05..2443ce9cd702 100644 --- a/packages/cashier-v2/src/utils/utils.ts +++ b/packages/cashier-v2/src/utils/utils.ts @@ -5,3 +5,17 @@ export const isServerError = (error: unknown): error is TErrorTypes.TServerError export const capitalizeFirstLetter = (targetString: string) => targetString && targetString[0].toUpperCase() + targetString.slice(1); + +export const shuffleArray = (array: T[] = []): T[] => { + const firstDigit = (num: number) => Number(String(num)[0]); + + for (let i = array.length - 1; i > 0; i--) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const crypto = window.crypto || (window as any).msCrypto; // to make it working in MS Explorer + const randomArray = new Uint32Array(1); + const randomNumber = crypto.getRandomValues(randomArray); + const j = Math.floor((firstDigit(randomNumber[0]) / 10) * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +};