From 78803cee0e92d6a8c1662d5a6c48896bab9fc692 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 20 Mar 2023 20:22:33 +0400 Subject: [PATCH 001/151] feat: :sparkles: introduces new MT5 jurisdiction card layout --- .../components/cfds-listing/cfds-listing.scss | 154 ++++++-- packages/cfd/src/Components/props.types.ts | 13 + .../src/Constants/jurisdiction-contents.ts | 365 +++++++++++++++--- .../jurisdiction-card-banner.tsx | 198 ---------- .../jurisdiction-card-section.tsx | 49 +++ .../jurisdiction-modal/jurisdiction-card.tsx | 76 +--- .../jurisdiction-modal-foot-note.tsx | 4 +- .../jurisdiction-modal/jurisdiction-modal.tsx | 4 +- packages/cfd/src/Containers/props.types.ts | 6 +- packages/cfd/src/sass/cfd-dashboard.scss | 147 +++++-- packages/cfd/src/sass/cfd.scss | 1 - 11 files changed, 633 insertions(+), 384 deletions(-) delete mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-banner.tsx create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 1e5c630a5344..73f6e8ee7244 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -1,19 +1,20 @@ .cfd-jurisdiction-card--synthetic, .cfd-jurisdiction-card--financial { - border: solid 1px var(--border-normal); - border-radius: 0.8rem; + border: solid 2px var(--border-normal); + border-radius: 1.6rem; display: flex; justify-content: space-between; flex-direction: column; - min-height: 36rem; - width: 27.6em; + min-height: 38rem; + width: 26em; position: relative; - padding: 1.6rem; + cursor: pointer; @include mobile { - margin-bottom: 2rem; + min-height: auto; + width: 100%; } - &:hover { + &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); } @@ -23,23 +24,27 @@ @include desktop { height: auto; - margin: 0 0.8rem; } &__wrapper { - padding: 0; - margin-top: 4.8rem; + margin-top: 4em; + margin-left: 6em; + margin-right: 6em; display: flex; justify-content: center; - + gap: 22px; @include mobile { + margin: 0em; + padding: 2em 4em; flex-direction: column; align-items: center; + overflow-y: scroll; + height: 60%; } } &--selected { - border: solid 1px $color-blue; - border-radius: 4px; + border: solid 2px $color-green; + box-shadow: 0px 12px 18px 8px var(--shadow-menu); } &__verification-status, @@ -81,8 +86,59 @@ border-radius: 0.5rem; } } + + &__card-content-over-header { + display: flex; + background: #dfeaff; + color: var(--text-info-blue); + height: 4em; + width: 100%; + justify-content: center; + font-weight: bold; + align-items: center; + border-radius: 1.6em 1.6em 0em 0em; + } + + &__card-content-over-header-blank { + height: 4em; + width: 100%; + border-radius: 1.6em; + @include mobile { + height: 2em; + } + } + + &__h2-header { + text-align: center; + min-height: 4em; + margin: 0em 2em; + @include mobile { + margin-bottom: 1em; + min-height: auto; + } + } + + &__card-content-container { + display: flex; + flex-direction: column; + height: 100%; + } + + &__card-section-container { + display: flex; + flex-direction: column; + gap: 12px; + height: 100%; + margin: 0em 2em 2em; + } + &__footer-wrapper { + min-height: 186px; + display: flex; + flex-direction: column; + justify-content: space-between; @include mobile { + min-height: 0px; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -91,17 +147,8 @@ 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; } + &__footnote { display: flex; flex-direction: column; @@ -122,6 +169,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; + margin-bottom: 2em; @include mobile { padding: 0.8rem; } @@ -129,33 +177,68 @@ &__over-header { background-color: #dfeaff; - top: -1rem; + top: -2rem; left: 1.4rem; z-index: 10; width: 90%; height: 4rem; position: absolute; - border-radius: 4px; + border-radius: 8px; margin-bottom: 1rem; - + border: 1px solid var(--text-info-blue); & > p { font-size: 16px; text-align: center; } } +} - &__bullet-wrapper { - display: flex; - margin-bottom: 1rem; +.cfd-card-section { + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; +} - &--checkmark { - margin-right: 1rem; - } +.cfd-card-section-divider { + width: 100%; + border-bottom: 2px solid var(--general-section-1); +} + +.cfd-card-section-title-indicator { + display: flex; + padding: 6px 12px; + color: var(--text-prominent); + border-radius: 4px; + font-weight: bold; + &__red-darker { + background: #661b20; + } + &__red-dark { + background: #b33037; + } + &__red-light { + background: #ff444f; + } + &__yellow-dark { + background: #b3760d; + } + &__yellow-light { + background: #ffa912; + } + &__violet-dark { + background: #4a3871; + } + &__brown-dark { + background: #664407; } } -.cfd-jurisdiction-card--synthetic { - padding: 2.4rem; +.cfd-card-title-container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; } .cfd-modal--custom-exit { @@ -1791,9 +1874,8 @@ } .dc-modal__container_jurisdiction-modal { - min-height: 664px; .dc-modal-header { - border-bottom: 1px solid var(--general-section-1); + border-bottom: 2px solid var(--general-section-1); } } diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 3dae634df84c..ecf89ecbcd3d 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -68,6 +68,19 @@ export type TTradingPlatformAvailableAccount = { sub_account_type: string; }; +export type TJurisdictionCardSectionTitleIndicators = { + type: 'displayText' | 'displayIcons'; + displayText?: string; + displayTextSkinColor?: string; + displayIcons?: Array; +}; + +export type TJurisdictionCardSection = { + title: string; + description?: string; + titleIndicators?: TJurisdictionCardSectionTitleIndicators; +}; + export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[]; export type TCFDAccountCard = { diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 7c8cd66e7453..66f8722650b6 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -1,10 +1,11 @@ import { localize } from '@deriv/translations'; +import { TJurisdictionCardSection } from 'Components/props.types'; type TJurisdictionCardItems = { header: string; over_header?: string; - synthetic_contents: Array; - financial_contents: Array; + synthetic_contents: Array; + financial_contents: Array; is_over_header_available: boolean; }; type TJurisdictionContent = { @@ -20,32 +21,206 @@ export const jurisdiction_contents: TJurisdictionContent = { is_over_header_available: false, header: localize('St. Vincent & Grenadines'), synthetic_contents: [ - `${localize('Selecting this will onboard you through Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, - `${localize('30+ assets: synthetics, basket indices and derived FX')}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('40+')}`, + displayTextSkinColor: 'red-darker', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize( + 'You will need to submit proof of identity and address once you reach certain thresholds.' + )}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, + }, ], financial_contents: [ - `${localize('Selecting this will onboard you through Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize( - '165+ assets: forex (standard/micro), stocks, stock indices, commodities, and cryptocurrencies' - )}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('170+')}`, + displayTextSkinColor: 'red-light', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.6 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize( + 'You will need to submit proof of identity and address once you reach certain thresholds.' + )}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, + }, + ], + }, + bvi: { + is_over_header_available: false, + header: localize('British Virgin Islands'), + synthetic_contents: [ + { + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('40+')}`, + displayTextSkinColor: 'red-darker', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize( + 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' + )}`, + }, + ], + financial_contents: [ + { + title: `${localize('Assets')}`, + description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('170+')}`, + displayTextSkinColor: 'red-light', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.5 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize( + 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' + )}`, + }, ], }, vanuatu: { is_over_header_available: false, header: localize('Vanuatu'), synthetic_contents: [ - `${localize('Regulated by the Vanuatu Financial Services Commission')}`, - `${localize('30+ assets: synthetics, basket indices and derived FX')}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('40+')}`, + displayTextSkinColor: 'red-darker', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Vanuatu Financial Services Commission')}`, + }, ], financial_contents: [ - `${localize('Regulated by the Vanuatu Financial Services Commission')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize('90+ assets: forex, stock indices, commodities and cryptocurrencies')}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize('Forex, Stock indices, Commodities and Cryptocurrencies')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('90+')}`, + displayTextSkinColor: 'red-dark', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:1000')}`, + displayTextSkinColor: 'yellow-light', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.5 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Vanuatu Financial Services Commission')}`, + }, ], }, labuan: { @@ -53,54 +228,132 @@ export const jurisdiction_contents: TJurisdictionContent = { is_over_header_available: true, header: localize('Labuan'), synthetic_contents: [ - `${localize('Regulated by the Labuan Financial Services Authority (Licence no. MB/18/0024)')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize('80+ assets: forex and cryptocurrencies')}`, - `${localize('Leverage up to 1:100')}`, + { title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}` }, + { title: `${localize('Leverage')}` }, + { + title: `${localize('Spreads from')}`, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, + }, ], financial_contents: [ - `${localize('Regulated by the Labuan Financial Services Authority (Licence no. MB/18/0024)')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize('80+ assets: forex and cryptocurrencies')}`, - `${localize('Leverage up to 1:100')}`, - `${localize('Straight-through processing')}`, + { + title: `${localize('Assets')}`, + description: `${localize('Forex and Cryptocurrencies')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('90+')}`, + displayTextSkinColor: 'red-dark', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:100')}`, + displayTextSkinColor: 'yellow-dark', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.6 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, + }, ], }, maltainvest: { is_over_header_available: false, header: localize('Malta'), synthetic_contents: [ - `${localize('Regulated by the Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize('150+ assets: forex, stocks, stock indices, synthetics, commodities and cryptocurrencies')}`, - `${localize('Leverage up to 1:30')}`, - ], - financial_contents: [ - `${localize('Regulated by the Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, - `${localize('Registered with the Financial Commission')}`, - `${localize('150+ assets: forex, stocks, stock indices, synthetics, commodities and cryptocurrencies')}`, - `${localize('Leverage up to 1:30')}`, - ], - }, - bvi: { - is_over_header_available: false, - header: localize('British Virgin Islands'), - synthetic_contents: [ - `${localize( - 'Regulated by the British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' - )}`, - `${localize('30+ assets: synthetics, basket indices and derived FX')}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize( + 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' + )}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('140+')}`, + displayTextSkinColor: 'red-light', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:30')}`, + displayTextSkinColor: 'brown-dark', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.5 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, + }, ], financial_contents: [ - `${localize( - 'Regulated by the British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' - )}`, - `${localize('Registered with the Financial Commission')}`, - `${localize( - '165+ assets: forex (standard/micro), stocks, stock indices, commodities, and cryptocurrencies' - )}`, - `${localize('Leverage up to 1:1000')}`, + { + title: `${localize('Assets')}`, + description: `${localize( + 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' + )}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('140+')}`, + displayTextSkinColor: 'red-light', + }, + }, + { + title: `${localize('Leverage')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('1:30')}`, + displayTextSkinColor: 'brown-dark', + }, + }, + { + title: `${localize('Spreads from')}`, + titleIndicators: { + type: 'displayText', + displayText: `${localize('0.5 pips')}`, + displayTextSkinColor: 'violet-dark', + }, + }, + { + title: `${localize('Verifications')}`, + description: `${localize('Learn more about verifications needed.')}`, + }, + { + title: `${localize('Regulator/EDR')}`, + description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, + }, ], }, }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-banner.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-banner.tsx deleted file mode 100644 index 0ddd4b06fc90..000000000000 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-banner.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import React from 'react'; -import RootStore from '../../Stores/index'; -import { connect } from '../../Stores/connect'; -import { getAuthenticationStatusInfo } from '@deriv/shared'; -import { Text } from '@deriv/components'; -import { Localize } from '@deriv/translations'; -import { TVerificationStatusBannerProps } from '../props.types'; - -const VerificationStatusBanner = ({ - account_status, - account_type, - card_classname, - disabled, - context, - is_virtual, - type_of_card, - should_restrict_bvi_account_creation, - should_restrict_vanuatu_account_creation, - real_synthetic_accounts_existing_data, - real_financial_accounts_existing_data, -}: TVerificationStatusBannerProps) => { - const { - poi_not_submitted_for_vanuatu_maltainvest, - 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 = () => { - switch (account_type) { - case 'synthetic': - return 'Derived'; - case 'financial': - return 'Financial'; - default: - return ''; - } - }; - - const is_svg = type_of_card === 'svg'; - const is_vanuatu = type_of_card === 'vanuatu'; - const is_bvi = type_of_card === 'bvi'; - const is_labuan = type_of_card === 'labuan'; - const is_maltainvest = type_of_card === 'maltainvest'; - - const getTypeTitle = () => { - switch (type_of_card) { - case 'bvi': - return 'BVI'; - case 'vanuatu': - return 'Vanuatu'; - case 'labuan': - return 'STP'; - default: - return ''; - } - }; - - const isAccountCreated = () => - account_type === 'synthetic' - ? real_synthetic_accounts_existing_data?.some(account => account.landing_company_short === type_of_card) - : real_financial_accounts_existing_data?.some(account => account.landing_company_short === type_of_card); - - if (disabled && isAccountCreated()) { - // account added - return ( -
- - - -
- ); - } else if (is_virtual && !is_svg) { - return ( -
- - - -
- ); - } else if (is_svg) { - return ( -
- - - -
- ); - } else if (poi_and_poa_not_submitted) { - // if poi or poa is not submitted - return ( -
- - - -
- ); - } 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 ( -
- - - -
- ); - } - return ( -
- - - -
- ); - } 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 ( -
- - - -
- ); - } else if ( - ((is_bvi || is_labuan) && need_poi_for_bvi_labuan && need_poa_resubmission) || - ((is_vanuatu || is_maltainvest) && poi_resubmit_for_vanuatu_maltainvest && need_poa_resubmission) - ) { - return ( -
- - - -
- ); - } else if ( - ((is_bvi || is_labuan) && poi_resubmit_for_bvi_labuan) || - ((is_vanuatu || is_maltainvest) && poi_resubmit_for_vanuatu_maltainvest) - ) { - return ( -
- - - -
- ); - } else if (!is_svg && need_poa_resubmission) { - return ( -
- - - -
- ); - } - return null; -}; - -const JurisdictionCardBanner = (props: TVerificationStatusBannerProps) => { - return ( -
- -
- ); -}; - -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-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx new file mode 100644 index 000000000000..c286e5007562 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { Text } from '@deriv/components'; +import { Localize } from '@deriv/translations'; +import { TJurisdictionCardSectionProps } from '../props.types'; +import { TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; +import classNames from 'classnames'; + +const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionProps) => { + function renderTitleIndicator(titleIndicators: TJurisdictionCardSectionTitleIndicators) { + switch (titleIndicators.type) { + case 'displayText': + return ( +
+ {titleIndicators.displayText} +
+ ); + case 'displayIcons': + return null; + default: + return null; + } + } + + return ( +
+
+
+ + + +
+ {cardSectionItem.titleIndicators && renderTitleIndicator(cardSectionItem.titleIndicators)} +
+ + {cardSectionItem.description && ( + + + + )} +
+ ); +}; + +export default JurisdictionCardSection; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 1eff06d9c8cd..0198e016c07b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import { Text } from '@deriv/components'; +import { Localize } from '@deriv/translations'; import classNames from 'classnames'; -import { Icon, Text, Popover } from '@deriv/components'; -import { Localize, localize } from '@deriv/translations'; +import React from 'react'; import { jurisdiction_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; -import JurisdictionCardBanner from './jurisdiction-card-banner'; +import JurisdictionCardSection from './jurisdiction-card-section'; const JurisdictionCard = ({ account_type, @@ -17,78 +17,42 @@ const JurisdictionCard = ({ type_of_card, }: TJurisdictionCardProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; - const number_of_synthetic_accounts_to_be_shown = synthetic_available_accounts?.length; - const number_of_financial_accounts_to_be_shown = financial_available_accounts?.length; - const is_synthetic = account_type === 'synthetic'; - const [number_of_cards] = React.useState( - is_synthetic ? number_of_synthetic_accounts_to_be_shown : number_of_financial_accounts_to_be_shown - ); - 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; const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; - const Checkmark = () => ( - - ); - return (
undefined : () => cardSelection(type_of_card)} - style={[1, 2, 3].includes(number_of_cards) ? { width: '32em' } : { width: '27.6em' }} > - {card_values.is_over_header_available && ( -
- +
+ {card_values.is_over_header_available ? ( +
- -
- )} -
+
+ ) : ( +
+ )} - {card_data.map((item, index) => ( -
-
- -
- - - - {/Straight-through processing/.test(item) && ( - - )} -
- ))} +
+ {card_data.map((item, index) => ( + <> + + {index < card_data.length - 1 ?
: null} + + ))} +
-
); 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 a9f4ddec1090..c19efa352f9e 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 @@ -67,7 +67,7 @@ const FooterNote = ({ }; const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { - return ( + return props.jurisdiction_selected_shortcode ? (
{
+ ) : ( + <> ); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 60bf787fcf05..057949387c0b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -77,8 +77,8 @@ const JurisdictionModal = ({ ); const modal_title = show_eu_related_content - ? localize('Jurisdiction for your Deriv MT5 CFDs account') - : localize('Choose a jurisdiction for your MT5 {{account_type}} account', { + ? localize('Choose a jurisdiction for your Deriv MT5 CFDs account') + : localize('Choose a jurisdiction for your Deriv MT5 {{account_type}} account', { account_type: account_type.type === 'synthetic' ? 'Derived' : 'Financial', }); diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index b7590669aaf6..58cda90d219c 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -9,7 +9,7 @@ import { } from '@deriv/api-types'; import { FormikHelpers as FormikActions } from 'formik'; import { TCFDPasswordFormValues } from './cfd-password-modal'; -import { TTradingPlatformAvailableAccount, TExistingData } from '../Components/props.types'; +import { TTradingPlatformAvailableAccount, TExistingData, TJurisdictionCardSection } from '../Components/props.types'; import RootStore from '../Stores/index'; export type TCFDPersonalDetailsContainerProps = { @@ -174,6 +174,10 @@ export type TJurisdictionCardProps = { disabled: boolean; }; +export type TJurisdictionCardSectionProps = { + cardSectionItem: TJurisdictionCardSection; +}; + export type TVerificationStatusBannerProps = { account_status: GetAccountStatus; account_type: string; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 937250771fd5..78e1304ea09d 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -489,20 +489,21 @@ .cfd-jurisdiction-card--synthetic, .cfd-jurisdiction-card--financial { - border: solid 1px var(--border-normal); - border-radius: 0.8rem; + border: solid 2px var(--border-normal); + border-radius: 1.6rem; display: flex; justify-content: space-between; flex-direction: column; - min-height: 36rem; - width: 27.6em; + min-height: 38rem; + width: 26em; position: relative; - padding: 1.6rem; + cursor: pointer; @include mobile { - margin-bottom: 2rem; + min-height: auto; + width: 100%; } - &:hover { + &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); } @@ -512,25 +513,28 @@ @include desktop { height: auto; - margin: 0 0.8rem; } &__wrapper { - padding: 0; - margin-top: 4.8rem; + margin-top: 4em; + margin-left: 6em; + margin-right: 6em; display: flex; justify-content: center; - + gap: 22px; @include mobile { + margin: 0em; + padding: 2em 4em; flex-direction: column; align-items: center; overflow-y: scroll; height: 60%; } } + &--selected { - border: solid 1px #377cfc; - border-radius: 4px; + border: solid 2px $color-green; + box-shadow: 0px 12px 18px 8px var(--shadow-menu); } &__verification-status, @@ -573,11 +577,59 @@ border-radius: 0.5rem; } } + + &__card-content-over-header { + display: flex; + background: #dfeaff; + color: var(--text-info-blue); + height: 4em; + width: 100%; + justify-content: center; + font-weight: bold; + align-items: center; + border-radius: 1.6em 1.6em 0em 0em; + } + + &__card-content-over-header-blank { + height: 4em; + width: 100%; + border-radius: 1.6em; + @include mobile { + height: 2em; + } + } + &__h2-header { - margin: 1.4rem 0 2.4rem; + text-align: center; + min-height: 4em; + margin: 0em 2em; + @include mobile { + margin-bottom: 1em; + min-height: auto; + } + } + + &__card-content-container { + display: flex; + flex-direction: column; + height: 100%; } + + &__card-section-container { + display: flex; + flex-direction: column; + gap: 12px; + height: 100%; + margin: 0em 2em 2em 2em; + } + &__footer-wrapper { + min-height: 186px; + display: flex; + flex-direction: column; + justify-content: space-between; @include mobile { + min-height: 0px; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -586,14 +638,8 @@ max-height: 20rem; z-index: 12; } - .dc-modal-footer { - @include desktop { - position: fixed; - bottom: 0; - width: 100%; - } - } } + &__footnote { display: flex; flex-direction: column; @@ -614,7 +660,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - margin-bottom: 2.4rem; + margin-bottom: 2em; @include mobile { padding: 0.8rem; } @@ -622,33 +668,68 @@ &__over-header { background-color: #dfeaff; - top: -1rem; + top: -2rem; left: 1.4rem; z-index: 10; width: 90%; height: 4rem; position: absolute; - border-radius: 4px; + border-radius: 8px; margin-bottom: 1rem; - + border: 1px solid var(--text-info-blue); & > p { font-size: 16px; text-align: center; } } +} - &__bullet-wrapper { - display: flex; - margin-bottom: 1rem; +.cfd-card-section { + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; +} - &--checkmark { - margin-right: 1rem; - } +.cfd-card-section-divider { + width: 100%; + border-bottom: 2px solid var(--general-section-1); +} + +.cfd-card-section-title-indicator { + display: flex; + padding: 6px 12px; + color: white; + border-radius: 4px; + font-weight: bold; + &__red-darker { + background: #661b20; + } + &__red-dark { + background: #b33037; + } + &__red-light { + background: #ff444f; + } + &__yellow-dark { + background: #b3760d; + } + &__yellow-light { + background: #ffa912; + } + &__violet-dark { + background: #4a3871; + } + &__brown-dark { + background: #664407; } } -.cfd-jurisdiction-card--synthetic { - padding: 2.4rem; +.cfd-card-title-container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; } .cfd-modal--custom-exit { diff --git a/packages/cfd/src/sass/cfd.scss b/packages/cfd/src/sass/cfd.scss index ad444dec1b38..08c4e8b92ba0 100644 --- a/packages/cfd/src/sass/cfd.scss +++ b/packages/cfd/src/sass/cfd.scss @@ -400,7 +400,6 @@ } .dc-modal__container_jurisdiction-modal { - min-height: 664px; .dc-modal-header { border-bottom: 2px solid var(--general-section-1); } From ea29f9606ceb361dd5bf4808ae70706ddd8aac62 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 15 Mar 2023 16:05:29 +0800 Subject: [PATCH 002/151] chore: move hard coded part and make it more dynamic --- .../poi-poa-docs-submitted.jsx | 5 +++-- .../proof-of-identity-submission-for-mt5.jsx | 4 ++-- .../cfd/src/Containers/cfd-dbvi-onboarding.tsx | 6 +++--- .../cfd-financial-stp-real-account-signup.tsx | 9 ++++++--- .../cfd/src/Containers/cfd-password-modal.tsx | 17 +++++++++-------- .../jurisdiction-modal-checkbox.tsx | 8 ++++---- .../jurisdiction-modal-foot-note.tsx | 14 +++++++------- .../jurisdiction-modal/jurisdiction-modal.tsx | 12 ++++++------ .../cfd/src/Stores/Modules/CFD/cfd-store.js | 4 ++-- .../shared/src/utils/constants/jurisdiction.ts | 7 +++++++ 10 files changed, 49 insertions(+), 37 deletions(-) create mode 100644 packages/shared/src/utils/constants/jurisdiction.ts diff --git a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx index 5989c2f3230d..4744967cbe0c 100644 --- a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx +++ b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Button, Icon, Loading } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { getAuthenticationStatusInfo } from '@deriv/shared'; +import { getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared'; import IconMessageContent from 'Components/icon-message-content'; const PoiPoaDocsSubmitted = ({ @@ -34,7 +34,8 @@ const PoiPoaDocsSubmitted = ({ const { manual_status, poi_verified_for_vanuatu_maltainvest, poi_verified_for_bvi_labuan, poa_pending } = getAuthenticationStatusInfo(account_status); const is_vanuatu_or_maltainvest_selected = - jurisdiction_selected_shortcode === 'vanuatu' || jurisdiction_selected_shortcode === 'maltainvest'; + jurisdiction_selected_shortcode === Jurisdiction.VANUATU || + jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST; if ( (is_vanuatu_or_maltainvest_selected && poi_verified_for_vanuatu_maltainvest && poa_pending) || (!is_vanuatu_or_maltainvest_selected && poi_verified_for_bvi_labuan && poa_pending) || diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx index bbd331f78617..31a74bc9996b 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React from 'react'; -import { WS } from '@deriv/shared'; +import { WS, Jurisdiction } from '@deriv/shared'; import Unsupported from 'Components/poi/status/unsupported'; import OnfidoUpload from './onfido-sdk-view.jsx'; import { identity_status_codes, submission_status_code, service_code } from './proof-of-identity-utils'; @@ -30,7 +30,7 @@ const POISubmissionForMT5 = ({ is_idv_supported && Number(idv_submissions_left) > 0 && !is_idv_disallowed && - jurisdiction_selected_shortcode !== 'vanuatu' + jurisdiction_selected_shortcode !== Jurisdiction.VANUATU ) { setSubmissionService(service_code.idv); } else if (onfido_submissions_left && is_onfido_supported) { diff --git a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx b/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx index 6631c4ff3c9b..5e77900cb668 100644 --- a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx +++ b/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx @@ -14,7 +14,7 @@ import { localize } from '@deriv/translations'; import RootStore from '../Stores/index'; import { PoiPoaDocsSubmitted } from '@deriv/account'; import { connect } from '../Stores/connect'; -import { getAuthenticationStatusInfo, isMobile, WS } from '@deriv/shared'; +import { getAuthenticationStatusInfo, isMobile, WS, Jurisdiction } from '@deriv/shared'; import { AccountStatusResponse } from '@deriv/api-types'; import { TCFDDbviOnboardingProps } from './props.types'; import CFDFinancialStpRealAccountSignup from './cfd-financial-stp-real-account-signup'; @@ -63,13 +63,13 @@ const CFDDbviOnboarding = ({ if (get_account_status?.authentication) { const { poi_acknowledged_for_vanuatu_maltainvest, poi_acknowledged_for_bvi_labuan, poa_acknowledged } = getAuthenticationStatusInfo(get_account_status); - if (jurisdiction_selected_shortcode === 'vanuatu') { + if (jurisdiction_selected_shortcode === Jurisdiction.VANUATU) { setShowSubmittedModal( poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged && has_submitted_cfd_personal_details ); - } else if (jurisdiction_selected_shortcode === 'maltainvest') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST) { setShowSubmittedModal(poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged); } else setShowSubmittedModal( diff --git a/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx b/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx index 06b4a8088b38..46772599ad6b 100644 --- a/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx +++ b/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Div100vhContainer } from '@deriv/components'; -import { isDesktop, getAuthenticationStatusInfo } from '@deriv/shared'; +import { isDesktop, getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared'; import { connect } from '../Stores/connect'; import { LandingCompany, ResidenceList, GetSettings, StatesList, GetAccountStatus } from '@deriv/api-types'; import CFDPOA from '../Components/cfd-poa'; @@ -112,7 +112,10 @@ const CFDFinancialStpRealAccountSignup = (props: TCFDFinancialStpRealAccountSign }; const should_show_poi = () => { - if (jurisdiction_selected_shortcode === 'vanuatu' || jurisdiction_selected_shortcode === 'maltainvest') { + if ( + jurisdiction_selected_shortcode === Jurisdiction.VANUATU || + jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST + ) { return need_poi_for_vanuatu_maltainvest; } return need_poi_for_bvi_labuan; @@ -122,7 +125,7 @@ const CFDFinancialStpRealAccountSignup = (props: TCFDFinancialStpRealAccountSign ); const should_show_personal_details = - !has_submitted_cfd_personal_details && jurisdiction_selected_shortcode !== 'maltainvest'; + !has_submitted_cfd_personal_details && jurisdiction_selected_shortcode !== Jurisdiction.MALTA_INVEST; const verification_configs = [ ...(should_show_poi() ? [poi_config] : []), diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx index ecd7c5e1a6d0..f7d0a76a997c 100644 --- a/packages/cfd/src/Containers/cfd-password-modal.tsx +++ b/packages/cfd/src/Containers/cfd-password-modal.tsx @@ -23,6 +23,7 @@ import { getLegalEntityName, isDesktop, isMobile, + Jurisdiction, routes, validLength, validPassword, @@ -187,12 +188,12 @@ const ReviewMessageForMT5 = ({ return ( ); - } else if (['bvi', 'vanuatu'].includes(jurisdiction_selected_shortcode)) { + } else if ([Jurisdiction.BVI, Jurisdiction.VANUATU].includes(jurisdiction_selected_shortcode)) { if (manual_status === 'pending') { return ; } return ; - } else if (['labuan', 'maltainvest'].includes(jurisdiction_selected_shortcode)) { + } else if ([Jurisdiction.LABUAN, Jurisdiction.MALTA_INVEST].includes(jurisdiction_selected_shortcode)) { return ; } return null; @@ -663,15 +664,15 @@ const CFDPasswordModal = ({ const [is_selected_mt5_verified, setIsSelectedMT5Verified] = React.useState(false); const getVerificationStatus = () => { - if (jurisdiction_selected_shortcode === 'svg') { + if (jurisdiction_selected_shortcode === Jurisdiction.SVG) { setIsSelectedMT5Verified(true); - } else if (jurisdiction_selected_shortcode === 'bvi') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.BVI) { setIsSelectedMT5Verified(poi_verified_for_bvi_labuan); - } else if (jurisdiction_selected_shortcode === 'vanuatu') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.VANUATU) { setIsSelectedMT5Verified(poi_verified_for_vanuatu_maltainvest); - } else if (jurisdiction_selected_shortcode === 'labuan') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.LABUAN) { setIsSelectedMT5Verified(poi_verified_for_bvi_labuan && poa_verified); - } else if (jurisdiction_selected_shortcode === 'maltainvest') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST) { setIsSelectedMT5Verified(poi_verified_for_vanuatu_maltainvest && poa_verified); } }; @@ -813,7 +814,7 @@ const CFDPasswordModal = ({ ].short_title; const jurisdiction_label = jurisdiction_selected_shortcode && getFormattedJurisdictionCode(jurisdiction_selected_shortcode); - const mt5_platform_label = jurisdiction_selected_shortcode !== 'maltainvest' ? 'MT5' : ''; + const mt5_platform_label = jurisdiction_selected_shortcode !== Jurisdiction.MALTA_INVEST ? 'MT5' : ''; if (category === 'real') { return ( 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 6b453405b1e1..1cc3886b63a6 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-checkbox.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Checkbox, StaticUrl, Text } from '@deriv/components'; -import { isMobile } from '@deriv/shared'; +import { isMobile, Jurisdiction } from '@deriv/shared'; import { Localize } from '@deriv/translations'; import { TJurisdictionCheckBoxProps } from '../props.types'; @@ -16,9 +16,9 @@ const JurisdictionCheckBox = ({ const shouldShowCheckBox = () => { if (jurisdiction_selected_shortcode) { if ( - jurisdiction_selected_shortcode === 'svg' || - (jurisdiction_selected_shortcode === 'bvi' && should_restrict_bvi_account_creation) || - (jurisdiction_selected_shortcode === 'vanuatu' && should_restrict_vanuatu_account_creation) + jurisdiction_selected_shortcode === Jurisdiction.SVG || + (jurisdiction_selected_shortcode === Jurisdiction.BVI && should_restrict_bvi_account_creation) || + (jurisdiction_selected_shortcode === Jurisdiction.VANUATU && should_restrict_vanuatu_account_creation) ) { return false; } 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 a9f4ddec1090..4bcbcd2d61a4 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 @@ -1,7 +1,7 @@ import React from 'react'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; -import { getAuthenticationStatusInfo, isMobile } from '@deriv/shared'; +import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; import { TJurisdictionModalFootNoteProps } from '../props.types'; const FooterNote = ({ @@ -17,7 +17,7 @@ const FooterNote = ({ const { poa_pending } = getAuthenticationStatusInfo(account_status); - if (jurisdiction_selected_shortcode === 'svg') { + if (jurisdiction_selected_shortcode === Jurisdiction.SVG) { return ( ); } else if ( - (jurisdiction_selected_shortcode === 'bvi' && should_restrict_bvi_account_creation) || - (jurisdiction_selected_shortcode === 'vanuatu' && should_restrict_vanuatu_account_creation) + (jurisdiction_selected_shortcode === Jurisdiction.BVI && should_restrict_bvi_account_creation) || + (jurisdiction_selected_shortcode === Jurisdiction.VANUATU && should_restrict_vanuatu_account_creation) ) { return poa_pending ? ( ); - } else if (jurisdiction_selected_shortcode === 'vanuatu') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.VANUATU) { return ( ); - } else if (jurisdiction_selected_shortcode === 'labuan') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.LABUAN) { return ( ); - } else if (jurisdiction_selected_shortcode === 'maltainvest') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST) { return ( ); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 60bf787fcf05..ea9b9eb08067 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -4,7 +4,7 @@ import { localize } from '@deriv/translations'; import { connect } from '../../Stores/connect'; import RootStore from '../../Stores/index'; import JurisdictionModalContent from './jurisdiction-modal-content'; -import { getAuthenticationStatusInfo, isMobile } from '@deriv/shared'; +import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; import { TJurisdictionModalProps } from '../props.types'; import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; @@ -82,11 +82,11 @@ const JurisdictionModal = ({ account_type: account_type.type === 'synthetic' ? 'Derived' : 'Financial', }); - const is_svg_selected = jurisdiction_selected_shortcode === 'svg'; - const is_bvi_selected = jurisdiction_selected_shortcode === 'bvi'; - const is_vanuatu_selected = jurisdiction_selected_shortcode === 'vanuatu'; - const is_labuan_selected = jurisdiction_selected_shortcode === 'labuan'; - const is_maltainvest_selected = jurisdiction_selected_shortcode === 'maltainvest'; + const is_svg_selected = jurisdiction_selected_shortcode === Jurisdiction.SVG; + const is_bvi_selected = jurisdiction_selected_shortcode === Jurisdiction.BVI; + const is_vanuatu_selected = jurisdiction_selected_shortcode === Jurisdiction.VANUATU; + const is_labuan_selected = jurisdiction_selected_shortcode === Jurisdiction.LABUAN; + const is_maltainvest_selected = jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST; const isNextButtonDisabled = () => { if (jurisdiction_selected_shortcode) { diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js index 3a7e6e007c41..29b87f03098a 100644 --- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js +++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js @@ -1,5 +1,5 @@ import { action, computed, observable, reaction, runInAction, makeObservable, override } from 'mobx'; -import { getAccountListKey, getAccountTypeFields, CFD_PLATFORMS, WS } from '@deriv/shared'; +import { getAccountListKey, getAccountTypeFields, CFD_PLATFORMS, WS, Jurisdiction } from '@deriv/shared'; import BaseStore from 'Stores/base-store'; import { getDxCompanies, getMtCompanies } from './Helpers/cfd-config'; @@ -280,7 +280,7 @@ export default class CFDStore extends BaseStore { zipCode: address_postcode, ...(values.server ? { server: values.server } : {}), ...(this.jurisdiction_selected_shortcode ? { company: this.jurisdiction_selected_shortcode } : {}), - ...(this.jurisdiction_selected_shortcode !== 'labuan' + ...(this.jurisdiction_selected_shortcode !== Jurisdiction.LABUAN ? type_request : { account_type: 'financial', diff --git a/packages/shared/src/utils/constants/jurisdiction.ts b/packages/shared/src/utils/constants/jurisdiction.ts new file mode 100644 index 000000000000..3030e044221d --- /dev/null +++ b/packages/shared/src/utils/constants/jurisdiction.ts @@ -0,0 +1,7 @@ +export const Jurisdiction = Object.freeze({ + SVG: 'svg', + BVI: 'bvi', + VANUATU: 'vanuatu', + LABUAN: 'labuan', + MALTA_INVEST: 'maltainvest', +}); From f898f6e3a6f4745005826bc90c5da723a86ee6b2 Mon Sep 17 00:00:00 2001 From: Shaheer <122449658+shaheer-deriv@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:56:02 +0400 Subject: [PATCH 003/151] Apply suggestions from code review Co-authored-by: Sui Sin <103026762+suisin-deriv@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> --- .../src/components/cfds-listing/cfds-listing.scss | 10 +++++----- .../jurisdiction-modal/jurisdiction-card-section.tsx | 8 ++++---- .../jurisdiction-modal/jurisdiction-card.tsx | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 0e8097cf6c0f..8305415110aa 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -44,7 +44,7 @@ } &--selected { border: solid 2px $color-green; - box-shadow: 0px 12px 18px 8px var(--shadow-menu); + box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } &__verification-status, @@ -127,13 +127,13 @@ &__card-section-container { display: flex; flex-direction: column; - gap: 12px; + gap: 1.2rem; height: 100%; margin: 0em 2em 2em; } &__footer-wrapper { - min-height: 186px; + min-height: 18.6rem; display: flex; flex-direction: column; justify-content: space-between; @@ -197,7 +197,7 @@ width: 100%; display: flex; flex-direction: column; - gap: 8px; + gap: 0.8rem; } .cfd-card-section-divider { @@ -207,7 +207,7 @@ .cfd-card-section-title-indicator { display: flex; - padding: 6px 12px; + padding: 0.6rem 1.2rem; color: var(--text-prominent); border-radius: 4px; font-weight: bold; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index c286e5007562..101c9adf412f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -6,7 +6,7 @@ import { TJurisdictionCardSectionTitleIndicators } from 'Components/props.types' import classNames from 'classnames'; const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionProps) => { - function renderTitleIndicator(titleIndicators: TJurisdictionCardSectionTitleIndicators) { + const renderTitleIndicator=(titleIndicators: TJurisdictionCardSectionTitleIndicators) =>{ switch (titleIndicators.type) { case 'displayText': return ( @@ -27,9 +27,9 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr } return ( -
-
-
+
+
+
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 0198e016c07b..c62733deedf0 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -48,7 +48,7 @@ const JurisdictionCard = ({ {card_data.map((item, index) => ( <> - {index < card_data.length - 1 ?
: null} + {index < card_data.length - 1 &&
} ))}
From 1c9ba69a0f2d74afc8fff3270e488e6f6ef8666d Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 21 Mar 2023 17:05:02 +0400 Subject: [PATCH 004/151] refactor: :pencil2: refactoring and modifications based on code review --- .../components/cfds-listing/cfds-listing.scss | 28 +++++++------- .../jurisdiction-card-section.tsx | 15 ++++---- .../jurisdiction-modal/jurisdiction-card.tsx | 8 ++-- .../jurisdiction-modal-foot-note.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 38 +++++++++---------- packages/shared/src/styles/constants.scss | 8 ++++ packages/shared/src/styles/themes.scss | 9 +++++ 7 files changed, 60 insertions(+), 48 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 8305415110aa..c72a5c473fa7 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -27,14 +27,12 @@ } &__wrapper { - margin-top: 4em; - margin-left: 6em; - margin-right: 6em; + margin: 4em 6em 0em; display: flex; justify-content: center; - gap: 22px; + gap: 2.2rem; @include mobile { - margin: 0em; + margin: 0; padding: 2em 4em; flex-direction: column; align-items: center; @@ -89,7 +87,7 @@ &__card-content-over-header { display: flex; - background: #dfeaff; + background: var(--text-info-blue-bg); color: var(--text-info-blue); height: 4em; width: 100%; @@ -138,7 +136,7 @@ flex-direction: column; justify-content: space-between; @include mobile { - min-height: 0px; + min-height: 0; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -209,28 +207,28 @@ display: flex; padding: 0.6rem 1.2rem; color: var(--text-prominent); - border-radius: 4px; + border-radius: $BORDER_RADIUS; font-weight: bold; &__red-darker { - background: #661b20; + background: var(--modal-indicator-red-darker); } &__red-dark { - background: #b33037; + background: var(--modal-indicator-red-dark); } &__red-light { - background: #ff444f; + background: var(--modal-indicator-red-light); } &__yellow-dark { - background: #b3760d; + background: var(--modal-indicator-yellow-dark); } &__yellow-light { - background: #ffa912; + background: var(--modal-indicator-yellow-light); } &__violet-dark { - background: #4a3871; + background: var(--modal-indicator-violet-dark); } &__brown-dark { - background: #664407; + background: var(--modal-indicator-brown-dark); } } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 101c9adf412f..2219f45d2779 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,12 +1,11 @@ -import React from 'react'; import { Text } from '@deriv/components'; -import { Localize } from '@deriv/translations'; -import { TJurisdictionCardSectionProps } from '../props.types'; -import { TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; import classNames from 'classnames'; +import React from 'react'; +import { TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; +import { TJurisdictionCardSectionProps } from '../props.types'; const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionProps) => { - const renderTitleIndicator=(titleIndicators: TJurisdictionCardSectionTitleIndicators) =>{ + const renderTitleIndicator = (titleIndicators: TJurisdictionCardSectionTitleIndicators) => { switch (titleIndicators.type) { case 'displayText': return ( @@ -24,14 +23,14 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr default: return null; } - } + }; return (
- + {cardSectionItem.title}
{cardSectionItem.titleIndicators && renderTitleIndicator(cardSectionItem.titleIndicators)} @@ -39,7 +38,7 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr {cardSectionItem.description && ( - + {cardSectionItem.description} )}
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index c62733deedf0..0e63af8dfa4a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -46,10 +46,10 @@ const JurisdictionCard = ({
{card_data.map((item, index) => ( - <> - - {index < card_data.length - 1 &&
} - + + + {index < card_data.length - 1 &&
} + ))}
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 c19efa352f9e..f57448207a01 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 @@ -81,7 +81,7 @@ const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => {
) : ( - <> + ); }; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 78e1304ea09d..39a7d423a0fc 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -516,14 +516,12 @@ } &__wrapper { - margin-top: 4em; - margin-left: 6em; - margin-right: 6em; + margin: 4em 6em 0em 6em; display: flex; justify-content: center; - gap: 22px; + gap: 2.2rem; @include mobile { - margin: 0em; + margin: 0; padding: 2em 4em; flex-direction: column; align-items: center; @@ -534,7 +532,7 @@ &--selected { border: solid 2px $color-green; - box-shadow: 0px 12px 18px 8px var(--shadow-menu); + box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } &__verification-status, @@ -580,7 +578,7 @@ &__card-content-over-header { display: flex; - background: #dfeaff; + background: var(--text-info-blue-bg); color: var(--text-info-blue); height: 4em; width: 100%; @@ -618,18 +616,18 @@ &__card-section-container { display: flex; flex-direction: column; - gap: 12px; + gap: 1.2rem; height: 100%; margin: 0em 2em 2em 2em; } &__footer-wrapper { - min-height: 186px; + min-height: 18.6rem; display: flex; flex-direction: column; justify-content: space-between; @include mobile { - min-height: 0px; + min-height: 0; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -688,7 +686,7 @@ width: 100%; display: flex; flex-direction: column; - gap: 8px; + gap: 0.8rem; } .cfd-card-section-divider { @@ -698,30 +696,30 @@ .cfd-card-section-title-indicator { display: flex; - padding: 6px 12px; + padding: 0.6rem 1.2rem; color: white; - border-radius: 4px; + border-radius: $BORDER_RADIUS; font-weight: bold; &__red-darker { - background: #661b20; + background: var(--modal-indicator-red-darker); } &__red-dark { - background: #b33037; + background: var(--modal-indicator-red-dark); } &__red-light { - background: #ff444f; + background: var(--modal-indicator-red-light); } &__yellow-dark { - background: #b3760d; + background: var(--modal-indicator-yellow-dark); } &__yellow-light { - background: #ffa912; + background: var(--modal-indicator-yellow-light); } &__violet-dark { - background: #4a3871; + background: var(--modal-indicator-violet-dark); } &__brown-dark { - background: #664407; + background: var(--modal-indicator-brown-dark); } } diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index 2741931a769e..e79ce9fc89b2 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -25,6 +25,9 @@ $color-red-4: #d33636; $color-red-5: #eb3e48; $color-red-6: #ec3f3f29; $color-red-7: #ffe1e3; +$color-red-8: #661b20; +$color-red-9: #b33037; +$color-red-10: #ff444f; $color-grey: #c2c2c2; $color-grey-1: #999999; $color-grey-2: #f2f3f4; @@ -46,11 +49,16 @@ $color-green-4: #008079; $color-green-5: #4bb4b329; $color-orange: #ff6444; $color-yellow: #ffad3a; +$color-yellow-1: #b3760d; +$color-yellow-2: #ffa912; $color-blue: #377cfc; $color-blue-1: #0dc2e7; $color-blue-2: #2a3052; $color-blue-3: #0796e0; $color-blue-4: #0677af; +$color-blue-5: #dfeaff; +$color-violet: #4a3871; +$color-brown: #664407; $color-purple: #722fe4; /* alpha colors */ diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 32aaedb76609..ac6aa22323e0 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -87,6 +87,7 @@ --text-red: #{$color-red}; --text-blue: #{$color-blue-3}; --text-info-blue: #{$color-blue}; + --text-info-blue-bg: #{$color-blue-5}; --text-colored-background: #{$color-white}; --icon-light-background: #{$color-black-9}; --icon-dark-background: #{$color-white}; @@ -186,6 +187,14 @@ --badge-blue: #{$color-blue-4}; --badge-violet: #{$color-blue-2}; --badge-green: #{$color-green-3}; + // Modal + --modal-indicator-red-darker: #{$color-red-8}; + --modal-indicator-red-dark: #{$color-red-9}; + --modal-indicator-red-light: #{$color-red-10}; + --modal-indicator-yellow-dark: #{$color-yellow-1}; + --modal-indicator-yellow-light: #{$color-yellow-2}; + --modal-indicator-violet-dark: #{$color-violet}; + --modal-indicator-brown-dark: #{$color-brown}; } .theme--dark { // General From cb73e4a2d476df12e9ecc49d9f448120766a70c9 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 21 Mar 2023 18:19:53 +0400 Subject: [PATCH 005/151] refactor: :wastebasket: removed unused css class --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 1 - packages/cfd/src/sass/cfd-dashboard.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index c72a5c473fa7..bcfbc3341330 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -47,7 +47,6 @@ &__verification-status, &__verification-status--pending, - &__verification-status--failed, &__verification-status--account_added, &__verification-status--poi_verified, &__verification-status--not_submitted, diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 39a7d423a0fc..88841ec3f6d4 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -537,7 +537,6 @@ &__verification-status, &__verification-status--pending, - &__verification-status--failed, &__verification-status--account_added, &__verification-status--poi_verified, &__verification-status--not_submitted, From 651a1df2af4156fdb57830d0a2d7cb87f6eb726d Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 22 Mar 2023 13:40:41 +0800 Subject: [PATCH 006/151] chore: move strings to use standard constant jurisdiction object --- packages/cfd/src/Components/cfd-account-card.tsx | 6 ++++-- packages/cfd/src/Containers/cfd-password-modal.tsx | 2 +- .../jurisdiction-modal/jurisdiction-modal-content.tsx | 9 ++++++++- .../cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts | 9 +++++---- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 5d2de82992ed..7d6f395d12b2 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import { CSSTransition } from 'react-transition-group'; import { Icon, Money, Button, Text, DesktopWrapper, MobileWrapper, Popover } from '@deriv/components'; -import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS, isDesktop } from '@deriv/shared'; +import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS, isDesktop, Jurisdiction } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from '../Stores/connect'; import RootStore from '../Stores/index'; @@ -545,7 +545,9 @@ const CFDAccountCardComponent = ({ { const [is_password_modal_exited, setPasswordModalExited] = React.useState(true); - const is_bvi = landing_companies?.mt_financial_company?.financial_stp?.shortcode === 'bvi'; + const is_bvi = landing_companies?.mt_financial_company?.financial_stp?.shortcode === Jurisdiction.BVI; const has_mt5_account = Boolean(mt5_login_list?.length); const should_set_trading_password = Array.isArray(account_status?.status) && 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 800cfc63a5e9..5b821e002d3c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { TJurisdictionModalContentProps } from '../props.types'; import JurisdictionCard from './jurisdiction-card'; +import { Jurisdiction } from '@deriv/shared'; const JurisdictionModalContent = ({ account_type, @@ -28,7 +29,13 @@ const JurisdictionModalContent = ({ ? real_synthetic_accounts_existing_data?.some(account => account.landing_company_short === type_of_card) : real_financial_accounts_existing_data?.some(account => account.landing_company_short === type_of_card); }; - const jurisdiction_cards_array = ['svg', 'bvi', 'vanuatu', 'labuan', 'maltainvest']; + const jurisdiction_cards_array = [ + Jurisdiction.SVG, + Jurisdiction.BVI, + Jurisdiction.VANUATU, + Jurisdiction.LABUAN, + Jurisdiction.MALTA_INVEST, + ]; return (
diff --git a/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts b/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts index 0de741e45e0f..0785f3b59305 100644 --- a/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts +++ b/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts @@ -1,4 +1,5 @@ import { localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared'; export type TDxCompanies = ReturnType; export type TMtCompanies = ReturnType; @@ -184,16 +185,16 @@ export const getFormattedJurisdictionCode = (jurisdiction_code: string) => { let formatted_label = ''; switch (jurisdiction_code) { - case 'svg': + case Jurisdiction.SVG: formatted_label = localize('SVG'); break; - case 'bvi': + case Jurisdiction.BVI: formatted_label = localize('BVI'); break; - case 'labuan': + case Jurisdiction.LABUAN: formatted_label = localize('Labuan'); break; - case 'vanuatu': + case Jurisdiction.VANUATU: formatted_label = localize('Vanuatu'); break; default: From 92c2f78ed3200b453130563cd0743f7731cd3d94 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 22 Mar 2023 15:41:52 +0800 Subject: [PATCH 007/151] chore: update all files change string to use same Jurisdiction in constant file --- .../__tests__/currency-selector.spec.tsx | 8 +-- .../personal-details/personal-details.jsx | 15 +++++- .../__tests__/terms-of-use.spec.js | 8 +-- .../terms-of-use/terms-of-use-messages.jsx | 10 ++-- .../account/src/Configs/accept-risk-config.js | 4 +- .../src/Configs/address-details-config.js | 26 +++++---- .../src/Configs/currency-selector-schema.js | 3 +- .../src/Configs/financial-details-config.js | 36 ++++++------- .../src/Configs/personal-details-config.js | 39 ++++++++------ .../src/Configs/terms-of-use-config.js | 6 +-- .../src/Configs/trading-assessment-config.js | 4 +- packages/account/src/Containers/account.jsx | 13 +++-- .../financial-assessment.jsx | 4 +- .../PersonalDetails/personal-details.jsx | 3 +- .../Security/SelfExclusion/self-exclusion.jsx | 4 +- .../add-options-account.tsx | 4 +- .../currency-switcher-container.tsx | 3 +- .../real/real-account-card.tsx | 4 +- .../failed-verification-modal.tsx | 6 +-- .../options-multipliers-listing/index.tsx | 4 +- .../src/services/api/account-limits.js | 4 +- .../cashier/src/pages/deposit/deposit.tsx | 7 ++- .../__tests__/account-transfer-store.spec.ts | 4 +- .../src/stores/account-transfer-store.ts | 5 +- .../__tests__/cfd-account-card.spec.tsx | 7 +-- .../cfd-demo-account-display.spec.js | 15 ++++-- .../cfd-real-account-display.spec.js | 13 ++--- .../cfd/src/Components/cfd-account-card.tsx | 18 ++++--- .../Components/cfd-demo-account-display.tsx | 3 +- .../cfd-mt5-demo-account-display.tsx | 3 +- .../__tests__/cfd-dashboard.spec.tsx | 16 +++--- .../__tests__/cfd-password-modal.spec.js | 6 +-- .../cfd/src/Containers/derivx-trade-modal.tsx | 3 +- .../cfd/src/Containers/dmt5-trade-modal.tsx | 3 +- .../jurisdiction-modal-content.tsx | 2 +- .../jurisdiction-modal-foot-note.tsx | 2 +- .../jurisdiction-modal/jurisdiction-modal.tsx | 8 +-- .../Containers/mt5-compare-table-content.tsx | 16 +++--- .../cfd/src/Stores/Modules/CFD/cfd-store.js | 12 ++--- .../deriv-real-account-required-modal.jsx | 3 +- .../Layout/Footer/regulatory-information.jsx | 6 +-- .../Layout/Header/toggle-menu-drawer.jsx | 6 +-- .../account-switcher-account-list.jsx | 13 +++-- .../AccountSwitcher/account-switcher.jsx | 23 +++++--- .../src/App/Containers/Modals/app-modals.jsx | 4 +- .../exit-traders-hub-modal.jsx | 3 +- .../ready-to-deposit-modal.tsx | 3 +- .../RealAccountSignup/account-wizard-form.js | 6 +-- .../RealAccountSignup/account-wizard.jsx | 4 +- .../RealAccountSignup/helpers/constants.js | 7 +-- .../helpers/dialog-buttons.jsx | 5 +- .../helpers/dialog-message.jsx | 3 +- .../proof-of-address-form.js | 4 +- .../proof-of-identity-form.js | 4 +- .../RealAccountSignup/real-account-signup.jsx | 10 ++-- .../Containers/WelcomeModal/welcome-modal.jsx | 3 +- .../Containers/app-notification-messages.jsx | 4 +- .../Components/complaints-policy-content.jsx | 20 +++---- packages/core/src/Stores/client-store.js | 49 +++++++++-------- .../core/src/Stores/notification-store.js | 9 ++-- packages/core/src/Stores/traders-hub-store.js | 54 +++++++++++-------- .../src/__tests__/useDepositLocked.spec.tsx | 15 +++--- packages/hooks/src/useDepositLocked.ts | 3 +- .../hooks/src/useHasMaltaInvestAccount.ts | 3 +- packages/shared/src/utils/cfd/cfd.ts | 15 +++--- packages/shared/src/utils/constants/index.ts | 1 + packages/stores/src/mockStore.ts | 3 +- .../src/Stores/Modules/Trading/trade-store.js | 3 +- 68 files changed, 368 insertions(+), 269 deletions(-) diff --git a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx index 9cc96a824245..255df682efcf 100644 --- a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx +++ b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, screen, render, waitFor } from '@testing-library/react'; -import { isDesktop, isMobile, PlatformContext } from '@deriv/shared'; +import { isDesktop, isMobile, PlatformContext, Jurisdiction } from '@deriv/shared'; import CurrencySelector, { TCurrencySelector } from '../currency-selector'; jest.mock('@deriv/shared', () => ({ @@ -269,20 +269,20 @@ describe('', () => { currency: 'USD', is_disabled: 0, is_virtual: 1, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, trading: {}, token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN', email: 'test+qw@deriv.com', session_start: 1651059038, excluded_until: '', - landing_company_name: 'svg', + landing_company_name: Jurisdiction.SVG, residence: 'es', balance: 10000, accepted_bch: 0, }, }, has_real_account: true, - real_account_signup_target: 'svg', + real_account_signup_target: Jurisdiction.SVG, }; render(); diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index 879855526a6f..4489ef8fe547 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -20,7 +20,16 @@ import { } from '@deriv/components'; import { Link } from 'react-router-dom'; import { localize, Localize } from '@deriv/translations'; -import { getLegalEntityName, isDesktop, isMobile, routes, toMoment, PlatformContext, validPhone } from '@deriv/shared'; +import { + getLegalEntityName, + isDesktop, + isMobile, + routes, + toMoment, + PlatformContext, + validPhone, + Jurisdiction, +} from '@deriv/shared'; import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; import FormSubHeader from '../form-sub-header'; @@ -671,7 +680,9 @@ const PersonalDetails = ({ label={localize( 'I hereby confirm that the tax information I provided is true and complete. I will also inform {{legal_entity_name}} about any changes to this information.', { - legal_entity_name: getLegalEntityName('maltainvest'), + legal_entity_name: getLegalEntityName( + Jurisdiction.MALTA_INVEST + ), } )} renderlabel={title => ( diff --git a/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js b/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js index 629854d40ff6..4a279c0ed0a9 100644 --- a/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js +++ b/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { isDesktop, isMobile, PlatformContext } from '@deriv/shared'; +import { isDesktop, isMobile, PlatformContext, Jurisdiction } from '@deriv/shared'; import TermsOfUse from '../terms-of-use'; jest.mock('@deriv/shared', () => ({ @@ -48,7 +48,7 @@ describe('', () => { }; it('should render TermsOfUse component for svg accounts', () => { - mock_props.real_account_signup_target = 'svg'; + mock_props.real_account_signup_target = Jurisdiction.SVG; render(); @@ -99,7 +99,7 @@ describe('', () => { }); it('should render TermsOfUse component for maltainvest accounts and show "Add account" button', () => { - mock_props.real_account_signup_target = 'maltainvest'; + mock_props.real_account_signup_target = Jurisdiction.MALTA_INVEST; render(); @@ -122,7 +122,7 @@ describe('', () => { isMobile.mockReturnValue(true); isDesktop.mockReturnValue(false); - mock_props.real_account_signup_target = 'maltainvest'; + mock_props.real_account_signup_target = Jurisdiction.MALTA_INVEST; render(); diff --git a/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx b/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx index 08b0d207aaa8..2e5f781cc9a1 100644 --- a/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx +++ b/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx @@ -1,16 +1,16 @@ import React from 'react'; import { Localize } from '@deriv/translations'; -import { getLegalEntityName } from '@deriv/shared'; +import { getLegalEntityName, Jurisdiction } from '@deriv/shared'; import { Text } from '@deriv/components'; export const Hr = () =>
; export const BrokerSpecificMessage = ({ target }) => ( - {target === 'svg' && } + {target === Jurisdiction.SVG && } {target === 'iom' && } {target === 'malta' && } - {target === 'maltainvest' && } + {target === Jurisdiction.MALTA_INVEST && } {target === 'samoa' && } ); @@ -26,7 +26,7 @@ export const SVGDescription = () => ( 'Your account will be opened with {{legal_entity_name}}, and will be subject to the laws of Saint Vincent and the Grenadines.' } values={{ - legal_entity_name: getLegalEntityName('svg'), + legal_entity_name: getLegalEntityName(Jurisdiction.SVG), }} />

@@ -91,7 +91,7 @@ export const MaltaInvestDescription = () => ( 'Your account will be opened with {{legal_entity_name}}, regulated by the Malta Financial Services Authority (MFSA), and will be subject to the laws of Malta.' } values={{ - legal_entity_name: getLegalEntityName('maltainvest'), + legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), }} />

diff --git a/packages/account/src/Configs/accept-risk-config.js b/packages/account/src/Configs/accept-risk-config.js index 0941fabebf9b..9b7a37c2ab14 100644 --- a/packages/account/src/Configs/accept-risk-config.js +++ b/packages/account/src/Configs/accept-risk-config.js @@ -1,8 +1,8 @@ -import { getDefaultFields } from '@deriv/shared'; +import { getDefaultFields, Jurisdiction } from '@deriv/shared'; const accept_risk_config = { accept_risk: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: 1, }, }; diff --git a/packages/account/src/Configs/address-details-config.js b/packages/account/src/Configs/address-details-config.js index 199aafa40fd6..57b9955952f2 100644 --- a/packages/account/src/Configs/address-details-config.js +++ b/packages/account/src/Configs/address-details-config.js @@ -1,5 +1,11 @@ import { localize } from '@deriv/translations'; -import { generateValidationFunction, getDefaultFields, getErrorMessages, regex_checks } from '@deriv/shared'; +import { + generateValidationFunction, + getDefaultFields, + getErrorMessages, + regex_checks, + Jurisdiction, +} from '@deriv/shared'; const address_details_config = ({ account_settings, is_svg }) => { const is_gb = account_settings.country_code === 'gb'; @@ -9,7 +15,7 @@ const address_details_config = ({ account_settings, is_svg }) => { const base_case = { address_line_1: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_line_1 ?? '', rules: [ ['req', localize('First line of address is required')], @@ -25,7 +31,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ].filter(x => (is_svg ? x.indexOf('po_box') !== 0 : x)), }, address_line_2: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_line_2 ?? '', rules: [ ['length', localize('Only {{max}} characters, please.', { max: 70 }), { max: 70 }], @@ -40,7 +46,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ].filter(x => (is_svg ? x.indexOf('po_box') !== 0 : x)), }, address_city: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_city ?? '', rules: [ ['req', localize('City is required')], @@ -55,7 +61,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ], }, address_state: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_state ?? '', rules: [ ['req', localize('State is required')], @@ -69,7 +75,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ], }, address_postcode: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_postcode ?? '', rules: [ [ @@ -96,7 +102,7 @@ const address_details_config = ({ account_settings, is_svg }) => { const gb_case = { ...base_case, address_postcode: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.address_postcode ?? '', rules: [ [ @@ -135,9 +141,9 @@ const addressDetailsConfig = ( AddressDetails, is_appstore = false ) => { - const is_svg = upgrade_info?.can_upgrade_to === 'svg'; + const is_svg = upgrade_info?.can_upgrade_to === Jurisdiction.SVG; const config = address_details_config({ account_settings, is_svg }); - const is_mf = real_account_signup_target === 'maltainvest'; + const is_mf = real_account_signup_target === Jurisdiction.MALTA_INVEST; return { header: { @@ -180,7 +186,7 @@ const transformForResidence = (rules, residence) => { const transformConfig = (config, { real_account_signup_target }) => { // Remove required rule for svg clients - if (!real_account_signup_target || real_account_signup_target === 'svg') { + if (!real_account_signup_target || real_account_signup_target === Jurisdiction.SVG) { config.address_state.rules.shift(); } diff --git a/packages/account/src/Configs/currency-selector-schema.js b/packages/account/src/Configs/currency-selector-schema.js index 6b6f882b2246..b5f16b179437 100644 --- a/packages/account/src/Configs/currency-selector-schema.js +++ b/packages/account/src/Configs/currency-selector-schema.js @@ -1,8 +1,9 @@ import { localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared'; export default { currency: { - supported_in: ['maltainvest', 'malta', 'svg', 'iom'], + supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], default_value: '', rules: [['req', localize('Select an item')]], }, diff --git a/packages/account/src/Configs/financial-details-config.js b/packages/account/src/Configs/financial-details-config.js index bc75d64d2d73..8e1bee8485b1 100644 --- a/packages/account/src/Configs/financial-details-config.js +++ b/packages/account/src/Configs/financial-details-config.js @@ -1,91 +1,91 @@ import { localize } from '@deriv/translations'; -import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; const financial_details_config = ({ financial_assessment }) => { return { account_turnover: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.account_turnover ?? '', rules: [['req', localize('Please select an option')]], }, binary_options_trading_experience: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.binary_options_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, binary_options_trading_frequency: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.binary_options_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, cfd_trading_experience: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.cfd_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, cfd_trading_frequency: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.cfd_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, education_level: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.education_level ?? '', rules: [['req', localize('Please select an option')]], }, forex_trading_experience: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.forex_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, forex_trading_frequency: { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: financial_assessment?.forex_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, employment_industry: { default_value: financial_assessment?.employment_industry ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, employment_status: { default_value: financial_assessment?.employment_status ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, estimated_worth: { default_value: financial_assessment?.estimated_worth ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, income_source: { default_value: financial_assessment?.income_source ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, net_income: { default_value: financial_assessment?.net_income ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, occupation: { default_value: financial_assessment?.occupation ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, other_instruments_trading_experience: { default_value: financial_assessment?.other_instruments_trading_experience ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, other_instruments_trading_frequency: { default_value: financial_assessment?.other_instruments_trading_frequency ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, source_of_wealth: { default_value: financial_assessment?.source_of_wealth ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Please select an option')]], }, }; diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index a994b15edf82..9b292d3ebc05 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -1,4 +1,11 @@ -import { toMoment, getErrorMessages, generateValidationFunction, getDefaultFields, validLength } from '@deriv/shared'; +import { + toMoment, + getErrorMessages, + generateValidationFunction, + getDefaultFields, + validLength, + Jurisdiction, +} from '@deriv/shared'; import { localize } from '@deriv/translations'; const personal_details_config = ({ residence_list, account_settings, is_appstore, real_account_signup_target }) => { @@ -14,17 +21,17 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore const config = { account_opening_reason: { - supported_in: ['iom', 'malta', 'maltainvest'], + supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.account_opening_reason ?? '', rules: [['req', localize('Account opening reason is required.')]], }, salutation: { - supported_in: ['iom', 'malta', 'maltainvest'], + supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.salutation ?? '', rules: [['req', localize('Salutation is required.')]], }, first_name: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.first_name ?? '', rules: [ ['req', localize('First name is required.')], @@ -33,7 +40,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, last_name: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.last_name ?? '', rules: [ ['req', localize('Last name is required.')], @@ -42,7 +49,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, date_of_birth: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.date_of_birth ? toMoment(account_settings.date_of_birth).format('YYYY-MM-DD') : '', @@ -55,21 +62,21 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, place_of_birth: { - supported_in: ['maltainvest', 'iom', 'malta'], + supported_in: [Jurisdiction.MALTA_INVEST, 'iom', 'malta'], default_value: account_settings.place_of_birth ? residence_list.find(item => item.value === account_settings.place_of_birth)?.text : '', rules: [['req', localize('Place of birth is required.')]], }, citizen: { - supported_in: ['iom', 'malta', 'maltainvest'], + supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.citizen ? residence_list.find(item => item.value === account_settings.citizen)?.text : '', rules: [['req', localize('Citizenship is required')]], }, phone: { - supported_in: ['svg', 'iom', 'malta', 'maltainvest'], + supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], default_value: account_settings.phone ?? '', rules: [ ['req', localize('Phone is required.')], @@ -89,15 +96,15 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore }, tax_residence: { default_value: - real_account_signup_target === 'maltainvest' + real_account_signup_target === Jurisdiction.MALTA_INVEST ? account_settings.residence : residence_list.find(item => item.value === account_settings.tax_residence)?.text || '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Tax residence is required.')]], }, tax_identification_number: { default_value: account_settings.tax_identification_number ?? '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [ ['req', localize('Tax Identification Number is required.')], [ @@ -135,12 +142,12 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore }, employment_status: { default_value: '', - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['req', localize('Employment status is required.')]], }, tax_identification_confirm: { default_value: false, - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], rules: [['confirm', localize('Please confirm your tax information.')]], }, }; @@ -184,8 +191,8 @@ const personalDetailsConfig = ( real_account_signup_target, transformConfig(config, { real_account_signup_target }) ), - is_svg: upgrade_info?.can_upgrade_to === 'svg', - is_mf: real_account_signup_target === 'maltainvest', + is_svg: upgrade_info?.can_upgrade_to === Jurisdiction.SVG, + is_mf: real_account_signup_target === Jurisdiction.MALTA_INVEST, account_opening_reason_list: [ { text: localize('Hedging'), diff --git a/packages/account/src/Configs/terms-of-use-config.js b/packages/account/src/Configs/terms-of-use-config.js index 384e6ffd32ae..0167018646b6 100644 --- a/packages/account/src/Configs/terms-of-use-config.js +++ b/packages/account/src/Configs/terms-of-use-config.js @@ -1,14 +1,14 @@ -import { getDefaultFields, isDesktop } from '@deriv/shared'; +import { getDefaultFields, isDesktop, Jurisdiction } from '@deriv/shared'; import { localize } from '@deriv/translations'; const terms_of_use_config = { agreed_tos: { - supported_in: ['svg', 'maltainvest'], + supported_in: [Jurisdiction.SVG, Jurisdiction.MALTA_INVEST], default_value: false, }, agreed_tnc: { - supported_in: ['svg', 'maltainvest'], + supported_in: [Jurisdiction.SVG, Jurisdiction.MALTA_INVEST], default_value: false, }, }; diff --git a/packages/account/src/Configs/trading-assessment-config.js b/packages/account/src/Configs/trading-assessment-config.js index e526ad205658..ab83aaed286d 100644 --- a/packages/account/src/Configs/trading-assessment-config.js +++ b/packages/account/src/Configs/trading-assessment-config.js @@ -1,4 +1,4 @@ -import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; import { localize } from '@deriv/translations'; export const trading_assessment_questions = () => [ @@ -253,7 +253,7 @@ export const trading_assessment_questions = () => [ ]; const default_form_config = { - supported_in: ['maltainvest'], + supported_in: [Jurisdiction.MALTA_INVEST], default_value: '', }; diff --git a/packages/account/src/Containers/account.jsx b/packages/account/src/Containers/account.jsx index aae57fba274d..0eacea56079e 100644 --- a/packages/account/src/Containers/account.jsx +++ b/packages/account/src/Containers/account.jsx @@ -2,7 +2,14 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text, Icon } from '@deriv/components'; -import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared'; +import { + routes as shared_routes, + isMobile, + matchRoute, + getSelectedRoute, + PlatformContext, + Jurisdiction, +} from '@deriv/shared'; import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import { flatten } from '../Helpers/flatten'; @@ -151,11 +158,11 @@ const Account = ({ if (route.path === shared_routes.financial_assessment) { route.is_disabled = - is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); + is_virtual || (active_account_landing_company === Jurisdiction.MALTA_INVEST && !is_risky_client); } if (route.path === shared_routes.trading_assessment) { - route.is_disabled = is_virtual || active_account_landing_company !== 'maltainvest'; + route.is_disabled = is_virtual || active_account_landing_company !== Jurisdiction.MALTA_INVEST; } if (route.path === shared_routes.proof_of_identity || route.path === shared_routes.proof_of_address) { diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx index 931a3ac2b8bd..28c0ec104deb 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx @@ -15,7 +15,7 @@ import { SelectNative, Text, } from '@deriv/components'; -import { routes, isMobile, isDesktop, platforms, PlatformContext, WS } from '@deriv/shared'; +import { routes, isMobile, isDesktop, platforms, PlatformContext, WS, Jurisdiction } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import LeaveConfirm from 'Components/leave-confirm'; @@ -1025,7 +1025,7 @@ FinancialAssessment.propTypes = { export default connect(({ client, common, notifications }) => ({ is_authentication_needed: client.is_authentication_needed, is_financial_account: client.is_financial_account, - is_mf: client.landing_company_shortcode === 'maltainvest', + is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, is_svg: client.is_svg, is_financial_information_incomplete: client.is_financial_information_incomplete, is_trading_experience_incomplete: client.is_trading_experience_incomplete, diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index b4da912be5b0..7da18a1c91b0 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -36,6 +36,7 @@ import { WS, useIsMounted, validName, + Jurisdiction, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { withRouter } from 'react-router'; @@ -1366,7 +1367,7 @@ export default connect(({ client, notifications, ui, common }) => ({ getChangeableFields: client.getChangeableFields, current_landing_company: client.current_landing_company, is_eu: client.is_eu, - is_mf: client.landing_company_shortcode === 'maltainvest', + is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, is_svg: client.is_svg, is_uk: client.is_uk, is_virtual: client.is_virtual, diff --git a/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx b/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx index 481209b29d4c..ad6ba263de61 100644 --- a/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx +++ b/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PlatformContext, WS } from '@deriv/shared'; +import { Jurisdiction, PlatformContext, WS } from '@deriv/shared'; import { connect } from 'Stores/connect'; import SelfExclusionComponent from 'Components/self-exclusion/self-exclusion.jsx'; import 'Components/self-exclusion/self-exclusion.scss'; @@ -17,7 +17,7 @@ export default connect(({ client, ui }) => ({ is_cr: client.standpoint.svg, is_eu: client.is_eu, is_mlt: client.landing_company_shortcode === 'malta', - is_mf: client.landing_company_shortcode === 'maltainvest', + is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, is_mx: client.landing_company_shortcode === 'iom', is_uk: client.is_uk, is_wrapper_bypassed: false, diff --git a/packages/appstore/src/components/add-options-account/add-options-account.tsx b/packages/appstore/src/components/add-options-account/add-options-account.tsx index c42cc18b8734..ba74f0a385f6 100644 --- a/packages/appstore/src/components/add-options-account/add-options-account.tsx +++ b/packages/appstore/src/components/add-options-account/add-options-account.tsx @@ -4,7 +4,7 @@ import { Localize, localize } from '@deriv/translations'; import './add-options-account.scss'; import { observer } from 'mobx-react-lite'; import { useStores } from 'Stores'; -import { isMobile, ContentFlag } from '@deriv/shared'; +import { isMobile, ContentFlag, Jurisdiction } from '@deriv/shared'; const AddOptions = () => { const { client, traders_hub, ui } = useStores(); @@ -34,7 +34,7 @@ const AddOptions = () => { if (real_account_creation_unlock_date) { setShouldShowCooldownModal(true); } else { - openRealAccountSignup('maltainvest'); + openRealAccountSignup(Jurisdiction.MALTA_INVEST); } } else { openRealAccountSignup(); diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx index 18f3de364293..67103ce2e579 100644 --- a/packages/appstore/src/components/containers/currency-switcher-container.tsx +++ b/packages/appstore/src/components/containers/currency-switcher-container.tsx @@ -1,6 +1,7 @@ import React, { HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { Icon } from '@deriv/components'; +import { Jurisdiction } from '@deriv/shared'; import CurrencyIcon, { Currency } from 'Assets/svgs/currency'; import './currency-switcher-container.scss'; import { useStores } from 'Stores/index'; @@ -32,7 +33,7 @@ const CurrentSwitcherContainer = ({ const has_mf_mt5_account = Object.keys(current_list) .map(key => current_list[key]) - .some(account => account.landing_company_short === 'maltainvest'); + .some(account => account.landing_company_short === Jurisdiction.MALTA_INVEST); const Dropdown = () => { const icon_dropdown = ( diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx index 1618f61b4c4c..81adbe36ca51 100644 --- a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx +++ b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useHistory } from 'react-router'; import { observer } from 'mobx-react-lite'; import { Button, Text } from '@deriv/components'; -import { formatMoney, getCurrencyName, routes } from '@deriv/shared'; +import { formatMoney, getCurrencyName, routes, Jurisdiction } from '@deriv/shared'; import { localize } from '@deriv/translations'; import BalanceText from 'Components/elements/text/balance-text'; import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container'; @@ -23,7 +23,7 @@ const RealAccountCard = () => { const has_mf_mt5_account = Object.keys(current_list) .map(key => current_list[key]) - .some(account => account.landing_company_short === 'maltainvest'); + .some(account => account.landing_company_short === Jurisdiction.MALTA_INVEST); return ( { const should_resubmit_poi = () => { if ( is_from_multipliers || - open_failed_verification_for === 'vanuatu' || - open_failed_verification_for === 'maltainvest' + open_failed_verification_for === Jurisdiction.VANUATU || + open_failed_verification_for === Jurisdiction.MALTA_INVEST ) { return poi_resubmit_for_vanuatu_maltainvest; } diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 2012d60278fc..4b43904c0a4d 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -6,7 +6,7 @@ import ListingContainer from 'Components/containers/listing-container'; import { BrandConfig } from 'Constants/platform-config'; import TradingAppCard from 'Components/containers/trading-app-card'; import { useStores } from 'Stores/index'; -import { isMobile, ContentFlag } from '@deriv/shared'; +import { isMobile, ContentFlag, Jurisdiction } from '@deriv/shared'; import PlatformLoader from 'Components/pre-loader/platform-loader'; import { getHasDivider } from 'Constants/utils'; @@ -83,7 +83,7 @@ const OptionsAndMultipliersListing = () => { if (real_account_creation_unlock_date) { setShouldShowCooldownModal(true); } else { - openRealAccountSignup('maltainvest'); + openRealAccountSignup(Jurisdiction.MALTA_INVEST); } } else { openRealAccountSignup(); diff --git a/packages/bot-skeleton/src/services/api/account-limits.js b/packages/bot-skeleton/src/services/api/account-limits.js index 50ebafa8f07b..009922ec0ba7 100644 --- a/packages/bot-skeleton/src/services/api/account-limits.js +++ b/packages/bot-skeleton/src/services/api/account-limits.js @@ -1,8 +1,10 @@ +import { Jurisdiction } from '@deriv/shared'; + export default class AccountLimits { constructor(store) { this.ws = store.ws; } - getStakePayoutLimits(currency = 'AUD', landing_company_shortcode = 'svg', selected_market) { + getStakePayoutLimits(currency = 'AUD', landing_company_shortcode = Jurisdiction.SVG, selected_market) { return this.ws .send({ landing_company_details: landing_company_shortcode, diff --git a/packages/cashier/src/pages/deposit/deposit.tsx b/packages/cashier/src/pages/deposit/deposit.tsx index 5d359e169527..2216f2356238 100644 --- a/packages/cashier/src/pages/deposit/deposit.tsx +++ b/packages/cashier/src/pages/deposit/deposit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Loading } from '@deriv/components'; import { useDepositLocked } from '@deriv/hooks'; -import { ContentFlag } from '@deriv/shared'; +import { ContentFlag, Jurisdiction } from '@deriv/shared'; import { useStore, observer } from '@deriv/stores'; import { Real, Virtual } from '../../components/cashier-container'; import { CashierOnboarding, CashierOnboardingSideNote } from '../../components/cashier-onboarding'; @@ -55,7 +55,10 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => { const is_eu = [ContentFlag.LOW_RISK_CR_EU, ContentFlag.EU_REAL].includes(content_flag); const is_fiat_currency_banner_visible_for_MF_clients = - landing_company_shortcode === 'maltainvest' && !is_crypto && !can_change_fiat_currency && !!iframe_height; + landing_company_shortcode === Jurisdiction.MALTA_INVEST && + !is_crypto && + !can_change_fiat_currency && + !!iframe_height; React.useEffect(() => { if (!is_crypto_transactions_visible) { recentTransactionOnMount(); diff --git a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts index 80b0a0e9afbd..08c86304ea9b 100644 --- a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts +++ b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts @@ -1,6 +1,6 @@ import AccountTransferStore from '../account-transfer-store'; import type { TransferBetweenAccountsResponse } from '@deriv/api-types'; -import { getCurrencies, validNumber, CFD_PLATFORMS } from '@deriv/shared'; +import { getCurrencies, validNumber, CFD_PLATFORMS, Jurisdiction } from '@deriv/shared'; import { configure } from 'mobx'; import type { TTransferAccount, TRootStore, TWebSocket } from 'Types'; @@ -147,7 +147,7 @@ beforeEach(() => { is_financial_information_incomplete: true, is_logged_in: true, is_trading_experience_incomplete: true, - landing_company_shortcode: 'maltainvest', + landing_company_shortcode: Jurisdiction.MALTA_INVEST, loginid: 'CR90000103', residence: 'pl', responseMt5LoginList: jest.fn(), diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts index 10b6483374d1..1367a7cbd186 100644 --- a/packages/cashier/src/stores/account-transfer-store.ts +++ b/packages/cashier/src/stores/account-transfer-store.ts @@ -3,6 +3,7 @@ import { formatMoney, isEmptyObject, isCryptocurrency, + Jurisdiction, getCurrencies, getCurrencyDisplayCode, getDecimalPlaces, @@ -391,8 +392,8 @@ export default class AccountTransferStore { })}`; const non_eu_accounts = account.landing_company_short && - account.landing_company_short !== 'svg' && - account.landing_company_short !== 'bvi' + account.landing_company_short !== Jurisdiction.SVG && + account.landing_company_short !== Jurisdiction.BVI ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) : account.landing_company_short?.toUpperCase(); diff --git a/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx b/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx index 20260b408446..0ad649c519d1 100644 --- a/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx +++ b/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; +import { Jurisdiction } from '@deriv/shared'; import { CFDAccountCard } from '../cfd-account-card'; import { TCFDAccountCard } from '../props.types'; @@ -48,7 +49,7 @@ describe('CFDAccountCard', () => { platform: 'mt5', display_balance: '10000.00', display_login: '20103240', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, login: 'MTD20103240', market_type: 'financial', }; @@ -59,7 +60,7 @@ describe('CFDAccountCard', () => { platform: 'dxtrade', display_balance: '10000.00', display_login: '20103240', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, login: 'MTD20103240', market_type: 'financial', }; @@ -70,7 +71,7 @@ describe('CFDAccountCard', () => { platform: 'mt5', display_balance: '10000.00', display_login: '20103240', - landing_company_short: 'labuan', + landing_company_short: Jurisdiction.LABUAN, login: 'MTD20103240', market_type: 'financial', }; diff --git a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js index df99caa38f01..58dbfc64606b 100644 --- a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js @@ -1,5 +1,6 @@ import { fireEvent, render, screen, within } from '@testing-library/react'; import React from 'react'; +import { Jurisdiction } from '@deriv/shared'; import { CFDDemoAccountDisplay } from '../cfd-demo-account-display'; const mock_connect_props = { @@ -45,8 +46,8 @@ describe('', () => { platform: 'mt5', residence: 'id', standpoint: { - financial_company: 'svg', - gaming_company: 'svg', + financial_company: Jurisdiction.SVG, + gaming_company: Jurisdiction.SVG, iom: false, malta: false, maltainvest: false, @@ -64,7 +65,7 @@ describe('', () => { display_login: '20103240', email: 'name@domain.com', group: 'demo\\p01_ts02\\financial\\svg_std_usd', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, leverage: 1000, login: 'MTD20103240', market_type: 'financial', @@ -91,7 +92,7 @@ describe('', () => { display_balance: '10000.00', display_login: 'DXD1096', enabled: 1, - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, login: '374', market_type: 'synthetic', platform: 'dxtrade', @@ -155,7 +156,11 @@ describe('', () => { expect(add_demo_account_button).toBeEnabled(); fireEvent.click(add_demo_account_button); - expect(props.openAccountNeededModal).toHaveBeenCalledWith('maltainvest', 'Deriv Multipliers', 'demo CFDs'); + expect(props.openAccountNeededModal).toHaveBeenCalledWith( + Jurisdiction.MALTA_INVEST, + 'Deriv Multipliers', + 'demo CFDs' + ); }); it('should render a CFDs card only without "Add demo account" button on Deriv MT5 when is_logged_in=false & is_eu_country=true (also when redirected from Deriv X platform)', () => { diff --git a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js index b59eda6699ea..42ff120bd9e0 100644 --- a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js @@ -1,5 +1,6 @@ import { fireEvent, render, screen, within } from '@testing-library/react'; import React from 'react'; +import { Jurisdiction } from '@deriv/shared'; import { CFDRealAccountDisplay } from '../cfd-real-account-display'; const mock_connect_props = { @@ -51,8 +52,8 @@ describe('', () => { residence: 'id', should_enable_add_button: false, standpoint: { - financial_company: 'svg', - gaming_company: 'svg', + financial_company: Jurisdiction.SVG, + gaming_company: Jurisdiction.SVG, iom: false, malta: false, maltainvest: false, @@ -120,7 +121,7 @@ describe('', () => { legal_default_currency: 'USD', name: 'Deriv (SVG) LLC', requirements: {}, - shortcode: 'svg', + shortcode: Jurisdiction.SVG, support_professional_client: 0, }; @@ -133,7 +134,7 @@ describe('', () => { display_login: '41165492', email: 'name@domain.com', group: 'real\\p01_ts03\\synthetic\\svg_std_usd\\03', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, leverage: 500, login: 'MTR41165492', market_type: 'synthetic', @@ -161,7 +162,7 @@ describe('', () => { display_login: '1927245', email: 'name@domain.com', group: 'real\\p01_ts01\\financial\\svg_std-hr_usd', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, leverage: 1000, login: 'MTR1927245', market_type: 'financial', @@ -188,7 +189,7 @@ describe('', () => { display_balance: '0.00', display_login: 'DXR1095', enabled: 1, - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, login: '374', market_type: 'synthetic', platform: 'dxtrade', diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 7d6f395d12b2..49826db48679 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -248,7 +248,7 @@ const CFDAccountCardComponent = ({ const checkMultipleSvgAcc = () => { const all_svg_acc: DetailsOfEachMT5Loginid[] = []; existing_accounts_data?.map(acc => { - if (acc.landing_company_short === 'svg') { + if (acc.landing_company_short === Jurisdiction.SVG) { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -433,15 +433,17 @@ const CFDAccountCardComponent = ({ existing_accounts_data?.length && existing_accounts_data?.map((acc, index) => (
- {acc?.display_balance && is_logged_in && acc.landing_company_short === 'labuan' && ( -
- -
- )} + {acc?.display_balance && + is_logged_in && + acc.landing_company_short === Jurisdiction.LABUAN && ( +
+ +
+ )} {(acc as TTradingPlatformAccounts)?.display_login && (
@@ -573,7 +575,7 @@ const CFDAccountCardComponent = ({ /> {checkMultipleSvgAcc()?.length > 1 && - acc.landing_company_short === 'svg' && ( + acc.landing_company_short === Jurisdiction.SVG && ( { if (is_eu && !has_maltainvest_account && standpoint.iom) { - openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); } else { onSelectAccount({ category: 'demo', diff --git a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx index c09558c30cb1..31c70b684018 100644 --- a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx +++ b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx @@ -4,6 +4,7 @@ import { CFDAccountCard } from './cfd-account-card'; import { general_messages } from '../Constants/cfd-shared-strings'; import specifications, { TSpecifications } from '../Constants/cfd-specifications'; import Loading from '../templates/_common/components/loading'; +import { Jurisdiction } from '@deriv/shared'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; import { TTradingPlatformAccounts, TCFDPlatform } from './props.types'; import { TObjectCFDAccount } from '../Containers/cfd-dashboard'; @@ -75,7 +76,7 @@ const CFDMT5DemoAccountDisplay = ({ const openCFDAccount = () => { if (is_eu && !has_maltainvest_account && standpoint.iom) { - openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); } else { onSelectAccount({ category: 'demo', diff --git a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx index 72217e8cd065..ee376b4eba1f 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx +++ b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; import CFDDashboard, { TCFDDashboardProps } from '../cfd-dashboard'; import { BrowserRouter } from 'react-router-dom'; -import { CFD_PLATFORMS, getCFDPlatformLabel, routes } from '@deriv/shared'; +import { CFD_PLATFORMS, getCFDPlatformLabel, routes, Jurisdiction } from '@deriv/shared'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; type TMockConnectProps = { @@ -183,8 +183,8 @@ describe('', () => { setIsAcuityModalOpen: jest.fn(), setCurrentAccount: jest.fn(), standpoint: { - financial_company: 'svg', - gaming_company: 'svg', + financial_company: Jurisdiction.SVG, + gaming_company: Jurisdiction.SVG, iom: false, malta: false, maltainvest: false, @@ -193,7 +193,7 @@ describe('', () => { toggleAccountsDialog: jest.fn(), toggleShouldShowRealAccountsList: jest.fn(), toggleResetTradingPasswordModal: jest.fn(), - upgradeable_landing_companies: ['svg'], + upgradeable_landing_companies: [Jurisdiction.SVG], }; beforeEach(() => { mock_connect_props.landing_companies = { @@ -223,7 +223,7 @@ describe('', () => { display_login: '40005073', email: 'ma+1@deriv.com', group: 'real\\p01_ts03\\synthetic\\svg_std_usd\\02', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, leverage: 500, login: 'MTR40005073', market_type: 'synthetic', @@ -250,7 +250,7 @@ describe('', () => { display_login: '20104105', email: 'ma+1@deriv.com', group: 'demo\\p01_ts02\\synthetic\\svg_std_usd', - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, leverage: 500, login: 'MTD20104105', market_type: 'synthetic', @@ -276,7 +276,7 @@ describe('', () => { display_balance: '0.00', display_login: 'DXR1000', enabled: 1, - landing_company_short: 'svg', + landing_company_short: Jurisdiction.SVG, login: '9', market_type: 'synthetic', platform: 'dxtrade', @@ -379,7 +379,7 @@ describe('', () => { legal_default_currency: 'EUR', name: 'Deriv Investments (Europe) Limited', requirements: {}, - shortcode: 'maltainvest', + shortcode: Jurisdiction.MALTA_INVEST, support_professional_client: 1, }, }, diff --git a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js index 9acfe73fc22a..582ab53cfcc9 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js +++ b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; -import { WS, validPassword } from '@deriv/shared'; +import { WS, validPassword, Jurisdiction } from '@deriv/shared'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import CFDPasswordModal from '../cfd-password-modal'; @@ -62,7 +62,7 @@ describe('', () => { is_cfd_success_dialog_enabled: false, is_dxtrade_allowed: false, is_pre_appstore: false, - jurisdiction_selected_shortcode: 'svg', + jurisdiction_selected_shortcode: Jurisdiction.SVG, platform: 'mt5', has_cfd_error: false, landing_companies: {}, @@ -220,7 +220,7 @@ describe('', () => { account_type: { category: 'real', type: 'financial' }, is_eu: true, is_fully_authenticated: false, - jurisdiction_selected_shortcode: 'bvi', + jurisdiction_selected_shortcode: Jurisdiction.BVI, }; render( diff --git a/packages/cfd/src/Containers/derivx-trade-modal.tsx b/packages/cfd/src/Containers/derivx-trade-modal.tsx index 328b02b7bf20..58d0f974fc21 100644 --- a/packages/cfd/src/Containers/derivx-trade-modal.tsx +++ b/packages/cfd/src/Containers/derivx-trade-modal.tsx @@ -9,6 +9,7 @@ import { getCFDAccountKey, getPlatformSettings, isMobile, + Jurisdiction, } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { CFDAccountCopy } from '../Components/cfd-account-copy'; @@ -138,7 +139,7 @@ const DerivXTradeModal = ({ if ( (mt5_trade_account.account_type === 'demo' && mt5_trade_account.market_type === 'financial' && - mt5_trade_account.landing_company_short === 'labuan') || + mt5_trade_account.landing_company_short === Jurisdiction.LABUAN) || mt5_trade_account.account_type === 'real' ) { return mt5_trade_account.landing_company_short; diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx index 577fc681776e..fdd02e9f369b 100644 --- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx +++ b/packages/cfd/src/Containers/dmt5-trade-modal.tsx @@ -10,6 +10,7 @@ import { getPlatformSettings, getUrlBase, getCFDAccountKey, + Jurisdiction, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { CFDAccountCopy } from '../Components/cfd-account-copy'; @@ -99,7 +100,7 @@ const DMT5TradeModal = ({ if ( (mt5_trade_account.account_type === 'demo' && mt5_trade_account.market_type === 'financial' && - mt5_trade_account.landing_company_short === 'labuan') || + mt5_trade_account.landing_company_short === Jurisdiction.LABUAN) || mt5_trade_account.account_type === 'real' ) { return mt5_trade_account.landing_company_short; 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 5b821e002d3c..93a11f716c3e 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -22,7 +22,7 @@ const JurisdictionModalContent = ({ : financial_available_accounts?.some(account => account.shortcode === type_of_card); const disableCard = (type_of_card: string) => { - if (is_virtual && type_of_card !== 'svg') { + if (is_virtual && type_of_card !== Jurisdiction.SVG) { return true; } return account_type === 'synthetic' 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 4bcbcd2d61a4..96b704d67c39 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 @@ -36,7 +36,7 @@ const FooterNote = ({ ) : ( ); - } else if (jurisdiction_selected_shortcode === 'bvi') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.BVI) { return ( available_account.market_type === 'financial' && (show_eu_related_content - ? available_account.shortcode === 'maltainvest' - : available_account.shortcode !== 'maltainvest') + ? available_account.shortcode === Jurisdiction.MALTA_INVEST + : available_account.shortcode !== Jurisdiction.MALTA_INVEST) ); const synthetic_available_accounts = trading_platform_available_accounts.filter( available_account => available_account.market_type === 'gaming' && (show_eu_related_content - ? available_account.shortcode === 'maltainvest' - : available_account.shortcode !== 'maltainvest') + ? available_account.shortcode === Jurisdiction.MALTA_INVEST + : available_account.shortcode !== Jurisdiction.MALTA_INVEST) ); const modal_title = show_eu_related_content diff --git a/packages/cfd/src/Containers/mt5-compare-table-content.tsx b/packages/cfd/src/Containers/mt5-compare-table-content.tsx index 4521e7889b41..397ae3c77ea8 100644 --- a/packages/cfd/src/Containers/mt5-compare-table-content.tsx +++ b/packages/cfd/src/Containers/mt5-compare-table-content.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { Table, Button, Text, Popover } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { isDesktop, WS, getAuthenticationStatusInfo, CFD_PLATFORMS, ContentFlag } from '@deriv/shared'; +import { isDesktop, WS, getAuthenticationStatusInfo, CFD_PLATFORMS, ContentFlag, Jurisdiction } from '@deriv/shared'; import { connect } from '../Stores/connect'; import RootStore from '../Stores/index'; import { @@ -303,13 +303,13 @@ const DMT5CompareModalContent = ({ case 'synthetic_svg': case 'financial_svg': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode('svg'); + setJurisdictionSelectedShortcode(Jurisdiction.SVG); openPasswordModal(type_of_account); break; case 'synthetic_bvi': case 'financial_bvi': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode('bvi'); + setJurisdictionSelectedShortcode(Jurisdiction.BVI); if ( poi_acknowledged_for_bvi_labuan && !poi_or_poa_not_submitted && @@ -325,7 +325,7 @@ const DMT5CompareModalContent = ({ case 'synthetic_vanuatu': case 'financial_vanuatu': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode('vanuatu'); + setJurisdictionSelectedShortcode(Jurisdiction.VANUATU); if ( poi_acknowledged_for_vanuatu_maltainvest && !poi_or_poa_not_submitted && @@ -340,7 +340,7 @@ const DMT5CompareModalContent = ({ break; case 'financial_labuan': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode('labuan'); + setJurisdictionSelectedShortcode(Jurisdiction.LABUAN); if (poi_acknowledged_for_bvi_labuan && poa_acknowledged && has_submitted_personal_details) { openPasswordModal(type_of_account); } else { @@ -349,7 +349,7 @@ const DMT5CompareModalContent = ({ break; case 'financial_maltainvest': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode('maltainvest'); + setJurisdictionSelectedShortcode(Jurisdiction.MALTA_INVEST); if ((poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged) || is_demo_tab) { openPasswordModal(type_of_account); } else { @@ -434,9 +434,9 @@ const DMT5CompareModalContent = ({ return false; } else if (item.action === 'derivx') { return false; - } else if (type === 'bvi' && should_restrict_bvi_account_creation && poa_pending) { + } else if (type === Jurisdiction.BVI && should_restrict_bvi_account_creation && poa_pending) { return true; - } else if (type === 'vanuatu' && should_restrict_vanuatu_account_creation && poa_pending) { + } else if (type === Jurisdiction.VANUATU && should_restrict_vanuatu_account_creation && poa_pending) { return true; } diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js index 29b87f03098a..121023b0baf6 100644 --- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js +++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js @@ -135,8 +135,8 @@ export default class CFDStore extends BaseStore { this.root_store.client.mt5_login_list .filter(acc => show_eu_related_content - ? acc.landing_company_short === 'maltainvest' - : acc.landing_company_short !== 'maltainvest' + ? acc.landing_company_short === Jurisdiction.MALTA_INVEST + : acc.landing_company_short !== Jurisdiction.MALTA_INVEST ) .forEach(account => { // e.g. mt5.real.financial_stp @@ -233,8 +233,8 @@ export default class CFDStore extends BaseStore { this.toggleJurisdictionModal(); } else { if (this.root_store.traders_hub.show_eu_related_content) { - this.setJurisdictionSelectedShortcode('maltainvest'); - } else this.setJurisdictionSelectedShortcode('svg'); + this.setJurisdictionSelectedShortcode(Jurisdiction.MALTA_INVEST); + } else this.setJurisdictionSelectedShortcode(Jurisdiction.SVG); this.demoCFDSignup(); } } @@ -649,9 +649,9 @@ export default class CFDStore extends BaseStore { return ( financial_available_accounts.length === 1 && - financial_available_accounts.every(acc => acc.shortcode === 'svg') && + financial_available_accounts.every(acc => acc.shortcode === Jurisdiction.SVG) && synthetic_available_accounts.length === 1 && - synthetic_available_accounts.every(acc => acc.shortcode === 'svg') + synthetic_available_accounts.every(acc => acc.shortcode === Jurisdiction.SVG) ); } } diff --git a/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx b/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx index 9f556ea86c34..c8553e8e4886 100644 --- a/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx +++ b/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Dialog } from '@deriv/components'; +import { Jurisdiction } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import './deriv-real-account-required-modal.scss'; @@ -17,7 +18,7 @@ const DerivRealAccountRequiredModal = ({ const createAccount = () => { if (is_eu_user) { onClose(); - openRealAccountSignup('maltainvest'); + openRealAccountSignup(Jurisdiction.MALTA_INVEST); } else { onClose(); openRealAccountSignup(); diff --git a/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx b/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx index ee1e3459ecbd..86fd4b64b28b 100644 --- a/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx +++ b/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Icon, Modal, Popover, StaticUrl } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; -import { deriv_urls, getLegalEntityName } from '@deriv/shared'; +import { deriv_urls, getLegalEntityName, Jurisdiction } from '@deriv/shared'; import MGALogo from 'Assets/SvgComponents/footer/mga.svg'; const MLTRegulatoryInformation = () => ( @@ -84,7 +84,7 @@ const MFRegulatoryInformation = () => ( />, ]} values={{ - legal_entity_name: getLegalEntityName('maltainvest'), + legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), }} />

@@ -96,7 +96,7 @@ export const RegulatoryInformation = ({ landing_company, is_eu, show_eu_related_ if (!is_eu || (is_eu && !show_eu_related_content)) return null; const is_mx = landing_company === 'iom'; const is_mlt = landing_company === 'malta'; - const is_mf = landing_company === 'maltainvest'; + const is_mf = landing_company === Jurisdiction.MALTA_INVEST; return (
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index f74d781c7731..95ea906f7d7a 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text, Button } from '@deriv/components'; import { useOnrampVisible, useAccountTransferVisible } from '@deriv/hooks'; -import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag } from '@deriv/shared'; +import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag, Jurisdiction } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { localize, getAllowedLanguages, getLanguage } from '@deriv/translations'; import NetworkStatus from 'App/Components/Layout/Footer'; @@ -260,9 +260,9 @@ const ToggleMenuDrawer = observer(({ platform_config }) => { const disableRoute = route_path => { if (/financial-assessment/.test(route_path)) { - return is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); + return is_virtual || (active_account_landing_company === Jurisdiction.MALTA_INVEST && !is_risky_client); } else if (/trading-assessment/.test(route_path)) { - return is_virtual || active_account_landing_company !== 'maltainvest'; + return is_virtual || active_account_landing_company !== Jurisdiction.MALTA_INVEST; } else if (/proof-of-address/.test(route_path) || /proof-of-identity/.test(route_path)) { return !should_allow_authentication; } else if (/proof-of-ownership/.test(route_path)) { diff --git a/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx b/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx index ffc6abc60afb..6376b5e7ac27 100644 --- a/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx +++ b/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx @@ -1,7 +1,14 @@ import classNames from 'classnames'; import React from 'react'; import { Icon, Money, Button, Text } from '@deriv/components'; -import { formatMoney, getCurrencyName, getCFDAccountDisplay, getCurrencyDisplayCode, isBot } from '@deriv/shared'; +import { + formatMoney, + getCurrencyName, + getCFDAccountDisplay, + getCurrencyDisplayCode, + isBot, + Jurisdiction, +} from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; const AccountList = ({ @@ -178,7 +185,7 @@ const AccountDisplay = ({ {server?.server_info?.geolocation && should_show_server_name && market_type === 'synthetic' && - shortcode === 'svg' && ( + shortcode === Jurisdiction.SVG && ( {getServerName(server)} @@ -194,7 +201,7 @@ const AccountDisplay = ({ {server?.server_info?.geolocation && should_show_server_name && market_type === 'synthetic' && - shortcode === 'svg' && ( + shortcode === Jurisdiction.SVG && ( { account => !account.is_virtual && account.loginid.startsWith('CR') ); setFilteredRealAccounts(real_accounts); - const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === 'svg'); + const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === Jurisdiction.SVG); setFilteredRemainingRealAccounts(remaining_real_accounts); } else if (props.is_eu) { const real_accounts = getSortedAccountList(props.account_list, props.accounts).filter( account => !account.is_virtual && account.loginid.startsWith('MF') ); setFilteredRealAccounts(real_accounts); - const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === 'maltainvest'); + const remaining_real_accounts = getRemainingRealAccounts().filter( + account => account === Jurisdiction.MALTA_INVEST + ); setFilteredRemainingRealAccounts(remaining_real_accounts); } }, []); @@ -222,7 +225,11 @@ const AccountSwitcher = props => { const openMt5DemoAccount = account_type => { if (props.show_eu_related_content && !props.has_maltainvest_account && props.standpoint.iom) { closeAccountsDialog(); - props.openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + props.openAccountNeededModal( + Jurisdiction.MALTA_INVEST, + localize('Deriv Multipliers'), + localize('demo CFDs') + ); return; } sessionStorage.setItem('open_cfd_account_type', `demo.${CFD_PLATFORMS.MT5}.${account_type}`); @@ -373,7 +380,7 @@ const AccountSwitcher = props => { const low_risk_non_eu = props.content_flag === ContentFlag.LOW_RISK_CR_NON_EU; if (low_risk_non_eu) { return getSortedCFDList(props.mt5_login_list).filter( - account => !isDemo(account) && account.landing_company_short !== 'maltainvest' + account => !isDemo(account) && account.landing_company_short !== Jurisdiction.MALTA_INVEST ); } return getSortedCFDList(props.mt5_login_list).filter(account => !isDemo(account)); @@ -559,7 +566,7 @@ const AccountSwitcher = props => { const checkMultipleSvgAcc = () => { const all_svg_acc = []; getRealMT5().map(acc => { - if (acc.landing_company_short === 'svg' && acc.market_type === 'synthetic') { + if (acc.landing_company_short === Jurisdiction.SVG && acc.market_type === 'synthetic') { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -678,7 +685,7 @@ const AccountSwitcher = props => { platform={CFD_PLATFORMS.MT5} shortcode={ account.market_type === 'financial' && - account.landing_company_short === 'labuan' && + account.landing_company_short === Jurisdiction.LABUAN && account.landing_company_short } /> @@ -1118,7 +1125,7 @@ const AccountSwitcher = props => {
{!has_cr_account && getRemainingRealAccounts() - .filter(account => account === 'svg') + .filter(account => account === Jurisdiction.SVG) .map((account, index) => (
@@ -1190,7 +1197,7 @@ const AccountSwitcher = props => { })}
{getRemainingRealAccounts() - .filter(account => account === 'maltainvest') + .filter(account => account === Jurisdiction.MALTA_INVEST) .map((account, index) => { return (
diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx index 29d8f7c47553..973461ce9e42 100644 --- a/packages/core/src/App/Containers/Modals/app-modals.jsx +++ b/packages/core/src/App/Containers/Modals/app-modals.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; -import { ContentFlag, moduleLoader } from '@deriv/shared'; +import { ContentFlag, moduleLoader, Jurisdiction } from '@deriv/shared'; import { connect } from 'Stores/connect'; import MT5AccountNeededModal from 'App/Components/Elements/Modals/mt5-account-needed-modal.jsx'; import RedirectNoticeModal from 'App/Components/Elements/Modals/RedirectNotice'; @@ -125,7 +125,7 @@ const AppModals = ({ if ( is_logged_in && - active_account_landing_company === 'maltainvest' && + active_account_landing_company === Jurisdiction.MALTA_INVEST && !is_trading_assessment_for_new_user_enabled && is_trading_experience_incomplete && content_flag !== ContentFlag.LOW_RISK_CR_EU && diff --git a/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx b/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx index f5e42ce4125b..ddecdb089a2d 100644 --- a/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx +++ b/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx @@ -4,6 +4,7 @@ import { connect } from 'Stores/connect'; import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, Text, UILoader } from '@deriv/components'; import { isMobile, routes, ContentFlag } from '@deriv/shared'; import { localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared/src/utils/constants/jurisdiction'; const ExitTradersHubModal = ({ disableApp, @@ -46,7 +47,7 @@ const ExitTradersHubModal = ({ const onClickExitButton = async () => { setIsPreAppStore(false); setIsLoggingIn(true); - const cr_account = active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); + const cr_account = active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); toggleExitTradersHubModal(); if (content_flag === ContentFlag.LOW_RISK_CR_EU || content_flag === ContentFlag.LOW_RISK_CR_NON_EU) { diff --git a/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx b/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx index 51defc4af8fe..b7c65e4df42d 100644 --- a/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx +++ b/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Dialog } from '@deriv/components'; import { localize } from '@deriv/translations'; import { useStore, observer } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; import './ready-to-deposit-modal.scss'; const ReadyToDepositModal = observer(() => { @@ -17,7 +18,7 @@ const ReadyToDepositModal = observer(() => { const createAccount = () => { onClose(); - return is_eu_user ? openRealAccountSignup('maltainvest') : openRealAccountSignup(); + return is_eu_user ? openRealAccountSignup(Jurisdiction.MALTA_INVEST) : openRealAccountSignup(); }; return ( 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..a934e3a701ee 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js @@ -10,18 +10,18 @@ import { proofOfIdentityConfig, ProofOfIdentityFormOnSignup, } from '@deriv/account'; - +import { Jurisdiction } from '@deriv/shared'; import AddressDetails from './address-details.jsx'; import CurrencySelector from './currency-selector.jsx'; -const isMaltaAccount = ({ real_account_signup_target }) => real_account_signup_target === 'maltainvest'; +const isMaltaAccount = ({ real_account_signup_target }) => real_account_signup_target === Jurisdiction.MALTA_INVEST; const shouldShowPersonalAndAddressDetailsAndCurrency = ({ real_account_signup_target }) => real_account_signup_target !== 'samoa'; const shouldShowIdentityInformation = ({ 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'; + const maltainvest = real_account_signup_target === Jurisdiction.MALTA_INVEST; return !maltainvest && citizen && country?.identity?.services?.idv?.is_country_supported; }; diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index 6136bffcd12f..04d1d53200cc 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import fromEntries from 'object.fromentries'; import React from 'react'; import { DesktopWrapper, MobileWrapper, FormProgress, Wizard, Text } from '@deriv/components'; -import { toMoment, getLocation, makeCancellablePromise, WS } from '@deriv/shared'; +import { toMoment, getLocation, makeCancellablePromise, WS, Jurisdiction } from '@deriv/shared'; import { Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import LoadingModal from './real-account-signup-loader.jsx'; @@ -255,7 +255,7 @@ const AccountWizard = props => { submitForm(payload) .then(response => { props.setIsRiskWarningVisible(false); - if (props.real_account_signup_target === 'maltainvest') { + if (props.real_account_signup_target === Jurisdiction.MALTA_INVEST) { props.onFinishSuccess(response.new_account_maltainvest.currency.toLowerCase()); } else if (props.real_account_signup_target === 'samoa') { props.onOpenWelcomeModal(response.new_account_samoa.currency.toLowerCase()); diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js b/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js index 2698426b6650..07d46bcdaaee 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js @@ -1,4 +1,5 @@ import { localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared'; /** * Experian result is defined by client's information validity. @@ -34,7 +35,7 @@ export const getAccountTitle = (landing_company_shortcode, { account_residence = } switch (landing_company_shortcode) { - case 'svg': + case Jurisdiction.SVG: return localize('Options & Multipliers'); case 'iom': if (country_standpoint.is_united_kingdom) { @@ -50,7 +51,7 @@ export const getAccountTitle = (landing_company_shortcode, { account_residence = return localize('Options'); } return localize('Derived'); - case 'maltainvest': + case Jurisdiction.MALTA_INVEST: return localize('Multipliers'); default: return localize('Deriv'); @@ -81,7 +82,7 @@ export const getExperianResult = status => { return EXPERIAN.DANGER; }; - if (landing_company_shortcode === 'svg' || is_isle_of_man_residence || is_belgium_residence) + if (landing_company_shortcode === Jurisdiction.SVG || is_isle_of_man_residence || is_belgium_residence) return EXPERIAN.SUCCESS; if (landing_company_shortcode === 'iom') return getIOMStatus({ is_fully_authenticated, is_age_verified }); diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx index 2e2d0a01de9d..6d6a8caa7d83 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Button } from '@deriv/components'; import { localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared'; import { EXPERIAN } from './constants'; const getDismissButton = ({ status, landing_company_shortcode, closeModal, switchToVirtual }) => { @@ -66,7 +67,7 @@ const getActionButton = ({ label: localize('Deposit'), action: closeModalAndOpenCashier, }; - case 'maltainvest': + case Jurisdiction.MALTA_INVEST: if (is_fully_authenticated) { return { label: localize('Deposit'), @@ -77,7 +78,7 @@ const getActionButton = ({ label: localize('Submit proof'), action: closeModalAndOpenPOI, }; - case 'svg': + case Jurisdiction.SVG: case 'malta': default: return { diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx index db56d3fbad5b..dec92b7fa87f 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; +import { Jurisdiction } from '@deriv/shared'; import { EXPERIAN } from './constants'; /** @@ -16,7 +17,7 @@ export const DialogMessage = ({ status = EXPERIAN.SUCCESS, }) => { let message = ''; - if (landing_company_shortcode === 'maltainvest') { + if (landing_company_shortcode === Jurisdiction.MALTA_INVEST) { if (is_fully_authenticated) { message = [ , diff --git a/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js b/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js index 68ec96526756..b28366db3dbf 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js @@ -1,10 +1,10 @@ import { localize } from '@deriv/translations'; import { ProofOfAddressContainer } from '@deriv/account'; -import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; const proof_of_address_config = { poi_state: { - supported_in: ['maltainvest', 'malta', 'svg', 'iom'], + supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], default_value: '', rules: [], }, diff --git a/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js b/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js index 51d7ca43fe00..66d09da7900c 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js @@ -1,10 +1,10 @@ import { localize } from '@deriv/translations'; -import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; import ProofOfIdentityForm from './proof-of-identity.jsx'; const proof_of_identity_config = { poi_state: { - supported_in: ['maltainvest', 'malta', 'svg', 'iom'], + supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], default_value: '', rules: [], }, diff --git a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx index acf73bfab732..eac393e33d66 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { Button, Text, Modal, DesktopWrapper, MobileDialog, MobileWrapper } from '@deriv/components'; -import { routes } from '@deriv/shared'; +import { routes, Jurisdiction } from '@deriv/shared'; import { RiskToleranceWarningModal, TestWarningModal } from '@deriv/account'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; @@ -38,7 +38,7 @@ const WizardHeading = ({ is_pre_appstore, real_account_signup_target, }) => { - const maltainvest_signup = real_account_signup_target === 'maltainvest'; + const maltainvest_signup = real_account_signup_target === Jurisdiction.MALTA_INVEST; const iom_signup = real_account_signup_target === 'iom'; const deposit_cash_signup = real_account_signup_target === 'deposit_cash'; @@ -74,7 +74,7 @@ const WizardHeading = ({ return ; } return ; - case 'maltainvest': + case Jurisdiction.MALTA_INVEST: if ( country_standpoint.is_united_kingdom || country_standpoint.is_france || @@ -425,7 +425,7 @@ const RealAccountSignup = ({ active_modal_index_no = modal_pages_indices.add_or_manage_account; } else { active_modal_index_no = - !currency && real_account_signup_target !== 'maltainvest' + !currency && real_account_signup_target !== Jurisdiction.MALTA_INVEST ? modal_pages_indices.set_currency : modal_pages_indices.account_wizard; } @@ -449,7 +449,7 @@ const RealAccountSignup = ({ try { setShouldShowAppropriatenessWarningModal(false); const response = await realAccountSignup({ ...real_account_form_data, accept_risk: 1 }); - if (real_account_signup_target === 'maltainvest') { + if (real_account_signup_target === Jurisdiction.MALTA_INVEST) { showStatusDialog(response.new_account_maltainvest.currency.toLowerCase()); } } catch (sign_up_error) { diff --git a/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx b/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx index e82c713789ee..eb45a657a697 100644 --- a/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx +++ b/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'Stores/connect'; +import { Jurisdiction } from '@deriv/shared'; import WelcomeModal1 from './welcome-modal-1.jsx'; import WelcomeModal2 from './welcome-modal-2.jsx'; @@ -7,7 +8,7 @@ const WelcomeModal = ({ is_eu, landing_companies, residence }) => { const is_excluded_from_cr_onboarding = ['au', 'sg', 'no'].includes(residence); const shortcode = landing_companies?.financial_company?.shortcode || landing_companies?.gaming_company?.shortcode; - if ((shortcode === 'svg' && !is_excluded_from_cr_onboarding) || is_eu) { + if ((shortcode === Jurisdiction.SVG && !is_excluded_from_cr_onboarding) || is_eu) { return ; } diff --git a/packages/core/src/App/Containers/app-notification-messages.jsx b/packages/core/src/App/Containers/app-notification-messages.jsx index f6561918d753..1a0703934ef0 100644 --- a/packages/core/src/App/Containers/app-notification-messages.jsx +++ b/packages/core/src/App/Containers/app-notification-messages.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; -import { isMobile, getPathname, getPlatformSettings, routes } from '@deriv/shared'; +import { isMobile, getPathname, getPlatformSettings, routes, Jurisdiction } from '@deriv/shared'; import { connect } from 'Stores/connect'; import { excluded_notifications } from '../../Stores/Helpers/client-notifications'; import Notification, { @@ -149,7 +149,7 @@ const AppNotificationMessages = ({ const notifications_limit = isMobile() ? max_display_notifications_mobile : max_display_notifications; //TODO (yauheni-kryzhyk): showing pop-up only for specific messages. the rest of notifications are hidden. this logic should be changed in the upcoming new pop-up notifications implementation const filtered_excluded_notifications = notifications.filter(message => - message.key.includes('svg') || message.key.includes('p2p_daily_limit_increase') + message.key.includes(Jurisdiction.SVG) || message.key.includes('p2p_daily_limit_increase') ? message : excluded_notifications.includes(message.key) ); diff --git a/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx b/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx index d3e985a301c7..d95dd0dda02d 100644 --- a/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx +++ b/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx @@ -1,14 +1,14 @@ import React from 'react'; import { localize, Localize } from '@deriv/translations'; -import { getLegalEntityName } from '@deriv/shared'; +import { getLegalEntityName, Jurisdiction } from '@deriv/shared'; import { connect } from 'Stores/connect'; import 'Sass/app/modules/complaints-policy.scss'; const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { // * mt5_login_list returns these: // landing_company_short: "svg" | "malta" | "maltainvest" | "vanuatu" | "labuan" | "bvi" - const has_vanuatu = mt5_login_list.some(item => item.landing_company_short === 'vanuatu'); - const has_labuan = mt5_login_list.some(item => item.landing_company_short === 'labuan'); + const has_vanuatu = mt5_login_list.some(item => item.landing_company_short === Jurisdiction.VANUATU); + const has_labuan = mt5_login_list.some(item => item.landing_company_short === Jurisdiction.LABUAN); switch (landing_company_shortcode) { case 'iom': @@ -21,11 +21,11 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { }} /> ); - case 'maltainvest': + case Jurisdiction.MALTA_INVEST: return localize( 'This complaints policy, which may change from time to time, applies to your account registered with {{legal_entity_name}}.', { - legal_entity_name: getLegalEntityName('maltainvest'), + legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), } ); case 'malta': @@ -43,7 +43,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}}, {{legal_entity_name_fx}}, and {{legal_entity_name_v}}.', { - legal_entity_name_svg: getLegalEntityName('svg'), + legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), legal_entity_name_fx: getLegalEntityName('fx'), legal_entity_name_v: getLegalEntityName('v'), } @@ -52,7 +52,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}} and {{legal_entity_name_v}}.', { - legal_entity_name_svg: getLegalEntityName('svg'), + legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), legal_entity_name_v: getLegalEntityName('v'), } ); @@ -60,7 +60,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}} and {{legal_entity_name_fx}}.', { - legal_entity_name_svg: getLegalEntityName('svg'), + legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), legal_entity_name_fx: getLegalEntityName('fx'), } ); @@ -68,7 +68,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}}.', { - legal_entity_name_svg: getLegalEntityName('svg'), + legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), } ); } @@ -174,7 +174,7 @@ const getYourDecisionText = (is_uk, landing_company_shortcode) => { ]} /> ); - if (landing_company_shortcode === 'maltainvest') { + if (landing_company_shortcode === Jurisdiction.MALTA_INVEST) { texts.push( acc.landing_company_shortcode === 'maltainvest'); + return this.active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.MALTA_INVEST); } get has_malta_account() { @@ -515,7 +516,7 @@ export default class ClientStore extends BaseStore { get first_switchable_real_loginid() { const result = this.active_accounts.find( - acc => acc.is_virtual === 0 && acc.landing_company_shortcode === 'svg' + acc => acc.is_virtual === 0 && acc.landing_company_shortcode === Jurisdiction.SVG ); return result.loginid || undefined; } @@ -553,7 +554,8 @@ export default class ClientStore extends BaseStore { ) { return this.current_landing_company.legal_allowed_currencies; } - const target = this.root_store.ui.real_account_signup_target === 'maltainvest' ? 'financial' : 'gaming'; + const target = + this.root_store.ui.real_account_signup_target === Jurisdiction.MALTA_INVEST ? 'financial' : 'gaming'; if (this.landing_companies[`${target}_company`]) { return this.landing_companies[`${target}_company`].legal_allowed_currencies; @@ -840,13 +842,13 @@ export default class ClientStore extends BaseStore { get should_restrict_bvi_account_creation() { return !!this.mt5_login_list.filter( - item => item?.landing_company_short === 'bvi' && item?.status === 'poa_failed' + item => item?.landing_company_short === Jurisdiction.BVI && item?.status === 'poa_failed' ).length; } get should_restrict_vanuatu_account_creation() { return !!this.mt5_login_list.filter( - item => item?.landing_company_short === 'vanuatu' && item?.status === 'poa_failed' + item => item?.landing_company_short === Jurisdiction.VANUATU && item?.status === 'poa_failed' ).length; } @@ -860,11 +862,11 @@ export default class ClientStore extends BaseStore { const financial_shortcode = financial_company?.shortcode; const gaming_shortcode = gaming_company?.shortcode; const mt_gaming_shortcode = mt_gaming_company?.financial.shortcode || mt_gaming_company?.swap_free.shortcode; - const is_current_mf = this.landing_company_shortcode === 'maltainvest'; + const is_current_mf = this.landing_company_shortcode === Jurisdiction.MALTA_INVEST; return ( is_current_mf || //is_currently logged in mf account via trdaershub (financial_shortcode || gaming_shortcode || mt_gaming_shortcode - ? (eu_shortcode_regex.test(financial_shortcode) && gaming_shortcode !== 'svg') || + ? (eu_shortcode_regex.test(financial_shortcode) && gaming_shortcode !== Jurisdiction.SVG) || eu_shortcode_regex.test(gaming_shortcode) : eu_excluded_regex.test(this.residence)) ); @@ -1015,8 +1017,8 @@ export default class ClientStore extends BaseStore { this.trading_platform_available_accounts.some( account => (market_type === 'synthetic' ? 'gaming' : 'financial') === account.market_type && - account.shortcode === 'svg' - ) && existing_demo_accounts.every(account => !(account.landing_company_short === 'svg')) + account.shortcode === Jurisdiction.SVG + ) && existing_demo_accounts.every(account => !(account.landing_company_short === Jurisdiction.SVG)) ); } @@ -1028,7 +1030,7 @@ export default class ClientStore extends BaseStore { .filter( account => (market_type === 'synthetic' ? 'gaming' : 'financial') === account.market_type && - account.shortcode !== 'maltainvest' + account.shortcode !== Jurisdiction.MALTA_INVEST ) .map(account => account.shortcode); @@ -1072,7 +1074,7 @@ export default class ClientStore extends BaseStore { isBotAllowed = () => { // Stop showing Bot, DBot, DSmartTrader for logged out EU IPs if (!this.is_logged_in && this.is_eu_country) return false; - const is_mf = this.landing_company_shortcode === 'maltainvest'; + const is_mf = this.landing_company_shortcode === Jurisdiction.MALTA_INVEST; return this.is_virtual ? this.is_eu_or_multipliers_only : !is_mf && !this.is_options_blocked; }; @@ -1131,9 +1133,9 @@ export default class ClientStore extends BaseStore { landing_company !== this.accounts[this.loginid].landing_company_shortcode && upgradeable_landing_companies.indexOf(landing_company) !== -1 ); - can_upgrade_to = canUpgrade('svg', 'iom', 'malta', 'maltainvest'); + can_upgrade_to = canUpgrade(Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST); if (can_upgrade_to) { - type = can_upgrade_to === 'maltainvest' ? 'financial' : 'real'; + type = can_upgrade_to === Jurisdiction.MALTA_INVEST ? 'financial' : 'real'; } } @@ -1349,7 +1351,7 @@ export default class ClientStore extends BaseStore { async realAccountSignup(form_values) { const DEFAULT_CRYPTO_ACCOUNT_CURRENCY = 'BTC'; - const is_maltainvest_account = this.root_store.ui.real_account_signup_target === 'maltainvest'; + const is_maltainvest_account = this.root_store.ui.real_account_signup_target === Jurisdiction.MALTA_INVEST; const is_samoa_account = this.root_store.ui.real_account_signup_target === 'samoa'; let currency = ''; form_values.residence = this.residence; @@ -1645,7 +1647,7 @@ export default class ClientStore extends BaseStore { if (!this.is_virtual) { this.setPrevRealAccountLoginid(this.loginid); } - const no_cr_account = this.active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); + const no_cr_account = this.active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); if (!no_cr_account && this.is_low_risk) { this.switchAccount(this.virtual_account_loginid); @@ -2553,21 +2555,24 @@ export default class ClientStore extends BaseStore { // This is a conditional check for countries like Australia/Norway which fulfil one of these following conditions. const restricted_countries = - financial_company?.shortcode === 'svg' || - (gaming_company?.shortcode === 'svg' && financial_company?.shortcode !== 'maltainvest'); + financial_company?.shortcode === Jurisdiction.SVG || + (gaming_company?.shortcode === Jurisdiction.SVG && + financial_company?.shortcode !== Jurisdiction.MALTA_INVEST); - const high_risk_landing_company = financial_company?.shortcode === 'svg' && gaming_company?.shortcode === 'svg'; + const high_risk_landing_company = + financial_company?.shortcode === Jurisdiction.SVG && gaming_company?.shortcode === Jurisdiction.SVG; return high_risk_landing_company || this.account_status.risk_classification === 'high' || restricted_countries; } get is_low_risk() { const { gaming_company, financial_company } = this.landing_companies; const low_risk_landing_company = - financial_company?.shortcode === 'maltainvest' && gaming_company?.shortcode === 'svg'; + financial_company?.shortcode === Jurisdiction.MALTA_INVEST && + gaming_company?.shortcode === Jurisdiction.SVG; return ( low_risk_landing_company || - (this.upgradeable_landing_companies?.includes('svg') && - this.upgradeable_landing_companies?.includes('maltainvest')) + (this.upgradeable_landing_companies?.includes(Jurisdiction.SVG) && + this.upgradeable_landing_companies?.includes(Jurisdiction.MALTA_INVEST)) ); } diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js index 3627f50835c8..57181614e998 100644 --- a/packages/core/src/Stores/notification-store.js +++ b/packages/core/src/Stores/notification-store.js @@ -16,6 +16,7 @@ import { platform_name, routes, unique, + Jurisdiction, } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { BinaryLink } from 'App/Components/Routes'; @@ -181,7 +182,7 @@ export default class NotificationStore extends BaseStore { this.notification_messages = [...this.notification_messages, notification].sort(sortFn); if ( - (notification.key && notification.key.includes('svg')) || + (notification.key && notification.key.includes(Jurisdiction.SVG)) || notification.key === 'p2p_daily_limit_increase' || (excluded_notifications && !excluded_notifications.includes(notification.key)) ) { @@ -301,9 +302,9 @@ export default class NotificationStore extends BaseStore { const { max_daily_buy, max_daily_sell } = upgradable_daily_limits || {}; const { is_10k_withdrawal_limit_reached } = this.root_store.modules.cashier.withdraw; const { current_language, selected_contract_type } = this.root_store.common; - const malta_account = landing_company_shortcode === 'maltainvest'; + const malta_account = landing_company_shortcode === Jurisdiction.MALTA_INVEST; const virtual_account = landing_company_shortcode === 'virtual'; - const cr_account = landing_company_shortcode === 'svg'; + const cr_account = landing_company_shortcode === Jurisdiction.SVG; const is_website_up = website_status.site_status === 'up'; const has_trustpilot = LocalStore.getObject('notification_messages')[loginid]?.includes( this.client_notifications.trustpilot.key @@ -1500,7 +1501,7 @@ export default class NotificationStore extends BaseStore { updateNotifications(notifications_array) { this.notifications = notifications_array.filter(message => - (message.key && message.key.includes('svg')) || message.key === 'p2p_daily_limit_increase' + (message.key && message.key.includes(Jurisdiction.SVG)) || message.key === 'p2p_daily_limit_increase' ? message : excluded_notifications && !excluded_notifications.includes(message.key) ); diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index f8c0891fbc3c..8d8f155db077 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -1,5 +1,12 @@ import { action, makeObservable, observable, reaction, computed, runInAction } from 'mobx'; -import { getCFDAvailableAccount, CFD_PLATFORMS, ContentFlag, formatMoney, getAppstorePlatforms } from '@deriv/shared'; +import { + getCFDAvailableAccount, + CFD_PLATFORMS, + ContentFlag, + formatMoney, + getAppstorePlatforms, + Jurisdiction, +} from '@deriv/shared'; import BaseStore from './base-store'; import { localize } from '@deriv/translations'; import { isEuCountry } from '_common/utility'; @@ -194,7 +201,7 @@ export default class TradersHubStore extends BaseStore { get no_CR_account() { const { active_accounts } = this.root_store.client; - const result = active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); + const result = active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); return !result && this.selected_region === 'Non-EU'; } @@ -250,8 +257,8 @@ export default class TradersHubStore extends BaseStore { const { financial_company, gaming_company } = this.root_store.client.landing_companies; return ( this.content_flag === ContentFlag.CR_DEMO && - financial_company?.shortcode === 'maltainvest' && - gaming_company?.shortcode === 'svg' + financial_company?.shortcode === Jurisdiction.MALTA_INVEST && + gaming_company?.shortcode === Jurisdiction.SVG ); } @@ -260,21 +267,23 @@ export default class TradersHubStore extends BaseStore { const { financial_company, gaming_company } = landing_companies; //this is a conditional check for countries like Australia/Norway which fulfiles one of these following conditions - const restricted_countries = financial_company?.shortcode === 'svg' || gaming_company?.shortcode === 'svg'; + const restricted_countries = + financial_company?.shortcode === Jurisdiction.SVG || gaming_company?.shortcode === Jurisdiction.SVG; if (!is_logged_in) return ''; - if (!gaming_company?.shortcode && financial_company?.shortcode === 'maltainvest') { + if (!gaming_company?.shortcode && financial_company?.shortcode === Jurisdiction.MALTA_INVEST) { if (this.is_demo) return ContentFlag.EU_DEMO; return ContentFlag.EU_REAL; } else if ( - financial_company?.shortcode === 'maltainvest' && - gaming_company?.shortcode === 'svg' && + financial_company?.shortcode === Jurisdiction.MALTA_INVEST && + gaming_company?.shortcode === Jurisdiction.SVG && this.is_real ) { if (this.is_eu_user) return ContentFlag.LOW_RISK_CR_EU; return ContentFlag.LOW_RISK_CR_NON_EU; } else if ( - ((financial_company?.shortcode === 'svg' && gaming_company?.shortcode === 'svg') || restricted_countries) && + ((financial_company?.shortcode === Jurisdiction.SVG && gaming_company?.shortcode === Jurisdiction.SVG) || + restricted_countries) && this.is_real ) { return ContentFlag.HIGH_RISK_CR; @@ -330,7 +339,10 @@ export default class TradersHubStore extends BaseStore { ContentFlag.CR_DEMO, ].includes(this.content_flag); const { active_accounts } = this.root_store.client; - return is_low_risk_cr_client && active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest'); + return ( + is_low_risk_cr_client && + active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.MALTA_INVEST) + ); } toggleRegulatorsCompareModal() { @@ -386,7 +398,7 @@ export default class TradersHubStore extends BaseStore { get financial_restricted_countries() { const { financial_company, gaming_company } = this.root_store.client.landing_companies; - return gaming_company?.shortcode === 'svg' && !financial_company; + return gaming_company?.shortcode === Jurisdiction.SVG && !financial_company; } getAvailableMt5Accounts() { @@ -434,7 +446,7 @@ export default class TradersHubStore extends BaseStore { const selected_account_type = this.selected_account_type; const existing_accounts = current_list_keys .filter(key => { - const maltainvest_account = current_list[key].landing_company_short === 'maltainvest'; + const maltainvest_account = current_list[key].landing_company_short === Jurisdiction.MALTA_INVEST; if (platform === CFD_PLATFORMS.MT5 && !this.is_eu_user && !maltainvest_account) { return key.startsWith(`${platform}.${selected_account_type}.${market_type}`); @@ -508,7 +520,7 @@ export default class TradersHubStore extends BaseStore { const { openAccountNeededModal } = ui; const { is_eu } = client; if (is_eu && !has_maltainvest_account && standpoint?.iom) { - openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); return; } createCFDAccount({ ...account_type, platform }); @@ -589,7 +601,7 @@ export default class TradersHubStore extends BaseStore { hasMultipleSVGAccounts = () => { const all_svg_acc = []; this.combined_cfd_mt5_accounts.map(acc => { - if (acc.landing_company_short === 'svg' && acc.market_type === 'synthetic') { + if (acc.landing_company_short === Jurisdiction.SVG && acc.market_type === 'synthetic') { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -607,15 +619,15 @@ export default class TradersHubStore extends BaseStore { if (this.is_real && !this.is_eu_user) { const short_code = account.landing_company_short && - account.landing_company_short !== 'svg' && - account.landing_company_short !== 'bvi' + account.landing_company_short !== Jurisdiction.SVG && + account.landing_company_short !== Jurisdiction.BVI ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) : account.landing_company_short?.toUpperCase(); let region = ''; if (this.hasMultipleSVGAccounts()) { region = - account.market_type !== 'financial' && account.landing_company_short !== 'bvi' + account.market_type !== 'financial' && account.landing_company_short !== Jurisdiction.BVI ? ` - ${this.getServerName(account)}` : ''; } @@ -688,8 +700,8 @@ export default class TradersHubStore extends BaseStore { account => !account.is_virtual && (this.is_eu_user - ? account.landing_company_shortcode === 'maltainvest' - : account.landing_company_shortcode !== 'maltainvest') + ? account.landing_company_shortcode === Jurisdiction.MALTA_INVEST + : account.landing_company_shortcode !== Jurisdiction.MALTA_INVEST) ); if (platform_real_accounts?.length) { this.platform_real_balance = await this.getTotalBalance( @@ -710,8 +722,8 @@ export default class TradersHubStore extends BaseStore { account => account.account_type === 'real' && (this.is_eu_user - ? account.landing_company_short === 'maltainvest' - : account.landing_company_short !== 'maltainvest') + ? account.landing_company_short === Jurisdiction.MALTA_INVEST + : account.landing_company_short !== Jurisdiction.MALTA_INVEST) ); if (cfd_real_accounts?.length) { this.cfd_real_balance = await this.getTotalBalance(cfd_real_accounts, cfd_real_accounts[0]?.currency); diff --git a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx index 56a4674185e2..401d65a23049 100644 --- a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx +++ b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; import { renderHook } from '@testing-library/react-hooks'; import useDepositLocked from '../useDepositLocked'; import useNeedAuthentication from '../useNeedAuthentication'; @@ -18,7 +19,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'demo', @@ -46,7 +47,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'demo', @@ -74,7 +75,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'real', @@ -102,7 +103,7 @@ describe('useDepositLocked', () => { is_financial_account: true, is_financial_information_incomplete: true, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'demo', @@ -130,7 +131,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'real', @@ -158,7 +159,7 @@ describe('useDepositLocked', () => { is_financial_account: true, is_financial_information_incomplete: true, is_trading_experience_incomplete: false, - landing_company_shortcode: 'svg', + landing_company_shortcode: Jurisdiction.SVG, mt5_login_list: [ { account_type: 'demo', @@ -186,7 +187,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: true, - landing_company_shortcode: 'maltainvest', + landing_company_shortcode: Jurisdiction.MALTA_INVEST, mt5_login_list: [ { account_type: 'demo', diff --git a/packages/hooks/src/useDepositLocked.ts b/packages/hooks/src/useDepositLocked.ts index 3e6c39ae9610..76904763d142 100644 --- a/packages/hooks/src/useDepositLocked.ts +++ b/packages/hooks/src/useDepositLocked.ts @@ -1,4 +1,5 @@ import { useStore } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; import useNeedAuthentication from './useNeedAuthentication'; import useNeedFinancialAssessment from './useNeedFinancialAssessment'; import useNeedTNC from './useNeedTNC'; @@ -9,7 +10,7 @@ const useDepositLocked = () => { const is_need_authentication = useNeedAuthentication(); const is_need_tnc = useNeedTNC(); const is_need_financial_assessment = useNeedFinancialAssessment(); - const is_malta_invest = landing_company_shortcode === 'maltainvest'; + const is_malta_invest = landing_company_shortcode === Jurisdiction.MALTA_INVEST; const is_trading_experience_incomplete_or_need_financial_assessment = is_malta_invest ? is_trading_experience_incomplete : is_need_financial_assessment; diff --git a/packages/hooks/src/useHasMaltaInvestAccount.ts b/packages/hooks/src/useHasMaltaInvestAccount.ts index 4251c51b2115..3ad3010c373b 100644 --- a/packages/hooks/src/useHasMaltaInvestAccount.ts +++ b/packages/hooks/src/useHasMaltaInvestAccount.ts @@ -1,10 +1,11 @@ import { useStore } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; const useHasMaltaInvestAccount = () => { const { client } = useStore(); const { active_accounts } = client; const has_malta_invest_account = active_accounts.some( - account => account.landing_company_shortcode === 'maltainvest' + account => account.landing_company_shortcode === Jurisdiction.MALTA_INVEST ); return has_malta_invest_account; diff --git a/packages/shared/src/utils/cfd/cfd.ts b/packages/shared/src/utils/cfd/cfd.ts index dbfcc6cd177e..d9f587aa84fa 100644 --- a/packages/shared/src/utils/cfd/cfd.ts +++ b/packages/shared/src/utils/cfd/cfd.ts @@ -1,5 +1,6 @@ import { CFD_PLATFORMS } from '../platform'; import { LandingCompany, GetAccountStatus, DetailsOfEachMT5Loginid } from '@deriv/api-types'; +import { Jurisdiction } from '../constants/jurisdiction'; import { localize } from '@deriv/translations'; let CFD_text_translated: { [key: string]: () => void }; @@ -46,11 +47,11 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor if (market_type === 'gaming' || market_type === 'synthetic') { if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') { switch (shortcode) { - case 'svg': + case Jurisdiction.SVG: return 'synthetic_svg'; - case 'bvi': + case Jurisdiction.BVI: return 'synthetic_bvi'; - case 'vanuatu': + case Jurisdiction.VANUATU: return 'synthetic_v'; default: return 'synthetic'; @@ -64,13 +65,13 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor sub_account_type === 'financial_stp' ) { switch (shortcode) { - case 'svg': + case Jurisdiction.SVG: return 'financial_svg'; - case 'bvi': + case Jurisdiction.BVI: return 'financial_bvi'; - case 'labuan': + case Jurisdiction.LABUAN: return 'financial_fx'; - case 'vanuatu': + case Jurisdiction.VANUATU: return 'financial_v'; default: return 'financial'; diff --git a/packages/shared/src/utils/constants/index.ts b/packages/shared/src/utils/constants/index.ts index 5d4931b44ec6..b72f7a0a5ff0 100644 --- a/packages/shared/src/utils/constants/index.ts +++ b/packages/shared/src/utils/constants/index.ts @@ -1,3 +1,4 @@ export * from './barriers'; export * from './contract'; export * from './content_flags'; +export * from './jurisdiction'; diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 6f433ca96fc4..438bb1d3640b 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -1,4 +1,5 @@ import merge from 'lodash.merge'; +import { Jurisdiction } from '../../shared/src/utils/constants'; import type { TRootStore } from '../types'; const mock = (): TRootStore => { @@ -13,7 +14,7 @@ const mock = (): TRootStore => { is_virtual: 0, trading: {}, excluded_until: 0, - landing_company_name: 'svg', + landing_company_name: Jurisdiction.SVG, }, }, active_account_landing_company: '', diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js index 78af860183bb..d4813b1e755f 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.js +++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js @@ -16,6 +16,7 @@ import { isEmptyObject, isMarketClosed, isMobile, + Jurisdiction, pickDefaultSymbol, removeBarrier, resetEndTimeOnVolatilityIndices, @@ -419,7 +420,7 @@ export default class TradeStore extends BaseStore { } async setActiveSymbols() { - const is_on_mf_account = this.root_store.client.landing_company_shortcode === 'maltainvest'; + const is_on_mf_account = this.root_store.client.landing_company_shortcode === Jurisdiction.MALTA_INVEST; const hide_close_mx_mlt_storage_flag = !!parseInt( localStorage.getItem('hide_close_mx_mlt_account_notification') ); From fc9a5c35d603d1381982a1479b01030d7198e324 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 22 Mar 2023 16:26:06 +0800 Subject: [PATCH 008/151] Revert "chore: update all files change string to use same Jurisdiction in constant file" This reverts commit 92c2f78ed3200b453130563cd0743f7731cd3d94. --- .../__tests__/currency-selector.spec.tsx | 8 +-- .../personal-details/personal-details.jsx | 15 +----- .../__tests__/terms-of-use.spec.js | 8 +-- .../terms-of-use/terms-of-use-messages.jsx | 10 ++-- .../account/src/Configs/accept-risk-config.js | 4 +- .../src/Configs/address-details-config.js | 26 ++++----- .../src/Configs/currency-selector-schema.js | 3 +- .../src/Configs/financial-details-config.js | 36 ++++++------- .../src/Configs/personal-details-config.js | 39 ++++++-------- .../src/Configs/terms-of-use-config.js | 6 +-- .../src/Configs/trading-assessment-config.js | 4 +- packages/account/src/Containers/account.jsx | 13 ++--- .../financial-assessment.jsx | 4 +- .../PersonalDetails/personal-details.jsx | 3 +- .../Security/SelfExclusion/self-exclusion.jsx | 4 +- .../add-options-account.tsx | 4 +- .../currency-switcher-container.tsx | 3 +- .../real/real-account-card.tsx | 4 +- .../failed-verification-modal.tsx | 6 +-- .../options-multipliers-listing/index.tsx | 4 +- .../src/services/api/account-limits.js | 4 +- .../cashier/src/pages/deposit/deposit.tsx | 7 +-- .../__tests__/account-transfer-store.spec.ts | 4 +- .../src/stores/account-transfer-store.ts | 5 +- .../__tests__/cfd-account-card.spec.tsx | 7 ++- .../cfd-demo-account-display.spec.js | 15 ++---- .../cfd-real-account-display.spec.js | 13 +++-- .../cfd/src/Components/cfd-account-card.tsx | 18 +++---- .../Components/cfd-demo-account-display.tsx | 3 +- .../cfd-mt5-demo-account-display.tsx | 3 +- .../__tests__/cfd-dashboard.spec.tsx | 16 +++--- .../__tests__/cfd-password-modal.spec.js | 6 +-- .../cfd/src/Containers/derivx-trade-modal.tsx | 3 +- .../cfd/src/Containers/dmt5-trade-modal.tsx | 3 +- .../jurisdiction-modal-content.tsx | 2 +- .../jurisdiction-modal-foot-note.tsx | 2 +- .../jurisdiction-modal/jurisdiction-modal.tsx | 8 +-- .../Containers/mt5-compare-table-content.tsx | 16 +++--- .../cfd/src/Stores/Modules/CFD/cfd-store.js | 12 ++--- .../deriv-real-account-required-modal.jsx | 3 +- .../Layout/Footer/regulatory-information.jsx | 6 +-- .../Layout/Header/toggle-menu-drawer.jsx | 6 +-- .../account-switcher-account-list.jsx | 13 ++--- .../AccountSwitcher/account-switcher.jsx | 23 +++----- .../src/App/Containers/Modals/app-modals.jsx | 4 +- .../exit-traders-hub-modal.jsx | 3 +- .../ready-to-deposit-modal.tsx | 3 +- .../RealAccountSignup/account-wizard-form.js | 6 +-- .../RealAccountSignup/account-wizard.jsx | 4 +- .../RealAccountSignup/helpers/constants.js | 7 ++- .../helpers/dialog-buttons.jsx | 5 +- .../helpers/dialog-message.jsx | 3 +- .../proof-of-address-form.js | 4 +- .../proof-of-identity-form.js | 4 +- .../RealAccountSignup/real-account-signup.jsx | 10 ++-- .../Containers/WelcomeModal/welcome-modal.jsx | 3 +- .../Containers/app-notification-messages.jsx | 4 +- .../Components/complaints-policy-content.jsx | 20 +++---- packages/core/src/Stores/client-store.js | 49 ++++++++--------- .../core/src/Stores/notification-store.js | 9 ++-- packages/core/src/Stores/traders-hub-store.js | 54 ++++++++----------- .../src/__tests__/useDepositLocked.spec.tsx | 15 +++--- packages/hooks/src/useDepositLocked.ts | 3 +- .../hooks/src/useHasMaltaInvestAccount.ts | 3 +- packages/shared/src/utils/cfd/cfd.ts | 15 +++--- packages/shared/src/utils/constants/index.ts | 1 - packages/stores/src/mockStore.ts | 3 +- .../src/Stores/Modules/Trading/trade-store.js | 3 +- 68 files changed, 269 insertions(+), 368 deletions(-) diff --git a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx index 255df682efcf..9cc96a824245 100644 --- a/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx +++ b/packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, screen, render, waitFor } from '@testing-library/react'; -import { isDesktop, isMobile, PlatformContext, Jurisdiction } from '@deriv/shared'; +import { isDesktop, isMobile, PlatformContext } from '@deriv/shared'; import CurrencySelector, { TCurrencySelector } from '../currency-selector'; jest.mock('@deriv/shared', () => ({ @@ -269,20 +269,20 @@ describe('', () => { currency: 'USD', is_disabled: 0, is_virtual: 1, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', trading: {}, token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN', email: 'test+qw@deriv.com', session_start: 1651059038, excluded_until: '', - landing_company_name: Jurisdiction.SVG, + landing_company_name: 'svg', residence: 'es', balance: 10000, accepted_bch: 0, }, }, has_real_account: true, - real_account_signup_target: Jurisdiction.SVG, + real_account_signup_target: 'svg', }; render(); diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index 4489ef8fe547..879855526a6f 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -20,16 +20,7 @@ import { } from '@deriv/components'; import { Link } from 'react-router-dom'; import { localize, Localize } from '@deriv/translations'; -import { - getLegalEntityName, - isDesktop, - isMobile, - routes, - toMoment, - PlatformContext, - validPhone, - Jurisdiction, -} from '@deriv/shared'; +import { getLegalEntityName, isDesktop, isMobile, routes, toMoment, PlatformContext, validPhone } from '@deriv/shared'; import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; import FormSubHeader from '../form-sub-header'; @@ -680,9 +671,7 @@ const PersonalDetails = ({ label={localize( 'I hereby confirm that the tax information I provided is true and complete. I will also inform {{legal_entity_name}} about any changes to this information.', { - legal_entity_name: getLegalEntityName( - Jurisdiction.MALTA_INVEST - ), + legal_entity_name: getLegalEntityName('maltainvest'), } )} renderlabel={title => ( diff --git a/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js b/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js index 4a279c0ed0a9..629854d40ff6 100644 --- a/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js +++ b/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { isDesktop, isMobile, PlatformContext, Jurisdiction } from '@deriv/shared'; +import { isDesktop, isMobile, PlatformContext } from '@deriv/shared'; import TermsOfUse from '../terms-of-use'; jest.mock('@deriv/shared', () => ({ @@ -48,7 +48,7 @@ describe('', () => { }; it('should render TermsOfUse component for svg accounts', () => { - mock_props.real_account_signup_target = Jurisdiction.SVG; + mock_props.real_account_signup_target = 'svg'; render(); @@ -99,7 +99,7 @@ describe('', () => { }); it('should render TermsOfUse component for maltainvest accounts and show "Add account" button', () => { - mock_props.real_account_signup_target = Jurisdiction.MALTA_INVEST; + mock_props.real_account_signup_target = 'maltainvest'; render(); @@ -122,7 +122,7 @@ describe('', () => { isMobile.mockReturnValue(true); isDesktop.mockReturnValue(false); - mock_props.real_account_signup_target = Jurisdiction.MALTA_INVEST; + mock_props.real_account_signup_target = 'maltainvest'; render(); diff --git a/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx b/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx index 2e5f781cc9a1..08b0d207aaa8 100644 --- a/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx +++ b/packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx @@ -1,16 +1,16 @@ import React from 'react'; import { Localize } from '@deriv/translations'; -import { getLegalEntityName, Jurisdiction } from '@deriv/shared'; +import { getLegalEntityName } from '@deriv/shared'; import { Text } from '@deriv/components'; export const Hr = () =>
; export const BrokerSpecificMessage = ({ target }) => ( - {target === Jurisdiction.SVG && } + {target === 'svg' && } {target === 'iom' && } {target === 'malta' && } - {target === Jurisdiction.MALTA_INVEST && } + {target === 'maltainvest' && } {target === 'samoa' && } ); @@ -26,7 +26,7 @@ export const SVGDescription = () => ( 'Your account will be opened with {{legal_entity_name}}, and will be subject to the laws of Saint Vincent and the Grenadines.' } values={{ - legal_entity_name: getLegalEntityName(Jurisdiction.SVG), + legal_entity_name: getLegalEntityName('svg'), }} />

@@ -91,7 +91,7 @@ export const MaltaInvestDescription = () => ( 'Your account will be opened with {{legal_entity_name}}, regulated by the Malta Financial Services Authority (MFSA), and will be subject to the laws of Malta.' } values={{ - legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), + legal_entity_name: getLegalEntityName('maltainvest'), }} />

diff --git a/packages/account/src/Configs/accept-risk-config.js b/packages/account/src/Configs/accept-risk-config.js index 9b7a37c2ab14..0941fabebf9b 100644 --- a/packages/account/src/Configs/accept-risk-config.js +++ b/packages/account/src/Configs/accept-risk-config.js @@ -1,8 +1,8 @@ -import { getDefaultFields, Jurisdiction } from '@deriv/shared'; +import { getDefaultFields } from '@deriv/shared'; const accept_risk_config = { accept_risk: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: 1, }, }; diff --git a/packages/account/src/Configs/address-details-config.js b/packages/account/src/Configs/address-details-config.js index 57b9955952f2..199aafa40fd6 100644 --- a/packages/account/src/Configs/address-details-config.js +++ b/packages/account/src/Configs/address-details-config.js @@ -1,11 +1,5 @@ import { localize } from '@deriv/translations'; -import { - generateValidationFunction, - getDefaultFields, - getErrorMessages, - regex_checks, - Jurisdiction, -} from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, getErrorMessages, regex_checks } from '@deriv/shared'; const address_details_config = ({ account_settings, is_svg }) => { const is_gb = account_settings.country_code === 'gb'; @@ -15,7 +9,7 @@ const address_details_config = ({ account_settings, is_svg }) => { const base_case = { address_line_1: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_line_1 ?? '', rules: [ ['req', localize('First line of address is required')], @@ -31,7 +25,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ].filter(x => (is_svg ? x.indexOf('po_box') !== 0 : x)), }, address_line_2: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_line_2 ?? '', rules: [ ['length', localize('Only {{max}} characters, please.', { max: 70 }), { max: 70 }], @@ -46,7 +40,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ].filter(x => (is_svg ? x.indexOf('po_box') !== 0 : x)), }, address_city: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_city ?? '', rules: [ ['req', localize('City is required')], @@ -61,7 +55,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ], }, address_state: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_state ?? '', rules: [ ['req', localize('State is required')], @@ -75,7 +69,7 @@ const address_details_config = ({ account_settings, is_svg }) => { ], }, address_postcode: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_postcode ?? '', rules: [ [ @@ -102,7 +96,7 @@ const address_details_config = ({ account_settings, is_svg }) => { const gb_case = { ...base_case, address_postcode: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.address_postcode ?? '', rules: [ [ @@ -141,9 +135,9 @@ const addressDetailsConfig = ( AddressDetails, is_appstore = false ) => { - const is_svg = upgrade_info?.can_upgrade_to === Jurisdiction.SVG; + const is_svg = upgrade_info?.can_upgrade_to === 'svg'; const config = address_details_config({ account_settings, is_svg }); - const is_mf = real_account_signup_target === Jurisdiction.MALTA_INVEST; + const is_mf = real_account_signup_target === 'maltainvest'; return { header: { @@ -186,7 +180,7 @@ const transformForResidence = (rules, residence) => { const transformConfig = (config, { real_account_signup_target }) => { // Remove required rule for svg clients - if (!real_account_signup_target || real_account_signup_target === Jurisdiction.SVG) { + if (!real_account_signup_target || real_account_signup_target === 'svg') { config.address_state.rules.shift(); } diff --git a/packages/account/src/Configs/currency-selector-schema.js b/packages/account/src/Configs/currency-selector-schema.js index b5f16b179437..6b6f882b2246 100644 --- a/packages/account/src/Configs/currency-selector-schema.js +++ b/packages/account/src/Configs/currency-selector-schema.js @@ -1,9 +1,8 @@ import { localize } from '@deriv/translations'; -import { Jurisdiction } from '@deriv/shared'; export default { currency: { - supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], + supported_in: ['maltainvest', 'malta', 'svg', 'iom'], default_value: '', rules: [['req', localize('Select an item')]], }, diff --git a/packages/account/src/Configs/financial-details-config.js b/packages/account/src/Configs/financial-details-config.js index 8e1bee8485b1..bc75d64d2d73 100644 --- a/packages/account/src/Configs/financial-details-config.js +++ b/packages/account/src/Configs/financial-details-config.js @@ -1,91 +1,91 @@ import { localize } from '@deriv/translations'; -import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; const financial_details_config = ({ financial_assessment }) => { return { account_turnover: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.account_turnover ?? '', rules: [['req', localize('Please select an option')]], }, binary_options_trading_experience: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.binary_options_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, binary_options_trading_frequency: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.binary_options_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, cfd_trading_experience: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.cfd_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, cfd_trading_frequency: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.cfd_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, education_level: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.education_level ?? '', rules: [['req', localize('Please select an option')]], }, forex_trading_experience: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.forex_trading_experience ?? '', rules: [['req', localize('Please select an option')]], }, forex_trading_frequency: { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: financial_assessment?.forex_trading_frequency ?? '', rules: [['req', localize('Please select an option')]], }, employment_industry: { default_value: financial_assessment?.employment_industry ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, employment_status: { default_value: financial_assessment?.employment_status ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, estimated_worth: { default_value: financial_assessment?.estimated_worth ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, income_source: { default_value: financial_assessment?.income_source ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, net_income: { default_value: financial_assessment?.net_income ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, occupation: { default_value: financial_assessment?.occupation ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, other_instruments_trading_experience: { default_value: financial_assessment?.other_instruments_trading_experience ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, other_instruments_trading_frequency: { default_value: financial_assessment?.other_instruments_trading_frequency ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, source_of_wealth: { default_value: financial_assessment?.source_of_wealth ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, }; diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index 9b292d3ebc05..a994b15edf82 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -1,11 +1,4 @@ -import { - toMoment, - getErrorMessages, - generateValidationFunction, - getDefaultFields, - validLength, - Jurisdiction, -} from '@deriv/shared'; +import { toMoment, getErrorMessages, generateValidationFunction, getDefaultFields, validLength } from '@deriv/shared'; import { localize } from '@deriv/translations'; const personal_details_config = ({ residence_list, account_settings, is_appstore, real_account_signup_target }) => { @@ -21,17 +14,17 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore const config = { account_opening_reason: { - supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['iom', 'malta', 'maltainvest'], default_value: account_settings.account_opening_reason ?? '', rules: [['req', localize('Account opening reason is required.')]], }, salutation: { - supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['iom', 'malta', 'maltainvest'], default_value: account_settings.salutation ?? '', rules: [['req', localize('Salutation is required.')]], }, first_name: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.first_name ?? '', rules: [ ['req', localize('First name is required.')], @@ -40,7 +33,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, last_name: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.last_name ?? '', rules: [ ['req', localize('Last name is required.')], @@ -49,7 +42,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, date_of_birth: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.date_of_birth ? toMoment(account_settings.date_of_birth).format('YYYY-MM-DD') : '', @@ -62,21 +55,21 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], }, place_of_birth: { - supported_in: [Jurisdiction.MALTA_INVEST, 'iom', 'malta'], + supported_in: ['maltainvest', 'iom', 'malta'], default_value: account_settings.place_of_birth ? residence_list.find(item => item.value === account_settings.place_of_birth)?.text : '', rules: [['req', localize('Place of birth is required.')]], }, citizen: { - supported_in: ['iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['iom', 'malta', 'maltainvest'], default_value: account_settings.citizen ? residence_list.find(item => item.value === account_settings.citizen)?.text : '', rules: [['req', localize('Citizenship is required')]], }, phone: { - supported_in: [Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'iom', 'malta', 'maltainvest'], default_value: account_settings.phone ?? '', rules: [ ['req', localize('Phone is required.')], @@ -96,15 +89,15 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore }, tax_residence: { default_value: - real_account_signup_target === Jurisdiction.MALTA_INVEST + real_account_signup_target === 'maltainvest' ? account_settings.residence : residence_list.find(item => item.value === account_settings.tax_residence)?.text || '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Tax residence is required.')]], }, tax_identification_number: { default_value: account_settings.tax_identification_number ?? '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [ ['req', localize('Tax Identification Number is required.')], [ @@ -142,12 +135,12 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore }, employment_status: { default_value: '', - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['req', localize('Employment status is required.')]], }, tax_identification_confirm: { default_value: false, - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], rules: [['confirm', localize('Please confirm your tax information.')]], }, }; @@ -191,8 +184,8 @@ const personalDetailsConfig = ( real_account_signup_target, transformConfig(config, { real_account_signup_target }) ), - is_svg: upgrade_info?.can_upgrade_to === Jurisdiction.SVG, - is_mf: real_account_signup_target === Jurisdiction.MALTA_INVEST, + is_svg: upgrade_info?.can_upgrade_to === 'svg', + is_mf: real_account_signup_target === 'maltainvest', account_opening_reason_list: [ { text: localize('Hedging'), diff --git a/packages/account/src/Configs/terms-of-use-config.js b/packages/account/src/Configs/terms-of-use-config.js index 0167018646b6..384e6ffd32ae 100644 --- a/packages/account/src/Configs/terms-of-use-config.js +++ b/packages/account/src/Configs/terms-of-use-config.js @@ -1,14 +1,14 @@ -import { getDefaultFields, isDesktop, Jurisdiction } from '@deriv/shared'; +import { getDefaultFields, isDesktop } from '@deriv/shared'; import { localize } from '@deriv/translations'; const terms_of_use_config = { agreed_tos: { - supported_in: [Jurisdiction.SVG, Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'maltainvest'], default_value: false, }, agreed_tnc: { - supported_in: [Jurisdiction.SVG, Jurisdiction.MALTA_INVEST], + supported_in: ['svg', 'maltainvest'], default_value: false, }, }; diff --git a/packages/account/src/Configs/trading-assessment-config.js b/packages/account/src/Configs/trading-assessment-config.js index ab83aaed286d..e526ad205658 100644 --- a/packages/account/src/Configs/trading-assessment-config.js +++ b/packages/account/src/Configs/trading-assessment-config.js @@ -1,4 +1,4 @@ -import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; import { localize } from '@deriv/translations'; export const trading_assessment_questions = () => [ @@ -253,7 +253,7 @@ export const trading_assessment_questions = () => [ ]; const default_form_config = { - supported_in: [Jurisdiction.MALTA_INVEST], + supported_in: ['maltainvest'], default_value: '', }; diff --git a/packages/account/src/Containers/account.jsx b/packages/account/src/Containers/account.jsx index 0eacea56079e..aae57fba274d 100644 --- a/packages/account/src/Containers/account.jsx +++ b/packages/account/src/Containers/account.jsx @@ -2,14 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text, Icon } from '@deriv/components'; -import { - routes as shared_routes, - isMobile, - matchRoute, - getSelectedRoute, - PlatformContext, - Jurisdiction, -} from '@deriv/shared'; +import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import { flatten } from '../Helpers/flatten'; @@ -158,11 +151,11 @@ const Account = ({ if (route.path === shared_routes.financial_assessment) { route.is_disabled = - is_virtual || (active_account_landing_company === Jurisdiction.MALTA_INVEST && !is_risky_client); + is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); } if (route.path === shared_routes.trading_assessment) { - route.is_disabled = is_virtual || active_account_landing_company !== Jurisdiction.MALTA_INVEST; + route.is_disabled = is_virtual || active_account_landing_company !== 'maltainvest'; } if (route.path === shared_routes.proof_of_identity || route.path === shared_routes.proof_of_address) { diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx index 28c0ec104deb..931a3ac2b8bd 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx @@ -15,7 +15,7 @@ import { SelectNative, Text, } from '@deriv/components'; -import { routes, isMobile, isDesktop, platforms, PlatformContext, WS, Jurisdiction } from '@deriv/shared'; +import { routes, isMobile, isDesktop, platforms, PlatformContext, WS } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import LeaveConfirm from 'Components/leave-confirm'; @@ -1025,7 +1025,7 @@ FinancialAssessment.propTypes = { export default connect(({ client, common, notifications }) => ({ is_authentication_needed: client.is_authentication_needed, is_financial_account: client.is_financial_account, - is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, + is_mf: client.landing_company_shortcode === 'maltainvest', is_svg: client.is_svg, is_financial_information_incomplete: client.is_financial_information_incomplete, is_trading_experience_incomplete: client.is_trading_experience_incomplete, diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index 7da18a1c91b0..b4da912be5b0 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -36,7 +36,6 @@ import { WS, useIsMounted, validName, - Jurisdiction, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { withRouter } from 'react-router'; @@ -1367,7 +1366,7 @@ export default connect(({ client, notifications, ui, common }) => ({ getChangeableFields: client.getChangeableFields, current_landing_company: client.current_landing_company, is_eu: client.is_eu, - is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, + is_mf: client.landing_company_shortcode === 'maltainvest', is_svg: client.is_svg, is_uk: client.is_uk, is_virtual: client.is_virtual, diff --git a/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx b/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx index ad6ba263de61..481209b29d4c 100644 --- a/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx +++ b/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Jurisdiction, PlatformContext, WS } from '@deriv/shared'; +import { PlatformContext, WS } from '@deriv/shared'; import { connect } from 'Stores/connect'; import SelfExclusionComponent from 'Components/self-exclusion/self-exclusion.jsx'; import 'Components/self-exclusion/self-exclusion.scss'; @@ -17,7 +17,7 @@ export default connect(({ client, ui }) => ({ is_cr: client.standpoint.svg, is_eu: client.is_eu, is_mlt: client.landing_company_shortcode === 'malta', - is_mf: client.landing_company_shortcode === Jurisdiction.MALTA_INVEST, + is_mf: client.landing_company_shortcode === 'maltainvest', is_mx: client.landing_company_shortcode === 'iom', is_uk: client.is_uk, is_wrapper_bypassed: false, diff --git a/packages/appstore/src/components/add-options-account/add-options-account.tsx b/packages/appstore/src/components/add-options-account/add-options-account.tsx index ba74f0a385f6..c42cc18b8734 100644 --- a/packages/appstore/src/components/add-options-account/add-options-account.tsx +++ b/packages/appstore/src/components/add-options-account/add-options-account.tsx @@ -4,7 +4,7 @@ import { Localize, localize } from '@deriv/translations'; import './add-options-account.scss'; import { observer } from 'mobx-react-lite'; import { useStores } from 'Stores'; -import { isMobile, ContentFlag, Jurisdiction } from '@deriv/shared'; +import { isMobile, ContentFlag } from '@deriv/shared'; const AddOptions = () => { const { client, traders_hub, ui } = useStores(); @@ -34,7 +34,7 @@ const AddOptions = () => { if (real_account_creation_unlock_date) { setShouldShowCooldownModal(true); } else { - openRealAccountSignup(Jurisdiction.MALTA_INVEST); + openRealAccountSignup('maltainvest'); } } else { openRealAccountSignup(); diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx index 67103ce2e579..18f3de364293 100644 --- a/packages/appstore/src/components/containers/currency-switcher-container.tsx +++ b/packages/appstore/src/components/containers/currency-switcher-container.tsx @@ -1,7 +1,6 @@ import React, { HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { Icon } from '@deriv/components'; -import { Jurisdiction } from '@deriv/shared'; import CurrencyIcon, { Currency } from 'Assets/svgs/currency'; import './currency-switcher-container.scss'; import { useStores } from 'Stores/index'; @@ -33,7 +32,7 @@ const CurrentSwitcherContainer = ({ const has_mf_mt5_account = Object.keys(current_list) .map(key => current_list[key]) - .some(account => account.landing_company_short === Jurisdiction.MALTA_INVEST); + .some(account => account.landing_company_short === 'maltainvest'); const Dropdown = () => { const icon_dropdown = ( diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx index 81adbe36ca51..1618f61b4c4c 100644 --- a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx +++ b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useHistory } from 'react-router'; import { observer } from 'mobx-react-lite'; import { Button, Text } from '@deriv/components'; -import { formatMoney, getCurrencyName, routes, Jurisdiction } from '@deriv/shared'; +import { formatMoney, getCurrencyName, routes } from '@deriv/shared'; import { localize } from '@deriv/translations'; import BalanceText from 'Components/elements/text/balance-text'; import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container'; @@ -23,7 +23,7 @@ const RealAccountCard = () => { const has_mf_mt5_account = Object.keys(current_list) .map(key => current_list[key]) - .some(account => account.landing_company_short === Jurisdiction.MALTA_INVEST); + .some(account => account.landing_company_short === 'maltainvest'); return ( { const should_resubmit_poi = () => { if ( is_from_multipliers || - open_failed_verification_for === Jurisdiction.VANUATU || - open_failed_verification_for === Jurisdiction.MALTA_INVEST + open_failed_verification_for === 'vanuatu' || + open_failed_verification_for === 'maltainvest' ) { return poi_resubmit_for_vanuatu_maltainvest; } diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 4b43904c0a4d..2012d60278fc 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -6,7 +6,7 @@ import ListingContainer from 'Components/containers/listing-container'; import { BrandConfig } from 'Constants/platform-config'; import TradingAppCard from 'Components/containers/trading-app-card'; import { useStores } from 'Stores/index'; -import { isMobile, ContentFlag, Jurisdiction } from '@deriv/shared'; +import { isMobile, ContentFlag } from '@deriv/shared'; import PlatformLoader from 'Components/pre-loader/platform-loader'; import { getHasDivider } from 'Constants/utils'; @@ -83,7 +83,7 @@ const OptionsAndMultipliersListing = () => { if (real_account_creation_unlock_date) { setShouldShowCooldownModal(true); } else { - openRealAccountSignup(Jurisdiction.MALTA_INVEST); + openRealAccountSignup('maltainvest'); } } else { openRealAccountSignup(); diff --git a/packages/bot-skeleton/src/services/api/account-limits.js b/packages/bot-skeleton/src/services/api/account-limits.js index 009922ec0ba7..50ebafa8f07b 100644 --- a/packages/bot-skeleton/src/services/api/account-limits.js +++ b/packages/bot-skeleton/src/services/api/account-limits.js @@ -1,10 +1,8 @@ -import { Jurisdiction } from '@deriv/shared'; - export default class AccountLimits { constructor(store) { this.ws = store.ws; } - getStakePayoutLimits(currency = 'AUD', landing_company_shortcode = Jurisdiction.SVG, selected_market) { + getStakePayoutLimits(currency = 'AUD', landing_company_shortcode = 'svg', selected_market) { return this.ws .send({ landing_company_details: landing_company_shortcode, diff --git a/packages/cashier/src/pages/deposit/deposit.tsx b/packages/cashier/src/pages/deposit/deposit.tsx index 2216f2356238..5d359e169527 100644 --- a/packages/cashier/src/pages/deposit/deposit.tsx +++ b/packages/cashier/src/pages/deposit/deposit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Loading } from '@deriv/components'; import { useDepositLocked } from '@deriv/hooks'; -import { ContentFlag, Jurisdiction } from '@deriv/shared'; +import { ContentFlag } from '@deriv/shared'; import { useStore, observer } from '@deriv/stores'; import { Real, Virtual } from '../../components/cashier-container'; import { CashierOnboarding, CashierOnboardingSideNote } from '../../components/cashier-onboarding'; @@ -55,10 +55,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => { const is_eu = [ContentFlag.LOW_RISK_CR_EU, ContentFlag.EU_REAL].includes(content_flag); const is_fiat_currency_banner_visible_for_MF_clients = - landing_company_shortcode === Jurisdiction.MALTA_INVEST && - !is_crypto && - !can_change_fiat_currency && - !!iframe_height; + landing_company_shortcode === 'maltainvest' && !is_crypto && !can_change_fiat_currency && !!iframe_height; React.useEffect(() => { if (!is_crypto_transactions_visible) { recentTransactionOnMount(); diff --git a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts index 08c86304ea9b..80b0a0e9afbd 100644 --- a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts +++ b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts @@ -1,6 +1,6 @@ import AccountTransferStore from '../account-transfer-store'; import type { TransferBetweenAccountsResponse } from '@deriv/api-types'; -import { getCurrencies, validNumber, CFD_PLATFORMS, Jurisdiction } from '@deriv/shared'; +import { getCurrencies, validNumber, CFD_PLATFORMS } from '@deriv/shared'; import { configure } from 'mobx'; import type { TTransferAccount, TRootStore, TWebSocket } from 'Types'; @@ -147,7 +147,7 @@ beforeEach(() => { is_financial_information_incomplete: true, is_logged_in: true, is_trading_experience_incomplete: true, - landing_company_shortcode: Jurisdiction.MALTA_INVEST, + landing_company_shortcode: 'maltainvest', loginid: 'CR90000103', residence: 'pl', responseMt5LoginList: jest.fn(), diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts index 1367a7cbd186..10b6483374d1 100644 --- a/packages/cashier/src/stores/account-transfer-store.ts +++ b/packages/cashier/src/stores/account-transfer-store.ts @@ -3,7 +3,6 @@ import { formatMoney, isEmptyObject, isCryptocurrency, - Jurisdiction, getCurrencies, getCurrencyDisplayCode, getDecimalPlaces, @@ -392,8 +391,8 @@ export default class AccountTransferStore { })}`; const non_eu_accounts = account.landing_company_short && - account.landing_company_short !== Jurisdiction.SVG && - account.landing_company_short !== Jurisdiction.BVI + account.landing_company_short !== 'svg' && + account.landing_company_short !== 'bvi' ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) : account.landing_company_short?.toUpperCase(); diff --git a/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx b/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx index 0ad649c519d1..20260b408446 100644 --- a/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx +++ b/packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; -import { Jurisdiction } from '@deriv/shared'; import { CFDAccountCard } from '../cfd-account-card'; import { TCFDAccountCard } from '../props.types'; @@ -49,7 +48,7 @@ describe('CFDAccountCard', () => { platform: 'mt5', display_balance: '10000.00', display_login: '20103240', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', login: 'MTD20103240', market_type: 'financial', }; @@ -60,7 +59,7 @@ describe('CFDAccountCard', () => { platform: 'dxtrade', display_balance: '10000.00', display_login: '20103240', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', login: 'MTD20103240', market_type: 'financial', }; @@ -71,7 +70,7 @@ describe('CFDAccountCard', () => { platform: 'mt5', display_balance: '10000.00', display_login: '20103240', - landing_company_short: Jurisdiction.LABUAN, + landing_company_short: 'labuan', login: 'MTD20103240', market_type: 'financial', }; diff --git a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js index 58dbfc64606b..df99caa38f01 100644 --- a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js @@ -1,6 +1,5 @@ import { fireEvent, render, screen, within } from '@testing-library/react'; import React from 'react'; -import { Jurisdiction } from '@deriv/shared'; import { CFDDemoAccountDisplay } from '../cfd-demo-account-display'; const mock_connect_props = { @@ -46,8 +45,8 @@ describe('', () => { platform: 'mt5', residence: 'id', standpoint: { - financial_company: Jurisdiction.SVG, - gaming_company: Jurisdiction.SVG, + financial_company: 'svg', + gaming_company: 'svg', iom: false, malta: false, maltainvest: false, @@ -65,7 +64,7 @@ describe('', () => { display_login: '20103240', email: 'name@domain.com', group: 'demo\\p01_ts02\\financial\\svg_std_usd', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', leverage: 1000, login: 'MTD20103240', market_type: 'financial', @@ -92,7 +91,7 @@ describe('', () => { display_balance: '10000.00', display_login: 'DXD1096', enabled: 1, - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', login: '374', market_type: 'synthetic', platform: 'dxtrade', @@ -156,11 +155,7 @@ describe('', () => { expect(add_demo_account_button).toBeEnabled(); fireEvent.click(add_demo_account_button); - expect(props.openAccountNeededModal).toHaveBeenCalledWith( - Jurisdiction.MALTA_INVEST, - 'Deriv Multipliers', - 'demo CFDs' - ); + expect(props.openAccountNeededModal).toHaveBeenCalledWith('maltainvest', 'Deriv Multipliers', 'demo CFDs'); }); it('should render a CFDs card only without "Add demo account" button on Deriv MT5 when is_logged_in=false & is_eu_country=true (also when redirected from Deriv X platform)', () => { diff --git a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js index 42ff120bd9e0..b59eda6699ea 100644 --- a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js @@ -1,6 +1,5 @@ import { fireEvent, render, screen, within } from '@testing-library/react'; import React from 'react'; -import { Jurisdiction } from '@deriv/shared'; import { CFDRealAccountDisplay } from '../cfd-real-account-display'; const mock_connect_props = { @@ -52,8 +51,8 @@ describe('', () => { residence: 'id', should_enable_add_button: false, standpoint: { - financial_company: Jurisdiction.SVG, - gaming_company: Jurisdiction.SVG, + financial_company: 'svg', + gaming_company: 'svg', iom: false, malta: false, maltainvest: false, @@ -121,7 +120,7 @@ describe('', () => { legal_default_currency: 'USD', name: 'Deriv (SVG) LLC', requirements: {}, - shortcode: Jurisdiction.SVG, + shortcode: 'svg', support_professional_client: 0, }; @@ -134,7 +133,7 @@ describe('', () => { display_login: '41165492', email: 'name@domain.com', group: 'real\\p01_ts03\\synthetic\\svg_std_usd\\03', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', leverage: 500, login: 'MTR41165492', market_type: 'synthetic', @@ -162,7 +161,7 @@ describe('', () => { display_login: '1927245', email: 'name@domain.com', group: 'real\\p01_ts01\\financial\\svg_std-hr_usd', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', leverage: 1000, login: 'MTR1927245', market_type: 'financial', @@ -189,7 +188,7 @@ describe('', () => { display_balance: '0.00', display_login: 'DXR1095', enabled: 1, - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', login: '374', market_type: 'synthetic', platform: 'dxtrade', diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 49826db48679..7d6f395d12b2 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -248,7 +248,7 @@ const CFDAccountCardComponent = ({ const checkMultipleSvgAcc = () => { const all_svg_acc: DetailsOfEachMT5Loginid[] = []; existing_accounts_data?.map(acc => { - if (acc.landing_company_short === Jurisdiction.SVG) { + if (acc.landing_company_short === 'svg') { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -433,17 +433,15 @@ const CFDAccountCardComponent = ({ existing_accounts_data?.length && existing_accounts_data?.map((acc, index) => (
- {acc?.display_balance && - is_logged_in && - acc.landing_company_short === Jurisdiction.LABUAN && ( -
- -
- )} + {acc?.display_balance && is_logged_in && acc.landing_company_short === 'labuan' && ( +
+ +
+ )} {(acc as TTradingPlatformAccounts)?.display_login && (
@@ -575,7 +573,7 @@ const CFDAccountCardComponent = ({ /> {checkMultipleSvgAcc()?.length > 1 && - acc.landing_company_short === Jurisdiction.SVG && ( + acc.landing_company_short === 'svg' && ( { if (is_eu && !has_maltainvest_account && standpoint.iom) { - openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); } else { onSelectAccount({ category: 'demo', diff --git a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx index 31c70b684018..c09558c30cb1 100644 --- a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx +++ b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx @@ -4,7 +4,6 @@ import { CFDAccountCard } from './cfd-account-card'; import { general_messages } from '../Constants/cfd-shared-strings'; import specifications, { TSpecifications } from '../Constants/cfd-specifications'; import Loading from '../templates/_common/components/loading'; -import { Jurisdiction } from '@deriv/shared'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; import { TTradingPlatformAccounts, TCFDPlatform } from './props.types'; import { TObjectCFDAccount } from '../Containers/cfd-dashboard'; @@ -76,7 +75,7 @@ const CFDMT5DemoAccountDisplay = ({ const openCFDAccount = () => { if (is_eu && !has_maltainvest_account && standpoint.iom) { - openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); } else { onSelectAccount({ category: 'demo', diff --git a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx index ee376b4eba1f..72217e8cd065 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx +++ b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; import CFDDashboard, { TCFDDashboardProps } from '../cfd-dashboard'; import { BrowserRouter } from 'react-router-dom'; -import { CFD_PLATFORMS, getCFDPlatformLabel, routes, Jurisdiction } from '@deriv/shared'; +import { CFD_PLATFORMS, getCFDPlatformLabel, routes } from '@deriv/shared'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; type TMockConnectProps = { @@ -183,8 +183,8 @@ describe('', () => { setIsAcuityModalOpen: jest.fn(), setCurrentAccount: jest.fn(), standpoint: { - financial_company: Jurisdiction.SVG, - gaming_company: Jurisdiction.SVG, + financial_company: 'svg', + gaming_company: 'svg', iom: false, malta: false, maltainvest: false, @@ -193,7 +193,7 @@ describe('', () => { toggleAccountsDialog: jest.fn(), toggleShouldShowRealAccountsList: jest.fn(), toggleResetTradingPasswordModal: jest.fn(), - upgradeable_landing_companies: [Jurisdiction.SVG], + upgradeable_landing_companies: ['svg'], }; beforeEach(() => { mock_connect_props.landing_companies = { @@ -223,7 +223,7 @@ describe('', () => { display_login: '40005073', email: 'ma+1@deriv.com', group: 'real\\p01_ts03\\synthetic\\svg_std_usd\\02', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', leverage: 500, login: 'MTR40005073', market_type: 'synthetic', @@ -250,7 +250,7 @@ describe('', () => { display_login: '20104105', email: 'ma+1@deriv.com', group: 'demo\\p01_ts02\\synthetic\\svg_std_usd', - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', leverage: 500, login: 'MTD20104105', market_type: 'synthetic', @@ -276,7 +276,7 @@ describe('', () => { display_balance: '0.00', display_login: 'DXR1000', enabled: 1, - landing_company_short: Jurisdiction.SVG, + landing_company_short: 'svg', login: '9', market_type: 'synthetic', platform: 'dxtrade', @@ -379,7 +379,7 @@ describe('', () => { legal_default_currency: 'EUR', name: 'Deriv Investments (Europe) Limited', requirements: {}, - shortcode: Jurisdiction.MALTA_INVEST, + shortcode: 'maltainvest', support_professional_client: 1, }, }, diff --git a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js index 582ab53cfcc9..9acfe73fc22a 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js +++ b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; -import { WS, validPassword, Jurisdiction } from '@deriv/shared'; +import { WS, validPassword } from '@deriv/shared'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import CFDPasswordModal from '../cfd-password-modal'; @@ -62,7 +62,7 @@ describe('', () => { is_cfd_success_dialog_enabled: false, is_dxtrade_allowed: false, is_pre_appstore: false, - jurisdiction_selected_shortcode: Jurisdiction.SVG, + jurisdiction_selected_shortcode: 'svg', platform: 'mt5', has_cfd_error: false, landing_companies: {}, @@ -220,7 +220,7 @@ describe('', () => { account_type: { category: 'real', type: 'financial' }, is_eu: true, is_fully_authenticated: false, - jurisdiction_selected_shortcode: Jurisdiction.BVI, + jurisdiction_selected_shortcode: 'bvi', }; render( diff --git a/packages/cfd/src/Containers/derivx-trade-modal.tsx b/packages/cfd/src/Containers/derivx-trade-modal.tsx index 58d0f974fc21..328b02b7bf20 100644 --- a/packages/cfd/src/Containers/derivx-trade-modal.tsx +++ b/packages/cfd/src/Containers/derivx-trade-modal.tsx @@ -9,7 +9,6 @@ import { getCFDAccountKey, getPlatformSettings, isMobile, - Jurisdiction, } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { CFDAccountCopy } from '../Components/cfd-account-copy'; @@ -139,7 +138,7 @@ const DerivXTradeModal = ({ if ( (mt5_trade_account.account_type === 'demo' && mt5_trade_account.market_type === 'financial' && - mt5_trade_account.landing_company_short === Jurisdiction.LABUAN) || + mt5_trade_account.landing_company_short === 'labuan') || mt5_trade_account.account_type === 'real' ) { return mt5_trade_account.landing_company_short; diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx index fdd02e9f369b..577fc681776e 100644 --- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx +++ b/packages/cfd/src/Containers/dmt5-trade-modal.tsx @@ -10,7 +10,6 @@ import { getPlatformSettings, getUrlBase, getCFDAccountKey, - Jurisdiction, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { CFDAccountCopy } from '../Components/cfd-account-copy'; @@ -100,7 +99,7 @@ const DMT5TradeModal = ({ if ( (mt5_trade_account.account_type === 'demo' && mt5_trade_account.market_type === 'financial' && - mt5_trade_account.landing_company_short === Jurisdiction.LABUAN) || + mt5_trade_account.landing_company_short === 'labuan') || mt5_trade_account.account_type === 'real' ) { return mt5_trade_account.landing_company_short; 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 93a11f716c3e..5b821e002d3c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -22,7 +22,7 @@ const JurisdictionModalContent = ({ : financial_available_accounts?.some(account => account.shortcode === type_of_card); const disableCard = (type_of_card: string) => { - if (is_virtual && type_of_card !== Jurisdiction.SVG) { + if (is_virtual && type_of_card !== 'svg') { return true; } return account_type === 'synthetic' 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 96b704d67c39..4bcbcd2d61a4 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 @@ -36,7 +36,7 @@ const FooterNote = ({ ) : ( ); - } else if (jurisdiction_selected_shortcode === Jurisdiction.BVI) { + } else if (jurisdiction_selected_shortcode === 'bvi') { return ( available_account.market_type === 'financial' && (show_eu_related_content - ? available_account.shortcode === Jurisdiction.MALTA_INVEST - : available_account.shortcode !== Jurisdiction.MALTA_INVEST) + ? available_account.shortcode === 'maltainvest' + : available_account.shortcode !== 'maltainvest') ); const synthetic_available_accounts = trading_platform_available_accounts.filter( available_account => available_account.market_type === 'gaming' && (show_eu_related_content - ? available_account.shortcode === Jurisdiction.MALTA_INVEST - : available_account.shortcode !== Jurisdiction.MALTA_INVEST) + ? available_account.shortcode === 'maltainvest' + : available_account.shortcode !== 'maltainvest') ); const modal_title = show_eu_related_content diff --git a/packages/cfd/src/Containers/mt5-compare-table-content.tsx b/packages/cfd/src/Containers/mt5-compare-table-content.tsx index 397ae3c77ea8..4521e7889b41 100644 --- a/packages/cfd/src/Containers/mt5-compare-table-content.tsx +++ b/packages/cfd/src/Containers/mt5-compare-table-content.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { Table, Button, Text, Popover } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { isDesktop, WS, getAuthenticationStatusInfo, CFD_PLATFORMS, ContentFlag, Jurisdiction } from '@deriv/shared'; +import { isDesktop, WS, getAuthenticationStatusInfo, CFD_PLATFORMS, ContentFlag } from '@deriv/shared'; import { connect } from '../Stores/connect'; import RootStore from '../Stores/index'; import { @@ -303,13 +303,13 @@ const DMT5CompareModalContent = ({ case 'synthetic_svg': case 'financial_svg': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode(Jurisdiction.SVG); + setJurisdictionSelectedShortcode('svg'); openPasswordModal(type_of_account); break; case 'synthetic_bvi': case 'financial_bvi': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode(Jurisdiction.BVI); + setJurisdictionSelectedShortcode('bvi'); if ( poi_acknowledged_for_bvi_labuan && !poi_or_poa_not_submitted && @@ -325,7 +325,7 @@ const DMT5CompareModalContent = ({ case 'synthetic_vanuatu': case 'financial_vanuatu': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode(Jurisdiction.VANUATU); + setJurisdictionSelectedShortcode('vanuatu'); if ( poi_acknowledged_for_vanuatu_maltainvest && !poi_or_poa_not_submitted && @@ -340,7 +340,7 @@ const DMT5CompareModalContent = ({ break; case 'financial_labuan': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode(Jurisdiction.LABUAN); + setJurisdictionSelectedShortcode('labuan'); if (poi_acknowledged_for_bvi_labuan && poa_acknowledged && has_submitted_personal_details) { openPasswordModal(type_of_account); } else { @@ -349,7 +349,7 @@ const DMT5CompareModalContent = ({ break; case 'financial_maltainvest': setAppstorePlatform(CFD_PLATFORMS.MT5); - setJurisdictionSelectedShortcode(Jurisdiction.MALTA_INVEST); + setJurisdictionSelectedShortcode('maltainvest'); if ((poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged) || is_demo_tab) { openPasswordModal(type_of_account); } else { @@ -434,9 +434,9 @@ const DMT5CompareModalContent = ({ return false; } else if (item.action === 'derivx') { return false; - } else if (type === Jurisdiction.BVI && should_restrict_bvi_account_creation && poa_pending) { + } else if (type === 'bvi' && should_restrict_bvi_account_creation && poa_pending) { return true; - } else if (type === Jurisdiction.VANUATU && should_restrict_vanuatu_account_creation && poa_pending) { + } else if (type === 'vanuatu' && should_restrict_vanuatu_account_creation && poa_pending) { return true; } diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js index 121023b0baf6..29b87f03098a 100644 --- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js +++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js @@ -135,8 +135,8 @@ export default class CFDStore extends BaseStore { this.root_store.client.mt5_login_list .filter(acc => show_eu_related_content - ? acc.landing_company_short === Jurisdiction.MALTA_INVEST - : acc.landing_company_short !== Jurisdiction.MALTA_INVEST + ? acc.landing_company_short === 'maltainvest' + : acc.landing_company_short !== 'maltainvest' ) .forEach(account => { // e.g. mt5.real.financial_stp @@ -233,8 +233,8 @@ export default class CFDStore extends BaseStore { this.toggleJurisdictionModal(); } else { if (this.root_store.traders_hub.show_eu_related_content) { - this.setJurisdictionSelectedShortcode(Jurisdiction.MALTA_INVEST); - } else this.setJurisdictionSelectedShortcode(Jurisdiction.SVG); + this.setJurisdictionSelectedShortcode('maltainvest'); + } else this.setJurisdictionSelectedShortcode('svg'); this.demoCFDSignup(); } } @@ -649,9 +649,9 @@ export default class CFDStore extends BaseStore { return ( financial_available_accounts.length === 1 && - financial_available_accounts.every(acc => acc.shortcode === Jurisdiction.SVG) && + financial_available_accounts.every(acc => acc.shortcode === 'svg') && synthetic_available_accounts.length === 1 && - synthetic_available_accounts.every(acc => acc.shortcode === Jurisdiction.SVG) + synthetic_available_accounts.every(acc => acc.shortcode === 'svg') ); } } diff --git a/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx b/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx index c8553e8e4886..9f556ea86c34 100644 --- a/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx +++ b/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Dialog } from '@deriv/components'; -import { Jurisdiction } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import './deriv-real-account-required-modal.scss'; @@ -18,7 +17,7 @@ const DerivRealAccountRequiredModal = ({ const createAccount = () => { if (is_eu_user) { onClose(); - openRealAccountSignup(Jurisdiction.MALTA_INVEST); + openRealAccountSignup('maltainvest'); } else { onClose(); openRealAccountSignup(); diff --git a/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx b/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx index 86fd4b64b28b..ee1e3459ecbd 100644 --- a/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx +++ b/packages/core/src/App/Components/Layout/Footer/regulatory-information.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Icon, Modal, Popover, StaticUrl } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; -import { deriv_urls, getLegalEntityName, Jurisdiction } from '@deriv/shared'; +import { deriv_urls, getLegalEntityName } from '@deriv/shared'; import MGALogo from 'Assets/SvgComponents/footer/mga.svg'; const MLTRegulatoryInformation = () => ( @@ -84,7 +84,7 @@ const MFRegulatoryInformation = () => ( />, ]} values={{ - legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), + legal_entity_name: getLegalEntityName('maltainvest'), }} />

@@ -96,7 +96,7 @@ export const RegulatoryInformation = ({ landing_company, is_eu, show_eu_related_ if (!is_eu || (is_eu && !show_eu_related_content)) return null; const is_mx = landing_company === 'iom'; const is_mlt = landing_company === 'malta'; - const is_mf = landing_company === Jurisdiction.MALTA_INVEST; + const is_mf = landing_company === 'maltainvest'; return (
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index 95ea906f7d7a..f74d781c7731 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text, Button } from '@deriv/components'; import { useOnrampVisible, useAccountTransferVisible } from '@deriv/hooks'; -import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag, Jurisdiction } from '@deriv/shared'; +import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { localize, getAllowedLanguages, getLanguage } from '@deriv/translations'; import NetworkStatus from 'App/Components/Layout/Footer'; @@ -260,9 +260,9 @@ const ToggleMenuDrawer = observer(({ platform_config }) => { const disableRoute = route_path => { if (/financial-assessment/.test(route_path)) { - return is_virtual || (active_account_landing_company === Jurisdiction.MALTA_INVEST && !is_risky_client); + return is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); } else if (/trading-assessment/.test(route_path)) { - return is_virtual || active_account_landing_company !== Jurisdiction.MALTA_INVEST; + return is_virtual || active_account_landing_company !== 'maltainvest'; } else if (/proof-of-address/.test(route_path) || /proof-of-identity/.test(route_path)) { return !should_allow_authentication; } else if (/proof-of-ownership/.test(route_path)) { diff --git a/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx b/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx index 6376b5e7ac27..ffc6abc60afb 100644 --- a/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx +++ b/packages/core/src/App/Containers/AccountSwitcher/account-switcher-account-list.jsx @@ -1,14 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import { Icon, Money, Button, Text } from '@deriv/components'; -import { - formatMoney, - getCurrencyName, - getCFDAccountDisplay, - getCurrencyDisplayCode, - isBot, - Jurisdiction, -} from '@deriv/shared'; +import { formatMoney, getCurrencyName, getCFDAccountDisplay, getCurrencyDisplayCode, isBot } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; const AccountList = ({ @@ -185,7 +178,7 @@ const AccountDisplay = ({ {server?.server_info?.geolocation && should_show_server_name && market_type === 'synthetic' && - shortcode === Jurisdiction.SVG && ( + shortcode === 'svg' && ( {getServerName(server)} @@ -201,7 +194,7 @@ const AccountDisplay = ({ {server?.server_info?.geolocation && should_show_server_name && market_type === 'synthetic' && - shortcode === Jurisdiction.SVG && ( + shortcode === 'svg' && ( { account => !account.is_virtual && account.loginid.startsWith('CR') ); setFilteredRealAccounts(real_accounts); - const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === Jurisdiction.SVG); + const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === 'svg'); setFilteredRemainingRealAccounts(remaining_real_accounts); } else if (props.is_eu) { const real_accounts = getSortedAccountList(props.account_list, props.accounts).filter( account => !account.is_virtual && account.loginid.startsWith('MF') ); setFilteredRealAccounts(real_accounts); - const remaining_real_accounts = getRemainingRealAccounts().filter( - account => account === Jurisdiction.MALTA_INVEST - ); + const remaining_real_accounts = getRemainingRealAccounts().filter(account => account === 'maltainvest'); setFilteredRemainingRealAccounts(remaining_real_accounts); } }, []); @@ -225,11 +222,7 @@ const AccountSwitcher = props => { const openMt5DemoAccount = account_type => { if (props.show_eu_related_content && !props.has_maltainvest_account && props.standpoint.iom) { closeAccountsDialog(); - props.openAccountNeededModal( - Jurisdiction.MALTA_INVEST, - localize('Deriv Multipliers'), - localize('demo CFDs') - ); + props.openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); return; } sessionStorage.setItem('open_cfd_account_type', `demo.${CFD_PLATFORMS.MT5}.${account_type}`); @@ -380,7 +373,7 @@ const AccountSwitcher = props => { const low_risk_non_eu = props.content_flag === ContentFlag.LOW_RISK_CR_NON_EU; if (low_risk_non_eu) { return getSortedCFDList(props.mt5_login_list).filter( - account => !isDemo(account) && account.landing_company_short !== Jurisdiction.MALTA_INVEST + account => !isDemo(account) && account.landing_company_short !== 'maltainvest' ); } return getSortedCFDList(props.mt5_login_list).filter(account => !isDemo(account)); @@ -566,7 +559,7 @@ const AccountSwitcher = props => { const checkMultipleSvgAcc = () => { const all_svg_acc = []; getRealMT5().map(acc => { - if (acc.landing_company_short === Jurisdiction.SVG && acc.market_type === 'synthetic') { + if (acc.landing_company_short === 'svg' && acc.market_type === 'synthetic') { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -685,7 +678,7 @@ const AccountSwitcher = props => { platform={CFD_PLATFORMS.MT5} shortcode={ account.market_type === 'financial' && - account.landing_company_short === Jurisdiction.LABUAN && + account.landing_company_short === 'labuan' && account.landing_company_short } /> @@ -1125,7 +1118,7 @@ const AccountSwitcher = props => {
{!has_cr_account && getRemainingRealAccounts() - .filter(account => account === Jurisdiction.SVG) + .filter(account => account === 'svg') .map((account, index) => (
@@ -1197,7 +1190,7 @@ const AccountSwitcher = props => { })}
{getRemainingRealAccounts() - .filter(account => account === Jurisdiction.MALTA_INVEST) + .filter(account => account === 'maltainvest') .map((account, index) => { return (
diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx index 973461ce9e42..29d8f7c47553 100644 --- a/packages/core/src/App/Containers/Modals/app-modals.jsx +++ b/packages/core/src/App/Containers/Modals/app-modals.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; -import { ContentFlag, moduleLoader, Jurisdiction } from '@deriv/shared'; +import { ContentFlag, moduleLoader } from '@deriv/shared'; import { connect } from 'Stores/connect'; import MT5AccountNeededModal from 'App/Components/Elements/Modals/mt5-account-needed-modal.jsx'; import RedirectNoticeModal from 'App/Components/Elements/Modals/RedirectNotice'; @@ -125,7 +125,7 @@ const AppModals = ({ if ( is_logged_in && - active_account_landing_company === Jurisdiction.MALTA_INVEST && + active_account_landing_company === 'maltainvest' && !is_trading_assessment_for_new_user_enabled && is_trading_experience_incomplete && content_flag !== ContentFlag.LOW_RISK_CR_EU && diff --git a/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx b/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx index ddecdb089a2d..f5e42ce4125b 100644 --- a/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx +++ b/packages/core/src/App/Containers/Modals/exit-traders-hub-modal/exit-traders-hub-modal.jsx @@ -4,7 +4,6 @@ import { connect } from 'Stores/connect'; import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, Text, UILoader } from '@deriv/components'; import { isMobile, routes, ContentFlag } from '@deriv/shared'; import { localize } from '@deriv/translations'; -import { Jurisdiction } from '@deriv/shared/src/utils/constants/jurisdiction'; const ExitTradersHubModal = ({ disableApp, @@ -47,7 +46,7 @@ const ExitTradersHubModal = ({ const onClickExitButton = async () => { setIsPreAppStore(false); setIsLoggingIn(true); - const cr_account = active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); + const cr_account = active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); toggleExitTradersHubModal(); if (content_flag === ContentFlag.LOW_RISK_CR_EU || content_flag === ContentFlag.LOW_RISK_CR_NON_EU) { diff --git a/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx b/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx index b7c65e4df42d..51defc4af8fe 100644 --- a/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx +++ b/packages/core/src/App/Containers/Modals/ready-to-deposit-modal/ready-to-deposit-modal.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Dialog } from '@deriv/components'; import { localize } from '@deriv/translations'; import { useStore, observer } from '@deriv/stores'; -import { Jurisdiction } from '@deriv/shared'; import './ready-to-deposit-modal.scss'; const ReadyToDepositModal = observer(() => { @@ -18,7 +17,7 @@ const ReadyToDepositModal = observer(() => { const createAccount = () => { onClose(); - return is_eu_user ? openRealAccountSignup(Jurisdiction.MALTA_INVEST) : openRealAccountSignup(); + return is_eu_user ? openRealAccountSignup('maltainvest') : openRealAccountSignup(); }; return ( 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 a934e3a701ee..dc473cb2881f 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js @@ -10,18 +10,18 @@ import { proofOfIdentityConfig, ProofOfIdentityFormOnSignup, } from '@deriv/account'; -import { Jurisdiction } from '@deriv/shared'; + import AddressDetails from './address-details.jsx'; import CurrencySelector from './currency-selector.jsx'; -const isMaltaAccount = ({ real_account_signup_target }) => real_account_signup_target === Jurisdiction.MALTA_INVEST; +const isMaltaAccount = ({ real_account_signup_target }) => real_account_signup_target === 'maltainvest'; const shouldShowPersonalAndAddressDetailsAndCurrency = ({ real_account_signup_target }) => real_account_signup_target !== 'samoa'; const shouldShowIdentityInformation = ({ 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 === Jurisdiction.MALTA_INVEST; + const maltainvest = real_account_signup_target === 'maltainvest'; return !maltainvest && citizen && country?.identity?.services?.idv?.is_country_supported; }; diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx index 04d1d53200cc..6136bffcd12f 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import fromEntries from 'object.fromentries'; import React from 'react'; import { DesktopWrapper, MobileWrapper, FormProgress, Wizard, Text } from '@deriv/components'; -import { toMoment, getLocation, makeCancellablePromise, WS, Jurisdiction } from '@deriv/shared'; +import { toMoment, getLocation, makeCancellablePromise, WS } from '@deriv/shared'; import { Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import LoadingModal from './real-account-signup-loader.jsx'; @@ -255,7 +255,7 @@ const AccountWizard = props => { submitForm(payload) .then(response => { props.setIsRiskWarningVisible(false); - if (props.real_account_signup_target === Jurisdiction.MALTA_INVEST) { + if (props.real_account_signup_target === 'maltainvest') { props.onFinishSuccess(response.new_account_maltainvest.currency.toLowerCase()); } else if (props.real_account_signup_target === 'samoa') { props.onOpenWelcomeModal(response.new_account_samoa.currency.toLowerCase()); diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js b/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js index 07d46bcdaaee..2698426b6650 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/constants.js @@ -1,5 +1,4 @@ import { localize } from '@deriv/translations'; -import { Jurisdiction } from '@deriv/shared'; /** * Experian result is defined by client's information validity. @@ -35,7 +34,7 @@ export const getAccountTitle = (landing_company_shortcode, { account_residence = } switch (landing_company_shortcode) { - case Jurisdiction.SVG: + case 'svg': return localize('Options & Multipliers'); case 'iom': if (country_standpoint.is_united_kingdom) { @@ -51,7 +50,7 @@ export const getAccountTitle = (landing_company_shortcode, { account_residence = return localize('Options'); } return localize('Derived'); - case Jurisdiction.MALTA_INVEST: + case 'maltainvest': return localize('Multipliers'); default: return localize('Deriv'); @@ -82,7 +81,7 @@ export const getExperianResult = status => { return EXPERIAN.DANGER; }; - if (landing_company_shortcode === Jurisdiction.SVG || is_isle_of_man_residence || is_belgium_residence) + if (landing_company_shortcode === 'svg' || is_isle_of_man_residence || is_belgium_residence) return EXPERIAN.SUCCESS; if (landing_company_shortcode === 'iom') return getIOMStatus({ is_fully_authenticated, is_age_verified }); diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx index 6d6a8caa7d83..2e2d0a01de9d 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-buttons.jsx @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Button } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { Jurisdiction } from '@deriv/shared'; import { EXPERIAN } from './constants'; const getDismissButton = ({ status, landing_company_shortcode, closeModal, switchToVirtual }) => { @@ -67,7 +66,7 @@ const getActionButton = ({ label: localize('Deposit'), action: closeModalAndOpenCashier, }; - case Jurisdiction.MALTA_INVEST: + case 'maltainvest': if (is_fully_authenticated) { return { label: localize('Deposit'), @@ -78,7 +77,7 @@ const getActionButton = ({ label: localize('Submit proof'), action: closeModalAndOpenPOI, }; - case Jurisdiction.SVG: + case 'svg': case 'malta': default: return { diff --git a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx index dec92b7fa87f..db56d3fbad5b 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/helpers/dialog-message.jsx @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; -import { Jurisdiction } from '@deriv/shared'; import { EXPERIAN } from './constants'; /** @@ -17,7 +16,7 @@ export const DialogMessage = ({ status = EXPERIAN.SUCCESS, }) => { let message = ''; - if (landing_company_shortcode === Jurisdiction.MALTA_INVEST) { + if (landing_company_shortcode === 'maltainvest') { if (is_fully_authenticated) { message = [ , diff --git a/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js b/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js index b28366db3dbf..68ec96526756 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/proof-of-address-form.js @@ -1,10 +1,10 @@ import { localize } from '@deriv/translations'; import { ProofOfAddressContainer } from '@deriv/account'; -import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; const proof_of_address_config = { poi_state: { - supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], + supported_in: ['maltainvest', 'malta', 'svg', 'iom'], default_value: '', rules: [], }, diff --git a/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js b/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js index 66d09da7900c..51d7ca43fe00 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js +++ b/packages/core/src/App/Containers/RealAccountSignup/proof-of-identity-form.js @@ -1,10 +1,10 @@ import { localize } from '@deriv/translations'; -import { generateValidationFunction, getDefaultFields, Jurisdiction } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields } from '@deriv/shared'; import ProofOfIdentityForm from './proof-of-identity.jsx'; const proof_of_identity_config = { poi_state: { - supported_in: [Jurisdiction.MALTA_INVEST, 'malta', Jurisdiction.SVG, 'iom'], + supported_in: ['maltainvest', 'malta', 'svg', 'iom'], default_value: '', rules: [], }, diff --git a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx index eac393e33d66..acf73bfab732 100644 --- a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx +++ b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { Button, Text, Modal, DesktopWrapper, MobileDialog, MobileWrapper } from '@deriv/components'; -import { routes, Jurisdiction } from '@deriv/shared'; +import { routes } from '@deriv/shared'; import { RiskToleranceWarningModal, TestWarningModal } from '@deriv/account'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; @@ -38,7 +38,7 @@ const WizardHeading = ({ is_pre_appstore, real_account_signup_target, }) => { - const maltainvest_signup = real_account_signup_target === Jurisdiction.MALTA_INVEST; + const maltainvest_signup = real_account_signup_target === 'maltainvest'; const iom_signup = real_account_signup_target === 'iom'; const deposit_cash_signup = real_account_signup_target === 'deposit_cash'; @@ -74,7 +74,7 @@ const WizardHeading = ({ return ; } return ; - case Jurisdiction.MALTA_INVEST: + case 'maltainvest': if ( country_standpoint.is_united_kingdom || country_standpoint.is_france || @@ -425,7 +425,7 @@ const RealAccountSignup = ({ active_modal_index_no = modal_pages_indices.add_or_manage_account; } else { active_modal_index_no = - !currency && real_account_signup_target !== Jurisdiction.MALTA_INVEST + !currency && real_account_signup_target !== 'maltainvest' ? modal_pages_indices.set_currency : modal_pages_indices.account_wizard; } @@ -449,7 +449,7 @@ const RealAccountSignup = ({ try { setShouldShowAppropriatenessWarningModal(false); const response = await realAccountSignup({ ...real_account_form_data, accept_risk: 1 }); - if (real_account_signup_target === Jurisdiction.MALTA_INVEST) { + if (real_account_signup_target === 'maltainvest') { showStatusDialog(response.new_account_maltainvest.currency.toLowerCase()); } } catch (sign_up_error) { diff --git a/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx b/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx index eb45a657a697..e82c713789ee 100644 --- a/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx +++ b/packages/core/src/App/Containers/WelcomeModal/welcome-modal.jsx @@ -1,6 +1,5 @@ import React from 'react'; import { connect } from 'Stores/connect'; -import { Jurisdiction } from '@deriv/shared'; import WelcomeModal1 from './welcome-modal-1.jsx'; import WelcomeModal2 from './welcome-modal-2.jsx'; @@ -8,7 +7,7 @@ const WelcomeModal = ({ is_eu, landing_companies, residence }) => { const is_excluded_from_cr_onboarding = ['au', 'sg', 'no'].includes(residence); const shortcode = landing_companies?.financial_company?.shortcode || landing_companies?.gaming_company?.shortcode; - if ((shortcode === Jurisdiction.SVG && !is_excluded_from_cr_onboarding) || is_eu) { + if ((shortcode === 'svg' && !is_excluded_from_cr_onboarding) || is_eu) { return ; } diff --git a/packages/core/src/App/Containers/app-notification-messages.jsx b/packages/core/src/App/Containers/app-notification-messages.jsx index 1a0703934ef0..f6561918d753 100644 --- a/packages/core/src/App/Containers/app-notification-messages.jsx +++ b/packages/core/src/App/Containers/app-notification-messages.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; -import { isMobile, getPathname, getPlatformSettings, routes, Jurisdiction } from '@deriv/shared'; +import { isMobile, getPathname, getPlatformSettings, routes } from '@deriv/shared'; import { connect } from 'Stores/connect'; import { excluded_notifications } from '../../Stores/Helpers/client-notifications'; import Notification, { @@ -149,7 +149,7 @@ const AppNotificationMessages = ({ const notifications_limit = isMobile() ? max_display_notifications_mobile : max_display_notifications; //TODO (yauheni-kryzhyk): showing pop-up only for specific messages. the rest of notifications are hidden. this logic should be changed in the upcoming new pop-up notifications implementation const filtered_excluded_notifications = notifications.filter(message => - message.key.includes(Jurisdiction.SVG) || message.key.includes('p2p_daily_limit_increase') + message.key.includes('svg') || message.key.includes('p2p_daily_limit_increase') ? message : excluded_notifications.includes(message.key) ); diff --git a/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx b/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx index d95dd0dda02d..d3e985a301c7 100644 --- a/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx +++ b/packages/core/src/Modules/ComplaintsPolicy/Components/complaints-policy-content.jsx @@ -1,14 +1,14 @@ import React from 'react'; import { localize, Localize } from '@deriv/translations'; -import { getLegalEntityName, Jurisdiction } from '@deriv/shared'; +import { getLegalEntityName } from '@deriv/shared'; import { connect } from 'Stores/connect'; import 'Sass/app/modules/complaints-policy.scss'; const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { // * mt5_login_list returns these: // landing_company_short: "svg" | "malta" | "maltainvest" | "vanuatu" | "labuan" | "bvi" - const has_vanuatu = mt5_login_list.some(item => item.landing_company_short === Jurisdiction.VANUATU); - const has_labuan = mt5_login_list.some(item => item.landing_company_short === Jurisdiction.LABUAN); + const has_vanuatu = mt5_login_list.some(item => item.landing_company_short === 'vanuatu'); + const has_labuan = mt5_login_list.some(item => item.landing_company_short === 'labuan'); switch (landing_company_shortcode) { case 'iom': @@ -21,11 +21,11 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { }} /> ); - case Jurisdiction.MALTA_INVEST: + case 'maltainvest': return localize( 'This complaints policy, which may change from time to time, applies to your account registered with {{legal_entity_name}}.', { - legal_entity_name: getLegalEntityName(Jurisdiction.MALTA_INVEST), + legal_entity_name: getLegalEntityName('maltainvest'), } ); case 'malta': @@ -43,7 +43,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}}, {{legal_entity_name_fx}}, and {{legal_entity_name_v}}.', { - legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), + legal_entity_name_svg: getLegalEntityName('svg'), legal_entity_name_fx: getLegalEntityName('fx'), legal_entity_name_v: getLegalEntityName('v'), } @@ -52,7 +52,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}} and {{legal_entity_name_v}}.', { - legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), + legal_entity_name_svg: getLegalEntityName('svg'), legal_entity_name_v: getLegalEntityName('v'), } ); @@ -60,7 +60,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}} and {{legal_entity_name_fx}}.', { - legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), + legal_entity_name_svg: getLegalEntityName('svg'), legal_entity_name_fx: getLegalEntityName('fx'), } ); @@ -68,7 +68,7 @@ const getIntroductionText = (landing_company_shortcode, mt5_login_list) => { return localize( 'This complaints policy, which may change from time to time, applies to your account(s) registered with {{legal_entity_name_svg}}.', { - legal_entity_name_svg: getLegalEntityName(Jurisdiction.SVG), + legal_entity_name_svg: getLegalEntityName('svg'), } ); } @@ -174,7 +174,7 @@ const getYourDecisionText = (is_uk, landing_company_shortcode) => { ]} /> ); - if (landing_company_shortcode === Jurisdiction.MALTA_INVEST) { + if (landing_company_shortcode === 'maltainvest') { texts.push( acc.landing_company_shortcode === Jurisdiction.MALTA_INVEST); + return this.active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest'); } get has_malta_account() { @@ -516,7 +515,7 @@ export default class ClientStore extends BaseStore { get first_switchable_real_loginid() { const result = this.active_accounts.find( - acc => acc.is_virtual === 0 && acc.landing_company_shortcode === Jurisdiction.SVG + acc => acc.is_virtual === 0 && acc.landing_company_shortcode === 'svg' ); return result.loginid || undefined; } @@ -554,8 +553,7 @@ export default class ClientStore extends BaseStore { ) { return this.current_landing_company.legal_allowed_currencies; } - const target = - this.root_store.ui.real_account_signup_target === Jurisdiction.MALTA_INVEST ? 'financial' : 'gaming'; + const target = this.root_store.ui.real_account_signup_target === 'maltainvest' ? 'financial' : 'gaming'; if (this.landing_companies[`${target}_company`]) { return this.landing_companies[`${target}_company`].legal_allowed_currencies; @@ -842,13 +840,13 @@ export default class ClientStore extends BaseStore { get should_restrict_bvi_account_creation() { return !!this.mt5_login_list.filter( - item => item?.landing_company_short === Jurisdiction.BVI && item?.status === 'poa_failed' + item => item?.landing_company_short === 'bvi' && item?.status === 'poa_failed' ).length; } get should_restrict_vanuatu_account_creation() { return !!this.mt5_login_list.filter( - item => item?.landing_company_short === Jurisdiction.VANUATU && item?.status === 'poa_failed' + item => item?.landing_company_short === 'vanuatu' && item?.status === 'poa_failed' ).length; } @@ -862,11 +860,11 @@ export default class ClientStore extends BaseStore { const financial_shortcode = financial_company?.shortcode; const gaming_shortcode = gaming_company?.shortcode; const mt_gaming_shortcode = mt_gaming_company?.financial.shortcode || mt_gaming_company?.swap_free.shortcode; - const is_current_mf = this.landing_company_shortcode === Jurisdiction.MALTA_INVEST; + const is_current_mf = this.landing_company_shortcode === 'maltainvest'; return ( is_current_mf || //is_currently logged in mf account via trdaershub (financial_shortcode || gaming_shortcode || mt_gaming_shortcode - ? (eu_shortcode_regex.test(financial_shortcode) && gaming_shortcode !== Jurisdiction.SVG) || + ? (eu_shortcode_regex.test(financial_shortcode) && gaming_shortcode !== 'svg') || eu_shortcode_regex.test(gaming_shortcode) : eu_excluded_regex.test(this.residence)) ); @@ -1017,8 +1015,8 @@ export default class ClientStore extends BaseStore { this.trading_platform_available_accounts.some( account => (market_type === 'synthetic' ? 'gaming' : 'financial') === account.market_type && - account.shortcode === Jurisdiction.SVG - ) && existing_demo_accounts.every(account => !(account.landing_company_short === Jurisdiction.SVG)) + account.shortcode === 'svg' + ) && existing_demo_accounts.every(account => !(account.landing_company_short === 'svg')) ); } @@ -1030,7 +1028,7 @@ export default class ClientStore extends BaseStore { .filter( account => (market_type === 'synthetic' ? 'gaming' : 'financial') === account.market_type && - account.shortcode !== Jurisdiction.MALTA_INVEST + account.shortcode !== 'maltainvest' ) .map(account => account.shortcode); @@ -1074,7 +1072,7 @@ export default class ClientStore extends BaseStore { isBotAllowed = () => { // Stop showing Bot, DBot, DSmartTrader for logged out EU IPs if (!this.is_logged_in && this.is_eu_country) return false; - const is_mf = this.landing_company_shortcode === Jurisdiction.MALTA_INVEST; + const is_mf = this.landing_company_shortcode === 'maltainvest'; return this.is_virtual ? this.is_eu_or_multipliers_only : !is_mf && !this.is_options_blocked; }; @@ -1133,9 +1131,9 @@ export default class ClientStore extends BaseStore { landing_company !== this.accounts[this.loginid].landing_company_shortcode && upgradeable_landing_companies.indexOf(landing_company) !== -1 ); - can_upgrade_to = canUpgrade(Jurisdiction.SVG, 'iom', 'malta', Jurisdiction.MALTA_INVEST); + can_upgrade_to = canUpgrade('svg', 'iom', 'malta', 'maltainvest'); if (can_upgrade_to) { - type = can_upgrade_to === Jurisdiction.MALTA_INVEST ? 'financial' : 'real'; + type = can_upgrade_to === 'maltainvest' ? 'financial' : 'real'; } } @@ -1351,7 +1349,7 @@ export default class ClientStore extends BaseStore { async realAccountSignup(form_values) { const DEFAULT_CRYPTO_ACCOUNT_CURRENCY = 'BTC'; - const is_maltainvest_account = this.root_store.ui.real_account_signup_target === Jurisdiction.MALTA_INVEST; + const is_maltainvest_account = this.root_store.ui.real_account_signup_target === 'maltainvest'; const is_samoa_account = this.root_store.ui.real_account_signup_target === 'samoa'; let currency = ''; form_values.residence = this.residence; @@ -1647,7 +1645,7 @@ export default class ClientStore extends BaseStore { if (!this.is_virtual) { this.setPrevRealAccountLoginid(this.loginid); } - const no_cr_account = this.active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); + const no_cr_account = this.active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); if (!no_cr_account && this.is_low_risk) { this.switchAccount(this.virtual_account_loginid); @@ -2555,24 +2553,21 @@ export default class ClientStore extends BaseStore { // This is a conditional check for countries like Australia/Norway which fulfil one of these following conditions. const restricted_countries = - financial_company?.shortcode === Jurisdiction.SVG || - (gaming_company?.shortcode === Jurisdiction.SVG && - financial_company?.shortcode !== Jurisdiction.MALTA_INVEST); + financial_company?.shortcode === 'svg' || + (gaming_company?.shortcode === 'svg' && financial_company?.shortcode !== 'maltainvest'); - const high_risk_landing_company = - financial_company?.shortcode === Jurisdiction.SVG && gaming_company?.shortcode === Jurisdiction.SVG; + const high_risk_landing_company = financial_company?.shortcode === 'svg' && gaming_company?.shortcode === 'svg'; return high_risk_landing_company || this.account_status.risk_classification === 'high' || restricted_countries; } get is_low_risk() { const { gaming_company, financial_company } = this.landing_companies; const low_risk_landing_company = - financial_company?.shortcode === Jurisdiction.MALTA_INVEST && - gaming_company?.shortcode === Jurisdiction.SVG; + financial_company?.shortcode === 'maltainvest' && gaming_company?.shortcode === 'svg'; return ( low_risk_landing_company || - (this.upgradeable_landing_companies?.includes(Jurisdiction.SVG) && - this.upgradeable_landing_companies?.includes(Jurisdiction.MALTA_INVEST)) + (this.upgradeable_landing_companies?.includes('svg') && + this.upgradeable_landing_companies?.includes('maltainvest')) ); } diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js index 57181614e998..3627f50835c8 100644 --- a/packages/core/src/Stores/notification-store.js +++ b/packages/core/src/Stores/notification-store.js @@ -16,7 +16,6 @@ import { platform_name, routes, unique, - Jurisdiction, } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { BinaryLink } from 'App/Components/Routes'; @@ -182,7 +181,7 @@ export default class NotificationStore extends BaseStore { this.notification_messages = [...this.notification_messages, notification].sort(sortFn); if ( - (notification.key && notification.key.includes(Jurisdiction.SVG)) || + (notification.key && notification.key.includes('svg')) || notification.key === 'p2p_daily_limit_increase' || (excluded_notifications && !excluded_notifications.includes(notification.key)) ) { @@ -302,9 +301,9 @@ export default class NotificationStore extends BaseStore { const { max_daily_buy, max_daily_sell } = upgradable_daily_limits || {}; const { is_10k_withdrawal_limit_reached } = this.root_store.modules.cashier.withdraw; const { current_language, selected_contract_type } = this.root_store.common; - const malta_account = landing_company_shortcode === Jurisdiction.MALTA_INVEST; + const malta_account = landing_company_shortcode === 'maltainvest'; const virtual_account = landing_company_shortcode === 'virtual'; - const cr_account = landing_company_shortcode === Jurisdiction.SVG; + const cr_account = landing_company_shortcode === 'svg'; const is_website_up = website_status.site_status === 'up'; const has_trustpilot = LocalStore.getObject('notification_messages')[loginid]?.includes( this.client_notifications.trustpilot.key @@ -1501,7 +1500,7 @@ export default class NotificationStore extends BaseStore { updateNotifications(notifications_array) { this.notifications = notifications_array.filter(message => - (message.key && message.key.includes(Jurisdiction.SVG)) || message.key === 'p2p_daily_limit_increase' + (message.key && message.key.includes('svg')) || message.key === 'p2p_daily_limit_increase' ? message : excluded_notifications && !excluded_notifications.includes(message.key) ); diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index 8d8f155db077..f8c0891fbc3c 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -1,12 +1,5 @@ import { action, makeObservable, observable, reaction, computed, runInAction } from 'mobx'; -import { - getCFDAvailableAccount, - CFD_PLATFORMS, - ContentFlag, - formatMoney, - getAppstorePlatforms, - Jurisdiction, -} from '@deriv/shared'; +import { getCFDAvailableAccount, CFD_PLATFORMS, ContentFlag, formatMoney, getAppstorePlatforms } from '@deriv/shared'; import BaseStore from './base-store'; import { localize } from '@deriv/translations'; import { isEuCountry } from '_common/utility'; @@ -201,7 +194,7 @@ export default class TradersHubStore extends BaseStore { get no_CR_account() { const { active_accounts } = this.root_store.client; - const result = active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.SVG); + const result = active_accounts.some(acc => acc.landing_company_shortcode === 'svg'); return !result && this.selected_region === 'Non-EU'; } @@ -257,8 +250,8 @@ export default class TradersHubStore extends BaseStore { const { financial_company, gaming_company } = this.root_store.client.landing_companies; return ( this.content_flag === ContentFlag.CR_DEMO && - financial_company?.shortcode === Jurisdiction.MALTA_INVEST && - gaming_company?.shortcode === Jurisdiction.SVG + financial_company?.shortcode === 'maltainvest' && + gaming_company?.shortcode === 'svg' ); } @@ -267,23 +260,21 @@ export default class TradersHubStore extends BaseStore { const { financial_company, gaming_company } = landing_companies; //this is a conditional check for countries like Australia/Norway which fulfiles one of these following conditions - const restricted_countries = - financial_company?.shortcode === Jurisdiction.SVG || gaming_company?.shortcode === Jurisdiction.SVG; + const restricted_countries = financial_company?.shortcode === 'svg' || gaming_company?.shortcode === 'svg'; if (!is_logged_in) return ''; - if (!gaming_company?.shortcode && financial_company?.shortcode === Jurisdiction.MALTA_INVEST) { + if (!gaming_company?.shortcode && financial_company?.shortcode === 'maltainvest') { if (this.is_demo) return ContentFlag.EU_DEMO; return ContentFlag.EU_REAL; } else if ( - financial_company?.shortcode === Jurisdiction.MALTA_INVEST && - gaming_company?.shortcode === Jurisdiction.SVG && + financial_company?.shortcode === 'maltainvest' && + gaming_company?.shortcode === 'svg' && this.is_real ) { if (this.is_eu_user) return ContentFlag.LOW_RISK_CR_EU; return ContentFlag.LOW_RISK_CR_NON_EU; } else if ( - ((financial_company?.shortcode === Jurisdiction.SVG && gaming_company?.shortcode === Jurisdiction.SVG) || - restricted_countries) && + ((financial_company?.shortcode === 'svg' && gaming_company?.shortcode === 'svg') || restricted_countries) && this.is_real ) { return ContentFlag.HIGH_RISK_CR; @@ -339,10 +330,7 @@ export default class TradersHubStore extends BaseStore { ContentFlag.CR_DEMO, ].includes(this.content_flag); const { active_accounts } = this.root_store.client; - return ( - is_low_risk_cr_client && - active_accounts.some(acc => acc.landing_company_shortcode === Jurisdiction.MALTA_INVEST) - ); + return is_low_risk_cr_client && active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest'); } toggleRegulatorsCompareModal() { @@ -398,7 +386,7 @@ export default class TradersHubStore extends BaseStore { get financial_restricted_countries() { const { financial_company, gaming_company } = this.root_store.client.landing_companies; - return gaming_company?.shortcode === Jurisdiction.SVG && !financial_company; + return gaming_company?.shortcode === 'svg' && !financial_company; } getAvailableMt5Accounts() { @@ -446,7 +434,7 @@ export default class TradersHubStore extends BaseStore { const selected_account_type = this.selected_account_type; const existing_accounts = current_list_keys .filter(key => { - const maltainvest_account = current_list[key].landing_company_short === Jurisdiction.MALTA_INVEST; + const maltainvest_account = current_list[key].landing_company_short === 'maltainvest'; if (platform === CFD_PLATFORMS.MT5 && !this.is_eu_user && !maltainvest_account) { return key.startsWith(`${platform}.${selected_account_type}.${market_type}`); @@ -520,7 +508,7 @@ export default class TradersHubStore extends BaseStore { const { openAccountNeededModal } = ui; const { is_eu } = client; if (is_eu && !has_maltainvest_account && standpoint?.iom) { - openAccountNeededModal(Jurisdiction.MALTA_INVEST, localize('Deriv Multipliers'), localize('demo CFDs')); + openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); return; } createCFDAccount({ ...account_type, platform }); @@ -601,7 +589,7 @@ export default class TradersHubStore extends BaseStore { hasMultipleSVGAccounts = () => { const all_svg_acc = []; this.combined_cfd_mt5_accounts.map(acc => { - if (acc.landing_company_short === Jurisdiction.SVG && acc.market_type === 'synthetic') { + if (acc.landing_company_short === 'svg' && acc.market_type === 'synthetic') { if (all_svg_acc.length) { all_svg_acc.forEach(svg_acc => { if (svg_acc.server !== acc.server) all_svg_acc.push(acc); @@ -619,15 +607,15 @@ export default class TradersHubStore extends BaseStore { if (this.is_real && !this.is_eu_user) { const short_code = account.landing_company_short && - account.landing_company_short !== Jurisdiction.SVG && - account.landing_company_short !== Jurisdiction.BVI + account.landing_company_short !== 'svg' && + account.landing_company_short !== 'bvi' ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) : account.landing_company_short?.toUpperCase(); let region = ''; if (this.hasMultipleSVGAccounts()) { region = - account.market_type !== 'financial' && account.landing_company_short !== Jurisdiction.BVI + account.market_type !== 'financial' && account.landing_company_short !== 'bvi' ? ` - ${this.getServerName(account)}` : ''; } @@ -700,8 +688,8 @@ export default class TradersHubStore extends BaseStore { account => !account.is_virtual && (this.is_eu_user - ? account.landing_company_shortcode === Jurisdiction.MALTA_INVEST - : account.landing_company_shortcode !== Jurisdiction.MALTA_INVEST) + ? account.landing_company_shortcode === 'maltainvest' + : account.landing_company_shortcode !== 'maltainvest') ); if (platform_real_accounts?.length) { this.platform_real_balance = await this.getTotalBalance( @@ -722,8 +710,8 @@ export default class TradersHubStore extends BaseStore { account => account.account_type === 'real' && (this.is_eu_user - ? account.landing_company_short === Jurisdiction.MALTA_INVEST - : account.landing_company_short !== Jurisdiction.MALTA_INVEST) + ? account.landing_company_short === 'maltainvest' + : account.landing_company_short !== 'maltainvest') ); if (cfd_real_accounts?.length) { this.cfd_real_balance = await this.getTotalBalance(cfd_real_accounts, cfd_real_accounts[0]?.currency); diff --git a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx index 401d65a23049..56a4674185e2 100644 --- a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx +++ b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -import { Jurisdiction } from '@deriv/shared'; import { renderHook } from '@testing-library/react-hooks'; import useDepositLocked from '../useDepositLocked'; import useNeedAuthentication from '../useNeedAuthentication'; @@ -19,7 +18,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'demo', @@ -47,7 +46,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'demo', @@ -75,7 +74,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'real', @@ -103,7 +102,7 @@ describe('useDepositLocked', () => { is_financial_account: true, is_financial_information_incomplete: true, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'demo', @@ -131,7 +130,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'real', @@ -159,7 +158,7 @@ describe('useDepositLocked', () => { is_financial_account: true, is_financial_information_incomplete: true, is_trading_experience_incomplete: false, - landing_company_shortcode: Jurisdiction.SVG, + landing_company_shortcode: 'svg', mt5_login_list: [ { account_type: 'demo', @@ -187,7 +186,7 @@ describe('useDepositLocked', () => { is_financial_account: false, is_financial_information_incomplete: false, is_trading_experience_incomplete: true, - landing_company_shortcode: Jurisdiction.MALTA_INVEST, + landing_company_shortcode: 'maltainvest', mt5_login_list: [ { account_type: 'demo', diff --git a/packages/hooks/src/useDepositLocked.ts b/packages/hooks/src/useDepositLocked.ts index 76904763d142..3e6c39ae9610 100644 --- a/packages/hooks/src/useDepositLocked.ts +++ b/packages/hooks/src/useDepositLocked.ts @@ -1,5 +1,4 @@ import { useStore } from '@deriv/stores'; -import { Jurisdiction } from '@deriv/shared'; import useNeedAuthentication from './useNeedAuthentication'; import useNeedFinancialAssessment from './useNeedFinancialAssessment'; import useNeedTNC from './useNeedTNC'; @@ -10,7 +9,7 @@ const useDepositLocked = () => { const is_need_authentication = useNeedAuthentication(); const is_need_tnc = useNeedTNC(); const is_need_financial_assessment = useNeedFinancialAssessment(); - const is_malta_invest = landing_company_shortcode === Jurisdiction.MALTA_INVEST; + const is_malta_invest = landing_company_shortcode === 'maltainvest'; const is_trading_experience_incomplete_or_need_financial_assessment = is_malta_invest ? is_trading_experience_incomplete : is_need_financial_assessment; diff --git a/packages/hooks/src/useHasMaltaInvestAccount.ts b/packages/hooks/src/useHasMaltaInvestAccount.ts index 3ad3010c373b..4251c51b2115 100644 --- a/packages/hooks/src/useHasMaltaInvestAccount.ts +++ b/packages/hooks/src/useHasMaltaInvestAccount.ts @@ -1,11 +1,10 @@ import { useStore } from '@deriv/stores'; -import { Jurisdiction } from '@deriv/shared'; const useHasMaltaInvestAccount = () => { const { client } = useStore(); const { active_accounts } = client; const has_malta_invest_account = active_accounts.some( - account => account.landing_company_shortcode === Jurisdiction.MALTA_INVEST + account => account.landing_company_shortcode === 'maltainvest' ); return has_malta_invest_account; diff --git a/packages/shared/src/utils/cfd/cfd.ts b/packages/shared/src/utils/cfd/cfd.ts index d9f587aa84fa..dbfcc6cd177e 100644 --- a/packages/shared/src/utils/cfd/cfd.ts +++ b/packages/shared/src/utils/cfd/cfd.ts @@ -1,6 +1,5 @@ import { CFD_PLATFORMS } from '../platform'; import { LandingCompany, GetAccountStatus, DetailsOfEachMT5Loginid } from '@deriv/api-types'; -import { Jurisdiction } from '../constants/jurisdiction'; import { localize } from '@deriv/translations'; let CFD_text_translated: { [key: string]: () => void }; @@ -47,11 +46,11 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor if (market_type === 'gaming' || market_type === 'synthetic') { if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') { switch (shortcode) { - case Jurisdiction.SVG: + case 'svg': return 'synthetic_svg'; - case Jurisdiction.BVI: + case 'bvi': return 'synthetic_bvi'; - case Jurisdiction.VANUATU: + case 'vanuatu': return 'synthetic_v'; default: return 'synthetic'; @@ -65,13 +64,13 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor sub_account_type === 'financial_stp' ) { switch (shortcode) { - case Jurisdiction.SVG: + case 'svg': return 'financial_svg'; - case Jurisdiction.BVI: + case 'bvi': return 'financial_bvi'; - case Jurisdiction.LABUAN: + case 'labuan': return 'financial_fx'; - case Jurisdiction.VANUATU: + case 'vanuatu': return 'financial_v'; default: return 'financial'; diff --git a/packages/shared/src/utils/constants/index.ts b/packages/shared/src/utils/constants/index.ts index b72f7a0a5ff0..5d4931b44ec6 100644 --- a/packages/shared/src/utils/constants/index.ts +++ b/packages/shared/src/utils/constants/index.ts @@ -1,4 +1,3 @@ export * from './barriers'; export * from './contract'; export * from './content_flags'; -export * from './jurisdiction'; diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 438bb1d3640b..6f433ca96fc4 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -1,5 +1,4 @@ import merge from 'lodash.merge'; -import { Jurisdiction } from '../../shared/src/utils/constants'; import type { TRootStore } from '../types'; const mock = (): TRootStore => { @@ -14,7 +13,7 @@ const mock = (): TRootStore => { is_virtual: 0, trading: {}, excluded_until: 0, - landing_company_name: Jurisdiction.SVG, + landing_company_name: 'svg', }, }, active_account_landing_company: '', diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js index d4813b1e755f..78af860183bb 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.js +++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js @@ -16,7 +16,6 @@ import { isEmptyObject, isMarketClosed, isMobile, - Jurisdiction, pickDefaultSymbol, removeBarrier, resetEndTimeOnVolatilityIndices, @@ -420,7 +419,7 @@ export default class TradeStore extends BaseStore { } async setActiveSymbols() { - const is_on_mf_account = this.root_store.client.landing_company_shortcode === Jurisdiction.MALTA_INVEST; + const is_on_mf_account = this.root_store.client.landing_company_shortcode === 'maltainvest'; const hide_close_mx_mlt_storage_flag = !!parseInt( localStorage.getItem('hide_close_mx_mlt_account_notification') ); From a53102d64634a4bb5b53b49e366f7f77adc7aa79 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 22 Mar 2023 17:52:04 +0800 Subject: [PATCH 009/151] chore: change all hard coded string to follow constant Jurisdiction object --- .../Containers/__tests__/cfd-password-modal.spec.js | 6 +++--- .../jurisdiction-modal-foot-note.tsx | 2 +- .../cfd/src/Containers/mt5-compare-table-content.tsx | 12 ++++++------ packages/cfd/src/Stores/Modules/CFD/cfd-store.js | 4 ++-- packages/shared/src/utils/constants/index.ts | 1 + 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js index 9acfe73fc22a..582ab53cfcc9 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js +++ b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; -import { WS, validPassword } from '@deriv/shared'; +import { WS, validPassword, Jurisdiction } from '@deriv/shared'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import CFDPasswordModal from '../cfd-password-modal'; @@ -62,7 +62,7 @@ describe('', () => { is_cfd_success_dialog_enabled: false, is_dxtrade_allowed: false, is_pre_appstore: false, - jurisdiction_selected_shortcode: 'svg', + jurisdiction_selected_shortcode: Jurisdiction.SVG, platform: 'mt5', has_cfd_error: false, landing_companies: {}, @@ -220,7 +220,7 @@ describe('', () => { account_type: { category: 'real', type: 'financial' }, is_eu: true, is_fully_authenticated: false, - jurisdiction_selected_shortcode: 'bvi', + jurisdiction_selected_shortcode: Jurisdiction.BVI, }; render( 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 4bcbcd2d61a4..96b704d67c39 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 @@ -36,7 +36,7 @@ const FooterNote = ({ ) : ( ); - } else if (jurisdiction_selected_shortcode === 'bvi') { + } else if (jurisdiction_selected_shortcode === Jurisdiction.BVI) { return ( Date: Wed, 22 Mar 2023 13:56:51 +0400 Subject: [PATCH 010/151] build: :construction: Trigger build From 10c47e103bdb8004f35818aaa29f5ba55cacec50 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 22 Mar 2023 18:19:12 +0800 Subject: [PATCH 011/151] chore: remove Jurisdiction declaration for not jurisdiction_selected_shortcode --- packages/cfd/src/Components/cfd-account-card.tsx | 6 ++---- packages/cfd/src/Containers/cfd-password-modal.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 7d6f395d12b2..5d2de82992ed 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import { CSSTransition } from 'react-transition-group'; import { Icon, Money, Button, Text, DesktopWrapper, MobileWrapper, Popover } from '@deriv/components'; -import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS, isDesktop, Jurisdiction } from '@deriv/shared'; +import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS, isDesktop } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from '../Stores/connect'; import RootStore from '../Stores/index'; @@ -545,9 +545,7 @@ const CFDAccountCardComponent = ({ { const [is_password_modal_exited, setPasswordModalExited] = React.useState(true); - const is_bvi = landing_companies?.mt_financial_company?.financial_stp?.shortcode === Jurisdiction.BVI; + const is_bvi = landing_companies?.mt_financial_company?.financial_stp?.shortcode === 'bvi'; const has_mt5_account = Boolean(mt5_login_list?.length); const should_set_trading_password = Array.isArray(account_status?.status) && From 72cab58278717d05b2de83cce8d140f325c8d2dd Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 24 Mar 2023 18:12:05 +0400 Subject: [PATCH 012/151] feat: :art: mt5 jurisdiction updates --- .../components/cfds-listing/cfds-listing.scss | 35 +++++--- packages/cfd/src/Components/props.types.ts | 10 ++- .../src/Constants/jurisdiction-contents.ts | 89 ++++++++++++++++--- .../jurisdiction-card-section.tsx | 49 ++++++++-- packages/cfd/src/sass/cfd-dashboard.scss | 35 +++++--- 5 files changed, 170 insertions(+), 48 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index bcfbc3341330..ee30a105277f 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -6,7 +6,7 @@ justify-content: space-between; flex-direction: column; min-height: 38rem; - width: 26em; + width: 26rem; position: relative; cursor: pointer; @include mobile { @@ -27,13 +27,13 @@ } &__wrapper { - margin: 4em 6em 0em; + margin: 4rem 6rem 0rem; display: flex; justify-content: center; - gap: 2.2rem; + gap: 1.8rem; @include mobile { margin: 0; - padding: 2em 4em; + padding: 2rem 4rem; flex-direction: column; align-items: center; overflow-y: scroll; @@ -88,29 +88,29 @@ display: flex; background: var(--text-info-blue-bg); color: var(--text-info-blue); - height: 4em; + height: 4rem; width: 100%; justify-content: center; font-weight: bold; align-items: center; - border-radius: 1.6em 1.6em 0em 0em; + border-radius: 1.6rem 1.6rem 0rem 0rem; } &__card-content-over-header-blank { - height: 4em; + height: 4rem; width: 100%; - border-radius: 1.6em; + border-radius: 1.6rem; @include mobile { - height: 2em; + height: 2rem; } } &__h2-header { text-align: center; - min-height: 4em; - margin: 0em 2em; + min-height: 8rem; + margin: 0em 2rem; @include mobile { - margin-bottom: 1em; + margin-bottom: 2rem; min-height: auto; } } @@ -126,7 +126,7 @@ flex-direction: column; gap: 1.2rem; height: 100%; - margin: 0em 2em 2em; + margin: 0rem 2rem 2rem; } &__footer-wrapper { @@ -166,7 +166,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - margin-bottom: 2em; + margin-bottom: 2rem; @include mobile { padding: 0.8rem; } @@ -231,6 +231,13 @@ } } +.clickable-description-link { + color: var(--text-red); + &:hover { + text-decoration: underline; + } +} + .cfd-card-title-container { width: 100%; display: flex; diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index ecf89ecbcd3d..bb0a953f653b 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -68,6 +68,12 @@ export type TTradingPlatformAvailableAccount = { sub_account_type: string; }; +export type TClickableDescription = { + type: 'text' | 'link'; + text: string; + linkData?: string; +}; + export type TJurisdictionCardSectionTitleIndicators = { type: 'displayText' | 'displayIcons'; displayText?: string; @@ -76,9 +82,11 @@ export type TJurisdictionCardSectionTitleIndicators = { }; export type TJurisdictionCardSection = { + key: string; title: string; - description?: string; titleIndicators?: TJurisdictionCardSectionTitleIndicators; + description?: string; + clickableDescription?: Array; }; export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[]; diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 66f8722650b6..40412cffba36 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -22,6 +22,7 @@ export const jurisdiction_contents: TJurisdictionContent = { header: localize('St. Vincent & Grenadines'), synthetic_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, titleIndicators: { @@ -31,6 +32,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -39,18 +41,21 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, description: `${localize( 'You will need to submit proof of identity and address once you reach certain thresholds.' )}`, }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, ], financial_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, titleIndicators: { @@ -60,6 +65,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -68,6 +74,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -76,12 +83,14 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, description: `${localize( 'You will need to submit proof of identity and address once you reach certain thresholds.' )}`, }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, @@ -92,6 +101,7 @@ export const jurisdiction_contents: TJurisdictionContent = { header: localize('British Virgin Islands'), synthetic_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, titleIndicators: { @@ -101,6 +111,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -109,10 +120,15 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize( 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' @@ -121,6 +137,7 @@ export const jurisdiction_contents: TJurisdictionContent = { ], financial_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, titleIndicators: { @@ -130,6 +147,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -138,6 +156,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -146,10 +165,15 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize( 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' @@ -162,6 +186,7 @@ export const jurisdiction_contents: TJurisdictionContent = { header: localize('Vanuatu'), synthetic_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, titleIndicators: { @@ -171,6 +196,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -179,16 +205,22 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Vanuatu Financial Services Commission')}`, }, ], financial_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stock indices, Commodities and Cryptocurrencies')}`, titleIndicators: { @@ -198,6 +230,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -206,6 +239,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -214,10 +248,15 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Vanuatu Financial Services Commission')}`, }, @@ -228,22 +267,29 @@ export const jurisdiction_contents: TJurisdictionContent = { is_over_header_available: true, header: localize('Labuan'), synthetic_contents: [ - { title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}` }, - { title: `${localize('Leverage')}` }, + { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}` }, + { key: 'leverage', title: `${localize('Leverage')}` }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, ], financial_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}`, titleIndicators: { @@ -253,6 +299,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -261,6 +308,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -269,10 +317,15 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, @@ -283,6 +336,7 @@ export const jurisdiction_contents: TJurisdictionContent = { header: localize('Malta'), synthetic_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize( 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' @@ -294,6 +348,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -302,6 +357,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -310,16 +366,22 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, ], financial_contents: [ { + key: 'assets', title: `${localize('Assets')}`, description: `${localize( 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' @@ -331,6 +393,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'leverage', title: `${localize('Leverage')}`, titleIndicators: { type: 'displayText', @@ -339,6 +402,7 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'spreadsFrom', title: `${localize('Spreads from')}`, titleIndicators: { type: 'displayText', @@ -347,10 +411,15 @@ export const jurisdiction_contents: TJurisdictionContent = { }, }, { + key: 'verifications', title: `${localize('Verifications')}`, - description: `${localize('Learn more about verifications needed.')}`, + clickableDescription: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], }, { + key: 'regulatorEdr', title: `${localize('Regulator/EDR')}`, description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 2219f45d2779..8145e2fcf476 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,10 +1,14 @@ import { Text } from '@deriv/components'; import classNames from 'classnames'; -import React from 'react'; -import { TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; +import React, { SyntheticEvent } from 'react'; +import { TClickableDescription, TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; import { TJurisdictionCardSectionProps } from '../props.types'; const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionProps) => { + const handleCardFlip = (event: SyntheticEvent, linkData?: string) => { + event.stopPropagation(); + }; + const renderTitleIndicator = (titleIndicators: TJurisdictionCardSectionTitleIndicators) => { switch (titleIndicators.type) { case 'displayText': @@ -19,12 +23,36 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr
); case 'displayIcons': - return null; + return ''; default: - return null; + return ''; } }; + const renderClickableDescription = (clickableDescription: Array) => { + return clickableDescription.map(descriptionPart => { + switch (descriptionPart.type) { + case 'link': + return ( + handleCardFlip(event, descriptionPart.linkData)}> + + {descriptionPart.text} + +   + + ); + case 'text': + return ( + + {descriptionPart.text} + + ); + default: + return ''; + } + }); + }; + return (
@@ -35,11 +63,14 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr
{cardSectionItem.titleIndicators && renderTitleIndicator(cardSectionItem.titleIndicators)}
- - {cardSectionItem.description && ( - - {cardSectionItem.description} - + {cardSectionItem.clickableDescription ? ( +
{renderClickableDescription(cardSectionItem.clickableDescription)}
+ ) : ( + cardSectionItem.description && ( + + {cardSectionItem.description} + + ) )}
); diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 88841ec3f6d4..9a2d6a8a53f1 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -495,7 +495,7 @@ justify-content: space-between; flex-direction: column; min-height: 38rem; - width: 26em; + width: 26rem; position: relative; cursor: pointer; @include mobile { @@ -516,13 +516,13 @@ } &__wrapper { - margin: 4em 6em 0em 6em; + margin: 4rem 6rem 0rem 6rem; display: flex; justify-content: center; - gap: 2.2rem; + gap: 1.8rem; @include mobile { margin: 0; - padding: 2em 4em; + padding: 2rem 4rem; flex-direction: column; align-items: center; overflow-y: scroll; @@ -579,29 +579,29 @@ display: flex; background: var(--text-info-blue-bg); color: var(--text-info-blue); - height: 4em; + height: 4rem; width: 100%; justify-content: center; font-weight: bold; align-items: center; - border-radius: 1.6em 1.6em 0em 0em; + border-radius: 1.6rem 1.6rem 0rem 0rem; } &__card-content-over-header-blank { - height: 4em; + height: 4rem; width: 100%; - border-radius: 1.6em; + border-radius: 1.6rem; @include mobile { - height: 2em; + height: 2rem; } } &__h2-header { text-align: center; - min-height: 4em; - margin: 0em 2em; + min-height: 8rem; + margin: 0em 2rem; @include mobile { - margin-bottom: 1em; + margin-bottom: 2rem; min-height: auto; } } @@ -617,7 +617,7 @@ flex-direction: column; gap: 1.2rem; height: 100%; - margin: 0em 2em 2em 2em; + margin: 0rem 2rem 2rem 2rem; } &__footer-wrapper { @@ -657,7 +657,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - margin-bottom: 2em; + margin-bottom: 2rem; @include mobile { padding: 0.8rem; } @@ -722,6 +722,13 @@ } } +.clickable-description-link { + color: var(--text-red); + &:hover { + text-decoration: underline; + } +} + .cfd-card-title-container { width: 100%; display: flex; From cbf90c7d96c6d3bb4aa7de5f40c3f120106f6dd6 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 27 Mar 2023 08:19:05 +0400 Subject: [PATCH 013/151] style: :art: fixes display font color --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- packages/shared/src/styles/themes.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index ee30a105277f..497ed3c8f96c 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -205,7 +205,7 @@ .cfd-card-section-title-indicator { display: flex; padding: 0.6rem 1.2rem; - color: var(--text-prominent); + color: var(--brand-white); border-radius: $BORDER_RADIUS; font-weight: bold; &__red-darker { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 9a2d6a8a53f1..94afb2ddd4c9 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -696,7 +696,7 @@ .cfd-card-section-title-indicator { display: flex; padding: 0.6rem 1.2rem; - color: white; + color: var(--brand-white); border-radius: $BORDER_RADIUS; font-weight: bold; &__red-darker { diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index ac6aa22323e0..57cb5128e6a0 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -34,6 +34,7 @@ --text-align-center: center; // Brand primary colors + --brand-white: #{$color-white}; --brand-dark-grey: #{$color-black}; --brand-red-coral: #{$color-red}; --brand-orange: #{$color-orange}; From c10c3fcc92e8171eea785e15349b0436a03d5adc Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 27 Mar 2023 11:14:41 +0400 Subject: [PATCH 014/151] refactor: :art: minor refactoring fix --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 497ed3c8f96c..b3e32eaae0a6 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -108,7 +108,7 @@ &__h2-header { text-align: center; min-height: 8rem; - margin: 0em 2rem; + margin: 0rem 2rem; @include mobile { margin-bottom: 2rem; min-height: auto; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 94afb2ddd4c9..cf318bc1a486 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -599,7 +599,7 @@ &__h2-header { text-align: center; min-height: 8rem; - margin: 0em 2rem; + margin: 0rem 2rem; @include mobile { margin-bottom: 2rem; min-height: auto; From 1e73dae5520f578a4654f7426fd9da5e308bfa64 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 28 Mar 2023 14:23:15 +0800 Subject: [PATCH 015/151] chore: Test Case for Jurisdiction Modal Checkbox --- .../jurisdiction-modal-checkbox.spec.tsx | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx new file mode 100644 index 000000000000..d0b01d56d88e --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import JurisdictionModalCheckbox from '../jurisdiction-modal-checkbox'; + +describe('JurisdictionModalCheckbox', () => { + const mock_props = { + class_name: '', + is_checked: false, + jurisdiction_selected_shortcode: '', + onCheck: jest.fn(), + context: '', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + + const labuan_account = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'labuan', + onCheck: jest.fn(), + context: 'cfd', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + + const svg_account = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'svg', + onCheck: jest.fn(), + context: 'cfd', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + + const bvi_account_without_restriction = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'bvi', + onCheck: jest.fn(), + context: 'cfd', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + + const bvi_account_with_restriction = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'bvi', + onCheck: jest.fn(), + context: 'cfd', + should_restrict_bvi_account_creation: true, + should_restrict_vanuatu_account_creation: false, + }; + + const vanuatu_account_without_restriction = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'vanuatu', + onCheck: jest.fn(), + context: 'cfd', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + + const vanuatu_account_with_restriction = { + class_name: 'cfd-jurisdiction-checkbox', + is_checked: false, + jurisdiction_selected_shortcode: 'vanuatu', + onCheck: jest.fn(), + context: 'cfd', + should_restrict__account_creation: false, + should_restrict_vanuatu_account_creation: true, + }; + it('should not render JurisdictionModalCheckbox', () => { + render(); + expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); + }); + + it('should render labuan account and displays checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).toBeInTheDocument(); + }); + + it('should render function onCheck when checkbox is clicked for labuan account', () => { + render(); + const checkbox = screen.getByRole('checkbox'); + fireEvent.click(checkbox); + expect(labuan_account.onCheck).toHaveBeenCalled(); + }); + + it('should render svg account without displaying checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); + }); + + it('should render bvi account without restriction and displays checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).toBeInTheDocument(); + }); + + it('should render function onCheck when checkbox is clicked for bvi account without restriction', () => { + render(); + const checkbox = screen.getByRole('checkbox'); + fireEvent.click(checkbox); + expect(bvi_account_without_restriction.onCheck).toHaveBeenCalled(); + }); + + it('should render bvi account with restriction and does not display checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); + }); + + it('should render vanuatu account without restriction and displays checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).toBeInTheDocument(); + }); + + it('should render function onCheck when checkbox is clicked for vanuatu account without restriction', () => { + render(); + const checkbox = screen.getByRole('checkbox'); + fireEvent.click(checkbox); + expect(bvi_account_without_restriction.onCheck).toHaveBeenCalled(); + }); + + it('should render vanuatu account with restriction and does not display checkbox', () => { + render(); + expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); + }); +}); From d9cb06d05b358abf78dca70300620183a053368a Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 28 Mar 2023 15:22:17 +0800 Subject: [PATCH 016/151] chore: fixed type script test case --- .../jurisdiction-modal-checkbox.spec.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx index d0b01d56d88e..2a9dd70e046a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx @@ -1,14 +1,22 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import JurisdictionModalCheckbox from '../jurisdiction-modal-checkbox'; +import RootStore from 'Stores/index'; describe('JurisdictionModalCheckbox', () => { + const mock_store = { + client: {}, + common: {}, + ui: {}, + }; + const mockRootStore = new RootStore(mock_store); + const mock_props = { class_name: '', is_checked: false, jurisdiction_selected_shortcode: '', onCheck: jest.fn(), - context: '', + context: mockRootStore, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; @@ -18,7 +26,7 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'labuan', onCheck: jest.fn(), - context: 'cfd', + context: mockRootStore, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; @@ -28,7 +36,7 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'svg', onCheck: jest.fn(), - context: 'cfd', + context: mockRootStore, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; @@ -38,7 +46,7 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'bvi', onCheck: jest.fn(), - context: 'cfd', + context: mockRootStore, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; @@ -48,7 +56,7 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'bvi', onCheck: jest.fn(), - context: 'cfd', + context: mockRootStore, should_restrict_bvi_account_creation: true, should_restrict_vanuatu_account_creation: false, }; @@ -58,7 +66,7 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'vanuatu', onCheck: jest.fn(), - context: 'cfd', + context: mockRootStore, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; @@ -68,8 +76,8 @@ describe('JurisdictionModalCheckbox', () => { is_checked: false, jurisdiction_selected_shortcode: 'vanuatu', onCheck: jest.fn(), - context: 'cfd', - should_restrict__account_creation: false, + context: mockRootStore, + should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: true, }; it('should not render JurisdictionModalCheckbox', () => { From fce202d9df4ea3c3445698374a5d31c667bd23eb Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 28 Mar 2023 16:23:03 +0800 Subject: [PATCH 017/151] chore: edited code based on suggested comments --- .../jurisdiction-modal-checkbox.spec.tsx | 97 +++++-------------- 1 file changed, 25 insertions(+), 72 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx index 2a9dd70e046a..4ff2c1ea96d2 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx @@ -21,118 +21,71 @@ describe('JurisdictionModalCheckbox', () => { should_restrict_vanuatu_account_creation: false, }; - const labuan_account = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'labuan', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: false, - should_restrict_vanuatu_account_creation: false, - }; - - const svg_account = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'svg', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: false, - should_restrict_vanuatu_account_creation: false, - }; - - const bvi_account_without_restriction = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'bvi', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: false, - should_restrict_vanuatu_account_creation: false, - }; - - const bvi_account_with_restriction = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'bvi', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: true, - should_restrict_vanuatu_account_creation: false, - }; - - const vanuatu_account_without_restriction = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'vanuatu', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: false, - should_restrict_vanuatu_account_creation: false, - }; - - const vanuatu_account_with_restriction = { - class_name: 'cfd-jurisdiction-checkbox', - is_checked: false, - jurisdiction_selected_shortcode: 'vanuatu', - onCheck: jest.fn(), - context: mockRootStore, - should_restrict_bvi_account_creation: false, - should_restrict_vanuatu_account_creation: true, - }; - it('should not render JurisdictionModalCheckbox', () => { + it('should not render JurisdictionModalCheckbox when jurisdiction is not selected', () => { render(); expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); }); it('should render labuan account and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for labuan account', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); - expect(labuan_account.onCheck).toHaveBeenCalled(); + expect(mock_props.onCheck).toHaveBeenCalled(); }); it('should render svg account without displaying checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); }); it('should render bvi account without restriction and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for bvi account without restriction', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); - expect(bvi_account_without_restriction.onCheck).toHaveBeenCalled(); + expect(mock_props.onCheck).toHaveBeenCalled(); }); it('should render bvi account with restriction and does not display checkbox', () => { - render(); + render( + + ); expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); }); it('should render vanuatu account without restriction and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for vanuatu account without restriction', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); - expect(bvi_account_without_restriction.onCheck).toHaveBeenCalled(); + expect(mock_props.onCheck).toHaveBeenCalled(); }); it('should render vanuatu account with restriction and does not display checkbox', () => { - render(); + render( + + ); expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); }); }); From 046e3ba6d4bc90f0a59611c6753a1009b543dfd6 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 28 Mar 2023 15:40:39 +0400 Subject: [PATCH 018/151] feat: :sparkles: adds mt5 icons --- .../src/components/icon/common/ic-back-button.svg | 3 +++ .../icon/common/ic-document-number-verification.svg | 6 ++++++ .../icon/common/ic-identity-document-verification.svg | 7 +++++++ .../icon/common/ic-name-and-address-verification.svg | 3 +++ .../src/components/icon/common/ic-selfie-verification.svg | 4 ++++ .../icon/common/ic-verification-status-green.svg | 4 ++++ .../components/icon/common/ic-verification-status-red.svg | 4 ++++ .../icon/common/ic-verification-status-yellow.svg | 5 +++++ packages/components/src/components/icon/icons.js | 8 ++++++++ packages/components/stories/icon/icons.js | 8 ++++++++ 10 files changed, 52 insertions(+) create mode 100644 packages/components/src/components/icon/common/ic-back-button.svg create mode 100644 packages/components/src/components/icon/common/ic-document-number-verification.svg create mode 100644 packages/components/src/components/icon/common/ic-identity-document-verification.svg create mode 100644 packages/components/src/components/icon/common/ic-name-and-address-verification.svg create mode 100644 packages/components/src/components/icon/common/ic-selfie-verification.svg create mode 100644 packages/components/src/components/icon/common/ic-verification-status-green.svg create mode 100644 packages/components/src/components/icon/common/ic-verification-status-red.svg create mode 100644 packages/components/src/components/icon/common/ic-verification-status-yellow.svg diff --git a/packages/components/src/components/icon/common/ic-back-button.svg b/packages/components/src/components/icon/common/ic-back-button.svg new file mode 100644 index 000000000000..503d59824f6a --- /dev/null +++ b/packages/components/src/components/icon/common/ic-back-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/components/src/components/icon/common/ic-document-number-verification.svg b/packages/components/src/components/icon/common/ic-document-number-verification.svg new file mode 100644 index 000000000000..509b88ebf9b8 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification.svg b/packages/components/src/components/icon/common/ic-identity-document-verification.svg new file mode 100644 index 000000000000..9524e28e095c --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg new file mode 100644 index 000000000000..658e5b931a87 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/components/src/components/icon/common/ic-selfie-verification.svg b/packages/components/src/components/icon/common/ic-selfie-verification.svg new file mode 100644 index 000000000000..01b4c85cc764 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/components/src/components/icon/common/ic-verification-status-green.svg b/packages/components/src/components/icon/common/ic-verification-status-green.svg new file mode 100644 index 000000000000..3e76c17e92b3 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-green.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/components/src/components/icon/common/ic-verification-status-red.svg b/packages/components/src/components/icon/common/ic-verification-status-red.svg new file mode 100644 index 000000000000..f1f78ac1fc61 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-red.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/components/src/components/icon/common/ic-verification-status-yellow.svg b/packages/components/src/components/icon/common/ic-verification-status-yellow.svg new file mode 100644 index 000000000000..5946c1fec2ac --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-yellow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index b02d9804b63b..a080eee5e020 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -280,6 +280,7 @@ import './common/ic-assessment.svg'; import './common/ic-astro-pay-dark.svg'; import './common/ic-astro-pay-light.svg'; import './common/ic-attachment.svg'; +import './common/ic-back-button.svg'; import './common/ic-bank-dashboard.svg'; import './common/ic-bank-transfer.svg'; import './common/ic-bank.svg'; @@ -346,6 +347,7 @@ import './common/ic-deriv.svg'; import './common/ic-desktop.svg'; import './common/ic-digits.svg'; import './common/ic-docs-submit.svg'; +import './common/ic-document-number-verification.svg'; import './common/ic-dop.svg'; import './common/ic-download.svg'; import './common/ic-dp2p.svg'; @@ -390,6 +392,7 @@ import './common/ic-id-card-back.svg'; import './common/ic-id-card-front.svg'; import './common/ic-identity-card-dashboard.svg'; import './common/ic-identity-card.svg'; +import './common/ic-identity-document-verification.svg'; import './common/ic-image.svg'; import './common/ic-info-blue.svg'; import './common/ic-info-outline.svg'; @@ -429,6 +432,7 @@ import './common/ic-minus.svg'; import './common/ic-mobile.svg'; import './common/ic-money-transfer.svg'; import './common/ic-multiplier.svg'; +import './common/ic-name-and-address-verification.svg'; import './common/ic-neteller-dark.svg'; import './common/ic-neteller-light.svg'; import './common/ic-new-file.svg'; @@ -509,6 +513,7 @@ import './common/ic-save.svg'; import './common/ic-search.svg'; import './common/ic-security-and-privacy.svg'; import './common/ic-security.svg'; +import './common/ic-selfie-verification.svg'; import './common/ic-selfie.svg'; import './common/ic-send-message.svg'; import './common/ic-skrill-dark.svg'; @@ -544,6 +549,9 @@ import './common/ic-user-blocked-outline.svg'; import './common/ic-user-outline.svg'; import './common/ic-user.svg'; import './common/ic-utility.svg'; +import './common/ic-verification-status-green.svg'; +import './common/ic-verification-status-red.svg'; +import './common/ic-verification-status-yellow.svg'; import './common/ic-verification-success.svg'; import './common/ic-verification.svg'; import './common/ic-visa-dark.svg'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 3a866590298d..a68b7644f31f 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -289,6 +289,7 @@ export const icons = 'IcAstroPayDark', 'IcAstroPayLight', 'IcAttachment', + 'IcBackButton', 'IcBankDashboard', 'IcBankTransfer', 'IcBank', @@ -355,6 +356,7 @@ export const icons = 'IcDesktop', 'IcDigits', 'IcDocsSubmit', + 'IcDocumentNumberVerification', 'IcDop', 'IcDownload', 'IcDp2p', @@ -399,6 +401,7 @@ export const icons = 'IcIdCardFront', 'IcIdentityCardDashboard', 'IcIdentityCard', + 'IcIdentityDocumentVerification', 'IcImage', 'IcInfoBlue', 'IcInfoOutline', @@ -438,6 +441,7 @@ export const icons = 'IcMobile', 'IcMoneyTransfer', 'IcMultiplier', + 'IcNameAndAddressVerification', 'IcNetellerDark', 'IcNetellerLight', 'IcNewFile', @@ -518,6 +522,7 @@ export const icons = 'IcSearch', 'IcSecurityAndPrivacy', 'IcSecurity', + 'IcSelfieVerification', 'IcSelfie', 'IcSendMessage', 'IcSkrillDark', @@ -553,6 +558,9 @@ export const icons = 'IcUserOutline', 'IcUser', 'IcUtility', + 'IcVerificationStatusGreen', + 'IcVerificationStatusRed', + 'IcVerificationStatusYellow', 'IcVerificationSuccess', 'IcVerification', 'IcVisaDark', From 1aff108f6a99f5ec1f7731fac6a5d09d26adeddc Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 28 Mar 2023 15:45:50 +0400 Subject: [PATCH 019/151] style: :lipstick: styling changes for mt5 --- .../components/cfds-listing/cfds-listing.scss | 21 +++++++++++++++++-- packages/cfd/src/sass/cfd-dashboard.scss | 21 +++++++++++++++++-- packages/shared/src/styles/constants.scss | 3 +++ packages/shared/src/styles/themes.scss | 21 ++++++++++++------- 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index b3e32eaae0a6..d98e1de7c361 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: 48rem; width: 26rem; position: relative; cursor: pointer; @@ -115,6 +115,11 @@ } } + &__card-flipped-container { + gap: 2rem; + margin: 4rem 2rem; + } + &__card-content-container { display: flex; flex-direction: column; @@ -190,6 +195,18 @@ } } +.cfd-card-back-section-items-container { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.cfd-card-back-section-items-sub-container { + display: flex; + align-items: center; + gap: 1rem; +} + .cfd-card-section { width: 100%; display: flex; @@ -199,7 +216,7 @@ .cfd-card-section-divider { width: 100%; - border-bottom: 2px solid var(--general-section-1); + border-bottom: 2px solid var(--border-divider); } .cfd-card-section-title-indicator { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index cf318bc1a486..7652badbc685 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -494,7 +494,7 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 38rem; + min-height: 48rem; width: 26rem; position: relative; cursor: pointer; @@ -606,6 +606,11 @@ } } + &__card-flipped-container { + gap: 2rem; + margin: 4rem 2rem; + } + &__card-content-container { display: flex; flex-direction: column; @@ -681,6 +686,18 @@ } } +.cfd-card-back-section-items-container { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.cfd-card-back-section-items-sub-container { + display: flex; + align-items: center; + gap: 1rem; +} + .cfd-card-section { width: 100%; display: flex; @@ -690,7 +707,7 @@ .cfd-card-section-divider { width: 100%; - border-bottom: 2px solid var(--general-section-1); + border-bottom: 2px solid var(--border-divider); } .cfd-card-section-title-indicator { diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index e79ce9fc89b2..95f3b138bc57 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -41,6 +41,7 @@ $color_grey-9: #868686; $color-grey-10: #919191; $color-grey-11: #fafafa; $color-grey-12: #f5f7fa; +$color-grey-12: #2e2e2e; $color-green: #85acb0; $color-green-1: #4bb4b3; $color-green-2: #3d9494; @@ -57,6 +58,8 @@ $color-blue-2: #2a3052; $color-blue-3: #0796e0; $color-blue-4: #0677af; $color-blue-5: #dfeaff; +$color-blue-6: #92b8ff; +$color-blue-7: #182130; $color-violet: #4a3871; $color-brown: #664407; $color-purple: #722fe4; diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 57cb5128e6a0..0a773ff2ab20 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -64,6 +64,15 @@ --app-card-virtual: #{$gradient-virtual}; --app-card-virtual-swap-free: #{$gradient-virtual-swap-free}; + // Modal + --modal-indicator-red-darker: #{$color-red-8}; + --modal-indicator-red-dark: #{$color-red-9}; + --modal-indicator-red-light: #{$color-red-10}; + --modal-indicator-yellow-dark: #{$color-yellow-1}; + --modal-indicator-yellow-light: #{$color-yellow-2}; + --modal-indicator-violet-dark: #{$color-violet}; + --modal-indicator-brown-dark: #{$color-brown}; + .theme--light { // General --general-main-1: #{$color-white}; @@ -135,6 +144,7 @@ --border-hover-1: #{$color-black-9}; --border-active: var(--brand-secondary); --border-disabled: #{$color-grey-3}; + --border-divider: #{$color-grey-2}; // Fill --fill-normal: #{$color-white}; --fill-hover: #{$color-grey-1}; @@ -188,14 +198,6 @@ --badge-blue: #{$color-blue-4}; --badge-violet: #{$color-blue-2}; --badge-green: #{$color-green-3}; - // Modal - --modal-indicator-red-darker: #{$color-red-8}; - --modal-indicator-red-dark: #{$color-red-9}; - --modal-indicator-red-light: #{$color-red-10}; - --modal-indicator-yellow-dark: #{$color-yellow-1}; - --modal-indicator-yellow-light: #{$color-yellow-2}; - --modal-indicator-violet-dark: #{$color-violet}; - --modal-indicator-brown-dark: #{$color-brown}; } .theme--dark { // General @@ -220,6 +222,8 @@ --text-loss-danger: #{$color-red-2}; --text-red: #{$color-red}; --text-colored-background: #{$color-white}; + --text-info-blue: #{$color-blue-6}; + --text-info-blue-bg: #{$color-blue-7}; --text-status-info-blue: #{$color-blue}; --text-hint: #{$color-grey}; --icon-light-background: #{$color-black-9}; @@ -264,6 +268,7 @@ --border-hover-1: #{$color-black-9}; --border-active: var(--brand-secondary); --border-disabled: #{$color-black-4}; + --border-divider: #{$color-grey-12}; // Fill --fill-normal: #{$color-black}; --fill-hover: #{$color-grey-7}; From 5a2c7ccaa6908449b85e836d9884c96fa95f646d Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 28 Mar 2023 15:55:20 +0400 Subject: [PATCH 020/151] feat: :sparkles: updates on mt5 jurisdiction modal --- packages/cfd/src/Components/props.types.ts | 18 ++++ .../src/Constants/jurisdiction-contents.ts | 60 ++++++++++++- .../jurisdiction-card-section.tsx | 7 +- .../jurisdiction-modal/jurisdiction-card.tsx | 90 +++++++++++++++---- packages/cfd/src/Containers/props.types.ts | 1 + 5 files changed, 155 insertions(+), 21 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index bb0a953f653b..7584e1fe993c 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -89,6 +89,24 @@ export type TJurisdictionCardSection = { clickableDescription?: Array; }; +export type TJurisdictionCardBackRequiredDocsItem = { + icon: string; + text: string; +}; + +export type TJurisdictionCardBackSectionRequiredDocs = { + documentNumber?: TJurisdictionCardBackRequiredDocsItem; + selfie?: TJurisdictionCardBackRequiredDocsItem; + identityDocument?: TJurisdictionCardBackRequiredDocsItem; + nameAndAddress?: TJurisdictionCardBackRequiredDocsItem; +}; + +export type TJurisdictionCardBackSectionStatusReferences = { + icon: string; + text: string; + color: 'yellow' | 'red' | 'green'; +}; + export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[]; export type TCFDAccountCard = { diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 40412cffba36..1df836694614 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -1,5 +1,52 @@ import { localize } from '@deriv/translations'; -import { TJurisdictionCardSection } from 'Components/props.types'; +import { + TJurisdictionCardBackSectionRequiredDocs, + TJurisdictionCardBackSectionStatusReferences, + TJurisdictionCardSection, +} from 'Components/props.types'; + +export type TJurisdictionCardBackSectionContent = { + shortDescription: string; + requiredVerificationDocs: TJurisdictionCardBackSectionRequiredDocs; + statusReferences: Array; +}; + +export const jurisdiction_verification_contents: TJurisdictionCardBackSectionContent = { + shortDescription: `${localize('We need you to submit these in order to get this account:')}`, + requiredVerificationDocs: { + documentNumber: { + icon: 'IcDocumentNumberVerification', + text: `${localize('Document number (identity card, passport)')}`, + }, + selfie: { + icon: 'IcSelfieVerification', + text: `${localize('A selfie of yourself.')}`, + }, + identityDocument: { + icon: 'IcIdentityDocumentVerification', + text: `${localize('A copy of your identity document (identity card, passport)')}`, + }, + nameAndAddress: { + icon: 'IcNameAndAddressVerification', + text: `${localize( + 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' + )}`, + }, + }, + statusReferences: [ + { + icon: 'IcVerificationStatusYellow', + text: `${localize('Your document is pending for verification.')}`, + color: 'yellow', + }, + { + icon: 'IcVerificationStatusRed', + text: `${localize('Verification failed. Resubmit during account creation.')}`, + color: 'red', + }, + { icon: 'IcVerificationStatusGreen', text: `${localize('Your document is verified.')}`, color: 'green' }, + ], +}; type TJurisdictionCardItems = { header: string; @@ -7,7 +54,10 @@ type TJurisdictionCardItems = { synthetic_contents: Array; financial_contents: Array; is_over_header_available: boolean; + synthetic_verification_docs?: Array<'documentNumber' | 'selfie' | 'identityDocument' | 'nameAndAddress'>; + financial_verification_docs?: Array<'documentNumber' | 'selfie' | 'identityDocument' | 'nameAndAddress'>; }; + type TJurisdictionContent = { svg: TJurisdictionCardItems; vanuatu: TJurisdictionCardItems; @@ -180,6 +230,8 @@ export const jurisdiction_contents: TJurisdictionContent = { )}`, }, ], + synthetic_verification_docs: ['documentNumber', 'nameAndAddress'], + financial_verification_docs: ['documentNumber', 'nameAndAddress'], }, vanuatu: { is_over_header_available: false, @@ -261,6 +313,8 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Vanuatu Financial Services Commission')}`, }, ], + synthetic_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], + financial_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], }, labuan: { over_header: localize('Straight-through processing'), @@ -330,6 +384,8 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, ], + synthetic_verification_docs: ['documentNumber', 'nameAndAddress'], + financial_verification_docs: ['documentNumber', 'nameAndAddress'], }, maltainvest: { is_over_header_available: false, @@ -424,5 +480,7 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, ], + synthetic_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], + financial_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], }, }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 8145e2fcf476..f7b0d554f8be 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -4,9 +4,10 @@ import React, { SyntheticEvent } from 'react'; import { TClickableDescription, TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; import { TJurisdictionCardSectionProps } from '../props.types'; -const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionProps) => { - const handleCardFlip = (event: SyntheticEvent, linkData?: string) => { +const JurisdictionCardSection = ({ cardSectionItem, flipCard }: TJurisdictionCardSectionProps) => { + const handleCardFlip = (event: SyntheticEvent) => { event.stopPropagation(); + flipCard(); }; const renderTitleIndicator = (titleIndicators: TJurisdictionCardSectionTitleIndicators) => { @@ -34,7 +35,7 @@ const JurisdictionCardSection = ({ cardSectionItem }: TJurisdictionCardSectionPr switch (descriptionPart.type) { case 'link': return ( - handleCardFlip(event, descriptionPart.linkData)}> + handleCardFlip(event)}> {descriptionPart.text} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 0e63af8dfa4a..bf8c3ad5fe34 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,8 +1,8 @@ -import { Text } from '@deriv/components'; +import { Text, Icon } from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; -import React from 'react'; -import { jurisdiction_contents } from '../../Constants/jurisdiction-contents'; +import React, { useState } from 'react'; +import { jurisdiction_contents, jurisdiction_verification_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardSection from './jurisdiction-card-section'; @@ -20,24 +20,80 @@ const JurisdictionCard = ({ const is_synthetic = account_type === 'synthetic'; 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; + const verification_docs = is_synthetic + ? card_values?.synthetic_verification_docs + : card_values.financial_verification_docs; + const [isCardFlipped, setIsCardFlipped] = useState(false); const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; + const flipCard = () => { + setIsCardFlipped(!isCardFlipped); + }; + return ( - -
undefined : () => cardSelection(type_of_card)} - > +
undefined : () => cardSelection(type_of_card)} + > + {isCardFlipped ? ( +
+
+ +
+ + {jurisdiction_verification_contents.shortDescription} + +
+ {verification_docs?.map(verificationItem => ( +
+
+ +
+ + { + jurisdiction_verification_contents.requiredVerificationDocs[verificationItem] + ?.text + } + +
+ ))} +
+
+
+ {jurisdiction_verification_contents.statusReferences.map(statusItem => ( +
+
+ +
+ + {statusItem.text} + +
+ ))} +
+
+ ) : (
{card_values.is_over_header_available ? ( -
+ -
+ ) : (
)} @@ -46,15 +102,15 @@ const JurisdictionCard = ({
{card_data.map((item, index) => ( - - - {index < card_data.length - 1 &&
} + + + {index < card_data.length - 1 &&
} ))}
-
- + )} +
); }; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index b98474183fb3..b643b6ce6a2d 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -176,6 +176,7 @@ export type TJurisdictionCardProps = { export type TJurisdictionCardSectionProps = { cardSectionItem: TJurisdictionCardSection; + flipCard: () => void; }; export type TVerificationStatusBannerProps = { From a3a5c4f91ee66550601a4c979454663c7b8e526a Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 28 Mar 2023 18:16:31 +0400 Subject: [PATCH 021/151] style: :lipstick: styles cards verification back section --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 6 +++++- .../src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 6 +++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index d98e1de7c361..32d340f53fc2 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -201,9 +201,13 @@ gap: 1rem; } +.cfd-card-back-section-main { + height: 100%; +} + .cfd-card-back-section-items-sub-container { display: flex; - align-items: center; + align-items: flex-start; gap: 1rem; } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index bf8c3ad5fe34..4cc23a499afc 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -53,7 +53,7 @@ const JurisdictionCard = ({ {jurisdiction_verification_contents.shortDescription} -
+
{verification_docs?.map(verificationItem => (
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 7652badbc685..6d46723a0062 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -692,9 +692,13 @@ gap: 1rem; } +.cfd-card-back-section-main { + height: 100%; +} + .cfd-card-back-section-items-sub-container { display: flex; - align-items: center; + align-items: flex-start; gap: 1rem; } From 6d7afcc2f365ef503bd74e4709ee2120ebd18c4c Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 29 Mar 2023 11:15:29 +0800 Subject: [PATCH 022/151] chore: test case for jurisdiction content --- .../jurisdiction-modal-content.spec.tsx | 36 +++++++++++++++++++ .../jurisdiction-modal-content.tsx | 2 +- 2 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx new file mode 100644 index 000000000000..a62e39c95016 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import JurisdictionModalContent from '../jurisdiction-modal-content'; +import { render, screen } from '@testing-library/react'; +import RootStore from 'Stores/index'; + +describe('JurisdictionModalContent', () => { + const mock_store = { + common: {}, + client: {}, + ui: {}, + }; + const mock_context = new RootStore(mock_store); + const mock_props = { + account_type: '', + is_virtual: false, + jurisdiction_selected_shortcode: '', + setJurisdictionSelectedShortcode: jest.fn(), + synthetic_available_accounts: [], + financial_available_accounts: [], + context: mock_context, + real_synthetic_accounts_existing_data: [], + real_financial_accounts_existing_data: [], + }; + + it('should display cfd-jurisdiction-card--synthetic__wrapper in class name', () => { + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); + }); + + it('should display cfd-jurisdiction-card--financial__wrapper in class name', () => { + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); + }); +}); 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 800cfc63a5e9..42ee722fb61e 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -31,7 +31,7 @@ const JurisdictionModalContent = ({ const jurisdiction_cards_array = ['svg', 'bvi', 'vanuatu', 'labuan', 'maltainvest']; return ( -
+
{jurisdiction_cards_array.map( card => cardsToBeShown(card) && ( From 004c25ef0ae0846862fd7c9587ebbdd29cb8f2cf Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 30 Mar 2023 11:12:29 +0800 Subject: [PATCH 023/151] chore: edited mock values for modal-content test case --- .../jurisdiction-modal-content.spec.tsx | 70 ++++++++++++++++++- 1 file changed, 68 insertions(+), 2 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index a62e39c95016..6f09b939399d 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -15,8 +15,74 @@ describe('JurisdictionModalContent', () => { is_virtual: false, jurisdiction_selected_shortcode: '', setJurisdictionSelectedShortcode: jest.fn(), - synthetic_available_accounts: [], - financial_available_accounts: [], + synthetic_available_accounts: [ + { + market_type: 'gaming', + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'svg', + sub_account_type: '', + }, + { + market_type: 'gaming', + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'bvi', + sub_account_type: '', + }, + ], + financial_available_accounts: [ + { + market_type: 'financial', + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'svg', + sub_account_type: '', + }, + { + market_type: 'financial', + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'bvi', + sub_account_type: '', + }, + ], context: mock_context, real_synthetic_accounts_existing_data: [], real_financial_accounts_existing_data: [], From 6bd100e096d23cb88621c62baf72a134cb4a89ae Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 30 Mar 2023 11:23:14 +0800 Subject: [PATCH 024/151] chore: cahnge file name to jurisdictions-config --- packages/shared/src/utils/constants/index.ts | 2 +- .../constants/{jurisdiction.ts => jurisdictions-config.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/shared/src/utils/constants/{jurisdiction.ts => jurisdictions-config.ts} (100%) diff --git a/packages/shared/src/utils/constants/index.ts b/packages/shared/src/utils/constants/index.ts index b72f7a0a5ff0..093a7a776a48 100644 --- a/packages/shared/src/utils/constants/index.ts +++ b/packages/shared/src/utils/constants/index.ts @@ -1,4 +1,4 @@ export * from './barriers'; export * from './contract'; export * from './content_flags'; -export * from './jurisdiction'; +export * from './jurisdictions-config'; diff --git a/packages/shared/src/utils/constants/jurisdiction.ts b/packages/shared/src/utils/constants/jurisdictions-config.ts similarity index 100% rename from packages/shared/src/utils/constants/jurisdiction.ts rename to packages/shared/src/utils/constants/jurisdictions-config.ts From 6037de2638e13353b82c4c271ae297385e68b18f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 30 Mar 2023 08:09:39 +0400 Subject: [PATCH 025/151] style: :lipstick: updates mt5 jurisdiction modal --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 3 +-- .../src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 4 ++-- packages/cfd/src/sass/cfd-dashboard.scss | 3 +-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 32d340f53fc2..4c159a0ab62a 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -7,10 +7,9 @@ flex-direction: column; min-height: 48rem; width: 26rem; - position: relative; cursor: pointer; @include mobile { - min-height: auto; + height: 48rem; width: 100%; } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 4cc23a499afc..ac95e525cb3a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -47,8 +47,8 @@ const JurisdictionCard = ({ `${card_classname}__card-flipped-container` )} > -
- +
+
{jurisdiction_verification_contents.shortDescription} diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 6d46723a0062..4454fad5f7fa 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -496,10 +496,9 @@ flex-direction: column; min-height: 48rem; width: 26rem; - position: relative; cursor: pointer; @include mobile { - min-height: auto; + height: 48rem; width: 100%; } From dfa2ee577ec1deed857f048e372c43c409a7a9fc Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 30 Mar 2023 13:44:01 +0800 Subject: [PATCH 026/151] chore: test case for jurisdiction foot note --- .../jurisdiction-modal-foot-note.spec.tsx | 200 ++++++++++++++++++ .../jurisdiction-modal-foot-note.tsx | 2 +- 2 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx new file mode 100644 index 000000000000..e70834cf920a --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx @@ -0,0 +1,200 @@ +import React from 'react'; +import JurisdictionModalFootNote from '../jurisdiction-modal-foot-note'; +import { render, screen } from '@testing-library/react'; +import RootStore from 'Stores/index'; +import { mockStore } from '@deriv/stores'; + +describe('JurisdictionModalFootNote', () => { + const mock_store = { + common: {}, + client: {}, + ui: {}, + }; + const mock_context = new RootStore(mock_store); + const mock_props = { + account_status: { + authentication: { + document: { + status: 'none' as const, + }, + needs_verification: [], + }, + currency_config: {}, + p2p_status: 'none' as const, + prompt_client_to_authenticate: 0 as const, + risk_classification: '', + status: [''], + }, + account_type: '', + context: mock_context, + card_classname: '', + jurisdiction_selected_shortcode: '', + should_restrict_bvi_account_creation: false, + should_restrict_vanuatu_account_creation: false, + }; + it('should render JurisdictionModalFootNote', () => { + render(); + expect(screen.getByTestId('dt-jurisdiction-footnote')).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote with className', () => { + render(); + const container = screen.getByTestId('dt-jurisdiction-footnote'); + expect(container).toHaveClass('mock_jurisdiction__footnote'); + }); + + it('should render JurisdictionModalFootNote and show svg message', () => { + render( + + ); + expect( + screen.getByText('Add your Deriv MT5 Derived account under Deriv (SVG) LLC (company no. 273 LLC 2020).') + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote without bvi_restriction and show bvi message', () => { + render( + + ); + expect( + screen.getByText( + 'Add your Deriv MT5 Derived account under Deriv (BVI) Ltd, regulated by the British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114).' + ) + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote with bvi_restriction and show bvi restriction message', () => { + render( + + ); + expect( + screen.getByText('To create this account first we need you to resubmit your proof of address.') + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote with bvi_restriction and poa is pending, then display resubmit poa message', () => { + const mock_account_status = { + authentication: { + document: { + status: 'pending' as const, + }, + needs_verification: [], + }, + currency_config: {}, + p2p_status: 'none' as const, + prompt_client_to_authenticate: 0 as const, + risk_classification: '', + status: [''], + }; + render( + + ); + const poa_message = screen.getByText( + 'You can open this account once your submitted documents have been verified.' + ); + expect(poa_message).toBeInTheDocument(); + expect(poa_message).toHaveClass('mock_jurisdiction__footnote--pending'); + }); + + it('should render JurisdictionModalFootNote without vanuatu_restriction and show vanuatu message', () => { + render( + + ); + expect( + screen.getByText( + 'Add Your Deriv MT5 Derived account under Deriv (V) Ltd, regulated by the Vanuatu Financial Services Commission.' + ) + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote with vanuatu_restriction and show vanuatu restriction message', () => { + render( + + ); + expect( + screen.getByText('To create this account first we need you to resubmit your proof of address.') + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote with vanuatu_restriction and poa is pending, then display resubmit poa message', () => { + const mock_account_status = { + authentication: { + document: { + status: 'pending' as const, + }, + needs_verification: [], + }, + currency_config: {}, + p2p_status: 'none' as const, + prompt_client_to_authenticate: 0 as const, + risk_classification: '', + status: [''], + }; + render( + + ); + const poa_message = screen.getByText( + 'You can open this account once your submitted documents have been verified.' + ); + expect(poa_message).toBeInTheDocument(); + expect(poa_message).toHaveClass('mock_jurisdiction__footnote--pending'); + }); + + it('should render JurisdictionModalFootNote show labuan message', () => { + render( + + ); + expect( + screen.getByText( + 'Add your Deriv MT5 Derived STP account under Deriv (FX) Ltd regulated by Labuan Financial Services Authority (Licence no. MB/18/0024).' + ) + ).toBeInTheDocument(); + }); + + it('should render JurisdictionModalFootNote show maltainvest message', () => { + render( + + ); + expect( + screen.getByText( + 'Add your Deriv MT5 CFDs account under Deriv Investments (Europe) Limited, regulated by the Malta Financial Services Authority (MFSA) (licence no. IS/70156).' + ) + ).toBeInTheDocument(); + }); +}); 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 a9f4ddec1090..f67ec27795f1 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 @@ -68,7 +68,7 @@ const FooterNote = ({ const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { return ( -
+
Date: Thu, 30 Mar 2023 13:50:46 +0800 Subject: [PATCH 027/151] chore: update hard coded selected jurisdiction short code to follow existing files --- .../jurisdiction-modal-checkbox.spec.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx index 4ff2c1ea96d2..cd3c68591b2f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-checkbox.spec.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import JurisdictionModalCheckbox from '../jurisdiction-modal-checkbox'; import RootStore from 'Stores/index'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionModalCheckbox', () => { const mock_store = { @@ -27,29 +28,29 @@ describe('JurisdictionModalCheckbox', () => { }); it('should render labuan account and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for labuan account', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); expect(mock_props.onCheck).toHaveBeenCalled(); }); it('should render svg account without displaying checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); }); it('should render bvi account without restriction and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for bvi account without restriction', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); expect(mock_props.onCheck).toHaveBeenCalled(); @@ -59,7 +60,7 @@ describe('JurisdictionModalCheckbox', () => { render( ); @@ -67,12 +68,12 @@ describe('JurisdictionModalCheckbox', () => { }); it('should render vanuatu account without restriction and displays checkbox', () => { - render(); + render(); expect(screen.queryByRole('checkbox')).toBeInTheDocument(); }); it('should render function onCheck when checkbox is clicked for vanuatu account without restriction', () => { - render(); + render(); const checkbox = screen.getByRole('checkbox'); fireEvent.click(checkbox); expect(mock_props.onCheck).toHaveBeenCalled(); @@ -82,7 +83,7 @@ describe('JurisdictionModalCheckbox', () => { render( ); From df525ab347ff88844e35e14d7d19ff30dada8b84 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 30 Mar 2023 13:57:55 +0800 Subject: [PATCH 028/151] chore: update hard coded jurisdiction selected short code to jurisdiction existing file --- .../jurisdiction-modal-foot-note.spec.tsx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx index e70834cf920a..d8b32540ebf9 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import JurisdictionModalFootNote from '../jurisdiction-modal-foot-note'; import { render, screen } from '@testing-library/react'; import RootStore from 'Stores/index'; -import { mockStore } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionModalFootNote', () => { const mock_store = { @@ -45,7 +45,11 @@ describe('JurisdictionModalFootNote', () => { it('should render JurisdictionModalFootNote and show svg message', () => { render( - + ); expect( screen.getByText('Add your Deriv MT5 Derived account under Deriv (SVG) LLC (company no. 273 LLC 2020).') @@ -54,7 +58,11 @@ describe('JurisdictionModalFootNote', () => { it('should render JurisdictionModalFootNote without bvi_restriction and show bvi message', () => { render( - + ); expect( screen.getByText( @@ -67,7 +75,7 @@ describe('JurisdictionModalFootNote', () => { render( @@ -95,7 +103,7 @@ describe('JurisdictionModalFootNote', () => { { render( ); @@ -127,7 +135,7 @@ describe('JurisdictionModalFootNote', () => { render( @@ -155,7 +163,7 @@ describe('JurisdictionModalFootNote', () => { { render( ); @@ -187,7 +195,7 @@ describe('JurisdictionModalFootNote', () => { render( ); From a2bc7282918a92327d083d811e84d80dadd53581 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 30 Mar 2023 17:13:07 +0400 Subject: [PATCH 029/151] fix: :bug: fixes card flipping issues on other card selection --- packages/cfd/src/Components/props.types.ts | 8 ++++++++ .../jurisdiction-modal/jurisdiction-card.tsx | 15 ++++++++------- .../jurisdiction-modal-content.tsx | 4 ++++ .../jurisdiction-modal/jurisdiction-modal.tsx | 14 ++++++++++++++ packages/cfd/src/Containers/props.types.ts | 13 +++++++++++-- 5 files changed, 45 insertions(+), 9 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 7584e1fe993c..363d1cf15d63 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -68,6 +68,14 @@ export type TTradingPlatformAvailableAccount = { sub_account_type: string; }; +export type TCardFlipStatus = { + svg: boolean; + bvi: boolean; + labuan: boolean; + vanuatu: boolean; + maltainvest: boolean; +}; + export type TClickableDescription = { type: 'text' | 'link'; text: string; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index ac95e525cb3a..c1135c4fd02c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,7 +1,7 @@ import { Text, Icon } from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; -import React, { useState } from 'react'; +import React from 'react'; import { jurisdiction_contents, jurisdiction_verification_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardSection from './jurisdiction-card-section'; @@ -15,6 +15,8 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode, synthetic_available_accounts, type_of_card, + cardFlipStatus, + flipCard, }: TJurisdictionCardProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; const is_synthetic = account_type === 'synthetic'; @@ -23,14 +25,13 @@ const JurisdictionCard = ({ const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs : card_values.financial_verification_docs; - const [isCardFlipped, setIsCardFlipped] = useState(false); - + const isCardFlipped = cardFlipStatus[type_of_card]; const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; - const flipCard = () => { - setIsCardFlipped(!isCardFlipped); + const toggleCardFlip = () => { + flipCard(type_of_card); }; return ( @@ -48,7 +49,7 @@ const JurisdictionCard = ({ )} >
- +
{jurisdiction_verification_contents.shortDescription} @@ -103,7 +104,7 @@ const JurisdictionCard = ({
{card_data.map((item, index) => ( - + {index < card_data.length - 1 &&
} ))} 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 5b821e002d3c..1040da21388d 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -13,6 +13,8 @@ const JurisdictionModalContent = ({ context, real_synthetic_accounts_existing_data, real_financial_accounts_existing_data, + cardFlipStatus, + flipCard, }: TJurisdictionModalContentProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; @@ -52,6 +54,8 @@ const JurisdictionModalContent = ({ financial_available_accounts={financial_available_accounts} account_type={account_type} setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode} + cardFlipStatus={cardFlipStatus} + flipCard={flipCard} /> ) )} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 2c267dd31b98..d79b99359766 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -33,6 +33,13 @@ const JurisdictionModal = ({ has_submitted_cfd_personal_details, }: TJurisdictionModalProps) => { const [checked, setChecked] = React.useState(false); + const [cardFlipStatus, setCardFlipStatus] = React.useState({ + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }); const { poi_or_poa_not_submitted, @@ -160,6 +167,11 @@ const JurisdictionModal = ({ } } }; + + const flipCard = (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => { + setCardFlipStatus({ ...cardFlipStatus, [cardName]: !cardFlipStatus[cardName] }); + }; + const ModalContent = () => (
void; account_type: string; - type_of_card: string; + type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; disabled: boolean; + cardFlipStatus: TCardFlipStatus; + flipCard: (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => void; }; export type TJurisdictionCardSectionProps = { @@ -244,6 +251,8 @@ export type TJurisdictionModalContentProps = { real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; is_virtual: boolean; + cardFlipStatus: TCardFlipStatus; + flipCard: (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => void; }; export type TJurisdictionModalFootNoteProps = { From 66a7fc1d5dde7849c9ea4c5df17826a79541129d Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 30 Mar 2023 17:24:08 +0400 Subject: [PATCH 030/151] style: :lipstick: fixes card overflow issue while flipping --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 4c159a0ab62a..40ee8bb24c20 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -116,7 +116,7 @@ &__card-flipped-container { gap: 2rem; - margin: 4rem 2rem; + padding: 4rem 2rem; } &__card-content-container { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 4454fad5f7fa..4b5540fd592c 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -607,7 +607,7 @@ &__card-flipped-container { gap: 2rem; - margin: 4rem 2rem; + padding: 4rem 2rem; } &__card-content-container { From 6896c809797c53aea1571205974fdcd2f679ba69 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 3 Apr 2023 16:29:11 +0400 Subject: [PATCH 031/151] refactor: :art: refactors the modal code --- .../components/cfds-listing/cfds-listing.scss | 33 ++++++++++++------- .../jurisdiction-card-section.tsx | 11 ++----- .../jurisdiction-modal/jurisdiction-card.tsx | 16 ++++++--- packages/cfd/src/Containers/props.types.ts | 3 +- packages/cfd/src/sass/cfd-dashboard.scss | 33 ++++++++++++------- 5 files changed, 58 insertions(+), 38 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 40ee8bb24c20..3d7caf887810 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -194,20 +194,29 @@ } } -.cfd-card-back-section-items-container { - display: flex; - flex-direction: column; - gap: 1rem; -} +.cfd-card-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; + } -.cfd-card-back-section-main { - height: 100%; -} + &-main { + height: 100%; + } -.cfd-card-back-section-items-sub-container { - display: flex; - align-items: flex-start; - gap: 1rem; + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; + } + + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } + } } .cfd-card-section { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index f7b0d554f8be..e5d5cc00d7b7 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,15 +1,10 @@ import { Text } from '@deriv/components'; import classNames from 'classnames'; -import React, { SyntheticEvent } from 'react'; +import React from 'react'; import { TClickableDescription, TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; import { TJurisdictionCardSectionProps } from '../props.types'; -const JurisdictionCardSection = ({ cardSectionItem, flipCard }: TJurisdictionCardSectionProps) => { - const handleCardFlip = (event: SyntheticEvent) => { - event.stopPropagation(); - flipCard(); - }; - +const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdictionCardSectionProps) => { const renderTitleIndicator = (titleIndicators: TJurisdictionCardSectionTitleIndicators) => { switch (titleIndicators.type) { case 'displayText': @@ -35,7 +30,7 @@ const JurisdictionCardSection = ({ cardSectionItem, flipCard }: TJurisdictionCar switch (descriptionPart.type) { case 'link': return ( - handleCardFlip(event)}> + {descriptionPart.text} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index c1135c4fd02c..0356f0e46df5 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,7 +1,7 @@ import { Text, Icon } from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; -import React from 'react'; +import React, { SyntheticEvent } from 'react'; import { jurisdiction_contents, jurisdiction_verification_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardSection from './jurisdiction-card-section'; @@ -30,7 +30,8 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; - const toggleCardFlip = () => { + const toggleCardFlip = (event: SyntheticEvent) => { + event.stopPropagation(); flipCard(type_of_card); }; @@ -39,7 +40,7 @@ const JurisdictionCard = ({ className={classNames(card_classname, { [`${card_classname}--selected selected-card`]: jurisdiction_selected_shortcode === type_of_card, })} - onClick={disabled || isCardFlipped ? () => undefined : () => cardSelection(type_of_card)} + onClick={disabled ? () => undefined : () => cardSelection(type_of_card)} > {isCardFlipped ? (
- +
{jurisdiction_verification_contents.shortDescription} @@ -104,7 +110,7 @@ const JurisdictionCard = ({
{card_data.map((item, index) => ( - + {index < card_data.length - 1 &&
} ))} diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index c0b69e24a6ce..caaf9399fe08 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -16,6 +16,7 @@ import { TCardFlipStatus, } from '../Components/props.types'; import RootStore from '../Stores/index'; +import { SyntheticEvent } from 'react'; export type TCFDPersonalDetailsContainerProps = { account_settings: GetSettings; @@ -182,7 +183,7 @@ export type TJurisdictionCardProps = { export type TJurisdictionCardSectionProps = { cardSectionItem: TJurisdictionCardSection; - flipCard: () => void; + toggleCardFlip: (event: SyntheticEvent) => void; }; export type TVerificationStatusBannerProps = { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 4b5540fd592c..a5f63d4972d3 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -685,20 +685,29 @@ } } -.cfd-card-back-section-items-container { - display: flex; - flex-direction: column; - gap: 1rem; -} +.cfd-card-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; + } -.cfd-card-back-section-main { - height: 100%; -} + &-main { + height: 100%; + } -.cfd-card-back-section-items-sub-container { - display: flex; - align-items: flex-start; - gap: 1rem; + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; + } + + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } + } } .cfd-card-section { From 946abc655cd4ec19832446abb1eb3444477dbada Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 4 Apr 2023 11:49:04 +0400 Subject: [PATCH 032/151] fix: :bug: fixes card selection reset issue in modal --- .../Containers/jurisdiction-modal/jurisdiction-modal.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index d79b99359766..055decab7937 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -56,6 +56,13 @@ const JurisdictionModal = ({ fetchAccountSettings(); } setJurisdictionSelectedShortcode(''); + setCardFlipStatus({ + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }); } // eslint-disable-next-line react-hooks/exhaustive-deps From d0f3328ae9749e6b5047adc2e672b01c6e9d4b41 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 4 Apr 2023 16:29:11 +0400 Subject: [PATCH 033/151] refactor: :lipstick: refactors styling --- .../components/cfds-listing/cfds-listing.scss | 62 +++++++++---------- packages/cfd/src/sass/cfd-dashboard.scss | 62 +++++++++---------- 2 files changed, 60 insertions(+), 64 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 3d7caf887810..0459734e3a80 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -224,39 +224,37 @@ display: flex; flex-direction: column; gap: 0.8rem; -} - -.cfd-card-section-divider { - width: 100%; - border-bottom: 2px solid var(--border-divider); -} - -.cfd-card-section-title-indicator { - display: flex; - padding: 0.6rem 1.2rem; - color: var(--brand-white); - border-radius: $BORDER_RADIUS; - font-weight: bold; - &__red-darker { - background: var(--modal-indicator-red-darker); - } - &__red-dark { - background: var(--modal-indicator-red-dark); - } - &__red-light { - background: var(--modal-indicator-red-light); - } - &__yellow-dark { - background: var(--modal-indicator-yellow-dark); - } - &__yellow-light { - background: var(--modal-indicator-yellow-light); - } - &__violet-dark { - background: var(--modal-indicator-violet-dark); + &-divider { + width: 100%; + border-bottom: 2px solid var(--border-divider); } - &__brown-dark { - background: var(--modal-indicator-brown-dark); + &-title-indicator { + display: flex; + padding: 0.6rem 1.2rem; + color: var(--brand-white); + border-radius: $BORDER_RADIUS; + font-weight: bold; + &__red-darker { + background: var(--modal-indicator-red-darker); + } + &__red-dark { + background: var(--modal-indicator-red-dark); + } + &__red-light { + background: var(--modal-indicator-red-light); + } + &__yellow-dark { + background: var(--modal-indicator-yellow-dark); + } + &__yellow-light { + background: var(--modal-indicator-yellow-light); + } + &__violet-dark { + background: var(--modal-indicator-violet-dark); + } + &__brown-dark { + background: var(--modal-indicator-brown-dark); + } } } diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index a5f63d4972d3..393842ccd925 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -715,39 +715,37 @@ display: flex; flex-direction: column; gap: 0.8rem; -} - -.cfd-card-section-divider { - width: 100%; - border-bottom: 2px solid var(--border-divider); -} - -.cfd-card-section-title-indicator { - display: flex; - padding: 0.6rem 1.2rem; - color: var(--brand-white); - border-radius: $BORDER_RADIUS; - font-weight: bold; - &__red-darker { - background: var(--modal-indicator-red-darker); - } - &__red-dark { - background: var(--modal-indicator-red-dark); - } - &__red-light { - background: var(--modal-indicator-red-light); - } - &__yellow-dark { - background: var(--modal-indicator-yellow-dark); - } - &__yellow-light { - background: var(--modal-indicator-yellow-light); - } - &__violet-dark { - background: var(--modal-indicator-violet-dark); + &-divider { + width: 100%; + border-bottom: 2px solid var(--border-divider); } - &__brown-dark { - background: var(--modal-indicator-brown-dark); + &-title-indicator { + display: flex; + padding: 0.6rem 1.2rem; + color: var(--brand-white); + border-radius: $BORDER_RADIUS; + font-weight: bold; + &__red-darker { + background: var(--modal-indicator-red-darker); + } + &__red-dark { + background: var(--modal-indicator-red-dark); + } + &__red-light { + background: var(--modal-indicator-red-light); + } + &__yellow-dark { + background: var(--modal-indicator-yellow-dark); + } + &__yellow-light { + background: var(--modal-indicator-yellow-light); + } + &__violet-dark { + background: var(--modal-indicator-violet-dark); + } + &__brown-dark { + background: var(--modal-indicator-brown-dark); + } } } From 0550550d908c611c356a06e249ce007bd676239b Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 4 Apr 2023 17:29:10 +0400 Subject: [PATCH 034/151] refactor: :art: adds component for card title indicator --- .../jurisdiction-card-section.tsx | 28 ++++--------------- .../jurisdiction-modal/jurisdiction-modal.tsx | 4 +-- .../jurisdiction-title-indicator.tsx | 20 +++++++++++++ packages/cfd/src/Containers/props.types.ts | 12 ++++++-- 4 files changed, 36 insertions(+), 28 deletions(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index e5d5cc00d7b7..0f50332f3cd4 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,30 +1,10 @@ import { Text } from '@deriv/components'; -import classNames from 'classnames'; +import { TClickableDescription } from 'Components/props.types'; import React from 'react'; -import { TClickableDescription, TJurisdictionCardSectionTitleIndicators } from 'Components/props.types'; import { TJurisdictionCardSectionProps } from '../props.types'; +import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdictionCardSectionProps) => { - const renderTitleIndicator = (titleIndicators: TJurisdictionCardSectionTitleIndicators) => { - switch (titleIndicators.type) { - case 'displayText': - return ( -
- {titleIndicators.displayText} -
- ); - case 'displayIcons': - return ''; - default: - return ''; - } - }; - const renderClickableDescription = (clickableDescription: Array) => { return clickableDescription.map(descriptionPart => { switch (descriptionPart.type) { @@ -57,7 +37,9 @@ const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdict {cardSectionItem.title}
- {cardSectionItem.titleIndicators && renderTitleIndicator(cardSectionItem.titleIndicators)} + {cardSectionItem.titleIndicators && ( + + )}
{cardSectionItem.clickableDescription ? (
{renderClickableDescription(cardSectionItem.clickableDescription)}
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 055decab7937..17b941f3e6c6 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -5,7 +5,7 @@ import { connect } from '../../Stores/connect'; import RootStore from '../../Stores/index'; import JurisdictionModalContent from './jurisdiction-modal-content'; import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; -import { TJurisdictionModalProps } from '../props.types'; +import { MT5_Jurisdictions, TJurisdictionModalProps } from '../props.types'; import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; @@ -175,7 +175,7 @@ const JurisdictionModal = ({ } }; - const flipCard = (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => { + const flipCard = (cardName: MT5_Jurisdictions) => { setCardFlipStatus({ ...cardFlipStatus, [cardName]: !cardFlipStatus[cardName] }); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx new file mode 100644 index 000000000000..f4454d8b7d52 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -0,0 +1,20 @@ +import classNames from 'classnames'; +import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; +import React from 'react'; + +const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndicatorProps) => { + if (title_indicators.type === 'displayText') { + return ( +
+ {title_indicators.displayText} +
+ ); + } + return ; +}; +export default JurisdictionTitleIndicator; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index caaf9399fe08..245500ae6347 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -14,6 +14,7 @@ import { TExistingData, TJurisdictionCardSection, TCardFlipStatus, + TJurisdictionCardSectionTitleIndicators, } from '../Components/props.types'; import RootStore from '../Stores/index'; import { SyntheticEvent } from 'react'; @@ -29,6 +30,7 @@ export type TCFDPersonalDetailsContainerProps = { }; type CFD_Platform = 'dxtrade' | 'mt5'; +export type MT5_Jurisdictions = 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; export type TCFDChangePasswordConfirmationProps = { confirm_label?: string; @@ -175,10 +177,14 @@ export type TJurisdictionCardProps = { financial_available_accounts: TTradingPlatformAvailableAccount[]; setJurisdictionSelectedShortcode: (card_type: string) => void; account_type: string; - type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; + type_of_card: MT5_Jurisdictions; disabled: boolean; cardFlipStatus: TCardFlipStatus; - flipCard: (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => void; + flipCard: (cardName: MT5_Jurisdictions) => void; +}; + +export type TJurisdictionTitleIndicatorProps = { + title_indicators: TJurisdictionCardSectionTitleIndicators; }; export type TJurisdictionCardSectionProps = { @@ -252,7 +258,7 @@ export type TJurisdictionModalContentProps = { real_financial_accounts_existing_data: TExistingData; is_virtual: boolean; cardFlipStatus: TCardFlipStatus; - flipCard: (cardName: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest') => void; + flipCard: (cardName: MT5_Jurisdictions) => void; }; export type TJurisdictionModalFootNoteProps = { From 54762445cf97f4ecf62b5d56fe698c189677a2bc Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 11:43:04 +0400 Subject: [PATCH 035/151] refactor: :art: seperates jurisdiction verification contents --- .../src/Constants/jurisdiction-contents.ts | 49 +------------------ .../jurisdiction-verification-contents.ts | 48 ++++++++++++++++++ 2 files changed, 49 insertions(+), 48 deletions(-) create mode 100644 packages/cfd/src/Constants/jurisdiction-verification-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 1df836694614..510bd586f9c4 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -1,52 +1,5 @@ import { localize } from '@deriv/translations'; -import { - TJurisdictionCardBackSectionRequiredDocs, - TJurisdictionCardBackSectionStatusReferences, - TJurisdictionCardSection, -} from 'Components/props.types'; - -export type TJurisdictionCardBackSectionContent = { - shortDescription: string; - requiredVerificationDocs: TJurisdictionCardBackSectionRequiredDocs; - statusReferences: Array; -}; - -export const jurisdiction_verification_contents: TJurisdictionCardBackSectionContent = { - shortDescription: `${localize('We need you to submit these in order to get this account:')}`, - requiredVerificationDocs: { - documentNumber: { - icon: 'IcDocumentNumberVerification', - text: `${localize('Document number (identity card, passport)')}`, - }, - selfie: { - icon: 'IcSelfieVerification', - text: `${localize('A selfie of yourself.')}`, - }, - identityDocument: { - icon: 'IcIdentityDocumentVerification', - text: `${localize('A copy of your identity document (identity card, passport)')}`, - }, - nameAndAddress: { - icon: 'IcNameAndAddressVerification', - text: `${localize( - 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' - )}`, - }, - }, - statusReferences: [ - { - icon: 'IcVerificationStatusYellow', - text: `${localize('Your document is pending for verification.')}`, - color: 'yellow', - }, - { - icon: 'IcVerificationStatusRed', - text: `${localize('Verification failed. Resubmit during account creation.')}`, - color: 'red', - }, - { icon: 'IcVerificationStatusGreen', text: `${localize('Your document is verified.')}`, color: 'green' }, - ], -}; +import { TJurisdictionCardSection } from 'Components/props.types'; type TJurisdictionCardItems = { header: string; diff --git a/packages/cfd/src/Constants/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-verification-contents.ts new file mode 100644 index 000000000000..a8f2d7d65474 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-verification-contents.ts @@ -0,0 +1,48 @@ +import { localize } from '@deriv/translations'; +import { + TJurisdictionCardBackSectionRequiredDocs, + TJurisdictionCardBackSectionStatusReferences, +} from 'Components/props.types'; + +type TJurisdictionCardBackSectionContent = { + shortDescription: string; + requiredVerificationDocs: TJurisdictionCardBackSectionRequiredDocs; + statusReferences: Array; +}; + +export const jurisdiction_verification_contents: TJurisdictionCardBackSectionContent = { + shortDescription: `${localize('We need you to submit these in order to get this account:')}`, + requiredVerificationDocs: { + documentNumber: { + icon: 'IcDocumentNumberVerification', + text: `${localize('Document number (identity card, passport)')}`, + }, + selfie: { + icon: 'IcSelfieVerification', + text: `${localize('A selfie of yourself.')}`, + }, + identityDocument: { + icon: 'IcIdentityDocumentVerification', + text: `${localize('A copy of your identity document (identity card, passport)')}`, + }, + nameAndAddress: { + icon: 'IcNameAndAddressVerification', + text: `${localize( + 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' + )}`, + }, + }, + statusReferences: [ + { + icon: 'IcVerificationStatusYellow', + text: `${localize('Your document is pending for verification.')}`, + color: 'yellow', + }, + { + icon: 'IcVerificationStatusRed', + text: `${localize('Verification failed. Resubmit during account creation.')}`, + color: 'red', + }, + { icon: 'IcVerificationStatusGreen', text: `${localize('Your document is verified.')}`, color: 'green' }, + ], +}; From 87207c0b60c8ee539c9c87cbf3def9ecdad82dd2 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 11:46:11 +0400 Subject: [PATCH 036/151] refactor: :art: divides jurisdiction component to smaller components --- .../jurisdiction-card-section.tsx | 31 +++---------------- .../jurisdiction-modal/jurisdiction-card.tsx | 3 +- .../jurisdiction-clickable-description.tsx | 29 +++++++++++++++++ .../jurisdiction-title-indicator.tsx | 25 +++++++-------- packages/cfd/src/Containers/props.types.ts | 6 ++++ 5 files changed, 54 insertions(+), 40 deletions(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 0f50332f3cd4..2da4170acef7 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,34 +1,10 @@ import { Text } from '@deriv/components'; -import { TClickableDescription } from 'Components/props.types'; import React from 'react'; import { TJurisdictionCardSectionProps } from '../props.types'; +import JurisdictionClickableDescription from './jurisdiction-clickable-description'; import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdictionCardSectionProps) => { - const renderClickableDescription = (clickableDescription: Array) => { - return clickableDescription.map(descriptionPart => { - switch (descriptionPart.type) { - case 'link': - return ( - - - {descriptionPart.text} - -   - - ); - case 'text': - return ( - - {descriptionPart.text} - - ); - default: - return ''; - } - }); - }; - return (
@@ -42,7 +18,10 @@ const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdict )}
{cardSectionItem.clickableDescription ? ( -
{renderClickableDescription(cardSectionItem.clickableDescription)}
+ ) : ( cardSectionItem.description && ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 0356f0e46df5..56daf3973250 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,8 +1,9 @@ import { Text, Icon } from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; +import { jurisdiction_verification_contents } from 'Constants/jurisdiction-verification-contents'; import React, { SyntheticEvent } from 'react'; -import { jurisdiction_contents, jurisdiction_verification_contents } from '../../Constants/jurisdiction-contents'; +import { jurisdiction_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardSection from './jurisdiction-card-section'; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx new file mode 100644 index 000000000000..e309794b68a4 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -0,0 +1,29 @@ +import { Text } from '@deriv/components'; +import { TJurisdictionClickableDescriptionProps } from 'Containers/props.types'; +import React from 'react'; + +const JurisdictionClickableDescription = ({ + clickable_description, + toggleCardFlip, +}: TJurisdictionClickableDescriptionProps) => { + return ( +
+ {clickable_description.map(description_part => { + return description_part.type === 'link' ? ( + + + {description_part.text} + +   + + ) : ( + + {description_part.text} + + ); + })} +
+ ); +}; + +export default JurisdictionClickableDescription; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index f4454d8b7d52..9ab660f0abbc 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -3,18 +3,17 @@ import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; import React from 'react'; const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndicatorProps) => { - if (title_indicators.type === 'displayText') { - return ( -
- {title_indicators.displayText} -
- ); - } - return ; + return title_indicators.type === 'displayText' ? ( +
+ {title_indicators.displayText} +
+ ) : ( +
{title_indicators.displayIcons?.map(display_icon => display_icon)}
+ ); }; export default JurisdictionTitleIndicator; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 245500ae6347..c82be62371e4 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -15,6 +15,7 @@ import { TJurisdictionCardSection, TCardFlipStatus, TJurisdictionCardSectionTitleIndicators, + TClickableDescription, } from '../Components/props.types'; import RootStore from '../Stores/index'; import { SyntheticEvent } from 'react'; @@ -183,6 +184,11 @@ export type TJurisdictionCardProps = { flipCard: (cardName: MT5_Jurisdictions) => void; }; +export type TJurisdictionClickableDescriptionProps = { + clickable_description: Array; + toggleCardFlip: (event: SyntheticEvent) => void; +}; + export type TJurisdictionTitleIndicatorProps = { title_indicators: TJurisdictionCardSectionTitleIndicators; }; From 2a20d18cfd75d495c37a1a8b6970ecf7ec43cfd5 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 13:03:41 +0400 Subject: [PATCH 037/151] refactor: :art: renames variable to follow convention --- .../Containers/jurisdiction-modal/jurisdiction-card.tsx | 6 +++--- .../jurisdiction-modal/jurisdiction-modal-content.tsx | 4 ++-- .../Containers/jurisdiction-modal/jurisdiction-modal.tsx | 8 ++++---- packages/cfd/src/Containers/props.types.ts | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 56daf3973250..e48ef3682421 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -16,7 +16,7 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode, synthetic_available_accounts, type_of_card, - cardFlipStatus, + card_flip_status, flipCard, }: TJurisdictionCardProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; @@ -26,7 +26,7 @@ const JurisdictionCard = ({ const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs : card_values.financial_verification_docs; - const isCardFlipped = cardFlipStatus[type_of_card]; + const is_card_flipped = card_flip_status[type_of_card]; const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; @@ -43,7 +43,7 @@ const JurisdictionCard = ({ })} onClick={disabled ? () => undefined : () => cardSelection(type_of_card)} > - {isCardFlipped ? ( + {is_card_flipped ? (
{ const card_classname = `cfd-jurisdiction-card--${account_type}`; @@ -54,7 +54,7 @@ const JurisdictionModalContent = ({ financial_available_accounts={financial_available_accounts} account_type={account_type} setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode} - cardFlipStatus={cardFlipStatus} + card_flip_status={card_flip_status} flipCard={flipCard} /> ) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 17b941f3e6c6..c490425ce8d2 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -33,7 +33,7 @@ const JurisdictionModal = ({ has_submitted_cfd_personal_details, }: TJurisdictionModalProps) => { const [checked, setChecked] = React.useState(false); - const [cardFlipStatus, setCardFlipStatus] = React.useState({ + const [card_flip_status, setCardFlipStatus] = React.useState({ svg: false, bvi: false, vanuatu: false, @@ -175,8 +175,8 @@ const JurisdictionModal = ({ } }; - const flipCard = (cardName: MT5_Jurisdictions) => { - setCardFlipStatus({ ...cardFlipStatus, [cardName]: !cardFlipStatus[cardName] }); + const flipCard = (card_name: MT5_Jurisdictions) => { + setCardFlipStatus({ ...card_flip_status, [card_name]: !card_flip_status[card_name] }); }; const ModalContent = () => ( @@ -191,7 +191,7 @@ const JurisdictionModal = ({ context={context} setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode} synthetic_available_accounts={synthetic_available_accounts} - cardFlipStatus={cardFlipStatus} + card_flip_status={card_flip_status} flipCard={flipCard} />
diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index c82be62371e4..1207856e1f0d 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -180,7 +180,7 @@ export type TJurisdictionCardProps = { account_type: string; type_of_card: MT5_Jurisdictions; disabled: boolean; - cardFlipStatus: TCardFlipStatus; + card_flip_status: TCardFlipStatus; flipCard: (cardName: MT5_Jurisdictions) => void; }; @@ -263,7 +263,7 @@ export type TJurisdictionModalContentProps = { real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; is_virtual: boolean; - cardFlipStatus: TCardFlipStatus; + card_flip_status: TCardFlipStatus; flipCard: (cardName: MT5_Jurisdictions) => void; }; From 2da0526593e607670e0596088cc1d575e295277f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 15:02:31 +0400 Subject: [PATCH 038/151] refactor: :art: renames the variables as per convention --- packages/cfd/src/Components/props.types.ts | 21 +- .../src/Constants/jurisdiction-contents.ts | 182 +++++++++--------- .../jurisdiction-verification-contents.ts | 18 +- .../jurisdiction-card-section.tsx | 8 +- .../jurisdiction-modal/jurisdiction-card.tsx | 8 +- .../jurisdiction-title-indicator.tsx | 6 +- 6 files changed, 123 insertions(+), 120 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 363d1cf15d63..f73c17d3a85c 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -79,22 +79,21 @@ export type TCardFlipStatus = { export type TClickableDescription = { type: 'text' | 'link'; text: string; - linkData?: string; }; export type TJurisdictionCardSectionTitleIndicators = { type: 'displayText' | 'displayIcons'; - displayText?: string; - displayTextSkinColor?: string; - displayIcons?: Array; + display_text?: string; + display_text_skin_color?: string; + display_icons?: Array; }; export type TJurisdictionCardSection = { key: string; title: string; - titleIndicators?: TJurisdictionCardSectionTitleIndicators; + title_indicators?: TJurisdictionCardSectionTitleIndicators; description?: string; - clickableDescription?: Array; + clickable_description?: Array; }; export type TJurisdictionCardBackRequiredDocsItem = { @@ -103,16 +102,18 @@ export type TJurisdictionCardBackRequiredDocsItem = { }; export type TJurisdictionCardBackSectionRequiredDocs = { - documentNumber?: TJurisdictionCardBackRequiredDocsItem; + document_number?: TJurisdictionCardBackRequiredDocsItem; selfie?: TJurisdictionCardBackRequiredDocsItem; - identityDocument?: TJurisdictionCardBackRequiredDocsItem; - nameAndAddress?: TJurisdictionCardBackRequiredDocsItem; + identity_document?: TJurisdictionCardBackRequiredDocsItem; + name_and_address?: TJurisdictionCardBackRequiredDocsItem; }; +type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green'; + export type TJurisdictionCardBackSectionStatusReferences = { icon: string; text: string; - color: 'yellow' | 'red' | 'green'; + color: TJurisdictionVerificationColors; }; export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[]; diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 510bd586f9c4..297edf235f51 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -1,14 +1,16 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardSection } from 'Components/props.types'; +type TJurisdictionCardItemVerification = Array<'document_number' | 'selfie' | 'identity_document' | 'name_and_address'>; + type TJurisdictionCardItems = { header: string; over_header?: string; synthetic_contents: Array; financial_contents: Array; is_over_header_available: boolean; - synthetic_verification_docs?: Array<'documentNumber' | 'selfie' | 'identityDocument' | 'nameAndAddress'>; - financial_verification_docs?: Array<'documentNumber' | 'selfie' | 'identityDocument' | 'nameAndAddress'>; + synthetic_verification_docs?: TJurisdictionCardItemVerification; + financial_verification_docs?: TJurisdictionCardItemVerification; }; type TJurisdictionContent = { @@ -28,19 +30,19 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('40+')}`, - displayTextSkinColor: 'red-darker', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { @@ -61,28 +63,28 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('170+')}`, - displayTextSkinColor: 'red-light', + display_text: `${localize('170+')}`, + display_text_skin_color: 'red-light', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.6 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.6 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { @@ -107,25 +109,25 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('40+')}`, - displayTextSkinColor: 'red-darker', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -143,34 +145,34 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('170+')}`, - displayTextSkinColor: 'red-light', + display_text: `${localize('170+')}`, + display_text_skin_color: 'red-light', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.5 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -183,8 +185,8 @@ export const jurisdiction_contents: TJurisdictionContent = { )}`, }, ], - synthetic_verification_docs: ['documentNumber', 'nameAndAddress'], - financial_verification_docs: ['documentNumber', 'nameAndAddress'], + synthetic_verification_docs: ['document_number', 'name_and_address'], + financial_verification_docs: ['document_number', 'name_and_address'], }, vanuatu: { is_over_header_available: false, @@ -194,25 +196,25 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Synthetics, Basket indices and Derived FX')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('40+')}`, - displayTextSkinColor: 'red-darker', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -228,34 +230,34 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex, Stock indices, Commodities and Cryptocurrencies')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('90+')}`, - displayTextSkinColor: 'red-dark', + display_text: `${localize('90+')}`, + display_text_skin_color: 'red-dark', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:1000')}`, - displayTextSkinColor: 'yellow-light', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.5 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -266,8 +268,8 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Vanuatu Financial Services Commission')}`, }, ], - synthetic_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], - financial_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], + synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], + financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], }, labuan: { over_header: localize('Straight-through processing'), @@ -283,7 +285,7 @@ export const jurisdiction_contents: TJurisdictionContent = { { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -299,34 +301,34 @@ export const jurisdiction_contents: TJurisdictionContent = { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('90+')}`, - displayTextSkinColor: 'red-dark', + display_text: `${localize('90+')}`, + display_text_skin_color: 'red-dark', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:100')}`, - displayTextSkinColor: 'yellow-dark', + display_text: `${localize('1:100')}`, + display_text_skin_color: 'yellow-dark', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.6 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.6 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -337,8 +339,8 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, ], - synthetic_verification_docs: ['documentNumber', 'nameAndAddress'], - financial_verification_docs: ['documentNumber', 'nameAndAddress'], + synthetic_verification_docs: ['document_number', 'name_and_address'], + financial_verification_docs: ['document_number', 'name_and_address'], }, maltainvest: { is_over_header_available: false, @@ -350,34 +352,34 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize( 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' )}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('140+')}`, - displayTextSkinColor: 'red-light', + display_text: `${localize('140+')}`, + display_text_skin_color: 'red-light', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:30')}`, - displayTextSkinColor: 'brown-dark', + display_text: `${localize('1:30')}`, + display_text_skin_color: 'brown-dark', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.5 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -395,34 +397,34 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize( 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' )}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('140+')}`, - displayTextSkinColor: 'red-light', + display_text: `${localize('140+')}`, + display_text_skin_color: 'red-light', }, }, { key: 'leverage', title: `${localize('Leverage')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('1:30')}`, - displayTextSkinColor: 'brown-dark', + display_text: `${localize('1:30')}`, + display_text_skin_color: 'brown-dark', }, }, { key: 'spreadsFrom', title: `${localize('Spreads from')}`, - titleIndicators: { + title_indicators: { type: 'displayText', - displayText: `${localize('0.5 pips')}`, - displayTextSkinColor: 'violet-dark', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', }, }, { key: 'verifications', title: `${localize('Verifications')}`, - clickableDescription: [ + clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, ], @@ -433,7 +435,7 @@ export const jurisdiction_contents: TJurisdictionContent = { description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, ], - synthetic_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], - financial_verification_docs: ['selfie', 'identityDocument', 'nameAndAddress'], + synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], + financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], }, }; diff --git a/packages/cfd/src/Constants/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-verification-contents.ts index a8f2d7d65474..768bde748829 100644 --- a/packages/cfd/src/Constants/jurisdiction-verification-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-verification-contents.ts @@ -5,15 +5,15 @@ import { } from 'Components/props.types'; type TJurisdictionCardBackSectionContent = { - shortDescription: string; - requiredVerificationDocs: TJurisdictionCardBackSectionRequiredDocs; - statusReferences: Array; + short_description: string; + required_verification_docs: TJurisdictionCardBackSectionRequiredDocs; + status_references: Array; }; export const jurisdiction_verification_contents: TJurisdictionCardBackSectionContent = { - shortDescription: `${localize('We need you to submit these in order to get this account:')}`, - requiredVerificationDocs: { - documentNumber: { + short_description: `${localize('We need you to submit these in order to get this account:')}`, + required_verification_docs: { + document_number: { icon: 'IcDocumentNumberVerification', text: `${localize('Document number (identity card, passport)')}`, }, @@ -21,18 +21,18 @@ export const jurisdiction_verification_contents: TJurisdictionCardBackSectionCon icon: 'IcSelfieVerification', text: `${localize('A selfie of yourself.')}`, }, - identityDocument: { + identity_document: { icon: 'IcIdentityDocumentVerification', text: `${localize('A copy of your identity document (identity card, passport)')}`, }, - nameAndAddress: { + name_and_address: { icon: 'IcNameAndAddressVerification', text: `${localize( 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' )}`, }, }, - statusReferences: [ + status_references: [ { icon: 'IcVerificationStatusYellow', text: `${localize('Your document is pending for verification.')}`, diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 2da4170acef7..65553d7e3cad 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -13,13 +13,13 @@ const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdict {cardSectionItem.title}
- {cardSectionItem.titleIndicators && ( - + {cardSectionItem.title_indicators && ( + )}
- {cardSectionItem.clickableDescription ? ( + {cardSectionItem.clickable_description ? ( ) : ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index e48ef3682421..cf5e495b337d 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -59,7 +59,7 @@ const JurisdictionCard = ({ />
- {jurisdiction_verification_contents.shortDescription} + {jurisdiction_verification_contents.short_description}
{verification_docs?.map(verificationItem => ( @@ -67,7 +67,7 @@ const JurisdictionCard = ({
{ - jurisdiction_verification_contents.requiredVerificationDocs[verificationItem] + jurisdiction_verification_contents.required_verification_docs[verificationItem] ?.text } @@ -84,7 +84,7 @@ const JurisdictionCard = ({
- {jurisdiction_verification_contents.statusReferences.map(statusItem => ( + {jurisdiction_verification_contents.status_references.map(statusItem => (
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 9ab660f0abbc..2e43c7a3456a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -7,13 +7,13 @@ const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndi
- {title_indicators.displayText} + {title_indicators.display_text}
) : ( -
{title_indicators.displayIcons?.map(display_icon => display_icon)}
+
{title_indicators.display_icons?.map(display_icon => display_icon)}
); }; export default JurisdictionTitleIndicator; From 92872c2841a4957e1a4b36e41cf43b1331aa2111 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 15:41:38 +0400 Subject: [PATCH 039/151] refactor: :art: renames the variables as per convention --- .../jurisdiction-card-section.tsx | 16 ++++++++-------- .../jurisdiction-modal/jurisdiction-card.tsx | 18 +++++++++--------- packages/cfd/src/Containers/props.types.ts | 2 +- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 65553d7e3cad..6ae06762b75a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -4,28 +4,28 @@ import { TJurisdictionCardSectionProps } from '../props.types'; import JurisdictionClickableDescription from './jurisdiction-clickable-description'; import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; -const JurisdictionCardSection = ({ cardSectionItem, toggleCardFlip }: TJurisdictionCardSectionProps) => { +const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdictionCardSectionProps) => { return (
- {cardSectionItem.title} + {card_section_item.title}
- {cardSectionItem.title_indicators && ( - + {card_section_item.title_indicators && ( + )}
- {cardSectionItem.clickable_description ? ( + {card_section_item.clickable_description ? ( ) : ( - cardSectionItem.description && ( + card_section_item.description && ( - {cardSectionItem.description} + {card_section_item.description} ) )} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index cf5e495b337d..925f90e17fcc 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -62,20 +62,20 @@ const JurisdictionCard = ({ {jurisdiction_verification_contents.short_description}
- {verification_docs?.map(verificationItem => ( -
+ {verification_docs?.map(verification_item => ( +
{ - jurisdiction_verification_contents.required_verification_docs[verificationItem] + jurisdiction_verification_contents.required_verification_docs[verification_item] ?.text } @@ -84,13 +84,13 @@ const JurisdictionCard = ({
- {jurisdiction_verification_contents.status_references.map(statusItem => ( -
+ {jurisdiction_verification_contents.status_references.map(status_item => ( +
- +
- {statusItem.text} + {status_item.text}
))} @@ -111,7 +111,7 @@ const JurisdictionCard = ({
{card_data.map((item, index) => ( - + {index < card_data.length - 1 &&
} ))} diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 1207856e1f0d..0b6f90313cb5 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -194,7 +194,7 @@ export type TJurisdictionTitleIndicatorProps = { }; export type TJurisdictionCardSectionProps = { - cardSectionItem: TJurisdictionCardSection; + card_section_item: TJurisdictionCardSection; toggleCardFlip: (event: SyntheticEvent) => void; }; From 0ee1cbabc96a8da785780c3d432c6ebf4e5d192b Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 16:42:51 +0400 Subject: [PATCH 040/151] refactor: :art: removes unwanted code --- .../jurisdiction-modal/jurisdiction-modal-foot-note.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 4ce9a1f23d30..2d1a82651c77 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 @@ -67,7 +67,7 @@ const FooterNote = ({ }; const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { - return props.jurisdiction_selected_shortcode ? ( + return (
{
- ) : ( - ); }; From f45554f830b33f8778149dddf47ff0876e4c628a Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 5 Apr 2023 17:35:34 +0400 Subject: [PATCH 041/151] style: :lipstick: adds dark theme color support for icons --- .../src/components/icon/common/ic-back-button.svg | 2 +- .../icon/common/ic-document-number-verification.svg | 8 ++++---- .../icon/common/ic-identity-document-verification.svg | 10 +++++----- .../icon/common/ic-name-and-address-verification.svg | 2 +- .../components/icon/common/ic-selfie-verification.svg | 4 ++-- packages/shared/src/styles/constants.scss | 2 +- packages/shared/src/styles/themes.scss | 2 +- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/components/src/components/icon/common/ic-back-button.svg b/packages/components/src/components/icon/common/ic-back-button.svg index 503d59824f6a..d659f2fdd853 100644 --- a/packages/components/src/components/icon/common/ic-back-button.svg +++ b/packages/components/src/components/icon/common/ic-back-button.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/components/src/components/icon/common/ic-document-number-verification.svg b/packages/components/src/components/icon/common/ic-document-number-verification.svg index 509b88ebf9b8..2126c0107e44 100644 --- a/packages/components/src/components/icon/common/ic-document-number-verification.svg +++ b/packages/components/src/components/icon/common/ic-document-number-verification.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification.svg b/packages/components/src/components/icon/common/ic-identity-document-verification.svg index 9524e28e095c..ecf0716f82e3 100644 --- a/packages/components/src/components/icon/common/ic-identity-document-verification.svg +++ b/packages/components/src/components/icon/common/ic-identity-document-verification.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg index 658e5b931a87..8c65efa9e8f9 100644 --- a/packages/components/src/components/icon/common/ic-name-and-address-verification.svg +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/components/src/components/icon/common/ic-selfie-verification.svg b/packages/components/src/components/icon/common/ic-selfie-verification.svg index 01b4c85cc764..917cce72a6e3 100644 --- a/packages/components/src/components/icon/common/ic-selfie-verification.svg +++ b/packages/components/src/components/icon/common/ic-selfie-verification.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index 95f3b138bc57..ceb0cd69e8bf 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -41,7 +41,7 @@ $color_grey-9: #868686; $color-grey-10: #919191; $color-grey-11: #fafafa; $color-grey-12: #f5f7fa; -$color-grey-12: #2e2e2e; +$color-grey-13: #2e2e2e; $color-green: #85acb0; $color-green-1: #4bb4b3; $color-green-2: #3d9494; diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 0a773ff2ab20..fe00f030d155 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -268,7 +268,7 @@ --border-hover-1: #{$color-black-9}; --border-active: var(--brand-secondary); --border-disabled: #{$color-black-4}; - --border-divider: #{$color-grey-12}; + --border-divider: #{$color-grey-13}; // Fill --fill-normal: #{$color-black}; --fill-hover: #{$color-grey-7}; From a844899b4bf438e3e91531fee503bfc4d699942b Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 08:05:48 +0400 Subject: [PATCH 042/151] style: :lipstick: fixes styling to match with design --- .../src/components/cfds-listing/cfds-listing.scss | 4 ++-- .../Containers/jurisdiction-modal/jurisdiction-card.tsx | 8 +++++++- packages/cfd/src/sass/cfd-dashboard.scss | 4 ++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 0459734e3a80..1e79f4ee3583 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -106,8 +106,8 @@ &__h2-header { text-align: center; - min-height: 8rem; - margin: 0rem 2rem; + min-height: 5rem; + margin: 1rem 2rem; @include mobile { margin-bottom: 2rem; min-height: auto; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 925f90e17fcc..f3371c41fd22 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -105,7 +105,13 @@ const JurisdictionCard = ({ ) : (
)} - +
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 393842ccd925..40bb41d8f89d 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -597,8 +597,8 @@ &__h2-header { text-align: center; - min-height: 8rem; - margin: 0rem 2rem; + min-height: 5rem; + margin: 1rem 2rem; @include mobile { margin-bottom: 2rem; min-height: auto; From 896c44915028e73f1285a4c35b7bccec05717b9a Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 08:56:29 +0400 Subject: [PATCH 043/151] perf: :zap: compresses svgs using svgo library --- .../src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- .../src/components/icon/common/ic-back-button.svg | 4 +--- .../icon/common/ic-document-number-verification.svg | 7 +------ .../icon/common/ic-identity-document-verification.svg | 8 +------- .../icon/common/ic-name-and-address-verification.svg | 4 +--- .../src/components/icon/common/ic-selfie-verification.svg | 5 +---- .../icon/common/ic-verification-status-green.svg | 5 +---- .../components/icon/common/ic-verification-status-red.svg | 5 +---- .../icon/common/ic-verification-status-yellow.svg | 6 +----- 10 files changed, 10 insertions(+), 38 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 1e79f4ee3583..c61a53cd5069 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: 48rem; + min-height: 50rem; width: 26rem; cursor: pointer; @include mobile { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 40bb41d8f89d..deb968d455a1 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -494,7 +494,7 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 48rem; + min-height: 50rem; width: 26rem; cursor: pointer; @include mobile { diff --git a/packages/components/src/components/icon/common/ic-back-button.svg b/packages/components/src/components/icon/common/ic-back-button.svg index d659f2fdd853..0902560ffe09 100644 --- a/packages/components/src/components/icon/common/ic-back-button.svg +++ b/packages/components/src/components/icon/common/ic-back-button.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-document-number-verification.svg b/packages/components/src/components/icon/common/ic-document-number-verification.svg index 2126c0107e44..7f6683a48dba 100644 --- a/packages/components/src/components/icon/common/ic-document-number-verification.svg +++ b/packages/components/src/components/icon/common/ic-document-number-verification.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification.svg b/packages/components/src/components/icon/common/ic-identity-document-verification.svg index ecf0716f82e3..77e05efd57ad 100644 --- a/packages/components/src/components/icon/common/ic-identity-document-verification.svg +++ b/packages/components/src/components/icon/common/ic-identity-document-verification.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg index 8c65efa9e8f9..2e17b0efa157 100644 --- a/packages/components/src/components/icon/common/ic-name-and-address-verification.svg +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-selfie-verification.svg b/packages/components/src/components/icon/common/ic-selfie-verification.svg index 917cce72a6e3..39d2bbe8c782 100644 --- a/packages/components/src/components/icon/common/ic-selfie-verification.svg +++ b/packages/components/src/components/icon/common/ic-selfie-verification.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-verification-status-green.svg b/packages/components/src/components/icon/common/ic-verification-status-green.svg index 3e76c17e92b3..dc5a246bb465 100644 --- a/packages/components/src/components/icon/common/ic-verification-status-green.svg +++ b/packages/components/src/components/icon/common/ic-verification-status-green.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-verification-status-red.svg b/packages/components/src/components/icon/common/ic-verification-status-red.svg index f1f78ac1fc61..ea745e409fd3 100644 --- a/packages/components/src/components/icon/common/ic-verification-status-red.svg +++ b/packages/components/src/components/icon/common/ic-verification-status-red.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-verification-status-yellow.svg b/packages/components/src/components/icon/common/ic-verification-status-yellow.svg index 5946c1fec2ac..5cca88db6d2d 100644 --- a/packages/components/src/components/icon/common/ic-verification-status-yellow.svg +++ b/packages/components/src/components/icon/common/ic-verification-status-yellow.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file From efdf7f9187efdcf6890087fbb91e510b8a599f4f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 09:11:22 +0400 Subject: [PATCH 044/151] fix: :bug: fixes displaying of empty container in mobile view --- .../jurisdiction-modal/jurisdiction-modal-foot-note.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 2d1a82651c77..d88c0abf29ff 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 @@ -67,7 +67,7 @@ const FooterNote = ({ }; const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { - return ( + return !props.jurisdiction_selected_shortcode ? (
{
+ ) : ( + ); }; From 0e6509c48ed86523e1e3d4aa9516f3b79a107632 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 09:16:15 +0400 Subject: [PATCH 045/151] fix: :bug: fixes displaying of empty container in mobile view --- .../jurisdiction-modal/jurisdiction-modal-foot-note.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d88c0abf29ff..4ce9a1f23d30 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 @@ -67,7 +67,7 @@ const FooterNote = ({ }; const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { - return !props.jurisdiction_selected_shortcode ? ( + return props.jurisdiction_selected_shortcode ? (
Date: Thu, 6 Apr 2023 09:26:16 +0400 Subject: [PATCH 046/151] style: :lipstick: refactors margin css usage --- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index deb968d455a1..5a1d6f5d68fa 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -621,7 +621,7 @@ flex-direction: column; gap: 1.2rem; height: 100%; - margin: 0rem 2rem 2rem 2rem; + margin: 0rem 2rem 2rem; } &__footer-wrapper { From cbac69b3941cfe192c6fd51a4351cd2b328f1163 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 10:04:58 +0400 Subject: [PATCH 047/151] style: :lipstick: refactors min-height css --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index c61a53cd5069..b5e7fa782a80 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -139,7 +139,7 @@ flex-direction: column; justify-content: space-between; @include mobile { - min-height: 0; + min-height: auto; background-color: var(--general-main-1); width: 100%; height: 100%; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 5a1d6f5d68fa..bcbc428940d7 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -630,7 +630,7 @@ flex-direction: column; justify-content: space-between; @include mobile { - min-height: 0; + min-height: auto; background-color: var(--general-main-1); width: 100%; height: 100%; From 9f7c25b53c10a974137926dff7089ddc5989d9a2 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 10:31:47 +0400 Subject: [PATCH 048/151] refactor: :art: breaks the jurisdiction content file to smaller files --- packages/cfd/src/Components/props.types.ts | 12 + .../Constants/jurisdiction-bvi-contents.ts | 90 ++++ .../src/Constants/jurisdiction-contents.ts | 441 +----------------- .../Constants/jurisdiction-labuan-contents.ts | 74 +++ .../Constants/jurisdiction-svg-contents.ts | 82 ++++ .../jurisdiction-vanuatu-contents.ts | 86 ++++ .../jurisdiction_maltainvest_contents.ts | 95 ++++ 7 files changed, 450 insertions(+), 430 deletions(-) create mode 100644 packages/cfd/src/Constants/jurisdiction-bvi-contents.ts create mode 100644 packages/cfd/src/Constants/jurisdiction-labuan-contents.ts create mode 100644 packages/cfd/src/Constants/jurisdiction-svg-contents.ts create mode 100644 packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts create mode 100644 packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index f73c17d3a85c..90269df915a1 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -96,6 +96,18 @@ export type TJurisdictionCardSection = { clickable_description?: Array; }; +type TJurisdictionCardItemVerification = Array<'document_number' | 'selfie' | 'identity_document' | 'name_and_address'>; + +export type TJurisdictionCardItems = { + header: string; + over_header?: string; + synthetic_contents: Array; + financial_contents: Array; + is_over_header_available: boolean; + synthetic_verification_docs?: TJurisdictionCardItemVerification; + financial_verification_docs?: TJurisdictionCardItemVerification; +}; + export type TJurisdictionCardBackRequiredDocsItem = { icon: string; text: string; diff --git a/packages/cfd/src/Constants/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-bvi-contents.ts new file mode 100644 index 000000000000..fb00999e7dc2 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-bvi-contents.ts @@ -0,0 +1,90 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdiction_bvi_contents: TJurisdictionCardItems = { + is_over_header_available: false, + header: localize('British Virgin Islands'), + synthetic_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize( + 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' + )}`, + }, + ], + financial_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('170+')}`, + display_text_skin_color: 'red-light', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize( + 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' + )}`, + }, + ], + synthetic_verification_docs: ['document_number', 'name_and_address'], + financial_verification_docs: ['document_number', 'name_and_address'], +}; diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents.ts index 297edf235f51..95f967cc4e48 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents.ts @@ -1,17 +1,9 @@ -import { localize } from '@deriv/translations'; -import { TJurisdictionCardSection } from 'Components/props.types'; - -type TJurisdictionCardItemVerification = Array<'document_number' | 'selfie' | 'identity_document' | 'name_and_address'>; - -type TJurisdictionCardItems = { - header: string; - over_header?: string; - synthetic_contents: Array; - financial_contents: Array; - is_over_header_available: boolean; - synthetic_verification_docs?: TJurisdictionCardItemVerification; - financial_verification_docs?: TJurisdictionCardItemVerification; -}; +import { TJurisdictionCardItems } from 'Components/props.types'; +import { jurisdiction_bvi_contents } from './jurisdiction-bvi-contents'; +import { jurisdiction_labuan_contents } from './jurisdiction-labuan-contents'; +import { jurisdiction_svg_contents } from './jurisdiction-svg-contents'; +import { jurisdiction_vanuatu_contents } from './jurisdiction-vanuatu-contents'; +import { jurisdiction_maltainvest_contents } from './jurisdiction_maltainvest_contents'; type TJurisdictionContent = { svg: TJurisdictionCardItems; @@ -22,420 +14,9 @@ type TJurisdictionContent = { }; export const jurisdiction_contents: TJurisdictionContent = { - svg: { - is_over_header_available: false, - header: localize('St. Vincent & Grenadines'), - synthetic_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Synthetics, Basket indices and Derived FX')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('40+')}`, - display_text_skin_color: 'red-darker', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - description: `${localize( - 'You will need to submit proof of identity and address once you reach certain thresholds.' - )}`, - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, - }, - ], - financial_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('170+')}`, - display_text_skin_color: 'red-light', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.6 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - description: `${localize( - 'You will need to submit proof of identity and address once you reach certain thresholds.' - )}`, - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, - }, - ], - }, - bvi: { - is_over_header_available: false, - header: localize('British Virgin Islands'), - synthetic_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Synthetics, Basket indices and Derived FX')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('40+')}`, - display_text_skin_color: 'red-darker', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize( - 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' - )}`, - }, - ], - financial_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('170+')}`, - display_text_skin_color: 'red-light', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.5 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize( - 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' - )}`, - }, - ], - synthetic_verification_docs: ['document_number', 'name_and_address'], - financial_verification_docs: ['document_number', 'name_and_address'], - }, - vanuatu: { - is_over_header_available: false, - header: localize('Vanuatu'), - synthetic_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Synthetics, Basket indices and Derived FX')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('40+')}`, - display_text_skin_color: 'red-darker', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Vanuatu Financial Services Commission')}`, - }, - ], - financial_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Forex, Stock indices, Commodities and Cryptocurrencies')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('90+')}`, - display_text_skin_color: 'red-dark', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:1000')}`, - display_text_skin_color: 'yellow-light', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.5 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Vanuatu Financial Services Commission')}`, - }, - ], - synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], - financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], - }, - labuan: { - over_header: localize('Straight-through processing'), - is_over_header_available: true, - header: localize('Labuan'), - synthetic_contents: [ - { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}` }, - { key: 'leverage', title: `${localize('Leverage')}` }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, - }, - ], - financial_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize('Forex and Cryptocurrencies')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('90+')}`, - display_text_skin_color: 'red-dark', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:100')}`, - display_text_skin_color: 'yellow-dark', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.6 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, - }, - ], - synthetic_verification_docs: ['document_number', 'name_and_address'], - financial_verification_docs: ['document_number', 'name_and_address'], - }, - maltainvest: { - is_over_header_available: false, - header: localize('Malta'), - synthetic_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize( - 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' - )}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('140+')}`, - display_text_skin_color: 'red-light', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:30')}`, - display_text_skin_color: 'brown-dark', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.5 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, - }, - ], - financial_contents: [ - { - key: 'assets', - title: `${localize('Assets')}`, - description: `${localize( - 'Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies' - )}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('140+')}`, - display_text_skin_color: 'red-light', - }, - }, - { - key: 'leverage', - title: `${localize('Leverage')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('1:30')}`, - display_text_skin_color: 'brown-dark', - }, - }, - { - key: 'spreadsFrom', - title: `${localize('Spreads from')}`, - title_indicators: { - type: 'displayText', - display_text: `${localize('0.5 pips')}`, - display_text_skin_color: 'violet-dark', - }, - }, - { - key: 'verifications', - title: `${localize('Verifications')}`, - clickable_description: [ - { type: 'link', text: `${localize('Learn more')}` }, - { type: 'text', text: `${localize('about verifications needed.')}` }, - ], - }, - { - key: 'regulatorEdr', - title: `${localize('Regulator/EDR')}`, - description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, - }, - ], - synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], - financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], - }, + svg: jurisdiction_svg_contents, + bvi: jurisdiction_bvi_contents, + vanuatu: jurisdiction_vanuatu_contents, + labuan: jurisdiction_labuan_contents, + maltainvest: jurisdiction_maltainvest_contents, }; diff --git a/packages/cfd/src/Constants/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-labuan-contents.ts new file mode 100644 index 000000000000..d60c3c839c86 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-labuan-contents.ts @@ -0,0 +1,74 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdiction_labuan_contents: TJurisdictionCardItems = { + over_header: localize('Straight-through processing'), + is_over_header_available: true, + header: localize('Labuan'), + synthetic_contents: [ + { key: 'assets', title: `${localize('Assets')}`, description: `${localize('Forex and Cryptocurrencies')}` }, + { key: 'leverage', title: `${localize('Leverage')}` }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, + }, + ], + financial_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Forex and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('90+')}`, + display_text_skin_color: 'red-dark', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:100')}`, + display_text_skin_color: 'yellow-dark', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.6 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, + }, + ], + synthetic_verification_docs: ['document_number', 'name_and_address'], + financial_verification_docs: ['document_number', 'name_and_address'], +}; diff --git a/packages/cfd/src/Constants/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-svg-contents.ts new file mode 100644 index 000000000000..c301da30f017 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-svg-contents.ts @@ -0,0 +1,82 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdiction_svg_contents: TJurisdictionCardItems = { + is_over_header_available: false, + header: localize('St. Vincent & Grenadines'), + synthetic_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + description: `${localize( + 'You will need to submit proof of identity and address once you reach certain thresholds.' + )}`, + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, + }, + ], + financial_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('170+')}`, + display_text_skin_color: 'red-light', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.6 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + description: `${localize( + 'You will need to submit proof of identity and address once you reach certain thresholds.' + )}`, + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, + }, + ], +}; diff --git a/packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts new file mode 100644 index 000000000000..ac94549c3ad3 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts @@ -0,0 +1,86 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdiction_vanuatu_contents: TJurisdictionCardItems = { + is_over_header_available: false, + header: localize('Vanuatu'), + synthetic_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Basket indices and Derived FX')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('40+')}`, + display_text_skin_color: 'red-darker', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Vanuatu Financial Services Commission')}`, + }, + ], + financial_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Forex, Stock indices, Commodities and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('90+')}`, + display_text_skin_color: 'red-dark', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:1000')}`, + display_text_skin_color: 'yellow-light', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Vanuatu Financial Services Commission')}`, + }, + ], + synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], + financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], +}; diff --git a/packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts new file mode 100644 index 000000000000..ed204b54de77 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts @@ -0,0 +1,95 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdiction_maltainvest_contents: TJurisdictionCardItems = { + is_over_header_available: false, + header: localize('Malta'), + synthetic_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('140+')}`, + display_text_skin_color: 'red-light', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:30')}`, + display_text_skin_color: 'brown-dark', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, + }, + ], + financial_contents: [ + { + key: 'assets', + title: `${localize('Assets')}`, + description: `${localize('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('140+')}`, + display_text_skin_color: 'red-light', + }, + }, + { + key: 'leverage', + title: `${localize('Leverage')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('1:30')}`, + display_text_skin_color: 'brown-dark', + }, + }, + { + key: 'spreadsFrom', + title: `${localize('Spreads from')}`, + title_indicators: { + type: 'displayText', + display_text: `${localize('0.5 pips')}`, + display_text_skin_color: 'violet-dark', + }, + }, + { + key: 'verifications', + title: `${localize('Verifications')}`, + clickable_description: [ + { type: 'link', text: `${localize('Learn more')}` }, + { type: 'text', text: `${localize('about verifications needed.')}` }, + ], + }, + { + key: 'regulatorEdr', + title: `${localize('Regulator/EDR')}`, + description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, + }, + ], + synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], + financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], +}; From e79c6a0ff0a2791eeb48381990281f0e0c012d71 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 12:10:06 +0400 Subject: [PATCH 049/151] refactor: :art: splits jurisdiction card into front and back --- packages/cfd/src/Components/props.types.ts | 4 +- .../jurisdiction-card-back.tsx | 60 +++++++++++ .../jurisdiction-card-front.tsx | 37 +++++++ .../jurisdiction-modal/jurisdiction-card.tsx | 99 +++---------------- packages/cfd/src/Containers/props.types.ts | 15 +++ 5 files changed, 130 insertions(+), 85 deletions(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 90269df915a1..c93001e2ba93 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -96,7 +96,9 @@ export type TJurisdictionCardSection = { clickable_description?: Array; }; -type TJurisdictionCardItemVerification = Array<'document_number' | 'selfie' | 'identity_document' | 'name_and_address'>; +export type TJurisdictionCardItemVerification = Array< + 'document_number' | 'selfie' | 'identity_document' | 'name_and_address' +>; export type TJurisdictionCardItems = { header: string; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx new file mode 100644 index 000000000000..05f104be95b3 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -0,0 +1,60 @@ +import { Icon, Text } from '@deriv/components'; +import classNames from 'classnames'; +import { jurisdiction_verification_contents } from 'Constants/jurisdiction-verification-contents'; +import { TJurisdictionCardBackProps } from 'Containers/props.types'; +import React from 'react'; + +const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_docs }: TJurisdictionCardBackProps) => { + return ( +
+
+ +
+ + {jurisdiction_verification_contents.short_description} + +
+ {verification_docs?.map(verification_item => ( +
+
+ +
+ + {jurisdiction_verification_contents.required_verification_docs[verification_item]?.text} + +
+ ))} +
+
+
+ {jurisdiction_verification_contents.status_references.map(status_item => ( +
+
+ +
+ + {status_item.text} + +
+ ))} +
+
+ ); +}; + +export default JurisdictionCardBack; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx new file mode 100644 index 000000000000..b7799d999b37 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -0,0 +1,37 @@ +import { Text } from '@deriv/components'; +import { Localize } from '@deriv/translations'; +import { TJurisdictionCardFrontProps } from 'Containers/props.types'; +import React from 'react'; +import JurisdictionCardSection from './jurisdiction-card-section'; + +const JurisdictionCardFront = ({ + card_classname, + toggleCardFlip, + card_values, + card_data, +}: TJurisdictionCardFrontProps) => { + return ( +
+ {card_values.is_over_header_available ? ( + + + + ) : ( +
+ )} + + + +
+ {card_data.map((item, index) => ( + + + {index < card_data.length - 1 &&
} + + ))} +
+
+ ); +}; + +export default JurisdictionCardFront; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index f3371c41fd22..969fd3817aeb 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,11 +1,9 @@ -import { Text, Icon } from '@deriv/components'; -import { Localize } from '@deriv/translations'; import classNames from 'classnames'; -import { jurisdiction_verification_contents } from 'Constants/jurisdiction-verification-contents'; import React, { SyntheticEvent } from 'react'; import { jurisdiction_contents } from '../../Constants/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; -import JurisdictionCardSection from './jurisdiction-card-section'; +import JurisdictionCardBack from './jurisdiction-card-back'; +import JurisdictionCardFront from './jurisdiction-card-front'; const JurisdictionCard = ({ account_type, @@ -25,7 +23,7 @@ const JurisdictionCard = ({ const card_data = is_synthetic ? card_values.synthetic_contents : card_values.financial_contents; const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs - : card_values.financial_verification_docs; + : card_values?.financial_verification_docs; const is_card_flipped = card_flip_status[type_of_card]; const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); @@ -43,86 +41,19 @@ const JurisdictionCard = ({ })} onClick={disabled ? () => undefined : () => cardSelection(type_of_card)} > - {is_card_flipped ? ( -
-
- -
- - {jurisdiction_verification_contents.short_description} - -
- {verification_docs?.map(verification_item => ( -
-
- -
- - { - jurisdiction_verification_contents.required_verification_docs[verification_item] - ?.text - } - -
- ))} -
-
-
- {jurisdiction_verification_contents.status_references.map(status_item => ( -
-
- -
- - {status_item.text} - -
- ))} -
-
+ {!is_card_flipped ? ( + ) : ( -
- {card_values.is_over_header_available ? ( - - - - ) : ( -
- )} - - - -
- {card_data.map((item, index) => ( - - - {index < card_data.length - 1 &&
} - - ))} -
-
+ )}
); diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 0b6f90313cb5..353c0f430ad5 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -16,6 +16,8 @@ import { TCardFlipStatus, TJurisdictionCardSectionTitleIndicators, TClickableDescription, + TJurisdictionCardItems, + TJurisdictionCardItemVerification, } from '../Components/props.types'; import RootStore from '../Stores/index'; import { SyntheticEvent } from 'react'; @@ -184,6 +186,19 @@ export type TJurisdictionCardProps = { flipCard: (cardName: MT5_Jurisdictions) => void; }; +export type TJurisdictionCardFrontProps = { + card_classname: string; + toggleCardFlip: (event: SyntheticEvent) => void; + card_values: TJurisdictionCardItems; + card_data: TJurisdictionCardSection[]; +}; + +export type TJurisdictionCardBackProps = { + card_classname: string; + toggleCardFlip: (event: SyntheticEvent) => void; + verification_docs: TJurisdictionCardItemVerification | undefined; +}; + export type TJurisdictionClickableDescriptionProps = { clickable_description: Array; toggleCardFlip: (event: SyntheticEvent) => void; From 1dcd6fa235fe204a12d2989eda6cd2100f0f4717 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 14:06:36 +0400 Subject: [PATCH 050/151] refactor: :art: refactors Text component style usages --- .../components/cfds-listing/cfds-listing.scss | 7 +------ .../jurisdiction-card-front.tsx | 18 ++++++++++++++++-- packages/cfd/src/sass/cfd-dashboard.scss | 7 +------ 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index b5e7fa782a80..5d885f26a791 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -84,14 +84,10 @@ } &__card-content-over-header { - display: flex; background: var(--text-info-blue-bg); - color: var(--text-info-blue); height: 4rem; width: 100%; - justify-content: center; - font-weight: bold; - align-items: center; + padding: 0.5rem; border-radius: 1.6rem 1.6rem 0rem 0rem; } @@ -105,7 +101,6 @@ } &__h2-header { - text-align: center; min-height: 5rem; margin: 1rem 2rem; @include mobile { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index b7799d999b37..cc261f7b7339 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -13,13 +13,27 @@ const JurisdictionCardFront = ({ return (
{card_values.is_over_header_available ? ( - + ) : (
)} - +
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index bcbc428940d7..e6cff5aea1f2 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -575,14 +575,10 @@ } &__card-content-over-header { - display: flex; background: var(--text-info-blue-bg); - color: var(--text-info-blue); height: 4rem; width: 100%; - justify-content: center; - font-weight: bold; - align-items: center; + padding: 0.5rem; border-radius: 1.6rem 1.6rem 0rem 0rem; } @@ -596,7 +592,6 @@ } &__h2-header { - text-align: center; min-height: 5rem; margin: 1rem 2rem; @include mobile { From b171480ea11d13cdd6e3a6899208a3181fb77cca Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 6 Apr 2023 15:51:28 +0400 Subject: [PATCH 051/151] refactor: :art: uses Text props to style instead of class --- .../src/components/cfds-listing/cfds-listing.scss | 3 --- .../jurisdiction-modal/jurisdiction-card-section.tsx | 8 +++----- .../jurisdiction-title-indicator.tsx | 10 ++++++++-- packages/cfd/src/sass/cfd-dashboard.scss | 3 --- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 5d885f26a791..fc111a5d4060 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -224,11 +224,8 @@ border-bottom: 2px solid var(--border-divider); } &-title-indicator { - display: flex; padding: 0.6rem 1.2rem; - color: var(--brand-white); border-radius: $BORDER_RADIUS; - font-weight: bold; &__red-darker { background: var(--modal-indicator-red-darker); } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 6ae06762b75a..ecf7dff57581 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -8,11 +8,9 @@ const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdi return (
-
- - {card_section_item.title} - -
+ + {card_section_item.title} + {card_section_item.title_indicators && ( )} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 2e43c7a3456a..701f72b5c636 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -1,17 +1,23 @@ +import { Text } from '@deriv/components'; import classNames from 'classnames'; import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; import React from 'react'; const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndicatorProps) => { return title_indicators.type === 'displayText' ? ( -
{title_indicators.display_text} -
+ ) : (
{title_indicators.display_icons?.map(display_icon => display_icon)}
); diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index e6cff5aea1f2..70fb6310a16f 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -715,11 +715,8 @@ border-bottom: 2px solid var(--border-divider); } &-title-indicator { - display: flex; padding: 0.6rem 1.2rem; - color: var(--brand-white); border-radius: $BORDER_RADIUS; - font-weight: bold; &__red-darker { background: var(--modal-indicator-red-darker); } From a9bac37d38769ee50086a663e37b19819427eb6c Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 7 Apr 2023 15:02:53 +0400 Subject: [PATCH 052/151] refactor: :pencil2: renames a type --- packages/cfd/src/Components/props.types.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index c93001e2ba93..4e564b1919b9 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -110,16 +110,16 @@ export type TJurisdictionCardItems = { financial_verification_docs?: TJurisdictionCardItemVerification; }; -export type TJurisdictionCardBackRequiredDocsItem = { +export type TJurisdictionVerificationSection = { icon: string; text: string; }; export type TJurisdictionCardBackSectionRequiredDocs = { - document_number?: TJurisdictionCardBackRequiredDocsItem; - selfie?: TJurisdictionCardBackRequiredDocsItem; - identity_document?: TJurisdictionCardBackRequiredDocsItem; - name_and_address?: TJurisdictionCardBackRequiredDocsItem; + document_number?: TJurisdictionVerificationSection; + selfie?: TJurisdictionVerificationSection; + identity_document?: TJurisdictionVerificationSection; + name_and_address?: TJurisdictionVerificationSection; }; type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green'; From 35ad7510207d220bed404778f7c742c731d15391 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 7 Apr 2023 15:03:39 +0400 Subject: [PATCH 053/151] refactor: :art: improves code structure by removing unwanted return statements --- .../jurisdiction-card-back.tsx | 92 +++++++++---------- .../jurisdiction-card-front.tsx | 62 ++++++------- .../jurisdiction-card-section.tsx | 46 +++++----- .../jurisdiction-clickable-description.tsx | 34 ++++--- 4 files changed, 111 insertions(+), 123 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index 05f104be95b3..e2fa0bbd417e 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -4,57 +4,51 @@ import { jurisdiction_verification_contents } from 'Constants/jurisdiction-verif import { TJurisdictionCardBackProps } from 'Containers/props.types'; import React from 'react'; -const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_docs }: TJurisdictionCardBackProps) => { - return ( -
-
- -
- - {jurisdiction_verification_contents.short_description} - -
- {verification_docs?.map(verification_item => ( -
-
- -
- - {jurisdiction_verification_contents.required_verification_docs[verification_item]?.text} - +const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_docs }: TJurisdictionCardBackProps) => ( +
+
+ +
+ + {jurisdiction_verification_contents.short_description} + +
+ {verification_docs?.map(verification_item => ( +
+
+
- ))} -
-
-
- {jurisdiction_verification_contents.status_references.map(status_item => ( -
-
- -
- - {status_item.text} - + + {jurisdiction_verification_contents.required_verification_docs[verification_item]?.text} + +
+ ))} +
+
+
+ {jurisdiction_verification_contents.status_references.map(status_item => ( +
+
+
- ))} -
+ + {status_item.text} + +
+ ))}
- ); -}; +
+); export default JurisdictionCardBack; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index cc261f7b7339..a7707f7d2aa6 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -9,43 +9,41 @@ const JurisdictionCardFront = ({ toggleCardFlip, card_values, card_data, -}: TJurisdictionCardFrontProps) => { - return ( -
- {card_values.is_over_header_available ? ( - - - - ) : ( -
- )} +}: TJurisdictionCardFrontProps) => ( +
+ {card_values.is_over_header_available ? ( - + -
- {card_data.map((item, index) => ( - - - {index < card_data.length - 1 &&
} - - ))} -
+ ) : ( +
+ )} + + + +
+ {card_data.map((item, index) => ( + + + {index < card_data.length - 1 &&
} + + ))}
- ); -}; +
+); export default JurisdictionCardFront; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index ecf7dff57581..571ff1a538e7 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -4,31 +4,29 @@ import { TJurisdictionCardSectionProps } from '../props.types'; import JurisdictionClickableDescription from './jurisdiction-clickable-description'; import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; -const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdictionCardSectionProps) => { - return ( -
-
- - {card_section_item.title} - - {card_section_item.title_indicators && ( - - )} -
- {card_section_item.clickable_description ? ( - - ) : ( - card_section_item.description && ( - - {card_section_item.description} - - ) +const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdictionCardSectionProps) => ( +
+
+ + {card_section_item.title} + + {card_section_item.title_indicators && ( + )}
- ); -}; + {card_section_item.clickable_description ? ( + + ) : ( + card_section_item.description && ( + + {card_section_item.description} + + ) + )} +
+); export default JurisdictionCardSection; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx index e309794b68a4..bb567d262ba6 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -5,25 +5,23 @@ import React from 'react'; const JurisdictionClickableDescription = ({ clickable_description, toggleCardFlip, -}: TJurisdictionClickableDescriptionProps) => { - return ( -
- {clickable_description.map(description_part => { - return description_part.type === 'link' ? ( - - - {description_part.text} - -   - - ) : ( - +}: TJurisdictionClickableDescriptionProps) => ( +
+ {clickable_description.map(description_part => { + return description_part.type === 'link' ? ( + + {description_part.text} - ); - })} -
- ); -}; +   + + ) : ( + + {description_part.text} + + ); + })} +
+); export default JurisdictionClickableDescription; From 94d6b607e2f2b4c25890a0906be5f629b40c408b Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 7 Apr 2023 15:16:45 +0400 Subject: [PATCH 054/151] refactor: :art: organises jurisdiction contents to seperate folder --- .../{ => jurisdiction-contents}/jurisdiction-bvi-contents.ts | 0 .../{ => jurisdiction-contents}/jurisdiction-contents.ts | 0 .../{ => jurisdiction-contents}/jurisdiction-labuan-contents.ts | 0 .../{ => jurisdiction-contents}/jurisdiction-svg-contents.ts | 0 .../jurisdiction-vanuatu-contents.ts | 0 .../jurisdiction-verification-contents.ts | 0 .../jurisdiction_maltainvest_contents.ts | 0 .../Containers/jurisdiction-modal/jurisdiction-card-back.tsx | 2 +- .../cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 2 +- 9 files changed, 2 insertions(+), 2 deletions(-) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-bvi-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-labuan-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-svg-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-vanuatu-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction-verification-contents.ts (100%) rename packages/cfd/src/Constants/{ => jurisdiction-contents}/jurisdiction_maltainvest_contents.ts (100%) diff --git a/packages/cfd/src/Constants/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-bvi-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-labuan-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-svg-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-vanuatu-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction-verification-contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts diff --git a/packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts similarity index 100% rename from packages/cfd/src/Constants/jurisdiction_maltainvest_contents.ts rename to packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index e2fa0bbd417e..cb2aa2be3f59 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -1,6 +1,6 @@ import { Icon, Text } from '@deriv/components'; import classNames from 'classnames'; -import { jurisdiction_verification_contents } from 'Constants/jurisdiction-verification-contents'; +import { jurisdiction_verification_contents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionCardBackProps } from 'Containers/props.types'; import React from 'react'; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 969fd3817aeb..19cb66e96680 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import React, { SyntheticEvent } from 'react'; -import { jurisdiction_contents } from '../../Constants/jurisdiction-contents'; +import { jurisdiction_contents } from '../../Constants/jurisdiction-contents/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardBack from './jurisdiction-card-back'; import JurisdictionCardFront from './jurisdiction-card-front'; From a4b0c42f798a11e0f9ad44767a1d710063bde736 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 7 Apr 2023 16:17:41 +0400 Subject: [PATCH 055/151] refactor: :pencil2: renames a type --- packages/cfd/src/Components/props.types.ts | 4 ++-- .../jurisdiction-verification-contents.ts | 13 +++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 4e564b1919b9..704fb6822ef0 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -115,7 +115,7 @@ export type TJurisdictionVerificationSection = { text: string; }; -export type TJurisdictionCardBackSectionRequiredDocs = { +export type TJurisdictionVerificationItems = { document_number?: TJurisdictionVerificationSection; selfie?: TJurisdictionVerificationSection; identity_document?: TJurisdictionVerificationSection; @@ -124,7 +124,7 @@ export type TJurisdictionCardBackSectionRequiredDocs = { type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green'; -export type TJurisdictionCardBackSectionStatusReferences = { +export type TJurisdictionVerificationStatus = { icon: string; text: string; color: TJurisdictionVerificationColors; diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts index 768bde748829..208e7361e0e8 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts @@ -1,16 +1,13 @@ import { localize } from '@deriv/translations'; -import { - TJurisdictionCardBackSectionRequiredDocs, - TJurisdictionCardBackSectionStatusReferences, -} from 'Components/props.types'; +import { TJurisdictionVerificationItems, TJurisdictionVerificationStatus } from 'Components/props.types'; -type TJurisdictionCardBackSectionContent = { +type TJurisdictionVerificationContents = { short_description: string; - required_verification_docs: TJurisdictionCardBackSectionRequiredDocs; - status_references: Array; + required_verification_docs: TJurisdictionVerificationItems; + status_references: Array; }; -export const jurisdiction_verification_contents: TJurisdictionCardBackSectionContent = { +export const jurisdiction_verification_contents: TJurisdictionVerificationContents = { short_description: `${localize('We need you to submit these in order to get this account:')}`, required_verification_docs: { document_number: { From 53c5addd0f669775cde70c6382eee448b16b71f3 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 7 Apr 2023 17:35:59 +0400 Subject: [PATCH 056/151] refactor: :sparkles: converts jurisdiction object to functions for translation --- .../jurisdiction-bvi-contents.ts | 4 ++-- .../jurisdiction-contents.ts | 20 +++++++++---------- .../jurisdiction-labuan-contents.ts | 4 ++-- .../jurisdiction-svg-contents.ts | 4 ++-- .../jurisdiction-vanuatu-contents.ts | 4 ++-- .../jurisdiction-verification-contents.ts | 4 ++-- .../jurisdiction_maltainvest_contents.ts | 4 ++-- .../jurisdiction-card-back.tsx | 10 +++++----- 8 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts index fb00999e7dc2..624330aa5ac8 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdiction_bvi_contents: TJurisdictionCardItems = { +export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('British Virgin Islands'), synthetic_contents: [ @@ -87,4 +87,4 @@ export const jurisdiction_bvi_contents: TJurisdictionCardItems = { ], synthetic_verification_docs: ['document_number', 'name_and_address'], financial_verification_docs: ['document_number', 'name_and_address'], -}; +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts index 95f967cc4e48..dee8e284a2e8 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts @@ -1,9 +1,9 @@ import { TJurisdictionCardItems } from 'Components/props.types'; -import { jurisdiction_bvi_contents } from './jurisdiction-bvi-contents'; -import { jurisdiction_labuan_contents } from './jurisdiction-labuan-contents'; -import { jurisdiction_svg_contents } from './jurisdiction-svg-contents'; -import { jurisdiction_vanuatu_contents } from './jurisdiction-vanuatu-contents'; -import { jurisdiction_maltainvest_contents } from './jurisdiction_maltainvest_contents'; +import { jurisdictionBviContents } from './jurisdiction-bvi-contents'; +import { jurisdictionLabuanContents } from './jurisdiction-labuan-contents'; +import { jurisdictionSvgContents } from './jurisdiction-svg-contents'; +import { jurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents'; +import { jurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents'; type TJurisdictionContent = { svg: TJurisdictionCardItems; @@ -14,9 +14,9 @@ type TJurisdictionContent = { }; export const jurisdiction_contents: TJurisdictionContent = { - svg: jurisdiction_svg_contents, - bvi: jurisdiction_bvi_contents, - vanuatu: jurisdiction_vanuatu_contents, - labuan: jurisdiction_labuan_contents, - maltainvest: jurisdiction_maltainvest_contents, + svg: jurisdictionSvgContents(), + bvi: jurisdictionBviContents(), + vanuatu: jurisdictionVanuatuContents(), + labuan: jurisdictionLabuanContents(), + maltainvest: jurisdictionMaltainvestContents(), }; diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts index d60c3c839c86..83ff029a366d 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdiction_labuan_contents: TJurisdictionCardItems = { +export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ over_header: localize('Straight-through processing'), is_over_header_available: true, header: localize('Labuan'), @@ -71,4 +71,4 @@ export const jurisdiction_labuan_contents: TJurisdictionCardItems = { ], synthetic_verification_docs: ['document_number', 'name_and_address'], financial_verification_docs: ['document_number', 'name_and_address'], -}; +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts index c301da30f017..9a28c15d30b6 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdiction_svg_contents: TJurisdictionCardItems = { +export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('St. Vincent & Grenadines'), synthetic_contents: [ @@ -79,4 +79,4 @@ export const jurisdiction_svg_contents: TJurisdictionCardItems = { description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, ], -}; +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts index ac94549c3ad3..8aa08cc13a5e 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdiction_vanuatu_contents: TJurisdictionCardItems = { +export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('Vanuatu'), synthetic_contents: [ @@ -83,4 +83,4 @@ export const jurisdiction_vanuatu_contents: TJurisdictionCardItems = { ], synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], -}; +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts index 208e7361e0e8..19bf2b3fc0b8 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts @@ -7,7 +7,7 @@ type TJurisdictionVerificationContents = { status_references: Array; }; -export const jurisdiction_verification_contents: TJurisdictionVerificationContents = { +export const jurisdictionVerificationContents = (): TJurisdictionVerificationContents => ({ short_description: `${localize('We need you to submit these in order to get this account:')}`, required_verification_docs: { document_number: { @@ -42,4 +42,4 @@ export const jurisdiction_verification_contents: TJurisdictionVerificationConten }, { icon: 'IcVerificationStatusGreen', text: `${localize('Your document is verified.')}`, color: 'green' }, ], -}; +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts index ed204b54de77..801c84900e06 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts @@ -1,7 +1,7 @@ import { localize } from '@deriv/translations'; import { TJurisdictionCardItems } from 'Components/props.types'; -export const jurisdiction_maltainvest_contents: TJurisdictionCardItems = { +export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ is_over_header_available: false, header: localize('Malta'), synthetic_contents: [ @@ -92,4 +92,4 @@ export const jurisdiction_maltainvest_contents: TJurisdictionCardItems = { ], synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'], financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'], -}; +}); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index cb2aa2be3f59..fc8d3568db57 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -1,6 +1,6 @@ import { Icon, Text } from '@deriv/components'; import classNames from 'classnames'; -import { jurisdiction_verification_contents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; +import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionCardBackProps } from 'Containers/props.types'; import React from 'react'; @@ -17,7 +17,7 @@ const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_doc />
- {jurisdiction_verification_contents.short_description} + {jurisdictionVerificationContents().short_description}
{verification_docs?.map(verification_item => ( @@ -25,19 +25,19 @@ const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_doc
- {jurisdiction_verification_contents.required_verification_docs[verification_item]?.text} + {jurisdictionVerificationContents().required_verification_docs[verification_item]?.text}
))}
- {jurisdiction_verification_contents.status_references.map(status_item => ( + {jurisdictionVerificationContents().status_references.map(status_item => (
From 869a7a6fc0836ade17d75325ae0da13e0b7aae03 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 08:36:25 +0400 Subject: [PATCH 057/151] refactor: :lipstick: nests sass classes --- .../components/cfds-listing/cfds-listing.scss | 65 +++++++++---------- packages/cfd/src/sass/cfd-dashboard.scss | 65 +++++++++---------- 2 files changed, 64 insertions(+), 66 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index fc111a5d4060..01ad3694ffa1 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -83,20 +83,38 @@ } } - &__card-content-over-header { - background: var(--text-info-blue-bg); - height: 4rem; - width: 100%; - padding: 0.5rem; - border-radius: 1.6rem 1.6rem 0rem 0rem; - } - - &__card-content-over-header-blank { - height: 4rem; - width: 100%; - border-radius: 1.6rem; - @include mobile { - height: 2rem; + &__card { + &-content { + &-container { + display: flex; + flex-direction: column; + height: 100%; + } + &-over-header { + background: var(--text-info-blue-bg); + height: 4rem; + width: 100%; + padding: 0.5rem; + border-radius: 1.6rem 1.6rem 0rem 0rem; + &-blank { + height: 4rem; + border-radius: 1.6rem; + @include mobile { + height: 2rem; + } + } + } + } + &-flipped-container { + gap: 2rem; + padding: 4rem 2rem; + } + &-section-container { + display: flex; + flex-direction: column; + gap: 1.2rem; + height: 100%; + margin: 0rem 2rem 2rem; } } @@ -109,25 +127,6 @@ } } - &__card-flipped-container { - gap: 2rem; - padding: 4rem 2rem; - } - - &__card-content-container { - display: flex; - flex-direction: column; - height: 100%; - } - - &__card-section-container { - display: flex; - flex-direction: column; - gap: 1.2rem; - height: 100%; - margin: 0rem 2rem 2rem; - } - &__footer-wrapper { min-height: 18.6rem; display: flex; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 70fb6310a16f..d1ec5215a062 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -574,20 +574,38 @@ } } - &__card-content-over-header { - background: var(--text-info-blue-bg); - height: 4rem; - width: 100%; - padding: 0.5rem; - border-radius: 1.6rem 1.6rem 0rem 0rem; - } - - &__card-content-over-header-blank { - height: 4rem; - width: 100%; - border-radius: 1.6rem; - @include mobile { - height: 2rem; + &__card { + &-content { + &-container { + display: flex; + flex-direction: column; + height: 100%; + } + &-over-header { + background: var(--text-info-blue-bg); + height: 4rem; + width: 100%; + padding: 0.5rem; + border-radius: 1.6rem 1.6rem 0rem 0rem; + &-blank { + height: 4rem; + border-radius: 1.6rem; + @include mobile { + height: 2rem; + } + } + } + } + &-flipped-container { + gap: 2rem; + padding: 4rem 2rem; + } + &-section-container { + display: flex; + flex-direction: column; + gap: 1.2rem; + height: 100%; + margin: 0rem 2rem 2rem; } } @@ -600,25 +618,6 @@ } } - &__card-flipped-container { - gap: 2rem; - padding: 4rem 2rem; - } - - &__card-content-container { - display: flex; - flex-direction: column; - height: 100%; - } - - &__card-section-container { - display: flex; - flex-direction: column; - gap: 1.2rem; - height: 100%; - margin: 0rem 2rem 2rem; - } - &__footer-wrapper { min-height: 18.6rem; display: flex; From 66a26ad32868203fdeccb15c2a25466ce9c0f73e Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 09:00:10 +0400 Subject: [PATCH 058/151] refactor: :lipstick: nests sass classes --- .../components/cfds-listing/cfds-listing.scss | 123 +++++++++--------- .../jurisdiction-clickable-description.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 123 +++++++++--------- 3 files changed, 123 insertions(+), 125 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 01ad3694ffa1..55471b41a521 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -188,81 +188,80 @@ } } -.cfd-card-back-section { - &-items-container { +.cfd-card { + &-section { + width: 100%; display: flex; flex-direction: column; - gap: 1rem; - } - - &-main { - height: 100%; - } - - &-items-sub-container { - display: flex; - align-items: flex-start; - gap: 1rem; - } - - &-back-button { - transition: transform 0.25s linear; - &:hover { - transform: translateX(-4px); - } - } -} - -.cfd-card-section { - width: 100%; - display: flex; - flex-direction: column; - gap: 0.8rem; - &-divider { - width: 100%; - border-bottom: 2px solid var(--border-divider); - } - &-title-indicator { - padding: 0.6rem 1.2rem; - border-radius: $BORDER_RADIUS; - &__red-darker { - background: var(--modal-indicator-red-darker); + gap: 0.8rem; + &-divider { + width: 100%; + border-bottom: 2px solid var(--border-divider); } - &__red-dark { - background: var(--modal-indicator-red-dark); + &-title-indicator { + padding: 0.6rem 1.2rem; + border-radius: $BORDER_RADIUS; + &__red-darker { + background: var(--modal-indicator-red-darker); + } + &__red-dark { + background: var(--modal-indicator-red-dark); + } + &__red-light { + background: var(--modal-indicator-red-light); + } + &__yellow-dark { + background: var(--modal-indicator-yellow-dark); + } + &__yellow-light { + background: var(--modal-indicator-yellow-light); + } + &__violet-dark { + background: var(--modal-indicator-violet-dark); + } + &__brown-dark { + background: var(--modal-indicator-brown-dark); + } } - &__red-light { - background: var(--modal-indicator-red-light); + } + &-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; } - &__yellow-dark { - background: var(--modal-indicator-yellow-dark); + + &-main { + height: 100%; } - &__yellow-light { - background: var(--modal-indicator-yellow-light); + + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; } - &__violet-dark { - background: var(--modal-indicator-violet-dark); + + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } } - &__brown-dark { - background: var(--modal-indicator-brown-dark); + } + &-clickable-description-link { + color: var(--text-red); + &:hover { + text-decoration: underline; } } -} - -.clickable-description-link { - color: var(--text-red); - &:hover { - text-decoration: underline; + &-title-container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; } } -.cfd-card-title-container { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - .cfd-modal--custom-exit { display: none; } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx index bb567d262ba6..79c69dba7788 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -10,7 +10,7 @@ const JurisdictionClickableDescription = ({ {clickable_description.map(description_part => { return description_part.type === 'link' ? ( - + {description_part.text}   diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index d1ec5215a062..5aba084ea5c1 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -679,81 +679,80 @@ } } -.cfd-card-back-section { - &-items-container { +.cfd-card { + &-section { + width: 100%; display: flex; flex-direction: column; - gap: 1rem; - } - - &-main { - height: 100%; - } - - &-items-sub-container { - display: flex; - align-items: flex-start; - gap: 1rem; - } - - &-back-button { - transition: transform 0.25s linear; - &:hover { - transform: translateX(-4px); - } - } -} - -.cfd-card-section { - width: 100%; - display: flex; - flex-direction: column; - gap: 0.8rem; - &-divider { - width: 100%; - border-bottom: 2px solid var(--border-divider); - } - &-title-indicator { - padding: 0.6rem 1.2rem; - border-radius: $BORDER_RADIUS; - &__red-darker { - background: var(--modal-indicator-red-darker); + gap: 0.8rem; + &-divider { + width: 100%; + border-bottom: 2px solid var(--border-divider); } - &__red-dark { - background: var(--modal-indicator-red-dark); + &-title-indicator { + padding: 0.6rem 1.2rem; + border-radius: $BORDER_RADIUS; + &__red-darker { + background: var(--modal-indicator-red-darker); + } + &__red-dark { + background: var(--modal-indicator-red-dark); + } + &__red-light { + background: var(--modal-indicator-red-light); + } + &__yellow-dark { + background: var(--modal-indicator-yellow-dark); + } + &__yellow-light { + background: var(--modal-indicator-yellow-light); + } + &__violet-dark { + background: var(--modal-indicator-violet-dark); + } + &__brown-dark { + background: var(--modal-indicator-brown-dark); + } } - &__red-light { - background: var(--modal-indicator-red-light); + } + &-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; } - &__yellow-dark { - background: var(--modal-indicator-yellow-dark); + + &-main { + height: 100%; } - &__yellow-light { - background: var(--modal-indicator-yellow-light); + + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; } - &__violet-dark { - background: var(--modal-indicator-violet-dark); + + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } } - &__brown-dark { - background: var(--modal-indicator-brown-dark); + } + &-clickable-description-link { + color: var(--text-red); + &:hover { + text-decoration: underline; } } -} - -.clickable-description-link { - color: var(--text-red); - &:hover { - text-decoration: underline; + &-title-container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; } } -.cfd-card-title-container { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - .cfd-modal--custom-exit { display: none; } From 7409988247855d08a9eebff0c72b7917b57dfff6 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 10:13:54 +0400 Subject: [PATCH 059/151] refactor: :art: uses border radius constant value in css --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 55471b41a521..44b2e052c217 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -178,7 +178,7 @@ width: 90%; height: 4rem; position: absolute; - border-radius: 8px; + border-radius: $BORDER_RADIUS * 2; margin-bottom: 1rem; border: 1px solid var(--text-info-blue); & > p { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 5aba084ea5c1..c0334791ba6f 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -669,7 +669,7 @@ width: 90%; height: 4rem; position: absolute; - border-radius: 8px; + border-radius: $BORDER_RADIUS * 2; margin-bottom: 1rem; border: 1px solid var(--text-info-blue); & > p { From 7f7fac2fbcbdb78ae1414164802fe2a8f1f2a0cb Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 11:08:54 +0400 Subject: [PATCH 060/151] refactor: :art: refactors css property usages --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 6 +++--- packages/cfd/src/sass/cfd-dashboard.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 44b2e052c217..8bb21ad3c3ed 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -26,7 +26,7 @@ } &__wrapper { - margin: 4rem 6rem 0rem; + margin: 4rem 6rem 0; display: flex; justify-content: center; gap: 1.8rem; @@ -95,7 +95,7 @@ height: 4rem; width: 100%; padding: 0.5rem; - border-radius: 1.6rem 1.6rem 0rem 0rem; + border-radius: 1.6rem 1.6rem 0 0; &-blank { height: 4rem; border-radius: 1.6rem; @@ -114,7 +114,7 @@ flex-direction: column; gap: 1.2rem; height: 100%; - margin: 0rem 2rem 2rem; + margin: 0 2rem 2rem; } } diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index c0334791ba6f..95f40edf24e7 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -515,7 +515,7 @@ } &__wrapper { - margin: 4rem 6rem 0rem 6rem; + margin: 4rem 6rem 0; display: flex; justify-content: center; gap: 1.8rem; @@ -586,7 +586,7 @@ height: 4rem; width: 100%; padding: 0.5rem; - border-radius: 1.6rem 1.6rem 0rem 0rem; + border-radius: 1.6rem 1.6rem 0 0; &-blank { height: 4rem; border-radius: 1.6rem; @@ -605,7 +605,7 @@ flex-direction: column; gap: 1.2rem; height: 100%; - margin: 0rem 2rem 2rem; + margin: 0 2rem 2rem; } } From b37583c4b18d8cabfd291795a2ac24e648c03cd8 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 11:30:54 +0400 Subject: [PATCH 061/151] refactor: :pencil2: renames a key in mt5 contents --- .../jurisdiction-contents/jurisdiction-bvi-contents.ts | 4 ++-- .../jurisdiction-contents/jurisdiction-labuan-contents.ts | 4 ++-- .../jurisdiction-contents/jurisdiction-svg-contents.ts | 4 ++-- .../jurisdiction-contents/jurisdiction-vanuatu-contents.ts | 4 ++-- .../jurisdiction_maltainvest_contents.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts index 624330aa5ac8..ee1ba2a4b78e 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -33,7 +33,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize( 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' @@ -78,7 +78,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize( 'British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)' diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts index 83ff029a366d..6dc4039ede60 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -21,7 +21,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, @@ -64,7 +64,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Labuan Financial Services Authority (licence no. MB/18/0024)')}`, }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts index 9a28c15d30b6..6b42dd4a79e1 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts @@ -32,7 +32,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ )}`, }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, @@ -74,7 +74,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ )}`, }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts index 8aa08cc13a5e..42d58f9c3bd7 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -33,7 +33,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Vanuatu Financial Services Commission')}`, }, @@ -76,7 +76,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Vanuatu Financial Services Commission')}`, }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts index 801c84900e06..ae36628a2eff 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts @@ -42,7 +42,7 @@ export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, @@ -85,7 +85,7 @@ export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ ], }, { - key: 'regulatorEdr', + key: 'regulator', title: `${localize('Regulator/EDR')}`, description: `${localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')}`, }, From 524dceb96be9f6c33d0764569f35299889c5b942 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 16:16:27 +0400 Subject: [PATCH 062/151] refactor: :art: refactors mt5 code --- .../jurisdiction-contents.ts | 4 +-- .../jurisdiction-card-front.tsx | 2 +- .../jurisdiction-modal/jurisdiction-card.tsx | 2 +- .../jurisdiction-modal-foot-note.tsx | 32 ++++++++++--------- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts index dee8e284a2e8..4acd66b612fc 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts @@ -13,10 +13,10 @@ type TJurisdictionContent = { bvi: TJurisdictionCardItems; }; -export const jurisdiction_contents: TJurisdictionContent = { +export const jurisdiction_contents = (): TJurisdictionContent => ({ svg: jurisdictionSvgContents(), bvi: jurisdictionBviContents(), vanuatu: jurisdictionVanuatuContents(), labuan: jurisdictionLabuanContents(), maltainvest: jurisdictionMaltainvestContents(), -}; +}); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index a7707f7d2aa6..29d4db1554d4 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -28,7 +28,7 @@ const JurisdictionCardFront = ({ { const card_classname = `cfd-jurisdiction-card--${account_type}`; const is_synthetic = account_type === 'synthetic'; - const card_values = jurisdiction_contents[type_of_card as keyof typeof jurisdiction_contents]; + const card_values = jurisdiction_contents()[type_of_card]; const card_data = is_synthetic ? card_values.synthetic_contents : card_values.financial_contents; const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs 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 4ce9a1f23d30..4af5b7e74146 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 @@ -67,21 +67,23 @@ const FooterNote = ({ }; const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { - return props.jurisdiction_selected_shortcode ? ( -
- - - -
- ) : ( - + return ( + + {props.jurisdiction_selected_shortcode && ( +
+ + + +
+ )} + ); }; From 2d9afde0023fd67918e11eea9c6b73b698bbf2d6 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 23:08:41 +0400 Subject: [PATCH 063/151] refactor: :art: sorts color constants used --- packages/shared/src/styles/constants.scss | 58 +++++++++++------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index ceb0cd69e8bf..5aa78ff555b7 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -16,18 +16,21 @@ $color-black-6: #3e3e3e; $color-black-7: #000000; $color-black-8: #323738; $color-black-9: #5c5c5c; -$color-white: #ffffff; -$color-red: #ff444f; -$color-red-1: #ec3f3f; -$color-red-2: #cc2e3d; -$color-red-3: #a32430; -$color-red-4: #d33636; -$color-red-5: #eb3e48; -$color-red-6: #ec3f3f29; -$color-red-7: #ffe1e3; -$color-red-8: #661b20; -$color-red-9: #b33037; -$color-red-10: #ff444f; +$color-blue: #377cfc; +$color-blue-1: #0dc2e7; +$color-blue-2: #2a3052; +$color-blue-3: #0796e0; +$color-blue-4: #0677af; +$color-blue-5: #dfeaff; +$color-blue-6: #92b8ff; +$color-blue-7: #182130; +$color-brown: #664407; +$color-green: #85acb0; +$color-green-1: #4bb4b3; +$color-green-2: #3d9494; +$color-green-3: #00a79e; +$color-green-4: #008079; +$color-green-5: #4bb4b329; $color-grey: #c2c2c2; $color-grey-1: #999999; $color-grey-2: #f2f3f4; @@ -42,27 +45,24 @@ $color-grey-10: #919191; $color-grey-11: #fafafa; $color-grey-12: #f5f7fa; $color-grey-13: #2e2e2e; -$color-green: #85acb0; -$color-green-1: #4bb4b3; -$color-green-2: #3d9494; -$color-green-3: #00a79e; -$color-green-4: #008079; -$color-green-5: #4bb4b329; $color-orange: #ff6444; +$color-purple: #722fe4; +$color-red: #ff444f; +$color-red-1: #ec3f3f; +$color-red-2: #cc2e3d; +$color-red-3: #a32430; +$color-red-4: #d33636; +$color-red-5: #eb3e48; +$color-red-6: #ec3f3f29; +$color-red-7: #ffe1e3; +$color-red-8: #661b20; +$color-red-9: #b33037; +$color-red-10: #ff444f; +$color-violet: #4a3871; +$color-white: #ffffff; $color-yellow: #ffad3a; $color-yellow-1: #b3760d; $color-yellow-2: #ffa912; -$color-blue: #377cfc; -$color-blue-1: #0dc2e7; -$color-blue-2: #2a3052; -$color-blue-3: #0796e0; -$color-blue-4: #0677af; -$color-blue-5: #dfeaff; -$color-blue-6: #92b8ff; -$color-blue-7: #182130; -$color-violet: #4a3871; -$color-brown: #664407; -$color-purple: #722fe4; /* alpha colors */ $alpha-color-black-1: transparentize($color-black-7, 0.28); From 592a9a468772384db9f870df0834227e1cb84ead Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 10 Apr 2023 23:41:53 +0400 Subject: [PATCH 064/151] refactor: :art: refactors color usages --- .../src/components/cfds-listing/cfds-listing.scss | 14 +++++++------- packages/cfd/src/sass/cfd-dashboard.scss | 14 +++++++------- packages/shared/src/styles/themes.scss | 9 --------- 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 8bb21ad3c3ed..e050042b1e8a 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -202,25 +202,25 @@ padding: 0.6rem 1.2rem; border-radius: $BORDER_RADIUS; &__red-darker { - background: var(--modal-indicator-red-darker); + background: $color-red-8; } &__red-dark { - background: var(--modal-indicator-red-dark); + background: $color-red-9; } &__red-light { - background: var(--modal-indicator-red-light); + background: $color-red-10; } &__yellow-dark { - background: var(--modal-indicator-yellow-dark); + background: $color-yellow-1; } &__yellow-light { - background: var(--modal-indicator-yellow-light); + background: $color-yellow-2; } &__violet-dark { - background: var(--modal-indicator-violet-dark); + background: $color-violet; } &__brown-dark { - background: var(--modal-indicator-brown-dark); + background: $color-brown; } } } diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 95f40edf24e7..8fcd270f400b 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -693,25 +693,25 @@ padding: 0.6rem 1.2rem; border-radius: $BORDER_RADIUS; &__red-darker { - background: var(--modal-indicator-red-darker); + background: $color-red-8; } &__red-dark { - background: var(--modal-indicator-red-dark); + background: $color-red-9; } &__red-light { - background: var(--modal-indicator-red-light); + background: $color-red-10; } &__yellow-dark { - background: var(--modal-indicator-yellow-dark); + background: $color-yellow-1; } &__yellow-light { - background: var(--modal-indicator-yellow-light); + background: $color-yellow-2; } &__violet-dark { - background: var(--modal-indicator-violet-dark); + background: $color-violet; } &__brown-dark { - background: var(--modal-indicator-brown-dark); + background: $color-brown; } } } diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index fe00f030d155..3b3987e4d7eb 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -64,15 +64,6 @@ --app-card-virtual: #{$gradient-virtual}; --app-card-virtual-swap-free: #{$gradient-virtual-swap-free}; - // Modal - --modal-indicator-red-darker: #{$color-red-8}; - --modal-indicator-red-dark: #{$color-red-9}; - --modal-indicator-red-light: #{$color-red-10}; - --modal-indicator-yellow-dark: #{$color-yellow-1}; - --modal-indicator-yellow-light: #{$color-yellow-2}; - --modal-indicator-violet-dark: #{$color-violet}; - --modal-indicator-brown-dark: #{$color-brown}; - .theme--light { // General --general-main-1: #{$color-white}; From ce65b71c8a87055ed58a840171fea6d00de06424 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 14 Apr 2023 08:20:50 +0400 Subject: [PATCH 065/151] fix: :bug: prevents states of child card being destroyed by parent --- .../jurisdiction-modal-content-wrapper.tsx | 242 ++++++++++++++++++ .../jurisdiction-modal/jurisdiction-modal.tsx | 242 +----------------- packages/cfd/src/Containers/props.types.ts | 32 ++- 3 files changed, 273 insertions(+), 243 deletions(-) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx new file mode 100644 index 000000000000..27e3dfc1667f --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -0,0 +1,242 @@ +import React from 'react'; +import { Button, Modal } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; +import { connect } from '../../Stores/connect'; +import RootStore from '../../Stores/index'; +import JurisdictionModalContent from './jurisdiction-modal-content'; +import { TJurisdictionCardType, TJurisdictionModalContentWrapperProps } from '../props.types'; +import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; +import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; + +const JurisdictionModalContentWrapper = ({ + openPasswordModal, + context, + account_type, + account_status, + is_jurisdiction_modal_visible, + is_virtual, + jurisdiction_selected_shortcode, + real_financial_accounts_existing_data, + real_synthetic_accounts_existing_data, + trading_platform_available_accounts, + toggleJurisdictionModal, + setJurisdictionSelectedShortcode, + should_restrict_bvi_account_creation, + should_restrict_vanuatu_account_creation, + show_eu_related_content, + toggleCFDVerificationModal, + updateMT5Status, + fetchAccountSettings, + has_submitted_cfd_personal_details, +}: TJurisdictionModalContentWrapperProps) => { + const [checked, setChecked] = React.useState(false); + const [card_flip_status, setCardFlipStatus] = React.useState({ + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }); + + const { + poi_or_poa_not_submitted, + 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) { + if (!is_virtual) { + updateMT5Status(); + fetchAccountSettings(); + } + setJurisdictionSelectedShortcode(''); + setCardFlipStatus({ + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [is_jurisdiction_modal_visible]); + + React.useEffect(() => { + if (jurisdiction_selected_shortcode) { + setChecked(false); + } + }, [jurisdiction_selected_shortcode, is_jurisdiction_modal_visible]); + + const financial_available_accounts = trading_platform_available_accounts.filter( + available_account => + available_account.market_type === 'financial' && + (show_eu_related_content + ? available_account.shortcode === 'maltainvest' + : available_account.shortcode !== 'maltainvest') + ); + + const synthetic_available_accounts = trading_platform_available_accounts.filter( + available_account => + available_account.market_type === 'gaming' && + (show_eu_related_content + ? available_account.shortcode === 'maltainvest' + : available_account.shortcode !== 'maltainvest') + ); + + const is_svg_selected = jurisdiction_selected_shortcode === Jurisdiction.SVG; + const is_bvi_selected = jurisdiction_selected_shortcode === Jurisdiction.BVI; + const is_vanuatu_selected = jurisdiction_selected_shortcode === Jurisdiction.VANUATU; + const is_labuan_selected = jurisdiction_selected_shortcode === Jurisdiction.LABUAN; + const is_maltainvest_selected = jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST; + + const isNextButtonDisabled = () => { + if (jurisdiction_selected_shortcode) { + const is_account_created = + account_type.type === 'synthetic' + ? real_synthetic_accounts_existing_data?.some( + account => account.landing_company_short === jurisdiction_selected_shortcode + ) + : real_financial_accounts_existing_data?.some( + account => account.landing_company_short === jurisdiction_selected_shortcode + ); + + if (!is_account_created) { + 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; + } + return true; + } + return true; + }; + + const onSelectRealAccount = () => { + const type_of_account = { + category: account_type.category, + type: account_type.type, + }; + + if (is_svg_selected) { + openPasswordModal(type_of_account); + } else if (is_vanuatu_selected) { + if ( + poi_acknowledged_for_vanuatu_maltainvest && + !poi_or_poa_not_submitted && + !should_restrict_vanuatu_account_creation && + poa_acknowledged && + has_submitted_cfd_personal_details + ) { + openPasswordModal(type_of_account); + } else { + toggleCFDVerificationModal(); + } + } else if (is_bvi_selected) { + if ( + poi_acknowledged_for_bvi_labuan && + !poi_or_poa_not_submitted && + !should_restrict_bvi_account_creation && + poa_acknowledged && + has_submitted_cfd_personal_details + ) { + openPasswordModal(type_of_account); + } else { + toggleCFDVerificationModal(); + } + } else if (is_labuan_selected) { + if (poi_acknowledged_for_bvi_labuan && poa_acknowledged && has_submitted_cfd_personal_details) { + openPasswordModal(type_of_account); + } else { + toggleCFDVerificationModal(); + } + } else if (is_maltainvest_selected) { + if (poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged) { + openPasswordModal(type_of_account); + } else { + toggleCFDVerificationModal(); + } + } + }; + + const flipCard = (card_name: TJurisdictionCardType) => { + setCardFlipStatus({ ...card_flip_status, [card_name]: !card_flip_status[card_name] }); + }; + + return ( + + +
+ + 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} + /> + + + +
+ + ); +}; +export default connect(({ modules: { cfd }, client, traders_hub }: RootStore) => ({ + account_type: cfd.account_type, + account_status: client.account_status, + is_jurisdiction_modal_visible: cfd.is_jurisdiction_modal_visible, + is_virtual: client.is_virtual, + jurisdiction_selected_shortcode: cfd.jurisdiction_selected_shortcode, + real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data, + real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data, + trading_platform_available_accounts: client.trading_platform_available_accounts, + toggleJurisdictionModal: cfd.toggleJurisdictionModal, + 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, + toggleCFDVerificationModal: cfd.toggleCFDVerificationModal, + updateMT5Status: client.updateMT5Status, + fetchAccountSettings: client.fetchAccountSettings, + has_submitted_cfd_personal_details: cfd.has_submitted_cfd_personal_details, +}))(JurisdictionModalContentWrapper); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 1614bc2dedc6..6026c10346e8 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -1,235 +1,27 @@ import React from 'react'; -import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, UILoader } from '@deriv/components'; +import { DesktopWrapper, MobileDialog, MobileWrapper, Modal, UILoader } from '@deriv/components'; import { localize } from '@deriv/translations'; import { connect } from '../../Stores/connect'; import RootStore from '../../Stores/index'; -import JurisdictionModalContent from './jurisdiction-modal-content'; -import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; -import { TJurisdictionCardType, TJurisdictionModalProps } from '../props.types'; -import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; -import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; +import { TJurisdictionModalProps } from '../props.types'; +import JurisdictionModalContentWrapper from './jurisdiction-modal-content-wrapper'; const JurisdictionModal = ({ - account_status, + openPasswordModal, + context, account_type, disableApp, enableApp, is_jurisdiction_modal_visible, - context, - is_virtual, - jurisdiction_selected_shortcode, - openPasswordModal, - real_synthetic_accounts_existing_data, - real_financial_accounts_existing_data, - trading_platform_available_accounts, - toggleJurisdictionModal, - setJurisdictionSelectedShortcode, - should_restrict_bvi_account_creation, - should_restrict_vanuatu_account_creation, show_eu_related_content, - toggleCFDVerificationModal, - updateMT5Status, - fetchAccountSettings, - has_submitted_cfd_personal_details, + toggleJurisdictionModal, }: TJurisdictionModalProps) => { - const [checked, setChecked] = React.useState(false); - const [card_flip_status, setCardFlipStatus] = React.useState({ - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }); - - const { - poi_or_poa_not_submitted, - 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) { - if (!is_virtual) { - updateMT5Status(); - fetchAccountSettings(); - } - setJurisdictionSelectedShortcode(''); - setCardFlipStatus({ - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }); - } - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [is_jurisdiction_modal_visible]); - - React.useEffect(() => { - if (jurisdiction_selected_shortcode) { - setChecked(false); - } - }, [jurisdiction_selected_shortcode, is_jurisdiction_modal_visible]); - - const financial_available_accounts = trading_platform_available_accounts.filter( - available_account => - available_account.market_type === 'financial' && - (show_eu_related_content - ? available_account.shortcode === 'maltainvest' - : available_account.shortcode !== 'maltainvest') - ); - - const synthetic_available_accounts = trading_platform_available_accounts.filter( - available_account => - available_account.market_type === 'gaming' && - (show_eu_related_content - ? available_account.shortcode === 'maltainvest' - : available_account.shortcode !== 'maltainvest') - ); - const modal_title = show_eu_related_content ? localize('Choose a jurisdiction for your Deriv MT5 CFDs account') : localize('Choose a jurisdiction for your Deriv MT5 {{account_type}} account', { account_type: account_type.type === 'synthetic' ? 'Derived' : 'Financial', }); - const is_svg_selected = jurisdiction_selected_shortcode === Jurisdiction.SVG; - const is_bvi_selected = jurisdiction_selected_shortcode === Jurisdiction.BVI; - const is_vanuatu_selected = jurisdiction_selected_shortcode === Jurisdiction.VANUATU; - const is_labuan_selected = jurisdiction_selected_shortcode === Jurisdiction.LABUAN; - const is_maltainvest_selected = jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST; - - const isNextButtonDisabled = () => { - if (jurisdiction_selected_shortcode) { - const is_account_created = - account_type.type === 'synthetic' - ? real_synthetic_accounts_existing_data?.some( - account => account.landing_company_short === jurisdiction_selected_shortcode - ) - : real_financial_accounts_existing_data?.some( - account => account.landing_company_short === jurisdiction_selected_shortcode - ); - - if (!is_account_created) { - 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; - } - return true; - } - return true; - }; - - const onSelectRealAccount = () => { - const type_of_account = { - category: account_type.category, - type: account_type.type, - }; - - if (is_svg_selected) { - openPasswordModal(type_of_account); - } else if (is_vanuatu_selected) { - if ( - poi_acknowledged_for_vanuatu_maltainvest && - !poi_or_poa_not_submitted && - !should_restrict_vanuatu_account_creation && - poa_acknowledged && - has_submitted_cfd_personal_details - ) { - openPasswordModal(type_of_account); - } else { - toggleCFDVerificationModal(); - } - } else if (is_bvi_selected) { - if ( - poi_acknowledged_for_bvi_labuan && - !poi_or_poa_not_submitted && - !should_restrict_bvi_account_creation && - poa_acknowledged && - has_submitted_cfd_personal_details - ) { - openPasswordModal(type_of_account); - } else { - toggleCFDVerificationModal(); - } - } else if (is_labuan_selected) { - if (poi_acknowledged_for_bvi_labuan && poa_acknowledged && has_submitted_cfd_personal_details) { - openPasswordModal(type_of_account); - } else { - toggleCFDVerificationModal(); - } - } else if (is_maltainvest_selected) { - if (poi_acknowledged_for_vanuatu_maltainvest && poa_acknowledged) { - openPasswordModal(type_of_account); - } else { - toggleCFDVerificationModal(); - } - } - }; - - const flipCard = (card_name: TJurisdictionCardType) => { - setCardFlipStatus({ ...card_flip_status, [card_name]: !card_flip_status[card_name] }); - }; - - 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} - /> - - - -
- - ); - return (
}> @@ -246,7 +38,7 @@ const JurisdictionModal = ({ context={context} width={account_type.type === 'synthetic' ? '1040px' : '1200px'} > - + @@ -257,7 +49,7 @@ const JurisdictionModal = ({ visible={is_jurisdiction_modal_visible} onClose={toggleJurisdictionModal} > - + @@ -265,27 +57,11 @@ const JurisdictionModal = ({ ); }; -export default connect(({ modules: { cfd }, ui, client, traders_hub }: RootStore) => ({ +export default connect(({ modules: { cfd }, ui, traders_hub }: RootStore) => ({ account_type: cfd.account_type, - account_settings: client.account_settings, - account_status: client.account_status, - content_flag: traders_hub.content_flag, disableApp: ui.disableApp, enableApp: ui.enableApp, is_jurisdiction_modal_visible: cfd.is_jurisdiction_modal_visible, - is_virtual: client.is_virtual, - jurisdiction_selected_shortcode: cfd.jurisdiction_selected_shortcode, - real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data, - real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data, - 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, toggleJurisdictionModal: cfd.toggleJurisdictionModal, - updateMT5Status: client.updateMT5Status, - fetchAccountSettings: client.fetchAccountSettings, - has_submitted_cfd_personal_details: cfd.has_submitted_cfd_personal_details, }))(JurisdictionModal); diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 3a85513616be..170ff9ad6887 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -241,33 +241,45 @@ type TOpenAccountTransferMeta = { type?: string; }; -export type TJurisdictionModalProps = { +export type TJurisdictionModalContentWrapperProps = { + openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + context: RootStore; account_type: { type: string; category: string; }; account_status: GetAccountStatus; - context: RootStore; - disableApp: () => void; - enableApp: () => void; is_jurisdiction_modal_visible: boolean; is_virtual: boolean; jurisdiction_selected_shortcode: string; - openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + real_financial_accounts_existing_data: TExistingData; + real_synthetic_accounts_existing_data: TExistingData; + trading_platform_available_accounts: TTradingPlatformAvailableAccount[]; + toggleJurisdictionModal: () => 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; - toggleJurisdictionModal: () => void; toggleCFDVerificationModal: () => void; - real_synthetic_accounts_existing_data: TExistingData; - real_financial_accounts_existing_data: TExistingData; updateMT5Status: () => void; + fetchAccountSettings: () => void; has_submitted_cfd_personal_details: boolean; }; +export type TJurisdictionModalProps = { + openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + context: RootStore; + account_type: { + type: string; + category: string; + }; + disableApp: () => void; + enableApp: () => void; + is_jurisdiction_modal_visible: boolean; + show_eu_related_content: boolean; + toggleJurisdictionModal: () => void; +}; + export type TJurisdictionModalContentProps = { context: RootStore; account_type: string; From 7478cefe143a176c7014daec0d6780fdc7f2c208 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 14 Apr 2023 10:16:01 +0400 Subject: [PATCH 066/151] refactor: :wastebasket: cleans up jurisdiction code --- .../jurisdiction-modal/jurisdiction-card.tsx | 7 ++----- .../jurisdiction-modal-content-wrapper.tsx | 1 - .../jurisdiction-modal-content.tsx | 12 ++++-------- packages/cfd/src/Containers/props.types.ts | 4 ---- 4 files changed, 6 insertions(+), 18 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index f2fe13a5e240..853219ea9964 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -6,14 +6,11 @@ import JurisdictionCardBack from './jurisdiction-card-back'; import JurisdictionCardFront from './jurisdiction-card-front'; const JurisdictionCard = ({ - account_type, - disabled, - context, jurisdiction_selected_shortcode, - financial_available_accounts, setJurisdictionSelectedShortcode, - synthetic_available_accounts, + account_type, type_of_card, + disabled, card_flip_status, flipCard, }: TJurisdictionCardProps) => { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx index 27e3dfc1667f..c50e5902daee 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -179,7 +179,6 @@ const JurisdictionModalContentWrapper = ({ real_financial_accounts_existing_data={real_financial_accounts_existing_data} real_synthetic_accounts_existing_data={real_synthetic_accounts_existing_data} jurisdiction_selected_shortcode={jurisdiction_selected_shortcode} - context={context} setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode} synthetic_available_accounts={synthetic_available_accounts} card_flip_status={card_flip_status} 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 c96a4a89cff8..e52a18f99817 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -10,7 +10,6 @@ const JurisdictionModalContent = ({ setJurisdictionSelectedShortcode, synthetic_available_accounts, financial_available_accounts, - context, real_synthetic_accounts_existing_data, real_financial_accounts_existing_data, card_flip_status, @@ -45,15 +44,12 @@ const JurisdictionModalContent = ({ card => cardsToBeShown(card) && ( diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 170ff9ad6887..c0e3cd029a92 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -173,9 +173,6 @@ export type TCFDPasswordManagerModal = { export type TJurisdictionCardProps = { jurisdiction_selected_shortcode: string; - context: RootStore; - synthetic_available_accounts: TTradingPlatformAvailableAccount[]; - financial_available_accounts: TTradingPlatformAvailableAccount[]; setJurisdictionSelectedShortcode: (card_type: string) => void; account_type: string; type_of_card: TJurisdictionCardType; @@ -281,7 +278,6 @@ export type TJurisdictionModalProps = { }; export type TJurisdictionModalContentProps = { - context: RootStore; account_type: string; jurisdiction_selected_shortcode: string; setJurisdictionSelectedShortcode: (card_type: string) => void; From 6ef14bd633f075be5ab13007bbdda2d89480207f Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Fri, 14 Apr 2023 14:31:27 +0800 Subject: [PATCH 067/151] chore: update Test Case for Jurisdiction modal content --- .../jurisdiction-modal-content.spec.tsx | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index 6f09b939399d..c0e9b400dc4f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -17,7 +17,7 @@ describe('JurisdictionModalContent', () => { setJurisdictionSelectedShortcode: jest.fn(), synthetic_available_accounts: [ { - market_type: 'gaming', + market_type: 'gaming' as const, name: '', requirements: { after_first_deposit: { @@ -29,11 +29,11 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'svg', + shortcode: 'svg' as const, sub_account_type: '', }, { - market_type: 'gaming', + market_type: 'gaming' as const, name: '', requirements: { after_first_deposit: { @@ -45,13 +45,13 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'bvi', + shortcode: 'bvi' as const, sub_account_type: '', }, ], financial_available_accounts: [ { - market_type: 'financial', + market_type: 'financial' as const, name: '', requirements: { after_first_deposit: { @@ -63,11 +63,11 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'svg', + shortcode: 'svg' as const, sub_account_type: '', }, { - market_type: 'financial', + market_type: 'financial' as const, name: '', requirements: { after_first_deposit: { @@ -79,24 +79,28 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'bvi', + shortcode: 'bvi' as const, sub_account_type: '', }, ], context: mock_context, real_synthetic_accounts_existing_data: [], real_financial_accounts_existing_data: [], + card_flip_status: { + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }, + flipCard: jest.fn(), }; it('should display cfd-jurisdiction-card--synthetic__wrapper in class name', () => { render(); - const container = screen.getByTestId('dt-jurisdiction-modal-content'); - expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); }); it('should display cfd-jurisdiction-card--financial__wrapper in class name', () => { render(); - const container = screen.getByTestId('dt-jurisdiction-modal-content'); - expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); }); }); From 9533259903662997ff905bb8fc298cf8238233fb Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 14 Apr 2023 10:40:53 +0400 Subject: [PATCH 068/151] refactor: :art: moves state down the tree from parent to local level --- .../jurisdiction-modal/jurisdiction-card.tsx | 8 +++---- .../jurisdiction-modal-content-wrapper.tsx | 22 +------------------ .../jurisdiction-modal-content.tsx | 4 ---- packages/cfd/src/Containers/props.types.ts | 4 ---- 4 files changed, 4 insertions(+), 34 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 853219ea9964..15688d16cd73 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { SyntheticEvent } from 'react'; +import React, { SyntheticEvent, useState } from 'react'; import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/jurisdiction-contents'; import { TJurisdictionCardProps } from '../props.types'; import JurisdictionCardBack from './jurisdiction-card-back'; @@ -11,8 +11,6 @@ const JurisdictionCard = ({ account_type, type_of_card, disabled, - card_flip_status, - flipCard, }: TJurisdictionCardProps) => { const card_classname = `cfd-jurisdiction-card--${account_type}`; const is_synthetic = account_type === 'synthetic'; @@ -21,14 +19,14 @@ const JurisdictionCard = ({ const verification_docs = is_synthetic ? card_values?.synthetic_verification_docs : card_values?.financial_verification_docs; - const is_card_flipped = card_flip_status[type_of_card]; + const [is_card_flipped, setIsCardFlipped] = useState(false); const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; const toggleCardFlip = (event: SyntheticEvent) => { event.stopPropagation(); - flipCard(type_of_card); + setIsCardFlipped(!is_card_flipped); }; return ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx index c50e5902daee..cde376664f1f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -5,7 +5,7 @@ import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shar import { connect } from '../../Stores/connect'; import RootStore from '../../Stores/index'; import JurisdictionModalContent from './jurisdiction-modal-content'; -import { TJurisdictionCardType, TJurisdictionModalContentWrapperProps } from '../props.types'; +import { TJurisdictionModalContentWrapperProps } from '../props.types'; import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; @@ -31,13 +31,6 @@ const JurisdictionModalContentWrapper = ({ has_submitted_cfd_personal_details, }: TJurisdictionModalContentWrapperProps) => { const [checked, setChecked] = React.useState(false); - const [card_flip_status, setCardFlipStatus] = React.useState({ - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }); const { poi_or_poa_not_submitted, @@ -54,13 +47,6 @@ const JurisdictionModalContentWrapper = ({ fetchAccountSettings(); } setJurisdictionSelectedShortcode(''); - setCardFlipStatus({ - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [is_jurisdiction_modal_visible]); @@ -166,10 +152,6 @@ const JurisdictionModalContentWrapper = ({ } }; - const flipCard = (card_name: TJurisdictionCardType) => { - setCardFlipStatus({ ...card_flip_status, [card_name]: !card_flip_status[card_name] }); - }; - return (
{ const card_classname = `cfd-jurisdiction-card--${account_type}`; @@ -50,8 +48,6 @@ const JurisdictionModalContent = ({ account_type={account_type} type_of_card={card} disabled={disableCard(card)} - card_flip_status={card_flip_status} - flipCard={flipCard} /> ) )} diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index c0e3cd029a92..6c569c84558c 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -177,8 +177,6 @@ export type TJurisdictionCardProps = { account_type: string; type_of_card: TJurisdictionCardType; disabled: boolean; - card_flip_status: TCardFlipStatus; - flipCard: (cardName: TJurisdictionCardType) => void; }; export type TJurisdictionCardFrontProps = { @@ -286,8 +284,6 @@ export type TJurisdictionModalContentProps = { real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; is_virtual: boolean; - card_flip_status: TCardFlipStatus; - flipCard: (cardName: TJurisdictionCardType) => void; }; export type TJurisdictionModalFootNoteProps = { From ff565a4186233b32d056c41fa52f55b385747f70 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 14 Apr 2023 16:03:31 +0400 Subject: [PATCH 069/151] feat: :sparkles: animates jurisdiction card on flip --- .../components/cfds-listing/cfds-listing.scss | 45 ++++++--- .../jurisdiction-card-back.tsx | 95 +++++++++++-------- .../jurisdiction-card-front.tsx | 64 +++++++------ .../jurisdiction-modal/jurisdiction-card.tsx | 21 ++-- packages/cfd/src/Containers/props.types.ts | 2 + packages/cfd/src/sass/cfd-dashboard.scss | 45 ++++++--- 6 files changed, 171 insertions(+), 101 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index e050042b1e8a..b853c2b18d80 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -5,13 +5,9 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 50rem; - width: 26rem; + height: 100%; + width: 100%; cursor: pointer; - @include mobile { - height: 48rem; - width: 100%; - } &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); @@ -21,18 +17,15 @@ border: solid 1px var(--border-disabled); } - @include desktop { - height: auto; - } - &__wrapper { margin: 4rem 6rem 0; display: flex; justify-content: center; - gap: 1.8rem; + gap: 2rem; @include mobile { margin: 0; - padding: 2rem 4rem; + padding: 4rem; + gap: 4rem; flex-direction: column; align-items: center; overflow-y: scroll; @@ -189,6 +182,34 @@ } .cfd-card { + &-perspective { + perspective: 1000px; + @include mobile { + width: 100%; + } + } + &-container { + transform-style: preserve-3d; + transition: transform 0.25s ease-in-out; + min-height: 50rem; + width: 26rem; + @include mobile { + height: 48rem; + width: 100%; + } + } + &-flipped { + transform: rotateY(180deg); + } + &-front, + &-back { + position: absolute; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + &-back { + transform: rotateY(180deg); + } &-section { width: 100%; display: flex; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index fc8d3568db57..1bec8c7523f2 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -1,52 +1,67 @@ -import { Icon, Text } from '@deriv/components'; import classNames from 'classnames'; +import { Icon, Text } from '@deriv/components'; import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionCardBackProps } from 'Containers/props.types'; import React from 'react'; -const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_docs }: TJurisdictionCardBackProps) => ( +const JurisdictionCardBack = ({ + card_classname, + toggleCardFlip, + verification_docs, + is_card_selected, +}: TJurisdictionCardBackProps) => (
-
- -
- - {jurisdictionVerificationContents().short_description} - -
- {verification_docs?.map(verification_item => ( -
-
- +
+
+ +
+ + {jurisdictionVerificationContents().short_description} + +
+ {verification_docs?.map(verification_item => ( +
+
+ +
+ + {jurisdictionVerificationContents().required_verification_docs[verification_item]?.text} +
- - {jurisdictionVerificationContents().required_verification_docs[verification_item]?.text} - -
- ))} -
-
-
- {jurisdictionVerificationContents().status_references.map(status_item => ( -
-
- + ))} +
+
+
+ {jurisdictionVerificationContents().status_references.map(status_item => ( +
+
+ +
+ + {status_item.text} +
- - {status_item.text} - -
- ))} + ))} +
); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index 29d4db1554d4..cf9e540e9ed5 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -1,7 +1,8 @@ +import React from 'react'; +import classNames from 'classnames'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; import { TJurisdictionCardFrontProps } from 'Containers/props.types'; -import React from 'react'; import JurisdictionCardSection from './jurisdiction-card-section'; const JurisdictionCardFront = ({ @@ -9,39 +10,46 @@ const JurisdictionCardFront = ({ toggleCardFlip, card_values, card_data, + is_card_selected, }: TJurisdictionCardFrontProps) => ( -
- {card_values.is_over_header_available ? ( +
+
+ {card_values.is_over_header_available ? ( + + + + ) : ( +
+ )} - + - ) : ( -
- )} - - - -
- {card_data.map((item, index) => ( - - - {index < card_data.length - 1 &&
} - - ))} +
+ {card_data.map((item, index) => ( + + + {index < card_data.length - 1 &&
} + + ))} +
); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 15688d16cd73..5927c5fad230 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -20,6 +20,8 @@ const JurisdictionCard = ({ ? card_values?.synthetic_verification_docs : card_values?.financial_verification_docs; const [is_card_flipped, setIsCardFlipped] = useState(false); + const is_card_selected = jurisdiction_selected_shortcode === type_of_card; + const cardSelection = (cardType: string) => { setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType); }; @@ -30,26 +32,27 @@ const JurisdictionCard = ({ }; return ( -
undefined : () => cardSelection(type_of_card)} - > - {!is_card_flipped ? ( +
+
undefined : () => cardSelection(type_of_card)} + > - ) : ( - )} +
); }; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 6c569c84558c..b08ce14978dc 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -184,12 +184,14 @@ export type TJurisdictionCardFrontProps = { toggleCardFlip: (event: SyntheticEvent) => void; card_values: TJurisdictionCardItems; card_data: TJurisdictionCardSection[]; + is_card_selected: boolean; }; export type TJurisdictionCardBackProps = { card_classname: string; toggleCardFlip: (event: SyntheticEvent) => void; verification_docs: TJurisdictionCardItemVerification | undefined; + is_card_selected: boolean; }; export type TJurisdictionClickableDescriptionProps = { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 8fcd270f400b..b3687ac7b017 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -494,13 +494,9 @@ display: flex; justify-content: space-between; flex-direction: column; - min-height: 50rem; - width: 26rem; + height: 100%; + width: 100%; cursor: pointer; - @include mobile { - height: 48rem; - width: 100%; - } &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); @@ -510,18 +506,15 @@ border: solid 1px var(--border-disabled); } - @include desktop { - height: auto; - } - &__wrapper { margin: 4rem 6rem 0; display: flex; justify-content: center; - gap: 1.8rem; + gap: 2rem; @include mobile { margin: 0; - padding: 2rem 4rem; + padding: 4rem 4rem; + gap: 4rem; flex-direction: column; align-items: center; overflow-y: scroll; @@ -680,6 +673,34 @@ } .cfd-card { + &-perspective { + perspective: 1000px; + @include mobile { + width: 100%; + } + } + &-container { + transform-style: preserve-3d; + transition: transform 0.25s ease-in-out; + min-height: 50rem; + width: 26rem; + @include mobile { + height: 48rem; + width: 100%; + } + } + &-flipped { + transform: rotateY(180deg); + } + &-front, + &-back { + position: absolute; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + &-back { + transform: rotateY(180deg); + } &-section { width: 100%; display: flex; From 2bb3eecf485c6944172faae0d145ddcd6200fbb0 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 14 Apr 2023 18:16:39 +0400 Subject: [PATCH 070/151] feat: :sparkles: displays 'Added' indicator if the card is already added --- .../components/cfds-listing/cfds-listing.scss | 29 ++++++++++++++++--- .../jurisdiction-card-front.tsx | 29 ++++++++++++++++--- .../jurisdiction-modal/jurisdiction-card.tsx | 13 +++++++-- packages/cfd/src/Containers/props.types.ts | 1 + packages/cfd/src/sass/cfd-dashboard.scss | 29 ++++++++++++++++--- packages/shared/src/styles/themes.scss | 3 ++ 6 files changed, 89 insertions(+), 15 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index b853c2b18d80..fbb52fba3306 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -88,15 +88,30 @@ height: 4rem; width: 100%; padding: 0.5rem; - border-radius: 1.6rem 1.6rem 0 0; + border-radius: 1.4rem 1.4rem 0 0; &-blank { height: 4rem; - border-radius: 1.6rem; + border-radius: 1.4rem; @include mobile { height: 2rem; } } } + &-footer { + position: absolute; + bottom: 0; + width: 100%; + &-gradient { + height: 12rem; + background: linear-gradient(transparent, var(--general-main-2)); + } + &-text { + background: var(--brand-secondary); + height: 4rem; + padding: 1rem; + border-radius: 0 0 1.4rem 1.4rem; + } + } } &-flipped-container { gap: 2rem; @@ -141,7 +156,7 @@ display: flex; flex-direction: column; justify-content: center; - margin: 1.6rem 2.4rem; + margin: 3rem 1.6rem 2.4rem; @include mobile { margin: unset; @@ -190,7 +205,7 @@ } &-container { transform-style: preserve-3d; - transition: transform 0.25s ease-in-out; + transition: transform 0.25s ease-in; min-height: 50rem; width: 26rem; @include mobile { @@ -281,6 +296,12 @@ justify-content: space-between; align-items: center; } + &-disabled { + pointer-events: none; + &-flat { + border: solid 1px var(--border-normal); + } + } } .cfd-modal--custom-exit { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index cf9e540e9ed5..11a944dd84db 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -11,11 +11,17 @@ const JurisdictionCardFront = ({ card_values, card_data, is_card_selected, + disabled, }: TJurisdictionCardFrontProps) => (
{card_values.is_over_header_available ? ( @@ -24,7 +30,7 @@ const JurisdictionCardFront = ({ weight='bold' color='info-blue' align='center' - size='xxs' + size='xs' className={`${card_classname}__card-content-over-header`} > @@ -51,6 +57,21 @@ const JurisdictionCardFront = ({ ))}
+ {disabled && ( +
+
+ + + +
+ )}
); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 5927c5fad230..741ba80377df 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -34,9 +34,15 @@ const JurisdictionCard = ({ return (
undefined : () => cardSelection(type_of_card)} > Date: Mon, 17 Apr 2023 11:18:35 +0800 Subject: [PATCH 071/151] chore: test case for jurisdiction modal content --- .../jurisdiction-modal-content.spec.tsx | 117 +++++++++++++++++- 1 file changed, 116 insertions(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index c0e9b400dc4f..7e3555fb5d1f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import JurisdictionModalContent from '../jurisdiction-modal-content'; -import { render, screen } from '@testing-library/react'; +import { findByDisplayValue, render, screen } from '@testing-library/react'; import RootStore from 'Stores/index'; describe('JurisdictionModalContent', () => { @@ -48,6 +48,22 @@ describe('JurisdictionModalContent', () => { shortcode: 'bvi' as const, sub_account_type: '', }, + { + market_type: 'gaming' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'vanuatu' as const, + sub_account_type: '', + }, ], financial_available_accounts: [ { @@ -82,6 +98,38 @@ describe('JurisdictionModalContent', () => { shortcode: 'bvi' as const, sub_account_type: '', }, + { + market_type: 'financial' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'vanuatu' as const, + sub_account_type: '', + }, + { + market_type: 'financial' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: 'labuan' as const, + sub_account_type: '', + }, ], context: mock_context, real_synthetic_accounts_existing_data: [], @@ -98,9 +146,76 @@ describe('JurisdictionModalContent', () => { it('should display cfd-jurisdiction-card--synthetic__wrapper in class name', () => { render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); + }); + + it('should display 3 types of jurisdiction card for synthetics account', () => { + render(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('British Virgin Islands')).toBeInTheDocument(); + expect(screen.getByText('Vanuatu')).toBeInTheDocument(); + }); + + it('should display content of 3 types of jurisdiction correctly for synthetics account', () => { + render(); + expect(screen.getAllByText('Assets')).toHaveLength(3); + expect(screen.getAllByText('Synthetics, Basket indices and Derived FX')).toHaveLength(3); + expect(screen.getAllByText('40+')).toHaveLength(3); + expect(screen.getAllByText('Leverage')).toHaveLength(3); + expect(screen.getAllByText('1:1000')).toHaveLength(3); + expect(screen.getAllByText('Verifications')).toHaveLength(3); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getAllByText('Learn more')).toHaveLength(2); + expect(screen.getAllByText('about verifications needed.')).toHaveLength(2); + expect(screen.getAllByText('Regulator/EDR')).toHaveLength(3); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + expect( + screen.getByText('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)') + ).toBeInTheDocument(); + expect(screen.getByText('Vanuatu Financial Services Commission')).toBeInTheDocument(); }); it('should display cfd-jurisdiction-card--financial__wrapper in class name', () => { render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); + }); + + it('should display 4 types of jurisdiction card for financial account', async () => { + render(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('British Virgin Islands')).toBeInTheDocument(); + expect(screen.getByText('Vanuatu')).toBeInTheDocument(); + expect(screen.getByText('Labuan')).toBeInTheDocument(); + }); + + it('should display content of 4 types of jurisdiction correctly for synthetics account', () => { + render(); + expect(screen.getAllByText('Assets')).toHaveLength(4); + expect(screen.getAllByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toHaveLength(2); + expect(screen.getByText('Forex, Stock indices, Commodities and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Forex and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getAllByText('Leverage')).toHaveLength(4); + expect(screen.getAllByText('1:1000')).toHaveLength(3); + expect(screen.getByText('1:100')).toBeInTheDocument(); + expect(screen.getAllByText('Spreads from')).toHaveLength(4); + expect(screen.getAllByText('0.6 pips')).toHaveLength(2); + expect(screen.getAllByText('0.5 pips')).toHaveLength(2); + expect(screen.getAllByText('Verifications')).toHaveLength(4); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getAllByText('Learn more')).toHaveLength(3); + expect(screen.getAllByText('about verifications needed.')).toHaveLength(3); + expect(screen.getAllByText('Regulator/EDR')).toHaveLength(4); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + expect( + screen.getByText('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)') + ).toBeInTheDocument(); + expect(screen.getByText('Vanuatu Financial Services Commission')).toBeInTheDocument(); + expect(screen.getByText('Labuan Financial Services Authority (licence no. MB/18/0024)')).toBeInTheDocument(); }); }); From d6536d09d6be1e6fcc183c8ff6a8b0c2add2f2dc Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 12:02:49 +0800 Subject: [PATCH 072/151] chore: update jurisdiction_selected_shortcode for foot note --- .../__test__/jurisdiction-modal-foot-note.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx index d8b32540ebf9..572915134792 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx @@ -28,7 +28,7 @@ describe('JurisdictionModalFootNote', () => { account_type: '', context: mock_context, card_classname: '', - jurisdiction_selected_shortcode: '', + jurisdiction_selected_shortcode: Jurisdiction.SVG, should_restrict_bvi_account_creation: false, should_restrict_vanuatu_account_creation: false, }; From 6c3f5c9c3a91815f7d2fb714ed61451f9587ab77 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 13:56:35 +0800 Subject: [PATCH 073/151] chore: update import to follow document --- .../__test__/jurisdiction-modal-content.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index 7e3555fb5d1f..0153076fbb1a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import JurisdictionModalContent from '../jurisdiction-modal-content'; -import { findByDisplayValue, render, screen } from '@testing-library/react'; import RootStore from 'Stores/index'; +import { render, screen } from '@testing-library/react'; describe('JurisdictionModalContent', () => { const mock_store = { From f2cf54b3f56f50792b03ad5c4ed7f1845d0711ac Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 10:09:14 +0400 Subject: [PATCH 074/151] style: :lipstick: fixes the height --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index fbb52fba3306..73a923936da4 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -136,7 +136,7 @@ } &__footer-wrapper { - min-height: 18.6rem; + min-height: 19.6rem; display: flex; flex-direction: column; justify-content: space-between; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index db1f037eb6b8..4867ef1db702 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -627,7 +627,7 @@ } &__footer-wrapper { - min-height: 18.6rem; + min-height: 19.6rem; display: flex; flex-direction: column; justify-content: space-between; From 77e505f2542be93b4f8956a75eabc94afe1c28b5 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 14:50:18 +0800 Subject: [PATCH 075/151] chore: test case for jurisdiction card front --- .../__test__/jurisdiction-card-front.spec.tsx | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx new file mode 100644 index 000000000000..e9368e637a3b --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import JurisdictionCardFront from '../jurisdiction-card-front'; +import { render, screen } from '@testing-library/react'; + +describe('JurisdictionCardFront', () => { + const mock_props = { + card_classname: 'jurisdiction_test', + toggleCardFlip: jest.fn(), + card_values: { + financial_contents: [ + { + key: '', + title: '', + description: '', + title_indicators: { + type: 'displayText' as const, + display_text: '', + display_text_skin_color: '', + }, + }, + ], + synthetic_contents: [ + { + key: '', + title: '', + description: '', + title_indicators: { + type: 'displayText' as const, + display_text: '', + display_text_skin_color: '', + }, + }, + ], + header: 'Test Header', + over_header: 'Test Over Header', + is_over_header_available: false, + }, + card_data: [ + { + key: 'Test1', + title: 'Test Title 1', + description: 'Test Description 1', + title_indicators: { + type: 'displayText' as const, + display_text: 'Test 1', + display_text_skin_color: '', + }, + }, + { + key: 'Test2', + title: 'Test Title 2', + description: 'Test Description 2', + title_indicators: { + type: 'displayText' as const, + display_text: 'Test 2', + display_text_skin_color: '', + }, + }, + ], + }; + + it('should render JurisdictionCardFront', () => { + render(); + expect(screen.getByText('Test Header')).toBeInTheDocument(); + expect(screen.getByText('Test Title 1')).toBeInTheDocument(); + expect(screen.getByText('Test 1')).toBeInTheDocument(); + expect(screen.getByText('Test Description 1')).toBeInTheDocument(); + expect(screen.getByText('Test Title 2')).toBeInTheDocument(); + expect(screen.getByText('Test 2')).toBeInTheDocument(); + expect(screen.getByText('Test Description 2')).toBeInTheDocument(); + }); + + it('should render JurisdictionCardFront with over header', () => { + mock_props.card_values.is_over_header_available = true; + render(); + expect(screen.getByText('Test Over Header')).toBeInTheDocument(); + }); +}); From ae3e07dd4b59514ec83c2b83883ae9a521d56247 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 14:54:51 +0800 Subject: [PATCH 076/151] chore: remove hard coded parts --- .../__test__/jurisdiction-modal-content.spec.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index 0153076fbb1a..734991be8517 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -2,6 +2,7 @@ import React from 'react'; import JurisdictionModalContent from '../jurisdiction-modal-content'; import RootStore from 'Stores/index'; import { render, screen } from '@testing-library/react'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionModalContent', () => { const mock_store = { @@ -29,7 +30,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'svg' as const, + shortcode: Jurisdiction.SVG, sub_account_type: '', }, { @@ -45,7 +46,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'bvi' as const, + shortcode: Jurisdiction.BVI, sub_account_type: '', }, { @@ -61,7 +62,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'vanuatu' as const, + shortcode: Jurisdiction.VANUATU, sub_account_type: '', }, ], @@ -79,7 +80,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'svg' as const, + shortcode: Jurisdiction.SVG, sub_account_type: '', }, { @@ -95,7 +96,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'bvi' as const, + shortcode: Jurisdiction.BVI, sub_account_type: '', }, { @@ -111,7 +112,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'vanuatu' as const, + shortcode: Jurisdiction.VANUATU, sub_account_type: '', }, { @@ -127,7 +128,7 @@ describe('JurisdictionModalContent', () => { }, signup: [''], }, - shortcode: 'labuan' as const, + shortcode: Jurisdiction.LABUAN, sub_account_type: '', }, ], From 92b77f64dd33f00f244713b737dbc5ca95de4812 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 15:01:15 +0800 Subject: [PATCH 077/151] chore: move the imports variable according to documentation --- .../__test__/jurisdiction-modal-content.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index 734991be8517..462ffb79c07c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import JurisdictionModalContent from '../jurisdiction-modal-content'; import RootStore from 'Stores/index'; import { render, screen } from '@testing-library/react'; import { Jurisdiction } from '@deriv/shared'; +import JurisdictionModalContent from '../jurisdiction-modal-content'; describe('JurisdictionModalContent', () => { const mock_store = { From 7c441a1414e9287a393f2377a9b67a088eb4b289 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 12:22:27 +0400 Subject: [PATCH 078/151] style: :lipstick: styles the back of the card as per figma design --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 6 ------ .../jurisdiction-modal/jurisdiction-card-back.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 6 ------ 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 73a923936da4..1b7777a08a40 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -266,17 +266,11 @@ flex-direction: column; gap: 1rem; } - - &-main { - height: 100%; - } - &-items-sub-container { display: flex; align-items: flex-start; gap: 1rem; } - &-back-button { transition: transform 0.25s linear; &:hover { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index 1bec8c7523f2..1edc0ab46e39 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -32,7 +32,7 @@ const JurisdictionCardBack = ({ {jurisdictionVerificationContents().short_description} -
+
{verification_docs?.map(verification_item => (
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 4867ef1db702..4611c74117e7 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -757,17 +757,11 @@ flex-direction: column; gap: 1rem; } - - &-main { - height: 100%; - } - &-items-sub-container { display: flex; align-items: flex-start; gap: 1rem; } - &-back-button { transition: transform 0.25s linear; &:hover { From 5e5302bfcf5a62391bff462d4a574c5e5717b782 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 12:48:06 +0400 Subject: [PATCH 079/151] refactor: :pencil2: rearranges import statements --- .../jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx index cde376664f1f..3dc0b6f0ee0b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Button, Modal } from '@deriv/components'; -import { localize } from '@deriv/translations'; import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; +import { localize } from '@deriv/translations'; +import { TJurisdictionModalContentWrapperProps } from '../props.types'; import { connect } from '../../Stores/connect'; import RootStore from '../../Stores/index'; import JurisdictionModalContent from './jurisdiction-modal-content'; -import { TJurisdictionModalContentWrapperProps } from '../props.types'; import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; From 8f38263a5e77e727cdae89cf3cb87780449309af Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 16:59:20 +0800 Subject: [PATCH 080/151] chore: included checks for MF clients and high risk clients --- .../jurisdiction-modal-content.spec.tsx | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index 462ffb79c07c..c9edce370df4 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -219,4 +219,81 @@ describe('JurisdictionModalContent', () => { expect(screen.getByText('Vanuatu Financial Services Commission')).toBeInTheDocument(); expect(screen.getByText('Labuan Financial Services Authority (licence no. MB/18/0024)')).toBeInTheDocument(); }); + + it('should display only financial maltainvest for MF clients', () => { + mock_props.financial_available_accounts = [ + { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.MALTA_INVEST }, + ]; + mock_props.synthetic_available_accounts = []; + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); + expect(screen.getByText('Malta')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('140+')).toBeInTheDocument(); + expect( + screen.getByText('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies') + ).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:30')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.5 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect(screen.getByText('Learn more')).toBeInTheDocument(); + expect(screen.getByText('about verifications needed.')).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect( + screen.getByText('Malta Financial Services Authority (MFSA) (licence no. IS/70156)') + ).toBeInTheDocument(); + }); + + it('should display only financial svg for highrisk clients', () => { + mock_props.financial_available_accounts = [ + { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + mock_props.synthetic_available_accounts = [ + { ...mock_props.synthetic_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('170+')).toBeInTheDocument(); + expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.6 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + }); + + it('should display only synthetic svg for highrisk clients', () => { + mock_props.financial_available_accounts = [ + { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + mock_props.synthetic_available_accounts = [ + { ...mock_props.synthetic_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('40+')).toBeInTheDocument(); + expect(screen.getByText('Synthetics, Basket indices and Derived FX')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + }); }); From a6a5236338a27ca2f2fc0c1f640ae421f6067519 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 17:40:46 +0800 Subject: [PATCH 081/151] chore: updated test case based on comments --- .../jurisdiction-modal-content.spec.tsx | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index c9edce370df4..b3c98f65a73c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -185,7 +185,7 @@ describe('JurisdictionModalContent', () => { expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); }); - it('should display 4 types of jurisdiction card for financial account', async () => { + it('should display 4 types of jurisdiction card for financial account', () => { render(); expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); expect(screen.getByText('British Virgin Islands')).toBeInTheDocument(); @@ -228,6 +228,10 @@ describe('JurisdictionModalContent', () => { render(); const container = screen.getByTestId('dt-jurisdiction-modal-content'); expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); + expect(screen.queryByText('St. Vincent & Grenadines')).not.toBeInTheDocument(); + expect(screen.queryByText('British Virgin Islands')).not.toBeInTheDocument(); + expect(screen.queryByText('Vanuatu')).not.toBeInTheDocument(); + expect(screen.queryByText('Labuan')).not.toBeInTheDocument(); expect(screen.getByText('Malta')).toBeInTheDocument(); expect(screen.getByText('Assets')).toBeInTheDocument(); expect(screen.getByText('140+')).toBeInTheDocument(); @@ -247,6 +251,23 @@ describe('JurisdictionModalContent', () => { ).toBeInTheDocument(); }); + const highriskCommonRenderCheck = () => { + expect(screen.queryByText('British Virgin Islands')).not.toBeInTheDocument(); + expect(screen.queryByText('Vanuatu')).not.toBeInTheDocument(); + expect(screen.queryByText('Labuan')).not.toBeInTheDocument(); + expect(screen.queryByText('Malta')).not.toBeInTheDocument(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + }; + it('should display only financial svg for highrisk clients', () => { mock_props.financial_available_accounts = [ { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.SVG }, @@ -257,20 +278,11 @@ describe('JurisdictionModalContent', () => { render(); const container = screen.getByTestId('dt-jurisdiction-modal-content'); expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); - expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); - expect(screen.getByText('Assets')).toBeInTheDocument(); + highriskCommonRenderCheck(); expect(screen.getByText('170+')).toBeInTheDocument(); expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument(); - expect(screen.getByText('Leverage')).toBeInTheDocument(); - expect(screen.getByText('1:1000')).toBeInTheDocument(); expect(screen.getByText('Spreads from')).toBeInTheDocument(); expect(screen.getByText('0.6 pips')).toBeInTheDocument(); - expect(screen.getByText('Verifications')).toBeInTheDocument(); - expect( - screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') - ).toBeInTheDocument(); - expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); - expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); }); it('should display only synthetic svg for highrisk clients', () => { @@ -283,17 +295,8 @@ describe('JurisdictionModalContent', () => { render(); const container = screen.getByTestId('dt-jurisdiction-modal-content'); expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); - expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); - expect(screen.getByText('Assets')).toBeInTheDocument(); + highriskCommonRenderCheck(); expect(screen.getByText('40+')).toBeInTheDocument(); expect(screen.getByText('Synthetics, Basket indices and Derived FX')).toBeInTheDocument(); - expect(screen.getByText('Leverage')).toBeInTheDocument(); - expect(screen.getByText('1:1000')).toBeInTheDocument(); - expect(screen.getByText('Verifications')).toBeInTheDocument(); - expect( - screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') - ).toBeInTheDocument(); - expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); - expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); }); }); From 79d7d75d5b8a6521e677a421e3f230f0bf7c01cc Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 13:57:11 +0400 Subject: [PATCH 082/151] refactor: :wastebasket: removes unwanted css classes --- .../components/cfds-listing/cfds-listing.scss | 39 ------------------ packages/cfd/src/sass/cfd-dashboard.scss | 40 ------------------- 2 files changed, 79 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 1b7777a08a40..c1c7c12efc85 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -37,45 +37,6 @@ box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } - &__verification-status, - &__verification-status--pending, - &__verification-status--account_added, - &__verification-status--poi_verified, - &__verification-status--not_submitted, - &__verification-status--hint { - width: 100%; - min-height: 2.4rem; - display: flex; - - * { - margin: auto; - } - - &--pending { - background-color: $color-yellow; - border-radius: 0.5rem; - } - - &--poi_verified { - background: var(--text-status-info-blue); - border-radius: 0.5rem; - } - &--account_added { - background-color: $color-green-1; - border-radius: 0.5rem; - } - - &--failed { - background-color: $color-red-1; - border-radius: 0.5rem; - } - &--not_submitted { - background-color: var(--general-section-1); - padding: 0.3rem; - border-radius: 0.5rem; - } - } - &__card { &-content { &-container { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 4611c74117e7..80d1650eb3ff 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -527,46 +527,6 @@ box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } - &__verification-status, - &__verification-status--pending, - &__verification-status--account_added, - &__verification-status--poi_verified, - &__verification-status--not_submitted, - &__verification-status--hint { - width: 100%; - min-height: 2.4rem; - display: flex; - - * { - margin: auto; - } - - &--pending { - background-color: #ffad3a; - border-radius: 0.5rem; - } - - &--poi_verified { - background: var(--text-status-info-blue); - border-radius: 0.5rem; - padding: 0.1rem; - } - &--account_added { - background-color: #4bb4b3; - border-radius: 0.5rem; - } - - &--failed { - background-color: #ec3f3f; - border-radius: 0.5rem; - } - &--not_submitted { - background-color: var(--general-section-1); - padding: 0.3rem; - border-radius: 0.5rem; - } - } - &__card { &-content { &-container { From 62fb1e31d2dc935c1dc4981030a671f47b2a4498 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 14:05:23 +0400 Subject: [PATCH 083/151] refactor: :art: moved classNames into single object --- .../jurisdiction-modal/jurisdiction-card.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 741ba80377df..93b6a36ff82f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -34,15 +34,10 @@ const JurisdictionCard = ({ return (
undefined : () => cardSelection(type_of_card)} > Date: Mon, 17 Apr 2023 14:18:04 +0400 Subject: [PATCH 084/151] refactor: :art: rearranges import statements --- .../Containers/jurisdiction-modal/jurisdiction-card-back.tsx | 2 +- .../Containers/jurisdiction-modal/jurisdiction-card-front.tsx | 2 +- .../jurisdiction-modal/jurisdiction-card-section.tsx | 2 +- .../jurisdiction-modal/jurisdiction-clickable-description.tsx | 2 +- .../jurisdiction-modal/jurisdiction-modal-content.tsx | 2 +- .../jurisdiction-modal/jurisdiction-modal-foot-note.tsx | 2 +- .../jurisdiction-modal/jurisdiction-title-indicator.tsx | 4 ++-- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index 1edc0ab46e39..a5a3e976d116 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; +import React from 'react'; import { Icon, Text } from '@deriv/components'; import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionCardBackProps } from 'Containers/props.types'; -import React from 'react'; const JurisdictionCardBack = ({ card_classname, diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index 11a944dd84db..6dcd61d0ca60 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import classNames from 'classnames'; +import React from 'react'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; import { TJurisdictionCardFrontProps } from 'Containers/props.types'; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index 571ff1a538e7..ce592ff51bf0 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -1,5 +1,5 @@ -import { Text } from '@deriv/components'; import React from 'react'; +import { Text } from '@deriv/components'; import { TJurisdictionCardSectionProps } from '../props.types'; import JurisdictionClickableDescription from './jurisdiction-clickable-description'; import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx index 79c69dba7788..2db1f1553da8 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -1,6 +1,6 @@ +import React from 'react'; import { Text } from '@deriv/components'; import { TJurisdictionClickableDescriptionProps } from 'Containers/props.types'; -import React from 'react'; const JurisdictionClickableDescription = ({ clickable_description, 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 82dd49804610..022959646958 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { Jurisdiction } from '@deriv/shared'; import { TJurisdictionModalContentProps } from '../props.types'; import JurisdictionCard from './jurisdiction-card'; -import { Jurisdiction } from '@deriv/shared'; const JurisdictionModalContent = ({ account_type, 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 4af5b7e74146..d8c4d305fb1c 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 @@ -1,7 +1,7 @@ import React from 'react'; import { Text } from '@deriv/components'; -import { Localize } from '@deriv/translations'; import { getAuthenticationStatusInfo, isMobile, Jurisdiction } from '@deriv/shared'; +import { Localize } from '@deriv/translations'; import { TJurisdictionModalFootNoteProps } from '../props.types'; const FooterNote = ({ diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 701f72b5c636..1394df7dcebc 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -1,7 +1,7 @@ -import { Text } from '@deriv/components'; +import React from 'react'; import classNames from 'classnames'; +import { Text } from '@deriv/components'; import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; -import React from 'react'; const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndicatorProps) => { return title_indicators.type === 'displayText' ? ( From d4c865819adacb119e13cde4f0231d4d808a8965 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 18:27:42 +0800 Subject: [PATCH 085/151] chore: updated logic for test cases --- .../jurisdiction-modal-content.spec.tsx | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index b3c98f65a73c..c57c5c0067e5 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -251,7 +251,16 @@ describe('JurisdictionModalContent', () => { ).toBeInTheDocument(); }); - const highriskCommonRenderCheck = () => { + it('should display only financial svg for highrisk clients', () => { + mock_props.financial_available_accounts = [ + { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + mock_props.synthetic_available_accounts = [ + { ...mock_props.synthetic_available_accounts[0], shortcode: Jurisdiction.SVG }, + ]; + render(); + const container = screen.getByTestId('dt-jurisdiction-modal-content'); + expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); expect(screen.queryByText('British Virgin Islands')).not.toBeInTheDocument(); expect(screen.queryByText('Vanuatu')).not.toBeInTheDocument(); expect(screen.queryByText('Labuan')).not.toBeInTheDocument(); @@ -266,19 +275,6 @@ describe('JurisdictionModalContent', () => { ).toBeInTheDocument(); expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); - }; - - it('should display only financial svg for highrisk clients', () => { - mock_props.financial_available_accounts = [ - { ...mock_props.financial_available_accounts[0], shortcode: Jurisdiction.SVG }, - ]; - mock_props.synthetic_available_accounts = [ - { ...mock_props.synthetic_available_accounts[0], shortcode: Jurisdiction.SVG }, - ]; - render(); - const container = screen.getByTestId('dt-jurisdiction-modal-content'); - expect(container).toHaveClass('cfd-jurisdiction-card--financial__wrapper'); - highriskCommonRenderCheck(); expect(screen.getByText('170+')).toBeInTheDocument(); expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument(); expect(screen.getByText('Spreads from')).toBeInTheDocument(); @@ -295,7 +291,20 @@ describe('JurisdictionModalContent', () => { render(); const container = screen.getByTestId('dt-jurisdiction-modal-content'); expect(container).toHaveClass('cfd-jurisdiction-card--synthetic__wrapper'); - highriskCommonRenderCheck(); + expect(screen.queryByText('British Virgin Islands')).not.toBeInTheDocument(); + expect(screen.queryByText('Vanuatu')).not.toBeInTheDocument(); + expect(screen.queryByText('Labuan')).not.toBeInTheDocument(); + expect(screen.queryByText('Malta')).not.toBeInTheDocument(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); expect(screen.getByText('40+')).toBeInTheDocument(); expect(screen.getByText('Synthetics, Basket indices and Derived FX')).toBeInTheDocument(); }); From 07611c45e33c466762eebe78062e08c8722c5df9 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Mon, 17 Apr 2023 18:35:58 +0800 Subject: [PATCH 086/151] chore: update test case in footnote --- .../__test__/jurisdiction-modal-foot-note.spec.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx index 572915134792..ff4227723950 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-foot-note.spec.tsx @@ -205,4 +205,9 @@ describe('JurisdictionModalFootNote', () => { ) ).toBeInTheDocument(); }); + + it('should not render JurisdictionModalFootNote when jurisdiction_shortcode is empty', () => { + render(); + expect(screen.queryByTestId('dt-jurisdiction-footnote')).not.toBeInTheDocument(); + }); }); From 250758228b4ff6eafea288dda3f3acbc2e5bdb63 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 14:38:22 +0400 Subject: [PATCH 087/151] refactor: :art: sorts props alphabetically --- .../jurisdiction-modal-content-wrapper.tsx | 24 +++++++++---------- packages/cfd/src/Containers/props.types.ts | 14 +++++------ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx index 3dc0b6f0ee0b..594472f31ef0 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -10,25 +10,25 @@ import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; const JurisdictionModalContentWrapper = ({ - openPasswordModal, - context, - account_type, account_status, + account_type, + context, + fetchAccountSettings, + has_submitted_cfd_personal_details, is_jurisdiction_modal_visible, is_virtual, jurisdiction_selected_shortcode, + openPasswordModal, real_financial_accounts_existing_data, real_synthetic_accounts_existing_data, - trading_platform_available_accounts, - toggleJurisdictionModal, setJurisdictionSelectedShortcode, should_restrict_bvi_account_creation, should_restrict_vanuatu_account_creation, show_eu_related_content, toggleCFDVerificationModal, + trading_platform_available_accounts, + toggleJurisdictionModal, updateMT5Status, - fetchAccountSettings, - has_submitted_cfd_personal_details, }: TJurisdictionModalContentWrapperProps) => { const [checked, setChecked] = React.useState(false); @@ -201,21 +201,21 @@ const JurisdictionModalContentWrapper = ({ ); }; export default connect(({ modules: { cfd }, client, traders_hub }: RootStore) => ({ - account_type: cfd.account_type, account_status: client.account_status, + account_type: cfd.account_type, + fetchAccountSettings: client.fetchAccountSettings, + has_submitted_cfd_personal_details: cfd.has_submitted_cfd_personal_details, is_jurisdiction_modal_visible: cfd.is_jurisdiction_modal_visible, is_virtual: client.is_virtual, jurisdiction_selected_shortcode: cfd.jurisdiction_selected_shortcode, real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data, real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data, - trading_platform_available_accounts: client.trading_platform_available_accounts, - toggleJurisdictionModal: cfd.toggleJurisdictionModal, 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, toggleCFDVerificationModal: cfd.toggleCFDVerificationModal, + trading_platform_available_accounts: client.trading_platform_available_accounts, + toggleJurisdictionModal: cfd.toggleJurisdictionModal, updateMT5Status: client.updateMT5Status, - fetchAccountSettings: client.fetchAccountSettings, - has_submitted_cfd_personal_details: cfd.has_submitted_cfd_personal_details, }))(JurisdictionModalContentWrapper); diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 2680080ce7a6..252ee6373c2a 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -240,28 +240,28 @@ type TOpenAccountTransferMeta = { }; export type TJurisdictionModalContentWrapperProps = { - openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; - context: RootStore; + account_status: GetAccountStatus; account_type: { type: string; category: string; }; - account_status: GetAccountStatus; + context: RootStore; + fetchAccountSettings: () => void; + has_submitted_cfd_personal_details: boolean; is_jurisdiction_modal_visible: boolean; is_virtual: boolean; jurisdiction_selected_shortcode: string; + openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; real_financial_accounts_existing_data: TExistingData; real_synthetic_accounts_existing_data: TExistingData; - trading_platform_available_accounts: TTradingPlatformAvailableAccount[]; - toggleJurisdictionModal: () => void; setJurisdictionSelectedShortcode: (shortcode: string) => void; should_restrict_bvi_account_creation: boolean; should_restrict_vanuatu_account_creation: boolean; show_eu_related_content: boolean; toggleCFDVerificationModal: () => void; + trading_platform_available_accounts: TTradingPlatformAvailableAccount[]; + toggleJurisdictionModal: () => void; updateMT5Status: () => void; - fetchAccountSettings: () => void; - has_submitted_cfd_personal_details: boolean; }; export type TJurisdictionModalProps = { From 5b9ef6aec625b046e8607655df5bd276806a121c Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 14:44:10 +0400 Subject: [PATCH 088/151] refactor: :art: reuses the prop object --- packages/cfd/src/Containers/props.types.ts | 28 +++++++++------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 252ee6373c2a..781e1187bed0 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -239,43 +239,37 @@ type TOpenAccountTransferMeta = { type?: string; }; -export type TJurisdictionModalContentWrapperProps = { - account_status: GetAccountStatus; +type JurisdictionModalCommonProps = { + openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; + context: RootStore; account_type: { type: string; category: string; }; - context: RootStore; + is_jurisdiction_modal_visible: boolean; + show_eu_related_content: boolean; + toggleJurisdictionModal: () => void; +}; + +export type TJurisdictionModalContentWrapperProps = JurisdictionModalCommonProps & { + account_status: GetAccountStatus; fetchAccountSettings: () => void; has_submitted_cfd_personal_details: boolean; - is_jurisdiction_modal_visible: boolean; is_virtual: boolean; jurisdiction_selected_shortcode: string; - openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; real_financial_accounts_existing_data: TExistingData; real_synthetic_accounts_existing_data: TExistingData; setJurisdictionSelectedShortcode: (shortcode: string) => void; should_restrict_bvi_account_creation: boolean; should_restrict_vanuatu_account_creation: boolean; - show_eu_related_content: boolean; toggleCFDVerificationModal: () => void; trading_platform_available_accounts: TTradingPlatformAvailableAccount[]; - toggleJurisdictionModal: () => void; updateMT5Status: () => void; }; -export type TJurisdictionModalProps = { - openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; - context: RootStore; - account_type: { - type: string; - category: string; - }; +export type TJurisdictionModalProps = JurisdictionModalCommonProps & { disableApp: () => void; enableApp: () => void; - is_jurisdiction_modal_visible: boolean; - show_eu_related_content: boolean; - toggleJurisdictionModal: () => void; }; export type TJurisdictionModalContentProps = { From a5d3aa773f762cd7701158e8a9f92247582f87b3 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 14:50:07 +0400 Subject: [PATCH 089/151] refactor: :pencil2: sorts props alphabetically --- .../jurisdiction-modal/jurisdiction-card-back.tsx | 2 +- .../jurisdiction-modal/jurisdiction-card-front.tsx | 6 +++--- .../src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 4 ++-- .../Containers/jurisdiction-modal/jurisdiction-modal.tsx | 4 ++-- packages/cfd/src/Containers/props.types.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index a5a3e976d116..f3f6aa85dbca 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -6,9 +6,9 @@ import { TJurisdictionCardBackProps } from 'Containers/props.types'; const JurisdictionCardBack = ({ card_classname, + is_card_selected, toggleCardFlip, verification_docs, - is_card_selected, }: TJurisdictionCardBackProps) => (
(
{ const card_classname = `cfd-jurisdiction-card--${account_type}`; const is_synthetic = account_type === 'synthetic'; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 6026c10346e8..835e7e780916 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -7,12 +7,12 @@ import { TJurisdictionModalProps } from '../props.types'; import JurisdictionModalContentWrapper from './jurisdiction-modal-content-wrapper'; const JurisdictionModal = ({ - openPasswordModal, - context, account_type, + context, disableApp, enableApp, is_jurisdiction_modal_visible, + openPasswordModal, show_eu_related_content, toggleJurisdictionModal, }: TJurisdictionModalProps) => { diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 781e1187bed0..cd172a7476e3 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -240,13 +240,13 @@ type TOpenAccountTransferMeta = { }; type JurisdictionModalCommonProps = { - openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; - context: RootStore; account_type: { type: string; category: string; }; + context: RootStore; is_jurisdiction_modal_visible: boolean; + openPasswordModal: (account_type: TOpenAccountTransferMeta) => void; show_eu_related_content: boolean; toggleJurisdictionModal: () => void; }; From f881a59dad9edb9fcbc782cb0278a585bfbf7053 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 15:02:53 +0400 Subject: [PATCH 090/151] refactor: :art: uses single object for classnames --- .../jurisdiction-modal/jurisdiction-card-front.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index b65f1c9b4f6a..c54b1d72292b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -14,14 +14,10 @@ const JurisdictionCardFront = ({ toggleCardFlip, }: TJurisdictionCardFrontProps) => (
{card_values.is_over_header_available ? ( From 191c6518ccfabf813b7e54f491132b4e56079170 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 17 Apr 2023 16:34:36 +0400 Subject: [PATCH 091/151] style: :lipstick: aligns card sections equally --- .../components/cfds-listing/cfds-listing.scss | 13 +++++++++- .../jurisdiction-card-section.tsx | 26 +++++++++++-------- packages/cfd/src/sass/cfd-dashboard.scss | 13 +++++++++- 3 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index c1c7c12efc85..772dc93b1a06 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -167,7 +167,7 @@ &-container { transform-style: preserve-3d; transition: transform 0.25s ease-in; - min-height: 50rem; + min-height: 54rem; width: 26rem; @include mobile { height: 48rem; @@ -220,6 +220,17 @@ background: $color-brown; } } + &-description-height { + @include desktop { + &-assets { + min-height: 3.2rem; + } + &-verifications, + &-regulator { + min-height: 4.8rem; + } + } + } } &-back-section { &-items-container { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index ce592ff51bf0..a5812f6c6f7c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -14,17 +14,21 @@ const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdi )}
- {card_section_item.clickable_description ? ( - - ) : ( - card_section_item.description && ( - - {card_section_item.description} - - ) + {(card_section_item.clickable_description || card_section_item.description) && ( +
+ {card_section_item.clickable_description ? ( + + ) : ( + card_section_item.description && ( + + {card_section_item.description} + + ) + )} +
)}
); diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 80d1650eb3ff..e295b7b50e38 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -657,7 +657,7 @@ &-container { transform-style: preserve-3d; transition: transform 0.25s ease-in; - min-height: 50rem; + min-height: 54rem; width: 26rem; @include mobile { height: 48rem; @@ -710,6 +710,17 @@ background: $color-brown; } } + &-description-height { + @include desktop { + &-assets { + min-height: 3.2rem; + } + &-verifications, + &-regulator { + min-height: 4.8rem; + } + } + } } &-back-section { &-items-container { From ba98edec297f98906a61f024af7b604b8dc3096c Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 18 Apr 2023 09:05:37 +0400 Subject: [PATCH 092/151] feat: :sparkles: sets up displaying verification icons in card front --- packages/cfd/src/Components/props.types.ts | 1 - .../jurisdiction-contents/jurisdiction-bvi-contents.ts | 1 + .../jurisdiction-contents/jurisdiction-labuan-contents.ts | 1 + .../jurisdiction-contents/jurisdiction-vanuatu-contents.ts | 1 + .../jurisdiction-contents/jurisdiction_maltainvest_contents.ts | 1 + .../jurisdiction-modal/jurisdiction-title-indicator.tsx | 2 +- 6 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 704fb6822ef0..0e80ca1fa9f5 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -85,7 +85,6 @@ export type TJurisdictionCardSectionTitleIndicators = { type: 'displayText' | 'displayIcons'; display_text?: string; display_text_skin_color?: string; - display_icons?: Array; }; export type TJurisdictionCardSection = { diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts index ee1ba2a4b78e..e46e3e34164e 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -72,6 +72,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts index 6dc4039ede60..10fb7990d9b5 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -58,6 +58,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts index 42d58f9c3bd7..028d4f9bd4d8 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -70,6 +70,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts index ae36628a2eff..39b2d0d7d432 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts @@ -79,6 +79,7 @@ export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 1394df7dcebc..980651959e1b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -19,7 +19,7 @@ const JurisdictionTitleIndicator = ({ title_indicators }: TJurisdictionTitleIndi {title_indicators.display_text} ) : ( -
{title_indicators.display_icons?.map(display_icon => display_icon)}
+
); }; export default JurisdictionTitleIndicator; From a38613f4fbdb1a98defe3e18efdb5b2f50ce7a63 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 18 Apr 2023 09:09:05 +0400 Subject: [PATCH 093/151] refactor: :art: sorts props alphabetically --- .../Containers/jurisdiction-modal/jurisdiction-card.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index b89b43d911ba..e6e7d07a7d2f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -42,17 +42,17 @@ const JurisdictionCard = ({ >
From e07216cb026c0905c1ed0ea33e9760f5294d5632 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 18 Apr 2023 09:20:17 +0400 Subject: [PATCH 094/151] refactor: :art: adds verification items to props --- .../jurisdiction-card-front.tsx | 7 ++++++- .../jurisdiction-card-section.tsx | 11 +++++++++-- .../jurisdiction-modal/jurisdiction-card.tsx | 1 + .../jurisdiction-title-indicator.tsx | 4 ++-- packages/cfd/src/Containers/props.types.ts | 19 +++++++++---------- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index c54b1d72292b..9b2a2763d055 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -12,6 +12,7 @@ const JurisdictionCardFront = ({ disabled, is_card_selected, toggleCardFlip, + verification_docs, }: TJurisdictionCardFrontProps) => (
{card_data.map((item, index) => ( - + {index < card_data.length - 1 &&
} ))} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index a5812f6c6f7c..80d883136109 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -4,14 +4,21 @@ import { TJurisdictionCardSectionProps } from '../props.types'; import JurisdictionClickableDescription from './jurisdiction-clickable-description'; import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; -const JurisdictionCardSection = ({ card_section_item, toggleCardFlip }: TJurisdictionCardSectionProps) => ( +const JurisdictionCardSection = ({ + card_section_item, + toggleCardFlip, + verification_docs, +}: TJurisdictionCardSectionProps) => (
{card_section_item.title} {card_section_item.title_indicators && ( - + )}
{(card_section_item.clickable_description || card_section_item.description) && ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index e6e7d07a7d2f..032833cfb504 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -47,6 +47,7 @@ const JurisdictionCard = ({ disabled={disabled} is_card_selected={is_card_selected} toggleCardFlip={toggleCardFlip} + verification_docs={verification_docs} /> { +const JurisdictionTitleIndicator = ({ title_indicators, verification_docs }: TJurisdictionTitleIndicatorProps) => { return title_indicators.type === 'displayText' ? ( ) : ( -
+
{verification_docs?.map(verification_item => verification_item)}
); }; export default JurisdictionTitleIndicator; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index cd172a7476e3..73e02840b2e4 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -179,20 +179,17 @@ export type TJurisdictionCardProps = { disabled: boolean; }; -export type TJurisdictionCardFrontProps = { - card_classname: string; - toggleCardFlip: (event: SyntheticEvent) => void; - card_values: TJurisdictionCardItems; - card_data: TJurisdictionCardSection[]; - is_card_selected: boolean; - disabled: boolean; -}; - export type TJurisdictionCardBackProps = { card_classname: string; + is_card_selected: boolean; toggleCardFlip: (event: SyntheticEvent) => void; verification_docs: TJurisdictionCardItemVerification | undefined; - is_card_selected: boolean; +}; + +export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & { + card_data: TJurisdictionCardSection[]; + card_values: TJurisdictionCardItems; + disabled: boolean; }; export type TJurisdictionClickableDescriptionProps = { @@ -202,11 +199,13 @@ export type TJurisdictionClickableDescriptionProps = { export type TJurisdictionTitleIndicatorProps = { title_indicators: TJurisdictionCardSectionTitleIndicators; + verification_docs: TJurisdictionCardItemVerification | undefined; }; export type TJurisdictionCardSectionProps = { card_section_item: TJurisdictionCardSection; toggleCardFlip: (event: SyntheticEvent) => void; + verification_docs: TJurisdictionCardItemVerification | undefined; }; export type TJurisdictionCardType = 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; From 2d3226cc3b98b46f63bf8d71c7aba5b944338055 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 18 Apr 2023 10:09:43 +0400 Subject: [PATCH 095/151] feat: :sparkles: displays verification icons on card front --- .../src/components/cfds-listing/cfds-listing.scss | 8 ++++++-- .../jurisdiction-title-indicator.tsx | 14 ++++++++++++-- packages/cfd/src/sass/cfd-dashboard.scss | 8 ++++++-- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 772dc93b1a06..57b52947ece5 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -198,6 +198,10 @@ &-title-indicator { padding: 0.6rem 1.2rem; border-radius: $BORDER_RADIUS; + &-icon-container { + display: flex; + gap: 1rem; + } &__red-darker { background: $color-red-8; } @@ -223,11 +227,11 @@ &-description-height { @include desktop { &-assets { - min-height: 3.2rem; + min-height: 3.4rem; } &-verifications, &-regulator { - min-height: 4.8rem; + min-height: 5rem; } } } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 236de519e246..5fac1cc61c41 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Text } from '@deriv/components'; +import { Icon, Text } from '@deriv/components'; +import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; const JurisdictionTitleIndicator = ({ title_indicators, verification_docs }: TJurisdictionTitleIndicatorProps) => { @@ -19,7 +20,16 @@ const JurisdictionTitleIndicator = ({ title_indicators, verification_docs }: TJu {title_indicators.display_text} ) : ( -
{verification_docs?.map(verification_item => verification_item)}
+
+ {verification_docs?.map(verification_doc => ( +
+ +
+ ))} +
); }; + export default JurisdictionTitleIndicator; diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index e295b7b50e38..ca8b683330c8 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -688,6 +688,10 @@ &-title-indicator { padding: 0.6rem 1.2rem; border-radius: $BORDER_RADIUS; + &-icon-container { + display: flex; + gap: 1rem; + } &__red-darker { background: $color-red-8; } @@ -713,11 +717,11 @@ &-description-height { @include desktop { &-assets { - min-height: 3.2rem; + min-height: 3.4rem; } &-verifications, &-regulator { - min-height: 4.8rem; + min-height: 5rem; } } } From c19a9ec0d915ec46940f204db009003bec6de580 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 18 Apr 2023 15:35:30 +0800 Subject: [PATCH 096/151] chore: test case for jurisdiction title indicator --- .../jurisdiction-title-indicator.spec.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx new file mode 100644 index 000000000000..3386eb9d1b9d --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import JurisdictionTitleIndicator from '../jurisdiction-title-indicator'; + +describe('JurisdictionTitleIndicator', () => { + type TMockProps = { + title_indicators: { + type: 'displayText' | 'displayIcons'; + display_text?: string; + display_icons?: string[]; + }; + }; + const mock_props: TMockProps = { + title_indicators: { + type: 'displayText', + display_text: 'Test Display Text', + display_icons: [], + }, + }; + it('should render JurisdictionTitleIndicator with displayText', () => { + render(); + expect(screen.getByText('Test Display Text')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons', () => { + mock_props.title_indicators.type = 'displayIcons'; + mock_props.title_indicators.display_icons = ['Test Icon']; + render(); + expect(screen.queryByText('Test Display Text')).not.toBeInTheDocument(); + expect(screen.queryByText('Test Icon')).toBeInTheDocument(); + }); +}); From fe991a21d1566ad720d069e677839ab2a8bf4832 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 18 Apr 2023 14:41:44 +0400 Subject: [PATCH 097/151] feat: :sparkles: adds icons for various verification status --- .../components/cfds-listing/cfds-listing.scss | 2 +- packages/cfd/src/Components/props.types.ts | 3 ++- .../jurisdiction-bvi-contents.ts | 1 + .../jurisdiction-labuan-contents.ts | 1 + .../jurisdiction-svg-contents.ts | 4 ++++ .../jurisdiction-vanuatu-contents.ts | 1 + .../jurisdiction-verification-contents.ts | 4 ++++ .../jurisdiction-title-indicator.tsx | 5 ++++- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- .../ic-document-number-verification-default.svg | 6 ++++++ .../ic-document-number-verification-failed.svg | 1 + .../ic-document-number-verification-pending.svg | 1 + ...ic-document-number-verification-verified.svg | 1 + ...c-identity-document-verification-default.svg | 7 +++++++ ...ic-identity-document-verification-failed.svg | 1 + ...c-identity-document-verification-pending.svg | 1 + ...-identity-document-verification-verified.svg | 1 + ...ic-name-and-address-verification-default.svg | 3 +++ .../ic-name-and-address-verification-failed.svg | 1 + ...ic-name-and-address-verification-pending.svg | 1 + ...c-name-and-address-verification-verified.svg | 1 + .../ic-not-applicable-verification-default.svg | 11 +++++++++++ .../common/ic-selfie-verification-default.svg | 4 ++++ .../common/ic-selfie-verification-failed.svg | 1 + .../common/ic-selfie-verification-pending.svg | 1 + .../common/ic-selfie-verification-verified.svg | 1 + .../components/src/components/icon/icons.js | 17 +++++++++++++++++ packages/components/stories/icon/icons.js | 17 +++++++++++++++++ 28 files changed, 96 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/components/icon/common/ic-document-number-verification-default.svg create mode 100644 packages/components/src/components/icon/common/ic-document-number-verification-failed.svg create mode 100644 packages/components/src/components/icon/common/ic-document-number-verification-pending.svg create mode 100644 packages/components/src/components/icon/common/ic-document-number-verification-verified.svg create mode 100644 packages/components/src/components/icon/common/ic-identity-document-verification-default.svg create mode 100644 packages/components/src/components/icon/common/ic-identity-document-verification-failed.svg create mode 100644 packages/components/src/components/icon/common/ic-identity-document-verification-pending.svg create mode 100644 packages/components/src/components/icon/common/ic-identity-document-verification-verified.svg create mode 100644 packages/components/src/components/icon/common/ic-name-and-address-verification-default.svg create mode 100644 packages/components/src/components/icon/common/ic-name-and-address-verification-failed.svg create mode 100644 packages/components/src/components/icon/common/ic-name-and-address-verification-pending.svg create mode 100644 packages/components/src/components/icon/common/ic-name-and-address-verification-verified.svg create mode 100644 packages/components/src/components/icon/common/ic-not-applicable-verification-default.svg create mode 100644 packages/components/src/components/icon/common/ic-selfie-verification-default.svg create mode 100644 packages/components/src/components/icon/common/ic-selfie-verification-failed.svg create mode 100644 packages/components/src/components/icon/common/ic-selfie-verification-pending.svg create mode 100644 packages/components/src/components/icon/common/ic-selfie-verification-verified.svg diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 57b52947ece5..98805b62d7b5 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -200,7 +200,7 @@ border-radius: $BORDER_RADIUS; &-icon-container { display: flex; - gap: 1rem; + gap: 0.5rem; } &__red-darker { background: $color-red-8; diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 0e80ca1fa9f5..bb42e80c83be 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -96,7 +96,7 @@ export type TJurisdictionCardSection = { }; export type TJurisdictionCardItemVerification = Array< - 'document_number' | 'selfie' | 'identity_document' | 'name_and_address' + 'document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable' >; export type TJurisdictionCardItems = { @@ -119,6 +119,7 @@ export type TJurisdictionVerificationItems = { selfie?: TJurisdictionVerificationSection; identity_document?: TJurisdictionVerificationSection; name_and_address?: TJurisdictionVerificationSection; + not_applicable?: TJurisdictionVerificationSection; }; type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green'; diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts index e46e3e34164e..a0219aaf6a67 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -27,6 +27,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts index 10fb7990d9b5..d9e62498a47f 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -15,6 +15,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts index 6b42dd4a79e1..4fcc96e8353a 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts @@ -27,6 +27,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, description: `${localize( 'You will need to submit proof of identity and address once you reach certain thresholds.' )}`, @@ -69,6 +70,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, description: `${localize( 'You will need to submit proof of identity and address once you reach certain thresholds.' )}`, @@ -79,4 +81,6 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({ description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`, }, ], + synthetic_verification_docs: ['not_applicable'], + financial_verification_docs: ['not_applicable'], }); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts index 028d4f9bd4d8..77955f87afc2 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -27,6 +27,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({ { key: 'verifications', title: `${localize('Verifications')}`, + title_indicators: { type: 'displayIcons' }, clickable_description: [ { type: 'link', text: `${localize('Learn more')}` }, { type: 'text', text: `${localize('about verifications needed.')}` }, diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts index 19bf2b3fc0b8..fda09b34b34a 100644 --- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts @@ -28,6 +28,10 @@ export const jurisdictionVerificationContents = (): TJurisdictionVerificationCon 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' )}`, }, + not_applicable: { + icon: 'IcNotApplicableVerification', + text: 'Not Applicable', + }, }, status_references: [ { diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 5fac1cc61c41..9d0fe3a7fd58 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -24,7 +24,10 @@ const JurisdictionTitleIndicator = ({ title_indicators, verification_docs }: TJu {verification_docs?.map(verification_doc => (
))} diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index ca8b683330c8..35077a60e96d 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -690,7 +690,7 @@ border-radius: $BORDER_RADIUS; &-icon-container { display: flex; - gap: 1rem; + gap: 0.5rem; } &__red-darker { background: $color-red-8; diff --git a/packages/components/src/components/icon/common/ic-document-number-verification-default.svg b/packages/components/src/components/icon/common/ic-document-number-verification-default.svg new file mode 100644 index 000000000000..22116f8ff862 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification-default.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/components/src/components/icon/common/ic-document-number-verification-failed.svg b/packages/components/src/components/icon/common/ic-document-number-verification-failed.svg new file mode 100644 index 000000000000..9d1257fb8eb9 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification-failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-document-number-verification-pending.svg b/packages/components/src/components/icon/common/ic-document-number-verification-pending.svg new file mode 100644 index 000000000000..427adbf51e2d --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification-pending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-document-number-verification-verified.svg b/packages/components/src/components/icon/common/ic-document-number-verification-verified.svg new file mode 100644 index 000000000000..dae6706afa17 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification-default.svg b/packages/components/src/components/icon/common/ic-identity-document-verification-default.svg new file mode 100644 index 000000000000..a75a2c547854 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification-default.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification-failed.svg b/packages/components/src/components/icon/common/ic-identity-document-verification-failed.svg new file mode 100644 index 000000000000..b870461d6b96 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification-failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification-pending.svg b/packages/components/src/components/icon/common/ic-identity-document-verification-pending.svg new file mode 100644 index 000000000000..92febfdf2af7 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification-pending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-identity-document-verification-verified.svg b/packages/components/src/components/icon/common/ic-identity-document-verification-verified.svg new file mode 100644 index 000000000000..73184d7b3721 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification-default.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification-default.svg new file mode 100644 index 000000000000..c7f0f32bef6a --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification-default.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification-failed.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification-failed.svg new file mode 100644 index 000000000000..a1b85a47dd89 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification-failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification-pending.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification-pending.svg new file mode 100644 index 000000000000..0f560f786135 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification-pending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-name-and-address-verification-verified.svg b/packages/components/src/components/icon/common/ic-name-and-address-verification-verified.svg new file mode 100644 index 000000000000..cbaff2d6ed7a --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-not-applicable-verification-default.svg b/packages/components/src/components/icon/common/ic-not-applicable-verification-default.svg new file mode 100644 index 000000000000..631d66afa76b --- /dev/null +++ b/packages/components/src/components/icon/common/ic-not-applicable-verification-default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/components/src/components/icon/common/ic-selfie-verification-default.svg b/packages/components/src/components/icon/common/ic-selfie-verification-default.svg new file mode 100644 index 000000000000..b7f6f94197e4 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification-default.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/components/src/components/icon/common/ic-selfie-verification-failed.svg b/packages/components/src/components/icon/common/ic-selfie-verification-failed.svg new file mode 100644 index 000000000000..d6fbd043ce9a --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification-failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-selfie-verification-pending.svg b/packages/components/src/components/icon/common/ic-selfie-verification-pending.svg new file mode 100644 index 000000000000..339a3086a89c --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification-pending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-selfie-verification-verified.svg b/packages/components/src/components/icon/common/ic-selfie-verification-verified.svg new file mode 100644 index 000000000000..8183216099a1 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index a080eee5e020..02a2355fe8aa 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -347,6 +347,10 @@ import './common/ic-deriv.svg'; import './common/ic-desktop.svg'; import './common/ic-digits.svg'; import './common/ic-docs-submit.svg'; +import './common/ic-document-number-verification-default.svg'; +import './common/ic-document-number-verification-failed.svg'; +import './common/ic-document-number-verification-pending.svg'; +import './common/ic-document-number-verification-verified.svg'; import './common/ic-document-number-verification.svg'; import './common/ic-dop.svg'; import './common/ic-download.svg'; @@ -392,6 +396,10 @@ import './common/ic-id-card-back.svg'; import './common/ic-id-card-front.svg'; import './common/ic-identity-card-dashboard.svg'; import './common/ic-identity-card.svg'; +import './common/ic-identity-document-verification-default.svg'; +import './common/ic-identity-document-verification-failed.svg'; +import './common/ic-identity-document-verification-pending.svg'; +import './common/ic-identity-document-verification-verified.svg'; import './common/ic-identity-document-verification.svg'; import './common/ic-image.svg'; import './common/ic-info-blue.svg'; @@ -432,6 +440,10 @@ import './common/ic-minus.svg'; import './common/ic-mobile.svg'; import './common/ic-money-transfer.svg'; import './common/ic-multiplier.svg'; +import './common/ic-name-and-address-verification-default.svg'; +import './common/ic-name-and-address-verification-failed.svg'; +import './common/ic-name-and-address-verification-pending.svg'; +import './common/ic-name-and-address-verification-verified.svg'; import './common/ic-name-and-address-verification.svg'; import './common/ic-neteller-dark.svg'; import './common/ic-neteller-light.svg'; @@ -439,6 +451,7 @@ import './common/ic-new-file.svg'; import './common/ic-no-ad.svg'; import './common/ic-no-data.svg'; import './common/ic-no-order.svg'; +import './common/ic-not-applicable-verification-default.svg'; import './common/ic-notification-clear.svg'; import './common/ic-notification.svg'; import './common/ic-online-naira.svg'; @@ -513,6 +526,10 @@ import './common/ic-save.svg'; import './common/ic-search.svg'; import './common/ic-security-and-privacy.svg'; import './common/ic-security.svg'; +import './common/ic-selfie-verification-default.svg'; +import './common/ic-selfie-verification-failed.svg'; +import './common/ic-selfie-verification-pending.svg'; +import './common/ic-selfie-verification-verified.svg'; import './common/ic-selfie-verification.svg'; import './common/ic-selfie.svg'; import './common/ic-send-message.svg'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index a68b7644f31f..b823654342af 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -356,6 +356,10 @@ export const icons = 'IcDesktop', 'IcDigits', 'IcDocsSubmit', + 'IcDocumentNumberVerificationDefault', + 'IcDocumentNumberVerificationFailed', + 'IcDocumentNumberVerificationPending', + 'IcDocumentNumberVerificationVerified', 'IcDocumentNumberVerification', 'IcDop', 'IcDownload', @@ -401,6 +405,10 @@ export const icons = 'IcIdCardFront', 'IcIdentityCardDashboard', 'IcIdentityCard', + 'IcIdentityDocumentVerificationDefault', + 'IcIdentityDocumentVerificationFailed', + 'IcIdentityDocumentVerificationPending', + 'IcIdentityDocumentVerificationVerified', 'IcIdentityDocumentVerification', 'IcImage', 'IcInfoBlue', @@ -441,6 +449,10 @@ export const icons = 'IcMobile', 'IcMoneyTransfer', 'IcMultiplier', + 'IcNameAndAddressVerificationDefault', + 'IcNameAndAddressVerificationFailed', + 'IcNameAndAddressVerificationPending', + 'IcNameAndAddressVerificationVerified', 'IcNameAndAddressVerification', 'IcNetellerDark', 'IcNetellerLight', @@ -448,6 +460,7 @@ export const icons = 'IcNoAd', 'IcNoData', 'IcNoOrder', + 'IcNotApplicableVerificationDefault', 'IcNotificationClear', 'IcNotification', 'IcOnlineNaira', @@ -522,6 +535,10 @@ export const icons = 'IcSearch', 'IcSecurityAndPrivacy', 'IcSecurity', + 'IcSelfieVerificationDefault', + 'IcSelfieVerificationFailed', + 'IcSelfieVerificationPending', + 'IcSelfieVerificationVerified', 'IcSelfieVerification', 'IcSelfie', 'IcSendMessage', From cba7745d1ce57e0aa430214c102c9e0e58b1e825 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 19 Apr 2023 09:17:27 +0400 Subject: [PATCH 098/151] refactor: :art: adds account_status to components --- .../jurisdiction-modal-content.spec.tsx | 1 + .../jurisdiction-card-front.tsx | 2 ++ .../jurisdiction-card-section.tsx | 2 ++ .../jurisdiction-modal/jurisdiction-card.tsx | 2 ++ .../jurisdiction-modal-content-wrapper.tsx | 1 + .../jurisdiction-modal-content.tsx | 34 +++++++++---------- .../jurisdiction-title-indicator.tsx | 21 ++++++++++-- packages/cfd/src/Containers/props.types.ts | 9 +++-- 8 files changed, 51 insertions(+), 21 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx index c57c5c0067e5..d3dcc264294a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx @@ -12,6 +12,7 @@ describe('JurisdictionModalContent', () => { }; const mock_context = new RootStore(mock_store); const mock_props = { + account_status: mock_context.client, account_type: '', is_virtual: false, jurisdiction_selected_shortcode: '', diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index 9b2a2763d055..c169ff741753 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -6,6 +6,7 @@ import { TJurisdictionCardFrontProps } from 'Containers/props.types'; import JurisdictionCardSection from './jurisdiction-card-section'; const JurisdictionCardFront = ({ + account_status, card_classname, card_data, card_values, @@ -49,6 +50,7 @@ const JurisdictionCardFront = ({ {card_data.map((item, index) => ( {card_section_item.title_indicators && ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 032833cfb504..99b7387cc8a0 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -6,6 +6,7 @@ import JurisdictionCardBack from './jurisdiction-card-back'; import JurisdictionCardFront from './jurisdiction-card-front'; const JurisdictionCard = ({ + account_status, account_type, disabled, jurisdiction_selected_shortcode, @@ -41,6 +42,7 @@ const JurisdictionCard = ({ onClick={disabled ? () => undefined : () => cardSelection(type_of_card)} > -
- {jurisdiction_cards_array.map( - card => - cardsToBeShown(card) && ( - - ) - )} -
- +
+ {jurisdiction_cards_array.map( + card => + cardsToBeShown(card) && ( + + ) + )} +
); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 9d0fe3a7fd58..6cf05f88f007 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -1,10 +1,27 @@ import React from 'react'; import classNames from 'classnames'; import { Icon, Text } from '@deriv/components'; +import { getAuthenticationStatusInfo } from '@deriv/shared'; import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; -const JurisdictionTitleIndicator = ({ title_indicators, verification_docs }: TJurisdictionTitleIndicatorProps) => { +const JurisdictionTitleIndicator = ({ + account_status, + title_indicators, + verification_docs, +}: TJurisdictionTitleIndicatorProps) => { + const verification_icon_variant = 'Default'; + const { + poi_resubmit_for_bvi_labuan, + poi_resubmit_for_vanuatu_maltainvest, + poi_pending_for_bvi_labuan, + poi_pending_for_vanuatu_maltainvest, + poi_verified_for_bvi_labuan, + poi_verified_for_vanuatu_maltainvest, + poi_poa_verified_for_bvi_labuan, + poi_poa_verified_for_vanuatu_maltainvest, + } = getAuthenticationStatusInfo(account_status); + return title_indicators.type === 'displayText' ? (
))} diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index b8def6cde898..d3a2707d3c83 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -172,11 +172,12 @@ export type TCFDPasswordManagerModal = { }; export type TJurisdictionCardProps = { + account_status: GetAccountStatus; + account_type: string; + disabled: boolean; jurisdiction_selected_shortcode: string; setJurisdictionSelectedShortcode: (card_type: string) => void; - account_type: string; type_of_card: TJurisdictionCardType; - disabled: boolean; }; export type TJurisdictionCardBackProps = { @@ -187,6 +188,7 @@ export type TJurisdictionCardBackProps = { }; export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & { + account_status: GetAccountStatus; card_data: TJurisdictionCardSection[]; card_values: TJurisdictionCardItems; disabled: boolean; @@ -198,11 +200,13 @@ export type TJurisdictionClickableDescriptionProps = { }; export type TJurisdictionTitleIndicatorProps = { + account_status: GetAccountStatus; title_indicators: TJurisdictionCardSectionTitleIndicators; verification_docs: TJurisdictionCardItemVerification | undefined; }; export type TJurisdictionCardSectionProps = { + account_status: GetAccountStatus; card_section_item: TJurisdictionCardSection; toggleCardFlip: (event: SyntheticEvent) => void; verification_docs: TJurisdictionCardItemVerification | undefined; @@ -272,6 +276,7 @@ export type TJurisdictionModalProps = JurisdictionModalCommonProps & { }; export type TJurisdictionModalContentProps = { + account_status: GetAccountStatus; account_type: string; jurisdiction_selected_shortcode: string; setJurisdictionSelectedShortcode: (card_type: string) => void; From 6cb80d64897228ae0f256d06ce55e78b82110e04 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 19 Apr 2023 09:33:32 +0400 Subject: [PATCH 099/151] refactor: :art: adds type_of_card props to components --- .../Containers/jurisdiction-modal/jurisdiction-card-front.tsx | 2 ++ .../jurisdiction-modal/jurisdiction-card-section.tsx | 2 ++ .../src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 1 + .../jurisdiction-modal/jurisdiction-title-indicator.tsx | 1 + packages/cfd/src/Containers/props.types.ts | 3 +++ 5 files changed, 9 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx index c169ff741753..16c14b603873 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -13,6 +13,7 @@ const JurisdictionCardFront = ({ disabled, is_card_selected, toggleCardFlip, + type_of_card, verification_docs, }: TJurisdictionCardFrontProps) => (
{index < card_data.length - 1 &&
} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx index fbc3d5d36b19..ee7e068062ce 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -8,6 +8,7 @@ const JurisdictionCardSection = ({ account_status, card_section_item, toggleCardFlip, + type_of_card, verification_docs, }: TJurisdictionCardSectionProps) => (
@@ -19,6 +20,7 @@ const JurisdictionCardSection = ({ )} diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 99b7387cc8a0..cace4e4f823f 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -49,6 +49,7 @@ const JurisdictionCard = ({ disabled={disabled} is_card_selected={is_card_selected} toggleCardFlip={toggleCardFlip} + type_of_card={type_of_card} verification_docs={verification_docs} /> { const verification_icon_variant = 'Default'; diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index d3a2707d3c83..859db94e1f53 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -192,6 +192,7 @@ export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & { card_data: TJurisdictionCardSection[]; card_values: TJurisdictionCardItems; disabled: boolean; + type_of_card: TJurisdictionCardType; }; export type TJurisdictionClickableDescriptionProps = { @@ -202,6 +203,7 @@ export type TJurisdictionClickableDescriptionProps = { export type TJurisdictionTitleIndicatorProps = { account_status: GetAccountStatus; title_indicators: TJurisdictionCardSectionTitleIndicators; + type_of_card: TJurisdictionCardType; verification_docs: TJurisdictionCardItemVerification | undefined; }; @@ -209,6 +211,7 @@ export type TJurisdictionCardSectionProps = { account_status: GetAccountStatus; card_section_item: TJurisdictionCardSection; toggleCardFlip: (event: SyntheticEvent) => void; + type_of_card: TJurisdictionCardType; verification_docs: TJurisdictionCardItemVerification | undefined; }; From 7d6c87a8354fd143ec0c04e924a431a15aa7a73f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 19 Apr 2023 10:00:50 +0400 Subject: [PATCH 100/151] fix: :lipstick: fixes icon to text alignment --- .../appstore/src/components/cfds-listing/cfds-listing.scss | 5 ++++- .../Containers/jurisdiction-modal/jurisdiction-card-back.tsx | 4 ++-- packages/cfd/src/sass/cfd-dashboard.scss | 5 ++++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 98805b62d7b5..f8ab10e1a793 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -240,7 +240,7 @@ &-items-container { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; } &-items-sub-container { display: flex; @@ -253,6 +253,9 @@ transform: translateX(-4px); } } + &-text-icon-aligned { + margin-top: -3px; + } } &-clickable-description-link { color: var(--text-red); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index f3f6aa85dbca..4bbfcee9c85a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -43,7 +43,7 @@ const JurisdictionCardBack = ({ } />
- + {jurisdictionVerificationContents().required_verification_docs[verification_item]?.text}
@@ -56,7 +56,7 @@ const JurisdictionCardBack = ({
- + {status_item.text}
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 35077a60e96d..00a63e41cef7 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -730,7 +730,7 @@ &-items-container { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; } &-items-sub-container { display: flex; @@ -743,6 +743,9 @@ transform: translateX(-4px); } } + &-text-icon-aligned { + margin-top: -3px; + } } &-clickable-description-link { color: var(--text-red); From 5183e2420a9bb4aea9e41bfef30965909fb5a96a Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 19 Apr 2023 16:33:21 +0800 Subject: [PATCH 101/151] chore: test case for jurisdiction card section --- .../jurisdiction-card-section.spec.tsx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx new file mode 100644 index 000000000000..fde9a13b0567 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import JurisdictionCardSection from '../jurisdiction-card-section'; + +describe('JurisdictionCardSection', () => { + type TMockProps = { + card_section_item: { + key: string; + title: string; + title_indicators?: { + type: 'displayText'; + display_text: string; + display_text_skin_color: string; + }; + description?: string; + clickable_description?: []; + }; + toggleCardFlip: jest.Mock; + }; + const mock_props: TMockProps = { + card_section_item: { + key: '', + title: 'Test Title', + title_indicators: { + type: 'displayText' as const, + display_text: 'Test Title Indicators Text', + display_text_skin_color: '', + }, + description: 'Test Description', + }, + toggleCardFlip: jest.fn(), + }; + + it('should render JurisdictionCardSection component', () => { + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument(); + expect(screen.getByText('Test Description')).toBeInTheDocument(); + }); + + it('should render JurisdictionCardSection component with clickable description', () => { + const mock_props_with_clickable_description = { + ...mock_props, + card_section_item: { + ...mock_props.card_section_item, + clickable_description: [{ type: 'link' as const, text: 'Test Link' }], + }, + }; + + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument(); + expect(screen.getByText('Test Link')).toBeInTheDocument(); + expect(screen.queryByText('Test Description')).not.toBeInTheDocument(); + }); + + it('should render JurisdictionCardSection component without displaying title indicators if it is empty', () => { + mock_props.card_section_item.title_indicators = undefined; + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.queryByText('Test Title Indicators Text')).not.toBeInTheDocument(); + expect(screen.getByText('Test Description')).toBeInTheDocument(); + }); +}); From 46cab5a9f5dffbfb23fc66cba04fe35ffb4b7891 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 19 Apr 2023 16:42:41 +0800 Subject: [PATCH 102/151] chore: update code to check test over header not in test case --- .../__test__/jurisdiction-card-front.spec.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx index e9368e637a3b..12f32b774d85 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx @@ -59,7 +59,7 @@ describe('JurisdictionCardFront', () => { ], }; - it('should render JurisdictionCardFront', () => { + it('should render JurisdictionCardFront without over header', () => { render(); expect(screen.getByText('Test Header')).toBeInTheDocument(); expect(screen.getByText('Test Title 1')).toBeInTheDocument(); @@ -68,6 +68,7 @@ describe('JurisdictionCardFront', () => { expect(screen.getByText('Test Title 2')).toBeInTheDocument(); expect(screen.getByText('Test 2')).toBeInTheDocument(); expect(screen.getByText('Test Description 2')).toBeInTheDocument(); + expect(screen.queryByText('Test Over Header')).not.toBeInTheDocument(); }); it('should render JurisdictionCardFront with over header', () => { From ec0109e3bcfe8d35b3024fcf602284821e79af48 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 19 Apr 2023 12:58:26 +0400 Subject: [PATCH 103/151] feat: :sparkles: displays verification icons based on status --- packages/cfd/src/Components/props.types.ts | 12 +++- .../jurisdiction-title-indicator.tsx | 58 +++++++++++++++---- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index bb42e80c83be..fa9f8f3415b5 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -95,9 +95,15 @@ export type TJurisdictionCardSection = { clickable_description?: Array; }; -export type TJurisdictionCardItemVerification = Array< - 'document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable' ->; +export type TJurisdictionCardVerificationStatus = 'Pending' | 'Verified' | 'Failed' | 'Default'; + +export type TJurisdictionCardItemVerificationItem = + | 'document_number' + | 'selfie' + | 'identity_document' + | 'name_and_address' + | 'not_applicable'; +export type TJurisdictionCardItemVerification = Array; export type TJurisdictionCardItems = { header: string; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 837b00845db6..09a4bf6ec15b 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -1,9 +1,10 @@ import React from 'react'; import classNames from 'classnames'; import { Icon, Text } from '@deriv/components'; -import { getAuthenticationStatusInfo } from '@deriv/shared'; +import { getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared'; import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types'; +import { TJurisdictionCardItemVerificationItem, TJurisdictionCardVerificationStatus } from 'Components/props.types'; const JurisdictionTitleIndicator = ({ account_status, @@ -11,18 +12,53 @@ const JurisdictionTitleIndicator = ({ type_of_card, verification_docs, }: TJurisdictionTitleIndicatorProps) => { - const verification_icon_variant = 'Default'; const { - poi_resubmit_for_bvi_labuan, - poi_resubmit_for_vanuatu_maltainvest, poi_pending_for_bvi_labuan, - poi_pending_for_vanuatu_maltainvest, + poi_resubmit_for_bvi_labuan, poi_verified_for_bvi_labuan, + poi_pending_for_vanuatu_maltainvest, + poi_resubmit_for_vanuatu_maltainvest, poi_verified_for_vanuatu_maltainvest, - poi_poa_verified_for_bvi_labuan, - poi_poa_verified_for_vanuatu_maltainvest, + poa_pending, + need_poa_resubmission, + poa_verified, } = getAuthenticationStatusInfo(account_status); + const getVerificationIconVariant = (verification_document: TJurisdictionCardItemVerificationItem): string => { + let icon_variant: TJurisdictionCardVerificationStatus = 'Default'; + if (type_of_card === Jurisdiction.BVI || type_of_card === Jurisdiction.LABUAN) { + if (verification_document === 'document_number') { + if (poi_pending_for_bvi_labuan) { + icon_variant = 'Pending'; + } else if (poi_resubmit_for_bvi_labuan) { + icon_variant = 'Failed'; + } else if (poi_verified_for_bvi_labuan) { + icon_variant = 'Verified'; + } + } + } else if (type_of_card === Jurisdiction.VANUATU || type_of_card === Jurisdiction.MALTA_INVEST) { + if (verification_document === 'selfie' || verification_document === 'identity_document') { + if (poi_pending_for_vanuatu_maltainvest) { + icon_variant = 'Pending'; + } else if (poi_resubmit_for_vanuatu_maltainvest) { + icon_variant = 'Failed'; + } else if (poi_verified_for_vanuatu_maltainvest) { + icon_variant = 'Verified'; + } + } + } + if (verification_document === 'name_and_address') { + if (poa_pending) { + icon_variant = 'Pending'; + } else if (need_poa_resubmission) { + icon_variant = 'Failed'; + } else if (poa_verified) { + icon_variant = 'Verified'; + } + } + return icon_variant; + }; + return title_indicators.type === 'displayText' ? ( ) : (
- {verification_docs?.map(verification_doc => ( -
+ {verification_docs?.map(verification_document => ( +
))} From cb425dde164c9b00a1d81cdfe152a3562dff1e38 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 20 Apr 2023 12:14:20 +0800 Subject: [PATCH 104/151] chore: test case for jurisdiction clickable description --- ...urisdiction-clickable-description.spec.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx new file mode 100644 index 000000000000..e68b39b29e1b --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import JurisdictionClickableDescription from '../jurisdiction-clickable-description'; + +describe('JurisdictionClickableDescription', () => { + const mock_props = { + clickable_description: [ + { + text: 'Click here', + type: 'link' as const, + }, + { + text: 'to learn more about the documents required for verification.', + type: 'text' as const, + }, + ], + toggleCardFlip: jest.fn(), + }; + + it('should render JurisdictionClickableDescription', () => { + render(); + expect(screen.getByText('Click here')).toBeInTheDocument(); + expect(screen.getByText('to learn more about the documents required for verification.')).toBeInTheDocument(); + }); + + it('should call toggleCardFlip when link is clicked', () => { + render(); + screen.getByText('Click here').click(); + expect(mock_props.toggleCardFlip).toHaveBeenCalled(); + }); +}); From 13d65a0c3d93d8286add65bd25f527fe195992ae Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 24 Apr 2023 10:39:12 +0400 Subject: [PATCH 105/151] style: :lipstick: fixes jurisdiction modal width --- packages/appstore/src/components/cfds-listing/cfds-listing.scss | 2 +- .../src/Containers/jurisdiction-modal/jurisdiction-modal.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index f8ab10e1a793..3959389c1846 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -168,7 +168,7 @@ transform-style: preserve-3d; transition: transform 0.25s ease-in; min-height: 54rem; - width: 26rem; + width: 28rem; @include mobile { height: 48rem; width: 100%; diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx index 835e7e780916..4574426c84a3 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx @@ -36,7 +36,7 @@ const JurisdictionModal = ({ toggleModal={toggleJurisdictionModal} type='button' context={context} - width={account_type.type === 'synthetic' ? '1040px' : '1200px'} + width={account_type.type === 'synthetic' ? '1160px' : '1240px'} > diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 00a63e41cef7..4192082abb2f 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -658,7 +658,7 @@ transform-style: preserve-3d; transition: transform 0.25s ease-in; min-height: 54rem; - width: 26rem; + width: 28rem; @include mobile { height: 48rem; width: 100%; From 69f7cd1a4899428047f2ce6905325136e1e71fde Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 24 Apr 2023 11:36:39 +0400 Subject: [PATCH 106/151] fix: :bug: jurisdiction testcase fix --- .../__test__/jurisdiction-card-front.spec.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx index 12f32b774d85..4b6b0cee6c2a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-front.spec.tsx @@ -1,9 +1,21 @@ import React from 'react'; import JurisdictionCardFront from '../jurisdiction-card-front'; import { render, screen } from '@testing-library/react'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionCardFront', () => { + const p2p_status: 'none' | 'active' | 'temp_ban' | 'perm_ban' = 'active'; + const prompt_client_to_authenticate: 0 | 1 = 1; const mock_props = { + account_status: { + currency_config: { usd: {} }, + p2p_status, + prompt_client_to_authenticate, + risk_classification: '', + status: [], + }, + disabled: false, + type_of_card: Jurisdiction.SVG, card_classname: 'jurisdiction_test', toggleCardFlip: jest.fn(), card_values: { @@ -57,6 +69,8 @@ describe('JurisdictionCardFront', () => { }, }, ], + is_card_selected: false, + verification_docs: [], }; it('should render JurisdictionCardFront without over header', () => { From 8e0ab0a36f0bcb7c3191c15bf5d7902b06a5cd7a Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 24 Apr 2023 13:03:10 +0400 Subject: [PATCH 107/151] fix: :lipstick: fixes modal height clipping --- .../components/cfds-listing/cfds-listing.scss | 16 ++++---- .../jurisdiction-modal-content-wrapper.tsx | 38 ++++++++++--------- .../jurisdiction-modal/jurisdiction-modal.tsx | 2 +- packages/cfd/src/sass/cfd-dashboard.scss | 18 +++++---- 4 files changed, 40 insertions(+), 34 deletions(-) diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index 3959389c1846..91ff8781959f 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -18,7 +18,7 @@ } &__wrapper { - margin: 4rem 6rem 0; + margin: 4rem 6rem 2rem; display: flex; justify-content: center; gap: 2rem; @@ -97,7 +97,6 @@ } &__footer-wrapper { - min-height: 19.6rem; display: flex; flex-direction: column; justify-content: space-between; @@ -113,18 +112,22 @@ } } - &__footnote { + &__footnotes-container { display: flex; flex-direction: column; - justify-content: center; - margin: 3rem 1.6rem 2.4rem; + min-height: 6rem; + gap: 2rem; + margin: 2rem; + } + &__footnote { + display: flex; + justify-content: center; @include mobile { margin: unset; padding: 1.6rem 0.8rem; box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.08); } - &--pending { color: $color-yellow; } @@ -133,7 +136,6 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - margin-bottom: 2rem; @include mobile { padding: 0.8rem; } diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx index 866c493b9289..4f7da4f1185d 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx @@ -166,24 +166,26 @@ const JurisdictionModalContentWrapper = ({ synthetic_available_accounts={synthetic_available_accounts} />
- - 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} - /> +
+ + 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} + /> +