From 78803cee0e92d6a8c1662d5a6c48896bab9fc692 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Mon, 20 Mar 2023 20:22:33 +0400 Subject: [PATCH 01/49] 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 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 02/49] 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 03/49] 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 04/49] 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 d927c86f2437dbe52ddc3102a47206419c500cdf Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 22 Mar 2023 13:56:51 +0400 Subject: [PATCH 05/49] build: :construction: Trigger build From 72cab58278717d05b2de83cce8d140f325c8d2dd Mon Sep 17 00:00:00 2001 From: Shaheer Date: Fri, 24 Mar 2023 18:12:05 +0400 Subject: [PATCH 06/49] 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 07/49] 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 08/49] 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 046e3ba6d4bc90f0a59611c6753a1009b543dfd6 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 28 Mar 2023 15:40:39 +0400 Subject: [PATCH 09/49] 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 10/49] 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 11/49] 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 12/49] 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 6037de2638e13353b82c4c271ae297385e68b18f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 30 Mar 2023 08:09:39 +0400 Subject: [PATCH 13/49] 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 a2bc7282918a92327d083d811e84d80dadd53581 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 30 Mar 2023 17:13:07 +0400 Subject: [PATCH 14/49] 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 15/49] 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 16/49] 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 17/49] 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 18/49] 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 19/49] 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 20/49] 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 21/49] 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 22/49] 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 23/49] 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 24/49] 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 25/49] 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 26/49] 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 27/49] 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 28/49] 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 29/49] 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 30/49] 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 31/49] 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 32/49] 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 33/49] 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 34/49] 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 35/49] 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 36/49] 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 37/49] 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 38/49] 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 39/49] 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 40/49] 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 41/49] 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 42/49] 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 43/49] 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 44/49] 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 45/49] 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 46/49] 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 47/49] 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 48/49] 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 49/49] 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};