diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index f0be452cc00f..b8e8d7ad39c5 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -755,7 +755,6 @@ 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 1b3d7db71a1d..a36375bc91bd 100644 --- a/packages/cfd/src/Containers/cfd-personal-details-modal.tsx +++ b/packages/cfd/src/Containers/cfd-personal-details-modal.tsx @@ -57,12 +57,13 @@ const CFDPersonalDetailsModal = ({ }; React.useEffect(() => { - setIsLoading(true); - initiatePersonalDetails().then(() => { - setIsLoading(false); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + if (is_open) { + setIsLoading(true); + initiatePersonalDetails().then(() => { + setIsLoading(false); + }); + } + }, [is_open]); const transform = (value: string | undefined) => { const [result] = residence_list.filter(item => item.value === value); diff --git a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx index 99b2f7425059..1d8c2b319cbe 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_card: string; - setJurisdictionSelectedCard: (card_type: string) => void; + jurisdiction_selected_shortcode: string; + setJurisdictionSelectedShortcode: (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_card: string; + jurisdiction_selected_shortcode: 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; - setJurisdictionSelectedCard: (card_type: string) => void; + setJurisdictionSelectedShortcode: (card_type: string) => void; type_of_card: string; disabled: boolean; poa_failed: boolean; @@ -57,7 +57,7 @@ type TJurisdictionCard = { }; const JurisdictionCard = ({ - jurisdiction_selected_card, + jurisdiction_selected_shortcode, synthetic_available_accounts, financial_available_accounts, account_type, @@ -65,7 +65,7 @@ const JurisdictionCard = ({ poi_status, is_fully_authenticated, is_pending_authentication, - setJurisdictionSelectedCard, + setJurisdictionSelectedShortcode, 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_card === cardType) { - setJurisdictionSelectedCard(''); + if (jurisdiction_selected_shortcode === cardType) { + setJurisdictionSelectedShortcode(''); } else { - setJurisdictionSelectedCard(cardType); + setJurisdictionSelectedShortcode(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_card, + jurisdiction_selected_shortcode, account_type, - setJurisdictionSelectedCard, + setJurisdictionSelectedShortcode, synthetic_available_accounts, financial_available_accounts, poa_status, @@ -267,7 +267,7 @@ const JurisdictionModalContent = ({ const ModalFootNote = () => { return ( <> - {poa_none && poi_none && jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card && ( + {poa_none && poi_none && jurisdiction_selected_shortcode !== 'svg' && jurisdiction_selected_shortcode && ( )} - {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' && ( + {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' && (
)} - {is_fully_authenticated && jurisdiction_selected_card === 'bvi' && ( + {is_fully_authenticated && jurisdiction_selected_shortcode === 'bvi' && (
)} - {is_fully_authenticated && jurisdiction_selected_card === 'vanuatu' && ( + {is_fully_authenticated && jurisdiction_selected_shortcode === 'vanuatu' && (
)} - {is_fully_authenticated && jurisdiction_selected_card === 'labuan' && ( + {is_fully_authenticated && jurisdiction_selected_shortcode === 'labuan' && (
)} - {is_pending_authentication && jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card && ( -
- - - -
- )} + {is_pending_authentication && + jurisdiction_selected_shortcode !== 'svg' && + jurisdiction_selected_shortcode && ( +
+ + + +
+ )} ); }; @@ -375,7 +386,7 @@ const JurisdictionModalContent = ({ {cardsToBeShown('bvi') && ( @@ -411,7 +422,7 @@ const JurisdictionModalContent = ({ {cardsToBeShown('vanuatu') && ( {is_fully_authenticated && poi_poa_verified && - jurisdiction_selected_card && - jurisdiction_selected_card !== 'svg' && } + jurisdiction_selected_shortcode && + jurisdiction_selected_shortcode !== 'svg' && ( + + )} ); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx index 3b9cfdc058b3..adec2f4795e5 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'; -type TTradingPlatformAvailableAccount = { +export 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,6 +59,7 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & { is_fully_authenticated: boolean; is_pending_authentication: boolean; openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + setJurisdictionSelectedShortcode: (shortcode: string) => void; toggleCFDVerificationModal: () => void; }; @@ -68,18 +69,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( @@ -105,9 +106,9 @@ const JurisdictionModal = ({ const poi_poa_not_submitted = poi_status === 'none' || poa_status === 'none'; const is_next_button_enabled = - jurisdiction_selected_card === 'svg' || - (jurisdiction_selected_card && - jurisdiction_selected_card !== 'svg' && + jurisdiction_selected_shortcode === 'svg' || + (jurisdiction_selected_shortcode && + jurisdiction_selected_shortcode !== 'svg' && (poi_poa_not_submitted || poi_poa_failed || (poi_poa_verified && checked)) && !is_pending_authentication); @@ -121,10 +122,10 @@ const JurisdictionModal = ({ if (is_eu) { if (poi_poa_verified) { openPasswordModal(type_of_account); - } else if (is_authentication_needed) { + } else { toggleCFDVerificationModal(); } - } else if (jurisdiction_selected_card === 'svg') { + } else if (jurisdiction_selected_shortcode === 'svg') { if (account_type.type === 'financial' && poi_poa_verified && !has_real_mt5_non_svg_login) { toggleCFDPersonalDetailsModal(); } else { @@ -137,16 +138,13 @@ const JurisdictionModal = ({ } else { openPasswordModal(type_of_account); } - } else if (is_authentication_needed) { - toggleCFDVerificationModal(); } else { - openPasswordModal(type_of_account); + toggleCFDVerificationModal(); } - setJurisdictionSelectedCard(''); }; const buttonText = () => { - const selected_card = jurisdiction_selected_card !== 'svg' && jurisdiction_selected_card; + const selected_card = jurisdiction_selected_shortcode !== 'svg' && jurisdiction_selected_shortcode; if (poa_failed && selected_card) { return ; } else if (poi_failed && selected_card) { @@ -174,8 +172,8 @@ const JurisdictionModal = ({ > { toggleJurisdictionModal(); - setJurisdictionSelectedCard(''); + setJurisdictionSelectedShortcode(''); }} footer={