diff --git a/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js b/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js index 26d16e4e82c3..9affc739c18f 100644 --- a/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js @@ -111,138 +111,138 @@ describe('', () => { expect(screen.getByTestId('dt_cfd_details_form_description')).toBeInTheDocument(); expect(screen.getAllByText('FormSubHeader').length).toBe(3); - // expect(screen.getByRole('textbox', { name: /citizenship/i })).toBeInTheDocument(); - // expect(screen.getByRole('textbox', { name: /tax residence/i })).toBeInTheDocument(); - // expect(screen.getByRole('textbox', { name: /tax identification number/i })).toBeInTheDocument(); - // expect(screen.getByText(/account opening reason/i)).toBeInTheDocument(); - // expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); + expect(screen.getByRole('textbox', { name: /citizenship/i })).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: /tax residence/i })).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: /tax identification number/i })).toBeInTheDocument(); + expect(screen.getByText(/account opening reason/i)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); }); - // it('should not render scrollbars or modal footer wrapper on mobile', () => { - // isMobile.mockReturnValue(true); - // render(); - - // expect(screen.queryByTestId('dt_themed_scrollbars')).not.toBeInTheDocument(); - // expect(screen.getAllByText('FormSubHeader').length).toBe(3); - // expect(screen.queryByTestId('dt_modal_footer')).not.toBeInTheDocument(); - // expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument(); - // }); - - // it("should show that it's loading when is_loading is true", () => { - // render(); - // expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument(); - // expect(screen.queryByTestId('dt_cfd_details_form_description')).not.toBeInTheDocument(); - // }); - - // it("should show that it's loading when residence_list is still empty", () => { - // render(); - - // expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument(); - // expect(screen.queryByTestId('dt_cfd_details_form_description')).not.toBeInTheDocument(); - // }); - - // it('should disable Citizenship and Tax residence fields if they were submitted earlier & is_fully_authenticated is true', () => { - // const values = { - // citizen: 'Indonesia', - // tax_residence: 'Indonesia', - // tax_identification_number: '', - // account_opening_reason: '', - // }; - // render(); - - // expect(screen.getByRole('textbox', { name: /citizenship/i })).toBeDisabled(); - // expect(screen.getByRole('textbox', { name: /tax residence/i })).toBeDisabled(); - // expect(screen.getByRole('textbox', { name: /tax identification number/i })).toBeEnabled(); - // expect(screen.getByText(/account opening reason/i)).toBeEnabled(); - // expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); - // }); - - // it('should show an error message received from server that is passed via props as form_error', () => { - // const form_error = 'Input validation failed: citizen!'; - // render(); - - // expect(screen.getByTestId('form_submit_error')).toHaveClass('dc-icon'); - // expect(screen.getByText(form_error)).toBeInTheDocument(); - // expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); - // }); - - // it('should enable the Next button for form submission when all required fields are filled', async () => { - // render(); - - // const citizenship_input = screen.getByRole('textbox', { name: /citizenship/i }); - // const tax_residence_input = screen.getByRole('textbox', { name: /tax residence/i }); - // const tax_id_input = screen.getByRole('textbox', { name: /tax identification number/i }); - // const opening_reason_input = screen.getByText(/account opening reason/i); - // const next_button = screen.getByRole('button', { name: /next/i }); - - // fireEvent.change(citizenship_input, { target: { value: 'Indonesia' } }); - // fireEvent.click(next_button); - - // expect(await screen.findByText(tax_residence_required_error)).toBeInTheDocument(); - // expect(await screen.findByText(tax_id_required_error)).toBeInTheDocument(); - // expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); - // expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); - // expect(next_button).toBeDisabled(); - - // fireEvent.change(tax_residence_input, { target: { value: 'Indonesia' } }); - // fireEvent.click(next_button); - - // expect(await screen.findByText(tax_id_required_error)).toBeInTheDocument(); - // expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); - // expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); - // expect(next_button).toBeDisabled(); - - // fireEvent.change(tax_id_input, { target: { value: '023124224563456' } }); - // fireEvent.click(next_button); - - // expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); - // expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(tax_id_required_error)).not.toBeInTheDocument(); - // expect(next_button).toBeDisabled(); - - // fireEvent.click(opening_reason_input); - // const hedging = within(screen.getByRole('list')).getByText('Hedging'); - // fireEvent.click(hedging); - // fireEvent.blur(hedging); - - // await waitFor(() => { - // expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(tax_id_required_error)).not.toBeInTheDocument(); - // expect(screen.queryByText(opening_reason_required_error)).not.toBeInTheDocument(); - // expect(next_button).toBeEnabled(); - // }); - - // fireEvent.click(next_button); - - // await waitFor(() => { - // expect(props.onSubmit).toHaveBeenCalledTimes(1); - // }); - // }); - - // it('should disable the Next button in case of invalid input in a required field', async () => { - // render(); - - // const tax_id_input = screen.getByRole('textbox', { name: /tax identification number/i }); - - // fireEvent.change(tax_id_input, { target: { value: 'invalid_text_id_0' } }); - // fireEvent.blur(tax_id_input); - - // expect(await screen.findByText('Tax identification number is not properly formatted.')).toBeInTheDocument(); - // expect(screen.getByRole('button', { name: /next/i })).toBeDisabled(); - // }); - - // it('should disable the Next button in case a required field is empty', async () => { - // render(); - - // const citizenship_input = screen.getByRole('textbox', { name: /citizenship/i }); - - // fireEvent.change(citizenship_input, { target: { value: '' } }); - // fireEvent.blur(citizenship_input); - - // expect(await screen.findByText(citizenship_required_error)).toBeInTheDocument(); - // expect(screen.getByRole('button', { name: /next/i })).toBeDisabled(); - // }); + it('should not render scrollbars or modal footer wrapper on mobile', () => { + isMobile.mockReturnValue(true); + render(); + + expect(screen.queryByTestId('dt_themed_scrollbars')).not.toBeInTheDocument(); + expect(screen.getAllByText('FormSubHeader').length).toBe(3); + expect(screen.queryByTestId('dt_modal_footer')).not.toBeInTheDocument(); + expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument(); + }); + + it("should show that it's loading when is_loading is true", () => { + render(); + expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument(); + expect(screen.queryByTestId('dt_cfd_details_form_description')).not.toBeInTheDocument(); + }); + + it("should show that it's loading when residence_list is still empty", () => { + render(); + + expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument(); + expect(screen.queryByTestId('dt_cfd_details_form_description')).not.toBeInTheDocument(); + }); + + it('should disable Citizenship and Tax residence fields if they were submitted earlier & is_fully_authenticated is true', () => { + const values = { + citizen: 'Indonesia', + tax_residence: 'Indonesia', + tax_identification_number: '', + account_opening_reason: '', + }; + render(); + + expect(screen.getByRole('textbox', { name: /citizenship/i })).toBeDisabled(); + expect(screen.getByRole('textbox', { name: /tax residence/i })).toBeDisabled(); + expect(screen.getByRole('textbox', { name: /tax identification number/i })).toBeEnabled(); + expect(screen.getByText(/account opening reason/i)).toBeEnabled(); + expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); + }); + + it('should show an error message received from server that is passed via props as form_error', () => { + const form_error = 'Input validation failed: citizen!'; + render(); + + expect(screen.getByTestId('form_submit_error')).toHaveClass('dc-icon'); + expect(screen.getByText(form_error)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); + }); + + it('should enable the Next button for form submission when all required fields are filled', async () => { + render(); + + const citizenship_input = screen.getByRole('textbox', { name: /citizenship/i }); + const tax_residence_input = screen.getByRole('textbox', { name: /tax residence/i }); + const tax_id_input = screen.getByRole('textbox', { name: /tax identification number/i }); + const opening_reason_input = screen.getByText(/account opening reason/i); + const next_button = screen.getByRole('button', { name: /next/i }); + + fireEvent.change(citizenship_input, { target: { value: 'Indonesia' } }); + fireEvent.click(next_button); + + expect(await screen.findByText(tax_residence_required_error)).toBeInTheDocument(); + expect(await screen.findByText(tax_id_required_error)).toBeInTheDocument(); + expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); + expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); + expect(next_button).toBeDisabled(); + + fireEvent.change(tax_residence_input, { target: { value: 'Indonesia' } }); + fireEvent.click(next_button); + + expect(await screen.findByText(tax_id_required_error)).toBeInTheDocument(); + expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); + expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); + expect(next_button).toBeDisabled(); + + fireEvent.change(tax_id_input, { target: { value: '023124224563456' } }); + fireEvent.click(next_button); + + expect(await screen.findByText(opening_reason_required_error)).toBeInTheDocument(); + expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(tax_id_required_error)).not.toBeInTheDocument(); + expect(next_button).toBeDisabled(); + + fireEvent.click(opening_reason_input); + const hedging = within(screen.getByRole('list')).getByText('Hedging'); + fireEvent.click(hedging); + fireEvent.blur(hedging); + + await waitFor(() => { + expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(tax_id_required_error)).not.toBeInTheDocument(); + expect(screen.queryByText(opening_reason_required_error)).not.toBeInTheDocument(); + expect(next_button).toBeEnabled(); + }); + + fireEvent.click(next_button); + + await waitFor(() => { + expect(props.onSubmit).toHaveBeenCalledTimes(1); + }); + }); + + it('should disable the Next button in case of invalid input in a required field', async () => { + render(); + + const tax_id_input = screen.getByRole('textbox', { name: /tax identification number/i }); + + fireEvent.change(tax_id_input, { target: { value: 'invalid_text_id_0' } }); + fireEvent.blur(tax_id_input); + + expect(await screen.findByText('Tax identification number is not properly formatted.')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /next/i })).toBeDisabled(); + }); + + it('should disable the Next button in case a required field is empty', async () => { + render(); + + const citizenship_input = screen.getByRole('textbox', { name: /citizenship/i }); + + fireEvent.change(citizenship_input, { target: { value: '' } }); + fireEvent.blur(citizenship_input); + + expect(await screen.findByText(citizenship_required_error)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /next/i })).toBeDisabled(); + }); }); diff --git a/packages/cfd/src/Components/cfd-personal-details-form.tsx b/packages/cfd/src/Components/cfd-personal-details-form.tsx index 57535d5a9d57..37f2aad5ac5a 100644 --- a/packages/cfd/src/Components/cfd-personal-details-form.tsx +++ b/packages/cfd/src/Components/cfd-personal-details-form.tsx @@ -334,49 +334,47 @@ const CFDPersonalDetailsForm = ({ {!is_in_personal_details_modal && ( )} - {value.citizen && ( -
- - - {({ field }: FieldProps) => ( - - handleItemSelection(item, 'citizen') - } - list_portal_id='modal_root' - required - /> - )} - - - - ) => - setFieldValue('citizen', e.target.value, true) - } - required - should_hide_disabled_options={false} - /> - -
- )} - {value.place_of_birth && ( +
+ + + {({ field }: FieldProps) => ( + + handleItemSelection(item, 'citizen') + } + list_portal_id='modal_root' + required + /> + )} + + + + ) => + setFieldValue('citizen', e.target.value, true) + } + required + should_hide_disabled_options={false} + /> + +
+ {is_in_personal_details_modal && (
@@ -421,105 +419,97 @@ const CFDPersonalDetailsForm = ({ {!is_in_personal_details_modal && ( )} - {value.tax_residence && ( -
- - - {({ field }: FieldProps) => ( - - handleItemSelection(item, 'tax_residence') - } - list_portal_id='modal_root' - {...field} - /> - )} - - - - ) => - setFieldValue('tax_residence', e.target.value, true) - } - required - /> - -
- )} - {value.tax_identification_number && ( -
- + + + {({ field }: FieldProps) => ( + + handleItemSelection(item, 'tax_residence') + } + list_portal_id='modal_root' + {...field} + /> + )} + + + + ) => + setFieldValue('tax_residence', e.target.value, true) + } + required /> -
- )} + +
+
+ +
{!is_in_personal_details_modal && ( )} - {value.account_opening_reason && ( - - {({ field }: FieldProps) => ( - - - - - - - ) => { - handleChange(e); - setFieldValue( - 'account_opening_reason', - e.target.value, - true - ); - }} - /> - - - )} - - )} + + {({ field }: FieldProps) => ( + + + + + + ) => { + handleChange(e); + setFieldValue( + 'account_opening_reason', + e.target.value, + true + ); + }} + /> + + + )} + diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index b8e8d7ad39c5..f0be452cc00f 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -755,6 +755,7 @@ export default withRouter( setCurrentAccount: modules.cfd.setCurrentAccount, standpoint: client.standpoint, toggleCompareAccounts: modules.cfd.toggleCompareAccountsModal, + toggleJurisdictionModal: modules.cfd.toggleJurisdictionModal, toggleMT5TradeModal: modules.cfd.toggleMT5TradeModal, is_accounts_switcher_on: ui.is_accounts_switcher_on, openTopUpModal: ui.openTopUpModal, diff --git a/packages/cfd/src/Containers/cfd-personal-details-modal.tsx b/packages/cfd/src/Containers/cfd-personal-details-modal.tsx index 6a1eeb1b00d2..1b3d7db71a1d 100644 --- a/packages/cfd/src/Containers/cfd-personal-details-modal.tsx +++ b/packages/cfd/src/Containers/cfd-personal-details-modal.tsx @@ -11,23 +11,26 @@ type TFormValues = { [key: string]: string }; type TSetSubmiting = (isSubmitting: boolean) => void; const CFDPersonalDetailsModal = ({ - account_type, disableApp, enableApp, getChangeableFields, is_fully_authenticated, is_open, - jurisdiction_selected_shortcode, landing_company, openPasswordModal, toggleCFDPersonalDetailsModal, toggleJurisdictionModal, - trading_platform_available_accounts, residence_list, }: TCFDPersonalDetailsModalProps) => { const [form_error, setFormError] = React.useState(''); const [is_loading, setIsLoading] = React.useState(false); - const [form_values, setFormValues] = React.useState({}); + const [form_values, setFormValues] = React.useState({ + citizen: '', + place_of_birth: '', + tax_residence: '', + tax_identification_number: '', + account_opening_reason: '', + }); const initiatePersonalDetails = async (setSubmitting?: TSetSubmiting) => { // force request to update settings cache since settings have been updated @@ -40,29 +43,26 @@ const CFDPersonalDetailsModal = ({ } return; } - const mt5_signup_requirements_list = - trading_platform_available_accounts?.find( - _acc => - ((_acc.market_type === 'gaming' && account_type === 'synthetic') || - _acc.market_type === account_type) && - _acc.shortcode === jurisdiction_selected_shortcode - )?.requirements.signup || []; + const { citizen, place_of_birth, tax_residence, tax_identification_number, account_opening_reason } = + response.get_settings; - const initial_form_values = mt5_signup_requirements_list.reduce((acc, el) => { - return { ...acc, [el]: transform(response.get_settings[el]) || '' }; - }, {}); - setFormValues({ ...form_values, ...initial_form_values }); + setFormValues({ + ...form_values, + citizen: transform(citizen) || '', + place_of_birth: transform(place_of_birth) || '', + tax_residence: transform(tax_residence) || '', + tax_identification_number: tax_identification_number || '', + account_opening_reason: account_opening_reason || '', + }); }; React.useEffect(() => { - if (is_open) { - setIsLoading(true); - initiatePersonalDetails().then(() => { - setIsLoading(false); - }); - } + setIsLoading(true); + initiatePersonalDetails().then(() => { + setIsLoading(false); + }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [is_open]); + }, []); const transform = (value: string | undefined) => { const [result] = residence_list.filter(item => item.value === value); @@ -70,11 +70,12 @@ const CFDPersonalDetailsModal = ({ }; const saveFormData = (_index: number, value: TFormValues) => { - const new_form_values: TFormValues = {}; - Object.entries(value).forEach(([key, _value]) => { - new_form_values[key] = transform(_value); + setFormValues({ + ...value, + citizen: transform(value.citizen), + place_of_birth: transform(value.place_of_birth), + tax_residence: transform(value.tax_residence), }); - setFormValues(new_form_values); }; const prevStep = () => { @@ -165,17 +166,14 @@ const CFDPersonalDetailsModal = ({ }; export default connect(({ client, modules, ui }: RootStore) => ({ - account_type: modules.cfd.account_type.type, disableApp: ui.disableApp, enableApp: ui.enableApp, getChangeableFields: client.getChangeableFields, is_fully_authenticated: client.is_fully_authenticated, is_open: modules.cfd.is_cfd_personal_details_modal_visible, - jurisdiction_selected_shortcode: modules.cfd.jurisdiction_selected_shortcode, landing_company: client.landing_company, openPasswordModal: modules.cfd.enableCFDPasswordModal, toggleCFDPersonalDetailsModal: modules.cfd.toggleCFDPersonalDetailsModal, toggleJurisdictionModal: modules.cfd.toggleJurisdictionModal, - trading_platform_available_accounts: client.trading_platform_available_accounts, residence_list: client.residence_list, }))(CFDPersonalDetailsModal); diff --git a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx index 1d8c2b319cbe..99b2f7425059 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx @@ -23,8 +23,8 @@ type TAvailableAccountAPI = [ type TJurisdictionModalContent = { account_type: string; - jurisdiction_selected_shortcode: string; - setJurisdictionSelectedShortcode: (card_type: string) => void; + jurisdiction_selected_card: string; + setJurisdictionSelectedCard: (card_type: string) => void; synthetic_available_accounts: TAvailableAccountAPI; financial_available_accounts: TAvailableAccountAPI; poa_status: string; @@ -41,7 +41,7 @@ type TJurisdictionModalContent = { }; type TJurisdictionCard = { - jurisdiction_selected_shortcode: string; + jurisdiction_selected_card: string; synthetic_available_accounts: TAvailableAccountAPI; financial_available_accounts: TAvailableAccountAPI; account_type: string; @@ -49,7 +49,7 @@ type TJurisdictionCard = { poi_status: string; is_fully_authenticated: boolean; is_pending_authentication: boolean; - setJurisdictionSelectedShortcode: (card_type: string) => void; + setJurisdictionSelectedCard: (card_type: string) => void; type_of_card: string; disabled: boolean; poa_failed: boolean; @@ -57,7 +57,7 @@ type TJurisdictionCard = { }; const JurisdictionCard = ({ - jurisdiction_selected_shortcode, + jurisdiction_selected_card, synthetic_available_accounts, financial_available_accounts, account_type, @@ -65,7 +65,7 @@ const JurisdictionCard = ({ poi_status, is_fully_authenticated, is_pending_authentication, - setJurisdictionSelectedShortcode, + setJurisdictionSelectedCard, type_of_card, disabled, poa_failed, @@ -86,10 +86,10 @@ const JurisdictionCard = ({ const poi_none = poi_status === PoaStatusCodes.none; const cardSelection = (cardType: string) => { - if (jurisdiction_selected_shortcode === cardType) { - setJurisdictionSelectedShortcode(''); + if (jurisdiction_selected_card === cardType) { + setJurisdictionSelectedCard(''); } else { - setJurisdictionSelectedShortcode(cardType); + setJurisdictionSelectedCard(cardType); } }; @@ -174,7 +174,7 @@ const JurisdictionCard = ({ <>
undefined : () => cardSelection(`${type_of_card}`)} style={OneOrTwoCards ? { width: '32em' } : { width: '27.6em' }} @@ -225,9 +225,9 @@ const JurisdictionCard = ({ }; const JurisdictionModalContent = ({ - jurisdiction_selected_shortcode, + jurisdiction_selected_card, account_type, - setJurisdictionSelectedShortcode, + setJurisdictionSelectedCard, synthetic_available_accounts, financial_available_accounts, poa_status, @@ -267,7 +267,7 @@ const JurisdictionModalContent = ({ const ModalFootNote = () => { return ( <> - {poa_none && poi_none && jurisdiction_selected_shortcode !== 'svg' && jurisdiction_selected_shortcode && ( + {poa_none && poi_none && jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card && ( )} - {poi_failed && - !poa_failed && - jurisdiction_selected_shortcode && - jurisdiction_selected_shortcode !== 'svg' && ( - - - - )} - {poa_failed && - !poi_failed && - jurisdiction_selected_shortcode && - jurisdiction_selected_shortcode !== 'svg' && ( - - - - )} - {poa_failed && - poi_failed && - jurisdiction_selected_shortcode && - jurisdiction_selected_shortcode !== 'svg' && ( - - - - )} - {jurisdiction_selected_shortcode === 'svg' && ( + {poi_failed && !poa_failed && jurisdiction_selected_card && jurisdiction_selected_card !== 'svg' && ( + + + + )} + {poa_failed && !poi_failed && jurisdiction_selected_card && jurisdiction_selected_card !== 'svg' && ( + + + + )} + {poa_failed && poi_failed && jurisdiction_selected_card && jurisdiction_selected_card !== 'svg' && ( + + + + )} + {jurisdiction_selected_card === 'svg' && (
)} - {is_fully_authenticated && jurisdiction_selected_shortcode === 'bvi' && ( + {is_fully_authenticated && jurisdiction_selected_card === 'bvi' && (
)} - {is_fully_authenticated && jurisdiction_selected_shortcode === 'vanuatu' && ( + {is_fully_authenticated && jurisdiction_selected_card === 'vanuatu' && (
)} - {is_fully_authenticated && jurisdiction_selected_shortcode === 'labuan' && ( + {is_fully_authenticated && jurisdiction_selected_card === 'labuan' && (
)} - {is_pending_authentication && - jurisdiction_selected_shortcode !== 'svg' && - jurisdiction_selected_shortcode && ( -
- - - -
- )} + {is_pending_authentication && jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card && ( +
+ + + +
+ )} ); }; @@ -386,7 +375,7 @@ const JurisdictionModalContent = ({ {cardsToBeShown('bvi') && ( @@ -422,7 +411,7 @@ const JurisdictionModalContent = ({ {cardsToBeShown('vanuatu') && ( {is_fully_authenticated && poi_poa_verified && - jurisdiction_selected_shortcode && - jurisdiction_selected_shortcode !== 'svg' && ( - - )} + jurisdiction_selected_card && + jurisdiction_selected_card !== 'svg' && } ); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx index adec2f4795e5..3b9cfdc058b3 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal.tsx @@ -6,7 +6,7 @@ import RootStore from 'Stores/index'; import { LandingCompany } from '@deriv/api-types'; import JurisdictionModalContent from './jurisdiction-modal-content'; -export type TTradingPlatformAvailableAccount = { +type TTradingPlatformAvailableAccount = { market_type: 'financial' | 'gaming'; name: string; requirements: { @@ -47,11 +47,11 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & { disableApp: () => void; enableApp: () => void; has_real_mt5_non_svg_login: boolean; + is_authentication_needed: boolean; is_jurisdiction_modal_visible: boolean; is_loading: boolean; is_eu: boolean; is_eu_country: boolean; - jurisdiction_selected_shortcode: string; residence: string; toggleCFDPersonalDetailsModal: () => void; toggleJurisdictionModal: () => void; @@ -59,7 +59,6 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & { is_fully_authenticated: boolean; is_pending_authentication: boolean; openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; - setJurisdictionSelectedShortcode: (shortcode: string) => void; toggleCFDVerificationModal: () => void; }; @@ -69,18 +68,18 @@ const JurisdictionModal = ({ disableApp, enableApp, has_real_mt5_non_svg_login, + is_authentication_needed, is_jurisdiction_modal_visible, is_eu, - jurisdiction_selected_shortcode, toggleCFDPersonalDetailsModal, toggleJurisdictionModal, trading_platform_available_accounts, is_fully_authenticated, is_pending_authentication, openPasswordModal, - setJurisdictionSelectedShortcode, toggleCFDVerificationModal, }: TJurisdictionModalProps) => { + const [jurisdiction_selected_card, setJurisdictionSelectedCard] = React.useState(''); const [checked, setChecked] = React.useState(false); const financial_available_accounts = trading_platform_available_accounts.filter( @@ -106,9 +105,9 @@ const JurisdictionModal = ({ const poi_poa_not_submitted = poi_status === 'none' || poa_status === 'none'; const is_next_button_enabled = - jurisdiction_selected_shortcode === 'svg' || - (jurisdiction_selected_shortcode && - jurisdiction_selected_shortcode !== 'svg' && + jurisdiction_selected_card === 'svg' || + (jurisdiction_selected_card && + jurisdiction_selected_card !== 'svg' && (poi_poa_not_submitted || poi_poa_failed || (poi_poa_verified && checked)) && !is_pending_authentication); @@ -122,10 +121,10 @@ const JurisdictionModal = ({ if (is_eu) { if (poi_poa_verified) { openPasswordModal(type_of_account); - } else { + } else if (is_authentication_needed) { toggleCFDVerificationModal(); } - } else if (jurisdiction_selected_shortcode === 'svg') { + } else if (jurisdiction_selected_card === 'svg') { if (account_type.type === 'financial' && poi_poa_verified && !has_real_mt5_non_svg_login) { toggleCFDPersonalDetailsModal(); } else { @@ -138,13 +137,16 @@ const JurisdictionModal = ({ } else { openPasswordModal(type_of_account); } - } else { + } else if (is_authentication_needed) { toggleCFDVerificationModal(); + } else { + openPasswordModal(type_of_account); } + setJurisdictionSelectedCard(''); }; const buttonText = () => { - const selected_card = jurisdiction_selected_shortcode !== 'svg' && jurisdiction_selected_shortcode; + const selected_card = jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card; if (poa_failed && selected_card) { return ; } else if (poi_failed && selected_card) { @@ -172,8 +174,8 @@ const JurisdictionModal = ({ > { toggleJurisdictionModal(); - setJurisdictionSelectedShortcode(''); + setJurisdictionSelectedCard(''); }} footer={