refactor: 🎨 migrated component to TSX (#48)

packages/account/build/webpack.config.js

@@ -46,7 +46,6 @@ module.exports = function (env) {
             'proof-of-address-container': 'Sections/Verification/ProofOfAddress/proof-of-address-container',
             'proof-of-identity': 'Sections/Verification/ProofOfIdentity/proof-of-identity.jsx',
             'proof-of-identity-container': 'Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx',
-            'proof-of-identity-config': 'Configs/proof-of-identity-config',
             'proof-of-identity-container-for-mt5':
                 'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
             'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',

packages/account/src/Components/sample-credit-card-modal/__tests__/sample-credit-card-modal.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { SampleCreditCardModal } from '../sample-credit-card-modal';
+
+describe('SampleCreditCardModal', () => {
+    let modal_root_el: HTMLDivElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('should render modal props', () => {
+        const props: React.ComponentProps<typeof SampleCreditCardModal> = {
+            is_open: true,
+            onClose: jest.fn(),
+        };
+        render(<SampleCreditCardModal {...props} />);
+        expect(screen.getByRole('heading')).toHaveTextContent('How to mask your card?');
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'creditcardsample');
+    });
+
+    it('should not render modal when is_open is false', () => {
+        const props: React.ComponentProps<typeof SampleCreditCardModal> = {
+            is_open: false,
+            onClose: jest.fn(),
+        };
+        render(<SampleCreditCardModal {...props} />);
+        expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+});

packages/account/src/Components/sample-credit-card-modal/index.js → packages/account/src/Components/sample-credit-card-modal/index.ts

@@ -1,3 +1,3 @@
-import { SampleCreditCardModal } from './sample-credit-card-modal.jsx';
+import { SampleCreditCardModal } from './sample-credit-card-modal';
 
 export default SampleCreditCardModal;

packages/account/src/Components/sample-credit-card-modal/sample-credit-card-modal.jsx → packages/account/src/Components/sample-credit-card-modal/sample-credit-card-modal.tsx

@@ -1,9 +1,21 @@
 import React from 'react';
 import { Modal, Text } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import { getUrlBase } from '@deriv/shared';
 
-export const SampleCreditCardModal = ({ is_open, onClose }) => {
+type TSampleCreditCardModalProps = {
+    is_open: boolean;
+    onClose: () => void;
+};
+
+/**
+ * Display a modal with a sample credit card image and instructions on how to mask the card.
+ * @name SampleCreditCardModal
+ * @param is_open - boolean to determine if the modal should be open or not
+ * @param onClose - function to close the modal
+ * @returns React component
+ */
+export const SampleCreditCardModal = ({ is_open, onClose }: TSampleCreditCardModalProps) => {
     return (
         <Modal
             className='sample-credit-card-modal'
@@ -14,9 +26,7 @@ export const SampleCreditCardModal = ({ is_open, onClose }) => {
         >
             <React.Fragment>
                 <Text className='sample-credit-card-modal-text' size='xs'>
-                    {localize(
-                        'Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤'
-                    )}
+                    <Localize i18n_default_text='Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤' />
                 </Text>
                 <img
                     src={getUrlBase('/public/images/common/sample-credit-card.png')}

packages/account/src/Sections/Verification/ProofOfOwnership/payment-method-config.js → packages/account/src/Configs/payment-method-config.tsx

@@ -6,7 +6,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcAdvcashLight',
         icon_dark: 'IcAdvcashDark',
         instructions: [
-            localize('Upload a screenshot of your name and email address from the personal information section.'),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of your name and email address from the personal information section.'
+            />,
         ],
         input_label: localize('Email address'),
         identifier_type: 'email_address',
@@ -25,6 +28,7 @@ const getPaymentMethodsConfig = () => ({
                         target='_blank'
                         rel='noreferrer'
                         href='https://app.astropay.com/profile'
+                        aria-label='Read more on AstroPay'
                     />,
                 ]}
             />,
@@ -35,24 +39,32 @@ const getPaymentMethodsConfig = () => ({
     beyonic: {
         icon_light: 'IcBeyonic',
         icon_dark: 'IcBeyonic',
-        instructions: [localize('Upload your mobile bill statement showing your name and phone number.')],
+        instructions: [
+            <Localize
+                key={0}
+                i18n_default_text='Upload your mobile bill statement showing your name and phone number.'
+            />,
+        ],
         input_label: localize('Mobile number'),
         identifier_type: 'mobile_number',
     },
     'boleto (d24 voucher)': {
         icon_light: 'IcBoletoD24VoucherLight',
         icon_dark: 'IcBoletoD24VoucherDark',
-        instructions: [localize('Upload your bank statement showing your name and account details.')],
+        instructions: [
+            <Localize key={0} i18n_default_text='Upload your bank statement showing your name and account details.' />,
+        ],
         input_label: localize('Bank account number'),
         identifier_type: 'bank_account_number',
     },
     visa: {
         icon_light: 'IcVisaLight',
         icon_dark: 'IcVisaDark',
         instructions: [
-            localize(
-                'Upload a photo showing your name and the first six and last four digits of your card number. If the card does not display your name, upload the bank statement showing your name and card number in the transaction history.'
-            ),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a photo showing your name and the first six and last four digits of your card number. If the card does not display your name, upload the bank statement showing your name and card number in the transaction history.'
+            />,
         ],
         input_label: localize('Card number'),
         identifier_type: 'card_number',
@@ -61,9 +73,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcMasterCardLight',
         icon_dark: 'IcMasterCardDark',
         instructions: [
-            localize(
-                'Upload a photo showing your name and the first six and last four digits of your card number. If the card does not display your name, upload the bank statement showing your name and card number in the transaction history.'
-            ),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a photo showing your name and the first six and last four digits of your card number. If the card does not display your name, upload the bank statement showing your name and card number in the transaction history.'
+            />,
         ],
         input_label: localize('Card number'),
         identifier_type: 'card_number',
@@ -72,10 +85,13 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcPixLight',
         icon_dark: 'IcPixDark',
         instructions: [
-            localize('Upload a screenshot of either of the following to process the transaction:'),
-            localize('- your account profile section on the website'),
-            localize('- the Account Information page on the app'),
-            localize('- your account details of the bank linked to your account'),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of either of the following to process the transaction:'
+            />,
+            <Localize key={1} i18n_default_text='- your account profile section on the website' />,
+            <Localize key={2} i18n_default_text='- the Account Information page on the app' />,
+            <Localize key={3} i18n_default_text='- your account details of the bank linked to your account' />,
         ],
         input_label: localize('User ID'),
         identifier_type: 'user_id',
@@ -84,9 +100,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcSkrillLight',
         icon_dark: 'IcSkrillDark',
         instructions: [
-            localize(
-                'Upload a screenshot of your name, account number, and email address from the personal details section of the app or profile section of your account on the website.'
-            ),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of your name, account number, and email address from the personal details section of the app or profile section of your account on the website.'
+            />,
         ],
         input_label: localize('Email address'),
         identifier_type: 'email_address',
@@ -116,6 +133,7 @@ const getPaymentMethodsConfig = () => ({
                         target='_blank'
                         rel='noreferrer'
                         href='https://onlinenaira.com/members/index.htm'
+                        aria-label='Read more on OnlineNaira'
                     />,
                 ]}
             />,
@@ -129,6 +147,7 @@ const getPaymentMethodsConfig = () => ({
                         target='_blank'
                         rel='noreferrer'
                         href='https://onlinenaira.com/members/bank.htm'
+                        aria-label='Read more on OnlineNaira'
                     />,
                 ]}
             />,
@@ -140,9 +159,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcWebMoneyLight',
         icon_dark: 'IcWebMoneyDark',
         instructions: [
-            localize(
-                'Upload a screenshot of your account and personal details page with your name, account number, phone number, and email address.'
-            ),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of your account and personal details page with your name, account number, phone number, and email address.'
+            />,
         ],
         input_label: localize('Account number'),
         identifier_type: 'account_number',
@@ -151,7 +171,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcZingpay',
         icon_dark: 'IcZingpay',
         instructions: [
-            localize('Upload your bank statement showing your name, account number, and transaction history.'),
+            <Localize
+                key={0}
+                i18n_default_text='Upload your bank statement showing your name, account number, and transaction history.'
+            />,
         ],
         input_label: localize('Bank account number'),
         identifier_type: 'bank_account_number',
@@ -160,7 +183,10 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcSticpayLight',
         icon_dark: 'IcSticpayDark',
         instructions: [
-            localize('Upload a screenshot of your name and email address from the personal details section.'),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of your name and email address from the personal details section.'
+            />,
         ],
         input_label: localize('Email address'),
         identifier_type: 'email_address',
@@ -169,15 +195,23 @@ const getPaymentMethodsConfig = () => ({
         icon_light: 'IcJetonLight',
         icon_dark: 'IcJetonDark',
         instructions: [
-            localize('Upload a screenshot of your name and account number from the personal details section.'),
+            <Localize
+                key={0}
+                i18n_default_text='Upload a screenshot of your name and account number from the personal details section.'
+            />,
         ],
         input_label: localize('Account number'),
         identifier_type: 'account_number',
     },
     other: {
         icon_light: 'IcOtherPaymentMethod',
         icon_dark: 'IcOtherPaymentMethod',
-        instructions: [localize('Upload a document showing your name and bank account number or account details.')],
+        instructions: [
+            <Localize
+                key={0}
+                i18n_default_text='Upload a document showing your name and bank account number or account details.'
+            />,
+        ],
         input_label: null,
         identifier_type: 'none',
     },

packages/account/src/Constants/poo-identifier.ts

@@ -0,0 +1,16 @@
+export const IDENTIFIER_TYPES = Object.freeze({
+    ACCOUNT_ID: 'account_id',
+    ACCOUNT_NUMBER: 'account_number',
+    BANK_ACCOUNT_NUMBER: 'bank_account_number',
+    CARD_NUMBER: 'card_number',
+    EMAIL_ADDRESS: 'email_address',
+    MOBILE_NUMBER: 'mobile_number',
+    USER_ID: 'user_id',
+});
+
+export const CARD_NUMBER = {
+    MAX_LENGTH: 19,
+    MIN_LENGTH: 16,
+};
+
+export const MAX_FILE_SIZE = 8000; // 8MB

packages/account/src/Containers/proof-of-ownership/__tests__/card.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Card from '../card';
+
+jest.mock('../expanded-card', () => jest.fn(() => <div>Expanded Card</div>));
+
+describe('Card', () => {
+    const mock_props: React.ComponentProps<typeof Card> = {
+        details: {
+            icon: 'IcVisaLight',
+            payment_method: 'visa',
+            items: [
+                {
+                    creation_time: '1699433416524',
+                    id: 4,
+                    payment_method: 'visa',
+                    documents_required: 1,
+                },
+            ],
+            instructions: ['mock instruction 1', 'mock instruction 2'],
+            input_label: 'Card number',
+            identifier_type: 'card_number',
+            is_generic_pm: false,
+            documents_required: 1,
+        },
+        index: 0,
+    };
+
+    it('should render payment method card', () => {
+        render(<Card {...mock_props} />);
+        expect(screen.getByText('visa')).toBeInTheDocument();
+    });
+
+    it('should render expanded card when clicked', () => {
+        render(<Card {...mock_props} />);
+
+        userEvent.click(screen.getByRole('button'));
+        expect(screen.getByText('Expanded Card')).toBeInTheDocument();
+    });
+
+    it('should close the rendered expanded card when clicked', () => {
+        render(<Card {...mock_props} />);
+
+        userEvent.click(screen.getByRole('button'));
+
+        expect(screen.getByText('Expanded Card')).toBeInTheDocument();
+
+        userEvent.click(screen.getByRole('button'));
+
+        expect(screen.queryByText('Expanded Card')).not.toBeInTheDocument();
+    });
+});

packages/account/src/Containers/proof-of-ownership/__tests__/example-link.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ExampleLink from '../example-link';
+
+describe('ExampleLink', () => {
+    let modal_root_el: HTMLDivElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('renders ExampleLink component', () => {
+        render(<ExampleLink />);
+        expect(screen.getByText('See example')).toBeInTheDocument();
+    });
+
+    it('should render SampleCreditCardModal when clicked', () => {
+        render(<ExampleLink />);
+
+        userEvent.click(screen.getByText('See example'));
+        expect(screen.getByText('How to mask your card?')).toBeInTheDocument();
+    });
+});