diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index 768ea5598292..375de64bd605 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -556,6 +556,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { platform={platform} is_demo_tab={is_demo_tab} openPasswordModal={openRealPasswordModal} + is_real_enabled={is_real_enabled} /> { - const [is_loading, setIsLoading] = React.useState(true); const [showSubmittedModal, setShowSubmittedModal] = React.useState(false); const handleOpenJurisditionModal = () => { toggleCFDVerificationModal(); toggleJurisdictionModal(); }; - const getAccountStausFromAPI = () => { + const getAccountStatusFromAPI = () => { WS.authorized.getAccountStatus().then((response: AccountStatusResponse) => { const { get_account_status } = response; if (get_account_status?.authentication) { const identity_status = get_account_status?.authentication?.identity?.status; const document_status = get_account_status?.authentication?.document?.status; - setIsLoading(false); if ( (identity_status === 'pending' || identity_status === 'verified') && (document_status === 'pending' || document_status === 'verified') @@ -59,8 +57,7 @@ const CFDDbViOnBoarding = ({ }; React.useEffect(() => { if (is_cfd_verification_modal_visible) { - setIsLoading(true); - getAccountStausFromAPI(); + getAccountStatusFromAPI(); } }, [is_cfd_verification_modal_visible]); @@ -76,7 +73,7 @@ const CFDDbViOnBoarding = ({ toggleModal={toggleCFDVerificationModal} height='700px' width='996px' - onMount={() => getAccountStausFromAPI()} + onMount={() => getAccountStatusFromAPI()} exit_classname='cfd-modal--custom-exit' > {showSubmittedModal ? ( diff --git a/packages/cfd/src/Containers/compare-accounts-modal.tsx b/packages/cfd/src/Containers/compare-accounts-modal.tsx index 2050e803e856..cb454ba61960 100644 --- a/packages/cfd/src/Containers/compare-accounts-modal.tsx +++ b/packages/cfd/src/Containers/compare-accounts-modal.tsx @@ -27,10 +27,12 @@ type TCompareAccountsModalProps = TCompareAccountsReusedProps & { is_loading: boolean; is_eu: boolean; is_eu_country: boolean; + is_real_enabled: boolean; residence: string; is_demo_tab: boolean; toggleCompareAccounts: () => void; openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + openDerivRealAccountNeededModal: () => void; }; const CompareAccountsModal = ({ @@ -43,11 +45,13 @@ const CompareAccountsModal = ({ is_eu, is_uk, is_eu_country, + is_real_enabled, platform, residence, is_demo_tab, toggleCompareAccounts, openPasswordModal, + openDerivRealAccountNeededModal, }: TCompareAccountsModalProps) => { const show_eu_related = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country); const is_dxtrade = platform && platform === CFD_PLATFORMS.DXTRADE; @@ -120,9 +124,12 @@ const CompareAccountsModal = ({ ) : ( )} @@ -149,9 +156,12 @@ const CompareAccountsModal = ({ ) : ( )} @@ -174,4 +184,5 @@ export default connect(({ modules, ui, client }: RootStore) => ({ landing_companies: client.landing_companies, residence: client.residence, toggleCompareAccounts: modules.cfd.toggleCompareAccountsModal, + openDerivRealAccountNeededModal: ui.openDerivRealAccountNeededModal, }))(CompareAccountsModal); diff --git a/packages/cfd/src/Containers/mt5-compare-table-content.tsx b/packages/cfd/src/Containers/mt5-compare-table-content.tsx index 91bce468eb40..eefbab8cad30 100644 --- a/packages/cfd/src/Containers/mt5-compare-table-content.tsx +++ b/packages/cfd/src/Containers/mt5-compare-table-content.tsx @@ -41,8 +41,11 @@ type TDMT5CompareModalContentProps = { category: string; }; current_list: Record; + has_real_account: boolean; is_logged_in: boolean; is_demo_tab: boolean; + is_real_enabled: boolean; + openDerivRealAccountNeededModal: () => void; openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; toggleCompareAccounts: () => void; toggleCFDVerificationModal: () => void; @@ -54,6 +57,7 @@ type TDMT5CompareModalContentProps = { toggleCFDPersonalDetailsModal: () => void; setJurisdictionSelectedShortcode: (shortcode: string) => void; show_eu_related: boolean; + upgradeable_landing_companies: unknown[]; }; const eucontent: TModalContentProps[] = [ @@ -203,8 +207,11 @@ const DMT5CompareModalContent = ({ account_settings, setAccountSettings, current_list, + has_real_account, is_logged_in, is_demo_tab, + is_real_enabled, + openDerivRealAccountNeededModal, openPasswordModal, toggleCFDVerificationModal, toggleCFDPersonalDetailsModal, @@ -212,14 +219,25 @@ const DMT5CompareModalContent = ({ trading_platform_available_accounts, show_eu_related, setJurisdictionSelectedShortcode, + upgradeable_landing_companies, }: TDMT5CompareModalContentProps) => { const [has_submitted_personal_details, setHasSubmittedPersonalDetails] = React.useState(false); const available_accounts_keys = trading_platform_available_accounts.map( account => `${account.market_type === 'gaming' ? 'synthetic' : account.market_type}_${account.shortcode}` ); - const synthetic_accounts_count = available_accounts_keys.filter(key => key.startsWith('synthetic')).length; - const financial_accounts_count = available_accounts_keys.filter(key => key.startsWith('financial')).length; + const logged_out_available_accounts_count = show_eu_related ? 1 : 6; + const available_accounts_count = is_logged_in + ? available_accounts_keys.length + : logged_out_available_accounts_count; + const synthetic_accounts_count = + !is_logged_in && !show_eu_related + ? 2 + : available_accounts_keys.filter(key => key.startsWith('synthetic')).length; + const financial_accounts_count = + !is_logged_in && !show_eu_related + ? 4 + : available_accounts_keys.filter(key => key.startsWith('financial')).length || 1; const poa_status = authentication_status?.document_status; const poi_status = authentication_status?.identity_status; @@ -245,6 +263,7 @@ const DMT5CompareModalContent = ({ }, []); const getAvailableAccountsContent = (_content: TModalContentProps[]) => { + if (!is_logged_in) return _content; return _content.map(row_data => { const available_accounts_values = Object.entries(row_data.values).reduce( (acc, [key, value]) => (available_accounts_keys.includes(key) ? { ...acc, [key]: value } : acc), @@ -283,7 +302,7 @@ const DMT5CompareModalContent = ({ return _footer_button_data.filter(data => available_accounts_keys.includes(data.action)); }; - const onSelectRealAccount = (item: { label: string; action: string }) => { + const onSelectRealAccount = (item: TFooterButtonData) => { const poi_poa_verified = poi_status === 'verified' && poa_status === 'verified'; const account_type = item.action.startsWith('financial') ? 'financial' : 'synthetic'; @@ -294,12 +313,10 @@ const DMT5CompareModalContent = ({ switch (item.action) { case 'synthetic_svg': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('svg'); openPasswordModal(type_of_account); break; case 'financial_svg': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('svg'); if (poi_poa_verified && !has_submitted_personal_details) { toggleCFDPersonalDetailsModal(); @@ -309,7 +326,6 @@ const DMT5CompareModalContent = ({ break; case 'synthetic_bvi': case 'financial_bvi': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('bvi'); if (poi_poa_verified) { if (!has_submitted_personal_details) { @@ -322,7 +338,6 @@ const DMT5CompareModalContent = ({ } break; case 'financial_maltainvest': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('maltainvest'); if (poi_poa_verified) { openPasswordModal(type_of_account); @@ -332,7 +347,6 @@ const DMT5CompareModalContent = ({ break; case 'financial_labuan': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('labuan'); if (poi_poa_verified) { if (!has_submitted_personal_details) { @@ -346,7 +360,6 @@ const DMT5CompareModalContent = ({ break; case 'financial_vanuatu': - toggleCompareAccounts(); setJurisdictionSelectedShortcode('vanuatu'); if (poi_poa_verified) { if (!has_submitted_personal_details) { @@ -363,6 +376,15 @@ const DMT5CompareModalContent = ({ } }; + const onButtonClick = (item: TFooterButtonData) => { + const should_show_missing_real_account = + is_logged_in && !has_real_account && upgradeable_landing_companies?.length > 0 && is_real_enabled; + toggleCompareAccounts(); + if (should_show_missing_real_account) { + openDerivRealAccountNeededModal(); + } else onSelectRealAccount(item); + }; + const modal_content = show_eu_related ? eucontent : content; const modal_footer = show_eu_related ? eu_footer_button : footer_buttons; const getContentSize = (id: string) => { @@ -376,8 +398,8 @@ const DMT5CompareModalContent = ({ show_eu_related ? 'cfd-real-compare-accounts-row-eu' : classNames('cfd-real-compare-accounts__table-row--instruments', { - [`cfd-real-compare-accounts__row-with-columns-count-${available_accounts_keys.length + 1}`]: - available_accounts_keys.length < 6, + [`cfd-real-compare-accounts__row-with-columns-count-${available_accounts_count + 1}`]: + available_accounts_count < 6, }) } > @@ -417,9 +439,8 @@ const DMT5CompareModalContent = ({ ? 'cfd-real-compare-accounts-row-eu' : classNames('cfd-real-compare-accounts__table-row', { 'cfd-real-compare-accounts__table-row--leverage': is_leverage, - [`cfd-real-compare-accounts__row-with-columns-count-${ - available_accounts_keys.length + 1 - }`]: available_accounts_keys.length < 6, + [`cfd-real-compare-accounts__row-with-columns-count-${available_accounts_count + 1}`]: + available_accounts_count < 6, }) } > @@ -488,7 +509,7 @@ const DMT5CompareModalContent = ({ ? 'cfd-real-compare-accounts-row-eu' : classNames('cfd-real-compare-accounts__table-header', { [`cfd-real-compare-accounts__table-header-for-synthetic-${synthetic_accounts_count}-financial-${financial_accounts_count}`]: - available_accounts_keys.length < 6, + available_accounts_count < 6, }) } > @@ -511,51 +532,53 @@ const DMT5CompareModalContent = ({ ))} - {is_logged_in && ( + { - {getAvailableAccountsFooterButtons(modal_footer).map((item, index) => ( - - {should_show_pending_status(item) ? ( -
- - {localize('Pending verification')} - -
- ) : ( - - )} -
- ))} + {is_logged_in && + getAvailableAccountsFooterButtons(modal_footer).map((item, index) => ( + + {should_show_pending_status(item) ? ( +
+ + {localize('Pending verification')} + +
+ ) : ( + + )} +
+ ))}
- )} + } @@ -566,13 +589,14 @@ const DMT5CompareModalContent = ({ export default connect(({ modules, client }: RootStore) => ({ account_type: modules.cfd.account_type, account_settings: client.account_settings, + authentication_status: client.authentication_status, + has_real_account: client.has_active_real_account, setAccountSettings: client.setAccountSettings, current_list: modules.cfd.current_list, has_real_mt5_login: client.has_real_mt5_login, - authentication_status: client.authentication_status, setJurisdictionSelectedShortcode: modules.cfd.setJurisdictionSelectedShortcode, - toggleCompareAccounts: modules.cfd.toggleCompareAccountsModal, toggleCFDVerificationModal: modules.cfd.toggleCFDVerificationModal, toggleCFDPersonalDetailsModal: modules.cfd.toggleCFDPersonalDetailsModal, trading_platform_available_accounts: client.trading_platform_available_accounts, + upgradeable_landing_companies: client.upgradeable_landing_companies, }))(DMT5CompareModalContent);