diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index ee84ecccefdb..e050042b1e8a 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -1,19 +1,19 @@ .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; - position: relative; - padding: 1.6rem; + min-height: 50rem; + width: 26rem; + cursor: pointer; @include mobile { - margin-bottom: 2rem; + height: 48rem; + width: 100%; } - &:hover { + &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); } @@ -23,28 +23,29 @@ @include desktop { height: auto; - margin: 0 0.8rem; } &__wrapper { - padding: 0; - margin-top: 4.8rem; + margin: 4rem 6rem 0; display: flex; justify-content: center; - + gap: 1.8rem; @include mobile { + margin: 0; + padding: 2rem 4rem; 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: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } &__verification-status, &__verification-status--pending, - &__verification-status--failed, &__verification-status--account_added, &__verification-status--poi_verified, &__verification-status--not_submitted, @@ -81,8 +82,58 @@ border-radius: 0.5rem; } } + + &__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 0 0; + &-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: 0 2rem 2rem; + } + } + + &__h2-header { + min-height: 5rem; + margin: 1rem 2rem; + @include mobile { + margin-bottom: 2rem; + min-height: auto; + } + } + &__footer-wrapper { + min-height: 18.6rem; + display: flex; + flex-direction: column; + justify-content: space-between; @include mobile { + min-height: auto; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -91,17 +142,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 +164,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; + margin-bottom: 2rem; @include mobile { padding: 0.8rem; } @@ -129,33 +172,94 @@ &__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: $BORDER_RADIUS * 2; margin-bottom: 1rem; - + border: 1px solid var(--text-info-blue); & > p { font-size: 16px; text-align: center; } } +} - &__bullet-wrapper { +.cfd-card { + &-section { + width: 100%; display: flex; - margin-bottom: 1rem; - - &--checkmark { - margin-right: 1rem; + 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: $color-red-8; + } + &__red-dark { + background: $color-red-9; + } + &__red-light { + background: $color-red-10; + } + &__yellow-dark { + background: $color-yellow-1; + } + &__yellow-light { + background: $color-yellow-2; + } + &__violet-dark { + background: $color-violet; + } + &__brown-dark { + background: $color-brown; + } } } -} + &-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; + } + + &-main { + height: 100%; + } + + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; + } -.cfd-jurisdiction-card--synthetic { - padding: 2.4rem; + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } + } + } + &-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-modal--custom-exit { @@ -1808,9 +1912,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..704fb6822ef0 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -68,6 +68,68 @@ 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; +}; + +export type TJurisdictionCardSectionTitleIndicators = { + type: 'displayText' | 'displayIcons'; + display_text?: string; + display_text_skin_color?: string; + display_icons?: Array; +}; + +export type TJurisdictionCardSection = { + key: string; + title: string; + title_indicators?: TJurisdictionCardSectionTitleIndicators; + description?: string; + clickable_description?: Array; +}; + +export 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 TJurisdictionVerificationSection = { + icon: string; + text: string; +}; + +export type TJurisdictionVerificationItems = { + document_number?: TJurisdictionVerificationSection; + selfie?: TJurisdictionVerificationSection; + identity_document?: TJurisdictionVerificationSection; + name_and_address?: TJurisdictionVerificationSection; +}; + +type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green'; + +export type TJurisdictionVerificationStatus = { + icon: string; + text: string; + color: TJurisdictionVerificationColors; +}; + 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 deleted file mode 100644 index e47a5e95d456..000000000000 --- a/packages/cfd/src/Constants/jurisdiction-contents.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { localize } from '@deriv/translations'; - -type TJurisdictionCardItems = { - header: string; - over_header?: string; - synthetic_contents: Array; - financial_contents: Array; - is_over_header_available: boolean; -}; -type TJurisdictionContent = { - svg: TJurisdictionCardItems; - vanuatu: TJurisdictionCardItems; - labuan: TJurisdictionCardItems; - maltainvest: TJurisdictionCardItems; - bvi: TJurisdictionCardItems; -}; - -export const getJurisdictionContents = (): TJurisdictionContent => ({ - svg: { - 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')}`, - ], - 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')}`, - ], - }, - 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')}`, - ], - 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')}`, - ], - }, - labuan: { - over_header: localize('Straight-through processing'), - 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')}`, - ], - 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')}`, - ], - }, - 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')}`, - ], - 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')}`, - ], - }, -}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts new file mode 100644 index 000000000000..ee1ba2a4b78e --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts @@ -0,0 +1,90 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdictionBviContents = (): 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: 'regulator', + 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: 'regulator', + 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/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts new file mode 100644 index 000000000000..1c98518d7af9 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts @@ -0,0 +1,22 @@ +import { TJurisdictionCardItems } from 'Components/props.types'; +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; + vanuatu: TJurisdictionCardItems; + labuan: TJurisdictionCardItems; + maltainvest: TJurisdictionCardItems; + bvi: TJurisdictionCardItems; +}; + +export const getJurisdictionContents = (): TJurisdictionContent => ({ + 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 new file mode 100644 index 000000000000..6dc4039ede60 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts @@ -0,0 +1,74 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdictionLabuanContents = (): 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: 'regulator', + 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: 'regulator', + 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-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts new file mode 100644 index 000000000000..6b42dd4a79e1 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts @@ -0,0 +1,82 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdictionSvgContents = (): 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: 'regulator', + 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: '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 new file mode 100644 index 000000000000..42d58f9c3bd7 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts @@ -0,0 +1,86 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdictionVanuatuContents = (): 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: 'regulator', + 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: 'regulator', + 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-contents/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts new file mode 100644 index 000000000000..19bf2b3fc0b8 --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts @@ -0,0 +1,45 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionVerificationItems, TJurisdictionVerificationStatus } from 'Components/props.types'; + +type TJurisdictionVerificationContents = { + short_description: string; + required_verification_docs: TJurisdictionVerificationItems; + status_references: Array; +}; + +export const jurisdictionVerificationContents = (): TJurisdictionVerificationContents => ({ + 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)')}`, + }, + selfie: { + icon: 'IcSelfieVerification', + text: `${localize('A selfie of yourself.')}`, + }, + identity_document: { + icon: 'IcIdentityDocumentVerification', + text: `${localize('A copy of your identity document (identity card, passport)')}`, + }, + 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.' + )}`, + }, + }, + status_references: [ + { + 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' }, + ], +}); diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts new file mode 100644 index 000000000000..ae36628a2eff --- /dev/null +++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts @@ -0,0 +1,95 @@ +import { localize } from '@deriv/translations'; +import { TJurisdictionCardItems } from 'Components/props.types'; + +export const jurisdictionMaltainvestContents = (): 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: 'regulator', + 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: 'regulator', + 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'], +}); 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..fc8d3568db57 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -0,0 +1,54 @@ +import { Icon, Text } from '@deriv/components'; +import classNames from 'classnames'; +import { jurisdictionVerificationContents } from 'Constants/jurisdiction-contents/jurisdiction-verification-contents'; +import { TJurisdictionCardBackProps } from 'Containers/props.types'; +import React from 'react'; + +const JurisdictionCardBack = ({ card_classname, toggleCardFlip, verification_docs }: TJurisdictionCardBackProps) => ( +
+
+ +
+ + {jurisdictionVerificationContents().short_description} + +
+ {verification_docs?.map(verification_item => ( +
+
+ +
+ + {jurisdictionVerificationContents().required_verification_docs[verification_item]?.text} + +
+ ))} +
+
+
+ {jurisdictionVerificationContents().status_references.map(status_item => ( +
+
+ +
+ + {status_item.text} + +
+ ))} +
+
+); + +export default JurisdictionCardBack; 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-front.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx new file mode 100644 index 000000000000..29d4db1554d4 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-front.tsx @@ -0,0 +1,49 @@ +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) => ( +
+ {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-section.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx new file mode 100644 index 000000000000..571ff1a538e7 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-section.tsx @@ -0,0 +1,32 @@ +import { Text } from '@deriv/components'; +import React from 'react'; +import { TJurisdictionCardSectionProps } from '../props.types'; +import JurisdictionClickableDescription from './jurisdiction-clickable-description'; +import JurisdictionTitleIndicator from './jurisdiction-title-indicator'; + +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-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index bee3284893ce..f2fe13a5e240 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -1,10 +1,9 @@ -import React from 'react'; import classNames from 'classnames'; -import { Icon, Text, Popover } from '@deriv/components'; -import { Localize, localize } from '@deriv/translations'; -import { getJurisdictionContents } from '../../Constants/jurisdiction-contents'; -import { TJurisdictionCardProps, TJurisdictionCardType } from '../props.types'; -import JurisdictionCardBanner from './jurisdiction-card-banner'; +import React, { SyntheticEvent } from 'react'; +import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/jurisdiction-contents'; +import { TJurisdictionCardProps } from '../props.types'; +import JurisdictionCardBack from './jurisdiction-card-back'; +import JurisdictionCardFront from './jurisdiction-card-front'; const JurisdictionCard = ({ account_type, @@ -15,82 +14,48 @@ const JurisdictionCard = ({ setJurisdictionSelectedShortcode, synthetic_available_accounts, type_of_card, + card_flip_status, + flipCard, }: 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 = getJurisdictionContents()[type_of_card as TJurisdictionCardType]; - + const card_values = getJurisdictionContents()[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 + : 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); }; - const Checkmark = () => ( - - ); + const toggleCardFlip = (event: SyntheticEvent) => { + event.stopPropagation(); + flipCard(type_of_card); + }; 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_data.map((item, index) => ( -
-
- -
- - - - {/Straight-through processing/.test(item) && ( - - )} -
- ))} -
- undefined : () => cardSelection(type_of_card)} + > + {!is_card_flipped ? ( + + ) : ( + -
- + )} +
); }; 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..79c69dba7788 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -0,0 +1,27 @@ +import { Text } from '@deriv/components'; +import { TJurisdictionClickableDescriptionProps } from 'Containers/props.types'; +import React from 'react'; + +const JurisdictionClickableDescription = ({ + clickable_description, + toggleCardFlip, +}: TJurisdictionClickableDescriptionProps) => ( +
+ {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-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content.tsx index 5b821e002d3c..c96a4a89cff8 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, + card_flip_status, + 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} + card_flip_status={card_flip_status} + flipCard={flipCard} /> ) )} 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..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 @@ -68,18 +68,22 @@ const FooterNote = ({ const JurisdictionModalFootNote = (props: TJurisdictionModalFootNoteProps) => { 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 ea9b9eb08067..1614bc2dedc6 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 { TJurisdictionCardType, TJurisdictionModalProps } from '../props.types'; import JurisdictionCheckBox from './jurisdiction-modal-checkbox'; import JurisdictionModalFootNote from './jurisdiction-modal-foot-note'; @@ -33,6 +33,13 @@ const JurisdictionModal = ({ has_submitted_cfd_personal_details, }: TJurisdictionModalProps) => { const [checked, setChecked] = React.useState(false); + const [card_flip_status, setCardFlipStatus] = React.useState({ + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }); const { poi_or_poa_not_submitted, @@ -49,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 @@ -77,8 +91,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', }); @@ -160,6 +174,11 @@ const JurisdictionModal = ({ } } }; + + const flipCard = (card_name: TJurisdictionCardType) => { + setCardFlipStatus({ ...card_flip_status, [card_name]: !card_flip_status[card_name] }); + }; + const ModalContent = () => (
{ + return title_indicators.type === 'displayText' ? ( + + {title_indicators.display_text} + + ) : ( +
{title_indicators.display_icons?.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 0a69cc609877..3a85513616be 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -8,8 +8,18 @@ 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, + TCardFlipStatus, + TJurisdictionCardSectionTitleIndicators, + TClickableDescription, + TJurisdictionCardItems, + TJurisdictionCardItemVerification, +} from '../Components/props.types'; import RootStore from '../Stores/index'; +import { SyntheticEvent } from 'react'; export type TCFDPersonalDetailsContainerProps = { account_settings: GetSettings; @@ -168,8 +178,37 @@ export type TJurisdictionCardProps = { financial_available_accounts: TTradingPlatformAvailableAccount[]; setJurisdictionSelectedShortcode: (card_type: string) => void; account_type: string; - type_of_card: string; + type_of_card: TJurisdictionCardType; disabled: boolean; + card_flip_status: TCardFlipStatus; + flipCard: (cardName: TJurisdictionCardType) => 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; +}; + +export type TJurisdictionTitleIndicatorProps = { + title_indicators: TJurisdictionCardSectionTitleIndicators; +}; + +export type TJurisdictionCardSectionProps = { + card_section_item: TJurisdictionCardSection; + toggleCardFlip: (event: SyntheticEvent) => void; }; export type TJurisdictionCardType = 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; @@ -239,6 +278,8 @@ export type TJurisdictionModalContentProps = { real_synthetic_accounts_existing_data: TExistingData; real_financial_accounts_existing_data: TExistingData; is_virtual: boolean; + card_flip_status: TCardFlipStatus; + flipCard: (cardName: TJurisdictionCardType) => void; }; export type TJurisdictionModalFootNoteProps = { diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index 937250771fd5..8fcd270f400b 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -489,20 +489,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; - position: relative; - padding: 1.6rem; + min-height: 50rem; + width: 26rem; + cursor: pointer; @include mobile { - margin-bottom: 2rem; + height: 48rem; + width: 100%; } - &:hover { + &:not(.selected-card):hover { box-shadow: 0 2px 8px 0 var(--shadow-menu); } @@ -512,30 +512,30 @@ @include desktop { height: auto; - margin: 0 0.8rem; } &__wrapper { - padding: 0; - margin-top: 4.8rem; + margin: 4rem 6rem 0; display: flex; justify-content: center; - + gap: 1.8rem; @include mobile { + margin: 0; + padding: 2rem 4rem; 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: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu); } &__verification-status, &__verification-status--pending, - &__verification-status--failed, &__verification-status--account_added, &__verification-status--poi_verified, &__verification-status--not_submitted, @@ -573,11 +573,58 @@ border-radius: 0.5rem; } } + + &__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 0 0; + &-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: 0 2rem 2rem; + } + } + &__h2-header { - margin: 1.4rem 0 2.4rem; + min-height: 5rem; + margin: 1rem 2rem; + @include mobile { + margin-bottom: 2rem; + min-height: auto; + } } + &__footer-wrapper { + min-height: 18.6rem; + display: flex; + flex-direction: column; + justify-content: space-between; @include mobile { + min-height: auto; background-color: var(--general-main-1); width: 100%; height: 100%; @@ -586,14 +633,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 +655,7 @@ &__jurisdiction-checkbox { display: flex; justify-content: center; - margin-bottom: 2.4rem; + margin-bottom: 2rem; @include mobile { padding: 0.8rem; } @@ -622,33 +663,94 @@ &__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: $BORDER_RADIUS * 2; margin-bottom: 1rem; - + border: 1px solid var(--text-info-blue); & > p { font-size: 16px; text-align: center; } } +} - &__bullet-wrapper { +.cfd-card { + &-section { + width: 100%; display: flex; - margin-bottom: 1rem; - - &--checkmark { - margin-right: 1rem; + 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: $color-red-8; + } + &__red-dark { + background: $color-red-9; + } + &__red-light { + background: $color-red-10; + } + &__yellow-dark { + background: $color-yellow-1; + } + &__yellow-light { + background: $color-yellow-2; + } + &__violet-dark { + background: $color-violet; + } + &__brown-dark { + background: $color-brown; + } } } -} + &-back-section { + &-items-container { + display: flex; + flex-direction: column; + gap: 1rem; + } + + &-main { + height: 100%; + } + + &-items-sub-container { + display: flex; + align-items: flex-start; + gap: 1rem; + } -.cfd-jurisdiction-card--synthetic { - padding: 2.4rem; + &-back-button { + transition: transform 0.25s linear; + &:hover { + transform: translateX(-4px); + } + } + } + &-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-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); } 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..0902560ffe09 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-back-button.svg @@ -0,0 +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 new file mode 100644 index 000000000000..7f6683a48dba --- /dev/null +++ b/packages/components/src/components/icon/common/ic-document-number-verification.svg @@ -0,0 +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 new file mode 100644 index 000000000000..77e05efd57ad --- /dev/null +++ b/packages/components/src/components/icon/common/ic-identity-document-verification.svg @@ -0,0 +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 new file mode 100644 index 000000000000..2e17b0efa157 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-name-and-address-verification.svg @@ -0,0 +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 new file mode 100644 index 000000000000..39d2bbe8c782 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-selfie-verification.svg @@ -0,0 +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 new file mode 100644 index 000000000000..dc5a246bb465 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-green.svg @@ -0,0 +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 new file mode 100644 index 000000000000..ea745e409fd3 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-red.svg @@ -0,0 +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 new file mode 100644 index 000000000000..5cca88db6d2d --- /dev/null +++ b/packages/components/src/components/icon/common/ic-verification-status-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 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', diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index 2741931a769e..5aa78ff555b7 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -16,15 +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-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; @@ -38,20 +44,25 @@ $color_grey-9: #868686; $color-grey-10: #919191; $color-grey-11: #fafafa; $color-grey-12: #f5f7fa; -$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-13: #2e2e2e; $color-orange: #ff6444; -$color-yellow: #ffad3a; -$color-blue: #377cfc; -$color-blue-1: #0dc2e7; -$color-blue-2: #2a3052; -$color-blue-3: #0796e0; -$color-blue-4: #0677af; $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; /* alpha colors */ $alpha-color-black-1: transparentize($color-black-7, 0.28); diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 32aaedb76609..3b3987e4d7eb 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}; @@ -87,6 +88,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}; @@ -133,6 +135,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}; @@ -210,6 +213,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}; @@ -254,6 +259,7 @@ --border-hover-1: #{$color-black-9}; --border-active: var(--brand-secondary); --border-disabled: #{$color-black-4}; + --border-divider: #{$color-grey-13}; // Fill --fill-normal: #{$color-black}; --fill-hover: #{$color-grey-7};