From dc59a0ce8b91498bc6649ae927000cdb51387d60 Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Fri, 17 Mar 2023 10:03:18 +0400 Subject: [PATCH] Amina/86159/vanuatu on derived (#7523) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: mt5 dashboard fix * fix: test cases * fix: test case * fix: fixed the alignment issue of password-selection-modal * fix: switching on exit traders modal * chore: show appropriate information on the account switcher in the old UI * fix: next button disabled in eu signup * fix: test case fix * fix: account switcher * fix: manage account in account switcher * fix: dxtrade error * fix: redirecting for traders_hub * fix: header traders hub cursor pointer * fix: acc switcher * fix: fixing issues of the tour guide * fix: change regulations to regulation * fix: regulations v2 * fix: icon and message * fix: cursor pointer for status badge * fix: mf real account signup width * fix: real account signup modal * fix: place of birth for eu * fix: tests * fix: fixed the scroll issue and added a new condition to tour guide * fix: removed the redundant line of trading-hub-header * fix: made a small change for the handle scroll function * fix: replaced interval with timeout * feat: vanuatu on derived * fix: hide idv for EU * fix: some capital characters * fix: signup modal title * fix: regulation compare table scroll smooth * fix: compare account modal * fix: responsive alignment * fix: fix popup content * fix: malta description fix and styles * fix: regulation responsive scroll * fix: compare account modal * fix: update jurisdiction content * fix: jurisdiction content * fix: get_more_btn * fix: regulators * fix: css for account type dropdown * fix: add options account for eu * fix: onboarding content desc * fix: onboarding content at stage 5 * fix: onboarding platform names * chore: hide region for new accounts * fix: add options account * fix: design-difference-in-transfer-popup * fix: regulator table scroll * fix: success modal meesage * fix: responsive scroll dashboard * fix: regulation switcher appearing for high risk * fix: 86699_stock_to_stocks * fix: fix add new account * fix: traders hub header dark theme icon * fix: tooltip description for non-eu * fix: dropdown icon for onboarding currency switcher * fix: add short code text for derived and financial accounts * fix: eu currency switcher showing in non-eu * fix: change dmt5 to deriv mt5 in total assets * fix: cfd learn more link * test: fix tests * fix: dark_mode_status_badge * fix: add icon for deriv and financial accounts in receipt * refactor: code refactoring * fix: transfer now to top-up now * fix: total assets to be shown based on selected region * fix: total assets to be shown based on selected region * fix: loginid error on logout * fix: show popover in mobile * fix: disable click on tourguide overlay and remove setting accountType on tour guide * fix: onboarding footer * fix: test failure * fix: fixed the background color issue of onboarding in dark theme * fix: region seitcher in mobile view * fix: fixed the glitch issue with onboarding * fix: fixed the issue of tour guide * fix: dont show loader if user has no account when switching * fix: deposit now style in cashier transfer modal * fix: dashboard title size * fix: decreased the delays * fix: redirect to static pages * fix: fixed the localization issue of tour guide * fix: remove balance when account has mt5 status * fix: regulation switcher glitch in high risk * fix: onboarding labels * fix: pointer display * fix: status badge icon overflow and total assets currency in dark theme * fix: success_message * fix: minor issues in contents * fix: account from field should be tha same as trading account * trigger codecov * fix: top-up to transfer * fix: switch account to real for demo_low_risk * fix: can create deriv x account if user has no cr account and status badge icon css * fix: status badge color inconsistency and size * fix: deriv x trade modal huawei css * fix: jurisdiction modal content * Account fix selected to (#27) * fix: default selected to account * fix: account transfer switch to default client acc * fix: onboarding footer text padding * fix: real account needed modal for mt5 if user has no cr account * fix: eu onboarding footer * fix: redirect_to_traders_hub_on_entering_mt5_url * fix: redirect derivx url * fix: icon design mismatch (#26) * fix: simplified the conditions * test: fix test * fix: fixed all conflicts * refactor: code refactoring * fix: salutation * fix: short code visibility * fix: fix short code visibility * refactor: code refactoring * fix: remove icon for derivx trade modal * fix: fixed the issue where is_pre_appstore was retrived from another place * fix: add Assets alias to webpack/tsconfig, refactor imports * test: fix jest config * fix: default page should be demo in onboarding * fix: freeze_mg_acc_on_cooling_perios * fix: onboarding buttons * fix: transfer_form_from_account_style * fix: mt5 trade modal css alignment * chore: hide disclaimer for low-risk clients * fix: notification console error * chore: add volatility in regulator modal * fix: account_transfer_title * chore: add disclamer to low risk eu * fix: asterik_on_required_fields * fix: adding loader to total asset balance on switching * fix: loader * fix: loader console error * fix: regulation switcher glitch when switching * fix: add back react content loader * fix: safari styling shiii * fix: close button on on boarding * fix: Trader's hub title * fix: disclaimer text change * fix: all dem loaders * fix: up/dpwn icon * fix: dmt5 paswrd * fix: low_risk flag in dbot * fix: fix layout shift on safari * fix: servererror component fix * fix: circleci and typo * fix: header loader * fix: investor password * fix: merge conflicts * test: vanuatu * fix: account switcher name and stylings * fix: test case * fix: code cleanup * chore: merge master * fix: content in modals * fix: remove code smell * feat: restrict vanuatu * fix: allow resubmission * fix: code smell * fix: refactor: modal * fix: remove additional space in compare modal content * fix: astericks in personal details form * fix: width alignemnt in form * fix: typo * fix: tin label * fix: tin * fix: remove code smell * fix: circleci fix after master update --------- Co-authored-by: Hirad Co-authored-by: Jim Daniels Wasswa Co-authored-by: Matin shafiei Co-authored-by: Thisyahlen Co-authored-by: mahdiyeh-deriv <82078941+mahdiyeh-deriv@users.noreply.github.com> Co-authored-by: Thisyahlen Nair Co-authored-by: “Matin-deriv” Co-authored-by: Bahar Co-authored-by: george-usynin-binary Co-authored-by: mahdiyeh-fs Co-authored-by: GeorgeUsynin <70709786+GeorgeUsynin@users.noreply.github.com> --- packages/account/src/Styles/account.scss | 1 + .../components/cfds-listing/cfds-listing.scss | 44 +++++++---- .../Components/cfd-personal-details-form.tsx | 12 ++- .../Constants/cfd_compare_account_content.ts | 9 ++- .../src/Constants/jurisdiction-contents.ts | 3 +- .../__tests__/cfd-password-modal.spec.js | 21 +++++- .../src/Containers/cfd-dbvi-onboarding.tsx | 2 +- .../cfd/src/Containers/cfd-password-modal.tsx | 42 +++++++---- .../src/Containers/compare-accounts-modal.tsx | 2 +- .../jurisdiction-card-banner.tsx | 33 +++++++-- .../jurisdiction-modal/jurisdiction-card.tsx | 4 +- .../jurisdiction-modal-checkbox.tsx | 4 +- .../jurisdiction-modal-content.tsx | 22 ------ .../jurisdiction-modal-foot-note.tsx | 30 ++++---- .../jurisdiction-modal/jurisdiction-modal.tsx | 74 +++++++++++++------ .../Containers/mt5-compare-table-content.tsx | 7 ++ packages/cfd/src/Containers/props.types.ts | 9 ++- packages/cfd/src/sass/cfd-dashboard.scss | 54 ++++++++++---- packages/core/src/Constants/cfd-text.js | 1 + packages/core/src/Stores/client-store.js | 7 ++ packages/shared/src/utils/cfd/cfd.ts | 5 ++ 21 files changed, 260 insertions(+), 126 deletions(-) diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index 9773371be4b8..4662457c0328 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -379,6 +379,7 @@ $MIN_HEIGHT_FLOATING: calc( .cfd-personal-details-modal__form & { margin: unset; + max-width: unset; } &--2-cols { diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 80fe1aebcbdc..1e5c630a5344 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -5,7 +5,7 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 38rem; + min-height: 36rem; width: 27.6em; position: relative; padding: 1.6rem; @@ -81,6 +81,24 @@ border-radius: 0.5rem; } } + &__footer-wrapper { + @include mobile { + background-color: var(--general-main-1); + width: 100%; + height: 100%; + position: sticky; + bottom: 0; + max-height: 20rem; + z-index: 12; + } + .dc-modal-footer { + @include desktop { + position: fixed; + bottom: 0; + width: 100%; + } + } + } &__h2-header { margin: 1.4rem 0 2.4rem; } @@ -1141,7 +1159,7 @@ &__table-header { grid-template-columns: 0.9fr 1.39fr 2.74fr; &__pre-appstore { - grid-template-columns: 1fr 1.45fr 2.8fr 0.9fr; + grid-template-columns: 11rem 36rem 46rem 13.5rem; } } @for $financial_accounts_count from 0 through 6 { @@ -1178,27 +1196,27 @@ } &__table-row { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr; + grid-template-columns: 11rem 13.4rem 12.6rem 12rem 13.4rem 12.6rem 10rem 10rem; &__pre-appstore { - grid-template-columns: 1fr 0.78fr 0.67fr 0.78fr 0.67fr 0.65fr 0.7fr 0.9fr; + grid-template-columns: 11rem 13.4rem 12.6rem 10rem 13.4rem 12.6rem 10rem 10rem 13.5rem; } &--leverage { - grid-template-columns: 0.9fr 0.72fr 0.67fr 2.04fr 0.7fr; + grid-template-columns: 11rem 38rem 36rem 10rem; &__pre-appstore { - grid-template-columns: 1fr 0.78fr 0.67fr 2.1fr 0.7fr 0.9fr; + grid-template-columns: 11rem 36rem 36rem 10rem 13.5rem; } } &--platform { &__pre-appstore { - grid-template-columns: 1fr 4.25fr 0.9fr; + grid-template-columns: 11rem 82rem 13.5rem; } } &--instruments { - grid-template-columns: 0.9fr 1.39fr 1.39fr 0.65fr 0.7fr; + grid-template-columns: 11rem 38rem 26rem 10rem 10rem; &__pre-appstore { - grid-template-columns: 1fr 1.45fr 1.45fr 0.65fr 0.7fr 0.9fr; + grid-template-columns: 11rem 36rem 26rem 10rem 10rem 13.5rem; } } } @@ -1211,13 +1229,13 @@ } } &__table-footer { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr; + grid-template-columns: 11rem 13.4rem 12.6rem 12rem 13.4rem 12.6rem 10rem 10rem; + height: 4.8rem; &__pre-appstore { - grid-template-columns: 1fr 0.78fr 0.67fr 0.78fr 0.67fr 0.65fr 0.7fr 0.9fr; - height: 5.8rem; + grid-template-columns: 11rem 13.4rem 12.6rem 10rem 13.4rem 12.6rem 10rem 10rem 13.5rem; } &__item { - height: 5.8rem; + height: 4.8rem; justify-content: center; &--eu-pre-appstore { height: 4.8rem; diff --git a/packages/cfd/src/Components/cfd-personal-details-form.tsx b/packages/cfd/src/Components/cfd-personal-details-form.tsx index c80edd9c4424..2d26ffc609e0 100644 --- a/packages/cfd/src/Components/cfd-personal-details-form.tsx +++ b/packages/cfd/src/Components/cfd-personal-details-form.tsx @@ -277,6 +277,10 @@ const CFDPersonalDetailsForm = ({ const item_value = item.value ? item.text : ''; setFieldValue(_field, item_value, true); }; + const tin_field_label = residence_list.find(res => res.text === values.tax_residence && res.tin_format) + ?.tin_format + ? localize('Tax identification number*') + : localize('Tax identification number'); return ( @@ -318,7 +322,7 @@ const CFDPersonalDetailsForm = ({ data-lpignore='true' autoComplete='off' type='text' - label={localize('Citizenship')} + label={localize('Citizenship*')} error={citizenship_error} disabled={is_citizenship_disabled} list_items={residence_list} @@ -334,7 +338,7 @@ const CFDPersonalDetailsForm = ({ ', () => { is_cfd_password_modal_enabled: true, is_cfd_success_dialog_enabled: false, is_dxtrade_allowed: false, + is_pre_appstore: false, jurisdiction_selected_shortcode: 'svg', platform: 'mt5', has_cfd_error: false, @@ -267,6 +268,22 @@ describe('', () => { ); + expect(await screen.findByText('IcMt5SyntheticPlatform')).toBeInTheDocument(); + }); + + it('should display icon in Success Dialog in tradershub', async () => { + const props = { + account_status: { status: ['mt5_password_not_set', 'dxtrade_password_not_set'] }, + error_type: 'PasswordError', + account_type: { category: 'real', type: 'synthetic' }, + is_pre_appstore: true, + }; + render( + + + + ); + expect(await screen.findByText('MockedMT5Icon')).toBeInTheDocument(); }); @@ -282,7 +299,7 @@ describe('', () => { ); - expect(await screen.findByText('MockedMT5Icon')).toBeInTheDocument(); + expect(await screen.findByText('IcMt5FinancialPlatform')).toBeInTheDocument(); }); it('should display IcDxtradeSyntheticPlatform icon in Success Dialog', async () => { @@ -328,7 +345,7 @@ describe('', () => { ); - expect(await screen.findByText('MockedMT5Icon')).toBeInTheDocument(); + expect(await screen.findByText('IcMt5CfdPlatform')).toBeInTheDocument(); }); it('should invoke verifyEmail for DerivX when Forgot password is clicked', async () => { diff --git a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx b/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx index a805d21aac02..6631c4ff3c9b 100644 --- a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx +++ b/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx @@ -53,7 +53,7 @@ const CFDDbviOnboarding = ({ updateAccountStatus, updateMT5Status, }: TCFDDbviOnboardingProps) => { - const [showSubmittedModal, setShowSubmittedModal] = React.useState(false); + const [showSubmittedModal, setShowSubmittedModal] = React.useState(true); const [is_loading, setIsLoading] = React.useState(false); const getAccountStatusFromAPI = () => { diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx index 9c5908beffed..ecd7c5e1a6d0 100644 --- a/packages/cfd/src/Containers/cfd-password-modal.tsx +++ b/packages/cfd/src/Containers/cfd-password-modal.tsx @@ -55,6 +55,7 @@ type TIconTypeProps = { platform: string; type?: string; show_eu_related_content: boolean; + is_pre_appstore: boolean; }; type TCFDPasswordFormReusedProps = { @@ -197,7 +198,7 @@ const ReviewMessageForMT5 = ({ return null; }; -const IconType = React.memo(({ platform, type, show_eu_related_content }: TIconTypeProps) => { +const IconType = React.memo(({ is_pre_appstore, platform, type, show_eu_related_content }: TIconTypeProps) => { if (platform === CFD_PLATFORMS.DXTRADE) { switch (type) { case 'all': @@ -209,19 +210,30 @@ const IconType = React.memo(({ platform, type, show_eu_related_content }: TIconT default: return ; } - } - - switch (type) { - case 'synthetic': - return ; - case 'financial': - if (show_eu_related_content) { - return ; - } - return ; - default: - return ; - } + } else if (is_pre_appstore) { + switch (type) { + case 'synthetic': + return ; + case 'financial': + if (show_eu_related_content) { + return ; + } + return ; + default: + return ; + } + } else + switch (type) { + case 'synthetic': + return ; + case 'financial': + if (show_eu_related_content) { + return ; + } + return ; + default: + return ; + } }); IconType.displayName = 'IconType'; @@ -615,6 +627,7 @@ const CFDPasswordModal = ({ getAccountStatus, history, is_logged_in, + is_pre_appstore, context, is_cfd_password_modal_enabled, is_cfd_success_dialog_enabled, @@ -924,6 +937,7 @@ const CFDPasswordModal = ({ message={getSubmitText()} icon={ { const { poi_not_submitted_for_vanuatu_maltainvest, - poi_or_poa_not_submitted, + poi_and_poa_not_submitted, poi_resubmit_for_vanuatu_maltainvest, poi_resubmit_for_bvi_labuan, need_poa_resubmission, need_poi_for_bvi_labuan, poa_pending, + poi_acknowledged_for_vanuatu_maltainvest, + poi_acknowledged_for_bvi_labuan, + poa_not_submitted, } = getAuthenticationStatusInfo(account_status); const getAccountTitle = () => { @@ -94,7 +98,7 @@ const VerificationStatusBanner = ({ ); - } else if (poi_or_poa_not_submitted) { + } else if (poi_and_poa_not_submitted) { // if poi or poa is not submitted return (
@@ -103,7 +107,18 @@ const VerificationStatusBanner = ({
); - } else if (is_bvi && should_restrict_bvi_account_creation) { + } else if (is_vanuatu && poi_not_submitted_for_vanuatu_maltainvest) { + return ( +
+ + + +
+ ); + } else if ( + (is_bvi && should_restrict_bvi_account_creation) || + (is_vanuatu && should_restrict_vanuatu_account_creation) + ) { if (poa_pending) { return (
@@ -120,11 +135,14 @@ const VerificationStatusBanner = ({
); - } else if (is_vanuatu && poi_not_submitted_for_vanuatu_maltainvest) { + } else if ( + ((is_bvi || is_labuan) && poi_acknowledged_for_vanuatu_maltainvest && poa_not_submitted) || + ((is_vanuatu || is_maltainvest) && poi_acknowledged_for_bvi_labuan && poa_not_submitted) + ) { return ( -
- - +
+ +
); @@ -174,6 +192,7 @@ export default connect(({ modules: { cfd }, client }: RootStore) => ({ account_status: client.account_status, is_virtual: client.is_virtual, should_restrict_bvi_account_creation: client.should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation: client.should_restrict_vanuatu_account_creation, real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data, real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data, }))(JurisdictionCardBanner); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 65ba04dec3bc..1eff06d9c8cd 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -25,8 +25,6 @@ const JurisdictionCard = ({ is_synthetic ? number_of_synthetic_accounts_to_be_shown : number_of_financial_accounts_to_be_shown ); - const one_or_two_cards = [1, 2].includes(number_of_cards); - const card_values = jurisdiction_contents[type_of_card as keyof typeof jurisdiction_contents]; const card_data = is_synthetic ? card_values.synthetic_contents : card_values.financial_contents; @@ -46,7 +44,7 @@ const JurisdictionCard = ({ [`${card_classname}--selected`]: jurisdiction_selected_shortcode === type_of_card, })} onClick={disabled ? () => undefined : () => cardSelection(type_of_card)} - style={one_or_two_cards ? { width: '32em' } : { width: '27.6em' }} + style={[1, 2, 3].includes(number_of_cards) ? { width: '32em' } : { width: '27.6em' }} > {card_values.is_over_header_available && (
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx index 4d72bcd89e8b..6b453405b1e1 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx @@ -11,12 +11,14 @@ const JurisdictionCheckBox = ({ onCheck, context, should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation, }: TJurisdictionCheckBoxProps) => { const shouldShowCheckBox = () => { if (jurisdiction_selected_shortcode) { if ( jurisdiction_selected_shortcode === 'svg' || - (jurisdiction_selected_shortcode === 'bvi' && should_restrict_bvi_account_creation) + (jurisdiction_selected_shortcode === 'bvi' && should_restrict_bvi_account_creation) || + (jurisdiction_selected_shortcode === 'vanuatu' && should_restrict_vanuatu_account_creation) ) { return false; } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx index 9036df6e895a..800cfc63a5e9 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -1,23 +1,17 @@ import React from 'react'; import { TJurisdictionModalContentProps } from '../props.types'; -import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionCard from './jurisdiction-card'; -import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; const JurisdictionModalContent = ({ - account_status, account_type, is_virtual, jurisdiction_selected_shortcode, setJurisdictionSelectedShortcode, synthetic_available_accounts, financial_available_accounts, - checked, context, - setChecked, real_synthetic_accounts_existing_data, real_financial_accounts_existing_data, - should_restrict_bvi_account_creation, }: TJurisdictionModalContentProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; @@ -55,22 +49,6 @@ const JurisdictionModalContent = ({ ) )}
- - setChecked(!checked)} - class_name={`${card_classname}__jurisdiction-checkbox`} - jurisdiction_selected_shortcode={jurisdiction_selected_shortcode} - should_restrict_bvi_account_creation={should_restrict_bvi_account_creation} - /> ); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-foot-note.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-foot-note.tsx index 6d263c02824a..a9f4ddec1090 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-foot-note.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-foot-note.tsx @@ -11,6 +11,7 @@ const FooterNote = ({ card_classname, jurisdiction_selected_shortcode, should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation, }: TJurisdictionModalFootNoteProps) => { const account_type_name = account_type === 'synthetic' ? 'Derived' : 'Financial'; @@ -23,41 +24,44 @@ const FooterNote = ({ values={{ account_type_name }} /> ); + } else if ( + (jurisdiction_selected_shortcode === 'bvi' && should_restrict_bvi_account_creation) || + (jurisdiction_selected_shortcode === 'vanuatu' && should_restrict_vanuatu_account_creation) + ) { + return poa_pending ? ( + ]} + /> + ) : ( + + ); } else if (jurisdiction_selected_shortcode === 'bvi') { - if (should_restrict_bvi_account_creation) { - return poa_pending ? ( - ]} - /> - ) : ( - - ); - } return ( ); - } else if (jurisdiction_selected_shortcode === 'vanuatu') + } else if (jurisdiction_selected_shortcode === 'vanuatu') { return ( ); - else if (jurisdiction_selected_shortcode === 'labuan') + } else if (jurisdiction_selected_shortcode === 'labuan') { return ( ); - else if (jurisdiction_selected_shortcode === 'maltainvest') + } else if (jurisdiction_selected_shortcode === 'maltainvest') { return ( ); + } return null; }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index b65b578eeafe..60bf787fcf05 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -6,6 +6,8 @@ import RootStore from '../../Stores/index'; import JurisdictionModalContent from './jurisdiction-modal-content'; import { getAuthenticationStatusInfo, isMobile } from '@deriv/shared'; import { TJurisdictionModalProps } from '../props.types'; +import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; +import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; const JurisdictionModal = ({ account_status, @@ -23,6 +25,7 @@ const JurisdictionModal = ({ toggleJurisdictionModal, setJurisdictionSelectedShortcode, should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation, show_eu_related_content, toggleCFDVerificationModal, updateMT5Status, @@ -36,14 +39,18 @@ const JurisdictionModal = ({ poi_acknowledged_for_bvi_labuan, poi_acknowledged_for_vanuatu_maltainvest, poa_acknowledged, + need_poa_resubmission, } = getAuthenticationStatusInfo(account_status); React.useEffect(() => { - if (is_jurisdiction_modal_visible && !is_virtual) { - updateMT5Status(); + if (is_jurisdiction_modal_visible) { + if (!is_virtual) { + updateMT5Status(); + fetchAccountSettings(); + } setJurisdictionSelectedShortcode(''); - fetchAccountSettings(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [is_jurisdiction_modal_visible]); @@ -71,7 +78,7 @@ const JurisdictionModal = ({ const modal_title = show_eu_related_content ? localize('Jurisdiction for your Deriv MT5 CFDs account') - : localize('Choose a jurisdiction for your Deriv MT5 {{account_type}} account', { + : localize('Choose a jurisdiction for your MT5 {{account_type}} account', { account_type: account_type.type === 'synthetic' ? 'Derived' : 'Financial', }); @@ -93,7 +100,11 @@ const JurisdictionModal = ({ ); if (!is_account_created) { - if (is_svg_selected) { + if ( + is_svg_selected || + (is_bvi_selected && should_restrict_bvi_account_creation && need_poa_resubmission) || + (is_vanuatu_selected && should_restrict_vanuatu_account_creation && need_poa_resubmission) + ) { return false; } return !checked; @@ -115,6 +126,7 @@ const JurisdictionModal = ({ if ( poi_acknowledged_for_vanuatu_maltainvest && !poi_or_poa_not_submitted && + !should_restrict_vanuatu_account_creation && poa_acknowledged && has_submitted_cfd_personal_details ) { @@ -148,37 +160,52 @@ const JurisdictionModal = ({ } } }; - const ModalContent = () => ( - - - +
+ + setChecked(!checked)} + class_name={`cfd-jurisdiction-card--${account_type.type}__jurisdiction-checkbox`} + jurisdiction_selected_shortcode={jurisdiction_selected_shortcode} + should_restrict_bvi_account_creation={should_restrict_bvi_account_creation} + should_restrict_vanuatu_account_creation={should_restrict_vanuatu_account_creation} + /> + + + +
); @@ -232,6 +259,7 @@ export default connect(({ modules: { cfd }, ui, client, traders_hub }: RootStore setAccountSettings: client.setAccountSettings, setJurisdictionSelectedShortcode: cfd.setJurisdictionSelectedShortcode, should_restrict_bvi_account_creation: client.should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation: client.should_restrict_vanuatu_account_creation, show_eu_related_content: traders_hub.show_eu_related_content, trading_platform_available_accounts: client.trading_platform_available_accounts, toggleCFDVerificationModal: cfd.toggleCFDVerificationModal, diff --git a/packages/cfd/src/Containers/mt5-compare-table-content.tsx b/packages/cfd/src/Containers/mt5-compare-table-content.tsx index d55eefd734de..cb16044e9135 100644 --- a/packages/cfd/src/Containers/mt5-compare-table-content.tsx +++ b/packages/cfd/src/Containers/mt5-compare-table-content.tsx @@ -156,6 +156,7 @@ const DMT5CompareModalContent = ({ setJurisdictionSelectedShortcode, setShouldShowCooldownModal, should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation, should_show_derivx, show_eu_related_content, toggleCFDVerificationModal, @@ -308,12 +309,14 @@ const DMT5CompareModalContent = ({ toggleCFDVerificationModal(); } break; + case 'synthetic_vanuatu': case 'financial_vanuatu': setAppstorePlatform(CFD_PLATFORMS.MT5); setJurisdictionSelectedShortcode('vanuatu'); if ( poi_acknowledged_for_vanuatu_maltainvest && !poi_or_poa_not_submitted && + !should_restrict_vanuatu_account_creation && has_submitted_personal_details && poa_acknowledged ) { @@ -420,7 +423,10 @@ const DMT5CompareModalContent = ({ return false; } else if (type === 'bvi' && should_restrict_bvi_account_creation && poa_pending) { return true; + } else if (type === 'vanuatu' && should_restrict_vanuatu_account_creation && poa_pending) { + return true; } + return false; }; @@ -554,6 +560,7 @@ export default connect(({ modules, client, common, ui, traders_hub }: RootStore) setAccountType: modules.cfd.setAccountType, setJurisdictionSelectedShortcode: modules.cfd.setJurisdictionSelectedShortcode, should_restrict_bvi_account_creation: client.should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation: client.should_restrict_vanuatu_account_creation, toggleCFDVerificationModal: modules.cfd.toggleCFDVerificationModal, trading_platform_available_accounts: client.trading_platform_available_accounts, updateMT5Status: client.updateMT5Status, diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 629bc48be45c..b7590669aaf6 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -185,6 +185,7 @@ export type TVerificationStatusBannerProps = { real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; should_restrict_bvi_account_creation: boolean; + should_restrict_vanuatu_account_creation: boolean; }; export type TJurisdictionCheckBoxProps = { @@ -194,6 +195,7 @@ export type TJurisdictionCheckBoxProps = { jurisdiction_selected_shortcode: string; onCheck: () => void; should_restrict_bvi_account_creation: boolean; + should_restrict_vanuatu_account_creation: boolean; }; type TOpenAccountTransferMeta = { category: string; @@ -215,6 +217,7 @@ export type TJurisdictionModalProps = { openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; setJurisdictionSelectedShortcode: (shortcode: string) => void; should_restrict_bvi_account_creation: boolean; + should_restrict_vanuatu_account_creation: boolean; show_eu_related_content: boolean; trading_platform_available_accounts: TTradingPlatformAvailableAccount[]; fetchAccountSettings: () => void; @@ -227,18 +230,14 @@ export type TJurisdictionModalProps = { }; export type TJurisdictionModalContentProps = { - account_status: GetAccountStatus; context: RootStore; account_type: string; jurisdiction_selected_shortcode: string; setJurisdictionSelectedShortcode: (card_type: string) => void; synthetic_available_accounts: TTradingPlatformAvailableAccount[]; financial_available_accounts: TTradingPlatformAvailableAccount[]; - checked: boolean; - setChecked: React.Dispatch>; real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; - should_restrict_bvi_account_creation: boolean; is_virtual: boolean; }; @@ -249,6 +248,7 @@ export type TJurisdictionModalFootNoteProps = { context: RootStore; jurisdiction_selected_shortcode: string; should_restrict_bvi_account_creation: boolean; + should_restrict_vanuatu_account_creation: boolean; }; export type TCompareAccountRowItem = { @@ -304,6 +304,7 @@ export type TDMT5CompareModalContentProps = { setJurisdictionSelectedShortcode: (shortcode: string) => void; setShouldShowCooldownModal: (value: boolean) => void; should_restrict_bvi_account_creation: boolean; + should_restrict_vanuatu_account_creation: boolean; should_show_derivx: boolean; show_eu_related_content: boolean; toggleCFDPersonalDetailsModal: (is_from_mt5_compare_accounts?: boolean) => void; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index db79c86133b9..937250771fd5 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -366,6 +366,7 @@ line-height: 1.5; } } + &__footnote { &-title { padding-bottom: 0.8rem; @@ -493,7 +494,7 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 38rem; + min-height: 36rem; width: 27.6em; position: relative; padding: 1.6rem; @@ -523,6 +524,8 @@ @include mobile { flex-direction: column; align-items: center; + overflow-y: scroll; + height: 60%; } } &--selected { @@ -573,6 +576,24 @@ &__h2-header { margin: 1.4rem 0 2.4rem; } + &__footer-wrapper { + @include mobile { + background-color: var(--general-main-1); + width: 100%; + height: 100%; + position: sticky; + bottom: 0; + max-height: 20rem; + z-index: 12; + } + .dc-modal-footer { + @include desktop { + position: fixed; + bottom: 0; + width: 100%; + } + } + } &__footnote { display: flex; flex-direction: column; @@ -593,6 +614,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; + margin-bottom: 2.4rem; @include mobile { padding: 0.8rem; } @@ -2146,9 +2168,9 @@ } } &__table-header { - grid-template-columns: 0.9fr 1.39fr 2.74fr; + grid-template-columns: 11rem 38rem 46rem; &__pre-appstore { - grid-template-columns: 0.9fr 1.39fr 2.74fr 0.9fr; + grid-template-columns: 11rem 36rem 46rem 13.5rem; } } @for $financial_accounts_count from 0 through 6 { @@ -2185,20 +2207,25 @@ } &__table-row { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr; + grid-template-columns: 11rem 13.4rem 12.6rem 12rem 13.4rem 12.6rem 10rem 10rem; &__pre-appstore { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr 0.9fr; + grid-template-columns: 11rem 13.4rem 12.6rem 10rem 13.4rem 12.6rem 10rem 10rem 13.5rem; } &--leverage { - grid-template-columns: 0.9fr 0.72fr 0.67fr 2.04fr 0.7fr; + grid-template-columns: 11rem 38rem 36rem 10rem; + &__pre-appstore { + grid-template-columns: 11rem 36rem 36rem 10rem 13.5rem; + } + } + &--platform { &__pre-appstore { - grid-template-columns: 0.9fr 0.72fr 0.67fr 2.04fr 0.7fr 0.9fr; + grid-template-columns: 11rem 82rem 13.5rem; } } &--instruments { - grid-template-columns: 0.9fr 1.39fr 1.39fr 0.65fr 0.7fr; + grid-template-columns: 11rem 38rem 26rem 10rem 10rem; &__pre-appstore { - grid-template-columns: 0.9fr 1.39fr 1.39fr 0.65fr 0.7fr 0.9fr; + grid-template-columns: 11rem 36rem 26rem 10rem 10rem 13.5rem; } } } @@ -2211,14 +2238,13 @@ } } &__table-footer { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr; - height: 5.8rem; + grid-template-columns: 11rem 13.4rem 12.6rem 12rem 13.4rem 12.6rem 10rem 10rem; + height: 4.8rem; &__pre-appstore { - grid-template-columns: 0.9fr 0.72fr 0.67fr 0.72fr 0.67fr 0.65fr 0.7fr 0.9fr; - height: 5.8rem; + grid-template-columns: 11rem 13.4rem 12.6rem 10rem 13.4rem 12.6rem 10rem 10rem 13.5rem; } &__item { - height: 5.8rem; + height: 4.8rem; justify-content: center; &--verification-pending { display: flex; diff --git a/packages/core/src/Constants/cfd-text.js b/packages/core/src/Constants/cfd-text.js index ba455f536b8a..361ae8c8d724 100644 --- a/packages/core/src/Constants/cfd-text.js +++ b/packages/core/src/Constants/cfd-text.js @@ -8,6 +8,7 @@ export const CFD_TEXT = { synthetic: () => localize('Derived'), synthetic_bvi: () => localize('Derived BVI'), synthetic_svg: () => localize('Derived SVG'), + synthetic_v: () => localize('Derived Vanuatu'), financial: () => localize('Financial'), financial_bvi: () => localize('Financial BVI'), financial_fx: () => localize('Financial Labuan'), diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index efbfa7e5d8bf..512ff593b38c 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -280,6 +280,7 @@ export default class ClientStore extends BaseStore { has_restricted_mt5_account: computed, has_mt5_account_with_rejected_poa: computed, should_restrict_bvi_account_creation: computed, + should_restrict_vanuatu_account_creation: computed, is_virtual: computed, is_eu: computed, is_uk: computed, @@ -840,6 +841,12 @@ export default class ClientStore extends BaseStore { ).length; } + get should_restrict_vanuatu_account_creation() { + return !!this.mt5_login_list.filter( + item => item?.landing_company_short === 'vanuatu' && item?.status === 'poa_failed' + ).length; + } + get is_virtual() { return !isEmptyObject(this.accounts) && this.accounts[this.loginid] && !!this.accounts[this.loginid].is_virtual; } diff --git a/packages/shared/src/utils/cfd/cfd.ts b/packages/shared/src/utils/cfd/cfd.ts index 5e11f1b60bca..dbfcc6cd177e 100644 --- a/packages/shared/src/utils/cfd/cfd.ts +++ b/packages/shared/src/utils/cfd/cfd.ts @@ -13,6 +13,7 @@ const CFD_text: { [key: string]: string } = { synthetic: 'Derived', synthetic_bvi: 'Derived BVI', synthetic_svg: 'Derived SVG', + synthetic_v: 'Derived Vanuatu', financial: 'Financial', financial_bvi: 'Financial BVI', financial_fx: 'Financial Labuan', @@ -49,6 +50,8 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor return 'synthetic_svg'; case 'bvi': return 'synthetic_bvi'; + case 'vanuatu': + return 'synthetic_v'; default: return 'synthetic'; } @@ -236,6 +239,7 @@ export const getAuthenticationStatusInfo = (account_status: GetAccountStatus) => const poi_not_submitted = poi_status === 'none'; const poi_or_poa_not_submitted = poa_not_submitted || poi_not_submitted; + const poi_and_poa_not_submitted = poa_not_submitted && poi_not_submitted; //vanuatu-maltainvest @@ -304,6 +308,7 @@ export const getAuthenticationStatusInfo = (account_status: GetAccountStatus) => poa_verified, poi_or_poa_not_submitted, need_poa_resubmission, + poi_and_poa_not_submitted, poa_not_submitted, poi_not_submitted, need_poi_for_vanuatu_maltainvest,