Skip to content

Commit

Permalink
refactor: 🎨 migrated component to TSX (#48) (binary-com#10116)
Browse files Browse the repository at this point in the history
* 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” <“yauheni@deriv.me”>

* 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” <“yauheni@deriv.me”>

* 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” <“yauheni@deriv.me”>
Co-authored-by: yauheni-deriv <103182683+yauheni-deriv@users.noreply.github.com>
  • Loading branch information
3 people committed Dec 28, 2023
1 parent 6a2c14c commit 7bc8fdc
Show file tree
Hide file tree
Showing 46 changed files with 1,295 additions and 1,096 deletions.
1 change: 0 additions & 1 deletion packages/account/build/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { SampleCreditCardModal } from './sample-credit-card-modal.jsx';
import { SampleCreditCardModal } from './sample-credit-card-modal';

export default SampleCreditCardModal;
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -25,6 +28,7 @@ const getPaymentMethodsConfig = () => ({
target='_blank'
rel='noreferrer'
href='https://app.astropay.com/profile'
aria-label='Read more on AstroPay'
/>,
]}
/>,
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -116,6 +133,7 @@ const getPaymentMethodsConfig = () => ({
target='_blank'
rel='noreferrer'
href='https://onlinenaira.com/members/index.htm'
aria-label='Read more on OnlineNaira'
/>,
]}
/>,
Expand All @@ -129,6 +147,7 @@ const getPaymentMethodsConfig = () => ({
target='_blank'
rel='noreferrer'
href='https://onlinenaira.com/members/bank.htm'
aria-label='Read more on OnlineNaira'
/>,
]}
/>,
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
},
Expand Down
20 changes: 0 additions & 20 deletions packages/account/src/Configs/proof-of-identity-config.ts

This file was deleted.

16 changes: 16 additions & 0 deletions packages/account/src/Constants/poo-identifier.ts
Original file line number Diff line number Diff line change
@@ -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
4 changes: 2 additions & 2 deletions packages/account/src/Containers/Account/account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading

0 comments on commit 7bc8fdc

Please sign in to comment.