From bd82288d2d1ee80d539b1bbc1593310b21bb958d Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 28 Mar 2023 10:49:37 +0400 Subject: [PATCH] Amina /77701_make signup form fields immutable if they are immutable from BE (#7544) * adding validation * changeablle fields from client store * mutate address fields * fix: test case * fix: test case * fix: spec_file * fix: making employment status immutable * fix: trading assessment * fix: trading assessment * fix: trading assessment * fix: test case after merge conflict * fix: hide idv section when client is age verified * fix: remove idv_disallowed check * chore: merge master * fix: add new status --------- Co-authored-by: hirad-deriv --- .../__tests__/address-details.spec.js | 16 +++ .../address-details/address-details.jsx | 32 +++-- .../__tests__/personal-details.spec.js | 4 +- .../personal-details/personal-details.jsx | 27 +++-- .../trading-assessment-dropdown.jsx | 11 +- .../trading-assessment-form.jsx | 3 + .../trading-assessment-new-user.jsx | 2 + .../trading-assessment-radio-buttons.jsx | 11 +- .../src/Configs/address-details-config.js | 2 + .../src/Configs/personal-details-config.js | 9 +- .../src/Configs/trading-assessment-config.js | 110 ++++++++++-------- .../RealAccountSignup/account-wizard-form.js | 11 +- .../RealAccountSignup/account-wizard.jsx | 2 + 13 files changed, 165 insertions(+), 75 deletions(-) diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.js b/packages/account/src/Components/address-details/__tests__/address-details.spec.js index dc6e12ff7ea7..1038ac9a35a9 100644 --- a/packages/account/src/Components/address-details/__tests__/address-details.spec.js +++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.js @@ -55,6 +55,7 @@ describe('', () => { address_state: 'Default test state', }, validate: jest.fn(), + disabled_items: [], }; const svgCommonRenderCheck = () => { @@ -262,4 +263,19 @@ describe('', () => { expect(address_state_input.value).toBe('State 1'); }); }); + + it('should disable the field if it is immuatble from BE', async () => { + mock_props.disabled_items = ['address_line_1', 'address_line_2']; + mock_props.value.address_state = ''; + + render(); + + expect(screen.getByPlaceholderText(address_line_1)).toBeDisabled(); + expect(screen.getByPlaceholderText(address_line_2)).toBeDisabled(); + await waitFor(() => { + expect(screen.getByRole('textbox', { name: 'State/Province' })).toBeEnabled(); + }); + expect(screen.getByPlaceholderText(address_town)).toBeEnabled(); + expect(screen.getByPlaceholderText(address_postcode)).toBeEnabled(); + }); }); diff --git a/packages/account/src/Components/address-details/address-details.jsx b/packages/account/src/Components/address-details/address-details.jsx index 5488ff485048..798ca66f7459 100644 --- a/packages/account/src/Components/address-details/address-details.jsx +++ b/packages/account/src/Components/address-details/address-details.jsx @@ -51,6 +51,7 @@ const AddressDetails = ({ is_gb_residence, onSubmitEnabledChange, selected_step_ref, + disabled_items, has_real_account, ...props }) => { @@ -159,7 +160,10 @@ const AddressDetails = ({ } maxLength={255} placeholder={localize('First line of address')} - disabled={props.value?.address_line_1 && has_real_account} + disabled={ + disabled_items.includes('address_line_1') || + (props.value?.address_line_1 && has_real_account) + } /> {!has_fetched_states_list && (
@@ -214,7 +224,8 @@ const AddressDetails = ({ }} list_portal_id={is_appstore ? '' : 'modal_root'} disabled={ - props.value?.address_state && has_real_account + disabled_items.includes('address_state') || + (props.value?.address_state && has_real_account) } /> @@ -234,7 +245,8 @@ const AddressDetails = ({ setAddressStateToDisplay(''); }} disabled={ - props.value?.address_state && has_real_account + disabled_items.includes('address_state') || + (props.value?.address_state && has_real_account) } /> @@ -247,7 +259,10 @@ const AddressDetails = ({ name='address_state' label={localize('State/Province')} placeholder={localize('State/Province')} - disabled={props.value?.address_state && has_real_account} + disabled={ + disabled_items.includes('address_state') || + (props.value?.address_state && has_real_account) + } /> )}
diff --git a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js index 3ca03272bcc1..e14d980ccf9a 100644 --- a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js +++ b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js @@ -384,8 +384,6 @@ describe('', () => { 'first_name', 'last_name', 'date_of_birth', - 'place_of_birth', - 'citizen', 'account_opening_reason', ]} /> @@ -397,7 +395,7 @@ describe('', () => { expect(screen.getByTestId('last_name')).toBeDisabled(); expect(screen.getByTestId('date_of_birth')).toBeDisabled(); expect(screen.getByTestId('place_of_birth')).not.toBeDisabled(); - expect(screen.getByTestId('citizenship')).toBeEnabled(); // citizenship value is empty, so enable the field + expect(screen.getByTestId('citizenship')).toBeEnabled(); // citizenship value is not disabled by BE, so enable the field }); it('should disable citizen field if the client is_fully_authenticated', () => { diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index 879855526a6f..2f0e82b7e77d 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -316,8 +316,7 @@ const PersonalDetails = ({ @@ -529,6 +528,9 @@ const PersonalDetails = ({ {...field} required data_testid='tax_residence_mobile' + disabled={disabled_items.includes( + 'tax_residence' + )} />
@@ -651,6 +654,7 @@ const PersonalDetails = ({ setFieldTouched('employment_status', true); handleChange(e); }} + disabled={disabled_items.includes('employment_status')} /> @@ -742,6 +746,9 @@ const PersonalDetails = ({ {...field} required data_testid='account_opening_reason_mobile' + disabled={disabled_items.includes( + 'account_opening_reason' + )} /> diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.jsx b/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.jsx index 2b843df82ba8..c7c26e01a5fd 100644 --- a/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.jsx +++ b/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.jsx @@ -4,7 +4,14 @@ import { DesktopWrapper, Dropdown, MobileWrapper, Text, SelectNative } from '@de import { localize, getLanguage } from '@deriv/translations'; import classNames from 'classnames'; -const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue, setEnableNextSection }) => { +const TradingAssessmentDropdown = ({ + disabled_items, + item_list, + onChange, + values, + setFieldValue, + setEnableNextSection, +}) => { React.useEffect(() => { checkIfAllFieldsFilled(); }, [values]); @@ -44,6 +51,7 @@ const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue, list={question?.answer_options} onChange={e => onChange(e, question.form_control, setFieldValue)} value={values[question.form_control]} + disabled={disabled_items.includes(question.form_control)} /> @@ -60,6 +68,7 @@ const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue, }} value={values[question.form_control]} hide_top_placeholder + disabled={disabled_items.includes(question.form_control)} /> diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-form.jsx b/packages/account/src/Components/trading-assessment/trading-assessment-form.jsx index 9b5661dd5066..55fe6d1d54a8 100644 --- a/packages/account/src/Components/trading-assessment/trading-assessment-form.jsx +++ b/packages/account/src/Components/trading-assessment/trading-assessment-form.jsx @@ -10,6 +10,7 @@ import TradingAssessmentDropdown from './trading-assessment-dropdown.jsx'; const TradingAssessmentForm = ({ assessment_questions, class_name, + disabled_items, form_value, onSubmit, onCancel, @@ -143,6 +144,7 @@ const TradingAssessmentForm = ({ values={values} setFieldValue={setFieldValue} setEnableNextSection={setIsSectionFilled} + disabled_items={disabled_items ?? []} /> ) : ( )}
diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx b/packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx index 530ebbf67e15..df28a12ad0d9 100644 --- a/packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx +++ b/packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx @@ -3,6 +3,7 @@ import TradingAssessmentForm from './trading-assessment-form'; const TradingAssessmentNewUser = ({ assessment_questions, + disabled_items, goToNextStep, goToPreviousStep, onSave, @@ -39,6 +40,7 @@ const TradingAssessmentNewUser = ({ onSubmit={handleSubmit} onCancel={handleCancel} setSubSectionIndex={setSubSectionIndex} + disabled_items={disabled_items} /> ); }; diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-radio-buttons.jsx b/packages/account/src/Components/trading-assessment/trading-assessment-radio-buttons.jsx index bdc9551ba43b..8d95b0829338 100644 --- a/packages/account/src/Components/trading-assessment/trading-assessment-radio-buttons.jsx +++ b/packages/account/src/Components/trading-assessment/trading-assessment-radio-buttons.jsx @@ -2,7 +2,15 @@ import React from 'react'; import { Field } from 'formik'; import { Text, RadioGroup } from '@deriv/components'; -const TradingAssessmentRadioButton = ({ text, list, onChange, values, form_control, setEnableNextSection }) => { +const TradingAssessmentRadioButton = ({ + disabled_items, + text, + list, + onChange, + values, + form_control, + setEnableNextSection, +}) => { React.useEffect(() => { setEnableNextSection(!!values[form_control]); }, [form_control]); @@ -31,6 +39,7 @@ const TradingAssessmentRadioButton = ({ text, list, onChange, values, form_contr key={answer.value} label={answer?.text} value={answer?.value} + disabled={disabled_items.includes(form_control)} /> ))} diff --git a/packages/account/src/Configs/address-details-config.js b/packages/account/src/Configs/address-details-config.js index 199aafa40fd6..aeee513b9aba 100644 --- a/packages/account/src/Configs/address-details-config.js +++ b/packages/account/src/Configs/address-details-config.js @@ -137,6 +137,7 @@ const addressDetailsConfig = ( ) => { const is_svg = upgrade_info?.can_upgrade_to === 'svg'; const config = address_details_config({ account_settings, is_svg }); + const disabled_items = account_settings.immutable_fields; const is_mf = real_account_signup_target === 'maltainvest'; return { @@ -152,6 +153,7 @@ const addressDetailsConfig = ( transformConfig(transformForResidence(config, residence), real_account_signup_target) ), is_svg, + disabled_items, is_mf, }, passthrough: ['residence_list', 'is_fully_authenticated', 'has_real_account'], diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index a994b15edf82..c73127c7911f 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -6,8 +6,6 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore return {}; } - const disabled_items = account_settings.immutable_fields; // immutable fields set by BE - // minimum characters required is 9 numbers (excluding +- signs or space) const min_phone_number = 9; const max_phone_number = 35; @@ -134,7 +132,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, employment_status: { - default_value: '', + default_value: account_settings.employment_status ?? '', supported_in: ['maltainvest'], rules: [['req', localize('Employment status is required.')]], }, @@ -158,7 +156,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore return config; }; - return [getConfig(), disabled_items]; + return [getConfig()]; }; const personalDetailsConfig = ( @@ -166,12 +164,13 @@ const personalDetailsConfig = ( PersonalDetails, is_appstore = false ) => { - const [config, disabled_items] = personal_details_config({ + const [config] = personal_details_config({ residence_list, account_settings, is_appstore, real_account_signup_target, }); + const disabled_items = account_settings.immutable_fields; return { header: { active_title: is_appstore ? localize('A few personal details') : localize('Complete your personal details'), diff --git a/packages/account/src/Configs/trading-assessment-config.js b/packages/account/src/Configs/trading-assessment-config.js index e526ad205658..73757603aac9 100644 --- a/packages/account/src/Configs/trading-assessment-config.js +++ b/packages/account/src/Configs/trading-assessment-config.js @@ -254,55 +254,73 @@ export const trading_assessment_questions = () => [ const default_form_config = { supported_in: ['maltainvest'], - default_value: '', }; -export const trading_assessment_form_config = { - risk_tolerance: { - ...default_form_config, - }, - source_of_experience: { - ...default_form_config, - }, - cfd_experience: { - ...default_form_config, - }, - cfd_frequency: { - ...default_form_config, - }, - trading_experience_financial_instruments: { - ...default_form_config, - }, - trading_frequency_financial_instruments: { - ...default_form_config, - }, - cfd_trading_definition: { - ...default_form_config, - }, - leverage_impact_trading: { - ...default_form_config, - }, - leverage_trading_high_risk_stop_loss: { - ...default_form_config, - }, - required_initial_margin: { - ...default_form_config, - }, +export const getTradingAssessmentFormConfig = financial_assessment => { + return { + risk_tolerance: { + ...default_form_config, + default_value: financial_assessment?.risk_tolerance ?? '', + }, + source_of_experience: { + ...default_form_config, + default_value: financial_assessment?.source_of_experience ?? '', + }, + cfd_experience: { + ...default_form_config, + default_value: financial_assessment?.cfd_experience ?? '', + }, + cfd_frequency: { + ...default_form_config, + default_value: financial_assessment?.cfd_frequency ?? '', + }, + trading_experience_financial_instruments: { + ...default_form_config, + default_value: financial_assessment?.trading_experience_financial_instruments ?? '', + }, + trading_frequency_financial_instruments: { + ...default_form_config, + default_value: financial_assessment?.trading_frequency_financial_instruments ?? '', + }, + cfd_trading_definition: { + ...default_form_config, + default_value: financial_assessment?.cfd_trading_definition ?? '', + }, + leverage_impact_trading: { + ...default_form_config, + default_value: financial_assessment?.leverage_impact_trading ?? '', + }, + leverage_trading_high_risk_stop_loss: { + ...default_form_config, + default_value: financial_assessment?.leverage_trading_high_risk_stop_loss ?? '', + }, + required_initial_margin: { + ...default_form_config, + default_value: financial_assessment?.required_initial_margin ?? '', + }, + }; }; -const tradingAssessmentConfig = ({ real_account_signup_target, setSubSectionIndex }, TradingAssessmentNewUser) => ({ - header: { - active_title: localize('Complete your trading assessment'), - title: localize('Trading assessment'), - }, - body: TradingAssessmentNewUser, - form_value: getDefaultFields(real_account_signup_target, trading_assessment_form_config), - props: { - validate: generateValidationFunction(real_account_signup_target, trading_assessment_form_config), - assessment_questions: trading_assessment_questions(), - setSubSectionIndex, - }, - sub_step_count: trading_assessment_questions().length, -}); +const tradingAssessmentConfig = ( + { real_account_signup_target, financial_assessment, account_settings, setSubSectionIndex }, + TradingAssessmentNewUser +) => { + const trading_assessment_form_config = getTradingAssessmentFormConfig(financial_assessment); + return { + header: { + active_title: localize('Complete your trading assessment'), + title: localize('Trading assessment'), + }, + body: TradingAssessmentNewUser, + form_value: getDefaultFields(real_account_signup_target, trading_assessment_form_config), + props: { + validate: generateValidationFunction(real_account_signup_target, trading_assessment_form_config), + assessment_questions: trading_assessment_questions(), + disabled_items: account_settings.immutable_fields, + setSubSectionIndex, + }, + sub_step_count: trading_assessment_questions().length, + }; +}; export default tradingAssessmentConfig; diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js b/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js index dc473cb2881f..d5425515881f 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js @@ -18,11 +18,18 @@ const isMaltaAccount = ({ real_account_signup_target }) => real_account_signup_t const shouldShowPersonalAndAddressDetailsAndCurrency = ({ real_account_signup_target }) => real_account_signup_target !== 'samoa'; -const shouldShowIdentityInformation = ({ account_settings, residence, residence_list, real_account_signup_target }) => { +const shouldShowIdentityInformation = ({ + account_status, + account_settings, + residence, + residence_list, + real_account_signup_target, +}) => { const citizen = account_settings.citizen || residence; const country = residence_list.find(item => item.value === citizen); const maltainvest = real_account_signup_target === 'maltainvest'; - return !maltainvest && citizen && country?.identity?.services?.idv?.is_country_supported; + const should_skip_idv = account_status?.status?.some(status => status === 'skip_idv'); //status added by BE when idv should be skipped for the user + return !maltainvest && citizen && country?.identity?.services?.idv?.is_country_supported && !should_skip_idv; }; export const getItems = props => [ diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index 6136bffcd12f..49c0c77aa07a 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -359,6 +359,7 @@ const AccountWizard = props => { AccountWizard.propTypes = { account_settings: PropTypes.object, + account_status: PropTypes.object, closeRealAccountSignup: PropTypes.func, content_flag: PropTypes.string, fetchFinancialAssessment: PropTypes.func, @@ -385,6 +386,7 @@ AccountWizard.propTypes = { export default connect(({ client, notifications, ui, traders_hub }) => ({ account_settings: client.account_settings, + account_status: client.account_status, closeRealAccountSignup: ui.closeRealAccountSignup, content_flag: traders_hub.content_flag, fetchAccountSettings: client.fetchAccountSettings,