>) => {
const text_size = is_hint ? 'xxxs' : 'xxs';
return (
{/* We only show "Withdrawal Limits" on account-wide settings pages. */}
- {!is_app_settings && (
-
-
-
-
-
-
- {is_fully_authenticated && (
-
-
- )}
-
-
-
- {!is_fully_authenticated && (
-
-
-
-
-
- {FormatUtils.formatMoney((num_of_days_limit as number) ?? 0, {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {withdrawal_limit_details.map((withdrawal_limit_detail, index) => (
+
+ (
+
+
+ {FormatUtils.formatMoney(
+ (withdrawal_limit_detail.withdrawal_amount as number) ?? 0,
+ {
currency: currency as CurrencyConstants.Currency,
- })}
-
-
-
-
-
-
- {FormatUtils.formatMoney((withdrawal_since_inception_monetary as number) ?? 0, {
- currency: currency as CurrencyConstants.Currency,
- })}
-
-
-
-
-
-
- {FormatUtils.formatMoney((remainder as number) ?? 0, {
- currency: currency as CurrencyConstants.Currency,
- })}
-
-
-
- )}
-
-
-
-
- {is_fully_authenticated ? (
-
-
-
- );
- }
-);
+ }
+ )}
+
+
+ ))}
+
+
+
+
+ );
+});
export default WithdrawalLimitsTable;
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
deleted file mode 100644
index 83c9c33e28f7..000000000000
--- a/packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { BrowserRouter } from 'react-router-dom';
-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 = Redirection button ;
-
-describe('
-
- );
-
- 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.getByText('ContinueTradingButton')).toBeInTheDocument();
- });
-
- 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(
-
-
- );
-
- 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.getByText('You must also submit a proof of identity.')).toBeInTheDocument();
- });
-});
diff --git a/packages/account/src/Components/poa/status/needs-review/index.ts b/packages/account/src/Components/poa/status/needs-review/index.ts
deleted file mode 100644
index d3c9442101b5..000000000000
--- a/packages/account/src/Components/poa/status/needs-review/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { NeedsReview as PoaNeedsReview } from './needs-review';
-
-export default PoaNeedsReview;
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
deleted file mode 100644
index c29d2d77019c..000000000000
--- a/packages/account/src/Components/poa/status/needs-review/needs-review.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Icon, Text } from '@deriv/components';
-import { isNavigationFromP2P, isNavigationFromDerivGO } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import ContinueTradingButton from '../../continue-trading-button';
-import IconMessageContent from '../../../icon-message-content';
-import PoiButton from '../../../poi/poi-button';
-import { TPoaStatusProps } from '../../../../Types';
-
-export const NeedsReview = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
- const message = localize('Your proof of address was submitted successfully');
- const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO();
- if (!needs_poi) {
- return (
-
-
- {localize('Your document is being reviewed, please check back in 1-3 days.')}
-
-
- {localize('You must also submit a proof of identity.')}
-
-
-
- {localize('We’ll review your documents and notify you of its status within 1 to 3 days.')}
+ {localize(
+ 'Your proof of address is under review. We’ll get back to you in 1–3 working days.'
+ )}
- {localize('You must also submit a proof of identity.')}
+ {localize('To start trading, you also need to verify your identity.')}
-
);
diff --git a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx
deleted file mode 100644
index 32dcdbf868b8..000000000000
--- a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { Button, Icon, Loading } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared';
-import IconMessageContent from 'Components/icon-message-content';
-import { GetAccountStatus } from '@deriv/api-types';
-
-type TPoiPoaDocsSubmitted = {
- account_status: GetAccountStatus;
- onClickOK: () => void;
- jurisdiction_selected_shortcode: string;
- has_created_account_for_selected_jurisdiction: boolean;
- openPasswordModal: () => void;
- updateAccountStatus: () => Promise;
-};
-
-const PoiPoaDocsSubmitted = ({
- account_status,
- jurisdiction_selected_shortcode,
- onClickOK,
- updateAccountStatus,
- has_created_account_for_selected_jurisdiction,
- openPasswordModal,
-}: TPoiPoaDocsSubmitted) => {
- const [is_loading, setIsLoading] = React.useState(false);
-
- React.useEffect(() => {
- const fetchAccountStatus = async () => {
- await updateAccountStatus();
- setIsLoading(false);
- };
- setIsLoading(true);
- fetchAccountStatus();
-
- return () => setIsLoading(false);
- }, [updateAccountStatus]);
-
- const onSubmit = () => {
- onClickOK();
- if (!has_created_account_for_selected_jurisdiction) {
- openPasswordModal();
- }
- };
-
- const getDescription = () => {
- const { manual_status, poi_verified_for_maltainvest, poi_verified_for_bvi_labuan_vanuatu, poa_pending } =
- getAuthenticationStatusInfo(account_status);
- const is_maltainvest_selected = jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST;
- if (
- (is_maltainvest_selected && poi_verified_for_maltainvest && poa_pending) ||
- (!is_maltainvest_selected && poi_verified_for_bvi_labuan_vanuatu && poa_pending) ||
- manual_status === 'pending'
- ) {
- return localize('We’ll review your documents and notify you of its status within 1 - 3 working days.');
- }
- return localize('We’ll review your documents and notify you of its status within 5 minutes.');
- };
-
- return is_loading ? (
-
@@ -62,7 +60,7 @@ const IdvSubmitComplete = observer(
{needs_poa ? (
-
{poa_button}
diff --git a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
index 4afada56eb79..69956726df81 100644
--- a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
+++ b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
@@ -31,6 +31,7 @@ type TDetailComponent = {
is_from_external?: boolean;
is_for_mt5?: boolean;
handlePOIforMT5Complete?: () => void;
+ needs_poa?: boolean;
};
const DetailComponent = ({
@@ -44,6 +45,7 @@ const DetailComponent = ({
is_from_external,
is_for_mt5,
handlePOIforMT5Complete,
+ needs_poa,
...props
}: TDetailComponent) => {
const [status, setStatus] = React.useState('');
@@ -121,7 +123,7 @@ const DetailComponent = ({
case STATUS.IS_UPLOADING:
return
;
case STATUS.IS_COMPLETED:
- return
;
+ return
;
case STATUS.IS_FAILED:
return
;
case STATUS.IS_DUPLICATE_UPLOAD:
diff --git a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
index e9cf976e8bf8..5a1bee49c3f2 100644
--- a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
+++ b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
@@ -93,6 +93,7 @@ const Unsupported = ({
handlePOIforMT5Complete={handlePOIforMT5Complete}
handleComplete={handleViewComplete}
is_for_mt5={is_for_mt5}
+ needs_poa={needs_poa}
{...props}
/>
);
diff --git a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx
index 02a130dcf170..068437f73b3d 100644
--- a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx
+++ b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx
@@ -4,7 +4,7 @@ import { Button } from '@deriv/components';
import { UploadComplete } from '../upload-complete';
import { BrowserRouter } from 'react-router-dom';
-jest.mock('../../../../poa/poa-button', () => jest.fn(() =>
));
+jest.mock('../../../../poa/poa-button', () => jest.fn(() =>
Next
));
jest.mock('@deriv/components', () => {
const original_module = jest.requireActual('@deriv/components');
@@ -15,59 +15,57 @@ jest.mock('@deriv/components', () => {
});
describe('
', () => {
- const successful_upload_message = /your documents were submitted successfully/i;
- const poi_under_review_message = /We’ll review your documents and notify you of its status within 5 minutes./i;
+ const successful_upload_message = /Review in progress/i;
+ const poi_under_review_message =
+ /Your proof of identity is under review\. We’ll get back to you within 5 minutes./i;
const poi_under_review_message_for_manual =
- /We’ll review your documents and notify you of its status within 1 - 3 working days./i;
+ /Your proof of identity is under review\. We’ll get back to you within 1–3 working days\./i;
const redirect_button =
Lorem Ipsom ;
- const needs_poa_extra_submit_message = /you must also submit a proof of address./i;
+ const needs_poa_extra_submit_message = /To start trading, you also need to verify your address./i;
const renderWithRouter = (component: React.ReactElement) => render(
{component} );
it('should render
component for manual upload', () => {
renderWithRouter(
);
-
expect(screen.getByText(successful_upload_message)).toBeInTheDocument();
expect(screen.getByText(poi_under_review_message_for_manual)).toBeInTheDocument();
expect(screen.getByTestId(/dt_mocked_icon/i)).toBeInTheDocument();
expect(screen.queryByRole('button')).not.toBeInTheDocument();
});
- it('should render
component for manual upload', () => {
- renderWithRouter(
);
+ it('should render
component for idv and onfido upload', () => {
+ renderWithRouter(
);
expect(screen.getByText(successful_upload_message)).toBeInTheDocument();
- expect(screen.getByText(poi_under_review_message_for_manual)).toBeInTheDocument();
+ expect(screen.getByText(poi_under_review_message)).toBeInTheDocument();
expect(screen.getByTestId(/dt_mocked_icon/i)).toBeInTheDocument();
expect(screen.queryByRole('button')).not.toBeInTheDocument();
});
it('should not show redirect_button if it redirect_button passed and is_from_external is true, but needs_poa is false', () => {
renderWithRouter(
);
-
expect(screen.queryByRole('button')).not.toBeInTheDocument();
});
it('should show redirect button if needs_poa and is_from_external are false and have redirect button', () => {
renderWithRouter(
);
- expect(screen.getByRole('button')).toBeInTheDocument();
+ expect(screen.getByText(`Return to Trader's Hub`)).toBeInTheDocument();
});
it('should show needs_poa review message and extra submission message, and poa_buttons', () => {
renderWithRouter(
);
- expect(screen.getByTestId('dt_poa_button')).toBeInTheDocument();
expect(screen.getByText(poi_under_review_message)).toBeInTheDocument();
expect(screen.getByText(needs_poa_extra_submit_message)).toBeInTheDocument();
expect(screen.getByRole('button')).toBeInTheDocument();
+ expect(screen.getByRole('button')).toHaveTextContent('Lorem Ipsom');
});
it('should show needs_poa review message and extra submission message, and poa_buttons but redirect_button will not display', () => {
renderWithRouter(
);
- expect(screen.getByTestId('dt_poa_button')).toBeInTheDocument();
expect(screen.getByText(poi_under_review_message)).toBeInTheDocument();
expect(screen.getByText(needs_poa_extra_submit_message)).toBeInTheDocument();
- expect(screen.queryByRole('button')).not.toBeInTheDocument();
+ expect(screen.getByText('Next')).toBeInTheDocument();
});
});
diff --git a/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx
index e0ed002c5e78..d036e80cf890 100644
--- a/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx
+++ b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import { Icon, Text } from '@deriv/components';
-import { isNavigationFromP2P, isNavigationFromDerivGO } from '@deriv/shared';
-import { localize } from '@deriv/translations';
+import { routes } from '@deriv/shared';
+import { useTranslations } from '@deriv-com/translations';
+import RouteButton from '../../../route-button';
import PoaButton from '../../../poa/poa-button';
-import { ContinueTradingButton } from '../../../poa/continue-trading-button/continue-trading-button';
import IconMessageContent from '../../../icon-message-content/icon-message-content';
import { TPOIStatus } from 'Types';
@@ -13,17 +13,18 @@ export const UploadComplete = ({
is_from_external,
is_manual_upload = false,
}: TPOIStatus) => {
- const message = localize('Your documents were submitted successfully');
+ const { localize } = useTranslations();
+ const message = localize('Review in progress');
const description = is_manual_upload
- ? localize('We’ll review your documents and notify you of its status within 1 - 3 working days.')
- : localize('We’ll review your documents and notify you of its status within 5 minutes.');
-
- const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO();
+ ? localize('Your proof of identity is under review. We’ll get back to you within 1–3 working days.')
+ : localize('Your proof of identity is under review. We’ll get back to you within 5 minutes.');
if (!needs_poa) {
return (
}>
- {!is_from_external && (redirect_button || (!is_redirected_from_platform &&
))}
+ {!is_from_external && (
+
+ )}
);
}
@@ -35,10 +36,10 @@ export const UploadComplete = ({
{description}
- {localize('You must also submit a proof of address.')}
+ {localize('To start trading, you also need to verify your address.')}
{component} );
+ };
+
+ it('should render RouteButton component', () => {
+ renderWithRouter(
+
+ {button_label}
+
+
+);
diff --git a/packages/account/src/Configs/__test__/get-status-badge-config.spec.tsx b/packages/account/src/Configs/__test__/get-status-badge-config.spec.tsx
index 64c6e7f6b770..6d857a07de92 100644
--- a/packages/account/src/Configs/__test__/get-status-badge-config.spec.tsx
+++ b/packages/account/src/Configs/__test__/get-status-badge-config.spec.tsx
@@ -1,31 +1,15 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import getStatusBadgeConfig from 'Configs/get-status-badge-config';
-import { AUTH_STATUS_CODES, MT5_ACCOUNT_STATUS, routes } from '@deriv/shared';
-import { TMT5AccountStatus } from 'Types';
+import getStatusBadgeConfig from '../get-status-badge-config';
+import { ACCOUNT_BADGE_STATUS, TAccountBadgeStatus } from '@deriv/shared';
describe('getStatusBadgeConfig', () => {
- let account_status: TMT5AccountStatus;
- const openFailedVerificationModal = jest.fn();
- const setIsVerificationModalVisible = jest.fn();
- const selected_account_type = {};
+ let account_status: TAccountBadgeStatus;
- const renderCheck = (
- account_status: Parameters[0],
- openFailedVerificationModal: Parameters[1],
- selected_account_type: Parameters[2],
- setIsVerificationModalVisible?: Parameters[3],
- user_account_status?: Parameters[4]
- ) => {
- const badge = getStatusBadgeConfig(
- account_status,
- openFailedVerificationModal,
- selected_account_type,
- setIsVerificationModalVisible,
- user_account_status
- );
+ const renderCheck = (account_status: Parameters[0]) => {
+ const badge = getStatusBadgeConfig(account_status);
render(
{badge.text}
@@ -35,92 +19,35 @@ describe('getStatusBadgeConfig', () => {
};
it('should render pending status', () => {
- account_status = MT5_ACCOUNT_STATUS.PENDING;
-
- renderCheck(account_status, openFailedVerificationModal, selected_account_type);
-
- expect(screen.getByText('Pending verification')).toBeInTheDocument();
- expect(screen.getByText('IcAlertWarning')).toBeInTheDocument();
- });
-
- it('should render failed status and trigger "Why?"', () => {
- account_status = MT5_ACCOUNT_STATUS.FAILED;
-
- renderCheck(account_status, openFailedVerificationModal, selected_account_type);
-
- expect(screen.getByText('Verification failed.')).toBeInTheDocument();
- expect(screen.getByText('IcRedWarning')).toBeInTheDocument();
-
- fireEvent.click(screen.getByText('Why?'));
- expect(openFailedVerificationModal).toBeCalledWith(selected_account_type);
- });
-
- it('should render needs_verification status and redirect to identity by default', () => {
- account_status = MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION;
+ account_status = ACCOUNT_BADGE_STATUS.PENDING;
- renderCheck(account_status, openFailedVerificationModal, selected_account_type, setIsVerificationModalVisible);
+ renderCheck(account_status);
- expect(screen.getByText(/Needs verification./));
- expect(screen.getByText('IcAlertInfo'));
-
- const btn = screen.getByText('Verify now');
- expect(btn).toBeInTheDocument();
- expect(btn.hasAttribute('href'));
- expect(btn.hasAttribute(routes.proof_of_identity));
- userEvent.click(btn);
- expect(setIsVerificationModalVisible).toBeCalled();
- });
-
- it('should render migrated_with_position status', () => {
- account_status = MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION;
-
- renderCheck(account_status, openFailedVerificationModal, selected_account_type);
-
- expect(screen.getByText('No new positions')).toBeInTheDocument();
- expect(screen.getByText('IcAlertWarning')).toBeInTheDocument();
+ expect(screen.getByText('In review')).toBeInTheDocument();
+ expect(screen.getByText('IcMt5Pending')).toBeInTheDocument();
});
- it('should render migrated_without_position status', () => {
- account_status = MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION;
+ it('should render failed status', () => {
+ account_status = ACCOUNT_BADGE_STATUS.FAILED;
- renderCheck(account_status, openFailedVerificationModal, selected_account_type);
+ renderCheck(account_status);
+ const failed_text = screen.getByText('Failed');
- expect(screen.getByText('Account closed')).toBeInTheDocument();
- expect(screen.getByText('IcAlertWarning')).toBeInTheDocument();
- });
-
- it('should render need_verification status and redirect to POA when POI is verified', () => {
- account_status = MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION;
-
- renderCheck(account_status, openFailedVerificationModal, selected_account_type, undefined, {
- poi_status: AUTH_STATUS_CODES.VERIFIED,
- poa_status: AUTH_STATUS_CODES.NONE,
- });
+ expect(failed_text).toBeInTheDocument();
+ expect(screen.getByText('IcMt5Failed')).toBeInTheDocument();
- expect(screen.getByText('Needs verification.'));
- expect(screen.getByText('IcAlertInfo'));
-
- const btn = screen.getByRole('link', { name: 'Verify now' });
- expect(btn).toBeInTheDocument();
- expect(btn.hasAttribute('href'));
- expect(btn.hasAttribute(routes.proof_of_address));
+ userEvent.click(failed_text);
});
- it('should render need_verification status and redirect to POI when POI status is not verified and POA status is not verified', () => {
- account_status = MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION;
-
- renderCheck(account_status, openFailedVerificationModal, selected_account_type, undefined, {
- poi_status: AUTH_STATUS_CODES.NONE,
- poa_status: AUTH_STATUS_CODES.NONE,
- });
+ it('should render needs_verification status', () => {
+ account_status = ACCOUNT_BADGE_STATUS.NEEDS_VERIFICATION;
- expect(screen.getByText('Needs verification.'));
- expect(screen.getByText('IcAlertInfo'));
+ renderCheck(account_status);
+ const needs_verification_text = screen.getByText('Needs Verification');
- const btn = screen.getByRole('link', { name: 'Verify now' });
+ expect(needs_verification_text).toBeInTheDocument();
+ expect(screen.getByText('IcMt5Verification'));
- expect(btn).toBeInTheDocument();
- expect(btn.hasAttribute('href'));
- expect(btn.hasAttribute(routes.proof_of_identity));
+ userEvent.click(needs_verification_text);
});
});
diff --git a/packages/account/src/Configs/get-mt5-status-badge-config.tsx b/packages/account/src/Configs/get-mt5-status-badge-config.tsx
new file mode 100644
index 000000000000..78f4a90fac79
--- /dev/null
+++ b/packages/account/src/Configs/get-mt5-status-badge-config.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { MT5_ACCOUNT_STATUS, TRADING_PLATFORM_STATUS } from '@deriv/shared';
+import { Localize } from '@deriv-com/translations';
+import { TMT5AccountStatus } from '../Types/common.type';
+
+const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
+ const BadgeTextComponent = ) => void,
- selected_account_type?: Record,
- setIsVerificationModalVisible?: (value: boolean) => void,
- user_account_status?: { poi_status: TAuthStatusCodes; poa_status: TAuthStatusCodes }
-) => {
- const BadgeTextComponent = {
- if (selected_account_type) {
- selected_account_type.client_kyc_status = {
- poi_status: user_account_status?.poi_status,
- poa_status: user_account_status?.poa_status,
- };
- selected_account_type;
- openFailedVerificationModal?.(selected_account_type ?? '');
- }
- }}
- />,
- ]}
- />
- ),
- icon: 'IcRedWarning',
+ text: setIsVerificationModalVisible?.(true)}
- />
- ) : (
- ['authentication']['document']['status'] | string
+ ) => {
+ switch (document_status) {
+ case AUTH_STATUS_CODES.NONE:
+ return
- {({ setRef, height }) => (
-
-
- )}
-
- );
- }
- case service_code.manual:
- return (
-
{
no_MF_account,
toggleAccountTransferModal,
is_demo,
- openFailedVerificationModal,
showTopUpModal,
no_CR_account,
setSelectedAccount,
CFDs_restricted_countries,
financial_restricted_countries,
+ getDefaultJurisdiction,
} = traders_hub;
-
const {
setAccountType,
toggleCTraderTransferModal,
setAccountUnavailableModal,
setServerMaintenanceModal,
setProduct,
+ setJurisdictionSelectedShortcode,
} = cfd;
const {
- account_status,
is_landing_company_loaded,
is_populating_mt5_account_list,
real_account_creation_unlock_date,
ctrader_total_balance,
+ updateMT5AccountDetails,
+ is_switching,
} = client;
const { setAppstorePlatform } = common;
- const { openDerivRealAccountNeededModal, setShouldShowCooldownModal, setIsMT5VerificationFailedModal } = ui;
+ const { openDerivRealAccountNeededModal, setShouldShowCooldownModal } = ui;
const has_no_real_account = !has_any_real_account;
const accounts_sub_text =
!is_eu_user || is_demo_low_risk ? localize('Compare accounts') : localize('Account Information');
- const {
- poi_pending_for_bvi_labuan_vanuatu,
- poi_resubmit_for_bvi_labuan_vanuatu,
- poa_resubmit_for_labuan,
- is_idv_revoked,
- } = getAuthenticationStatusInfo(account_status);
-
const [is_traders_dashboard_tracking_enabled] = useGrowthbookGetFeatureValue({
featureFlag: 'ce_tradershub_dashboard_tracking',
defaultValue: false,
});
const { has_svg_accounts_to_migrate } = useMT5SVGEligibleToMigrate();
- const getAuthStatus = (status_list: boolean[]) => status_list.some(status => status);
const { getPlatformStatus } = useTradingPlatformStatus();
@@ -142,61 +133,23 @@ const CFDsListing = observer(() => {
return MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE;
} else if (current_acc_status === 'unavailable') {
return TRADING_PLATFORM_STATUS.UNAVAILABLE;
- }
-
- if (jurisdiction) {
- switch (jurisdiction) {
- case Jurisdiction.BVI: {
- if (
- getAuthStatus([
- is_idv_revoked,
- poi_resubmit_for_bvi_labuan_vanuatu,
- current_acc_status === 'proof_failed',
- ])
- ) {
- return MT5_ACCOUNT_STATUS.FAILED;
- } else if (
- getAuthStatus([
- poi_pending_for_bvi_labuan_vanuatu,
- current_acc_status === 'verification_pending',
- ])
- ) {
- return MT5_ACCOUNT_STATUS.PENDING;
- }
- return null;
- }
- case Jurisdiction.LABUAN: {
- if (
- getAuthStatus([
- poa_resubmit_for_labuan,
- is_idv_revoked,
- poi_resubmit_for_bvi_labuan_vanuatu,
- current_acc_status === 'proof_failed',
- ])
- ) {
- return MT5_ACCOUNT_STATUS.FAILED;
- } else if (
- getAuthStatus([
- poi_pending_for_bvi_labuan_vanuatu,
- current_acc_status === 'verification_pending',
- ])
- ) {
- return MT5_ACCOUNT_STATUS.PENDING;
- }
- return null;
- }
+ } else if (jurisdiction) {
+ switch (current_acc_status) {
+ case 'proof_failed':
+ case 'poa_failed':
+ case 'poa_outdated':
+ return MT5_ACCOUNT_STATUS.FAILED;
+ case 'verification_pending':
+ case 'poa_pending':
+ return MT5_ACCOUNT_STATUS.PENDING;
+ case 'needs_verification':
+ case 'poa_required':
+ return MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION;
+ case 'migrated_with_position':
+ return MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION;
+ case 'migrated_without_position':
+ return MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION;
default:
- if (current_acc_status === 'proof_failed') {
- return MT5_ACCOUNT_STATUS.FAILED;
- } else if (current_acc_status === 'verification_pending') {
- return MT5_ACCOUNT_STATUS.PENDING;
- } else if (current_acc_status === 'needs_verification') {
- return MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION;
- } else if (current_acc_status === 'migrated_with_position') {
- return MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION;
- } else if (current_acc_status === 'migrated_without_position') {
- return MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION;
- }
return null;
}
}
@@ -234,8 +187,10 @@ const CFDsListing = observer(() => {
setPerformanceValue('switch_from_demo_to_real_time');
setPerformanceValue('switch_from_real_to_demo_time');
}
+ updateMT5AccountDetails();
}, [is_landing_company_loaded, is_populating_mt5_account_list]);
+ const is_mt5_list_loading = (is_landing_company_loaded && is_populating_mt5_account_list) || is_switching;
return (
{
{has_svg_accounts_to_migrate && is_landing_company_loaded &&
+ {/* MT5 */}
{combined_cfd_mt5_accounts.map((existing_account, index: number) => {
const list_size = combined_cfd_mt5_accounts.length;
const track_account_subtitle = existing_account.tracking_name ?? '';
const has_mt5_account_status =
- existing_account?.status || is_idv_revoked || hasMaintenanceStatus
+ existing_account?.status || hasMaintenanceStatus
? getMT5AccountAuthStatus(
existing_account?.status,
existing_account?.landing_company_short
)
: '';
-
return (
{
});
setProduct(existing_account.product);
setAppstorePlatform(existing_account.platform);
+ setJurisdictionSelectedShortcode(getDefaultJurisdiction());
getTradingPlatformStatus(existing_account.platform);
}
} else if (existing_account.action_type === 'multi-action') {
@@ -351,12 +307,6 @@ const CFDsListing = observer(() => {
});
}
- if (has_mt5_account_status === MT5_ACCOUNT_STATUS.FAILED && is_eu_user) {
- setIsMT5VerificationFailedModal(true);
- openFailedVerificationModal(existing_account);
- return;
- }
-
startTrade(existing_account.platform, existing_account);
}
}
@@ -367,8 +317,8 @@ const CFDsListing = observer(() => {
category: selected_account_type,
type: existing_account.market_type,
jurisdiction: existing_account.landing_company_short,
+ product: existing_account.product,
}}
- openFailedVerificationModal={openFailedVerificationModal}
market_type={existing_account?.market_type}
/>
);
@@ -377,6 +327,8 @@ const CFDsListing = observer(() => {
) : (
@@ -496,6 +448,7 @@ const CFDsListing = observer(() => {
+ {/* dxtrade */}
{is_landing_company_loaded ? (
available_dxtrade_accounts?.map(account => {
const existing_accounts = getExistingAccounts(account.platform, account.market_type);
diff --git a/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx b/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx
index dacafe3bec8a..3db1b1fe0c2b 100644
--- a/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx
+++ b/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx
@@ -36,7 +36,7 @@ describe(' {
return openModal('currency_selection');
}}
>
-
);
});
diff --git a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.scss b/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.scss
deleted file mode 100644
index 7debd13c6be5..000000000000
--- a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.failed-verification-modal {
- @include mobile {
- .dc-dialog__dialog {
- max-width: 32rem;
- }
- .dc-dialog__footer {
- .dc-btn {
- flex: 1;
- margin-bottom: 0;
- }
-
- .dc-dialog__button {
- max-width: fit-content;
- .dc-text.dc-btn__text {
- font-size: 1.2rem;
- }
- }
- }
- }
- &__failed_list {
- padding: 1.2rem 2.4rem;
- &-item {
- display: list-item;
- list-style-type: disc;
- &:first-child {
- margin-bottom: 0.8rem;
- }
- }
- }
-}
-
-.dc-modal__container_failed-verification-modal {
- .dc-modal-body {
- padding: 0 2.4rem;
- }
- .dc-modal-footer {
- padding: 2.4rem;
- }
-}
diff --git a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx b/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx
deleted file mode 100644
index 05a44c99586d..000000000000
--- a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { useHistory } from 'react-router-dom';
-import { localize, Localize } from '@deriv/translations';
-import { Text, Dialog } from '@deriv/components';
-import { isMobile, getAuthenticationStatusInfo, routes, Jurisdiction } from '@deriv/shared';
-import './failed-verification-modal.scss';
-
-type TFailedVerificationModal = {
- should_resubmit_poi: boolean;
- should_resubmit_poa: boolean;
- from_account: string;
- is_from_multipliers: boolean;
- has_mf_mt5_account: boolean;
-};
-
-const FailedVerificationModalContent = ({
- should_resubmit_poi,
- should_resubmit_poa,
- from_account,
- is_from_multipliers,
- has_mf_mt5_account,
-}: TFailedVerificationModal) => {
- return (
-
-
-
-
- {should_resubmit_poi && (
-
-
- )}
- {should_resubmit_poa && (
-
-
- )}
-
- {!is_from_multipliers && has_mf_mt5_account ? (
-
-
- ) : (
-
-
- )}
-
- );
-};
-
-const FailedVerificationModal = () => {
- const {
- traders_hub,
- ui,
- modules: { cfd },
- client,
- } = useStores();
- const {
- is_failed_verification_modal_visible,
- mt5_existing_account,
- toggleFailedVerificationModalVisibility,
- open_failed_verification_for,
- startTrade,
- } = traders_hub;
- const { account_status, client_kyc_status } = client;
- const { toggleCFDVerificationModal, current_list } = cfd;
- const { disableApp, enableApp, is_mt5_verification_failed_modal, setIsMT5VerificationFailedModal } = ui;
- const is_from_multipliers = open_failed_verification_for === 'multipliers';
- const has_mf_mt5_account = Object.keys(current_list)
- .map(key => current_list[key])
- .some(account => account.landing_company_short === Jurisdiction.MALTA_INVEST);
-
- const { poi_resubmit_for_maltainvest } = getAuthenticationStatusInfo(account_status);
- const history = useHistory();
-
- const closeModal = () => {
- setIsMT5VerificationFailedModal(false);
- if (is_mt5_verification_failed_modal) {
- toggleFailedVerificationModalVisibility();
- startTrade(mt5_existing_account.platform, mt5_existing_account);
- return;
- }
- toggleFailedVerificationModalVisibility();
- };
-
- const onConfirmModal = () => {
- setIsMT5VerificationFailedModal(false);
- toggleFailedVerificationModalVisibility();
- if (is_from_multipliers) {
- if (should_resubmit_poi()) {
- history.push(routes.proof_of_identity);
- } else {
- history.push(routes.proof_of_address);
- }
- } else {
- toggleCFDVerificationModal();
- }
- };
-
- const should_resubmit_poi = () => {
- if (is_from_multipliers || open_failed_verification_for === 'maltainvest') {
- return poi_resubmit_for_maltainvest;
- }
- return ['rejected', 'expired', 'suspected'].includes(client_kyc_status?.poi_status);
- };
-
- const should_resubmit_poa = ['rejected', 'expired', 'suspected'].includes(client_kyc_status?.poa_status);
- const from_account_label = is_from_multipliers ? localize('Multipliers') : localize('MT5');
-
- return (
-
-
- );
-};
-
-export default observer(FailedVerificationModal);
diff --git a/packages/appstore/src/components/modals/failed-veriification-modal/index.ts b/packages/appstore/src/components/modals/failed-veriification-modal/index.ts
deleted file mode 100644
index 073d4fdd1689..000000000000
--- a/packages/appstore/src/components/modals/failed-veriification-modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FailedVerificationModal from './failed-verification-modal';
-
-export default FailedVerificationModal;
diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
index e3234b47759e..1e5b1177cbe8 100644
--- a/packages/appstore/src/components/modals/modal-manager.tsx
+++ b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -1,19 +1,17 @@
import React from 'react';
-import { useLocation } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { useWalletMigration } from '@deriv/hooks';
import { makeLazyLoader, moduleLoader } from '@deriv/shared';
import { Loading } from '@deriv/components';
import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
import { useStores } from 'Stores';
-import { TOpenAccountTransferMeta } from 'Types';
import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
import CFDResetPasswordModal from '@deriv/cfd/src/Containers/cfd-reset-password-modal';
-const FailedVerificationModal = makeLazyLoader(
+const VerificationDocsListModal = makeLazyLoader(
() =>
moduleLoader(
- () => import(/* webpackChunkName: "modal_failed-veriification-modal" */ './failed-veriification-modal')
+ () => import(/* webpackChunkName: "modal_verification-docs-list-modal" */ './verification-docs-list-modal')
),
() =>
{is_server_maintenance_modal_visible &&
{is_wallet_migration_failed &&
+
+
+ {status === AUTH_STATUS_CODES.NONE || (id === 'tax' && status === 0) ? (
+
+ ) : (
+
+
+ )}
+
DerivLightUploadPoiIcon
,
+ LabelPairedChevronRightMdRegularIcon: () => LabelPairedChevronRightMdRegularIcon
,
+ DerivLightWaitingPoaIcon: () => DerivLightWaitingPoaIcon
,
+}));
+
+jest.mock('@deriv/components', () => ({
+ ...jest.requireActual('@deriv/components'),
+ StatusBadge: () => StatusBadge
,
+}));
+
+jest.mock('@deriv/shared', () => ({
+ ...jest.requireActual('@deriv/shared'),
+ AUTH_STATUS_CODES: {
+ VERIFIED: 'verified',
+ PENDING: 'pending',
+ REJECTED: 'rejected',
+ },
+}));
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: jest.fn(),
+ location: { search: 'test' },
+ }),
+}));
+
+describe('
+
+ );
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+ (useGetStatus as jest.Mock).mockReturnValue({
+ client_kyc_status: { poi_status: 'verified', poa_status: 'verified', valid_tin: 'verified' },
+ });
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: true });
+ });
+
+ it('should render verified status', () => {
+ const props = {
+ id: 'identity',
+ text: 'Verified',
+ status: AUTH_STATUS_CODES.VERIFIED,
+ route: '/proof_of_identity',
+ };
+ renderComponent(props);
+
+ expect(screen.getByText('Verified')).toBeInTheDocument();
+ expect(screen.getByText('StatusBadge')).toBeInTheDocument();
+ expect(screen.getByText('LabelPairedChevronRightMdRegularIcon')).toBeInTheDocument();
+ });
+
+ it('should render pending status', () => {
+ const props = {
+ id: 'identity',
+ text: 'In review',
+ status: AUTH_STATUS_CODES.PENDING,
+ route: '/proof_of_identity',
+ };
+ renderComponent(props);
+
+ expect(screen.getByText('In review')).toBeInTheDocument();
+ expect(screen.getByText('StatusBadge')).toBeInTheDocument();
+ expect(screen.getByText('LabelPairedChevronRightMdRegularIcon')).toBeInTheDocument();
+ });
+
+ it('should render with Failed status', () => {
+ const props = {
+ id: 'identity',
+ text: 'Failed',
+ status: AUTH_STATUS_CODES.REJECTED,
+ route: '/proof_of_identity',
+ };
+ renderComponent(props);
+
+ expect(screen.getByText('Failed')).toBeInTheDocument();
+ expect(screen.getByText('StatusBadge')).toBeInTheDocument();
+ expect(screen.getByText('LabelPairedChevronRightMdRegularIcon')).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/modals/verification-docs-list-modal/__tests__/verification-docs-list-modal.spec.tsx b/packages/appstore/src/components/modals/verification-docs-list-modal/__tests__/verification-docs-list-modal.spec.tsx
new file mode 100644
index 000000000000..db0e2f30bc6d
--- /dev/null
+++ b/packages/appstore/src/components/modals/verification-docs-list-modal/__tests__/verification-docs-list-modal.spec.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { useDevice } from '@deriv-com/ui';
+import { useGetStatus, useIsSelectedMT5AccountCreated } from '@deriv/hooks';
+import VerificationDocsListModal from '../verification-docs-list-modal';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+jest.mock('@deriv/hooks', () => ({
+ ...jest.requireActual('@deriv/hooks'),
+ useGetStatus: jest.fn(() => ({
+ client_kyc_status: { poi_status: 'rejected', poa_status: 'verified', valid_tin: 1 },
+ })),
+ useIsSelectedMT5AccountCreated: jest.fn(() => ({ is_selected_MT5_account_created: false })),
+}));
+
+jest.mock('@deriv/quill-icons', () => ({
+ ...jest.requireActual('@deriv/quill-icons'),
+ LabelPairedChevronRightCaptionBoldIcon: () => LabelPairedChevronRightCaptionBoldIcon
,
+}));
+
+jest.mock('@deriv/components', () => ({
+ ...jest.requireActual('@deriv/components'),
+ StatusBadge: () => StatusBadge
,
+ Icon: jest.fn(() => 'mockedIcon'),
+}));
+
+jest.mock('@deriv/shared', () => ({
+ ...jest.requireActual('@deriv/shared'),
+ CFD_PLATFORMS: { MT5: 'mt5' },
+}));
+
+describe('
+
+ );
+ };
+ let modal_root_el: HTMLDivElement;
+
+ beforeAll(() => {
+ modal_root_el = document.createElement('div');
+ modal_root_el.setAttribute('id', 'modal_root');
+ document.body.appendChild(modal_root_el);
+ });
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ afterAll(() => {
+ document.body.removeChild(modal_root_el);
+ });
+
+ it('should render the modal with details when mt5 account is created', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: true });
+ (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'none',
+ poa_status: 'verified',
+ valid_tin: 1,
+ required_tin: 1,
+ },
+ });
+ renderComponent({});
+ expect(screen.getByText('Verification required')).toBeInTheDocument();
+ expect(screen.getByText('Your account needs verification.')).toBeInTheDocument();
+ expect(screen.getByText('Proof of identity')).toBeInTheDocument();
+ expect(screen.getByText('Proof of address')).toBeInTheDocument();
+ expect(screen.queryByText('Additional information')).not.toBeInTheDocument();
+ });
+
+ it('should render the modal with details when mt5 account is not created', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'pending',
+ poa_status: 'none',
+ valid_tin: 0,
+ required_tin: 1,
+ },
+ });
+ renderComponent({});
+ expect(screen.getByText('mockedIcon')).toBeInTheDocument();
+ expect(screen.getByText('Complete your profile')).toBeInTheDocument();
+ expect(
+ screen.getByText('Confirm your details to open the account. After verification, you can begin trading.')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Proof of identity')).toBeInTheDocument();
+ expect(screen.getByText('Proof of address')).toBeInTheDocument();
+ expect(screen.queryByText('Additional information')).toBeInTheDocument();
+ });
+ it('should render the modal with details when platform is not mt5', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'pending',
+ poa_status: 'none',
+ },
+ });
+ const mock_store = mockStore({
+ traders_hub: {
+ is_verification_docs_list_modal_visible: true,
+ setVerificationModalOpen: jest.fn(),
+ },
+ common: {
+ platform: '',
+ },
+ });
+ renderComponent({ store: mock_store });
+ expect(screen.getByText('mockedIcon')).toBeInTheDocument();
+ expect(screen.getByText('Verification required')).toBeInTheDocument();
+ expect(screen.getByText('Your account needs verification.')).toBeInTheDocument();
+ expect(screen.getByText('Proof of identity')).toBeInTheDocument();
+ expect(screen.getByText('Proof of address')).toBeInTheDocument();
+ expect(screen.queryByText('Additional information ')).not.toBeInTheDocument();
+ });
+ it('should render the modal with tax details when mt5 account requires tin and tin is invalid', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'pending',
+ poa_status: 'none',
+ valid_tin: 0,
+ required_tin: 1,
+ },
+ });
+ renderComponent({});
+ expect(screen.getByText('mockedIcon')).toBeInTheDocument();
+ expect(screen.getByText('Complete your profile')).toBeInTheDocument();
+ expect(
+ screen.getByText('Confirm your details to open the account. After verification, you can begin trading.')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Proof of identity')).toBeInTheDocument();
+ expect(screen.getByText('Proof of address')).toBeInTheDocument();
+ expect(screen.queryByText('Additional information')).toBeInTheDocument();
+ });
+ it('should render the modal without tax details when mt5 account doesnt require tin', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'pending',
+ poa_status: 'none',
+ valid_tin: 0,
+ required_tin: 0,
+ },
+ });
+ renderComponent({});
+ expect(screen.getByText('mockedIcon')).toBeInTheDocument();
+ expect(screen.getByText('Complete your profile')).toBeInTheDocument();
+ expect(
+ screen.getByText('Confirm your details to open the account. After verification, you can begin trading.')
+ ).toBeInTheDocument();
+
+ expect(screen.queryByText('Additional information')).not.toBeInTheDocument();
+ });
+
+ it('should render the modal without tax details when mt5 account require tin and valid tin is present', () => {
+ (useIsSelectedMT5AccountCreated as jest.Mock).mockReturnValue({ is_selected_MT5_account_created: false });
+ (useGetStatus as jest.Mock).mockReturnValueOnce({
+ client_kyc_status: {
+ poi_status: 'pending',
+ poa_status: 'none',
+ valid_tin: 1,
+ required_tin: 1,
+ },
+ });
+ renderComponent({});
+ expect(screen.getByText('mockedIcon')).toBeInTheDocument();
+ expect(screen.getByText('Complete your profile')).toBeInTheDocument();
+ expect(
+ screen.getByText('Confirm your details to open the account. After verification, you can begin trading.')
+ ).toBeInTheDocument();
+
+ expect(screen.queryByText('Additional information')).not.toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/modals/verification-docs-list-modal/index.ts b/packages/appstore/src/components/modals/verification-docs-list-modal/index.ts
new file mode 100644
index 000000000000..d508b6390de5
--- /dev/null
+++ b/packages/appstore/src/components/modals/verification-docs-list-modal/index.ts
@@ -0,0 +1,3 @@
+import VerificationDocsListModal from './verification-docs-list-modal';
+
+export default VerificationDocsListModal;
diff --git a/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.scss b/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.scss
new file mode 100644
index 000000000000..458fbf1a79e5
--- /dev/null
+++ b/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.scss
@@ -0,0 +1,55 @@
+.verification-docs-list-modal {
+ &__content {
+ display: flex;
+ flex-direction: column;
+ padding: 2.4rem;
+ justify-content: center;
+ align-items: center;
+ &-list {
+ width: 100%;
+ &-item {
+ cursor: pointer;
+ display: flex;
+ min-height: 5.6rem;
+ align-items: center;
+ border-radius: 2 * $BORDER_RADIUS;
+ background: var(--icon-grey-background);
+ padding: 0.8rem 1.6rem;
+ justify-content: space-between;
+ margin: 1.6rem auto;
+
+ &:hover {
+ background: var(--state-normal);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ transition-delay: 0.1s;
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ }
+ }
+ }
+ &__card {
+ display: flex;
+ gap: 0.8rem;
+ align-items: center;
+ &--icon {
+ width: 2.4rem;
+ height: 2.4rem;
+ }
+ }
+ &__status-badge {
+ text-decoration: none;
+ }
+}
+
+.dc-modal__container_verification-docs-list-modal {
+ .dc-modal-body {
+ padding: 0 2.4rem;
+ }
+ .dc-modal-footer {
+ padding: 2.4rem;
+ }
+}
diff --git a/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.tsx b/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.tsx
new file mode 100644
index 000000000000..46a6a6e78bac
--- /dev/null
+++ b/packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.tsx
@@ -0,0 +1,108 @@
+import React, { Suspense } from 'react';
+import { useDevice } from '@deriv-com/ui';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import { Text, Modal, UILoader, MobileDialog, Icon } from '@deriv/components';
+import { routes, CFD_PLATFORMS } from '@deriv/shared';
+import { useGetStatus, useIsSelectedMT5AccountCreated } from '@deriv/hooks';
+import ListItem from './ListItem';
+import './verification-docs-list-modal.scss';
+
+type TItems = {
+ id: string;
+ text: string;
+ status: string | number;
+ route: string;
+};
+
+const VerificationDocsListModalContent = observer(() => {
+ const {
+ common: { platform },
+ } = useStore();
+ const { isMobile } = useDevice();
+ const { client_kyc_status } = useGetStatus();
+ const { is_selected_MT5_account_created } = useIsSelectedMT5AccountCreated();
+ if (!client_kyc_status) return null;
+ const { poi_status, poa_status, valid_tin, required_tin } = client_kyc_status;
+ const is_tin_required = required_tin === 1 && valid_tin === 0;
+
+ const items: TItems[] = [
+ poi_status && {
+ id: 'identity',
+ text: 'Proof of identity',
+ status: poi_status,
+ route: routes.proof_of_identity,
+ },
+ poa_status && {
+ id: 'address',
+ text: 'Proof of address',
+ status: poa_status,
+ route: routes.proof_of_address,
+ },
+ is_tin_required && {
+ id: 'tax',
+ text: 'Additional information',
+ status: valid_tin,
+ route: routes.personal_details,
+ },
+ ].filter(Boolean) as TItems[];
+
+ return (
+
+
+
+ {platform === CFD_PLATFORMS.MT5 && !is_selected_MT5_account_created ? (
+
+
+ {items.map(item => (
+
+
setVerificationModalOpen(false)}
+ title={getTitle()}
+ width='44rem'
+ should_header_stick_body={false}
+ has_close_icon
+ >
+
+ ) : (
+ setVerificationModalOpen(false)}
+ >
+
+ )}
+
+ );
+});
+
+export default VerificationDocsListModal;
diff --git a/packages/appstore/src/types/common.types.ts b/packages/appstore/src/types/common.types.ts
index 4813d0bb1cd4..40d00326a0b5 100644
--- a/packages/appstore/src/types/common.types.ts
+++ b/packages/appstore/src/types/common.types.ts
@@ -60,10 +60,10 @@ export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
selected_mt5_jurisdiction?: TOpenAccountTransferMeta &
TJurisdictionData & {
platform?: string;
+ product?: string;
};
platform?: TPlatform;
product?: 'swap_free' | 'zero_spread' | 'derivx' | 'ctrader';
- openFailedVerificationModal?: (from_account: string) => void;
market_type: NonNullable | TMarketType;
client_kyc_status?: {
poa_status: string;
diff --git a/packages/cashier/package.json b/packages/cashier/package.json
index f88fab5013bd..6ff76ebfc804 100644
--- a/packages/cashier/package.json
+++ b/packages/cashier/package.json
@@ -37,7 +37,7 @@
"url": "https://github.com/deriv-com/deriv-app/issues"
},
"dependencies": {
- "@deriv-com/analytics": "1.14.0",
+ "@deriv-com/analytics": "1.25.1",
"@deriv-com/ui": "1.36.4",
"@deriv/api": "^1.0.0",
"@deriv/api-types": "1.0.172",
diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
index e0824673dc59..e5b3dbdc0938 100644
--- a/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
+++ b/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
@@ -64,7 +64,7 @@ const getMessage = ({
title: localize('Deposits disabled'),
description: (
{
const {
@@ -48,7 +48,7 @@ const CashierLocked = observer(() => {
is_deposit_locked,
is_withdrawal_locked,
is_identity_verification_needed,
- is_pending_verification: mf_account_status === MT5_ACCOUNT_STATUS.PENDING,
+ is_pending_verification: mf_account_status === ACCOUNT_BADGE_STATUS.PENDING,
is_duplicate_dob_phone,
is_account_to_be_closed_by_residence,
account_time_of_closure,
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
index 998d5f64a415..cd11bfbd12be 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -58,7 +58,7 @@ const AccountOption = ({
if (is_pending_verification) {
return (
-
);
} else if (is_verification_needed) {
@@ -70,7 +70,7 @@ const AccountOption = ({
} else if (is_verification_failed) {
return (
-
);
} else if (is_server_maintenance) {
diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts
index 071a2b74d9a5..946c78b42a29 100644
--- a/packages/cashier/src/stores/account-transfer-store.ts
+++ b/packages/cashier/src/stores/account-transfer-store.ts
@@ -393,6 +393,7 @@ export default class AccountTransferStore {
platform: account.account_type,
is_eu: this.root_store.client.is_eu,
product: account.product,
+ shortcode: account.landing_company_short,
})} ${this.root_store.client.is_eu ? '' : non_eu_accounts}`
: `${cfd_text_display} ${
getCFDAccountDisplay({
diff --git a/packages/cfd/build/webpack.config.js b/packages/cfd/build/webpack.config.js
index bb568b4fcb1a..8bd4952fe5ab 100644
--- a/packages/cfd/build/webpack.config.js
+++ b/packages/cfd/build/webpack.config.js
@@ -10,9 +10,7 @@ module.exports = function (env) {
entry: {
cfd: path.resolve(__dirname, '../src', 'index.tsx'),
CFDStore: 'Stores/Modules/CFD/cfd-store',
- JurisdictionModal: 'Containers/jurisdiction-modal/jurisdiction-modal.tsx',
CFDPasswordModal: 'Containers/cfd-password-modal.tsx',
- CFDDbviOnBoarding: 'Containers/cfd-dbvi-onboarding.tsx',
CFDResetPasswordModal: 'Containers/cfd-reset-password-modal.tsx',
CFDServerErrorDialog: 'Containers/cfd-server-error-dialog.tsx',
CFDTopUpDemoModal: 'Containers/cfd-top-up-demo-modal.tsx',
diff --git a/packages/cfd/package.json b/packages/cfd/package.json
index 62914b9d0d87..089a173dedb3 100644
--- a/packages/cfd/package.json
+++ b/packages/cfd/package.json
@@ -86,7 +86,7 @@
},
"dependencies": {
"@deriv-com/ui": "1.36.4",
- "@deriv-com/analytics": "1.14.0",
+ "@deriv-com/analytics": "1.25.1",
"@deriv-com/translations": "1.3.9",
"@deriv-com/utils": "^0.0.36",
"@deriv/account": "^1.0.0",
diff --git a/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx b/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx
deleted file mode 100644
index 76ca9e8038ad..000000000000
--- a/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { mockStore } from '@deriv/stores';
-import CFDPOA from '../cfd-poa';
-import CFDProviders from '../../cfd-providers';
-
-const mock_kyc_auth_status_response = {
- kyc_auth_status: {
- address: {
- supported_documents: ['utility_bill', 'affidavit', 'poa_others'],
- },
- },
- isLoading: false,
- isSuccess: false,
-};
-
-jest.mock('@deriv/account/src/Components/forms/personal-details-form.jsx', () =>
- jest.fn(() => PersonalDetailsForm
)
-);
-jest.mock('@deriv/account/src/Components/poa/common-mistakes/common-mistake-examples', () =>
- jest.fn(() => CommonMistakeExamples
)
-);
-
-jest.mock('@deriv/account/src/hooks', () => ({
- useKycAuthStatus: jest.fn(() => mock_kyc_auth_status_response),
-}));
-
-jest.mock('@deriv/account/src/Components/leave-confirm', () => jest.fn(() => LeaveConfirm
));
-jest.mock('@deriv/shared', () => ({
- ...jest.requireActual('@deriv/shared'),
- validPostCode: jest.fn(() => true),
- validLength: jest.fn(() => true),
- validLetterSymbol: jest.fn(() => true),
- validAddress: jest.fn(() => ({
- is_ok: true,
- })),
- WS: {
- authorized: {
- storage: {
- getSettings: jest.fn().mockResolvedValue({
- get_settings: {
- address_line_1: 'test address_line_1',
- address_line_2: 'test address_line_2',
- address_city: 'test address_city',
- address_state: 'test address_state',
- address_postcode: 'test address_postcode',
- },
- }),
- getAccountStatus: jest.fn().mockResolvedValue({
- get_account_status: {
- authentication: {
- document: {
- status: 'none',
- },
- identity: {
- status: 'none',
- },
- },
- },
- }),
- },
- },
- setSettings: jest.fn(() => Promise.resolve({ error: '' })),
- wait: jest.fn(() => Promise.resolve([])),
- getSocket: jest.fn().mockReturnValue({}),
- },
-}));
-
-jest.mock('@deriv/hooks', () => ({
- ...jest.requireActual('@deriv/hooks'),
- useFileUploader: jest.fn(() => ({
- upload: jest.fn(),
- })),
-}));
-
-describe(' = {
- index: 0,
- onSave: jest.fn(),
- onSubmit: jest.fn(),
- };
- const mock_store = mockStore({
- client: {
- account_settings: {
- address_line_1: 'test address_line_1',
- address_line_2: 'test address_line_2',
- address_city: 'test address_city',
- address_state: 'test address_state',
- address_postcode: 'test address_postcode',
- country_code: 'in',
- },
- fetchResidenceList: jest.fn(() => Promise.resolve('')),
- getChangeableFields: jest.fn(() => []),
- },
- });
-
- it('should render CFDPOA and trigger buttons', async () => {
- render(
-
-
-
-
- );
-
- expect(await screen.findByText('PersonalDetailsForm')).toBeInTheDocument();
-
- const button = screen.getByRole('button');
- expect(button).toHaveTextContent('Continue');
- expect(button).toBeDisabled();
-
- const uploader = screen.getByTestId('dt_file_upload_input');
- const file = new File(['test file'], 'test_file.png', { type: 'image/png' });
- const dt_document_type = screen.getByRole('textbox', { name: /Type of document/ });
- fireEvent.change(dt_document_type, { target: { value: 'utility_bill' } });
- await waitFor(() => {
- userEvent.upload(uploader, file);
- });
-
- expect(button).toBeEnabled();
-
- userEvent.click(button);
-
- await waitFor(() => {
- expect(mock_props.onSave).toHaveBeenCalled();
- expect(mock_props.onSubmit).toHaveBeenCalled();
- });
- });
-
- it('should render duplicate document error message if has_submitted_duplicate_poa is true ', async () => {
- const setHasSubmittedDuplicatePOA = jest.fn();
- jest.spyOn(React, 'useState').mockImplementationOnce(() => [true, setHasSubmittedDuplicatePOA]);
-
- render(
-
-
-
-
- );
- expect(screen.getByText(/we could not verify your proof of address/i)).toBeInTheDocument();
- expect(screen.getByText(/proof of address documents upload failed/i)).toBeInTheDocument();
- expect(screen.getByText(/try again/i)).toBeInTheDocument();
- const submit_btn = screen.getByRole('button', { name: 'Try again' });
-
- userEvent.click(submit_btn);
- expect(setHasSubmittedDuplicatePOA).toHaveBeenCalledWith(false);
- });
-});
diff --git a/packages/cfd/src/Components/__tests__/cfd-poi.spec.js b/packages/cfd/src/Components/__tests__/cfd-poi.spec.js
deleted file mode 100644
index cb081f2cb04a..000000000000
--- a/packages/cfd/src/Components/__tests__/cfd-poi.spec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import CFDPOI from '../cfd-poi';
-import CFDProviders from '../../cfd-providers';
-import { mockStore } from '@deriv/stores';
-
-jest.mock('@deriv/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx', () =>
- jest.fn(() => ProofOfIdentityContainerForMt5
)
-);
-
-describe('{children} ,
- });
- expect(screen.getByText('ProofOfIdentityContainerForMt5')).toBeInTheDocument();
- });
-});
diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
index d4a669254c27..0aa68ef8bb61 100644
--- a/packages/cfd/src/Components/cfd-account-card.tsx
+++ b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -21,7 +21,7 @@ import {
TCFDAccountCard,
TCFDAccountCardActionProps,
TTradingPlatformAccounts,
- TTradingPlatformAvailableAccount,
+ TModifiedTradingPlatformAvailableAccount,
} from './props.types';
import { CFD_PLATFORMS, CATEGORY, MARKET_TYPE } from '../Helpers/cfd-config';
import { TMarketTypeSynthetic, TAccountCategory } from '../types/market-type.types';
@@ -177,7 +177,6 @@ const CFDAccountCardComponent = observer(
setAccountType,
setJurisdictionSelectedShortcode,
setMT5TradeAccount,
- toggleCFDVerificationModal,
toggleMT5TradeModal,
} = useCfdStore();
@@ -189,10 +188,10 @@ const CFDAccountCardComponent = observer(
platform === CFD_PLATFORMS.MT5 &&
(type.category === CATEGORY.DEMO
? isEligibleForMoreDemoMt5Svg(
- type.type as TTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
+ type.type as TModifiedTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
) && !!existing_data
: isEligibleForMoreRealMt5(
- type.type as TTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
+ type.type as TModifiedTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
) && !!existing_data);
const platform_icon = show_eu_related_content && platform === CFD_PLATFORMS.MT5 ? CFD_PLATFORMS.CFD : type.type;
@@ -272,7 +271,6 @@ const CFDAccountCardComponent = observer(
});
setJurisdictionSelectedShortcode(landing_company_short);
updateAccountStatus();
- toggleCFDVerificationModal();
}}
primary
large
diff --git a/packages/cfd/src/Components/cfd-poa.tsx b/packages/cfd/src/Components/cfd-poa.tsx
deleted file mode 100644
index 30e9a0de87f2..000000000000
--- a/packages/cfd/src/Components/cfd-poa.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { FormikValues } from 'formik/dist/types';
-import ProofOfAddressForm from '@deriv/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form';
-import IconMessageContent from '@deriv/account/src/Components/icon-message-content';
-import { Localize } from '@deriv/translations';
-import { Button, Text, Icon } from '@deriv/components';
-
-type TCFDPOA = {
- index: number;
- onSave: (index: number, values: FormikValues) => void;
- onSubmit: (index: number, values: FormikValues) => void;
-};
-
-const CFDPOA = ({ index, onSave, onSubmit }: TCFDPOA) => {
- const [has_submitted_duplicate_poa, setHasSubmittedDuplicatePOA] = React.useState(false);
- const onSubmitForCFDModal = (values: FormikValues, has_submitted_duplicate_poa = false) => {
- if (has_submitted_duplicate_poa) {
- setHasSubmittedDuplicatePOA(has_submitted_duplicate_poa);
- } else {
- onSave(index, values);
- onSubmit(index, values);
- }
- };
-
- return (
-
- {has_submitted_duplicate_poa ? (
- setHasSubmittedDuplicatePOA(false)}
- has_effect
- primary
- large
- className='upload_error_btn'
- >
-
-
-
-
- ) : (
-
- )}
-
- );
-};
-
-export default CFDPOA;
diff --git a/packages/cfd/src/Components/cfd-poi.tsx b/packages/cfd/src/Components/cfd-poi.tsx
deleted file mode 100644
index 67ced113919b..000000000000
--- a/packages/cfd/src/Components/cfd-poi.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// @ts-expect-error remove this line when ProofOfIdentityContainerForMt5 is converted to TS
-import ProofOfIdentityContainerForMt5 from '@deriv/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx';
-import React from 'react';
-import { useStore, observer } from '@deriv/stores';
-import type { TCoreStores } from '@deriv/stores/types';
-
-type TCFDValue = {
- poi_state: string;
-};
-
-type TFormValues = {
- poi_state?: string;
-};
-
-export type TCFDPOIProps = {
- index: number;
- onSubmit: (index: number, value: TCFDValue) => void;
- value: TCFDValue;
- addNotificationMessageByKey: TCoreStores['notifications']['addNotificationMessageByKey'];
- height: string;
- onSave: (index: number, values: TFormValues) => void;
- removeNotificationByKey: TCoreStores['notifications']['removeNotificationByKey'];
- removeNotificationMessage: TCoreStores['notifications']['removeNotificationMessage'];
- jurisdiction_selected_shortcode: string;
-};
-
-const CFDPOI = observer(({ index, onSave, onSubmit, ...props }: TCFDPOIProps) => {
- const { client } = useStore();
- const { account_settings, residence_list } = client;
-
- const [poi_state, setPOIState] = React.useState('none');
- const citizen = account_settings?.citizen || account_settings?.country_code;
- const citizen_data = residence_list?.find(item => item.value === citizen);
-
- const onStateChange = (status: string) => {
- setPOIState(status);
- onSave(index, { poi_state: status });
- onSubmit(index, { poi_state });
- };
- return (
- onStateChange(status)}
- citizen_data={citizen_data}
- />
- );
-});
-
-export default CFDPOI;
diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
index e35eb267cf47..0f354d3c513b 100644
--- a/packages/cfd/src/Components/props.types.ts
+++ b/packages/cfd/src/Components/props.types.ts
@@ -1,4 +1,5 @@
import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
+import { TAdditionalDetailsOfEachMT5Loginid, TTradingPlatformAvailableAccount } from '@deriv/stores/types';
import { TCFDPasswordReset } from '../Containers/props.types';
@@ -8,7 +9,7 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader';
export type TCFDsPlatformType = 'dxtrade' | 'mt5' | 'ctrader' | '';
-export type TProducts = 'swap_free' | 'zero_spread' | 'ctrader' | 'derivx';
+export type TProducts = 'swap_free' | 'zero_spread' | 'ctrader' | 'derivx' | 'financial' | 'standard' | 'stp';
export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short'];
@@ -75,31 +76,11 @@ export type TCFDAccountCardActionProps = {
setShouldShowCooldownModal: (value: boolean) => void;
};
-export type TTradingPlatformAvailableAccount = {
- market_type: 'financial' | 'gaming' | 'all';
- name: string;
- requirements: {
- after_first_deposit: {
- financial_assessment: string[];
- };
- compliance: {
- mt5: string[];
- tax_information: string[];
- };
- signup: string[];
- };
- shortcode?: TShortcode;
- sub_account_type: string;
- account_type?: 'real' | 'demo';
- landing_company_short?: TShortcode;
- max_count?: number;
- available_count?: number;
-};
-
export type TModifiedTradingPlatformAvailableAccount = Omit & {
platform?: 'mt5' | 'dxtrade' | 'ctrader';
market_type: TTradingPlatformAvailableAccount['market_type'] | 'synthetic';
- product?: TProducts;
+ account_type?: 'real' | 'demo';
+ landing_company_short?: TShortcode;
};
export type TCardFlipStatus = {
@@ -264,7 +245,8 @@ export type TInstrumentsIcon = {
| 'Cryptocurrencies'
| 'ETF';
text: string;
- highlighted: boolean;
+ id?: string;
+ highlighted?: boolean;
className?: string;
is_asterisk?: boolean;
};
@@ -279,7 +261,7 @@ export type TJurisdictionData = {
jurisdiction?: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest' | 'malta';
};
-export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
+export type TDetailsOfEachMT5Loginid = TAdditionalDetailsOfEachMT5Loginid & {
display_login?: string;
white_label_links?: {
webtrader_url: string;
@@ -293,7 +275,6 @@ export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
selected_mt5_jurisdiction?: TOpenAccountTransferMeta &
TJurisdictionData & {
platform?: string;
+ product?: string;
};
-
- openFailedVerificationModal?: (from_account: string) => void;
};
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
deleted file mode 100644
index 323315b0bec4..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
-
-export const getJurisdictionBviContents = ({
- toggleDynamicLeverage,
-}: TJurisdictionCardParams): TJurisdictionCardItems => ({
- is_over_header_available: false,
- header: localize('British Virgin Islands'),
- synthetic_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('210+'),
- display_text_skin_color: 'red-darker',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)'),
- },
- ],
- financial_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('170+'),
- display_text_skin_color: 'red-light',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- clickable_description: [
- {
- type: 'link',
- text: localize('Dynamic Leverage'),
- onClick: toggleDynamicLeverage,
- },
- ],
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.2 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)'),
- },
- ],
- synthetic_verification_docs: ['document_number', 'name_and_address'],
- financial_verification_docs: ['document_number', 'name_and_address'],
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts
deleted file mode 100644
index 8f4e92bb6c48..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
-import { getJurisdictionBviContents } from './jurisdiction-bvi-contents';
-import { getJurisdictionLabuanContents } from './jurisdiction-labuan-contents';
-import { getJurisdictionSvgContents } from './jurisdiction-svg-contents';
-import { getJurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents';
-import { getJurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents';
-
-type TJurisdictionContent = {
- svg: TJurisdictionCardItems;
- vanuatu: TJurisdictionCardItems;
- labuan: TJurisdictionCardItems;
- maltainvest: TJurisdictionCardItems;
- bvi: TJurisdictionCardItems;
-};
-
-export const getJurisdictionContents = (params: TJurisdictionCardParams): TJurisdictionContent => ({
- svg: getJurisdictionSvgContents(params),
- bvi: getJurisdictionBviContents(params),
- vanuatu: getJurisdictionVanuatuContents(params),
- labuan: getJurisdictionLabuanContents(),
- maltainvest: getJurisdictionMaltainvestContents(),
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts
deleted file mode 100644
index 8ba60e64f76a..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems } from 'Components/props.types';
-
-export const getJurisdictionLabuanContents = (): TJurisdictionCardItems => ({
- over_header: localize('Straight-through processing'),
- is_over_header_available: true,
- header: localize('Labuan'),
- synthetic_contents: [
- { key: 'assets', title: localize('Assets'), description: localize('Forex and Cryptocurrencies') },
- { key: 'leverage', title: localize('Leverage') },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Labuan Financial Services Authority (licence no. MB/18/0024)'),
- },
- ],
- financial_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize('Forex (standard/exotic) and cryptocurrencies'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('80+'),
- display_text_skin_color: 'red-dark',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:100'),
- display_text_skin_color: 'yellow-dark',
- },
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.6 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Labuan Financial Services Authority (licence no. MB/18/0024)'),
- },
- ],
- synthetic_verification_docs: ['document_number', 'name_and_address'],
- financial_verification_docs: ['document_number', 'name_and_address'],
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
deleted file mode 100644
index 4fc1d769b1b4..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
-
-export const getJurisdictionSvgContents = ({
- toggleDynamicLeverage,
-}: TJurisdictionCardParams): TJurisdictionCardItems => ({
- is_over_header_available: false,
- header: localize('St. Vincent & Grenadines'),
- synthetic_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('210+'),
- display_text_skin_color: 'red-darker',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- description: localize(
- 'You will need to submit proof of identity and address once you reach certain thresholds.'
- ),
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Deriv (SVG) LLC (company no. 273 LLC 2020)'),
- },
- ],
- financial_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('170+'),
- display_text_skin_color: 'red-light',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- clickable_description: [
- {
- type: 'link',
- text: localize('Dynamic Leverage'),
- onClick: toggleDynamicLeverage,
- },
- ],
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.2 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- description: localize(
- 'You will need to submit proof of identity and address once you reach certain thresholds.'
- ),
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Deriv (SVG) LLC (company no. 273 LLC 2020)'),
- },
- ],
- swapfree_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex, stocks, stock indices, commodities, cryptocurrencies, ETFs and synthetic indices'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('40+'),
- display_text_skin_color: 'red-darker',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- description: localize(
- 'You will need to submit proof of identity and address once you reach certain thresholds.'
- ),
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Deriv (SVG) LLC (company no. 273 LLC 2020)'),
- },
- ],
- synthetic_verification_docs: [],
- financial_verification_docs: [],
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
deleted file mode 100644
index ff107e5edd2b..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
-
-export const getJurisdictionVanuatuContents = ({
- toggleDynamicLeverage,
-}: TJurisdictionCardParams): TJurisdictionCardItems => ({
- is_over_header_available: false,
- header: localize('Vanuatu'),
- synthetic_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('210+'),
- display_text_skin_color: 'red-darker',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Vanuatu Financial Services Commission'),
- },
- ],
- financial_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize(
- 'Forex (standard/micro), stocks, stock indices, commodities, cryptocurrencies and ETFs'
- ),
- title_indicators: {
- type: 'displayText',
- display_text: localize('170+'),
- display_text_skin_color: 'red-light',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:1000'),
- display_text_skin_color: 'yellow-light',
- },
- clickable_description: [
- {
- type: 'link',
- text: localize('Dynamic Leverage'),
- onClick: toggleDynamicLeverage,
- },
- ],
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.2 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Vanuatu Financial Services Commission'),
- },
- ],
- synthetic_verification_docs: ['document_number', 'name_and_address'],
- financial_verification_docs: ['document_number', 'name_and_address'],
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts
deleted file mode 100644
index 3bad30e99bc6..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionVerificationItems, TJurisdictionVerificationStatus } from 'Components/props.types';
-
-type TJurisdictionVerificationContents = {
- short_description: string;
- required_verification_docs: TJurisdictionVerificationItems;
- status_references: Array;
-};
-
-export const jurisdictionVerificationContents = (): TJurisdictionVerificationContents => ({
- short_description: localize('We need you to submit these in order to get this account:'),
- required_verification_docs: {
- document_number: {
- icon: 'IcDocumentNumberVerification',
- text: localize("Document number (e.g. identity card, passport, driver's license)"),
- },
- selfie: {
- icon: 'IcSelfieVerification',
- text: localize('A selfie of yourself.'),
- },
- identity_document: {
- icon: 'IcIdentityDocumentVerification',
- text: localize("A copy of your identity document (e.g. identity card, passport, driver's license)"),
- },
- name_and_address: {
- icon: 'IcNameAndAddressVerification',
- text: localize(
- 'A recent utility bill (e.g. electricity, water or gas) or recent bank statement or government-issued letter with your name and address.'
- ),
- },
- },
- status_references: [
- {
- icon: 'IcVerificationStatusYellow',
- text: localize('Verification in review.'),
- color: 'yellow',
- },
- {
- icon: 'IcVerificationStatusRed',
- text: localize('Verification failed. Resubmit your details.'),
- color: 'red',
- },
- { icon: 'IcVerificationStatusGreen', text: localize('Verification successful.'), color: 'green' },
- ],
-});
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts
deleted file mode 100644
index 38c0e38e6810..000000000000
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems } from 'Components/props.types';
-
-export const getJurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({
- is_over_header_available: false,
- header: localize('Malta'),
- synthetic_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('140+'),
- display_text_skin_color: 'red-light',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:30'),
- display_text_skin_color: 'brown-dark',
- },
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.5 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)'),
- },
- ],
- financial_contents: [
- {
- key: 'assets',
- title: localize('Assets'),
- description: localize('Forex, stocks, stock indices, commodities, cryptocurrencies and synthetic indices.'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('140+'),
- display_text_skin_color: 'red-light',
- },
- },
- {
- key: 'leverage',
- title: localize('Leverage'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('1:30'),
- display_text_skin_color: 'brown-dark',
- },
- },
- {
- key: 'spreadsFrom',
- title: localize('Spreads from'),
- title_indicators: {
- type: 'displayText',
- display_text: localize('0.5 pips'),
- display_text_skin_color: 'violet-dark',
- },
- },
- {
- key: 'verifications',
- title: localize('Verifications'),
- title_indicators: { type: 'displayIcons' },
- clickable_description: [
- { type: 'link', text: localize('Learn more') },
- { type: 'text', text: localize('about required verifications.') },
- ],
- },
- {
- key: 'regulator',
- title: localize('Regulator/EDR'),
- description: localize('Malta Financial Services Authority (MFSA) (licence no. IS/70156)'),
- },
- ],
- synthetic_verification_docs: ['selfie', 'identity_document', 'name_and_address'],
- financial_verification_docs: ['selfie', 'identity_document', 'name_and_address'],
-});
diff --git a/packages/cfd/src/Containers/__tests__/cfd-financial-stp-real-account-signup.spec.js b/packages/cfd/src/Containers/__tests__/cfd-financial-stp-real-account-signup.spec.js
deleted file mode 100644
index d98092f8f6e8..000000000000
--- a/packages/cfd/src/Containers/__tests__/cfd-financial-stp-real-account-signup.spec.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import CFDFinancialStpRealAccountSignup from '../cfd-financial-stp-real-account-signup';
-import CFDProviders from '../../cfd-providers';
-import { mockStore } from '@deriv/stores';
-import { getAuthenticationStatusInfo } from '@deriv/shared';
-
-jest.mock('@deriv/account', () => ({
- ...jest.requireActual('@deriv/account'),
- FormSubHeader: () => FormSubHeader
,
-}));
-
-const MockComponent = ({ prevStep, nextStep }) => (
-
- Prev Step
- nextStep(0, {})}>Next Step
-
-);
-
-jest.mock('../../Components/cfd-poa', () =>
- jest.fn(({ onCancel, onSubmit }) => (
-
- CFDPOA
-
- ))
-);
-
-jest.mock('../../Components/cfd-poi', () =>
- jest.fn(({ onCancel, onSubmit }) => (
-
- CFDPOI
-
- ))
-);
-
-jest.mock('@deriv/shared', () => ({
- ...jest.requireActual('@deriv/shared'),
- getAuthenticationStatusInfo: jest.fn().mockReturnValue({}),
-}));
-
-const getByTextFn = (text, should_be) => {
- if (should_be) {
- expect(screen.getByText(text)).toBeInTheDocument();
- } else {
- expect(screen.queryByText(text)).not.toBeInTheDocument();
- }
-};
-
-const testAllStepsFn = (steps, step_no) => {
- steps.map((step, index) => {
- if (index === step_no) {
- getByTextFn(step.body, true);
- } else {
- getByTextFn(step.body, false);
- }
- });
-};
-
-const steps = [
- {
- body: 'CFDPOI',
- },
- {
- body: 'CFDPOA',
- },
-];
-
-describe('{children} ,
- });
-
- expect(screen.getByTestId('dt_cfd_financial_stp_modal_body')).toBeInTheDocument();
- });
-
- it('should render properly for the first step content', () => {
- getAuthenticationStatusInfo.mockReturnValueOnce({ need_poi_for_bvi_labuan_vanuatu: true });
- render({children} ,
- });
-
- testAllStepsFn(steps, 0);
- });
-
- it('should render properly for the second step content', () => {
- getAuthenticationStatusInfo.mockReturnValueOnce({ poa_resubmit_for_labuan: true });
- const { getByTestId } = render({children} ,
- });
-
- testAllStepsFn(steps, 1);
- });
-
- it('should check for POI status when Jurisdiction is Vanuatu or maltainvest', () => {
- const new_mock_store = {
- ...mockRootStore,
- modules: {
- ...mockRootStore.modules,
- cfd: {
- ...mockRootStore.modules.cfd,
- jurisdiction_selected_shortcode: 'vanuatu',
- },
- },
- };
-
- getAuthenticationStatusInfo.mockReturnValueOnce({ need_poi_for_bvi_labuan_vanuatu: true });
-
- render({children} ,
- });
- testAllStepsFn(steps, 0);
- });
-
- it('should check for POA status when Jurisdiction is Labuan and resubmit status is set to true', () => {
- const verified_jurisdiction = {
- bvi: 1,
- labuan: 0,
- maltainvest: 0,
- svg: 1,
- vanuatu: 0,
- virtual: 0,
- };
- const new_mock_store = {
- ...mockRootStore,
- client: {
- ...mockRootStore.client,
- account_status: {
- authentication: {
- document: {
- verified_jurisdiction,
- status: 'none',
- },
- attempts: {
- latest: {
- service: 'idv',
- },
- },
- },
- },
- },
- modules: {
- ...mockRootStore.modules,
- cfd: {
- ...mockRootStore.modules.cfd,
- jurisdiction_selected_shortcode: 'labuan',
- },
- },
- };
-
- getAuthenticationStatusInfo.mockReturnValueOnce({ need_poi_for_maltainvest: true });
-
- render({children} ,
- });
- testAllStepsFn(steps, 1);
- });
-});
diff --git a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js
index 622f292a67c5..2b7b4ddf1262 100644
--- a/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js
+++ b/packages/cfd/src/Containers/__tests__/cfd-password-modal.spec.js
@@ -114,14 +114,18 @@ describe('
- ,
{
wrapper: ({ children }) => {children} ,
@@ -321,7 +325,7 @@ describe('{children}
- );
-
- render({children} ;
- it('should render CFDCompareAccountsDescription component on default props', () => {
- render(
+
+ );
expect(screen.getByText('Up to 1:30')).toBeInTheDocument();
- expect(screen.getByText('Deriv Investments (Europe) Limited')).toBeInTheDocument();
- expect(screen.getByText('Malta')).toBeInTheDocument();
- expect(screen.getByText('Financial Commission')).toBeInTheDocument();
- expect(
- screen.getByText('Regulated by the Malta Financial Services Authority (MFSA) (licence no. IS/70156)')
- ).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
});
- it('should render demo content for gaming market type with market type svg', () => {
- mocked_props.trading_platforms.market_type = 'financial';
- mocked_props.trading_platforms.shortcode = 'svg';
- mocked_props.is_demo = true;
-
- render(
+
+ );
+ expect(screen.getByText('Up to 1:30')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
});
});
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-platform-label.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-platform-label.spec.tsx
index ec754603f315..b808ad63682e 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-platform-label.spec.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-platform-label.spec.tsx
@@ -17,6 +17,11 @@ describe('Mocked Icon
));
const mocked_props = {
- trading_platforms: {
- platform: 'mt5',
- market_type: 'gaming',
- shortcode: 'svg',
- product: '',
- },
+ trading_platforms: {},
is_eu_user: false,
is_demo: false,
};
describe('{children}
);
@@ -52,4 +55,20 @@ describe('{children}
+ );
+
+ render(
-
-
-
- )}
);
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx
index 0e008aa66602..5dab0c3206a8 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx
@@ -8,14 +8,26 @@ import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare
import { REGION, CFD_PLATFORMS, MARKET_TYPE_SHORTCODE } from '../../Helpers/cfd-config';
const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
- const market_type = getMarketType(trading_platforms);
- const market_type_shortcode =
- trading_platforms.platform === CFD_PLATFORMS.MT5 && market_type === 'all'
- ? `${market_type}_${trading_platforms.product}_${trading_platforms.shortcode}`
- : market_type.concat('_', trading_platforms.shortcode ?? '');
- const juridisction_data = getJuridisctionDescription(market_type_shortcode);
const { traders_hub } = useStore();
const { selected_region } = traders_hub;
+
+ const getMarketTypeShortcode = () => {
+ if (
+ trading_platforms.platform === CFD_PLATFORMS.DXTRADE ||
+ trading_platforms.platform === CFD_PLATFORMS.CTRADER
+ ) {
+ return market_type.concat('_', trading_platforms.shortcode ?? '');
+ } else if (trading_platforms.platform === CFD_PLATFORMS.MT5 && market_type === 'all') {
+ return `${market_type}_${trading_platforms.product}_${trading_platforms.shortcode}`;
+ }
+ return market_type;
+ };
+
+ const market_type = getMarketType(trading_platforms);
+ const market_type_shortcode = getMarketTypeShortcode();
+
+ const juridisction_data = getJuridisctionDescription(market_type_shortcode, trading_platforms);
+
const zero_spread_spread_message = localize('Commissions apply');
return (
@@ -26,7 +38,7 @@ const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareA
>
- {localize('Up to')} {juridisction_data.leverage}
+ {localize('Up to')} {juridisction_data.leverage ?? ''}
{selected_region === REGION.NON_EU ? juridisction_data.leverage_description : localize('Leverage')}
@@ -56,39 +68,6 @@ const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareA
)}
- {!is_demo && (
-
-
-
- {juridisction_data.counterparty_company}
-
-
- {juridisction_data.counterparty_company_description}
-
-
-
-
- {juridisction_data.jurisdiction}
-
-
- {juridisction_data.jurisdiction_description}
-
-
-
-
- {juridisction_data.regulator}
-
- {juridisction_data.regulator_license && (
-
- {juridisction_data.regulator_license}
-
- )}
-
- {juridisction_data.regulator_description}
-
-
-
- )}
);
};
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx
index 358dd45b4cf3..34a2cf2e8171 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx
@@ -14,6 +14,8 @@ const CFDCompareAccountsPlatformLabel = ({ trading_platforms }: TCompareAccounts
'compare-cfd-account-platform-label--other-cfds':
platform_label === platformsHeaderLabel.other_cfds ||
platform_label === platformsHeaderLabel.ctrader,
+ 'compare-cfd-account-platform-label--derivx': platform_label === platformsHeaderLabel.derivx,
+ 'compare-cfd-account-platform-label--ctrader': platform_label === platformsHeaderLabel.ctrader,
})}
>
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx
index da89afd19d30..9b7e97cc87d9 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx
@@ -1,17 +1,22 @@
import React from 'react';
import { Text, Popover } from '@deriv/components';
+import { useDevice } from '@deriv-com/ui';
import { localize } from '@deriv/translations';
import TradigPlatformIconProps from '../../Assets/svgs/trading-platform';
import { TCompareAccountsCard } from 'Components/props.types';
import { getAccountCardTitle, getMarketType, getAccountIcon } from '../../Helpers/compare-accounts-config';
import { CFD_PLATFORMS, MARKET_TYPE, MARKET_TYPE_SHORTCODE } from '../../Helpers/cfd-config';
+import { PRODUCT } from '@deriv/shared';
const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => {
+ const { isDesktop } = useDevice();
const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs';
+
const market_type_shortcode =
- trading_platforms.platform === CFD_PLATFORMS.MT5 && market_type === MARKET_TYPE.ALL
+ trading_platforms.platform === CFD_PLATFORMS.MT5 &&
+ (market_type === MARKET_TYPE.ALL || trading_platforms.product === PRODUCT.STP)
? `${market_type}_${trading_platforms.product}_${trading_platforms.shortcode}`
- : market_type.concat('_', trading_platforms.shortcode ?? '');
+ : market_type ?? '';
const jurisdiction_card_icon =
trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER
? getAccountIcon(trading_platforms.platform)
@@ -20,8 +25,10 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }:
trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER
? getAccountCardTitle(trading_platforms.platform, is_demo)
: getAccountCardTitle(market_type_shortcode, is_demo);
- const labuan_jurisdiction_message = localize(
- 'Choosing this jurisdiction will give you a Financial STP account. Your trades will go directly to the market and have tighter spreads.'
+ const labuan_jurisdiction_message = (
+
+ {localize('This account gives you direct market price access and tighter spreads.')}
+
);
return (
@@ -46,7 +53,7 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }:
)}
-
);
};
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss
index fbfdb6d319d7..684bf67c6a1e 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss
@@ -53,17 +53,15 @@
width: 27rem;
border: 1px solid var(--general-hover);
border-radius: 2.4rem;
- padding-bottom: 1.6rem;
&:hover {
box-shadow: 0 2px 8px 0 var(--shadow-menu);
}
@include mobile-or-tablet-screen {
- width: 18rem;
+ width: 20rem;
}
&__eu-clients {
position: relative;
top: 0.5rem;
- text-align: center;
}
&__banner {
position: absolute;
@@ -85,17 +83,13 @@
&-outline {
display: flex;
flex-direction: column;
- padding: 4rem 2.4rem 0;
+ padding: 1.6rem 2.4rem 2.4rem;
border-radius: 2.4rem;
- @include mobile-or-tablet-screen {
- padding: 7rem 1.5rem 1.5rem;
- }
}
&-text-container {
max-height: 25.5rem;
@include mobile {
- min-height: 32rem;
height: fit-content;
}
@@ -137,9 +131,9 @@
position: relative;
width: 62%;
@include mobile-or-tablet-screen {
- display: block;
+ display: flex;
position: fixed;
- width: 15.2rem;
+ width: 13.4rem;
right: 0;
}
}
@@ -167,10 +161,21 @@
&--other-cfds {
background-color: var(--header-background-others);
}
+ &--derivx {
+ background-color: var(--header-background-others);
+ }
+ &--ctrader {
+ background-color: #{$color-yellow-6};
+ }
}
&-underline {
- border-top: 0.5rem solid var(--less-prominent);
- width: 21.3rem;
+ height: 1px;
+ width: 75%;
+ background-color: var(--general-hover);
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-top: 0.4rem;
}
&__button {
width: calc(100% - 4rem);
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
index 57ad68ada583..b6f97a23ece3 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
@@ -64,19 +64,20 @@ const CompareCFDs = observer(() => {
? all_cfd_available_accounts.length + 1
: all_cfd_available_accounts.length;
- const CompareAccountsHeader = (
-
@@ -93,7 +94,7 @@ const CompareCFDs = observer(() => {
- {CompareAccountsHeader}
+ {getCompareAccountsHeader()}
@@ -142,7 +143,7 @@ const CompareCFDs = observer(() => {
return (
history.push(routes.traders_hub)}
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx
index 438628b03420..5d542839c2ab 100644
--- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx
+++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx
@@ -1,4 +1,6 @@
import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
import InstrumentsIconWithLabel from './instruments-icon-with-label';
import { TInstrumentsIcon, TCompareAccountsCard } from 'Components/props.types';
import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
@@ -6,15 +8,38 @@ import { useStore } from '@deriv/stores';
const CFDInstrumentsLabelHighlighted = ({ trading_platforms }: TCompareAccountsCard) => {
const { traders_hub } = useStore();
- const selected_region = traders_hub.selected_region;
+ const { selected_region, is_eu_user } = traders_hub;
const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms, selected_region)];
return (
- {iconData.map(item => (
-
- ))}
+ {is_eu_user ? (
+
+ {iconData
+ .filter(item => item.highlighted)
+ .map(item => (
+
+
+
+
+
+ ) : (
+ iconData.map(item => (
+
+ ))
+ )}
+
{text}
+ {is_asterisk && (
+
+ *
+
+ )}
- {is_asterisk && (
-
- *
-
- )}
);
};
diff --git a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx b/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx
deleted file mode 100644
index 02073b333de5..000000000000
--- a/packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react';
-import { useDevice } from '@deriv-com/ui';
-import { PoiPoaDocsSubmitted } from '@deriv/account';
-import { AccountStatusResponse } from '@deriv/api-types';
-import { Button, Icon, Loading, MobileDialog, Modal, Text, UILoader } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { getAuthenticationStatusInfo, isMobile, WS, isPOARequiredForMT5 } from '@deriv/shared';
-import CFDFinancialStpRealAccountSignup from './cfd-financial-stp-real-account-signup';
-import { observer, useStore } from '@deriv/stores';
-import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
-import { JURISDICTION } from '../Helpers/cfd-config';
-
-const SwitchToRealAccountMessage = ({ onClickOk }: { onClickOk: () => void }) => (
-
-
- {localize('Switch to your real account to submit your documents')}
-
- {
- onClickOk();
- }}
- className='da-icon-with-message__button'
- primary
- />
-
-);
-
-const CFDDbviOnboarding = observer(() => {
- const { isDesktop } = useDevice();
- const {
- client,
- ui,
- modules: { cfd },
- } = useStore();
-
- const { account_status, fetchAccountSettings, is_virtual, updateAccountStatus, updateMT5Status } = client;
- const { disableApp, enableApp } = ui;
- const { setProduct } = cfd;
-
- const {
- has_created_account_for_selected_jurisdiction,
- has_submitted_cfd_personal_details,
- is_cfd_verification_modal_visible,
- jurisdiction_selected_shortcode,
- enableCFDPasswordModal,
- toggleCFDVerificationModal,
- } = useCfdStore();
-
- const [showSubmittedModal, setShowSubmittedModal] = React.useState(true);
- const [is_loading, setIsLoading] = React.useState(false);
-
- const getAccountStatusFromAPI = () => {
- WS.authorized.getAccountStatus().then((response: AccountStatusResponse) => {
- const { get_account_status } = response;
- if (get_account_status?.authentication) {
- const { poi_acknowledged_for_maltainvest, poi_acknowledged_for_bvi_labuan_vanuatu, poa_acknowledged } =
- getAuthenticationStatusInfo(get_account_status);
- if (jurisdiction_selected_shortcode === JURISDICTION.MALTA_INVEST) {
- setShowSubmittedModal(poi_acknowledged_for_maltainvest && poa_acknowledged);
- } else {
- /**
- * Need to retrigger POA when user has not explicitly submitted Address proof docs
- */
- const is_poa_required_for_mt5 = isPOARequiredForMT5(
- account_status,
- jurisdiction_selected_shortcode
- );
- setShowSubmittedModal(
- poi_acknowledged_for_bvi_labuan_vanuatu &&
- has_submitted_cfd_personal_details &&
- !is_poa_required_for_mt5
- );
- }
- }
-
- setIsLoading(false);
- });
- setIsLoading(false);
- };
-
- const clickOncloseButton = () => {
- toggleCFDVerificationModal();
- setProduct();
- };
-
- React.useEffect(() => {
- if (is_cfd_verification_modal_visible) {
- setIsLoading(true);
- getAccountStatusFromAPI();
- fetchAccountSettings();
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [is_cfd_verification_modal_visible]);
-
- const getModalContent = () => {
- if (is_loading) {
- return {
- updateMT5Status();
- if (has_created_account_for_selected_jurisdiction) {
- setShowSubmittedModal(true);
- } else {
- toggleCFDVerificationModal();
- enableCFDPasswordModal();
- }
- }}
- />
- );
- };
-
- const getModalTitle = () =>
- has_created_account_for_selected_jurisdiction
- ? localize('Submit your proof of identity and address')
- : localize('Add a real MT5 account');
-
- return (
- getAccountStatusFromAPI()}
- exit_classname='cfd-modal--custom-exit'
- >
- {getModalContent()}
-
- ) : (
-
- {getModalContent()}
-
- )}
-
- );
-});
-
-export default CFDDbviOnboarding;
diff --git a/packages/cfd/src/Containers/cfd-enter-password-modal-title.tsx b/packages/cfd/src/Containers/cfd-enter-password-modal-title.tsx
new file mode 100644
index 000000000000..bdc995dc8694
--- /dev/null
+++ b/packages/cfd/src/Containers/cfd-enter-password-modal-title.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { getCFDPlatformLabel, getCFDPlatformNames } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import { CATEGORY, CFD_PLATFORMS } from '../Helpers/cfd-config';
+
+type TCFDEnterPasswordModalTitleProps = { platform: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS] };
+
+const CFDEnterPasswordModalTitle = observer(({ platform }: TCFDEnterPasswordModalTitleProps) => {
+ const {
+ modules: { cfd },
+ } = useStore();
+ const { account_title, account_type } = cfd;
+
+ const getAccountCardTitle = () => {
+ switch (platform) {
+ case CFD_PLATFORMS.CTRADER:
+ case CFD_PLATFORMS.DXTRADE:
+ return account_type.category === CATEGORY.REAL ? 'Real' : '';
+ default:
+ return account_title;
+ }
+ };
+
+ return (
+
+ {platform === CFD_PLATFORMS.MT5 ? (
+
+ );
+});
+
+export default CFDEnterPasswordModalTitle;
diff --git a/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx b/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx
deleted file mode 100644
index 777a17646914..000000000000
--- a/packages/cfd/src/Containers/cfd-financial-stp-real-account-signup.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import React from 'react';
-import { useDevice } from '@deriv-com/ui';
-import { Div100vhContainer } from '@deriv/components';
-import { getAuthenticationStatusInfo, isPOARequiredForMT5 } from '@deriv/shared';
-import { observer, useStore } from '@deriv/stores';
-import type { TCoreStores } from '@deriv/stores/types';
-import CFDPOA from '../Components/cfd-poa';
-import CFDPOI from '../Components/cfd-poi';
-import CFDPersonalDetailsContainer from './cfd-personal-details-container';
-import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
-import { JURISDICTION } from '../Helpers/cfd-config';
-
-type TCFDFinancialStpRealAccountSignupProps = {
- onFinish: () => void;
-};
-
-type TNextStep = (index: number, value: { [key: string]: string | undefined }) => void;
-
-type TItem = {
- refreshNotifications: TCoreStores['notifications']['refreshNotifications'];
- removeNotificationMessage: TCoreStores['notifications']['removeNotificationMessage'];
- removeNotificationByKey: TCoreStores['notifications']['removeNotificationByKey'];
- addNotificationMessageByKey: TCoreStores['notifications']['addNotificationMessageByKey'];
- authentication_status: TCoreStores['client']['authentication_status'];
- account_settings: TCoreStores['client']['account_settings'];
- email: TCoreStores['client']['email'];
- is_fully_authenticated: TCoreStores['client']['is_fully_authenticated'];
- landing_company: TCoreStores['client']['landing_company'];
- residence_list: TCoreStores['client']['residence_list'];
- states_list: TCoreStores['client']['states_list'];
- fetchStatesList: TCoreStores['client']['fetchStatesList'];
- account_status: TCoreStores['client']['account_status'];
- jurisdiction_selected_shortcode: TCoreStores['modules']['cfd']['jurisdiction_selected_shortcode'];
- has_submitted_cfd_personal_details: TCoreStores['modules']['cfd']['has_submitted_cfd_personal_details'];
- onFinish: TCFDFinancialStpRealAccountSignupProps['onFinish'];
-};
-
-type TItemsState = {
- body: typeof CFDPOI | typeof CFDPOA | typeof CFDPersonalDetailsContainer;
- form_value: { [key: string]: string | undefined };
- forwarded_props: Array>;
-};
-
-const CFDFinancialStpRealAccountSignup = observer(({ onFinish }: TCFDFinancialStpRealAccountSignupProps) => {
- const { isDesktop } = useDevice();
- const { notifications, client } = useStore();
-
- const { refreshNotifications, removeNotificationMessage, removeNotificationByKey, addNotificationMessageByKey } =
- notifications;
-
- const {
- authentication_status,
- account_settings,
- email,
- is_fully_authenticated,
- landing_company,
- residence_list,
- states_list,
- fetchStatesList,
- account_status,
- } = client;
-
- const { jurisdiction_selected_shortcode, has_submitted_cfd_personal_details } = useCfdStore();
-
- const passthroughProps = {
- refreshNotifications,
- removeNotificationMessage,
- removeNotificationByKey,
- addNotificationMessageByKey,
- authentication_status,
- account_settings,
- email,
- is_fully_authenticated,
- landing_company,
- residence_list,
- states_list,
- fetchStatesList,
- account_status,
- jurisdiction_selected_shortcode,
- has_submitted_cfd_personal_details,
- onFinish,
- } as const;
-
- const [step, setStep] = React.useState(0);
- const [form_error, setFormError] = React.useState('');
- const state_index = step;
- let is_mounted = React.useRef(true).current;
-
- const { need_poi_for_maltainvest, need_poi_for_bvi_labuan_vanuatu } = getAuthenticationStatusInfo(account_status);
-
- const poi_config: TItemsState = {
- body: CFDPOI,
- form_value: {
- poi_state: 'unknown',
- },
- forwarded_props: [
- 'addNotificationMessageByKey',
- 'authentication_status',
- 'refreshNotifications',
- 'removeNotificationMessage',
- 'removeNotificationByKey',
- 'jurisdiction_selected_shortcode',
- ],
- };
-
- const poa_config: TItemsState = {
- body: CFDPOA,
- form_value: {},
- forwarded_props: [],
- };
-
- const personal_details_config: TItemsState = {
- body: CFDPersonalDetailsContainer,
- form_value: {
- citizen: '',
- place_of_birth: '',
- tax_residence: '',
- tax_identification_number: '',
- account_opening_reason: '',
- },
- forwarded_props: ['residence_list', 'landing_company'],
- };
-
- const should_show_poi = () => {
- if (jurisdiction_selected_shortcode === JURISDICTION.MALTA_INVEST) {
- return need_poi_for_maltainvest;
- }
- return need_poi_for_bvi_labuan_vanuatu;
- };
-
- const shouldShowPOA = () => {
- return isPOARequiredForMT5(account_status, jurisdiction_selected_shortcode);
- };
-
- const should_show_personal_details =
- !has_submitted_cfd_personal_details && jurisdiction_selected_shortcode !== JURISDICTION.MALTA_INVEST;
-
- const verification_configs = [
- ...(should_show_poi() ? [poi_config] : []),
- ...(shouldShowPOA() ? [poa_config] : []),
- ...(should_show_personal_details ? [personal_details_config] : []),
- ];
-
- const [items, setItems] = React.useState[]>(verification_configs);
-
- const clearError = () => {
- setFormError('');
- };
-
- React.useEffect(() => {
- refreshNotifications();
- }, [items, refreshNotifications]);
-
- React.useEffect(() => {
- fetchStatesList();
- }, [fetchStatesList]);
-
- const unmount = () => {
- is_mounted = false;
- onFinish();
- };
-
- const saveFormData = (index: number, value: { [key: string]: string | undefined }) => {
- if (!is_mounted) return; // avoiding state update on unmounted component
- const cloned_items: TItemsState[] = [...items];
- cloned_items[index].form_value = value;
- setItems(cloned_items);
- };
-
- const nextStep: TNextStep = (index, value) => {
- clearError();
- if (step + 1 < items.length) {
- saveFormData(index, value);
- setStep(step + 1);
- } else unmount();
- };
-
- const prevStep = () => {
- if (step - 1 >= 0) {
- setStep(step - 1);
- setFormError('');
- } else unmount();
- };
-
- const getCurrent = (key?: keyof TItemsState) => {
- return key ? items[state_index][key] : items[state_index];
- };
-
- const BodyComponent = getCurrent('body') as typeof CFDPOI & typeof CFDPOA & typeof CFDPersonalDetailsContainer;
-
- const form_value = getCurrent('form_value');
-
- const passthrough: Partial = (
- (getCurrent('forwarded_props') || []) as TItemsState['forwarded_props']
- ).reduce((forwarded_prop, item) => {
- return Object.assign(forwarded_prop, {
- [item]: passthroughProps[item],
- });
- }, {});
-
- return (
-
-
-
-
- );
-});
-
-export default CFDFinancialStpRealAccountSignup;
diff --git a/packages/cfd/src/Containers/cfd-password-change.tsx b/packages/cfd/src/Containers/cfd-password-change.tsx
index 0dd66adc8e7c..2d5e6d948d51 100644
--- a/packages/cfd/src/Containers/cfd-password-change.tsx
+++ b/packages/cfd/src/Containers/cfd-password-change.tsx
@@ -26,6 +26,7 @@ type TCFDPasswordChangeProps = TCFDPasswordFormReusedProps & {
onForgotPassword: () => void;
setNewPasswordValue?: React.Dispatch>;
should_set_trading_password: boolean;
+ need_tnc: boolean;
};
type TOnSubmitPasswordChange = (
@@ -42,6 +43,7 @@ const CFDPasswordChange = observer(
setNewPasswordValue,
should_set_trading_password,
platform,
+ need_tnc,
}: TCFDPasswordChangeProps) => {
const { isMobile } = useDevice();
const { ui, modules } = useStore();
@@ -199,6 +201,7 @@ const CFDPasswordChange = observer(
platform={platform}
checked={checked}
onCheck={() => setChecked(prev => !prev)}
+ need_tnc={need_tnc}
/>
)}
diff --git a/packages/cfd/src/Containers/cfd-password-modal-info.tsx b/packages/cfd/src/Containers/cfd-password-modal-info.tsx
index 7337a7719f91..471556ea0cec 100644
--- a/packages/cfd/src/Containers/cfd-password-modal-info.tsx
+++ b/packages/cfd/src/Containers/cfd-password-modal-info.tsx
@@ -2,28 +2,49 @@ import React from 'react';
import { Icon, Text } from '@deriv/components';
import { Localize } from '@deriv/translations';
import { DBVI_COMPANY_NAMES } from '@deriv/shared';
+import { useIsSelectedMT5AccountCreated } from '@deriv/hooks';
type CfdPasswordModalInfoProps = {
jurisdiction_selected_shortcode: string;
platform: string;
product: string;
+ need_tnc: boolean;
};
-const CfdPasswordModalInfo = ({ jurisdiction_selected_shortcode, platform, product }: CfdPasswordModalInfoProps) => {
+const CfdPasswordModalInfo = ({ platform, product, need_tnc }: CfdPasswordModalInfoProps) => {
+ const { available_account_to_create } = useIsSelectedMT5AccountCreated();
return (
-
-
);
diff --git a/packages/cfd/src/Containers/cfd-password-modal-title.tsx b/packages/cfd/src/Containers/cfd-password-modal-title.tsx
deleted file mode 100644
index b4a523cf2a3b..000000000000
--- a/packages/cfd/src/Containers/cfd-password-modal-title.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { Text } from '@deriv/components';
-import { getCFDPlatformNames, getCFDPlatformLabel, getFormattedJurisdictionCode } from '@deriv/shared';
-import { observer, useStore } from '@deriv/stores';
-import { Localize } from '@deriv/translations';
-import { CATEGORY, CFD_PLATFORMS } from '../Helpers/cfd-config';
-import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
-
-type TCFDPasswordModalTitleProps = { platform: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS] };
-
-const CFDPasswordModalTitle = observer(({ platform }: TCFDPasswordModalTitleProps) => {
- const { traders_hub } = useStore();
- const { show_eu_related_content } = traders_hub;
- const { account_title, account_type, jurisdiction_selected_shortcode } = useCfdStore();
-
- const accountTitle = (category: typeof CATEGORY[keyof typeof CATEGORY]) => {
- switch (platform) {
- case CFD_PLATFORMS.CTRADER:
- case CFD_PLATFORMS.DXTRADE:
- return category === CATEGORY.REAL ? 'Real' : '';
- default:
- return account_title;
- }
- };
-
- const showJurisdiction = () => {
- if (platform === CFD_PLATFORMS.DXTRADE) {
- return '';
- } else if (!show_eu_related_content) {
- return getFormattedJurisdictionCode(jurisdiction_selected_shortcode);
- }
- return 'CFDs';
- };
-
- return (
-
- {account_type.category === CATEGORY.REAL && (
-
- );
-});
-
-export default CFDPasswordModalTitle;
diff --git a/packages/cfd/src/Containers/cfd-password-modal-tnc.tsx b/packages/cfd/src/Containers/cfd-password-modal-tnc.tsx
index 9bb595222285..544e79ebe26f 100644
--- a/packages/cfd/src/Containers/cfd-password-modal-tnc.tsx
+++ b/packages/cfd/src/Containers/cfd-password-modal-tnc.tsx
@@ -1,40 +1,41 @@
import React from 'react';
import { getCFDPlatformLabel, CFD_PRODUCTS_TITLE, CFD_PLATFORMS } from '@deriv/shared';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
import CfdPasswordModalInfo from './cfd-password-modal-info';
-import JurisdictionCheckBox from './jurisdiction-modal/jurisdiction-modal-checkbox';
+import JurisdictionCheckBox from './jurisdiction-checkbox';
import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
import classNames from 'classnames';
type CfdPasswordModalTncProps = {
platform: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS];
checked: boolean;
+ need_tnc: boolean;
onCheck: () => void;
className?: string;
};
-const CfdPasswordModalTnc = observer(({ platform, checked, onCheck, className }: CfdPasswordModalTncProps) => {
- const { client } = useStore();
- const { should_restrict_vanuatu_account_creation, should_restrict_bvi_account_creation } = client;
- const { jurisdiction_selected_shortcode } = useCfdStore();
-
- return (
-
-
- );
-});
+const CfdPasswordModalTnc = observer(
+ ({ platform, checked, onCheck, className, need_tnc }: CfdPasswordModalTncProps) => {
+ const { jurisdiction_selected_shortcode, account_title } = useCfdStore();
+ return (
+
+
+ );
+ }
+);
export default CfdPasswordModalTnc;
diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx
index 3bd3a1f3f0d5..500167672766 100644
--- a/packages/cfd/src/Containers/cfd-password-modal.tsx
+++ b/packages/cfd/src/Containers/cfd-password-modal.tsx
@@ -2,8 +2,8 @@ import React from 'react';
import { useHistory } from 'react-router';
import { Formik, FormikErrors, FormikHelpers } from 'formik';
import { useDevice } from '@deriv-com/ui';
-
import { SentEmailModal } from '@deriv/account';
+import '../sass/cfd.scss';
import {
FormSubmitButton,
Icon,
@@ -15,10 +15,9 @@ import {
Text,
} from '@deriv/components';
import {
- getAuthenticationStatusInfo,
getCFDPlatformLabel,
+ getCFDPlatformNames,
getErrorMessages,
- getLegalEntityName,
routes,
validLength,
validPassword,
@@ -29,25 +28,34 @@ import {
} from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { Localize, localize } from '@deriv/translations';
-
-import { TProducts } from '../Components/props.types';
+import CFDEnterPasswordModalTitle from './cfd-enter-password-modal-title';
import SuccessDialog from '../Components/success-dialog/success-dialog';
-import CFDPasswordModalTitle from './cfd-password-modal-title';
-import TradingPlatformIcon from '../Assets/svgs/trading-platform';
import MigrationSuccessModal from '../Components/migration-success-modal';
import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
-import { CFD_PLATFORMS, JURISDICTION, CATEGORY, PRODUCT } from '../Helpers/cfd-config';
+import { CFD_PLATFORMS, CATEGORY } from '../Helpers/cfd-config';
+import classNames from 'classnames';
import { getDxCompanies, getMtCompanies, TDxCompanies, TMtCompanies } from '../Stores/Modules/CFD/Helpers/cfd-config';
-import '../sass/cfd.scss';
-import CfdPasswordModalTnc from './cfd-password-modal-tnc';
-import classNames from 'classnames';
+const MT5CreatePassword = makeLazyLoader(
+ () => moduleLoader(() => import('./mt5-create-password/mt5-create-password')),
+ () =>
+)();
+
+const CfdPasswordModalTnc = makeLazyLoader(
+ () => moduleLoader(() => import('./cfd-password-modal-tnc')),
+ () =>
+)();
const CFDPasswordChange = makeLazyLoader(
() => moduleLoader(() => import('./cfd-password-change')),
() =>
)();
+const CFDPasswordSuccessIcon = makeLazyLoader(
+ () => moduleLoader(() => import('./cfd-password-success-icon')),
+ () =>
+)();
+
const CFDPasswordChangeContent = makeLazyLoader(
() => moduleLoader(() => import('./cfd-password-change-content')),
() =>
@@ -69,13 +77,6 @@ type TPasswordModalHeaderProps = {
has_mt5_account?: boolean;
};
-type TIconTypeProps = {
- platform: string;
- type?: string;
- show_eu_related_content: boolean;
- product?: TProducts;
-};
-
type TCFDPasswordFormReusedProps = {
platform: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS];
error_message: string;
@@ -85,37 +86,34 @@ type TCFDPasswordFormReusedProps = {
type TCFDCreatePasswordProps = TCFDPasswordFormReusedProps & {
password: string;
onSubmit: TOnSubmitPassword;
- is_real_financial_stp: boolean;
+ need_tnc: boolean;
};
type TCFDCreatePasswordFormProps = TCFDPasswordFormReusedProps & {
has_mt5_account: boolean;
submitPassword: TOnSubmitPassword;
- is_real_financial_stp: boolean;
+ need_tnc: boolean;
};
type TMultiStepRefProps = {
goNextStep: () => void;
goPrevStep: () => void;
};
-type TReviewMsgForMT5 = {
- is_selected_mt5_verified: boolean;
- jurisdiction_selected_shortcode: string;
- manual_status: string;
-};
type TCFDPasswordFormProps = TCFDPasswordFormReusedProps & {
closeModal: () => void;
error_type?: string;
form_error?: string;
has_mt5_account: boolean;
- is_bvi: boolean;
is_dxtrade_allowed: boolean;
- is_real_financial_stp: boolean;
onCancel: () => void;
onForgotPassword: () => void;
should_set_trading_password: boolean;
submitPassword: TOnSubmitPassword;
+ account_type: {
+ type: string;
+ category: string;
+ };
};
type TCFDPasswordModalProps = {
@@ -130,21 +128,41 @@ const PasswordModalHeader = ({
platform,
}: TPasswordModalHeaderProps) => {
const { isDesktop } = useDevice();
+ const is_mt5 = platform === CFD_PLATFORMS.MT5;
const element = !isDesktop ? 'p' : 'span';
- const alignment = 'center';
- const font_size = 's';
+
+ const style = !isDesktop
+ ? {
+ padding: '2rem',
+ }
+ : {};
+
+ if (is_mt5 && !is_password_reset_error) {
+ const platform_name = getCFDPlatformNames(platform);
+ return (
+
+ {should_set_trading_password ? (
+
+ );
+ }
return (
-
- {should_set_trading_password && !is_password_reset_error && platform === CFD_PLATFORMS.MT5 && (
-
{!should_set_trading_password && !is_password_reset_error && (
);
};
-const ReviewMessageForMT5 = ({
- is_selected_mt5_verified,
- jurisdiction_selected_shortcode,
- manual_status,
-}: TReviewMsgForMT5) => {
- if (is_selected_mt5_verified) {
- return
-
- {platform === CFD_PLATFORMS.MT5 ? (
- <>
-
-
-
-
- ) : (
- <>
-
-
-
-
-
-
- )}
-
-
- {() => (
- ) => {
- handlePasswordInputChange(
- e,
- handleChange,
- validateForm,
- setFieldTouched
- );
- }}
- data_testId={`dt_${platform}_password`}
- />
- )}
-
-
- {is_real_financial_stp && (
-
-
- )}
- {product === PRODUCT.ZEROSPREAD && account_type.category === CATEGORY.REAL && (
-
setChecked(prev => !prev)}
- />
- )}
+
+
+
+
+
+
+ {() => (
+ ) => {
+ handlePasswordInputChange(e, handleChange, validateForm, setFieldTouched);
+ }}
+ data_testId={`dt_${platform}_password`}
+ />
+ )}
+
0}
+ is_disabled={!values.password || Object.keys(errors).length > 0}
is_loading={isSubmitting}
label={localize('Create {{platform}} password', {
platform: getCFDPlatformLabel(platform),
@@ -398,7 +296,7 @@ const CFDCreatePasswordForm = ({
error_message,
validatePassword,
submitPassword,
- is_real_financial_stp,
+ need_tnc,
}: TCFDCreatePasswordFormProps) => {
const multi_step_ref = React.useRef();
const [password, setPassword] = React.useState('');
@@ -414,16 +312,26 @@ const CFDCreatePasswordForm = ({
const steps = [
{
- component: (
- (