From 55f4b86ca4ab06518aa9a1eb4046cb2775cd5688 Mon Sep 17 00:00:00 2001 From: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Date: Tue, 18 Oct 2022 11:46:26 +0330 Subject: [PATCH] Hirad/73608/CFD Flows (#6732) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * translations: πŸ“š sync translations with crowdin (#6366) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6373) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * fix bug (#6154) * yauheni/ 70488/ edit note in self-exclusion message box (#6044) * text|edit_note_self_exclusion_message_box * test fix * regexp in tests fix * accident text deleted * popup message text fix * text fixes * test text query fix Co-authored-by: β€œyauheni-kryzhyk-deriv” <β€œyauheni@deriv.me”> * Akmal / Ignore IDV verification if client is high risk && withdrawals are locked (#4644) * Ignore IDV verification if client is high risk * Fix formatting * Fix cfd-poi issue due to client store unavailability * Fix formatting * Merge with master * Fix formatting * Merge with master * Revert "Merge with master" This reverts commit 4bead99f8c318caaee22e3e49bfd0159af8d0d65. * Fix merge issues * Chain extra condition to cover wrong status returned from BE * Fix: wrong component shown when manual upload is triggered * fix:tax_number_validation (#6259) * george / rm65047 / convert routes, cashier, error-component components to TS (#6361) * perf(cashier routes): convert csahier routes to TS * perf(cashier routes): convert error-component to TS * refactor(error-dialog, types): refactor error-dialog types, move error type to shared types * perf(cashier): convert cashier to TS * perf(types): refactor types * refactor(routes with sub routes): refactor default subroute * refactor(types): add/refactor server error type * test: refactor pathname * refactor(route types): refactor route types * fix: fix ts error in React.Suspense * george / rm65033 / ts migration of withdraw UI components (#6343) * perf(cashier withdraw): convert withdrawal-verification-email to TS * perf: add data-testid for checklist action * perf(cashier withdraw): convert withdrawal-locked to TS * perf(types): add types for TClinetStore * perf(cashier withdraw): convert withdraw to TS * perf(cashier withdraw): convert crypto-withdraw-receipt to TS * perf(cashier withdraw): convert crypto-withdraw-form to TS * perf(cashier withdraw): convert withdrawal to TS * refactor(cashier withdraw): refactor array syntax (ts) * test(cashier withdraw): remove eslint disables for tests * update deriv go redirection link (#6386) * Farzin/68320/Update cashier withdrawal locked status if PA already withdraw all his allowable withdrawal amount (#6032) * fix(cashier): :sparkles: handle `PACommisionWithdrawalLimit` state in `CashierLocked` * test(cashier): :white_check_mark: add test case to `CashierLocked` for `PACommisionWithdrawalLimit` * Trigger Build * Jim/73479/appstore-workspace-ts-fix (#6208) * chore: update appstore tsconfig * chore: update appstore tsconfig * chore: add react and types/react packages to appstore * refactor: remove unnecessary includes * refactor: change from reexports to import -> export * Niloofar Sadeghi / Trader Typescript configuration issue (#6275) * fix: trader typscript configuration issue * fix: tsc errors on trader * Niloofar Sadeghi / Add typescript configuration on reports (#6276) * chores: add typescript configuration on reports * fix: remove extra paths * fix: revert removing packages * george / rm65041 / migrate p2p-cashier component to TS (#6177) * refactor(p2p-cashier): migrate p2p-cashier component to TS * commit * perf(types): add types for notification store * perf(types): add types for ui store * perf(types): convert p2p-cashier to TS * refactor(types): change RootStore type to TRootStore * test(p2p-cashier): test fix (change wrapper order fro p2p-cashier component) * refactor(types): refactor current_focus type * test(p2p-cashier): remove eslint disables * Vinu/Ts onramp cashier (#5727) * refactor: converted on-ramp module into typescript * refactor: included type related to store in on-ramp * ts fix in on-ramp-provider-card.spec.tsx * added path in tsconfig * added path in tsconfig * added type for react-router-dom * added ts related change required for migrating all components (#5760) * changed the name of data-testid in on-ramp component * ts-migration-crypto-fiat-converter (#5796) * Trigger build * Update package-lock * ts-migration-cashier-notifications (#5765) * implemented review comments and updated branch as per latest upstream branch * bahar/funds_protection_component-ts-migration (#5756) * funds_protection_component-ts-migration * remove_extra_type_file * fix_merge_issue * hamid/migrate-transfer-confirm-to-ts (#5815) * Migrate TransferConfirm to TS * Rename component in test file * Replace Confirm with TransferConfirm in PAs * Enhance Tests * ts-migration-page-404 (#5766) * corrected imports in on-ramp pages * coreected setSideNotes type in on-ramp file * arranged the order of imports in on-ramp * refactor: add menu-option type to types folder in cashier * replaced type for FormEvent in on-ramp from Types * added types from TRootstore * added types of TClientStore, TUiStore and TCommonStore in on-ramp Co-authored-by: Nijil Nirmal Co-authored-by: Bahar Co-authored-by: Hamid * hamid/65036/migrate-account-transfer-to-ts (#6305) * Migrate Account Transfer to TS * Enhance type names * Remove eslint ignore line * Remove generic type from useState * trigger tests * Fix test errors * Change data-testid name * Niloofar Sadeghi / Account typscript configuration issue (#6273) * fix: account typscript configuration issue * text: remove include comment on account tsconfig * Niloofar Sadeghi / Circleci issue (#6402) * fix: circle ci issue * fix: circle ci issue * Niloofar Sadeghi / Add typescript to each workspace dependency (#6306) * build: add typescript to all packages * build: move typescript to devdependency * add some TS configs to eslint file * fix: conflicts * Shayan/74388/fix ts config on cfd (#6351) * checking circle/ci test * removed test changes * fix: updated tsconfig and fixed some errors * fix: updated tsconfig and added globals.d.ts * chore: removed experimentalsDecorators from local config * translations: πŸ“š sync translations with crowdin (#6405) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * hamid/75726/missing-grey-box-side-note (#6410) * Fix sidenote in mobile view of account-transfer * Remove duplicate title * Add sideNote title * translations: πŸ“š sync translations with crowdin (#6413) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * Revert "george / rm65041 / migrate p2p-cashier component to TS (#6177)" (#6424) This reverts commit 503e77ecc4cfc7097bbef7396d2dc08a72fdcc65. * P2p 2fa feature (#6422) * carol/ P2P: 2FA (#6009) * add: icons * add: one more icon * add email verification modal * add invalid verification link modal * add email verified * add email blocked modal * add email blocked modal * use align prop instead * carol/ P2P: Email verification for orders (#6299) * fix: quotes * add: email verification * cleanup * don't kill me * add response checks * add comment * add: amount + currency * fixed loading of order details and chat * fixed design on responsive * fixed verification modal in responsive * show modal if error * fix * fixed truncated modal in ios * fix time * fix invalid verification modal * fix * fix * fixed verification modal in desktop * fix responsive +logged out user * fix: design for seller * the solution to all my problems * fix: modal * fix logout + modal * hide extra modal * i got 99 problems and 2fa is all of em * fix * fix * fix: amount * fix: amount * fix: add modal * fix: rating modal Co-authored-by: Farrah Mae Ochoa Co-authored-by: Nijil Nirmal Co-authored-by: Farrah Mae Ochoa * translations: πŸ“š sync translations with crowdin (#6426) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * Added scroll to cfd personal details modal (#6235) * Shayan/74387/Update TS Config and Fix TS Errors on Cashier (#6284) * checking circle/ci test * removed test changes * fix: updated ts config and fixed two errors returnd by tsc * fix: fixing errors returned by tsc (WIP) * fix: fixed all ts errors * chore: removed experimentalDecorators from tsconfig * fix: removed unnecessary path from tsconfig * fix: type added to transfer_to_hint * Fixed the font size for non authenticated svg accounts (#6077) * Farzin/70813/Fix date picker month issue for non english languages (#6027) * fix(components): :bug: fix date picker month issue for non english languages by setting moment locale to `en` * refactor(components): :recycle: refactor `calendar-months` component to rely on month number instead of month name * fix(components): :globe_with_meridians: add localization support for date picker month names * refactor(components): :fire: remove redundant `month_headers` * chore(components): :heavy_minus_sign: remove redundant `@deriv/translations` dependency * Trigger Build * fix(cashier): :memo: resolve PR comments * remove disabled country validation from citizenship (#6236) * farabi/improved-numpad-for-visibility (#6241) * farabi/improved-numpad-for-visibility * changed value to global variable Co-authored-by: Farabi * farabi / added a new tooltip for contract type 'both' (#6189) * added a new tooltip for contract type both * branch update Co-authored-by: Farabi * george / rm73888 / fix Transfer button enabling when amount field is empty (#6252) * fix(account transfer): fix Transfer button enabling when amount field is empty * fix(account transfer): fix Transfer button enabling between account with the same currency * refactor(account transfer): refactor condition into function * fix(account transfer): disable Transfer button when amount is not valid * fix(account transfer): fix validation error visibility * likhith/incorporating a nation id image for ZW (#6175) * feat: incorporating a nation id image for ZW * feat: replaced image for zw identity card * fix: regex format of sample input * fix: replaced image for zw * george / rm74876 / missing payment agent's phone number and url address (#6337) * fix(payment agent withdraw): fix pa's phone number and url address visibility in receipt * style(payment agent withdraw): fix style for submit buttons * test(payment agent withdraw): refactor tests * test(payment agent store): fix tests * Niloofar Sadeghi / Jest issue with typescript (#6442) * fix: indicator ts-jest config * fix: add ts-jest to the root of the project * fix: resolve comments * fix: review comments * translations: πŸ“š sync translations with crowdin (#6470) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6471) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6472) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6475) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6476) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * use github action token (#6335) * mobile_fix (#6481) * translations: πŸ“š sync translations with crowdin (#6482) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6486) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * fix auto pr creation (#6487) * translations: πŸ“š sync translations with crowdin (#6489) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6491) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6493) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * carol/Derivgo link (#6445) * use platform from query params to set app id * add: check * thisyahlen/ test coverage for cfd-account-card component (#5903) * first commit, managed to render the component * added derivx test cases * type fix * added a few more test cases * covered commission message to make it 80% * moved the new props * moved the new props * finished up mt5 tests * added dxtrade * added derivx and more mt5 test cases * added beforeeach * description change * changed file to typescript * removed mfsa and used svg Co-authored-by: Thisyahlen * Maryia/chore: add test coverage for cfd-dashboard (#6181) * Maryia/chore: add test coverage for cfd-dashboard * Added more tests * removed unnecessary check * added more tests * added more tests + improvements * finalized tests for CFD dashboard * fix: PropTypes warning * migrated test file to tsx * avoiding direct dom node access * removed redundant global before window * moved props outside beforeEach as they are never redefined, neither do their properties * improved tests and added props types * Fix word break in payment agent contant details (#5953) * thisyahlen/ test coverage for investor-password-manager (#5973) * test coverage for investor-password-manager * refractored the test and tested again for the new bvi changes * refractored code for better readability * changed descriptions and lowercase * fix spelling errors * removed repeated test case * thisyahlen/cfd-server-error-dialog test coverage (#5767) * test coverage for cfd-server-error-dialog container * test coverage for cfd-server-error-dialog * changed role and added an error message test case * remove screen debug * removed last test case Co-authored-by: Thisyahlen * thisyahlen/test coverage on compare-accounts-content container (#5847) * first commit * added test case for derivx * added residence for derivx test case * added a few more test cases * refractored the code * removed test case and changed description * refractored the test * changed eu to true Co-authored-by: Thisyahlen Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> * likhith/test cases for CFD password modal (#6202) * feat: incorporated test cases * feat: incorporated test cases to test password modal for Financial STP and DerivX * fix: failing test case * ref: incorporated review comments * feat: incorporated error message check * fix: incorporated review comments * fix: incorporated review comments * fix: retitled the test cases * fix: incorporated review comments * fix: reducing duplicated code * fix: removed commented code * fix: removed commented code * ref: refactored the code * hamid/hide-reset-balance (#6104) * Hide reset button if balance is 10000 * Fix console error of propTypes * Change the location of the condition * Add const for account init balance * Ignore eslint warning * Change namve convention of the method * translations: πŸ“š sync translations with crowdin (#6508) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * hamid/76567/fix-word-break-pa (#6511) * Fix word break in payment agent contant details * Fix word break in payment agent contant details * carol/ P2P: Remove confirm modal (#6430) * remove extra modal from 2FA flow * hide reasons * Suisin/created scam warning pop up message (#6358) * created scam warning pop up message * Update website logo * Updated Scam Message Logo * changed client_country to br * rearrange imports * Updated all issue according to github comments * Update scss design * Update scss and modal * Update className and scss * Update scss margins for title * Update Modal into the correct component * Update dark mode and change country code from my to br * Update ui store to call function and set function * change my to br * Update UI Store and Update Scss modal * Update ui store * Remove unused width in modal * Update my to br * Update values for locaization for brandName and remove unuse scamMessageDisplay * Update logic for local storage * Update Toggle Modal Element * Update logout to remove localStorage element for scamMessage * Moving localStorage.removeItem to cleanUp function * Update scss and remove is_dark_mode * Update my to br * Not to display on Signup Page * Update new logic on not displaying message in new account * rearrange functions * Update Scss for mobile view * Update packages/core/src/App/Containers/WarningScamMessageModal/warning-scam-message.jsx Co-authored-by: Farzin Mirzaie <72082844+farzin-fs@users.noreply.github.com> * Update Scss format * Update divider into the modal Co-authored-by: Farzin Mirzaie <72082844+farzin-fs@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * likhith/track js reading loginid of undefined (#6452) * fix: added a fallback case if virtual account is not available * fix: added fallback to missing objects containing loginid Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6548) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * hamid/74062/cfd-dashboard-demo-account (#6427) * Add required packages and icon and update qrcode * CFD dashboard for demo account * Fix tests errors * Fix PR comments * Add Huawei Link * Resolve PR comments * Edit SCSS classes * Resolve conflict * Change dxtrade type from synthetic to all * Resolve PR comments * Change texts * Apply QA commnets * Update AccoutSwitcher * Fix tests errors * Remove unneeded code * Enhance code * Run svgo for new dxtrade icons * Change QRCode url * Change QRCode url * Enhance Code * Check enabled property for existing accounts * Hide disabled account in the Account-Switcher * Change icon and text of the succes modal * Change Title of account information modal: currency * Add mobile app hint * Update Password Modal Text * Add TODO Co-authored-by: Yashim Wong * translations: πŸ“š sync translations with crowdin (#6569) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6570) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6571) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * translations: πŸ“š sync translations with crowdin (#6572) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * Initial setup * Finished bulding the components * Working on the flows * Working on the cfd flows * Almost finished cfd account creation flow * Finished account flow * Almost finished cfd flows * Finished demo account creation flow * Added demo top up modal * Added the required styles * Fixed some issues with the dxtrade platform * Fixed issues with dxtrade * Removed redundant translations * Fixed tr and zh-cn * Fixed tr.json file Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: Eduard Hrachou <107860964+eduard-deriv@users.noreply.github.com> Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com> Co-authored-by: β€œyauheni-kryzhyk-deriv” <β€œyauheni@deriv.me”> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: George Usynin <103181646+george-usynin-binary@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: Farzin Mirzaie <72082844+farzin-fs@users.noreply.github.com> Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com> Co-authored-by: Nijil Nirmal Co-authored-by: Bahar Co-authored-by: Hamid Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com> Co-authored-by: Farrah Mae Ochoa Co-authored-by: Farabi <102643568+farabi-deriv@users.noreply.github.com> Co-authored-by: Farabi Co-authored-by: Farabi Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Co-authored-by: Thisyahlen Co-authored-by: Maryia <103177211+maryia-binary@users.noreply.github.com> Co-authored-by: Sui Sin <103026762+suisin-deriv@users.noreply.github.com> Co-authored-by: Yashim Wong --- .../CFDs/cfd-accounts-container.tsx | 4 +- .../src/components/CFDs/cfd-accounts.scss | 2138 ++++++++++++++++- .../src/components/CFDs/cfd-demo-accounts.tsx | 87 +- .../src/components/CFDs/cfd-real-accounts.tsx | 109 +- .../account-manager/account-manager.tsx | 29 +- .../src/modules/trading-hub/index.tsx | 68 +- packages/appstore/src/stores/root-store.ts | 2 + packages/appstore/src/types/stores.types.ts | 1 + packages/cfd/build/constants.js | 5 +- packages/cfd/build/webpack.config.js | 10 + .../Components/cfd-personal-details-form.tsx | 9 +- .../Components/cfd-real-account-display.tsx | 2 +- .../cfd-change-password-confirmation.tsx | 2 + .../src/Containers/cfd-dbvi-onboarding.tsx | 6 + .../cfd-financial-stp-real-account-signup.tsx | 2 + .../Containers/cfd-password-manager-modal.tsx | 21 +- .../cfd/src/Containers/cfd-password-modal.tsx | 20 + .../Containers/cfd-personal-details-modal.tsx | 8 +- .../Containers/cfd-reset-password-modal.tsx | 7 +- .../src/Containers/cfd-top-up-demo-modal.tsx | 3 + .../Containers/jurisdiction-modal-content.tsx | 9 + .../cfd/src/Containers/jurisdiction-modal.tsx | 4 + .../cfd/src/Containers/mt5-trade-modal.tsx | 2 + packages/cfd/src/Containers/props.types.ts | 8 + .../warning-scam-message.jsx | 1 - packages/core/src/Stores/common-store.js | 5 + 26 files changed, 2477 insertions(+), 85 deletions(-) diff --git a/packages/appstore/src/components/CFDs/cfd-accounts-container.tsx b/packages/appstore/src/components/CFDs/cfd-accounts-container.tsx index 8871e08f99d1..9caff05ae426 100644 --- a/packages/appstore/src/components/CFDs/cfd-accounts-container.tsx +++ b/packages/appstore/src/components/CFDs/cfd-accounts-container.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'; import CFDDemoAccounts from './cfd-demo-accounts'; import CFDRealAccounts from './cfd-real-accounts'; import { isLandingCompanyEnabled, CFD_PLATFORMS } from '@deriv/shared'; -import { Localize } from '@deriv/translations'; +import { Localize, localize } from '@deriv/translations'; import { Loading, Text, StaticUrl } from '@deriv/components'; import { TPlatform, TAccountCategory, TMt5StatusServer, TMt5StatusServerType, TRootStore } from 'Types'; import { useStores } from 'Stores/index'; @@ -74,7 +74,7 @@ const CFDAccounts = ({ account_type }: TCFDAccountsProps) => {
- CFDs + {localize('CFDs')}
diff --git a/packages/appstore/src/components/CFDs/cfd-accounts.scss b/packages/appstore/src/components/CFDs/cfd-accounts.scss index a64fbb3d3a9d..621ea4794859 100644 --- a/packages/appstore/src/components/CFDs/cfd-accounts.scss +++ b/packages/appstore/src/components/CFDs/cfd-accounts.scss @@ -39,6 +39,16 @@ } } +.cfd-attribute-describer { + .counter { + color: var(--brand-red-coral); + vertical-align: top; + } + @include mobile { + font-size: 1.2rem; + } +} + .cfd-compare-accounts { display: flex; flex-flow: column nowrap; @@ -128,43 +138,1671 @@ } } } - &-modal { - &__wrapper { - display: flex; - justify-content: center; - margin-top: 2.4rem; + &-modal { + &__wrapper { + display: flex; + justify-content: center; + margin-top: 2.4rem; + } + } + @include mobile { + background: var(--general-main-1); + height: 100%; + font-size: 1.2rem; + + .dc-table { + padding: 0; + height: inherit; + + &__cell { + font-size: 1.2rem; + } + &__row { + padding: 0; + } + &__head { + font-size: 1.2rem; + border-bottom: 2px solid var(--border-disabled); + background-color: var(--general-main-1); + margin-top: -1px; + } + &__header, + &__row { + width: 150vw; + grid-template-columns: 1fr 1fr 1fr 1fr; + } + } + } +} + +.cfd-compare-account--hint { + color: var(--text-less-prominent); + font-size: 12px; + line-height: 1.5em; + width: 100%; + padding: 1.6rem 2.4rem 0.8rem; + + @include mobile { + padding: 1.6rem; + border-top: 2px solid var(--border-disabled); + } +} + +.cfd-dashboard__accounts-error { + background-color: var(--status-warning-transparent); + margin: 1.2rem 0; + + &-message { + padding: 0.8rem 2.4rem; + } +} + +.cfd-real-accounts-display, +.cfd-demo-accounts-display { + display: grid; + grid-auto-flow: column; + grid-gap: 2.4rem; + justify-content: center; + padding-top: 2.4em; + height: 100%; + + @include mobile { + display: flex; + gap: 0; + overflow-x: hidden; + flex-direction: column; + height: unset; + } +} + +.cfd-demo-accounts-display .cfd-account-card__wrapper { + @include desktop { + height: auto; + } +} + +.cfd-jurisdiction-card--synthetic, +.cfd-jurisdiction-card--financial { + border: solid 1px var(--border-normal); + border-radius: 0.8rem; + display: flex; + justify-content: space-between; + flex-direction: column; + min-height: 38rem; + width: 27.6em; + position: relative; + padding: 1.6rem; + @include mobile { + margin-bottom: 2rem; + } + + &:hover { + box-shadow: 0 2px 8px 0 var(--shadow-menu); + } + + &--disabled { + border: solid 1px var(--border-disabled); + } + + @include desktop { + height: 100%; + margin: 0 0.8rem; + } + + &__wrapper { + padding: 0; + margin-top: 2.4rem; + display: flex; + justify-content: center; + align-items: center; + + @include mobile { + flex-direction: column; + } + } + &--selected { + border: solid 1px #377cfc; + border-radius: 4px; + } + + &__verification-status, + &__verification-status--pending, + &__verification-status--failed, + &__verification-status--account_added, + &__verification-status--poi_verified, + &__verification-status--not_submitted, + &__verification-status--hint { + width: 100%; + min-height: 2.4rem; + display: flex; + + * { + margin: auto; + } + + &--pending { + background-color: #ffad3a; + border-radius: 0.5rem; + } + + &--poi_verified { + background: var(--text-status-info-blue); + border-radius: 0.5rem; + } + &--account_added { + background-color: #4bb4b3; + border-radius: 0.5rem; + } + + &--failed { + background-color: #ec3f3f; + border-radius: 0.5rem; + } + &--not_submitted { + background-color: var(--general-section-1); + padding: 0.3rem; + border-radius: 0.5rem; + } + } + &__h2-header { + margin: 1.4rem 0 2.4rem; + } + &__footnote { + display: flex; + flex-direction: column; + justify-content: center; + margin: 1.6rem auto 0; + @include desktop { + width: 99.2rem; + } + @include mobile { + padding: 1.6rem 0.8rem; + box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.08); + } + + &--pending { + color: #ffad3a; + } + } + + &__jurisdiction-checkbox { + display: flex; + justify-content: center; + margin-top: 1.6rem; + } + + &__over-header { + background-color: #dfeaff; + top: -1rem; + left: 1.4rem; + z-index: 10; + width: 90%; + height: 4rem; + position: absolute; + border-radius: 4px; + margin-bottom: 1rem; + + & > p { + font-size: 16px; + text-align: center; + } + } + + &__bullet-wrapper { + display: flex; + margin-bottom: 1rem; + + &--checkmark { + margin-right: 1rem; + } + } +} + +.cfd-jurisdiction-card--synthetic { + padding: 2.4rem; +} + +.cfd-modal--custom-exit { + display: none; +} + +.cfd-real-accounts-display { + transition: margin-bottom 0.3s ease-in-out; + margin-bottom: var(--cfd-real-acc-margin-bottom); + + .dc-carousel__card, + .dc-carousel__wrapper { + padding: 0; + } + + &--has-trade-servers { + .cfd-account-card__wrapper { + @include desktop { + grid-template-rows: 1fr 4rem; + } + } + } +} + +.cfd-account-card { + border: solid 1px var(--border-normal); + border-radius: 4px; + display: flex; + flex-flow: column nowrap; + min-height: 21rem; + width: 30.4em; + position: relative; + @include desktop { + height: fit-content; + } + + &__balance { + margin-bottom: 0.8rem; + padding: 0 0.8rem; + &--region { + border: 1px solid #2a3052; + border-radius: 1rem; + background-color: #2a3052; + padding: 0.2rem 0.8rem; + } + &--value { + @include typeface(--title-left-bold-black); + color: var(--text-profit-success); + } + } + + &--login-id { + padding: 0 0.8rem; + } + + &--login-id-demo { + padding: 0.8rem 0.8rem 0; + } + + &__item { + width: 90%; + background-color: var(--general-section-1); + border-radius: 8px; + margin-bottom: 0.8rem; + + &--banner { + position: relative; + transform: rotate(45deg); + border-bottom: 1.8rem solid #85acb0; + border-left: 1.8rem solid transparent; + border-right: 1.8rem solid transparent; + height: 0; + width: 7rem; + @include desktop { + left: 21.8rem; + } + @include mobile { + margin-left: 1.8rem; + } + top: 1rem; + color: #fff; + font-weight: bold; + line-height: 18px; + white-space: nowrap; + text-align: center; + + &--demo { + border-bottom-color: var(--brand-secondary); + } + &--server { + border-bottom-color: $color-blue-2; + } + @include mobile { + left: calc(100vw - 14.2rem); + } + } + } + + &__wrapper { + display: grid; + grid-template-rows: 1fr; + justify-content: center; + + @include mobile { + grid-template-rows: 1fr; + height: fit-content; + + &:not(:last-child) { + margin-bottom: 2.4rem; + } + } + } + + &__logged-out { + min-height: 15rem; + } + + &__add-server { + font-size: 1.4rem; + cursor: pointer; + display: grid; + grid-auto-flow: column; + grid-gap: 0.4rem; + justify-content: center; + align-items: center; + width: 100%; + height: 4rem; + color: var(--text-prominent); + + @include mobile { + height: 4rem; + align-content: start; + } + + &--disabled { + cursor: not-allowed; + color: var(--text-disabled); + + .cfd-account-card__add-server--icon { + background-color: var(--border-disabled); + color: var(--text-disabled); + } + } + &-exit, + &-enter-done { + transition: all 0.3s ease-in-out; + opacity: 1; + } + &-enter, + &-exit-done { + transition: all 0.3s ease-in-out; + opacity: 0; + } + &--icon { + color: var(--status-colored-background); + background-color: var(--brand-red-coral); + border-radius: 100%; + width: 2.4rem; + height: 2.4rem; + font-size: 1.8rem; + display: block; + text-align: center; + padding: 0.2rem; + } + } + + &__server { + font-size: 1.4rem; + text-align: left; + width: 27.2rem; + &--value { + font-weight: bold; + } + } + + &:hover { + box-shadow: 0 2px 8px 0 var(--shadow-menu); + } + &--heading { + @include typeface(--title-left-bold-black, none); + color: var(--text-general); + line-height: 1.5; + } + &--paragraph { + @include typeface(--paragraph-left-normal-black, none); + color: var(--text-general); + line-height: 1.45; + } + &__banner { + position: absolute; + transform: rotate(45deg); + border-bottom: 2.3rem solid var(--brand-red-coral); + border-left: 2.3rem solid transparent; + border-right: 2.3rem solid transparent; + height: 0; + width: 11.7rem; + left: 21.1rem; + top: 2.1rem; + color: var(--text-colored-background); + font-weight: bold; + line-height: 24px; + white-space: nowrap; + text-align: center; + + &--demo { + border-bottom-color: var(--brand-secondary); + } + &--server { + // TODO: Add a CSS variable + border-bottom-color: $color-blue-2; + } + @include mobile { + left: calc(100vw - 14.2rem); + } + } + &__type { + display: flex; + padding: 1.5rem 1.6rem 1.6rem; // -1 for border + + &--description { + display: flex; + margin-left: 1.6rem; + max-width: 19.2rem; + flex-direction: column; + + .cfd-account-card--paragraph { + width: 18.3rem; + padding-top: 0.8rem; + } + } + &--has-banner { + .cfd-account-card--paragraph { + width: 18rem; + } + } + } + &__display { + display: flex; + flex-wrap: wrap; + width: min-content; + justify-content: center; + height: fit-content; + + &-text { + @include typeface(--title-center-bold-black); + color: var(--brand-red-coral); + line-height: 1.5; + margin-top: 0.4rem; + + &--top-right { + position: relative; + left: 22.2rem; + bottom: 7.2rem; + margin: 0; + } + } + &--fixed-height { + height: 64px; // don't leave space for the demo text that is moved to the top right + } + } + &__cta { + display: flex; + flex-direction: column; + + &-wrapper { + align-items: center; + display: flex; + flex-direction: column; + position: relative; + } + } + &__specs { + padding: 1.6rem; + width: 100%; + + &-table { + width: 100%; + + &-attribute .cfd-account-card--paragraph { + color: var(--text-general); + margin-right: 2.4rem; + } + &-data { + .cfd-account-card--paragraph { + @include typeface(--paragraph-left-bold-black, none); + line-height: 1.45; + } + } + } + } + &__login-specs { + margin: 0.8rem 0; + width: 100%; + padding: 0 1.8rem; + + &-table { + width: 100%; + table-layout: fixed; + border-collapse: separate; + border-spacing: 0 0.8rem; + + &-attribute { + width: 35%; + vertical-align: middle; + .cfd-account-card--paragraph { + color: var(--text-general); + } + } + &-data { + width: 65%; + vertical-align: middle; + .cfd-account-card--paragraph { + @include typeface(--paragraph-left-normal-black, none); + line-height: 1.45; + } + } + &-row { + &--account-id { + height: 3.6rem; + } + } + } + } + &__spec-box { + display: grid; + grid-template-columns: 1fr 2.4rem; + border: 1px solid var(--border-normal); + border-radius: $BORDER_RADIUS; + } + &__spec-text { + padding: 0.4rem; + font-family: 'Courier', monospace; + overflow: hidden; + } + &__spec-copy { + display: grid; + justify-content: center; + align-content: center; + border-left: 1px solid var(--border-normal); + } + &__password { + &-box { + display: grid; + grid-template-columns: 1fr 2.4rem; + border: 1px solid var(--border-normal); + border-radius: $BORDER_RADIUS; + } + &-text { + padding: 0.4rem; + overflow: hidden; + } + &-action { + display: grid; + justify-content: center; + align-content: center; + border-left: 1px solid var(--border-normal); + border-radius: 0; + padding: 0 0 0 0.5rem; + overflow: hidden; + } + &-tooltip { + width: 20rem; + } + } + &__account-selection { + align-items: center; + display: flex; + height: 4rem; + justify-content: center; + margin: 0 1.6rem 1.5rem; // -1 for border + padding: 0; + text-decoration: none; + width: calc(100% - 3.2rem); + @include typeface(--paragraph-center-bold-black, none); + + &--primary { + background-color: var(--brand-red-coral); + color: var(--text-colored-background); + } + &--secondary { + background-color: transparent; + border: 2px solid var(--button-secondary-default); + color: var(--text-prominent); + + &:hover { + background-color: var(--button-secondary-hover); + } + } + &--disabled { + background-color: var(--brand-red-coral); + cursor: initial; + opacity: 0.32; + } + } + &__login { + @include typeface(--title-center-normal-black); + align-items: center; + background-color: var(--general-section-1); + border-radius: 4px; + color: var(--text-general); + display: flex; + padding: 0.8rem; + justify-content: center; + margin: 1rem 0 1.6rem; + width: 272px; + + strong { + font-weight: bold; + } + span, + strong { + margin-right: 0.8rem; + } + } + &__manage { + display: flex; + width: calc(100% - 3.2rem); + + .dc-btn { + width: 100%; + margin-bottom: 1.6rem; + height: 4rem; + + &:not(:last-child) { + margin-right: 1.6rem; + } + } + } + + &__manage--mt5 { + display: flex; + width: 100%; + margin-left: 0.4rem; + padding-top: 0.2rem; + + .dc-btn { + min-width: 12rem; + margin-bottom: 1.6rem; + height: 4rem; + + &:not(:last-child) { + margin-right: 0.6rem; + } + } + } + + &__action-wrapper { + margin: 0 auto 1.3rem; + padding-top: 1rem; + width: 75%; + text-align: center; + + &__link { + font-size: var(--text-size-xxs); + + &--disabled { + pointer-events: none; + } + } + } + &__divider { + width: calc(100% - 3.2rem); + border-top: 1px solid var(--general-section-1); + margin: 1rem 0 1.6rem 1.6rem; + } + @include mobile { + width: calc(100vw - 3.2rem); + height: fit-content; + + &:not(:last-child) { + margin-bottom: 2.4rem; + margin-right: 0; + } + } +} + +.cfd-trade-modal-container { + width: inherit; + overflow-y: scroll; +} + +.cfd-trade-modal { + display: flex; + margin: 2.4rem; + align-items: center; + gap: 0.8rem; + &--paragraph { + @include typeface(--paragraph-left-normal-black, none); + color: var(--text-less-prominent); + line-height: 1.45; + } + &__desc { + display: flex; + flex-direction: column; + flex-grow: 1; + } + &__password { + &-box { + display: flex; + align-items: center; + gap: 0.8rem; + } + &-text { + overflow: hidden; + } + &-action { + padding: 0; + height: 1.5rem; + .dc-btn__icon { + padding-right: 0; + } + } + } + &__specs { + padding: 1.6rem; + width: 100%; + + &-table { + width: 100%; + + &-attribute .cfd-trade-modal--paragraph { + color: var(--text-general); + margin-right: 2.4rem; + } + &-data { + .cfd-trade-modal--paragraph { + @include typeface(--paragraph-left-bold-black, none); + line-height: 1.45; + } + } + } + } + &__login-specs { + margin: 0 2.4rem; + display: flex; + flex-direction: column; + gap: 0.1rem; + :first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + :last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + &-item { + display: flex; + padding: 0.5rem 0.8rem; + align-items: center; + justify-content: space-between; + background: var(--general-section-1); + } + } + &__spec-box { + display: flex; + gap: 1rem; + align-items: center; + } + &__spec-text { + font-family: 'Courier', monospace; + overflow: hidden; + } + &__download-center { + border-top: 2px solid var(--general-section-1); + padding-top: 2rem; + padding-bottom: 5.8rem; + + &-app { + display: flex; + flex-direction: column; + margin-top: 1.6rem; + &--option { + display: flex; + gap: 1.6rem; + align-items: center; + padding: 1.6rem 2.4rem; + border-top: 1px solid var(--border-disabled); + &:last-child { + border-bottom: 1px solid var(--border-disabled); + } + &-item { + flex-grow: 1; + } + &-link { + align-items: center; + display: flex; + justify-content: center; + text-decoration: none; + @include typeface(--paragraph-center-bold-black, none); + background-color: transparent; + border: 1px solid var(--border-disabled); + color: var(--text-less-prominent); + + &:hover { + background-color: var(--button-secondary-hover); + } + } + } + } + + &-options { + display: flex; + justify-content: center; + align-items: center; + margin: 1.6rem; + &--desktop { + display: block; + align-items: baseline; + flex-flow: column nowrap; + + &-links { + display: flex; + flex-direction: column; + } + &-row { + display: flex; + align-items: baseline; + justify-content: center; + margin-bottom: 3.1rem; + + > svg:first-child { + margin-bottom: 0.4rem; + margin-right: 0.8rem; + } + a > svg { + margin-top: 0.8rem; + margin-right: 0.8rem; + } + } + &-download { + display: grid; + grid-auto-flow: column; + grid-gap: 0.8rem; + justify-content: center; + + a { + margin-top: 0.4rem; + } + } + } + &--mobile { + align-items: center; + display: flex; + flex-flow: column nowrap; + margin-left: 4.7rem; + + &-devices { + margin-bottom: 1.6em; + svg:first-child { + margin-right: 0.8em; + } + } + &-link:not(:first-child) { + margin-left: 1.6rem; + } + &-links { + display: flex; + @include mobile { + flex-direction: column; + } + } + @include mobile { + margin-left: unset; + margin-right: unset; + } + } + &--qrcode { + display: flex; + flex-direction: column; + padding: 0.8rem; + margin: 0 0.8rem; + align-items: center; + justify-content: center; + border: 1px solid var(--border-disabled); + border-radius: 5px; + max-width: 14rem; + @include mobile { + margin-left: 1.6rem; + } + } + @include mobile { + align-items: flex-start; + } + } + &--heading { + @include typeface(--title-center-bold-black, none); + color: var(--text-general); + line-height: 1.5; + margin-left: 2.1rem; + margin-bottom: 4.2rem; + @include desktop { + margin-left: 0; + text-align: center; + } + } + &--hint { + margin-top: 1.6rem; + } + @include mobile { + margin-bottom: 1.6rem; + } + } + &__mobile-view { + .dc-page-overlay__content { + flex-direction: column; + } + &-wrapper { + overflow: scroll; + } + } +} + +.cfd-password-manager { + margin: 5.6rem auto 3.2rem; + width: 100%; + height: 100%; + + @media only screen and (max-height: 645px) { + margin-top: 1.5rem; + overflow: auto; + } + + &--paragraph { + margin-bottom: 3.2rem; + } + &--error-message { + margin-bottom: 1em; + } + &__investor-wrapper { + margin: 3.2rem 0.5rem 0; + + .cfd-password-manager--paragraph:first-child { + margin-bottom: 0.8rem; + } + + & .dc-input__label { + top: 0.9rem; + } + @include mobile { + padding-bottom: 12rem; + } + } + .dc-password-meter__container, + .dc-password-input { + width: 30rem; + margin: auto; + } + + &__investor-form { + width: 100%; + max-width: 300px; + margin: 2.4em auto 0; + + @include mobile { + max-width: unset; + } + } + &__new-password { + margin-bottom: 8.6rem; + } + &__actions { + align-items: center; + display: flex; + flex-flow: column nowrap; + } + &--button { + margin-top: 1.6rem; + + @include mobile { + width: 100%; + margin-top: 0.8rem; + max-width: 30rem; + white-space: normal; + } + } + &__success { + text-align: center; + margin-top: 3.2rem; + + &-header { + @include typeface(--paragraph-center-bold-black); + margin: 1.6rem 0 0.8rem; + } + &-btn { + margin-top: 3.2rem; + width: 6.4rem; + + @include mobile { + width: 100%; + max-width: 30rem; + } + } + } + .multi-step__header { + margin: 0 0 2.4rem; + } + .multi-step__component { + text-align: center; + } + @include desktop { + max-width: calc(450px + 1rem); // needs extra padding for the scrollbar, otherwise it will cover the words + } + @include mobile { + padding: 0 1.6rem; + margin-top: 2.4rem; + + &__scroll-wrapper { + overflow-y: auto; + overflow-x: hidden; + } + /* iPhone SE screen width fixes due to UI space restrictions */ + @media only screen and (max-width: 320px) { + padding: 0; + } + } +} + +.cfd-financial-stp-modal { + display: flex; + height: 100%; + position: relative; + width: 100%; + + &__body { + width: 100%; + .poi-form-on-signup { + display: grid; + grid-template-rows: minmax(20rem, 1fr); + } + + .manual-poi { + margin: auto; + width: max-content; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + + &-details { + margin: auto; + @include mobile { + overflow-y: scroll; + } + + &__form { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__btns { + height: 7.2rem; + padding-bottom: 0; + } + + &__field { + margin-bottom: 3.5rem; + } + + &__fields-content { + display: flex; + flex-direction: column; + justify-content: center; + } + } + } + + .account-management__message-wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } + } + + &__form { + height: 100%; + display: flex; + flex-direction: column; + + .details-form { + flex: 1; + } + } + @include desktop { + overflow: hidden; + + & .details-form__description { + width: 100%; + } + } + @include mobile { + overflow: hidden; + grid-template-rows: 7rem minmax(10rem, 1fr); + &__heading { + padding: unset; + } + + .dc-form-submit-button { + background-color: var(--color-white); + } + } + .dc-autocomplete { + margin-bottom: 2.4rem; + } + .account-management { + &__message-icon { + display: flex; + justify-content: center; + align-items: center; + } + &__message-content { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + height: auto; + padding: 0 3rem; + padding-bottom: 7rem; + @include mobile { + overflow-y: auto; + } + } + &__message { + @include typeface(--title-center-bold-black); + color: var(--text-prominent); + margin-bottom: 1rem; + } + &__text { + @include typeface(--paragraph-center-normal-black); + color: var(--text-prominent); + } + &__continue { + margin-top: 3rem; + } + &__list { + &-message { + display: flex; + } + &-icon { + margin-right: 1.2rem; + } + } + } +} + +.cfd-personal-details-modal { + grid-template-rows: 8rem minmax(10rem, 1fr); + overflow-y: scroll; + + &__heading-container { + padding-top: 2.4rem; + } + + &__form { + .dc-modal-footer { + width: 100%; + padding: 1.6rem 2.4rem; + margin-top: 7.7rem; + bottom: 0; + right: 0; + display: flex; + justify-content: flex-end; + } + + .dc-autocomplete { + margin-bottom: 3.6rem; + } + } +} + +.dc-modal { + &__container { + min-width: initial; + &_cfd-password-modal { + &__description { + @include typeface(--xsmall-left-normal-black); + line-height: 1.5; + max-width: calc(min(100vw, 349px)); + margin: -2.7rem 0 2.4rem; + color: var(--text-less-prominent); + } + &__account-title { + margin-bottom: 1.6rem; + } + } + &_cfd-dashboard__compare-accounts { + width: 904px; + } + &_cfd-password-manager__modal { + height: 100% !important; + min-height: calc(100vh - 22rem); + width: 904px; + max-height: calc(100vh - 48px - 36px) !important; + } + } +} + +.account-poa { + &__upload { + &-remove-btn { + position: absolute; + width: 16px; + height: 16px; + top: 8px; + right: 8px; + cursor: pointer; + transition: transform 0.25s linear; + + &:hover { + transform: scale(1.25, 1.25); + } + &--error { + circle { + fill: var(--status-danger); + } + } + &-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + } +} + +.cfd-proof-of-address { + height: 100%; + & .details-form { + display: grid; + grid-template-rows: minmax(10rem, 1fr) 7.2rem; + height: 100%; + .dc-modal-footer { + border-top: 1px solid var(--general-active); + } + } + &__file-upload { + padding-top: 0.8rem; + position: relative; + + .account-poa { + &__upload { + &-section { + margin-top: 0; + display: flex; + } + &-file { + width: 100%; + flex: 1; + height: 24rem; + position: relative; + margin: 0; + + .dc-file-dropzone { + border: 1px dashed var(--border-normal); + max-width: 40rem; + + &__message-subtitle { + font-size: unset; + font-weight: unset; + } + } + @include mobile { + flex: unset; + } + } + &-list { + display: unset; + + .account-poa__upload-box { + display: flex; + flex-direction: unset; + flex: unset; + align-items: center; + justify-content: flex-start; + margin: 0 1.6rem 0.8rem 0; + border: none; + border-radius: 0; + padding: 0; + text-align: unset; + } + } + &-icon { + width: 2.5rem; + margin-bottom: 0; + } + &-item { + min-width: 23.8rem; + width: 100%; + margin-left: 1rem; + font-size: var(--text-size-xxs); + line-height: 1.5; + color: var(--text-prominent); + padding: 0; + } + } + } + } + &__field-area { + max-width: 556px; + margin: 0 auto; + padding: 3rem 0; + + & .dc-dropdown__display-placeholder-text, + & .dc-input__label, + & .dc-dropdown__display { + background: var(--general-main-2); + } + @include mobile { + overflow: auto; + } + } + &__inline-fields { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 1rem; + + .dc-dropdown-container { + margin-top: 0; + } + } + @include mobile { + .dc-input__label { + background: var(--general-section-2); + } + &__field-area { + padding: 0 1.6rem 3.2rem; + max-height: calc(100% - 0.8rem); + } + &__inline-fields { + display: flex; + flex-direction: column; + + .dc-select-native { + margin-bottom: 3.2rem; + } + } + &__file-upload { + .dc-field--error { + top: 50%; + left: 0; + right: unset; + } + .account-poa__upload-section { + flex-direction: column; + } + } + } +} + +.cfd-proof-of-identity { + height: 100%; + overflow: auto; + + &__fields { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + + @include mobile { + display: unset; + position: relative; + } + + .proof-of-identity { + &:is(span) { + width: unset; + height: unset; + } + + &__footer { + width: 45%; + display: inline-flex; + justify-content: flex-end; + height: unset; + position: unset; + bottom: unset; + left: unset; + padding: unset; + z-index: unset; + border-radius: unset; + border-top: unset; + background-color: unset; + align-items: unset; + flex-direction: unset; + + @include mobile { + width: 95%; + margin-top: 8px; + } + + &-alert { + margin-right: unset; + } + } + + &__container { + display: flex; + flex-direction: column; + align-items: center; + width: 45%; + justify-content: unset; + + @include mobile { + width: 100%; + padding: 0 1.2rem; + overflow-y: unset; + justify-content: unset; + } + + .icon { + width: 12.8rem; + height: 12.8rem; + margin: 1.6rem 0 2.4rem; + } + .dc-input__bottom-label { + margin: unset; + } + .btm-spacer { + margin-bottom: 1.6rem; + } + .top-spacer { + margin-top: 1.6rem; + } + + .proof-of-identity__footer { + // for cases when __footer is a child of proof-of-identity__container: + width: 100%; + margin-bottom: 8.6em; + + span.dc-text.dc-btn__text { + display: inline-flex; + align-items: center; + } + .back-btn { + margin-right: unset; + + &-icon { + margin-right: 0.8rem; + } + } + } + } + + &__header { + margin: 0 0 1.6rem; + } + &__country-text { + text-align: center; + margin-bottom: 1.6rem; + } + &__inner-container { + display: unset; + flex-direction: unset; + justify-content: unset; + align-items: unset; + width: 100%; + } + &__image { + width: 100%; + max-width: unset; + border-radius: unset; + object-fit: unset; + + &-container { + width: unset; + height: unset; + padding: unset; + border-radius: unset; + background-color: unset; + } + } + &__fieldset { + width: 100%; + + @include mobile { + margin: 0 0 1.8rem; + } + + &-container { + display: unset; + flex-direction: unset; + justify-content: unset; + align-items: unset; + } + &-input { + width: unset; + } + } + &__sample-container { + margin-top: 2.4rem; + margin-left: unset; + width: unset; + } + + &__submit-button { + margin-left: 0.8rem; + @include mobile { + margin-right: unset; + } + } + } + .dc-themed-scrollbars { + height: 100%; + } + } + & .details-form { + display: grid; + grid-template-rows: minmax(10rem, 1fr) 8.2rem; + height: 100%; + position: relative; + + @include mobile { + max-height: calc(100% - 1rem); } } @include mobile { - background: var(--general-main-1); - height: 100%; - font-size: 1.2rem; + overflow: hidden; + } +} - .dc-table { - padding: 0; - height: inherit; +.cfd-change-password { + &__description { + margin-bottom: 2.4rem; + } - &__cell { - font-size: 1.2rem; - } - &__row { - padding: 0; + &__icon { + margin-left: 2.3rem; + margin-bottom: 1.4rem; + flex: none; + } + + &-confirmation { + &__description { + margin-top: 0.8rem; + margin-bottom: 2.4rem; + } + } +} + +.cfd-trading-password { + margin-top: 3.2rem; +} + +.dc-modal__container_cfd-financial-stp-signup-modal { + max-height: calc(100vh - 102px) !important; + @include desktop { + display: grid; + grid-template-rows: 6rem minmax(20rem, 1fr); + } +} + +.dc-modal__container_cfd-pending-dialog, +.dc-modal__container_cfd-success-dialog { + .dc-modal-header__title--cfd-pending-dialog { + text-align: center; + margin: auto; + padding: 2.4rem; + width: fit-content; + } + .dc-modal-body { + text-align: center; + } + .dc-modal-footer { + justify-content: center; + padding: 0.8rem 2rem 2.4rem; + + .dc-btn { + min-width: 90px; + + &:only-child { + margin: 0; } - &__head { - font-size: 1.2rem; - border-bottom: 2px solid var(--border-disabled); - background-color: var(--general-main-1); - margin-top: -1px; + &:first-child { + margin-left: 0; } - &__header, - &__row { - width: 150vw; - grid-template-columns: 1fr 1fr 1fr 1fr; + } + @include mobile { + padding: 0.8rem 1.6rem 1.6rem; + display: flex; + grid-gap: 0.6rem; + + & .dc-btn { + &:only-child { + max-width: 14rem; + width: auto; + min-width: 9rem; + } } } } } +.dc-modal__container_cfd-success-dialog { + .success-change__icon-area { + width: 128px; + margin: 0 auto; + position: relative; + &--large .bottom-right-overlay { + position: absolute; + left: 76px; + top: 76px; + + @include mobile { + left: 78px; + top: 58px; + } + } + &--xlarge .bottom-right-overlay { + position: absolute; + bottom: 0.8rem; + right: -2.8rem; + height: 5.2rem; + width: 5.2rem; + } + } + .dc-modal-body { + .dc-modal-header__title { + text-align: center; + margin: auto; + padding: 1.6rem 0 0.8rem; + width: fit-content; + } + @include mobile { + font-size: 1.4rem; + } + } + .cfd-account__platform { + font-style: italic; + white-space: nowrap; + } +} +.cfd-personal-details-form-error { + @include typeface(--paragraph-left-normal-red); + @include desktop { + white-space: nowrap; + display: flex; + align-items: flex-end; + } +} .cfd-real-compare-accounts { display: flex; flex-flow: column nowrap; @@ -250,6 +1888,7 @@ opacity: 0.32; border-radius: 4px; width: 100%; + cursor: not-allowed; .dc-text { font-style: normal; font-weight: 700; @@ -354,3 +1993,452 @@ } } } +.dc-modal-header__title--cfd-real-compare-accounts { + font-size: var(--text-size-sm); + line-height: 3rem; +} + +.cfd-real-compare-accounts-mobile-header { + height: fit-content; + border-bottom: none; + .dc-text { + font-size: var(--text-size-s); + } +} +.cfd-compare-accounts-tooltip { + margin-left: 0.8rem; + &--msg { + font-size: var(--text-size-xxs); + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 8px; + width: 276px; + border-radius: 4px; + } +} + +.dc-modal__container_cfd-password-modal, +.dc-mobile-dialog__cfd-password-modal { + display: flex; + flex-direction: column; + justify-content: flex-start; + max-width: 424px; + + form { + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + padding: 0 2.4rem 1.2rem; + + @include mobile { + padding: 0; + } + } + &__description { + @include typeface(--small-center-normal-black); + color: var(--text-prominent); + text-transform: none; + margin-top: 1rem; + top: 2rem; + position: relative; + padding: 1.3rem; + } + &__hint { + max-width: 40rem; + } + &__body { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + .dc-input { + &__label { + top: 1.2rem; + @include mobile { + top: 0.9rem; + background-color: var(--fill-normal); + } + } + } + .dc-password-meter { + &__bg { + background: var(--general-section-2); + @include mobile { + background: var(--fill-disabled); + } + } + } + .status-dialog { + margin-top: 3em; + } + .cfd-password-reset { + @include mobile { + flex: 1; + } + } + & .dc-password-meter__container { + flex-grow: 1; + margin: auto; + + @include mobile { + width: calc(100vw - 4.8rem); + max-width: 30rem; + } + } + & .mt5-password-field { + margin-bottom: 1em; + width: 80%; + } + .input-element { + width: 100%; + } + @include mobile { + .cfd-password-modal__content { + overflow-y: auto; + overflow-x: hidden; + height: 100%; + max-height: calc(100% - 6.4rem); + padding: 1rem; + } + } + @include tablet-up { + .cfd-password-modal__content { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 2rem; + + &--password-reset { + padding: 0 2.5rem; + } + } + } +} +.dc-mobile-dialog__mt5-email-sent { + padding-bottom: 1rem; +} + +.cfd-password-modal { + &__warning { + padding: 2.5rem; + max-width: 50rem; + align-self: center; + &-text { + border-radius: 0.8rem; + padding: 0.8rem; + background-color: var(--status-warning); + } + } + &__message { + max-width: 32rem; + margin: auto; + line-height: 1.43; + } + &__radio { + &.dc-radio-group { + display: grid; + grid-gap: 2rem; + margin-top: 0; + padding-bottom: 2.4rem; + } + &.dc-radio-group__item { + display: flex; + flex-direction: row; + } + } + &__create-password { + padding: 0 1.2rem; + + &-content { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + margin-top: -2.5rem; + + .dc-icon { + margin-left: 1.1rem; + flex: none; + } + } + &-title { + margin-top: 2.4rem; + margin-bottom: 0.8rem; + } + &-description { + max-width: 30rem; + margin-bottom: 1.6rem; + } + } + &__change-password-confirmation { + display: flex; + align-items: center; + flex-direction: column; + max-width: 30rem; + + @include desktop { + margin-top: -2.5rem; + } + + &-wrapper { + display: flex; + justify-content: center; + width: 100%; + } + .dc-form-submit-button { + margin-bottom: 2.2rem; + } + } +} + +.dc-modal__container_top-up-virtual { + width: 384px; + min-height: 367px; + display: flex; + flex-direction: column; + + &__body { + display: flex; + flex-direction: column; + padding: 4.8rem 4.2rem; + flex-grow: 1; + justify-content: space-around; + align-items: center; + } + &__description { + text-transform: none; + } + &--h4 { + @include typeface(--small-center-bold-black); + text-transform: none; + color: var(--text-prominent); + } + &--balance { + @include typeface(--title-center-bold-black); + line-height: 1.5; + color: var(--text-profit-success); + } +} + +.cfd-success-topup { + &__heading { + @include typeface(--paragraph-center-bold-black); + margin: 1.6rem 1.8rem; + } + &__description { + p { + @include typeface(--small-center-normal-black); + color: var(--text-general); + text-transform: none; + } + } +} + +.cfd-dashboard { + &__container { + & .dc-popover__target { + display: flex; + } + } +} + +.cfd-verification-email-sent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__title { + @include typeface(--title-center-bold-black); + margin: 0.8rem 0; + + &--sub { + margin-bottom: 0.8rem; + margin-top: 3rem; + } + } + &__resend-button { + display: block; + @include typeface(--paragraph-center-bold-black); + color: var(--brand-red-coral); + text-decoration: none; + margin: 3.2rem 0 0; + } + & .countdown { + margin: 0 0.4rem; + } +} + +.cfd-reset-password { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + @include typeface(--paragraph-left-normal-black); + color: var(--text-prominent); + + &__container { + display: grid; + grid-template-rows: 12rem 7rem; + height: 100%; + width: 100%; + justify-items: center; + flex-grow: 1; + + @include mobile { + min-height: 24rem; + width: calc(100vw - 3.2rem); + } + } + &__heading { + @include typeface(--paragraph-center-bold-black); + margin: 1.6rem 0 0; + } + &__hint { + @include typeface(--small-left-normal-black); + color: var(--text-less-prominent); + margin-left: 1.2rem; + } + &__password-field { + margin-bottom: 0.5rem; + + & .dc-input__label { + top: 0.9rem; + } + } + &__password-area { + @include desktop { + width: calc(min(33rem, 100vw)); + padding: 2.4rem; + } + @include mobile { + width: 100%; + max-width: calc(100% - 2.4rem); + } + } + &__error { + display: flex; + max-width: 38.4rem; + min-height: 28.4rem; + flex-direction: column; + align-items: center; + padding-top: 2rem; + margin: 0 auto; + } + &__description { + @include typeface(--paragraph-left-normal-black); + color: var(--text-prominent); + margin-bottom: 2.4rem; + + &--is-centered { + margin-bottom: 2.4rem; + max-width: 70%; + } + } + &__confirm-button { + margin-top: 2.4rem; + } + &__success { + min-width: 38.4rem; + height: 28.4rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 2.4rem 0 2rem; + + @include mobile { + width: calc(100vw - 3.2rem); + height: 100%; + } + } + @include mobile { + & .dc-form-submit-button { + all: unset; + } + } +} + +/** @define poi-icon-row; weak */ +.poi-icon-row { + display: flex; + margin-bottom: 16px; + + &__icon-container { + align-items: center; + display: flex; + flex-direction: column; + color: var(--text-less-prominent); + + &:not(:first-child):not(:last-child) { + margin: 0 40px; + } + p { + font-size: var(--text-size-xxs); + } + p:first-of-type { + line-height: 1.5; + margin-top: 8px; + font-weight: bold; + } + @include mobile { + &:not(:first-child):not(:last-child) { + margin: 0; + } + & .dc-icon { + width: 8.8rem; + height: auto; + + /* iPhone SE screen width fixes due to UI space restrictions */ + @media only screen and (max-width: 340px) { + width: 7rem; + } + } + p { + line-height: 20px; + } + } + } + @include mobile { + display: grid; + grid-gap: 2.4rem; + grid-template-columns: 1fr 1fr 1fr; + margin-top: 4rem; + } +} + +.dc-modal__container_cfd-financial-stp-modal { + .dc-modal-header { + border-bottom: 1px solid var(--general-section-1); + } +} +.poi-poa-submitted { + &__message-content { + align-items: center; + display: flex; + flex-direction: column; + height: auto; + justify-content: center; + padding: 10rem 3rem 7rem; + line-height: 5rem; + .dc-btn { + margin-top: 2rem; + } + } + &__text { + padding-top: 1.6rem; + } + &__svg-footer { + display: flex; + margin: 1.6rem 0; + .dc-btn { + margin: 0.5rem; + } + } +} diff --git a/packages/appstore/src/components/CFDs/cfd-demo-accounts.tsx b/packages/appstore/src/components/CFDs/cfd-demo-accounts.tsx index 49c0bf43ef38..0464a5d0f0e1 100644 --- a/packages/appstore/src/components/CFDs/cfd-demo-accounts.tsx +++ b/packages/appstore/src/components/CFDs/cfd-demo-accounts.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { localize } from '@deriv/translations'; import { CFD_PLATFORMS } from '@deriv/shared'; import AccountManager from '../account-manager'; -import { TCFDAccountsProps, TPlatform, TDetailsOfEachMT5Loginid, TStaticAccountProps } from 'Types'; +import { TCFDAccountsProps, TPlatform, TDetailsOfEachMT5Loginid, TStaticAccountProps, TRootStore } from 'Types'; +import { useStores } from 'Stores/index'; +import { DetailsOfEachMT5Loginid } from '@deriv/api-types'; const CFDDemoAccounts = ({ isDerivedVisible, isFinancialVisible, current_list }: TCFDAccountsProps) => { const available_demo_accounts: Array = [ @@ -36,10 +38,60 @@ const CFDDemoAccounts = ({ isDerivedVisible, isFinancialVisible, current_list }: }, ]; - const existingDemoAccounts = (platform: TPlatform, market_type?: string) => { - const acc = Object.keys(current_list).some(key => key.startsWith(`${platform}.demo.${market_type}`)) + const { client, modules, common, ui }: TRootStore = useStores(); + const { + standpoint, + dxtrade_tokens, + createCFDAccount, + setCurrentAccount, + setMT5TradeAccount, + toggleMT5TradeModal, + enableCFDPasswordModal, + openAccountNeededModal, + has_maltainvest_account, + } = modules.cfd; + const { platform, setAppstorePlatform } = common; + const { openTopUpModal } = ui; + const { is_eu } = client; + + const openAccountTransfer = ( + data: DetailsOfEachMT5Loginid & { account_id?: string; platform?: string }, + meta: { category: string; type?: string } + ) => { + setCurrentAccount(data, meta); + openTopUpModal(); + }; + + const REAL_DXTRADE_URL = 'https://dx.deriv.com'; + const DEMO_DXTRADE_URL = 'https://dx-demo.deriv.com'; + + const getDXTradeWebTerminalLink = (category: string, token?: string) => { + let url = category === 'real' ? REAL_DXTRADE_URL : DEMO_DXTRADE_URL; + + if (token) { + url += `?token=${token}`; + } + + return url; + }; + + const openCFDAccount = (account_type: string) => { + if (is_eu && !has_maltainvest_account && standpoint.iom) { + openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + } else { + createCFDAccount({ + category: 'demo', + type: account_type, + platform, + }); + enableCFDPasswordModal(); + } + }; + + const existingDemoAccounts = (existing_platform: TPlatform, market_type?: string) => { + const acc = Object.keys(current_list).some(key => key.startsWith(`${existing_platform}.demo.${market_type}`)) ? Object.keys(current_list) - .filter(key => key.startsWith(`${platform}.demo.${market_type}`)) + .filter(key => key.startsWith(`${existing_platform}.demo.${market_type}`)) .reduce((_acc, cur) => { _acc.push(current_list[cur]); return _acc; @@ -77,9 +129,24 @@ const CFDDemoAccounts = ({ isDerivedVisible, isFinancialVisible, current_list }: loginid={existing_account.display_login} currency={existing_account.currency} amount={existing_account.display_balance} - // TODO will pass the click functions when flows are updated - onClickTopUp={() => null} - onClickTrade={() => null} + dxtrade_link={getDXTradeWebTerminalLink('demo', dxtrade_tokens.demo)} + onClickTopUp={() => + openAccountTransfer( + current_list[ + Object.keys(current_list).find((key: string) => + key.startsWith(`${platform}.demo.${account.type}`) + ) || '' + ], + { + category: 'demo', + type: account.type, + } + ) + } + onClickTrade={() => { + toggleMT5TradeModal(); + setMT5TradeAccount(existing_account); + }} description={account.description} />
@@ -93,8 +160,10 @@ const CFDDemoAccounts = ({ isDerivedVisible, isFinancialVisible, current_list }: appname={account.name} platform={account.platform} disabled={account.disabled} - // TODO will pass the click functions when flows are updated - onClickGet={() => null} + onClickGet={() => { + setAppstorePlatform(account.platform); + openCFDAccount(account.type); + }} description={account.description} />
diff --git a/packages/appstore/src/components/CFDs/cfd-real-accounts.tsx b/packages/appstore/src/components/CFDs/cfd-real-accounts.tsx index c2ad8a6e5ca9..da914a556d3a 100644 --- a/packages/appstore/src/components/CFDs/cfd-real-accounts.tsx +++ b/packages/appstore/src/components/CFDs/cfd-real-accounts.tsx @@ -1,12 +1,19 @@ import React from 'react'; import { observer } from 'mobx-react-lite'; import { localize } from '@deriv/translations'; -import { CFD_PLATFORMS } from '@deriv/shared'; +import { CFD_PLATFORMS, routes, getCFDAccountKey, getAccountListKey } from '@deriv/shared'; +import { DetailsOfEachMT5Loginid } from '@deriv/api-types'; import AccountManager from '../account-manager'; import AddDerived from 'Components/add-derived'; import { TCFDAccountsProps, TPlatform, TDetailsOfEachMT5Loginid, TStaticAccountProps, TRootStore } from 'Types'; import AddOptionsAccount from 'Components/add-options-account'; import { useStores } from 'Stores/index'; +import { useHistory } from 'react-router-dom'; + +type TOpenAccountTransferMeta = { + category: string; + type?: string; +}; const CFDRealAccounts = ({ isDerivedVisible, @@ -15,8 +22,20 @@ const CFDRealAccounts = ({ current_list, has_real_account, }: TCFDAccountsProps) => { - const { client }: TRootStore = useStores(); + const { client, modules, common }: TRootStore = useStores(); + const { + dxtrade_tokens, + setAccountType, + createCFDAccount, + enableCFDPasswordModal, + toggleJurisdictionModal, + disableCFDPasswordModal, + toggleMT5TradeModal, + setMT5TradeAccount, + } = modules.cfd; + const { setAppstorePlatform, platform } = common; const { isEligibleForMoreRealMt5 } = client; + const history = useHistory(); const available_real_accounts: Array = [ { @@ -49,10 +68,56 @@ const CFDRealAccounts = ({ }, ]; - const existingRealAccounts = (platform: TPlatform, market_type?: string) => { - const acc = Object.keys(current_list).some(key => key.startsWith(`${platform}.real.${market_type}`)) + const REAL_DXTRADE_URL = 'https://dx.deriv.com'; + const DEMO_DXTRADE_URL = 'https://dx-demo.deriv.com'; + + const getDXTradeWebTerminalLink = (category: string, token?: string) => { + let url = category === 'real' ? REAL_DXTRADE_URL : DEMO_DXTRADE_URL; + + if (token) { + url += `?token=${token}`; + } + + return url; + }; + + const openAccountTransfer = ( + data: DetailsOfEachMT5Loginid & { account_id?: string; platform?: string }, + meta: { category: string; type?: string } + ) => { + if (data.platform === CFD_PLATFORMS.DXTRADE) + sessionStorage.setItem('cfd_transfer_to_login_id', data.account_id as string); + else sessionStorage.setItem('cfd_transfer_to_login_id', data.login as string); + + disableCFDPasswordModal(); + history.push(routes.cashier_acc_transfer); + }; + + const onClickFundReal = (account: DetailsOfEachMT5Loginid) => { + if (platform === 'dxtrade') { + return openAccountTransfer(current_list[getAccountListKey(account, platform)], { + category: account.account_type as keyof TOpenAccountTransferMeta, + type: getCFDAccountKey({ + market_type: account.market_type, + sub_account_type: (account as DetailsOfEachMT5Loginid).sub_account_type, + platform, + }), + }); + } + return openAccountTransfer(account, { + category: account.account_type as keyof TOpenAccountTransferMeta, + type: getCFDAccountKey({ + market_type: account.market_type, + sub_account_type: (account as DetailsOfEachMT5Loginid).sub_account_type, + platform: 'mt5', + }), + }); + }; + + const existingRealAccounts = (existing_platform: TPlatform, market_type?: string) => { + const acc = Object.keys(current_list).some(key => key.startsWith(`${existing_platform}.real.${market_type}`)) ? Object.keys(current_list) - .filter(key => key.startsWith(`${platform}.real.${market_type}`)) + .filter(key => key.startsWith(`${existing_platform}.real.${market_type}`)) .reduce((_acc, cur) => { _acc.push(current_list[cur]); return _acc; @@ -91,9 +156,12 @@ const CFDRealAccounts = ({ loginid={existing_account?.display_login} currency={existing_account.currency} amount={existing_account.display_balance} - // TODO will pass the click functions when flows are updated - onClickTopUp={() => null} - onClickTrade={() => null} + onClickTopUp={() => onClickFundReal(existing_account)} + onClickTrade={() => { + toggleMT5TradeModal(); + setMT5TradeAccount(existing_account); + }} + dxtrade_link={getDXTradeWebTerminalLink('real', dxtrade_tokens.real)} description={account.description} /> {isEligibleForMoreRealMt5(existing_account.market_type) && @@ -115,8 +183,29 @@ const CFDRealAccounts = ({ appname={account.name} platform={account.platform} disabled={account.disabled} - // TODO will pass the click functions when flows are updated - onClickGet={() => null} + onClickGet={ + account.platform === CFD_PLATFORMS.MT5 + ? () => { + toggleJurisdictionModal(); + setAccountType({ + category: 'real', + type: account.type, + }); + setAppstorePlatform(account.platform); + } + : () => { + setAccountType({ + category: 'real', + type: account.type, + }); + setAppstorePlatform(account.platform); + createCFDAccount({ + category: 'real', + type: account.type, + }); + enableCFDPasswordModal(); + } + } description={account.description} />
diff --git a/packages/appstore/src/components/account-manager/account-manager.tsx b/packages/appstore/src/components/account-manager/account-manager.tsx index 33f3615fd3a4..9074479e48ef 100644 --- a/packages/appstore/src/components/account-manager/account-manager.tsx +++ b/packages/appstore/src/components/account-manager/account-manager.tsx @@ -18,6 +18,7 @@ type TAccountManager = { description?: string; has_account: boolean; disabled: boolean; + dxtrade_link?: string; }; const AccountManager = ({ @@ -27,12 +28,13 @@ const AccountManager = ({ loginid, currency, platform, - has_account, - description, disabled, + onClickGet, + description, + has_account, onClickTopUp, onClickTrade, - onClickGet, + dxtrade_link, }: TAccountManager) => { const openStaticPage = () => { if (platform === CFD_PLATFORMS.MT5) window.open(getStaticUrl(`/dmt5`)); @@ -76,9 +78,24 @@ const AccountManager = ({ - + + {platform === CFD_PLATFORMS.DXTRADE && ( + + + + )} + {platform === CFD_PLATFORMS.MT5 && ( + + )} ) : (