From d7d78fbadbf8d14be0d42b8240ce21357b85a1a9 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Tue, 26 Sep 2023 15:37:58 +0400 Subject: [PATCH 01/17] fix: set form values --- .../financial-assessment.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index fb7902c9a9cb..3df0670b144a 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -540,8 +540,19 @@ const FinancialAssessment = observer(() => { placeholder={localize('Occupation')} is_align_text_left name='occupation' - list={getOccupationList()} - value={values.occupation} + list={ + values?.employment_status === 'Employed' + ? getOccupationList().filter( + item => item.value !== 'Unemployed' + ) + : getOccupationList() + } + value={ + values.employment_status === 'Employed' && + values.occupation === 'Unemployed' + ? '' + : values.occupation + } onChange={handleChange} handleBlur={handleBlur} error={touched.occupation && errors.occupation} @@ -552,8 +563,19 @@ const FinancialAssessment = observer(() => { placeholder={localize('Please select')} name='occupation' label={localize('Occupation')} - list_items={getOccupationList()} - value={values.occupation} + list_items={ + values?.employment_status === 'Employed' + ? getOccupationList().filter( + item => item.value !== 'Unemployed' + ) + : getOccupationList() + } + value={ + values.employment_status === 'Employed' && + values.occupation === 'Unemployed' + ? '' + : values.occupation + } error={touched.occupation ? errors.occupation : undefined} onChange={e => { setFieldTouched('occupation', true); From e562c04f6681359a1f1a6ddca729e31e06b5a17f Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Tue, 26 Sep 2023 15:51:06 +0400 Subject: [PATCH 02/17] fix: common formating function --- .../financial-assessment.tsx | 38 ++++++------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index 3df0670b144a..2247e7116261 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -342,6 +342,14 @@ const FinancialAssessment = observer(() => { return '80px'; }; + const getFormattedOccupationList = values => + values?.employment_status === 'Employed' + ? getOccupationList().filter(item => item.value !== 'Unemployed') + : getOccupationList(); + + const getFormattedOccupationValues = values => + values?.employment_status === 'Employed' && values?.occupation === 'Unemployed' ? '' : values?.occupation; + if (is_loading) return ; if (api_initial_load_error) return ; if (is_virtual) return ; @@ -540,19 +548,8 @@ const FinancialAssessment = observer(() => { placeholder={localize('Occupation')} is_align_text_left name='occupation' - list={ - values?.employment_status === 'Employed' - ? getOccupationList().filter( - item => item.value !== 'Unemployed' - ) - : getOccupationList() - } - value={ - values.employment_status === 'Employed' && - values.occupation === 'Unemployed' - ? '' - : values.occupation - } + list={getFormattedOccupationList(values)} + value={getFormattedOccupationValues(values)} onChange={handleChange} handleBlur={handleBlur} error={touched.occupation && errors.occupation} @@ -563,19 +560,8 @@ const FinancialAssessment = observer(() => { placeholder={localize('Please select')} name='occupation' label={localize('Occupation')} - list_items={ - values?.employment_status === 'Employed' - ? getOccupationList().filter( - item => item.value !== 'Unemployed' - ) - : getOccupationList() - } - value={ - values.employment_status === 'Employed' && - values.occupation === 'Unemployed' - ? '' - : values.occupation - } + list_items={getFormattedOccupationList(values)} + value={getFormattedOccupationValues(values)} error={touched.occupation ? errors.occupation : undefined} onChange={e => { setFieldTouched('occupation', true); From 04f13cc9196b5643337822c759040e27e9166b03 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Wed, 27 Sep 2023 23:08:08 +0400 Subject: [PATCH 03/17] fix: add id --- .../__tests__/financial-assessment.spec.tsx | 75 +++++++++++++++++++ .../financial-assessment.tsx | 4 + 2 files changed, 79 insertions(+) create mode 100644 packages/account/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx new file mode 100644 index 000000000000..a4550777315c --- /dev/null +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import FinancialAssessment from '../financial-assessment'; + +jest.mock('@deriv/shared/src/services/ws-methods', () => ({ + __esModule: true, + default: 'mockedDefaultExport', + WS: { + wait: jest.fn(() => Promise.resolve()), + setSettings: jest.fn(() => Promise.resolve({ error: '' })), + authorized: { + storage: { + getFinancialAssessment: jest.fn(() => + Promise.resolve({ + get_financial_assessment: { + account_turnover: '', + cfd_score: 0, + education_level: '', + employment_industry: '', + employment_status: 'Employed', + estimated_worth: '', + financial_information_score: '', + income_source: '', + net_income: '', + occupation: '', + source_of_wealth: '', + total_score: '', + trading_score: '', + }, + }) + ), + }, + }, + }, + useWS: () => undefined, +})); +jest.mock('@deriv/components', () => { + const original_module = jest.requireActual('@deriv/components'); + return { + ...original_module, + Loading: jest.fn(() => 'mockedLoading'), + }; +}); +describe('', () => { + const mock = mockStore({}); + const rendercomponent = () => { + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + render( + + + , + { wrapper } + ); + }; + it('should render FinancialAssessment component', async () => { + rendercomponent(); + await waitFor(() => { + expect(screen.getByText('Financial information')).toBeInTheDocument(); + expect(screen.getByText('Source of income')).toBeInTheDocument(); + expect(screen.getByText('Employment status')).toBeInTheDocument(); + expect(screen.getByText('Industry of employment')).toBeInTheDocument(); + expect(screen.getByText('Occupation')).toBeInTheDocument(); + expect(screen.getByText('Source of wealth')).toBeInTheDocument(); + expect(screen.getByText('Level of education')).toBeInTheDocument(); + expect(screen.getByText('Net annual income')).toBeInTheDocument(); + expect(screen.getByText('Source of wealth')).toBeInTheDocument(); + expect(screen.getByText('Estimated net worth')).toBeInTheDocument(); + expect(screen.getByText('Anticipated account turnover')).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index 2247e7116261..0e2b784832e6 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -487,6 +487,7 @@ const FinancialAssessment = observer(() => { onChange={handleChange} handleBlur={handleBlur} error={touched.employment_status && errors.employment_status} + test_id='employment_status' /> @@ -505,6 +506,7 @@ const FinancialAssessment = observer(() => { setFieldTouched('employment_status', true); handleChange(e); }} + data_testid='employment_status' /> @@ -553,6 +555,7 @@ const FinancialAssessment = observer(() => { onChange={handleChange} handleBlur={handleBlur} error={touched.occupation && errors.occupation} + test_id='occupation' /> @@ -567,6 +570,7 @@ const FinancialAssessment = observer(() => { setFieldTouched('occupation', true); handleChange(e); }} + data_testid='occupation' /> From 99077899311af3601c208aacc21795c9150a1d59 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Thu, 28 Sep 2023 14:09:19 +0400 Subject: [PATCH 04/17] fix: aa --- .../address-details/__tests__/address-details.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx index f460ad5fab61..e4b9ebe75f43 100644 --- a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx +++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx @@ -188,7 +188,6 @@ describe('', () => { expect(screen.getByLabelText(address_town)).toBeInTheDocument(); expect(screen.getByText(use_address_info)).toBeInTheDocument(); }); - expect(screen.queryByText(address_line_1_marked)).not.toBeInTheDocument(); expect(screen.queryByText(address_line_2_marked)).not.toBeInTheDocument(); expect(screen.queryByText(address_postcode_marked)).not.toBeInTheDocument(); From c323a0b3770384347ac9a1022cc99e28d2181751 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Mon, 2 Oct 2023 23:30:32 +0400 Subject: [PATCH 05/17] fix: account signup --- .../__tests__/financial-details.spec.tsx | 100 +++++++++++++++++- .../financial-details-partials.tsx | 4 +- .../financial-details/financial-details.tsx | 32 +++++- .../src/Configs/financial-details-config.ts | 4 + .../RealAccountSignup/account-wizard.jsx | 4 + 5 files changed, 135 insertions(+), 9 deletions(-) diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx index 0096dd892061..9d7dcb4c78a2 100644 --- a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx +++ b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx @@ -40,8 +40,18 @@ const fields_enums: TFinancialInformationAndTradingExperience = { { value: 'net income 2', text: 'net income 2' }, ], occupation_enum: [ - { value: 'occupation 1', text: 'occupation 1' }, - { value: 'occupation 2', text: 'occupation 2' }, + { + value: 'Government Officers', + text: 'Government Officers', + }, + { + value: 'Students', + text: 'Students', + }, + { + value: 'Unemployed', + text: 'Unemployed', + }, ], source_of_wealth_enum: [ @@ -64,6 +74,7 @@ describe('', () => { validate: jest.fn(() => ({ errors: {} })), goToPreviousStep: jest.fn(() => ({ errors: {} })), value: {}, + employment_status: '', income_source_enum: [{}], employment_status_enum: [{}], employment_industry_enum: [{}], @@ -101,13 +112,40 @@ describe('', () => { expect(screen.getByText('Source of wealth')).toBeInTheDocument(); }; + const setFormValues = () => { + const select_inputs = screen.getAllByRole('combobox'); + const account_turnover_select = select_inputs.find( + (option: FormikValues) => option.name === 'account_turnover' + ); + const education_level_select = select_inputs.find((option: FormikValues) => option.name === 'education_level'); + const employment_indystry_select = select_inputs.find( + (option: FormikValues) => option.name === 'employment_industry' + ); + const estimated_worth_select = select_inputs.find((option: FormikValues) => option.name === 'estimated_worth'); + const income_source_select = select_inputs.find((option: FormikValues) => option.name === 'income_source'); + const net_income_select = select_inputs.find((option: FormikValues) => option.name === 'net_income'); + + const source_of_wealth_select = select_inputs.find( + (option: FormikValues) => option.name === 'source_of_wealth' + ); + + fireEvent.change(account_turnover_select as HTMLElement, { target: { value: 'account turnover 1' } }); + + fireEvent.change(education_level_select as HTMLElement, { target: { value: 'education level 2' } }); + fireEvent.change(employment_indystry_select as HTMLElement, { target: { value: 'employment industry 1' } }); + fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } }); + fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } }); + fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } }); + fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } }); + }; + it('should render "FinancialDetails" for desktop', () => { render(); fieldsRenderCheck(); const inputs = screen.getAllByTestId('dti_dropdown_display'); - expect(inputs.length).toBe(8); + expect(inputs).toHaveLength(8); expect(screen.getByText('Next')).toBeInTheDocument(); expect(screen.getByText('Previous')).toBeInTheDocument(); @@ -122,7 +160,7 @@ describe('', () => { fieldsRenderCheck(); const inputs = screen.getAllByRole('combobox'); - expect(inputs.length).toBe(8); + expect(inputs).toHaveLength(8); expect(screen.getByText('Next')).toBeInTheDocument(); expect(screen.getByText('Previous')).toBeInTheDocument(); @@ -173,7 +211,7 @@ describe('', () => { fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } }); fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } }); fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } }); - fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'occupation 2' } }); + fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Government Officers' } }); fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } }); @@ -185,4 +223,56 @@ describe('', () => { expect(mock_props.onSubmit).toHaveBeenCalledTimes(1); }); }); + + it('should not show "Unemployed" in occupation list if employment status is "Employed"', async () => { + const new_mock_props = { + ...mock_props, + employment_status: 'Employed', + }; + render(); + + fieldsRenderCheck(); + const select_inputs = screen.getAllByRole('combobox'); + setFormValues(); + const occuppation_select = select_inputs.find((option: FormikValues) => option.name === 'occupation'); + + expect(screen.queryByText('Unemployed')).not.toBeInTheDocument(); + + fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Students' } }); + + const next_btn = screen.getByRole('button', { name: 'Next' }); + expect(next_btn).toBeEnabled(); + + fireEvent.click(next_btn); + await waitFor(() => { + expect(mock_props.onSubmit).toHaveBeenCalled(); + }); + }); + + it('should show "Unemployed" in occupation list if employment status is not "Employed"', async () => { + const new_mock_props = { + ...mock_props, + employment_status: 'Pensioner', + }; + render(); + + fieldsRenderCheck(); + + const select_inputs = screen.getAllByRole('combobox'); + + setFormValues(); + const occuppation_select = select_inputs.find((option: FormikValues) => option.name === 'occupation'); + + expect(screen.getByText('Unemployed')).toBeInTheDocument(); + + fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Unemployed' } }); + + const next_btn = screen.getByRole('button', { name: 'Next' }); + expect(next_btn).toBeEnabled(); + + fireEvent.click(next_btn); + await waitFor(() => { + expect(mock_props.onSubmit).toHaveBeenCalled(); + }); + }); }); diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 37bfc4a8e149..6e5c0a90a760 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -189,6 +189,7 @@ export const Occupation = ({ diff --git a/packages/account/src/Components/financial-details/financial-details.tsx b/packages/account/src/Components/financial-details/financial-details.tsx index 9eed2b5c395f..39dae513ac0e 100644 --- a/packages/account/src/Components/financial-details/financial-details.tsx +++ b/packages/account/src/Components/financial-details/financial-details.tsx @@ -24,6 +24,7 @@ import { import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; export type TFinancialDetails = { + employment_status: string; goToPreviousStep: () => void; goToNextStep: () => void; getCurrentStep: () => number; @@ -60,6 +61,26 @@ export type TFinancialInformationAndTradingExperience = { other_instruments_trading_frequency_enum?: object[]; }; +type TFinancailAssessmenFormValues = { + income_source?: string; + employment_status?: string; + employment_industry?: string; + occupation?: string; + source_of_wealth?: string; + education_level?: string; + net_income?: string; + estimated_worth?: string; + account_turnover?: string; + forex_trading_experience?: string; + forex_trading_frequency?: string; + binary_options_trading_experience?: string; + binary_options_trading_frequency?: string; + cfd_trading_experience?: string; + cfd_trading_frequency?: string; + other_instruments_trading_experience?: string; + other_instruments_trading_frequency?: string; +}; + const FinancialInformation = ({ shared_props, income_source_enum, @@ -96,6 +117,13 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra const { errors } = splitValidationResultTypes(props.validate(values)); return errors; }; + const getFormattedOccupation = () => + props.employment_status === 'Employed' + ? props.occupation_enum.filter(item => item.value !== 'Unemployed') + : props.occupation_enum; + + const getFormattedOccupationValues = (values: TFinancailAssessmenFormValues) => + props.employment_status === 'Employed' && values?.occupation === 'Unemployed' ? '' : values?.occupation; return ( {({ handleSubmit, isSubmitting, errors, values, setFieldValue, handleChange, handleBlur, touched }) => { const shared_props = { - values, + values: { ...values, occupation: getFormattedOccupationValues(values) }, handleChange, handleBlur, touched, @@ -162,7 +190,7 @@ const FinancialDetails = (props: TFinancialDetails & TFinancialInformationAndTra income_source_enum={props.income_source_enum} employment_status_enum={props.employment_status_enum} employment_industry_enum={props.employment_industry_enum} - occupation_enum={props.occupation_enum} + occupation_enum={getFormattedOccupation()} source_of_wealth_enum={props.source_of_wealth_enum} education_level_enum={props.education_level_enum} net_income_enum={props.net_income_enum} diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts index db4aa1cb9a05..032b3814bedf 100644 --- a/packages/account/src/Configs/financial-details-config.ts +++ b/packages/account/src/Configs/financial-details-config.ts @@ -338,6 +338,10 @@ const occupation_enum = () => [ }, { value: 'Government Officers', + text: localize('Government Officers'), + }, + { + value: 'Students', text: localize('Students'), }, { diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index a7512e6ab496..16e283ab45c3 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -343,6 +343,9 @@ const AccountWizard = props => { if (!mounted) return null; if (!finished) { + const employment_status = state_items.find(item => item.form_value.employment_status)?.form_value + .employment_status; + const wizard_steps = state_items.map((step, step_index) => { const passthrough = getPropsForChild(step_index); const BodyComponent = step.body; @@ -353,6 +356,7 @@ const AccountWizard = props => { onSubmit={updateValue} onCancel={prevStep} onSave={saveFormData} + employment_status={employment_status} closeRealAccountSignup={props.closeRealAccountSignup} is_virtual={props.is_virtual} has_currency={props.has_currency} From d550b692c53ea4249ad14011ed33907874ed5e09 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Mon, 2 Oct 2023 23:32:23 +0400 Subject: [PATCH 06/17] fix: revert unrelated file change --- .../address-details/__tests__/address-details.spec.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx index e4b9ebe75f43..f460ad5fab61 100644 --- a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx +++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx @@ -188,6 +188,7 @@ describe('', () => { expect(screen.getByLabelText(address_town)).toBeInTheDocument(); expect(screen.getByText(use_address_info)).toBeInTheDocument(); }); + expect(screen.queryByText(address_line_1_marked)).not.toBeInTheDocument(); expect(screen.queryByText(address_line_2_marked)).not.toBeInTheDocument(); expect(screen.queryByText(address_postcode_marked)).not.toBeInTheDocument(); From 08856d70a80ad5682f0dc65131ff217484099dbf Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Tue, 3 Oct 2023 10:37:03 +0400 Subject: [PATCH 07/17] fix: test case --- .../__tests__/financial-details.spec.tsx | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx index 9d7dcb4c78a2..8d90ea0b800e 100644 --- a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx +++ b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { isDesktop, isMobile } from '@deriv/shared'; import FinancialDetails, { TFinancialInformationAndTradingExperience, TFinancialDetails } from '../financial-details'; import { FormikValues } from 'formik'; @@ -129,14 +130,14 @@ describe('', () => { (option: FormikValues) => option.name === 'source_of_wealth' ); - fireEvent.change(account_turnover_select as HTMLElement, { target: { value: 'account turnover 1' } }); + userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1'); - fireEvent.change(education_level_select as HTMLElement, { target: { value: 'education level 2' } }); - fireEvent.change(employment_indystry_select as HTMLElement, { target: { value: 'employment industry 1' } }); - fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } }); - fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } }); - fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } }); - fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } }); + userEvent.type(education_level_select as HTMLElement, 'education level 2'); + userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1'); + userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2'); + userEvent.type(income_source_select as HTMLElement, 'income source 1'); + userEvent.type(net_income_select as HTMLElement, 'net income 1'); + userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1'); }; it('should render "FinancialDetails" for desktop', () => { @@ -174,7 +175,7 @@ describe('', () => { const btns = screen.getAllByRole('button'); expect(btns[0]).toHaveTextContent('Previous'); - fireEvent.click(btns[0]); + userEvent.click(btns[0]); expect(mock_props.getCurrentStep).toHaveBeenCalledTimes(1); }); @@ -204,21 +205,21 @@ describe('', () => { (option: FormikValues) => option.name === 'source_of_wealth' ); - fireEvent.change(account_turnover_select as HTMLElement, { target: { value: 'account turnover 1' } }); + userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1'); - fireEvent.change(education_level_select as HTMLElement, { target: { value: 'education level 2' } }); - fireEvent.change(employment_indystry_select as HTMLElement, { target: { value: 'employment industry 1' } }); - fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } }); - fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } }); - fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } }); - fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Government Officers' } }); + userEvent.type(education_level_select as HTMLElement, 'education level 2'); + userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1'); + userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2'); + userEvent.type(income_source_select as HTMLElement, 'income source 1'); + userEvent.type(net_income_select as HTMLElement, 'net income 1'); + userEvent.type(occuppation_select as HTMLElement, 'Government Officers'); - fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } }); + userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1'); const btns = screen.getAllByRole('button'); expect(btns[1]).toHaveTextContent('Next'); - fireEvent.click(btns[1]); + userEvent.click(btns[1]); await waitFor(() => { expect(mock_props.onSubmit).toHaveBeenCalledTimes(1); }); @@ -238,12 +239,12 @@ describe('', () => { expect(screen.queryByText('Unemployed')).not.toBeInTheDocument(); - fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Students' } }); + userEvent.type(occuppation_select as HTMLElement, 'Students'); const next_btn = screen.getByRole('button', { name: 'Next' }); expect(next_btn).toBeEnabled(); - fireEvent.click(next_btn); + userEvent.click(next_btn); await waitFor(() => { expect(mock_props.onSubmit).toHaveBeenCalled(); }); @@ -265,12 +266,12 @@ describe('', () => { expect(screen.getByText('Unemployed')).toBeInTheDocument(); - fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'Unemployed' } }); + userEvent.type(occuppation_select as HTMLElement, 'Unemployed'); const next_btn = screen.getByRole('button', { name: 'Next' }); expect(next_btn).toBeEnabled(); - fireEvent.click(next_btn); + userEvent.click(next_btn); await waitFor(() => { expect(mock_props.onSubmit).toHaveBeenCalled(); }); From d7a812d9c3a7ac23dd84029acbfa7a4438977917 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Wed, 11 Oct 2023 22:41:05 +0400 Subject: [PATCH 08/17] fix: revert eslint fix on unrelated files --- packages/bot-skeleton/src/scratch/dbot.js | 2 +- packages/cfd/src/Stores/base-store.js | 2 +- .../AccountSignupModal/account-signup-modal.jsx | 2 +- .../PasswordSelectionModal/password-selection-modal.jsx | 2 +- .../App/Containers/RealAccountSignup/account-wizard.jsx | 4 ---- .../Containers/RealAccountSignup/real-account-signup.jsx | 4 ++-- packages/core/src/Stores/base-store.js | 2 +- packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx | 8 ++++---- packages/p2p/src/pages/buy-sell/buy-sell-row.jsx | 2 +- packages/p2p/src/stores/general-store.js | 4 ++-- packages/reports/src/Stores/base-store.js | 2 +- .../Form/TradeParams/Multiplier/cancel-deal.jsx | 2 +- 12 files changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/bot-skeleton/src/scratch/dbot.js b/packages/bot-skeleton/src/scratch/dbot.js index 822d93b96827..312aef9128ef 100644 --- a/packages/bot-skeleton/src/scratch/dbot.js +++ b/packages/bot-skeleton/src/scratch/dbot.js @@ -3,7 +3,7 @@ import { config } from '../constants/config'; import { api_base } from '../services/api/api-base'; import ApiHelpers from '../services/api/api-helpers'; import Interpreter from '../services/tradeEngine/utils/interpreter'; -import { compareXml, observer as globalObserver } from '../utils'; +import { compareXml,observer as globalObserver } from '../utils'; import { getSavedWorkspaces, saveWorkspaceToRecent } from '../utils/local-storage'; import main_xml from './xml/main.xml'; diff --git a/packages/cfd/src/Stores/base-store.js b/packages/cfd/src/Stores/base-store.js index a5f23da8145f..9dd1131f5da7 100644 --- a/packages/cfd/src/Stores/base-store.js +++ b/packages/cfd/src/Stores/base-store.js @@ -1,4 +1,4 @@ -import { action, intercept, makeObservable, observable, reaction, toJS, when } from 'mobx'; +import { action, intercept, makeObservable,observable, reaction, toJS, when } from 'mobx'; import { isEmptyObject, isProduction, Validator } from '@deriv/shared'; diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx index 172e2e200d5a..db7e32bf388b 100644 --- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx +++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Form, Formik } from 'formik'; +import { Form,Formik } from 'formik'; import PropTypes from 'prop-types'; import { Button, Checkbox, Dialog, Loading, Text } from '@deriv/components'; diff --git a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx index 2574efdbb8fa..a5244400cbd4 100644 --- a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx +++ b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx @@ -5,7 +5,7 @@ import { Field } from 'formik'; import { Button, PasswordInput, PasswordMeter, Text } from '@deriv/components'; import { getErrorMessages, redirectToSignUp } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; -import { Localize, localize } from '@deriv/translations'; +import { Localize,localize } from '@deriv/translations'; import SignupSeparatorContainer from '../AccountSignupModal/signup-separator-container.jsx'; diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index 16e283ab45c3..a7512e6ab496 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -343,9 +343,6 @@ const AccountWizard = props => { if (!mounted) return null; if (!finished) { - const employment_status = state_items.find(item => item.form_value.employment_status)?.form_value - .employment_status; - const wizard_steps = state_items.map((step, step_index) => { const passthrough = getPropsForChild(step_index); const BodyComponent = step.body; @@ -356,7 +353,6 @@ const AccountWizard = props => { onSubmit={updateValue} onCancel={prevStep} onSave={saveFormData} - employment_status={employment_status} closeRealAccountSignup={props.closeRealAccountSignup} is_virtual={props.is_virtual} has_currency={props.has_currency} diff --git a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx index 2209bce5e940..22a7b14354fc 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx @@ -4,9 +4,9 @@ import { withRouter } from 'react-router-dom'; import classNames from 'classnames'; import { RiskToleranceWarningModal, TestWarningModal } from '@deriv/account'; -import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, Text } from '@deriv/components'; +import { Button, DesktopWrapper, MobileDialog, MobileWrapper,Modal, Text } from '@deriv/components'; import { routes } from '@deriv/shared'; -import { Localize, localize } from '@deriv/translations'; +import { Localize,localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; diff --git a/packages/core/src/Stores/base-store.js b/packages/core/src/Stores/base-store.js index 5c4ee6395013..9fe9159f7a47 100644 --- a/packages/core/src/Stores/base-store.js +++ b/packages/core/src/Stores/base-store.js @@ -1,4 +1,4 @@ -import { action, intercept, makeObservable, observable, reaction, toJS, when } from 'mobx'; +import { action, intercept, makeObservable,observable, reaction, toJS, when } from 'mobx'; import { isEmptyObject, isProduction, Validator } from '@deriv/shared'; diff --git a/packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx b/packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx index 2ffe56118ee6..bdc839050760 100644 --- a/packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx +++ b/packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx @@ -13,7 +13,7 @@ describe('usePlatformAccounts', () => { const { result } = renderHook(() => usePlatformAccounts(), { wrapper }); expect(result.current.demo).toBe(undefined); - expect(result.current.real).toHaveLength(0); + expect(result.current.real.length).toBe(0); }); test('should return proper data when user only has platform demo account', async () => { @@ -34,7 +34,7 @@ describe('usePlatformAccounts', () => { const { result } = renderHook(() => usePlatformAccounts(), { wrapper }); expect(result.current.demo?.loginid).toBe(mock.client.accounts.VR1234.loginid); - expect(result.current.real).toHaveLength(0); + expect(result.current.real.length).toBe(0); }); test('should return proper data when user only has platform real account', async () => { @@ -55,7 +55,7 @@ describe('usePlatformAccounts', () => { const { result } = renderHook(() => usePlatformAccounts(), { wrapper }); expect(result.current.demo?.loginid).toBe(undefined); - expect(result.current.real).toHaveLength(1); + expect(result.current.real.length).toBe(1); }); test('should return proper data when user has both real and demo accounts', async () => { @@ -86,7 +86,7 @@ describe('usePlatformAccounts', () => { const { result } = renderHook(() => usePlatformAccounts(), { wrapper }); expect(result.current.demo?.loginid).toBe(mock.client.accounts.VR1235.loginid); - expect(result.current.real).toHaveLength(1); + expect(result.current.real.length).toBe(1); expect(result.current.real[0].landing_company_shortcode).toBe('svg'); }); }); diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx index f402070d36a6..1d924ea094ea 100644 --- a/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx +++ b/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx @@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { Button, Icon, Table, Text } from '@deriv/components'; +import { Button, Icon,Table, Text } from '@deriv/components'; import { useExchangeRate } from '@deriv/hooks'; import { isMobile, routes } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js index 36f22af02415..50b587ce8cd7 100644 --- a/packages/p2p/src/stores/general-store.js +++ b/packages/p2p/src/stores/general-store.js @@ -1,9 +1,9 @@ import React from 'react'; -import { action, computed, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, makeObservable,observable, reaction } from 'mobx'; import { isEmptyObject, isMobile, routes, toMoment } from '@deriv/shared'; -import { Localize, localize } from 'Components/i18next'; +import { Localize,localize } from 'Components/i18next'; import { api_error_codes } from 'Constants/api-error-codes'; import { buy_sell } from 'Constants/buy-sell'; import { order_list } from 'Constants/order-list'; diff --git a/packages/reports/src/Stores/base-store.js b/packages/reports/src/Stores/base-store.js index a5f23da8145f..9dd1131f5da7 100644 --- a/packages/reports/src/Stores/base-store.js +++ b/packages/reports/src/Stores/base-store.js @@ -1,4 +1,4 @@ -import { action, intercept, makeObservable, observable, reaction, toJS, when } from 'mobx'; +import { action, intercept, makeObservable,observable, reaction, toJS, when } from 'mobx'; import { isEmptyObject, isProduction, Validator } from '@deriv/shared'; diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx index 5fea303c358a..42ffac9e2b05 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx @@ -5,7 +5,7 @@ import { observer, useStore } from '@deriv/stores'; import { localize } from '@deriv/translations'; import Fieldset from 'App/Components/Form/fieldset'; -import { onChangeCancellationDuration, onToggleCancellation } from 'Stores/Modules/Trading/Helpers/multiplier'; +import { onChangeCancellationDuration,onToggleCancellation } from 'Stores/Modules/Trading/Helpers/multiplier'; import { useTraderStore } from 'Stores/useTraderStores'; const CancelDeal = observer(() => { From 4aaf9051f85c7e95e13489c290fc09f26b55e70a Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Wed, 11 Oct 2023 22:46:46 +0400 Subject: [PATCH 09/17] fix: revert eslint fix on unrelated files --- .../__tests__/financial-details.spec.tsx | 68 +++++++------------ .../src/Configs/financial-details-config.ts | 1 - .../SetResidenceModal/set-residence-modal.jsx | 2 +- 3 files changed, 24 insertions(+), 47 deletions(-) diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx index 6ba41c0dea42..ef4216e9be33 100644 --- a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx +++ b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx @@ -26,23 +26,6 @@ describe('', () => { goToPreviousStep: jest.fn(() => ({ errors: {} })), value: {}, employment_status: '', - income_source_enum: [{}], - employment_status_enum: [{}], - employment_industry_enum: [{}], - occupation_enum: [{}], - source_of_wealth_enum: [{}], - education_level_enum: [{}], - net_income_enum: [{}], - estimated_worth_enum: [{}], - account_turnover_enum: [{}], - forex_trading_experience_enum: [{}], - forex_trading_frequency_enum: [{}], - binary_options_trading_experience_enum: [{}], - binary_options_trading_frequency_enum: [{}], - cfd_trading_experience_enum: [{}], - cfd_trading_frequency_enum: [{}], - other_instruments_trading_experience_enum: [{}], - other_instruments_trading_frequency_enum: [{}], }; const fieldsRenderCheck = () => { @@ -56,33 +39,6 @@ describe('', () => { expect(screen.getByText('Source of wealth')).toBeInTheDocument(); }; - const setFormValues = () => { - const select_inputs = screen.getAllByRole('combobox'); - const account_turnover_select = select_inputs.find( - (option: FormikValues) => option.name === 'account_turnover' - ); - const education_level_select = select_inputs.find((option: FormikValues) => option.name === 'education_level'); - const employment_indystry_select = select_inputs.find( - (option: FormikValues) => option.name === 'employment_industry' - ); - const estimated_worth_select = select_inputs.find((option: FormikValues) => option.name === 'estimated_worth'); - const income_source_select = select_inputs.find((option: FormikValues) => option.name === 'income_source'); - const net_income_select = select_inputs.find((option: FormikValues) => option.name === 'net_income'); - - const source_of_wealth_select = select_inputs.find( - (option: FormikValues) => option.name === 'source_of_wealth' - ); - - userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1'); - - userEvent.type(education_level_select as HTMLElement, 'education level 2'); - userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1'); - userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2'); - userEvent.type(income_source_select as HTMLElement, 'income source 1'); - userEvent.type(net_income_select as HTMLElement, 'net income 1'); - userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1'); - }; - it('should render "FinancialDetails" for desktop', () => { render(); @@ -196,9 +152,31 @@ describe('', () => { const select_inputs = screen.getAllByRole('combobox'); - setFormValues(); + const account_turnover_select = select_inputs.find( + (option: FormikValues) => option.name === 'account_turnover' + ); + const education_level_select = select_inputs.find((option: FormikValues) => option.name === 'education_level'); + const employment_indystry_select = select_inputs.find( + (option: FormikValues) => option.name === 'employment_industry' + ); + const estimated_worth_select = select_inputs.find((option: FormikValues) => option.name === 'estimated_worth'); + const income_source_select = select_inputs.find((option: FormikValues) => option.name === 'income_source'); + const net_income_select = select_inputs.find((option: FormikValues) => option.name === 'net_income'); + + const source_of_wealth_select = select_inputs.find( + (option: FormikValues) => option.name === 'source_of_wealth' + ); const occuppation_select = select_inputs.find((option: FormikValues) => option.name === 'occupation'); + userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1'); + + userEvent.type(education_level_select as HTMLElement, 'education level 2'); + userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1'); + userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2'); + userEvent.type(income_source_select as HTMLElement, 'income source 1'); + userEvent.type(net_income_select as HTMLElement, 'net income 1'); + userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1'); + const occupation_text = screen.getAllByText('Unemployed')[0]; expect(occupation_text).toBeInTheDocument(); diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts index 0ee7e8a670be..489987fe8003 100644 --- a/packages/account/src/Configs/financial-details-config.ts +++ b/packages/account/src/Configs/financial-details-config.ts @@ -210,7 +210,6 @@ export const getOccupationList = () => [ text: localize('Students'), value: 'Students', }, - { text: localize('Unemployed'), value: 'Unemployed', diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-modal.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-modal.jsx index 3d8afe156d67..659c037224aa 100644 --- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-modal.jsx +++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-modal.jsx @@ -1,6 +1,6 @@ import React from 'react'; import classNames from 'classnames'; -import { Form, Formik } from 'formik'; +import { Form,Formik } from 'formik'; import PropTypes from 'prop-types'; import { Button, Dialog, Text } from '@deriv/components'; From f6e647df693a203d9157eb422fc539f557293424 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Wed, 11 Oct 2023 23:07:59 +0400 Subject: [PATCH 10/17] fix: revert eslint fix on unrelated files --- .../src/App/Containers/RealAccountSignup/account-wizard.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index a7512e6ab496..ce26371ea70a 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -343,6 +343,8 @@ const AccountWizard = props => { if (!mounted) return null; if (!finished) { + const employment_status = state_items.find(item => item.form_value.employment_status)?.form_value + .employment_status; const wizard_steps = state_items.map((step, step_index) => { const passthrough = getPropsForChild(step_index); const BodyComponent = step.body; @@ -359,6 +361,7 @@ const AccountWizard = props => { form_error={form_error} {...passthrough} key={step_index} + employment_status={employment_status} /> ); }); From 30ea87d39e0d09b1a15d4a71687521089dce0fff Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Thu, 12 Oct 2023 11:59:32 +0400 Subject: [PATCH 11/17] fix: merge master --- .../financial-details/financial-details-partials.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index cad8edf59673..90d36e8c13cd 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -21,6 +21,10 @@ type TFinancialDetailsDropdownFieldProps = { employment_status?: string; }; +type TFinancialInformationProps = { + employment_status: string; +}; + /** * Dropdown field for financial details form. * @name FinancialDetailsDropdownField @@ -91,7 +95,7 @@ const FinancialDetailsDropdownField = ({ * @name FinancialInformation * @returns {JSX.Element} */ -const FinancialInformation = ({ employment_status }: { employment_status: string }) => { +const FinancialInformation = ({ employment_status }: TFinancialInformationProps) => { const getFormattedOccupation = () => employment_status === 'Employed' ? getOccupationList().filter(item => item.value !== 'Unemployed') From eb5a35965db8d33d901ad3b2d772f28900d90bc1 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Wed, 18 Oct 2023 17:48:16 +0400 Subject: [PATCH 12/17] fix: function to common --- .../financial-details/financial-details-partials.tsx | 9 ++------- .../account/src/Configs/financial-details-config.ts | 6 ++++++ .../FinancialAssessment/financial-assessment.tsx | 11 ++--------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 7a33cf23bf94..42ee2dc2b3d8 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -9,7 +9,7 @@ import { getEstimatedWorthList, getIncomeSourceList, getNetIncomeList, - getOccupationList, + getFormattedOccupationList, getSourceOfWealthList, } from 'Configs/financial-details-config'; import { EMPLOYMENT_VALUES } from 'Constants/financial-details'; @@ -99,11 +99,6 @@ const FinancialDetailsDropdownField = ({ * @returns {JSX.Element} */ const FinancialInformation = ({ employment_status }: TFinancialInformationProps) => { - const getFormattedOccupation = () => - employment_status === 'Employed' - ? getOccupationList().filter(item => item.value !== 'Unemployed') - : getOccupationList(); - return ( [ }, ]; +export const getFormattedOccupationList = (employment_status: string) => + employment_status === EMPLOYMENT_VALUES.EMPLOYED + ? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED) + : getOccupationList(); + export default financialDetailsConfig; diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index 50612a3224e2..030a5f01dfed 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -33,7 +33,6 @@ import { getEstimatedWorthList, getIncomeSourceList, getNetIncomeList, - getOccupationList, getSourceOfWealthList, getBinaryOptionsTradingExperienceList, getBinaryOptionsTradingFrequencyList, @@ -46,6 +45,7 @@ import { } from './financial-information-list'; import type { TCoreStores } from '@deriv/stores/types'; import { GetFinancialAssessment, GetFinancialAssessmentResponse } from '@deriv/api-types'; +import { getFormattedOccupationList } from 'Configs/financial-details-config'; import { EMPLOYMENT_VALUES } from 'Constants/financial-details'; type TConfirmationPage = { @@ -343,11 +343,6 @@ const FinancialAssessment = observer(() => { return '80px'; }; - const getFormattedOccupationList = values => - values?.employment_status === EMPLOYMENT_VALUES.EMPLOYED - ? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED) - : getOccupationList(); - const getFormattedOccupationValues = values => values?.employment_status === EMPLOYMENT_VALUES.EMPLOYED && values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED ? '' @@ -490,7 +485,6 @@ const FinancialAssessment = observer(() => { onChange={handleChange} handleBlur={handleBlur} error={touched.employment_status && errors.employment_status} - test_id='employment_status' /> @@ -509,7 +503,6 @@ const FinancialAssessment = observer(() => { setFieldTouched('employment_status', true); handleChange(e); }} - data_testid='employment_status' /> @@ -553,7 +546,7 @@ const FinancialAssessment = observer(() => { placeholder={localize('Occupation')} is_align_text_left name='occupation' - list={getFormattedOccupationList(values)} + list={getFormattedOccupationList(values.employment_status ?? '')} value={getFormattedOccupationValues(values)} onChange={handleChange} handleBlur={handleBlur} From bb1f972169de6ee9ac12a3d2e4239d4c9830c936 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Thu, 19 Oct 2023 08:59:34 +0400 Subject: [PATCH 13/17] fix: mobile --- .../financial-details/financial-details-partials.tsx | 4 ++-- .../Assessment/FinancialAssessment/financial-assessment.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 42ee2dc2b3d8..5c7f01ee803c 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -63,7 +63,7 @@ const FinancialDetailsDropdownField = ({ is_align_text_left name={field.name} list={dropdown_list} - value={field.name === 'occupation' ? getFormattedOccupationValues() : values[field_key]} + value={field.name === 'occupation' ? getFormattedOccupationValues() : values?.[field_key]} onChange={handleChange} handleBlur={handleBlur} error={touched?.[field_key] && errors?.[field_key]} @@ -78,7 +78,7 @@ const FinancialDetailsDropdownField = ({ name={field.name} label={label} list_items={dropdown_list} - value={values?.[field_key]} + value={field.name === 'occupation' ? getFormattedOccupationValues() : values?.[field_key]} error={touched?.[field_key] && errors?.[field_key]} onChange={(e: React.ChangeEvent) => { handleChange(e); diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index 030a5f01dfed..e8e123578c65 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -559,7 +559,9 @@ const FinancialAssessment = observer(() => { placeholder={localize('Please select')} name='occupation' label={localize('Occupation')} - list_items={getFormattedOccupationList(values)} + list_items={getFormattedOccupationList( + values.employment_status ?? '' + )} value={getFormattedOccupationValues(values)} error={touched.occupation ? errors.occupation : undefined} onChange={e => { From 2703ae5defaf92fca0a0e07c19ddc257847fea81 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Sun, 22 Oct 2023 17:07:06 +0400 Subject: [PATCH 14/17] fix: validation --- .../financial-details-partials.tsx | 65 +++++++++++++++++-- .../financial-details/financial-details.tsx | 12 +++- .../financial-assessment.tsx | 24 ++++++- 3 files changed, 91 insertions(+), 10 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 5c7f01ee803c..c7b304f7b1e5 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -41,6 +41,57 @@ const FinancialDetailsDropdownField = ({ field_key, placeholder = localize('Please select'), label, +}: TFinancialDetailsDropdownFieldProps) => { + const { values, handleChange, handleBlur, touched, errors, setFieldValue } = useFormikContext<{ + [key: string]: string; + }>(); + + return ( + + {({ field }: FormikValues) => ( + + + + + + ) => { + handleChange(e); + setFieldValue('field_key', e.target.value, true); + }} + required + {...field} + /> + + + )} + + ); +}; + +const FinancialDetailsOccupationDropdownField = ({ + dropdown_list, + field_key, + placeholder = localize('Please select'), + label, employment_status, }: TFinancialDetailsDropdownFieldProps) => { const { values, handleChange, handleBlur, touched, errors, setFieldValue } = useFormikContext<{ @@ -63,8 +114,11 @@ const FinancialDetailsDropdownField = ({ is_align_text_left name={field.name} list={dropdown_list} - value={field.name === 'occupation' ? getFormattedOccupationValues() : values?.[field_key]} - onChange={handleChange} + value={getFormattedOccupationValues()} + onChange={e => { + setFieldValue('field_key', getFormattedOccupationValues(), true); + handleChange(e); + }} handleBlur={handleBlur} error={touched?.[field_key] && errors?.[field_key]} list_portal_id='modal_root' @@ -78,11 +132,11 @@ const FinancialDetailsDropdownField = ({ name={field.name} label={label} list_items={dropdown_list} - value={field.name === 'occupation' ? getFormattedOccupationValues() : values?.[field_key]} + value={getFormattedOccupationValues()} error={touched?.[field_key] && errors?.[field_key]} onChange={(e: React.ChangeEvent) => { + setFieldValue('field_key', getFormattedOccupationValues(), true); handleChange(e); - setFieldValue('field_key', e.target.value, true); }} required /> @@ -92,7 +146,6 @@ const FinancialDetailsDropdownField = ({ ); }; - /** * Wrapper for financial details form fields. * @name FinancialInformation @@ -111,7 +164,7 @@ const FinancialInformation = ({ employment_status }: TFinancialInformationProps) field_key='employment_industry' label={localize('Industry of employment')} /> - { }} validateOnMount > - {({ handleSubmit, isSubmitting, errors, values }) => { + {({ handleSubmit, isSubmitting, errors, values, isValid }) => { return ( {({ @@ -101,7 +102,14 @@ const FinancialDetails = (props: TFinancialDetails) => { 0} + is_disabled={ + isSubmitting || + Object.keys(errors).length > 0 || + !!( + props.employment_status === EMPLOYMENT_VALUES.EMPLOYED && + values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED + ) + } is_absolute={isMobile()} label={localize('Next')} has_cancel diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index e8e123578c65..582dc9b9a26e 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -401,6 +401,7 @@ const FinancialAssessment = observer(() => { isSubmitting, setFieldTouched, dirty, + setFieldValue, }) => ( {!is_appstore && isMobile() && is_confirmation_visible && ( @@ -548,7 +549,14 @@ const FinancialAssessment = observer(() => { name='occupation' list={getFormattedOccupationList(values.employment_status ?? '')} value={getFormattedOccupationValues(values)} - onChange={handleChange} + onChange={e => { + setFieldValue( + 'occupation', + getFormattedOccupationValues(values), + true + ); + handleChange(e); + }} handleBlur={handleBlur} error={touched.occupation && errors.occupation} test_id='occupation' @@ -565,6 +573,11 @@ const FinancialAssessment = observer(() => { value={getFormattedOccupationValues(values)} error={touched.occupation ? errors.occupation : undefined} onChange={e => { + setFieldValue( + 'occupation', + getFormattedOccupationValues(values), + true + ); setFieldTouched('occupation', true); handleChange(e); }} @@ -1049,7 +1062,14 @@ const FinancialAssessment = observer(() => { })} onClick={() => onClickSubmit(handleSubmit)} is_disabled={ - isSubmitting || !dirty || is_btn_loading || Object.keys(errors).length > 0 + isSubmitting || + !dirty || + is_btn_loading || + Object.keys(errors).length > 0 || + !!( + values.employment_status === EMPLOYMENT_VALUES.EMPLOYED && + values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED + ) } has_effect is_loading={is_btn_loading} From 3022cc01ddcf3f8e3e0408bab0d196382d3d7780 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Tue, 24 Oct 2023 21:47:03 +0400 Subject: [PATCH 15/17] fix: add optional parameter --- packages/account/src/Configs/financial-details-config.ts | 4 ++-- .../Assessment/FinancialAssessment/financial-assessment.tsx | 2 +- .../src/App/Containers/RealAccountSignup/account-wizard.jsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts index 59278e06f485..d50b5d4e20b6 100644 --- a/packages/account/src/Configs/financial-details-config.ts +++ b/packages/account/src/Configs/financial-details-config.ts @@ -315,8 +315,8 @@ export const getIncomeSourceList = () => [ }, ]; -export const getFormattedOccupationList = (employment_status: string) => - employment_status === EMPLOYMENT_VALUES.EMPLOYED +export const getFormattedOccupationList = ({ employment_status }: { employment_status?: string }) => + employment_status && employment_status === EMPLOYMENT_VALUES.EMPLOYED ? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED) : getOccupationList(); diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index 582dc9b9a26e..31ebb7f62af5 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -1067,7 +1067,7 @@ const FinancialAssessment = observer(() => { is_btn_loading || Object.keys(errors).length > 0 || !!( - values.employment_status === EMPLOYMENT_VALUES.EMPLOYED && + values?.employment_status === EMPLOYMENT_VALUES.EMPLOYED && values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED ) } diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index ce26371ea70a..b552df79c46d 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -343,8 +343,8 @@ const AccountWizard = props => { if (!mounted) return null; if (!finished) { - const employment_status = state_items.find(item => item.form_value.employment_status)?.form_value - .employment_status; + const employment_status = + state_items.find(item => item.form_value.employment_status)?.form_value?.employment_status || ''; const wizard_steps = state_items.map((step, step_index) => { const passthrough = getPropsForChild(step_index); const BodyComponent = step.body; From 4a7777f116bc821df6f789aa5df0865b93e43b6f Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Tue, 24 Oct 2023 23:28:49 +0400 Subject: [PATCH 16/17] fix: eslint --- .../Components/financial-details/financial-details-partials.tsx | 2 +- packages/account/src/Configs/financial-details-config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index c7b304f7b1e5..c4fbd50aab62 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -23,7 +23,7 @@ type TFinancialDetailsDropdownFieldProps = { }; type TFinancialInformationProps = { - employment_status: string; + employment_status?: string; }; /** diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts index d50b5d4e20b6..7d3ef577ba80 100644 --- a/packages/account/src/Configs/financial-details-config.ts +++ b/packages/account/src/Configs/financial-details-config.ts @@ -315,7 +315,7 @@ export const getIncomeSourceList = () => [ }, ]; -export const getFormattedOccupationList = ({ employment_status }: { employment_status?: string }) => +export const getFormattedOccupationList = (employment_status?: string) => employment_status && employment_status === EMPLOYMENT_VALUES.EMPLOYED ? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED) : getOccupationList(); From 0808b3d1747faaedde7d4caf8755d9cabca56044 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Thu, 26 Oct 2023 10:00:25 +0400 Subject: [PATCH 17/17] chore: merge master --- packages/components/stories/icon/icons.js | 38 +++++++++++------------ 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 57a467bab2b5..7bd59c50adb7 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -57,7 +57,7 @@ export const icons = 'IcAppstoreWalletUsdcLight', 'IcAppstoreWalletUsdtLight', 'IcAppstoreWalletsLink', - 'IcAppstoreWarning' + 'IcAppstoreWarning', ], 'brand': [ 'IcBrandCtraderWordmark', @@ -69,7 +69,7 @@ export const icons = 'IcBrandDmt5FinancialStp', 'IcBrandDmt5Financial', 'IcBrandDmt5Synthetics', - 'IcBrandDxtradeWordmark' + 'IcBrandDxtradeWordmark', ], 'cashier': [ 'IcCashierAdd', @@ -246,7 +246,7 @@ export const icons = 'IcCashierWyreLight', 'IcCashierZenithbankDark', 'IcCashierZenithbankLight', - 'IcCashier' + 'IcCashier', ], 'common': [ 'IcAccountCross', @@ -543,7 +543,6 @@ export const icons = 'IcPooSubmitted', 'IcPooVerified', 'IcPortfolio', - 'IcPositionClosed', 'IcPreviewIcon', 'IcPreview', 'IcProfile', @@ -627,7 +626,7 @@ export const icons = 'IcWithdrawRequestVerification', 'IcZingpay', 'IcZoomIn', - 'IcZoomOut' + 'IcZoomOut', ], 'contract': [ 'IcContractBarrier', @@ -645,7 +644,7 @@ export const icons = 'IcContractStartTimeCircle', 'IcContractStartTime', 'IcContractStrike', - 'IcContractTarget' + 'IcContractTarget', ], 'currency': [ 'IcCurrencyAud', @@ -669,10 +668,10 @@ export const icons = 'IcCurrencyUsdc', 'IcCurrencyUsdk', 'IcCurrencyUst', - 'IcCurrencyVirtual' + 'IcCurrencyVirtual', ], 'derivez': [ - 'IcDerivez' + 'IcDerivez', ], 'dxtrade': [ 'IcDxtradeDerivX', @@ -689,7 +688,7 @@ export const icons = 'IcDxtradeFinancialPlatform', 'IcDxtradeFinancial', 'IcDxtradeOnePassword', - 'IcDxtradeSyntheticPlatform' + 'IcDxtradeSyntheticPlatform', ], 'flag': [ 'IcFlagDe', @@ -703,11 +702,10 @@ export const icons = 'IcFlagPt', 'IcFlagRu', 'IcFlagTh', - 'IcFlagTr', 'IcFlagUk', 'IcFlagVi', 'IcFlagZhCn', - 'IcFlagZhTw' + 'IcFlagZhTw', ], 'mt5': [ 'IcMt5CfdPlatform', @@ -737,7 +735,7 @@ export const icons = 'IcMt5SyntheticIndices', 'IcMt5SyntheticPlatform', 'IcMt5Synthetic', - 'IcMt5TradeTypes' + 'IcMt5TradeTypes', ], 'option': [ 'IcOptionAccumulators', @@ -755,7 +753,7 @@ export const icons = 'IcOptionOverUnder', 'IcOptionRaiseFall', 'IcOptionTouchNotouch', - 'IcOptionUpDownAsian' + 'IcOptionUpDownAsian', ], 'rebranding': [ 'IcRebrandingBinaryBot', @@ -781,7 +779,7 @@ export const icons = 'IcRebrandingMt5Logo', 'IcRebrandingMt5SwapFree', 'IcRebrandingSmarttraderDashboard', - 'IcRebrandingSmarttrader' + 'IcRebrandingSmarttrader', ], 'stock': [ 'IcStockAdidasSalomon', @@ -831,7 +829,7 @@ export const icons = 'IcStockVisa', 'IcStockWallMart', 'IcStockWaltDisney', - 'IcStockZoom' + 'IcStockZoom', ], 'tradetype': [ 'IcTradetypeAccu', @@ -870,7 +868,7 @@ export const icons = 'IcTradetypeTurbosshort', 'IcTradetypeUpordown', 'IcTradetypeVanillaLongCall', - 'IcTradetypeVanillaLongPut' + 'IcTradetypeVanillaLongPut', ], 'underlying': [ 'IcUnderlying1HZ100V', @@ -1029,7 +1027,7 @@ export const icons = 'IcUnderlyingWLDEUR', 'IcUnderlyingWLDGBP', 'IcUnderlyingWLDUSD', - 'IcUnderlyingWLDXAU' + 'IcUnderlyingWLDXAU', ], 'wallet': [ 'IcWalletBitcoinDark', @@ -1060,6 +1058,6 @@ export const icons = 'IcWalletTetherDark', 'IcWalletTetherLight', 'IcWalletUsdCoinDark', - 'IcWalletUsdCoinLight' - ] -} \ No newline at end of file + 'IcWalletUsdCoinLight', + ], +}