refactor: 🎨 migrated component to TSX (#48) (#10116)

* refactor: 🎨 migrated component to TSX (#48)

* refactor: 🎨 migrated component to TSX

* refactor: ⚰️ unused import

* fix: 🎨 migrated config to tsx (#49)

* refactor: migrated components to tsx

* refactor: migrated components to tsx

* chore: added testcases

* chore: added testcases

* Merge branch 'master' into sprint-10/account-package-refactor

* fix: 🧪 fixed failing testcase

* fix: 🧪 fixed failing testcase

* Likhith/migrate poo form (#50)

* refactor: removed dead code

* chore: fixed error condition

* chore: update from master

* fix: error object props

* chore: poo ts init (#53)

* chore: poo ts init

* chore: remove query

* chore: some types fix

* chore: revert observer for poo form

---------

Co-authored-by: “yauheni-kryzhyk-deriv” <“[email protected]”>

* feat: refactored POO form values

* fix: Error text for Failure of IDV

* fix: file upload

* fix: POO validation

* fix: failing testcase

* fix: added validations

* fix: types of payment method

* fix: testcases for POO

* fix: code smells

* fix: resolved code smells

* refactor: types errors (#58)

Co-authored-by: “yauheni-kryzhyk-deriv” <“[email protected]”>

* fix: resolved code smells

* fix: code smells

* fix: async behavior

* fix: import constant

* fix: rename Const

* refactor: sonarcloud issues

* fix: incorporated review comments

* fix: Convert the conditional to a boolean to avoid leaked value

* fix: incorporated review comments

* refactor: incorporated review comments

* fix: removed duplicate status

* chore: poo-form review comments

* fix: code smells

* fix: failing testcase

* fix: wrong upload settings field name

* chore: unused import remove

* fix: duplicate filling of payment-method

* fix: removed unused import

* fix:reset form

* fix: resolved error display bugs

* Merge branch 'master' into sprint-10/account-package-refactor

* fix: issue related with POO disble

* fix: code smells

* fix: code smells

* refactor: incorporated review comments

* fix: removed prop drilling

* fix: incorporated useFileUploader hook

* refactor: removed hook implementation

* fix: resolved loading and validation

* fix: incorrect status display issue

* chore: removed console statements

* fix: reinitialize form on value change

---------

Co-authored-by: “yauheni-kryzhyk-deriv” <“[email protected]”>
Co-authored-by: yauheni-deriv <[email protected]>

Author: 3 people

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/Constants/idv-document-config.ts packages/account/src/Configs/idv-document-config.ts

@@ -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/Sections/Verification/ProofOfOwnership/payment-method-config.js packages/account/src/Configs/payment-method-config.tsx

@@ -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/Configs/proof-of-identity-config.ts

@@ -26,7 +26,7 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
         is_virtual,
         is_logged_in,
         is_logging_in,
-        is_pending_proof_of_ownership,
+        is_proof_of_ownership_enabled,
         landing_company_shortcode,
         should_allow_authentication,
         should_allow_poinc_authentication,
@@ -56,7 +56,7 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
                 }
 
                 if (route.path === shared_routes.proof_of_ownership) {
-                    route.is_disabled = is_virtual || !is_pending_proof_of_ownership;
+                    route.is_disabled = is_virtual || !is_proof_of_ownership_enabled;
                 }
 
                 if (route.path === shared_routes.proof_of_income) {

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

@@ -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();
+    });
+});