[account-v2]/likhith/coj-706/created accordion and modal component (b…

…inary-com#14676) * feat: created accordion and modal component * fix: incorporated code review comments * feat: incoprorated config for POO * feat: incoprorated config for POO * feat: incoprorated config for POO * fix: CI issues * Merge branch 'master' into likhith/COJ-709/POO-components * Merge branch 'master' into likhith/COJ-709/POO-components * Merge branch 'master' into likhith/COJ-709/POO-components * chore: update import for useOnClickOutside hook from deriv-com/ui to usehooks-ts (#74) * feat: added hook to generate POO data * Merge branch 'master' into likhith/COJ-709/POO-components * fix: incorporated review comments * feat: added util functions * fix: types issue * fix: removed unused import * fix: upgraded quill icons version * chore: refactored config * chore: added testcases * fix: incorporated review comment * fix: updated package version * fix: incorporated Snoar cloud suggestions * fix: element ref missing issue * fix: incorporate review comment * fix: modified config --------- Co-authored-by: Aum Bhatt <125039206+aum-deriv@users.noreply.github.com>
likhith-deriv · Apr 25, 2024 · 71c6056 · 71c6056
1 parent b1e97f2
commit 71c6056
Show file tree

Hide file tree

Showing 28 changed files with 967 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
@@ -11,11 +11,11 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "^1.12.17",
+        "@deriv-com/ui": "^1.14.1",
         "@deriv-com/utils": "^0.0.14",
         "@deriv/api-types": "^1.0.172",
         "@deriv/api-v2": "^1.0.0",
-        "@deriv/quill-icons": "^1.21.1",
+        "@deriv/quill-icons": "^1.22.4",
         "class-variance-authority": "^0.7.0",
         "dayjs": "^1.11.10",
         "formik": "^2.1.4",

diff --git a/packages/account-v2/src/App.tsx b/packages/account-v2/src/App.tsx
@@ -8,7 +8,11 @@ import { ACCOUNT_MODAL_REF } from './constants';
 import './index.scss';
 
 const App: React.FC = () => {
-    Modal.setAppElement(ACCOUNT_MODAL_REF);
+    if (document.getElementById(ACCOUNT_MODAL_REF.replace('#', ''))) {
+        // Set the Modal REF only if the element exists
+        Modal.setAppElement(ACCOUNT_MODAL_REF);
+    }
+
     return (
         <APIProvider standalone>
             <AuthProvider>

diff --git a/.../src/constants/connectedAppsConstants.tsx → ...2/src/constants/connectedAppsConstants.ts b/.../src/constants/connectedAppsConstants.tsx → ...2/src/constants/connectedAppsConstants.ts
diff --git a/packages/account-v2/src/constants/constants.ts b/packages/account-v2/src/constants/constants.ts
@@ -28,3 +28,9 @@ export const POI_SUBMISSION_STATUS = {
     selecting: 'selecting',
     submitting: 'submitting',
 } as const;
+
+export const EXTERNAL_LINKS = {
+    astroPayURL: 'https://app.astropay.com/profile',
+    onlinenairaBankURL: 'https://onlinenaira.com/members/bank.htm',
+    onlinenairaProfileURL: 'https://onlinenaira.com/members/index.htm',
+} as const;
diff --git a/...ccount-v2/src/constants/errorMessages.tsx → ...account-v2/src/constants/errorMessages.ts b/...ccount-v2/src/constants/errorMessages.tsx → ...account-v2/src/constants/errorMessages.ts
diff --git a/packages/account-v2/src/constants/index.ts b/packages/account-v2/src/constants/index.ts
@@ -7,5 +7,6 @@ export {
 export * from './constants';
 export * from './errorMessages';
 export * from './manualFormConstants';
+export * from './paymentMethodsConfig';
 export * from './routes';
 export * from './twoFactorAuthenticationConstants';
diff --git a/packages/account-v2/src/constants/paymentMethodsConfig.ts b/packages/account-v2/src/constants/paymentMethodsConfig.ts
@@ -0,0 +1,167 @@
+import {
+    DerivLightWalletIcon,
+    IconTypes,
+    PaymentMethodAdvcashBrandDarkIcon,
+    PaymentMethodAdvcashBrandIcon,
+    PaymentMethodAstropayBrandDarkIcon,
+    PaymentMethodAstropayBrandIcon,
+    PaymentMethodBeyonicBrandIcon,
+    PaymentMethodBoletoBrandIcon,
+    PaymentMethodBoletoWhiteIcon,
+    PaymentMethodJetonBrandIcon,
+    PaymentMethodMastercardBrandDarkIcon,
+    PaymentMethodMastercardBrandIcon,
+    PaymentMethodNetellerBrandIcon,
+    PaymentMethodNetellerWhiteIcon,
+    PaymentMethodOnlinenairaBrandDarkIcon,
+    PaymentMethodOnlinenairaBrandIcon,
+    PaymentMethodSkrillBrandIcon,
+    PaymentMethodSkrillWhiteIcon,
+    PaymentMethodSticpayBrandIcon,
+    PaymentMethodVisaBrandIcon,
+    PaymentMethodVisaWhiteIcon,
+} from '@deriv/quill-icons';
+import { TPaymentMethod } from 'src/types';
+
+/* eslint-disable sonarjs/no-duplicate-string */
+export const PAYMENT_METHOD_IDENTIFIER = Object.freeze({
+    accountID: 'account_id',
+    accountNumber: 'account_number',
+    bankAccountNumber: 'bank_account_number',
+    cardNumber: 'card_number',
+    email: 'email_address',
+    mobileNumber: 'mobile_number',
+    userID: 'user_id',
+});
+
+export const getPaymentMethodsConfig = () => ({
+    advcash: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.email,
+        inputLabel: 'Email address',
+    },
+    astropay: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.accountNumber,
+        inputLabel: 'Account number',
+    },
+    beyonic: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.mobileNumber,
+        inputLabel: 'Mobile number',
+    },
+    'boleto (d24 voucher)': {
+        identifier: PAYMENT_METHOD_IDENTIFIER.bankAccountNumber,
+        inputLabel: 'Bank account number',
+    },
+    jeton: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.accountNumber,
+        inputLabel: 'Account number',
+    },
+    mastercard: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.cardNumber,
+        inputLabel: 'Card number',
+    },
+    neteller: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.email,
+        inputLabel: 'Email address',
+    },
+    onlinenaira: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.accountID,
+        inputLabel: 'Account ID',
+    },
+    other: {
+        identifier: 'none',
+        inputLabel: null,
+    },
+    pix: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.userID,
+        inputLabel: 'User ID',
+    },
+    skrill: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.email,
+        inputLabel: 'Email address',
+    },
+    sticpay: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.email,
+        inputLabel: 'Email address',
+    },
+    visa: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.cardNumber,
+        inputLabel: 'Card number',
+    },
+    webmoney: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.accountNumber,
+        inputLabel: 'Account number',
+    },
+    zingpay: {
+        identifier: PAYMENT_METHOD_IDENTIFIER.bankAccountNumber,
+        inputLabel: 'Bank account number',
+    },
+});
+
+type TPaymentMethodIcon = Record<TPaymentMethod, { dark: IconTypes; light: IconTypes }>;
+
+export const getPaymentMethodIcon: TPaymentMethodIcon = {
+    advcash: {
+        dark: PaymentMethodAdvcashBrandDarkIcon,
+        light: PaymentMethodAdvcashBrandIcon,
+    },
+    astropay: {
+        dark: PaymentMethodAstropayBrandDarkIcon,
+        light: PaymentMethodAstropayBrandIcon,
+    },
+    beyonic: {
+        dark: PaymentMethodBeyonicBrandIcon,
+        light: PaymentMethodBeyonicBrandIcon,
+    },
+    'boleto (d24 voucher)': {
+        dark: PaymentMethodBoletoWhiteIcon,
+        light: PaymentMethodBoletoBrandIcon,
+    },
+    jeton: {
+        dark: PaymentMethodJetonBrandIcon,
+        light: PaymentMethodJetonBrandIcon,
+    },
+    mastercard: {
+        dark: PaymentMethodMastercardBrandDarkIcon,
+        light: PaymentMethodMastercardBrandIcon,
+    },
+    neteller: {
+        dark: PaymentMethodNetellerWhiteIcon,
+        light: PaymentMethodNetellerBrandIcon,
+    },
+    onlinenaira: {
+        dark: PaymentMethodOnlinenairaBrandDarkIcon,
+        light: PaymentMethodOnlinenairaBrandIcon,
+    },
+    other: {
+        // TODO: Change this icon once actual icon is available
+        dark: DerivLightWalletIcon,
+        light: DerivLightWalletIcon,
+    },
+    pix: {
+        // TODO: Change this icon once actual icon is available
+        dark: DerivLightWalletIcon,
+        light: DerivLightWalletIcon,
+    },
+    skrill: {
+        dark: PaymentMethodSkrillWhiteIcon,
+        light: PaymentMethodSkrillBrandIcon,
+    },
+    sticpay: {
+        dark: PaymentMethodSticpayBrandIcon,
+        light: PaymentMethodSticpayBrandIcon,
+    },
+    visa: {
+        dark: PaymentMethodVisaWhiteIcon,
+        light: PaymentMethodVisaBrandIcon,
+    },
+    webmoney: {
+        // TODO: Change this icon once actual icon is available
+        dark: DerivLightWalletIcon,
+        light: DerivLightWalletIcon,
+    },
+    zingpay: {
+        // TODO: Change this icon once actual icon is available
+        dark: DerivLightWalletIcon,
+        light: DerivLightWalletIcon,
+    },
+};
diff --git a/packages/account-v2/src/containers/MaskCardModal/MaskCardModal.tsx b/packages/account-v2/src/containers/MaskCardModal/MaskCardModal.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { DerivLightCreditCardSampleIcon } from '@deriv/quill-icons';
+import { Modal, Text } from '@deriv-com/ui';
+
+type TMaskCardModal = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const MaskCardModal = ({ isOpen, onClose }: TMaskCardModal) => {
+    return (
+        <Modal className='w-[440px]' isOpen={isOpen}>
+            <Modal.Header onRequestClose={onClose}>
+                <Text as='h3' size='md' weight='bold'>
+                    How to mask your card?
+                </Text>
+            </Modal.Header>
+            <Modal.Body>
+                <Text as='p' className='pt-20 pb-24 px-24' size='sm'>
+                    Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤
+                </Text>
+                <DerivLightCreditCardSampleIcon height={120} width={120} />
+            </Modal.Body>
+        </Modal>
+    );
+};
diff --git a/packages/account-v2/src/containers/MaskCardModal/__tests__/MaskCardModal.spec.tsx b/packages/account-v2/src/containers/MaskCardModal/__tests__/MaskCardModal.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Modal } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ACCOUNT_MODAL_REF } from 'src/constants';
+import { MaskCardModal } from '../MaskCardModal';
+
+describe('MaskCardModal', () => {
+    let elModalRoot: HTMLElement;
+
+    beforeAll(() => {
+        elModalRoot = document.createElement('div');
+        elModalRoot.setAttribute('id', ACCOUNT_MODAL_REF.replace('#', ''));
+        document.body.appendChild(elModalRoot);
+        Modal.setAppElement(ACCOUNT_MODAL_REF);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(elModalRoot);
+    });
+
+    it('should render correctly with the modal open', () => {
+        const isOpen = true;
+        const onClose = jest.fn();
+
+        render(<MaskCardModal isOpen={isOpen} onClose={onClose} />);
+
+        expect(screen.getByText('How to mask your card?')).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤'
+            )
+        ).toBeInTheDocument();
+    });
+
+    it('should close the modal when close icon is clicked', () => {
+        const isOpen = true;
+        const onClose = jest.fn();
+
+        render(<MaskCardModal isOpen={isOpen} onClose={onClose} />);
+
+        const elCloseIcon = screen.getByTestId('dt-close-icon');
+        userEvent.click(elCloseIcon);
+
+        expect(onClose).toHaveBeenCalled();
+    });
+});