diff --git a/package-lock.json b/package-lock.json index 82c18a6ee58e..e4ee164e959d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@contentpass/zxcvbn": "^4.4.3", "@deriv/api-types": "^1.0.11", "@deriv/deriv-api": "^1.0.11", - "@deriv/deriv-charts": "1.1.6", + "@deriv/deriv-charts": "1.1.8", "@deriv/js-interpreter": "^3.0.0", "@deriv/ui": "^0.0.15", "@enykeev/react-virtualized": "^9.22.4-mirror.1", @@ -2810,9 +2810,9 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@deriv/deriv-charts": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@deriv/deriv-charts/-/deriv-charts-1.1.6.tgz", - "integrity": "sha512-O3mzhzehIk48eeaRwn5LODSUwBqGD2J6EN7x0es+PtBcPSIS5QhPS4I3ke6730fLebB7mk7UPBtGTKR3WKR8ww==", + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@deriv/deriv-charts/-/deriv-charts-1.1.8.tgz", + "integrity": "sha512-IBAHcWK99sl8SefAb9zPxKV4AX3EauxELNOpxx5DmeHlq/peOnL5qf2HN7fRq/uOtZvn5Ol1QRnJAFsSFU2irA==", "dependencies": { "@welldone-software/why-did-you-render": "^3.3.8", "classnames": "^2.3.1", @@ -49118,9 +49118,9 @@ } }, "@deriv/deriv-charts": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@deriv/deriv-charts/-/deriv-charts-1.1.6.tgz", - "integrity": "sha512-O3mzhzehIk48eeaRwn5LODSUwBqGD2J6EN7x0es+PtBcPSIS5QhPS4I3ke6730fLebB7mk7UPBtGTKR3WKR8ww==", + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@deriv/deriv-charts/-/deriv-charts-1.1.8.tgz", + "integrity": "sha512-IBAHcWK99sl8SefAb9zPxKV4AX3EauxELNOpxx5DmeHlq/peOnL5qf2HN7fRq/uOtZvn5Ol1QRnJAFsSFU2irA==", "requires": { "@welldone-software/why-did-you-render": "^3.3.8", "classnames": "^2.3.1", diff --git a/packages/account/package.json b/packages/account/package.json index 3ab4a4eadc71..8d5d3d34afb4 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -28,7 +28,7 @@ }, "dependencies": { "@binary-com/binary-document-uploader": "^2.4.7", - "@deriv/api-types": "^1.0.11", + "@deriv/api-types": "^1.0.85", "@deriv/components": "^1.0.0", "@deriv/shared": "^1.0.0", "@deriv/translations": "^1.0.0", diff --git a/packages/account/src/Components/Routes/binary-routes.tsx b/packages/account/src/Components/Routes/binary-routes.tsx index 9e1539613a27..4a3c5ae1ad64 100644 --- a/packages/account/src/Components/Routes/binary-routes.tsx +++ b/packages/account/src/Components/Routes/binary-routes.tsx @@ -7,7 +7,6 @@ import { TBinaryRoutes, TPlatformContext, TRoute } from 'Types'; import RouteWithSubRoutes from './route-with-sub-routes'; const BinaryRoutes = (props: TBinaryRoutes) => { - const { is_pre_appstore } = props; const { is_appstore } = React.useContext(PlatformContext); return ( @@ -19,7 +18,7 @@ const BinaryRoutes = (props: TBinaryRoutes) => { } > - {getRoutesConfig({ is_appstore, is_pre_appstore }).map((route: TRoute, idx: number) => ( + {getRoutesConfig({ is_appstore }).map((route: TRoute, idx: number) => ( ))} diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.js b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.js index 6a82e93fba2c..5f1e2897be12 100644 --- a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.js +++ b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.js @@ -18,22 +18,6 @@ const fields_enums = { { value: 'account turnover 1', text: 'account turnover 1' }, { value: 'account turnover 2', text: 'account turnover 2' }, ], - binary_options_trading_experience_enum: [ - { value: 'binary options trading experience 1', text: 'binary options trading experience 1' }, - { value: 'binary options trading experience 2', text: 'binary options trading experience 2' }, - ], - binary_options_trading_frequency_enum: [ - { value: 'binary options trading frequency 1', text: 'binary options trading frequency 1' }, - { value: 'binary options trading frequency 2', text: 'binary options trading frequency 2' }, - ], - cfd_trading_experience_enum: [ - { value: 'cfd trading experience 1', text: 'cfd trading experience 1' }, - { value: 'cfd trading experience 2', text: 'cfd trading experience 2' }, - ], - cfd_trading_frequency_enum: [ - { value: 'cfd trading frequency 1', text: 'cfd trading frequency 1' }, - { value: 'cfd trading frequency 2', text: 'cfd trading frequency 2' }, - ], education_level_enum: [ { value: 'education level 1', text: 'education level 1' }, { value: 'education level 2', text: 'education level 2' }, @@ -42,22 +26,10 @@ const fields_enums = { { value: 'employment industry 1', text: 'employment industry 1' }, { value: 'employment industry 2', text: 'employment industry 2' }, ], - employment_status_enum: [ - { value: 'employment status 1', text: 'employment status 1' }, - { value: 'employment status 2', text: 'employment status 2' }, - ], estimated_worth_enum: [ { value: 'estimated worth 1', text: 'estimated worth 1' }, { value: 'estimated worth 2', text: 'estimated worth 2' }, ], - forex_trading_experience_enum: [ - { value: 'forex trading experience 1', text: 'forex trading experience 1' }, - { value: 'forex trading experience 2', text: 'forex trading experience 2' }, - ], - forex_trading_frequency_enum: [ - { value: 'forex trading frequency 1', text: 'forex trading frequency 1' }, - { value: 'forex trading frequency 2', text: 'forex trading frequency 2' }, - ], income_source_enum: [ { value: 'income source 1', text: 'income source 1' }, { value: 'income source 2', text: 'income source 2' }, @@ -70,14 +42,7 @@ const fields_enums = { { value: 'occupation 1', text: 'occupation 1' }, { value: 'occupation 2', text: 'occupation 2' }, ], - other_instruments_trading_experience_enum: [ - { value: 'other instruments trading experience 1', text: 'other instruments trading experience 1' }, - { value: 'other instruments trading experience 2', text: 'other instruments trading experience 2' }, - ], - other_instruments_trading_frequency_enum: [ - { value: 'other instruments trading frequency 1', text: 'other instruments trading frequency 1' }, - { value: 'other instruments trading frequency 2', text: 'other instruments trading frequency 2' }, - ], + source_of_wealth_enum: [ { value: 'source of wealth 1', text: 'source of wealth 1' }, { value: 'source of wealth 2', text: 'source of wealth 2' }, @@ -101,51 +66,24 @@ describe('', () => { }); const fieldsRenderCheck = () => { - expect(screen.getAllByText('(All fields are required)').length).toBe(2); expect(screen.getByText('Anticipated annual turnover')).toBeInTheDocument(); - expect(screen.getByText('Employment Status')).toBeInTheDocument(); expect(screen.getByText('Estimated net worth')).toBeInTheDocument(); - expect(screen.getByText('Financial information')).toBeInTheDocument(); expect(screen.getByText('Industry of employment')).toBeInTheDocument(); expect(screen.getByText('Level of education')).toBeInTheDocument(); expect(screen.getByText('Net annual income')).toBeInTheDocument(); expect(screen.getByText('Occupation')).toBeInTheDocument(); expect(screen.getByText('Source of income')).toBeInTheDocument(); expect(screen.getByText('Source of wealth')).toBeInTheDocument(); - expect(screen.getByText("We're legally obliged to ask for your financial information.")).toBeInTheDocument(); - - expect(screen.getByText('CFD trading experience')).toBeInTheDocument(); - expect(screen.getByText('CFD trading frequency')).toBeInTheDocument(); - expect(screen.getByText('Digital options trading experience')).toBeInTheDocument(); - expect(screen.getByText('Digital options trading frequency')).toBeInTheDocument(); - expect(screen.getByText('Experience with trading other financial instruments')).toBeInTheDocument(); - expect(screen.getByText('Forex trading experience')).toBeInTheDocument(); - expect(screen.getByText('Forex trading frequency')).toBeInTheDocument(); - expect(screen.getByText('Tell us about your trading experience.')).toBeInTheDocument(); - expect(screen.getByText('Trading experience')).toBeInTheDocument(); - }; - - const fieldsNotRenderCheck = () => { - expect(screen.queryByText('Employment Status')).not.toBeInTheDocument(); - expect(screen.queryByText('Financial information')).not.toBeInTheDocument(); - expect(screen.queryByText('Forex trading experience')).not.toBeInTheDocument(); - expect(screen.queryByText('Tell us about your trading experience.')).not.toBeInTheDocument(); - expect(screen.queryByText('Trading experience')).not.toBeInTheDocument(); - expect( - screen.queryByText("We're legally obliged to ask for your financial information.") - ).not.toBeInTheDocument(); }; it('should render "FinancialDetails" for desktop', () => { - const { container } = render(); + render(); fieldsRenderCheck(); const inputs = screen.getAllByTestId('dti_dropdown_display'); - expect(inputs.length).toBe(17); + expect(inputs.length).toBe(8); - expect(container.querySelector('.dc-form-submit-button')).toBeInTheDocument(); - expect(container.querySelector('.dc-modal-footer')).toBeInTheDocument(); expect(screen.getByText('Next')).toBeInTheDocument(); expect(screen.getByText('Previous')).toBeInTheDocument(); }); @@ -154,15 +92,13 @@ describe('', () => { isDesktop.mockReturnValue(false); isMobile.mockReturnValue(true); - const { container } = render(); + render(); fieldsRenderCheck(); const inputs = screen.getAllByRole('combobox'); - expect(inputs.length).toBe(17); + expect(inputs.length).toBe(8); - expect(container.querySelector('.dc-form-submit-button')).toBeInTheDocument(); - expect(container.querySelector('.dc-modal-footer')).not.toBeInTheDocument(); expect(screen.getByText('Next')).toBeInTheDocument(); expect(screen.getByText('Previous')).toBeInTheDocument(); }); @@ -190,57 +126,25 @@ describe('', () => { const select_inputs = screen.getAllByRole('combobox'); const account_turnover_select = select_inputs.find(option => option.name === 'account_turnover'); - const binary_options_trading_experience_select = select_inputs.find( - option => option.name === 'binary_options_trading_experience' - ); - const binary_options_trading_frequency_select = select_inputs.find( - option => option.name === 'binary_options_trading_frequency' - ); - const cfd_trading_experience_select = select_inputs.find(option => option.name === 'cfd_trading_experience'); - const cfd_trading_frequency_select = select_inputs.find(option => option.name === 'cfd_trading_frequency'); + const education_level_select = select_inputs.find(option => option.name === 'education_level'); const employment_indystry_select = select_inputs.find(option => option.name === 'employment_industry'); - const employment_status_select = select_inputs.find(option => option.name === 'employment_status'); const estimated_worth_select = select_inputs.find(option => option.name === 'estimated_worth'); - const forex_trading_experience_select = select_inputs.find( - option => option.name === 'forex_trading_experience' - ); - const forex_trading_frequency_select = select_inputs.find(option => option.name === 'forex_trading_frequency'); const income_source_select = select_inputs.find(option => option.name === 'income_source'); const net_income_select = select_inputs.find(option => option.name === 'net_income'); const occuppation_select = select_inputs.find(option => option.name === 'occupation'); - const other_instruments_trading_experience_select = select_inputs.find( - option => option.name === 'other_instruments_trading_experience' - ); - const other_instruments_trading_frequency_select = select_inputs.find( - option => option.name === 'other_instruments_trading_frequency' - ); + const source_of_wealth_select = select_inputs.find(option => option.name === 'source_of_wealth'); fireEvent.change(account_turnover_select, { target: { value: 'account turnover 1' } }); - fireEvent.change(binary_options_trading_experience_select, { - target: { value: 'binary options trading experience 2' }, - }); - fireEvent.change(binary_options_trading_frequency_select, { - target: { value: 'binary options trading frequency 2' }, - }); - fireEvent.change(cfd_trading_experience_select, { target: { value: 'cfd trading experience 1' } }); - fireEvent.change(cfd_trading_frequency_select, { target: { value: 'cfd trading frequency 2' } }); + fireEvent.change(education_level_select, { target: { value: 'education level 2' } }); fireEvent.change(employment_indystry_select, { target: { value: 'employment industry 1' } }); - fireEvent.change(employment_status_select, { target: { value: 'employment status 2' } }); fireEvent.change(estimated_worth_select, { target: { value: 'estimated worth 2' } }); - fireEvent.change(forex_trading_experience_select, { target: { value: 'forex trading experience 2' } }); - fireEvent.change(forex_trading_frequency_select, { target: { value: 'forex trading frequency 1' } }); fireEvent.change(income_source_select, { target: { value: 'income source 1' } }); fireEvent.change(net_income_select, { target: { value: 'net income 1' } }); fireEvent.change(occuppation_select, { target: { value: 'occupation 2' } }); - fireEvent.change(other_instruments_trading_experience_select, { - target: { value: 'other instruments trading experience 1' }, - }); - fireEvent.change(other_instruments_trading_frequency_select, { - target: { value: 'other instruments trading frequency 2' }, - }); + fireEvent.change(source_of_wealth_select, { target: { value: 'source of wealth 1' } }); const btns = screen.getAllByRole('button'); diff --git a/packages/account/src/Components/financial-details/financial-details.jsx b/packages/account/src/Components/financial-details/financial-details.jsx index f4942f8c960f..84c00ecac42f 100644 --- a/packages/account/src/Components/financial-details/financial-details.jsx +++ b/packages/account/src/Components/financial-details/financial-details.jsx @@ -1,35 +1,31 @@ +import classNames from 'classnames'; import { Formik } from 'formik'; import React from 'react'; -import { AutoHeightWrapper, Div100vhContainer, FormSubmitButton, Modal, ThemedScrollbars } from '@deriv/components'; - -import { localize } from '@deriv/translations'; +import { + AutoHeightWrapper, + Div100vhContainer, + FormSubmitButton, + Modal, + Text, + ThemedScrollbars, +} from '@deriv/components'; import { isDesktop, isMobile } from '@deriv/shared'; +import { Localize, localize } from '@deriv/translations'; import { AccountTurnover, - BinaryOptionsTradingExperience, - BinaryOptionsTradingFrequency, - CFDTradingExperience, - CFDTradingFrequency, + IncomeSource, EducationLevel, EmploymentIndustry, - EmploymentStatus, EstimatedWorth, - ForexTradingExperience, - ForexTradingFrequency, - IncomeSource, NetIncome, Occupation, - OtherInstrumentsTradingExperience, - OtherInstrumentsTradingFrequency, SourceOfWealth, } from './financial-details-partials'; -import FormSubHeader from '../form-sub-header'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; const FinancialInformation = ({ shared_props, income_source_enum, - employment_status_enum, employment_industry_enum, occupation_enum, source_of_wealth_enum, @@ -39,13 +35,7 @@ const FinancialInformation = ({ account_turnover_enum, }) => ( - - @@ -56,46 +46,6 @@ const FinancialInformation = ({ ); -const TradingExperience = ({ - shared_props, - forex_trading_experience_enum, - forex_trading_frequency_enum, - binary_options_trading_experience_enum, - binary_options_trading_frequency_enum, - cfd_trading_experience_enum, - cfd_trading_frequency_enum, - other_instruments_trading_experience_enum, - other_instruments_trading_frequency_enum, -}) => ( - - - - - - - - - - - -); - const FinancialDetails = props => { const handleCancel = values => { const current_step = props.getCurrentStep() - 1; @@ -132,16 +82,26 @@ const FinancialDetails = props => { {({ setRef, height }) => (
+ + + -
+
{ estimated_worth_enum={props.estimated_worth_enum} account_turnover_enum={props.account_turnover_enum} /> -
diff --git a/packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx b/packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx index c09cabd55974..83c9c33e28f7 100644 --- a/packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx +++ b/packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx @@ -1,17 +1,21 @@ -import React from 'react'; +import { render, screen } from '@testing-library/react'; + import { BrowserRouter } from 'react-router-dom'; -import { screen, render } from '@testing-library/react'; +import { Button } from '@deriv/components'; import { NeedsReview } from '../needs-review'; +import React from 'react'; jest.mock('Components/poa/continue-trading-button/continue-trading-button', () => ({ ContinueTradingButton: jest.fn(() =>
ContinueTradingButton
), })); +const mock_redirection_btn = ; + describe('', () => { it('should render NeedsReview component if it does not need poi', () => { render( - + ); @@ -23,19 +27,20 @@ describe('', () => { it('should render NeedsReview component if it does not need poi and is_description_enabled', () => { render( - + ); expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument(); expect(screen.getByText('Your document is being reviewed, please check back in 1-3 days.')).toBeInTheDocument(); expect(screen.queryByText('ContinueTradingButton')).not.toBeInTheDocument(); + expect(screen.getByRole('button')).toBeInTheDocument(); }); it('should render NeedsReview component if it needs poi', () => { render( - + ); @@ -43,18 +48,4 @@ describe('', () => { expect(screen.getByText('Your document is being reviewed, please check back in 1-3 days.')).toBeInTheDocument(); expect(screen.getByText('You must also submit a proof of identity.')).toBeInTheDocument(); }); - - it('should render NeedsReview component if it needs poi and is_description_enabled false', () => { - render( - - - - ); - - expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument(); - expect( - screen.queryByText('Your document is being reviewed, please check back in 1-3 days.') - ).not.toBeInTheDocument(); - expect(screen.queryByText('You must also submit a proof of identity.')).not.toBeInTheDocument(); - }); }); diff --git a/packages/account/src/Components/poa/status/needs-review/needs-review.tsx b/packages/account/src/Components/poa/status/needs-review/needs-review.tsx index 6a1d1d6f34de..afb43f1b755e 100644 --- a/packages/account/src/Components/poa/status/needs-review/needs-review.tsx +++ b/packages/account/src/Components/poa/status/needs-review/needs-review.tsx @@ -1,12 +1,13 @@ import { Icon, Text } from '@deriv/components'; -import { localize } from '@deriv/translations'; -import React from 'react'; + +import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; import IconMessageContent from 'Components/icon-message-content'; import PoiButton from 'Components/poi/poi-button'; -import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; +import React from 'react'; import { TPoaStatusProps } from 'Types'; +import { localize } from '@deriv/translations'; -export const NeedsReview = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => { +export const NeedsReview = ({ needs_poi, redirect_button }: TPoaStatusProps) => { const message = localize('Your proof of address was submitted successfully'); if (!needs_poi) { return ( @@ -15,25 +16,21 @@ export const NeedsReview = ({ needs_poi, is_description_enabled = true }: TPoaSt text={localize('Your document is being reviewed, please check back in 1-3 days.')} icon={} > - {is_description_enabled && } + {redirect_button || } ); } return ( }> - {is_description_enabled && ( - -
- - {localize('Your document is being reviewed, please check back in 1-3 days.')} - - - {localize('You must also submit a proof of identity.')} - -
- -
- )} +
+ + {localize('Your document is being reviewed, please check back in 1-3 days.')} + + + {localize('You must also submit a proof of identity.')} + +
+
); }; diff --git a/packages/account/src/Components/poa/status/submitted/submitted.tsx b/packages/account/src/Components/poa/status/submitted/submitted.tsx index b83fe43a9245..ba43adde2ee5 100644 --- a/packages/account/src/Components/poa/status/submitted/submitted.tsx +++ b/packages/account/src/Components/poa/status/submitted/submitted.tsx @@ -8,7 +8,7 @@ import { ContinueTradingButton } from 'Components/poa/continue-trading-button/co import PoiButton from 'Components/poi/poi-button'; import IconMessageContent from 'Components/icon-message-content'; -export const Submitted = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => { +export const Submitted = ({ needs_poi, redirect_button }: TPoaStatusProps) => { const { is_appstore }: TPlatformContext = React.useContext(PlatformContext); const message = localize('Your documents were submitted successfully'); if (needs_poi) { @@ -48,7 +48,7 @@ export const Submitted = ({ needs_poi, is_description_enabled = true }: TPoaStat icon={} full_width={is_appstore} > - {!is_description_enabled && } + {redirect_button || }
); diff --git a/packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx b/packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx index e973d9463ef1..a89f6b73c86f 100644 --- a/packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx +++ b/packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx @@ -1,5 +1,7 @@ +import { render, screen } from '@testing-library/react'; + +import { Button } from '@deriv/components'; import React from 'react'; -import { screen, render } from '@testing-library/react'; import { Verified } from '../verified'; jest.mock('Components/poa/continue-trading-button/continue-trading-button', () => ({ @@ -9,30 +11,34 @@ jest.mock('Components/poi/poi-button/poi-button', () => ({ PoiButton: jest.fn(() =>
PoiButton
), })); +const mock_redirection_btn = ; + describe('', () => { const message = 'Your proof of address is verified'; const needs_poi_msg = 'To continue trading, you must also submit a proof of identity.'; it('should render Verified component without needs_poi', () => { - render(); + render(); expect(screen.getByText(message)).toBeInTheDocument(); expect(screen.queryByText('ContinueTradingButton')).not.toBeInTheDocument(); expect(screen.queryByText(needs_poi_msg)).not.toBeInTheDocument(); expect(screen.queryByText('PoiButton')).not.toBeInTheDocument(); + expect(screen.queryByRole('button')).toBeInTheDocument(); }); it('should render Verified component without needs_poi and is_description_enabled', () => { - render(); + render(); expect(screen.getByText('ContinueTradingButton')).toBeInTheDocument(); expect(screen.getByText(message)).toBeInTheDocument(); expect(screen.queryByText(needs_poi_msg)).not.toBeInTheDocument(); expect(screen.queryByText('PoiButton')).not.toBeInTheDocument(); + expect(screen.queryByRole('button')).not.toBeInTheDocument(); }); it('should render Verified component with needs_poi', () => { - render(); + render(); expect(screen.getByText(message)).toBeInTheDocument(); expect(screen.getByText(needs_poi_msg)).toBeInTheDocument(); diff --git a/packages/account/src/Components/poa/status/verified/verified.tsx b/packages/account/src/Components/poa/status/verified/verified.tsx index 87b07b969439..f6dff5cbc5eb 100644 --- a/packages/account/src/Components/poa/status/verified/verified.tsx +++ b/packages/account/src/Components/poa/status/verified/verified.tsx @@ -1,14 +1,15 @@ -import React from 'react'; -import classNames from 'classnames'; +import { TPlatformContext, TPoaStatusProps } from 'Types'; + +import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; import { Icon } from '@deriv/components'; +import IconMessageContent from 'Components/icon-message-content'; import { PlatformContext } from '@deriv/shared'; -import { localize } from '@deriv/translations'; -import { TPlatformContext, TPoaStatusProps } from 'Types'; import { PoiButton } from 'Components/poi/poi-button/poi-button'; -import IconMessageContent from 'Components/icon-message-content'; -import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; +import React from 'react'; +import classNames from 'classnames'; +import { localize } from '@deriv/translations'; -export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => { +export const Verified = ({ needs_poi, redirect_button }: TPoaStatusProps) => { const { is_appstore }: TPlatformContext = React.useContext(PlatformContext); const message = localize('Your proof of address is verified'); @@ -23,7 +24,7 @@ export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatu message={message} text={localize('To continue trading, you must also submit a proof of identity.')} icon={} - className={is_appstore && 'account-management-dashboard'} + className={classNames({ 'account-management-dashboard': is_appstore })} > @@ -39,9 +40,9 @@ export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatu } - className={is_appstore && 'account-management-dashboard'} + className={classNames({ 'account-management-dashboard': is_appstore })} > - {!is_description_enabled && } + {redirect_button || } ); diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx index 29b6f4af7152..df4fc25a1a2c 100644 --- a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx +++ b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx @@ -1,15 +1,16 @@ +import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg'; +import PoaButton from 'Components/poa/poa-button'; import React from 'react'; import { Text } from '@deriv/components'; import { localize } from '@deriv/translations'; -import PoaButton from 'Components/poa/poa-button'; -import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg'; type TIdvSubmitComplete = { needs_poa: boolean; is_from_external: boolean; + redirect_button: React.ReactNode; }; -const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete) => { +const IdvSubmitComplete = ({ needs_poa, is_from_external, redirect_button }: TIdvSubmitComplete) => { const poa_button = !is_from_external && ; return ( @@ -21,13 +22,15 @@ const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete) {localize('We’ll review your documents and notify you of its status within 5 minutes.')} - {!!needs_poa && ( + {needs_poa ? ( {localize("Next, we'll need your proof of address.")} {poa_button} + ) : ( + redirect_button )} ); diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx b/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx index 6a29cb45b6d3..91cfe3c5af21 100644 --- a/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx +++ b/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx @@ -1,16 +1,17 @@ +import IdvDocumentVerified from 'Assets/ic-idv-verified.svg'; +import PoaButton from 'Components/poa/poa-button'; import React from 'react'; import { Text } from '@deriv/components'; import { isMobile } from '@deriv/shared'; import { localize } from '@deriv/translations'; -import PoaButton from 'Components/poa/poa-button'; -import IdvDocumentVerified from 'Assets/ic-idv-verified.svg'; type TIdvVerified = { needs_poa: boolean; is_from_external: boolean; + redirect_button: React.ReactNode; }; -const IdvVerified = ({ needs_poa, is_from_external }: Partial) => { +const IdvVerified = ({ needs_poa, is_from_external, redirect_button }: Partial) => { const header_Text = needs_poa ? localize('Your ID is verified. You will also need to submit proof of your address.') : localize('ID verification passed'); @@ -21,7 +22,7 @@ const IdvVerified = ({ needs_poa, is_from_external }: Partial) => {header_Text} - {!!needs_poa && ( + {needs_poa ? ( {!isMobile() && ( @@ -30,6 +31,8 @@ const IdvVerified = ({ needs_poa, is_from_external }: Partial) => )} {!is_from_external && } + ) : ( + redirect_button )} ); diff --git a/packages/account/src/Components/poi/status/unsupported/unsupported.jsx b/packages/account/src/Components/poi/status/unsupported/unsupported.jsx index cd9c65d01199..42252106bba5 100644 --- a/packages/account/src/Components/poi/status/unsupported/unsupported.jsx +++ b/packages/account/src/Components/poi/status/unsupported/unsupported.jsx @@ -41,7 +41,8 @@ const Unsupported = ({ }); if (manual) { - if (manual.status === identity_status_codes.pending) return ; + if (manual.status === identity_status_codes.pending) + return ; else if ([identity_status_codes.rejected, identity_status_codes.suspected].includes(manual.status)) { if (!allow_poi_resubmission) return ; } else if (manual.status === identity_status_codes.verified) { diff --git a/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js b/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js index a9a81e3b0846..ae5f577e56ef 100644 --- a/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js +++ b/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js @@ -1,6 +1,7 @@ -import React from 'react'; -import { screen, render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; + import { Button } from '@deriv/components'; +import React from 'react'; import { Verified } from '../verified'; jest.mock('Components/poa/poa-button', () => () =>
); @@ -35,6 +36,5 @@ describe('', () => { render(); expect(screen.getByTestId('poa-button')).toBeInTheDocument(); expect(screen.getByText(needs_poa_msg)).toBeInTheDocument(); - expect(screen.getByRole('button')).toBeInTheDocument(); }); }); diff --git a/packages/account/src/Components/poi/status/verified/verified.jsx b/packages/account/src/Components/poi/status/verified/verified.jsx index 4f245d233dca..5352fe77fe65 100644 --- a/packages/account/src/Components/poi/status/verified/verified.jsx +++ b/packages/account/src/Components/poi/status/verified/verified.jsx @@ -1,10 +1,10 @@ -import React from 'react'; -import { PropTypes } from 'prop-types'; import { Icon } from '@deriv/components'; +import IconMessageContent from 'Components/icon-message-content'; import { PlatformContext } from '@deriv/shared'; -import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; -import IconMessageContent from 'Components/icon-message-content'; +import { PropTypes } from 'prop-types'; +import React from 'react'; +import { localize } from '@deriv/translations'; export const Verified = ({ needs_poa, redirect_button, is_from_external }) => { const { is_appstore } = React.useContext(PlatformContext); @@ -42,7 +42,6 @@ export const Verified = ({ needs_poa, redirect_button, is_from_external }) => { {!is_from_external && ( - {redirect_button} )} diff --git a/packages/account/src/Configs/financial-details-config.js b/packages/account/src/Configs/financial-details-config.js index bc75d64d2d73..add28fee0b9d 100644 --- a/packages/account/src/Configs/financial-details-config.js +++ b/packages/account/src/Configs/financial-details-config.js @@ -8,51 +8,16 @@ const financial_details_config = ({ financial_assessment }) => { default_value: financial_assessment?.account_turnover ?? '', rules: [['req', localize('Please select an option')]], }, - binary_options_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.binary_options_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - binary_options_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.binary_options_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, - cfd_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.cfd_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - cfd_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.cfd_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, education_level: { supported_in: ['maltainvest'], default_value: financial_assessment?.education_level ?? '', rules: [['req', localize('Please select an option')]], }, - forex_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.forex_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - forex_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.forex_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, employment_industry: { default_value: financial_assessment?.employment_industry ?? '', supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, - employment_status: { - default_value: financial_assessment?.employment_status ?? '', - supported_in: ['maltainvest'], - rules: [['req', localize('Please select an option')]], - }, estimated_worth: { default_value: financial_assessment?.estimated_worth ?? '', supported_in: ['maltainvest'], @@ -73,16 +38,6 @@ const financial_details_config = ({ financial_assessment }) => { supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, - other_instruments_trading_experience: { - default_value: financial_assessment?.other_instruments_trading_experience ?? '', - supported_in: ['maltainvest'], - rules: [['req', localize('Please select an option')]], - }, - other_instruments_trading_frequency: { - default_value: financial_assessment?.other_instruments_trading_frequency ?? '', - supported_in: ['maltainvest'], - rules: [['req', localize('Please select an option')]], - }, source_of_wealth: { default_value: financial_assessment?.source_of_wealth ?? '', supported_in: ['maltainvest'], diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index c73127c7911f..2eeac703c48e 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -1,4 +1,5 @@ -import { toMoment, getErrorMessages, generateValidationFunction, getDefaultFields, validLength } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, getErrorMessages, toMoment, validLength } from '@deriv/shared'; + import { localize } from '@deriv/translations'; const personal_details_config = ({ residence_list, account_settings, is_appstore, real_account_signup_target }) => { diff --git a/packages/account/src/Configs/trading-assessment-config.js b/packages/account/src/Configs/trading-assessment-config.js index 73757603aac9..30124a640a64 100644 --- a/packages/account/src/Configs/trading-assessment-config.js +++ b/packages/account/src/Configs/trading-assessment-config.js @@ -316,7 +316,7 @@ const tradingAssessmentConfig = ( props: { validate: generateValidationFunction(real_account_signup_target, trading_assessment_form_config), assessment_questions: trading_assessment_questions(), - disabled_items: account_settings.immutable_fields, + disabled_items: account_settings?.immutable_fields, setSubSectionIndex, }, sub_step_count: trading_assessment_questions().length, diff --git a/packages/account/src/Containers/account.jsx b/packages/account/src/Containers/account.jsx index aae57fba274d..35229f566c25 100644 --- a/packages/account/src/Containers/account.jsx +++ b/packages/account/src/Containers/account.jsx @@ -1,14 +1,15 @@ +import 'Styles/account.scss'; + +import { FadeWrapper, Icon, Loading, PageOverlay, Text, VerticalTab } from '@deriv/components'; +import { PlatformContext, getSelectedRoute, isMobile, matchRoute, routes as shared_routes } from '@deriv/shared'; +import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx'; import PropTypes from 'prop-types'; import React from 'react'; -import { withRouter } from 'react-router-dom'; -import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text, Icon } from '@deriv/components'; -import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared'; -import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import { flatten } from '../Helpers/flatten'; -import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx'; -import 'Styles/account.scss'; +import { localize } from '@deriv/translations'; import { useHistory } from 'react-router'; +import { withRouter } from 'react-router-dom'; const AccountLogout = ({ logout, history }) => { return ( @@ -51,7 +52,6 @@ const TradingHubLogout = ({ logout }) => { const PageOverlayWrapper = ({ is_from_derivgo, is_appstore, - is_pre_appstore, list_groups, logout, onClickClose, @@ -59,7 +59,7 @@ const PageOverlayWrapper = ({ subroutes, history, }) => { - const routeToPrevious = () => (is_pre_appstore ? history.push(shared_routes.traders_hub) : onClickClose()); + const routeToPrevious = () => history.push(shared_routes.traders_hub); if (isMobile() && selected_route) { return ( @@ -103,7 +103,7 @@ const PageOverlayWrapper = ({ is_full_width list={subroutes} list_groups={list_groups} - extra_content={is_pre_appstore && } + extra_content={} /> ); @@ -116,8 +116,6 @@ const Account = ({ is_from_derivgo, is_logged_in, is_logging_in, - is_pre_appstore, - is_risky_client, is_virtual, is_visible, location, @@ -145,13 +143,8 @@ const Account = ({ routes.forEach(menu_item => { menu_item.subroutes.forEach(route => { - if (route.path === shared_routes.languages) { - route.is_hidden = !is_pre_appstore; - } - if (route.path === shared_routes.financial_assessment) { - route.is_disabled = - is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); + route.is_disabled = is_virtual; } if (route.path === shared_routes.trading_assessment) { @@ -205,7 +198,6 @@ const Account = ({ ({ is_from_derivgo: common.is_from_derivgo, is_logged_in: client.is_logged_in, is_logging_in: client.is_logging_in, - is_pre_appstore: client.is_pre_appstore, - is_risky_client: client.is_risky_client, is_virtual: client.is_virtual, is_visible: ui.is_account_settings_visible, logout: client.logout, diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx index 931a3ac2b8bd..88684b5f67ba 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx @@ -365,7 +365,7 @@ const FinancialAssessment = ({ setFieldTouched, dirty, }) => ( - <> + {!is_appstore && isMobile() && is_confirmation_visible && ( )} @@ -1000,7 +1000,7 @@ const FinancialAssessment = ({ )} - + )} diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index b4da912be5b0..3c00ae233292 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -1,52 +1,52 @@ +import classNames from 'classnames'; +import { Field, Formik } from 'formik'; import PropTypes from 'prop-types'; import React from 'react'; -import { Formik, Field } from 'formik'; -import classNames from 'classnames'; +import { withRouter } from 'react-router'; import { Autocomplete, - Checkbox, Button, - FormSubmitErrorMessage, - Input, + Checkbox, + DateOfBirthPicker, DesktopWrapper, Dropdown, + FormSubmitErrorMessage, + HintBox, + Input, Loading, MobileWrapper, SelectNative, - DateOfBirthPicker, Text, useStateCallback, - HintBox, } from '@deriv/components'; import { - toMoment, - isMobile, - validAddress, - validPostCode, - validPhone, - validLetterSymbol, - validLength, + PlatformContext, + WS, + filterObjProperties, getBrandWebsiteName, getLocation, - removeObjProperties, - filterObjProperties, - PlatformContext, + isMobile, regex_checks, + removeObjProperties, routes, - WS, + toMoment, useIsMounted, + validAddress, + validLength, + validLetterSymbol, validName, + validPhone, + validPostCode, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; -import { withRouter } from 'react-router'; -import { connect } from 'Stores/connect'; -import LeaveConfirm from 'Components/leave-confirm'; -import FormFooter from 'Components/form-footer'; import FormBody from 'Components/form-body'; import FormBodySection from 'Components/form-body-section'; +import FormFooter from 'Components/form-footer'; import FormSubHeader from 'Components/form-sub-header'; +import LeaveConfirm from 'Components/leave-confirm'; import LoadErrorMessage from 'Components/load-error-message'; import POAAddressMismatchHintBox from 'Components/poa-address-mismatch-hint-box'; +import { connect } from 'Stores/connect'; import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list'; const validate = (errors, values) => (fn, arr, err_msg) => { @@ -298,14 +298,7 @@ export const PersonalDetailsForm = ({ if (is_virtual) return errors; - const required_fields = [ - 'first_name', - 'last_name', - 'phone', - // 'account_opening_reason', - 'address_line_1', - 'address_city', - ]; + const required_fields = ['first_name', 'last_name', 'phone', 'address_line_1', 'address_city']; if (is_eu) { required_fields.push('citizen'); } @@ -892,32 +885,6 @@ export const PersonalDetailsForm = ({ )} - {/* Hide Account Opening Reason, uncomment block below to re-enable */} - {/*
*/} - {/* {account_opening_reason && is_fully_authenticated ? ( */} - {/* */} - {/* ) : ( */} - {/* */} - {/* )} */} - {/*
*/} {is_mf && ( @@ -1307,7 +1274,6 @@ export const PersonalDetailsForm = ({ (is_mf && !values.tax_identification_number) || (!is_svg && errors.place_of_birth) || (!is_svg && !values.place_of_birth) || - // (errors.account_opening_reason || !values.account_opening_reason) || errors.address_line_1 || !values.address_line_1 || errors.address_line_2 || diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.jsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.jsx index 50eeca125808..8f2ae80a64af 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.jsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.jsx @@ -1,18 +1,26 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Loading, useStateCallback } from '@deriv/components'; -import { WS } from '@deriv/shared'; +import { Button, Loading, useStateCallback } from '@deriv/components'; +import { WS, getPlatformRedirect, platforms } from '@deriv/shared'; + import Expired from 'Components/poa/status/expired'; -import Unverified from 'Components/poa/status/unverified'; +import { Localize } from '@deriv/translations'; import NeedsReview from 'Components/poa/status/needs-review'; -import Submitted from 'Components/poa/status/submitted'; -import Verified from 'Components/poa/status/verified'; import NotRequired from 'Components/poa/status/not-required'; import PoaStatusCodes from 'Components/poa/status/status-codes'; import ProofOfAddressForm from './proof-of-address-form.jsx'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Submitted from 'Components/poa/status/submitted'; +import Unverified from 'Components/poa/status/unverified'; +import Verified from 'Components/poa/status/verified'; import { populateVerificationStatus } from '../Helpers/verification'; -const ProofOfAddressContainer = ({ is_mx_mlt, is_switching, has_restricted_mt5_account, refreshNotifications }) => { +const ProofOfAddressContainer = ({ + is_mx_mlt, + is_switching, + has_restricted_mt5_account, + refreshNotifications, + app_routing_history, +}) => { const [is_loading, setIsLoading] = React.useState(true); const [authentication_status, setAuthenticationStatus] = useStateCallback({ allow_document_upload: false, @@ -81,13 +89,30 @@ const ProofOfAddressContainer = ({ is_mx_mlt, is_switching, has_restricted_mt5_a is_age_verified, } = authentication_status; + const from_platform = getPlatformRedirect(app_routing_history); + + const should_show_redirect_btn = Object.keys(platforms).includes(from_platform.ref); + + const redirect_button = should_show_redirect_btn ? ( + + ) : null; + if (is_loading) return ; if ( !allow_document_upload || (!is_age_verified && !allow_poa_resubmission && document_status === 'none' && is_mx_mlt) ) return ; - if (has_submitted_poa) return ; + if (has_submitted_poa) return ; if ( resubmit_poa || allow_poa_resubmission || @@ -100,13 +125,12 @@ const ProofOfAddressContainer = ({ is_mx_mlt, is_switching, has_restricted_mt5_a case PoaStatusCodes.none: return onSubmit({ needs_poi })} />; case PoaStatusCodes.pending: - return ; + return ; case PoaStatusCodes.verified: - return ; + return ; case PoaStatusCodes.expired: return ; case PoaStatusCodes.rejected: - return ; case PoaStatusCodes.suspected: return ; default: diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx index e924cf403c0b..7d558e882487 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx @@ -1,11 +1,18 @@ -import React from 'react'; -import { PropTypes } from 'prop-types'; -import { PlatformContext } from '@deriv/shared'; -import { connect } from 'Stores/connect'; import DemoMessage from 'Components/demo-message'; +import { PlatformContext } from '@deriv/shared'; import ProofOfAddressContainer from './proof-of-address-container.jsx'; +import { PropTypes } from 'prop-types'; +import React from 'react'; +import { connect } from 'Stores/connect'; -const ProofOfAddress = ({ is_virtual, is_mx_mlt, is_switching, has_restricted_mt5_account, refreshNotifications }) => { +const ProofOfAddress = ({ + is_virtual, + is_mx_mlt, + is_switching, + has_restricted_mt5_account, + refreshNotifications, + app_routing_history, +}) => { const { is_appstore } = React.useContext(PlatformContext); if (is_virtual) return ; @@ -15,6 +22,7 @@ const ProofOfAddress = ({ is_virtual, is_mx_mlt, is_switching, has_restricted_mt is_switching={is_switching} refreshNotifications={refreshNotifications} has_restricted_mt5_account={has_restricted_mt5_account} + app_routing_history={app_routing_history} /> ); }; @@ -27,10 +35,11 @@ ProofOfAddress.propTypes = { has_restricted_mt5_account: PropTypes.bool, }; -export default connect(({ client, notifications }) => ({ +export default connect(({ client, notifications, common }) => ({ is_mx_mlt: client.landing_company_shortcode === 'iom' || client.landing_company_shortcode === 'malta', is_switching: client.is_switching, is_virtual: client.is_virtual, refreshNotifications: notifications.refreshNotifications, has_restricted_mt5_account: client.has_restricted_mt5_account, + app_routing_history: common.app_routing_history, }))(ProofOfAddress); diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/idv.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/idv.jsx index 5ec573be7293..275d95e6a408 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/idv.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/idv.jsx @@ -1,9 +1,9 @@ -import React from 'react'; -import IdvSubmitComplete from 'Components/poi/idv-status/idv-submit-complete'; import IdvExpired from 'Components/poi/idv-status/idv-expired'; -import IdvVerified from 'Components/poi/idv-status/idv-verified'; -import IdvRejected from 'Components/poi/idv-status/idv-rejected'; import IdvNoSubmissions from 'Components/poi/idv-status/idv-limited'; +import IdvRejected from 'Components/poi/idv-status/idv-rejected'; +import IdvSubmitComplete from 'Components/poi/idv-status/idv-submit-complete'; +import IdvVerified from 'Components/poi/idv-status/idv-verified'; +import React from 'react'; import { identity_status_codes } from './proof-of-identity-utils'; const Idv = ({ handleRequireSubmission, idv, is_from_external, needs_poa, redirect_button }) => { @@ -11,7 +11,13 @@ const Idv = ({ handleRequireSubmission, idv, is_from_external, needs_poa, redire switch (status) { case identity_status_codes.pending: - return ; + return ( + + ); case identity_status_codes.rejected: case identity_status_codes.suspected: if (Number(submissions_left) < 1) diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx index a88ff838b49c..435f9fbdee47 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx @@ -1,21 +1,22 @@ -import React from 'react'; import { Button, Loading } from '@deriv/components'; -import { getPlatformRedirect, WS } from '@deriv/shared'; -import { Localize } from '@deriv/translations'; -import { useHistory } from 'react-router'; +import { WS, getPlatformRedirect, platforms } from '@deriv/shared'; +import { identity_status_codes, service_code } from './proof-of-identity-utils'; + import DemoMessage from 'Components/demo-message'; import ErrorMessage from 'Components/error-component'; +import Expired from 'Components/poi/status/expired'; +import IdvContainer from './idv.jsx'; +import Limited from 'Components/poi/status/limited'; +import { Localize } from '@deriv/translations'; import NotRequired from 'Components/poi/status/not-required'; +import Onfido from './onfido.jsx'; +import POISubmission from './proof-of-identity-submission.jsx'; +import React from 'react'; import Unsupported from 'Components/poi/status/unsupported'; -import Verified from 'Components/poi/status/verified'; -import Limited from 'Components/poi/status/limited'; -import Expired from 'Components/poi/status/expired'; import UploadComplete from 'Components/poi/status/upload-complete'; -import POISubmission from './proof-of-identity-submission.jsx'; -import Onfido from './onfido.jsx'; -import IdvContainer from './idv.jsx'; -import { identity_status_codes, service_code } from './proof-of-identity-utils'; +import Verified from 'Components/poi/status/verified'; import { populateVerificationStatus } from '../Helpers/verification'; +import { useHistory } from 'react-router'; const ProofOfIdentityContainer = ({ account_status, @@ -40,7 +41,8 @@ const ProofOfIdentityContainer = ({ const [is_status_loading, setStatusLoading] = React.useState(true); const from_platform = getPlatformRedirect(app_routing_history); - const should_show_redirect_btn = from_platform.name === 'P2P'; + + const should_show_redirect_btn = Object.keys(platforms).includes(from_platform.ref); const routeBackTo = redirect_route => routeBackInApp(history, [redirect_route]); const handleRequireSubmission = () => setHasRequireSubmission(true); @@ -96,11 +98,22 @@ const ProofOfIdentityContainer = ({ return ; } - const redirect_button = should_show_redirect_btn && ( - - ); + ) : null; if ( identity_status === identity_status_codes.none || diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx index 7d4916921144..5d076cd3e974 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx @@ -1,9 +1,9 @@ -import React from 'react'; -import { withRouter } from 'react-router-dom'; import { AutoHeightWrapper } from '@deriv/components'; +import ProofOfIdentityContainer from './proof-of-identity-container.jsx'; +import React from 'react'; import { changeMetaTagWithOG } from '@deriv/shared'; import { connect } from 'Stores/connect'; -import ProofOfIdentityContainer from './proof-of-identity-container.jsx'; +import { withRouter } from 'react-router-dom'; const ProofOfIdentity = ({ account_status, diff --git a/packages/account/src/Types/common-prop.type.ts b/packages/account/src/Types/common-prop.type.ts index cba426f1f720..9bf2066e33e3 100644 --- a/packages/account/src/Types/common-prop.type.ts +++ b/packages/account/src/Types/common-prop.type.ts @@ -1,7 +1,8 @@ /** Add types that are shared between components */ +import { InferProps, Requireable } from 'prop-types'; + import { Authorize } from '@deriv/api-types'; -import { Requireable, InferProps } from 'prop-types'; import { Redirect } from 'react-router-dom'; export type TToken = { @@ -13,7 +14,7 @@ export type TToken = { export type TPoaStatusProps = { needs_poi: boolean; - is_description_enabled?: boolean; + redirect_button: React.ReactNode; }; export type TAuthAccountInfo = NonNullable[0] & { @@ -93,7 +94,6 @@ export type TRouteConfig = TRoute & { }; export type TBinaryRoutes = { - is_pre_appstore: boolean; is_logged_in: boolean; is_logging_in: boolean; }; diff --git a/packages/api/package.json b/packages/api/package.json index 5b52f9157912..469cea5c7660 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -8,7 +8,7 @@ "react": "^17.0.2" }, "devDependencies": { - "@deriv/api-types": "^1.0.11", + "@deriv/api-types": "^1.0.85", "@testing-library/react": "^12.0.0", "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.5.0", diff --git a/packages/api/types.ts b/packages/api/types.ts index 8c74e4aed892..36e24f6c5204 100644 --- a/packages/api/types.ts +++ b/packages/api/types.ts @@ -1,16 +1,152 @@ import type { + ActiveSymbolsResponse, + ActiveSymbolsRequest, + APITokenRequest, + APITokenResponse, + ApplicationDeleteRequest, + ApplicationDeleteResponse, + ApplicationGetDetailsRequest, + ApplicationGetDetailsResponse, + ApplicationListRequest, + ApplicationListResponse, + ApplicationMarkupDetailsRequest, + ApplicationMarkupDetailsResponse, + ApplicationMarkupStatisticsRequest, + ApplicationMarkupStatisticsResponse, + ApplicationRegisterRequest, + ApplicationRegisterResponse, + ApplicationUpdateRequest, + ApplicationUpdateResponse, + AssetIndexRequest, + AssetIndexResponse, + AuthorizeRequest, + AuthorizeResponse, BalanceRequest, BalanceResponse, + BuyContractForMultipleAccountsRequest, + BuyContractForMultipleAccountsResponse, + BuyContractRequest, + BuyContractResponse, + CancelAContractRequest, + CancelAContractResponse, CashierInformationRequest, CashierInformationResponse, + UpdateContractHistoryRequest, + UpdateContractHistoryResponse, + UpdateContractRequest, + UpdateContractResponse, + ContractsForSymbolRequest, + ContractsForSymbolResponse, + CopyTradingStartRequest, + CopyTradingStartResponse, + CopyTradingStopRequest, + CopyTradingStopResponse, + CopyTradingListRequest, + CopyTradingListResponse, + CopyTradingStatisticsRequest, + CopyTradingStatisticsResponse, CryptocurrencyConfigurationsRequest, CryptocurrencyConfigurationsResponse, + DocumentUploadRequest, + DocumentUploadResponse, + EconomicCalendarRequest, + EconomicCalendarResponse, ExchangeRatesRequest, ExchangeRatesResponse, + ForgetAllRequest, + ForgetAllResponse, + ForgetRequest, + ForgetResponse, + AccountStatusRequest, + AccountStatusResponse, + GetFinancialAssessmentRequest, + GetFinancialAssessmentResponse, + AccountLimitsRequest, + AccountLimitsResponse, + GetSelfExclusionRequest, + GetSelfExclusionResponse, + GetAccountSettingsRequest, + GetAccountSettingsResponse, + IdentityVerificationAddDocumentRequest, + IdentityVerificationAddDocumentResponse, + LandingCompanyDetailsRequest, + LandingCompanyDetailsResponse, + LandingCompanyRequest, + LandingCompanyResponse, + LoginHistoryRequest, + LoginHistoryResponse, + LogOutRequest, + LogOutResponse, + MT5DepositRequest, + MT5DepositResponse, + MT5GetSettingRequest, + MT5GetSettingResponse, + MT5AccountsListRequest, + MT5AccountsListResponse, + MT5NewAccountRequest, + MT5NewAccountResponse, + MT5PasswordChangeRequest, + MT5PasswordChangeResponse, + MT5PasswordCheckRequest, + MT5PasswordCheckResponse, + MT5PasswordResetRequest, + MT5PasswordResetResponse, + MT5WithdrawalRequest, + MT5WithdrawalResponse, + NewRealMoneyAccountDerivInvestmentEuropeLtdRequest, + NewRealMoneyAccountDerivInvestmentEuropeLtdResponse, + NewRealMoneyAccountDefaultLandingCompanyRequest, + NewRealMoneyAccountDefaultLandingCompanyResponse, NewVirtualMoneyAccountRequest, NewVirtualMoneyAccountResponse, + OAuthApplicationsRequest, + OAuthApplicationsResponse, + P2PAdvertCreateRequest, + P2PAdvertCreateResponse, + P2PAdvertInformationRequest, + P2PAdvertInformationResponse, + P2PAdvertListRequest, + P2PAdvertListResponse, + P2PAdvertUpdateRequest, + P2PAdvertUpdateResponse, + P2PAdvertiserAdvertsRequest, + P2PAdvertiserAdvertsResponse, + P2PAdvertiserCreateRequest, + P2PAdvertiserCreateResponse, + P2PAdvertiserInformationRequest, + P2PAdvertiserInformationResponse, + P2PAdvertiserListRequest, + P2PAdvertiserListResponse, + P2PAdvertiserPaymentMethodsRequest, + P2PAdvertiserPaymentMethodsResponse, + P2PAdvertiserRelationsRequest, + P2PAdvertiserRelationsResponse, + P2PAdvertiserUpdateRequest, + P2PAdvertiserUpdateResponse, + P2PChatCreateRequest, + P2PChatCreateResponse, + P2POrderCancelRequest, + P2POrderCancelResponse, + P2POrderConfirmRequest, + P2POrderConfirmResponse, + P2POrderCreateRequest, + P2POrderCreateResponse, + P2POrderDisputeRequest, + P2POrderDisputeResponse, P2POrderInformationRequest, P2POrderInformationResponse, + P2POrderListRequest, + P2POrderListResponse, + P2POrderReviewRequest, + P2POrderReviewResponse, + P2PPaymentMethodsRequest, + P2PPaymentMethodsResponse, + P2PPingRequest, + P2PPingResponse, + PaymentMethodsRequest, + PaymentMethodsResponse, + PaymentAgentCreateRequest, + PaymentAgentCreateResponse, PaymentAgentDetailsRequest, PaymentAgentDetailsResponse, PaymentAgentListRequest, @@ -19,90 +155,524 @@ import type { PaymentAgentTransferResponse, PaymentAgentWithdrawRequest, PaymentAgentWithdrawResponse, + PayoutCurrenciesRequest, + PayoutCurrenciesResponse, PingRequest, PingResponse, - ServerStatusRequest, - ServerStatusResponse, - TermsAndConditionsApprovalRequest, - TermsAndConditionsApprovalResponse, + PortfolioRequest, + PortfolioResponse, + ProfitTableRequest, + ProfitTableResponse, + PriceProposalOpenContractsRequest, + PriceProposalOpenContractsResponse, + PriceProposalRequest, + PriceProposalResponse, + RealityCheckRequest, + RealityCheckResponse, + CountriesListResponse, + CountriesListRequest, + RevokeOauthApplicationRequest, + RevokeOauthApplicationResponse, + SellContractsMultipleAccountsRequest, + SellContractsMultipleAccountsResponse, + SellExpiredContractsRequest, + SellExpiredContractsResponse, + SellContractRequest, + SellContractResponse, + SetAccountCurrencyRequest, + SetAccountCurrencyResponse, + SetFinancialAssessmentRequest, + SetFinancialAssessmentResponse, + SetSelfExclusionRequest, + SetSelfExclusionResponse, + SetAccountSettingsRequest, + SetAccountSettingsResponse, + StatementRequest, + StatementResponse, + StatesListRequest, + StatesListResponse, + TicksHistoryRequest, + TicksHistoryResponse, TicksStreamRequest, TicksStreamResponse, + ServerTimeRequest, + ServerTimeResponse, + TermsAndConditionsApprovalRequest, + TermsAndConditionsApprovalResponse, + TopUpVirtualMoneyAccountRequest, + TopUpVirtualMoneyAccountResponse, + TradingDurationsRequest, + TradingDurationsResponse, + TradingPlatformInvestorPasswordResetRequest, + TradingPlatformInvestorPasswordResetResponse, + TradingPlatformPasswordResetRequest, + TradingPlatformPasswordResetResponse, + ServerListRequest, + ServerListResponse, + TradingTimesRequest, + TradingTimesResponse, + TransactionsStreamRequest, + TransactionsStreamResponse, TransferBetweenAccountsRequest, TransferBetweenAccountsResponse, + UnsubscribeEmailResponse, + UnsubscribeEmailRequest, + VerifyEmailCellxpertRequest, + VerifyEmailCellxpertResponse, VerifyEmailRequest, VerifyEmailResponse, - AccountStatusRequest, - AccountStatusResponse, + ServerStatusResponse, + ServerStatusRequest, } from '@deriv/api-types'; export type TSocketEndpoints = { - ping: { - request: PingRequest; - response: PingResponse; + active_symbols: { + request: ActiveSymbolsRequest; + response: ActiveSymbolsResponse; }; - verify_email: { - request: VerifyEmailRequest; - response: VerifyEmailResponse; + api_token: { + request: APITokenRequest; + response: APITokenResponse; }; - exchange_rates: { - request: ExchangeRatesRequest; - response: ExchangeRatesResponse; + app_delete: { + request: ApplicationDeleteRequest; + response: ApplicationDeleteResponse; }; - p2p_order_info: { - request: P2POrderInformationRequest; - response: P2POrderInformationResponse; + app_get: { + request: ApplicationGetDetailsRequest; + response: ApplicationGetDetailsResponse; }; - website_status: { - request: ServerStatusRequest; - response: ServerStatusResponse; + app_list: { + request: ApplicationListRequest; + response: ApplicationListResponse; }; - tnc_approval: { - request: TermsAndConditionsApprovalRequest; - response: TermsAndConditionsApprovalResponse; + app_markup_details: { + request: ApplicationMarkupDetailsRequest; + response: ApplicationMarkupDetailsResponse; + }; + app_markup_statistics: { + request: ApplicationMarkupStatisticsRequest; + response: ApplicationMarkupStatisticsResponse; + }; + app_register: { + request: ApplicationRegisterRequest; + response: ApplicationRegisterResponse; + }; + app_update: { + request: ApplicationUpdateRequest; + response: ApplicationUpdateResponse; + }; + asset_index: { + request: AssetIndexRequest; + response: AssetIndexResponse; + }; + authorize: { + request: AuthorizeRequest; + response: AuthorizeResponse; + }; + balance: { + request: BalanceRequest; + response: BalanceResponse; + }; + buy_contract_for_multiple_accounts: { + request: BuyContractForMultipleAccountsRequest; + response: BuyContractForMultipleAccountsResponse; + }; + buy: { + request: BuyContractRequest; + response: BuyContractResponse; + }; + cancel: { + request: CancelAContractRequest; + response: CancelAContractResponse; }; cashier: { request: CashierInformationRequest; response: CashierInformationResponse; }; + contract_update_history: { + request: UpdateContractHistoryRequest; + response: UpdateContractHistoryResponse; + }; + contract_update: { + request: UpdateContractRequest; + response: UpdateContractResponse; + }; + contracts_for: { + request: ContractsForSymbolRequest; + response: ContractsForSymbolResponse; + }; + copy_start: { + request: CopyTradingStartRequest; + response: CopyTradingStartResponse; + }; + copy_stop: { + request: CopyTradingStopRequest; + response: CopyTradingStopResponse; + }; + copytrading_list: { + request: CopyTradingListRequest; + response: CopyTradingListResponse; + }; + copytrading_statistics: { + request: CopyTradingStatisticsRequest; + response: CopyTradingStatisticsResponse; + }; crypto_config: { request: CryptocurrencyConfigurationsRequest; response: CryptocurrencyConfigurationsResponse; }; - paymentagent_transfer: { - request: PaymentAgentTransferRequest; - response: PaymentAgentTransferResponse; + document_upload: { + request: DocumentUploadRequest; + response: DocumentUploadResponse; }; - paymentagent_list: { - request: PaymentAgentListRequest; - response: PaymentAgentListResponse; + economic_calendar: { + request: EconomicCalendarRequest; + response: EconomicCalendarResponse; + }; + exchange_rates: { + request: ExchangeRatesRequest; + response: ExchangeRatesResponse; + }; + forget_all: { + request: ForgetAllRequest; + response: ForgetAllResponse; + }; + forget: { + request: ForgetRequest; + response: ForgetResponse; + }; + get_account_status: { + request: AccountStatusRequest; + response: AccountStatusResponse; + }; + get_financial_assessment: { + request: GetFinancialAssessmentRequest; + response: GetFinancialAssessmentResponse; + }; + get_limits: { + request: AccountLimitsRequest; + response: AccountLimitsResponse; + }; + get_self_exclusion: { + request: GetSelfExclusionRequest; + response: GetSelfExclusionResponse; + }; + get_settings: { + request: GetAccountSettingsRequest; + response: GetAccountSettingsResponse; + }; + identity_verification_document_add: { + request: IdentityVerificationAddDocumentRequest; + response: IdentityVerificationAddDocumentResponse; + }; + landing_company_details: { + request: LandingCompanyDetailsRequest; + response: LandingCompanyDetailsResponse; + }; + landing_company: { + request: LandingCompanyRequest; + response: LandingCompanyResponse; + }; + login_history: { + request: LoginHistoryRequest; + response: LoginHistoryResponse; + }; + logout: { + request: LogOutRequest; + response: LogOutResponse; + }; + mt5_deposit: { + request: MT5DepositRequest; + response: MT5DepositResponse; + }; + mt5_get_settings: { + request: MT5GetSettingRequest; + response: MT5GetSettingResponse; + }; + mt5_login_list: { + request: MT5AccountsListRequest; + response: MT5AccountsListResponse; + }; + mt5_new_account: { + request: MT5NewAccountRequest; + response: MT5NewAccountResponse; + }; + mt5_password_change: { + request: MT5PasswordChangeRequest; + response: MT5PasswordChangeResponse; + }; + mt5_password_check: { + request: MT5PasswordCheckRequest; + response: MT5PasswordCheckResponse; + }; + mt5_password_reset: { + request: MT5PasswordResetRequest; + response: MT5PasswordResetResponse; + }; + mt5_withdrawal: { + request: MT5WithdrawalRequest; + response: MT5WithdrawalResponse; + }; + new_account_maltainvest: { + request: NewRealMoneyAccountDerivInvestmentEuropeLtdRequest; + response: NewRealMoneyAccountDerivInvestmentEuropeLtdResponse; + }; + new_account_real: { + request: NewRealMoneyAccountDefaultLandingCompanyRequest; + response: NewRealMoneyAccountDefaultLandingCompanyResponse; + }; + new_account_virtual: { + request: NewVirtualMoneyAccountRequest; + response: NewVirtualMoneyAccountResponse; + }; + oauth_apps: { + request: OAuthApplicationsRequest; + response: OAuthApplicationsResponse; + }; + p2p_advert_create: { + request: P2PAdvertCreateRequest; + response: P2PAdvertCreateResponse; + }; + p2p_advert_info: { + request: P2PAdvertInformationRequest; + response: P2PAdvertInformationResponse; + }; + p2p_advert_list: { + request: P2PAdvertListRequest; + response: P2PAdvertListResponse; + }; + p2p_advert_update: { + request: P2PAdvertUpdateRequest; + response: P2PAdvertUpdateResponse; + }; + p2p_advertiser_adverts: { + request: P2PAdvertiserAdvertsRequest; + response: P2PAdvertiserAdvertsResponse; + }; + p2p_advertiser_create: { + request: P2PAdvertiserCreateRequest; + response: P2PAdvertiserCreateResponse; + }; + p2p_advertiser_info: { + request: P2PAdvertiserInformationRequest; + response: P2PAdvertiserInformationResponse; + }; + p2p_advertiser_list: { + request: P2PAdvertiserListRequest; + response: P2PAdvertiserListResponse; + }; + p2p_advertiser_payment_methods: { + request: P2PAdvertiserPaymentMethodsRequest; + response: P2PAdvertiserPaymentMethodsResponse; + }; + p2p_advertiser_relations: { + request: P2PAdvertiserRelationsRequest; + response: P2PAdvertiserRelationsResponse; + }; + p2p_advertiser_update: { + request: P2PAdvertiserUpdateRequest; + response: P2PAdvertiserUpdateResponse; + }; + p2p_chat_create: { + request: P2PChatCreateRequest; + response: P2PChatCreateResponse; + }; + p2p_order_cancel: { + request: P2POrderCancelRequest; + response: P2POrderCancelResponse; + }; + p2p_order_confirm: { + request: P2POrderConfirmRequest; + response: P2POrderConfirmResponse; + }; + p2p_order_create: { + request: P2POrderCreateRequest; + response: P2POrderCreateResponse; + }; + p2p_order_dispute: { + request: P2POrderDisputeRequest; + response: P2POrderDisputeResponse; + }; + p2p_order_info: { + request: P2POrderInformationRequest; + response: P2POrderInformationResponse; + }; + p2p_order_list: { + request: P2POrderListRequest; + response: P2POrderListResponse; + }; + p2p_order_review: { + request: P2POrderReviewRequest; + response: P2POrderReviewResponse; + }; + p2p_payment_methods: { + request: P2PPaymentMethodsRequest; + response: P2PPaymentMethodsResponse; + }; + p2p_ping: { + request: P2PPingRequest; + response: P2PPingResponse; + }; + payment_methods: { + request: PaymentMethodsRequest; + response: PaymentMethodsResponse; + }; + paymentagent_create: { + request: PaymentAgentCreateRequest; + response: PaymentAgentCreateResponse; }; paymentagent_details: { request: PaymentAgentDetailsRequest; response: PaymentAgentDetailsResponse; }; + paymentagent_list: { + request: PaymentAgentListRequest; + response: PaymentAgentListResponse; + }; + paymentagent_transfer: { + request: PaymentAgentTransferRequest; + response: PaymentAgentTransferResponse; + }; paymentagent_withdraw: { request: PaymentAgentWithdrawRequest; response: PaymentAgentWithdrawResponse; }; - transfer_between_accounts: { - request: TransferBetweenAccountsRequest; - response: TransferBetweenAccountsResponse; + payout_currencies: { + request: PayoutCurrenciesRequest; + response: PayoutCurrenciesResponse; }; - balance: { - request: BalanceRequest; - response: BalanceResponse; + ping: { + request: PingRequest; + response: PingResponse; + }; + portfolio: { + request: PortfolioRequest; + response: PortfolioResponse; + }; + profit_table: { + request: ProfitTableRequest; + response: ProfitTableResponse; + }; + proposal_open_contract: { + request: PriceProposalOpenContractsRequest; + response: PriceProposalOpenContractsResponse; + }; + proposal: { + request: PriceProposalRequest; + response: PriceProposalResponse; + }; + reality_check: { + request: RealityCheckRequest; + response: RealityCheckResponse; + }; + residence_list: { + request: CountriesListRequest; + response: CountriesListResponse; + }; + revoke_oauth_app: { + request: RevokeOauthApplicationRequest; + response: RevokeOauthApplicationResponse; + }; + sell_contract_for_multiple_accounts: { + request: SellContractsMultipleAccountsRequest; + response: SellContractsMultipleAccountsResponse; + }; + sell_expired: { + request: SellExpiredContractsRequest; + response: SellExpiredContractsResponse; + }; + sell: { + request: SellContractRequest; + response: SellContractResponse; + }; + set_account_currency: { + request: SetAccountCurrencyRequest; + response: SetAccountCurrencyResponse; + }; + set_financial_assessment: { + request: SetFinancialAssessmentRequest; + response: SetFinancialAssessmentResponse; + }; + set_self_exclusion: { + request: SetSelfExclusionRequest; + response: SetSelfExclusionResponse; + }; + set_settings: { + request: SetAccountSettingsRequest; + response: SetAccountSettingsResponse; + }; + statement: { + request: StatementRequest; + response: StatementResponse; + }; + states_list: { + request: StatesListRequest; + response: StatesListResponse; + }; + ticks_history: { + request: TicksHistoryRequest; + response: TicksHistoryResponse; }; ticks: { request: TicksStreamRequest; response: TicksStreamResponse; }; - new_account_virtual: { - request: NewVirtualMoneyAccountRequest; - response: NewVirtualMoneyAccountResponse; + time: { + request: ServerTimeRequest; + response: ServerTimeResponse; }; - get_account_status: { - request: AccountStatusRequest; - response: AccountStatusResponse; + tnc_approval: { + request: TermsAndConditionsApprovalRequest; + response: TermsAndConditionsApprovalResponse; + }; + topup_virtual: { + request: TopUpVirtualMoneyAccountRequest; + response: TopUpVirtualMoneyAccountResponse; + }; + trading_durations: { + request: TradingDurationsRequest; + response: TradingDurationsResponse; + }; + trading_platform_investor_password_reset: { + request: TradingPlatformInvestorPasswordResetRequest; + response: TradingPlatformInvestorPasswordResetResponse; + }; + trading_platform_password_reset: { + request: TradingPlatformPasswordResetRequest; + response: TradingPlatformPasswordResetResponse; + }; + trading_servers: { + request: ServerListRequest; + response: ServerListResponse; + }; + trading_times: { + request: TradingTimesRequest; + response: TradingTimesResponse; + }; + transaction: { + request: TransactionsStreamRequest; + response: TransactionsStreamResponse; + }; + transfer_between_accounts: { + request: TransferBetweenAccountsRequest; + response: TransferBetweenAccountsResponse; + }; + unsubscribe_email: { + request: UnsubscribeEmailRequest; + response: UnsubscribeEmailResponse; + }; + verify_email_cellxpert: { + request: VerifyEmailCellxpertRequest; + response: VerifyEmailCellxpertResponse; + }; + verify_email: { + request: VerifyEmailRequest; + response: VerifyEmailResponse; + }; + website_status: { + request: ServerStatusRequest; + response: ServerStatusResponse; }; }; diff --git a/packages/appstore/package.json b/packages/appstore/package.json index fe72aef5fe6d..ee529eb90634 100644 --- a/packages/appstore/package.json +++ b/packages/appstore/package.json @@ -25,7 +25,7 @@ "license": "Apache-2.0", "dependencies": { "@deriv/account": "^1.0.0", - "@deriv/api-types": "^1.0.11", + "@deriv/api-types": "^1.0.85", "@deriv/cashier": "^1.0.0", "@deriv/components": "^1.0.0", "@deriv/cfd": "^1.0.0", @@ -33,7 +33,6 @@ "@deriv/stores": "^1.0.0", "@deriv/trader": "^3.8.0", "@deriv/translations": "^1.0.0", - "@deriv/ui": "^0.0.15", "classnames": "^2.2.6", "formik": "^2.1.4", "mobx": "^6.6.1", diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index 5306dd6194d4..5629aad9bc13 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -28,8 +28,9 @@ const TradingAppCard = ({ selected_mt5_jurisdiction, openFailedVerificationModal, }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => { - const { traders_hub } = useStores(); + const { common, traders_hub } = useStores(); const { is_eu_user, is_demo_low_risk, content_flag, is_real } = traders_hub; + const { current_language } = common; const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU; @@ -57,7 +58,7 @@ const TradingAppCard = ({ }; return ( -
+
const number_of_steps = Object.keys(contents); const { traders_hub, client } = useStores(); const { toggleIsTourOpen, selectAccountType, is_demo_low_risk, content_flag } = traders_hub; - const { - is_eu_country, - is_logged_in, - setIsPreAppStore, - is_landing_company_loaded, - prev_account_type, - setPrevAccountType, - } = client; + const { is_eu_country, is_logged_in, is_landing_company_loaded, prev_account_type, setPrevAccountType } = client; const [step, setStep] = React.useState(1); const prevStep = () => { @@ -46,7 +39,6 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) => const nextStep = () => { if (step < number_of_steps.length) setStep(step + 1); if (step === number_of_steps.length) { - setIsPreAppStore(true); toggleIsTourOpen(true); history.push(routes.traders_hub); if (is_demo_low_risk) { @@ -60,7 +52,6 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) => toggleIsTourOpen(false); history.push(routes.traders_hub); await selectAccountType(prev_account_type); - setIsPreAppStore(true); }; const eu_user = diff --git a/packages/bot-skeleton/src/scratch/dbot.js b/packages/bot-skeleton/src/scratch/dbot.js index 4df1e4afb380..64ed4c5baf0b 100644 --- a/packages/bot-skeleton/src/scratch/dbot.js +++ b/packages/bot-skeleton/src/scratch/dbot.js @@ -9,7 +9,6 @@ import { getSavedWorkspaces, saveWorkspaceToRecent } from '../utils/local-storag import { observer as globalObserver } from '../utils/observer'; import ApiHelpers from '../services/api/api-helpers'; import Interpreter from '../services/tradeEngine/utils/interpreter'; -import { setColors } from './hooks/colours'; import { api_base } from '../services/api/api-base'; class DBot { @@ -24,7 +23,6 @@ class DBot { */ async initWorkspace(public_path, store, api_helpers_store, is_mobile) { const recent_files = await getSavedWorkspaces(); - setColors(); return new Promise((resolve, reject) => { __webpack_public_path__ = public_path; // eslint-disable-line no-global-assign ApiHelpers.setInstance(api_helpers_store); diff --git a/packages/bot-skeleton/src/scratch/hooks/colours.js b/packages/bot-skeleton/src/scratch/hooks/colours.js index 3e1c95b496c7..e4467af268b2 100644 --- a/packages/bot-skeleton/src/scratch/hooks/colours.js +++ b/packages/bot-skeleton/src/scratch/hooks/colours.js @@ -1,73 +1,65 @@ -const isDarkModeEnabled = () => { - const ui_store = localStorage.getItem('ui_store'); +const darkMode = () => { + const workspace = Blockly; + workspace.Colours.RootBlock = { + colour: '#183046', + colourSecondary: '#F2F3F5', + colourTertiary: '#151717', + }; + workspace.Colours.Base = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#0e0e0e', + }; - if (ui_store && ui_store.length > 0) { - return JSON.parse(ui_store).is_dark_mode_on || false; - } - return false; -}; - -export const setColors = () => { - if (isDarkModeEnabled()) { - Blockly.Colours.RootBlock = { - colour: '#183046', - colourSecondary: '#F2F3F5', - colourTertiary: '#151717', - }; - Blockly.Colours.Base = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#0e0e0e', - }; + workspace.Colours.Special1 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special1 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special2 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', + }; - Blockly.Colours.Special2 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#D27954', - }; + workspace.Colours.Special3 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', + }; +}; - Blockly.Colours.Special3 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#D27954', - }; - } else { - Blockly.Colours.RootBlock = { - colour: '#064e72', - colourSecondary: '#064e72', - colourTertiary: '#6d7278', - }; +const lightMode = () => { + const workspace = Blockly; + workspace.Colours.RootBlock = { + colour: '#064e72', + colourSecondary: '#064e72', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Base = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Base = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special1 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special1 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special2 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special2 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special3 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; - } + workspace.Colours.Special3 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; }; - -setColors(); +export const setColors = is_dark_mode => (is_dark_mode ? darkMode() : lightMode()); diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json index d5b4794b91e5..4f8571e7241e 100644 --- a/packages/bot-web-ui/package.json +++ b/packages/bot-web-ui/package.json @@ -66,7 +66,7 @@ "dependencies": { "@deriv/bot-skeleton": "^1.0.0", "@deriv/components": "^1.0.0", - "@deriv/deriv-charts": "1.1.6", + "@deriv/deriv-charts": "1.1.8", "@deriv/shared": "^1.0.0", "@deriv/translations": "^1.0.0", "classnames": "^2.2.6", diff --git a/packages/bot-web-ui/src/app/app.jsx b/packages/bot-web-ui/src/app/app.jsx index 365468c0c6f0..189409a83a2e 100644 --- a/packages/bot-web-ui/src/app/app.jsx +++ b/packages/bot-web-ui/src/app/app.jsx @@ -20,6 +20,7 @@ import RootStore from 'Stores'; import GTM from 'Utils/gtm'; import './app.scss'; import Dashboard from 'Components/dashboard'; +import { setColors } from '../../../bot-skeleton/src/scratch/hooks/colours'; const App = ({ passthrough }) => { const { root_store, WS } = passthrough; @@ -29,6 +30,13 @@ const App = ({ passthrough }) => { const root_store_instance = React.useRef(new RootStore(root_store, WS, DBot)); const { app, common, core } = root_store_instance.current; const { onMount, onUnmount, showDigitalOptionsMaltainvestError } = app; + const { + ui: { is_dark_mode_on }, + } = root_store; + + React.useEffect(() => { + setColors(is_dark_mode_on); + }, []); React.useEffect(() => { /** diff --git a/packages/cashier/package.json b/packages/cashier/package.json index cb6ea9fe2060..826a3383f240 100644 --- a/packages/cashier/package.json +++ b/packages/cashier/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@deriv/api": "^1.0.0", - "@deriv/api-types": "^1.0.11", + "@deriv/api-types": "^1.0.85", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.11", "@deriv/hooks": "^1.0.0", @@ -44,6 +44,7 @@ "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", + "@deriv/ui": "^0.6.0", "classnames": "^2.2.6", "formik": "^2.1.4", "loadjs": "^4.2.0", diff --git a/packages/cashier/src/app-content.tsx b/packages/cashier/src/app-content.tsx new file mode 100644 index 000000000000..76a4160a938b --- /dev/null +++ b/packages/cashier/src/app-content.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Routes from 'Containers/routes'; +import { observer, useStore } from '@deriv/stores'; +import { useTheme } from '@deriv/ui'; + +const AppContent = observer(() => { + const { ui } = useStore(); + const { is_dark_mode_on, notification_messages_ui: Notifications } = ui; + const { setColorMode } = useTheme(); + + React.useEffect(() => { + const theme = (is_dark_mode_on ? 'dark' : 'light') as Parameters[0]; + setColorMode(theme); + }, [is_dark_mode_on, setColorMode]); + + return ( + <> + {Notifications && } + + + ); +}); + +export default AppContent; diff --git a/packages/cashier/src/app.jsx b/packages/cashier/src/app.jsx index 7c666ea47006..a5b2620f6947 100644 --- a/packages/cashier/src/app.jsx +++ b/packages/cashier/src/app.jsx @@ -1,12 +1,10 @@ import React from 'react'; import { setWebsocket } from '@deriv/shared'; import { init } from 'Utils/server_time'; -import Routes from 'Containers/routes'; import CashierProviders from './cashier-providers'; +import AppContent from './app-content'; const App = ({ passthrough: { WS, root_store } }) => { - const { notification_messages_ui: Notifications } = root_store.ui; - React.useEffect(() => { setWebsocket(WS); init(); @@ -15,8 +13,7 @@ const App = ({ passthrough: { WS, root_store } }) => { return ( - {Notifications && } - + ); }; diff --git a/packages/cashier/src/cashier-providers.tsx b/packages/cashier/src/cashier-providers.tsx index 897139270e70..01f2b459d1bf 100644 --- a/packages/cashier/src/cashier-providers.tsx +++ b/packages/cashier/src/cashier-providers.tsx @@ -1,12 +1,15 @@ import React from 'react'; import { StoreProvider } from '@deriv/stores'; +import { ThemeProvider } from '@deriv/ui'; import { CashierStoreProvider } from './stores/useCashierStores'; import { TRootStore } from 'Types'; const CashierProviders = ({ children, store }: React.PropsWithChildren<{ store: TRootStore }>) => { return ( - {children} + + {children} + ); }; diff --git a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx index 86a586ac2a69..a2fc8e3bca62 100644 --- a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx +++ b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx @@ -6,7 +6,6 @@ import { TAccountsList } from 'Types'; type TAccountPlatformIcon = { size: number; account: TAccountsList['account']; - is_pre_appstore: boolean; icon_class_name?: string; appstore_icon_class_name?: string; appstoreIconOnClickHandler?: () => void; @@ -14,13 +13,12 @@ type TAccountPlatformIcon = { const AccountPlatformIcon = ({ account, - is_pre_appstore, size, icon_class_name, appstore_icon_class_name, appstoreIconOnClickHandler, }: TAccountPlatformIcon) => { - return is_pre_appstore && account.is_mt && account.platform_icon ? ( + return account.is_mt && account.platform_icon ? ( ({ + ...jest.requireActual('Stores/useCashierStores'), + useCashierStore: jest.fn(() => ({ + general_store: { setIsDeposit: jest.fn() }, + })), +})); + +describe('', () => { + it('should render proper crumbs for crypto deposit page', () => { + render(); + + expect(screen.getByText(/cashier/i)).toBeInTheDocument(); + expect(screen.getByText(/deposit cryptocurrencies/i)).toBeInTheDocument(); + }); + + it('should render proper crumbs for fiat deposit page', () => { + render(); + + expect(screen.getByText(/cashier/i)).toBeInTheDocument(); + expect(screen.getByText(/deposit via bank wire, credit card, and e-wallet/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss new file mode 100644 index 000000000000..cf39a7c89ba2 --- /dev/null +++ b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss @@ -0,0 +1,16 @@ +.cashier-breadcrumb { + width: 100%; + margin-bottom: 1.6rem; + + ul > *:not(:last-child) { + cursor: pointer; + } + + li { + text-align: left; + } + + @include mobile { + margin-top: 1.6rem; + } +} diff --git a/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx new file mode 100644 index 000000000000..205bc1173604 --- /dev/null +++ b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { localize } from '@deriv/translations'; +import { Breadcrumb } from '@deriv/ui'; +import { useCashierStore } from '../../stores/useCashierStores'; +import './cashier-breadcrumb.scss'; + +const CashierBreadcrumb = ({ is_crypto_deposit = false }: { is_crypto_deposit?: boolean }) => { + const { + general_store: { setIsDeposit }, + } = useCashierStore(); + + const crypto_deposit_crumbs: React.ComponentProps['items'] = [ + { value: 0, text: localize('Cashier') }, + { value: 1, text: localize('Deposit cryptocurrencies') }, + ]; + + const fiat_deposit_crumbs: React.ComponentProps['items'] = [ + { value: 0, text: localize('Cashier') }, + { value: 1, text: localize('Deposit via bank wire, credit card, and e-wallet') }, + ]; + + const onBreadcrumbHandler: React.ComponentProps['handleOnClick'] = item => { + switch (item.value) { + case 0: + setIsDeposit(false); + break; + default: + } + }; + + // TODO: improve Breadcrumb component in deriv-ui project that it can accept custom classnames + return ( +
+ +
+ ); +}; + +export default CashierBreadcrumb; diff --git a/packages/cashier/src/components/cashier-breadcrumb/index.ts b/packages/cashier/src/components/cashier-breadcrumb/index.ts new file mode 100644 index 000000000000..8a2f99e4f8c7 --- /dev/null +++ b/packages/cashier/src/components/cashier-breadcrumb/index.ts @@ -0,0 +1,3 @@ +import CashierBreadcrumb from './cashier-breadcrumb'; + +export default CashierBreadcrumb; diff --git a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx index 907fecb28b06..7e694cd94e32 100644 --- a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx +++ b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx @@ -1,41 +1,144 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import { mockStore, StoreProvider } from '@deriv/stores'; +import { useCashierStore } from '../../../../stores/useCashierStores'; +import userEvent from '@testing-library/user-event'; import Real from '../real'; jest.mock('@deriv/components', () => ({ - ...(jest.requireActual('@deriv/components') as any), + ...jest.requireActual('@deriv/components'), Loading: () =>
Loading
, })); +let mocked_cashier_store: DeepPartial>; + +jest.mock('Stores/useCashierStores', () => ({ + ...jest.requireActual('Stores/useCashierStores'), + useCashierStore: jest.fn(() => mocked_cashier_store), +})); + describe('', () => { - const props = { - iframe_url: 'https://www.test_url.com', - clearIframe: jest.fn(), - iframe_height: '', - is_loading: false, - }; - - it('should render the component with iframe when iframe_url value is passed', () => { - render(); - const el_loader = screen.queryByText('Loading'); - - expect(el_loader).not.toBeInTheDocument(); - expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument(); + beforeEach(() => { + mocked_cashier_store = { + iframe: { + clearIframe: jest.fn(), + iframe_height: 100, + iframe_url: 'https://www.test_url.com', + }, + deposit: { + onMountDeposit: jest.fn(), + }, + general_store: { + is_loading: false, + }, + }; }); - it('should render the loading when is_loading is true', () => { - render(); - const el_loader = screen.queryByText('Loading'); + const mockRootStore = mockStore({}); + + it('should show loader when is_loading is true or iframe_height is equal to 0', () => { + (useCashierStore as jest.Mock).mockReturnValueOnce({ + ...mocked_cashier_store, + iframe: { ...mocked_cashier_store.iframe, iframe_height: 0 }, + }); + + const { rerender } = render( + + + + ); + + expect(screen.getByText('Loading')).toBeInTheDocument(); - expect(el_loader).toBeInTheDocument(); - expect(screen.queryByTestId('dt_doughflow_section')).not.toBeInTheDocument(); + (useCashierStore as jest.Mock).mockReturnValueOnce({ + ...mocked_cashier_store, + general_store: { is_loading: true }, + }); + + rerender( + + + + ); + + expect(screen.getByText('Loading')).toBeInTheDocument(); }); - it('will display doughflow and loader if all props are provided', () => { - render(); - const el_loader = screen.queryByText('Loading'); + it('should render an iframe if iframe_url is not an empty string', () => { + render( + + + + ); - expect(el_loader).toBeInTheDocument(); expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument(); }); + + describe('Breadcrumb visibility', () => { + it('should show breadcrumbs only on deposit page and only for non EU clients', () => { + render( + + + + ); + + expect(screen.getByText(/cashier/i)).toBeInTheDocument(); + expect(screen.getByText(/deposit via bank wire, credit card, and e-wallet/i)).toBeInTheDocument(); + }); + + it('should not show breadcrumbs on deposit page if iframe_height is equal to 0', () => { + (useCashierStore as jest.Mock).mockReturnValueOnce({ + ...mocked_cashier_store, + iframe: { ...mocked_cashier_store.iframe, iframe_height: 0 }, + }); + + render( + + + + ); + + expect(screen.queryByText(/cashier/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/deposit via bank wire, credit card, and e-wallet/i)).not.toBeInTheDocument(); + }); + + it('should not show breadcrumbs on withdraw page', () => { + render( + + + + ); + + expect(screen.queryByText(/cashier/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/deposit via bank wire, credit card, and e-wallet/i)).not.toBeInTheDocument(); + }); + }); + + it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => { + render( + + + + ); + + const el_breadcrumb_cashier = screen.queryByText(/cashier/i); + + if (el_breadcrumb_cashier) { + userEvent.click(el_breadcrumb_cashier); + expect(mocked_cashier_store.general_store?.setIsDeposit).toHaveBeenCalledWith(false); + } + }); + + it('should trigger clearIframe and onMountDeposit callbacks when component is destroyed on deposit page', () => { + const { unmount } = render( + + + + ); + + unmount(); + + expect(mocked_cashier_store.iframe?.clearIframe).toHaveBeenCalled(); + expect(mocked_cashier_store.deposit?.onMountDeposit).toHaveBeenCalled(); + }); }); diff --git a/packages/cashier/src/components/cashier-container/real/real.scss b/packages/cashier/src/components/cashier-container/real/real.scss new file mode 100644 index 000000000000..156134338ee5 --- /dev/null +++ b/packages/cashier/src/components/cashier-container/real/real.scss @@ -0,0 +1,6 @@ +.real { + &__loader { + width: 100%; + height: 80vh; + } +} diff --git a/packages/cashier/src/components/cashier-container/real/real.tsx b/packages/cashier/src/components/cashier-container/real/real.tsx index c9bc2a8ff0d7..5559e237f72f 100644 --- a/packages/cashier/src/components/cashier-container/real/real.tsx +++ b/packages/cashier/src/components/cashier-container/real/real.tsx @@ -1,23 +1,37 @@ import React from 'react'; import { Loading } from '@deriv/components'; +import { useStore } from '@deriv/stores'; +import CashierBreadcrumb from '../../cashier-breadcrumb'; +import { useCashierStore } from '../../../stores/useCashierStores'; +import './real.scss'; -type TRealProps = { - iframe_height: number | string; - iframe_url: string; - clearIframe: VoidFunction; - is_loading: boolean; -}; +const Real = ({ is_deposit = false }: { is_deposit?: boolean }) => { + const { + traders_hub: { is_low_risk_cr_eu_real }, + } = useStore(); + + const { iframe, deposit, general_store } = useCashierStore(); + + const { clearIframe, iframe_height, iframe_url } = iframe; + + const { is_loading } = general_store; + + const { onMountDeposit } = deposit; + + const should_show_breadcrumbs = !is_low_risk_cr_eu_real && is_deposit && Boolean(iframe_height); + const should_show_loader = is_loading || !iframe_height; -const Real = ({ iframe_height, iframe_url, clearIframe, is_loading }: TRealProps) => { React.useEffect(() => { return () => { clearIframe(); + onMountDeposit?.(); }; - }, [clearIframe]); + }, [clearIframe, onMountDeposit]); return ( -
- {is_loading && } +
+ {should_show_loader && } + {should_show_breadcrumbs && } {iframe_url && (