-
+
{localize('ID verification failed')}
@@ -30,4 +30,4 @@ const IdvLimited = ({ handleRequireSubmission }: TIdvLimited) => {
);
};
-export default IdvLimited;
+export default IdvNoSubmissions;
diff --git a/packages/account/src/Components/poi/idv-status/idv-limited/index.js b/packages/account/src/Components/poi/idv-status/idv-limited/index.js
new file mode 100644
index 000000000000..1223bdf639cb
--- /dev/null
+++ b/packages/account/src/Components/poi/idv-status/idv-limited/index.js
@@ -0,0 +1,3 @@
+import IdvNoSubmissions from './idv-limited';
+
+export default IdvNoSubmissions;
diff --git a/packages/account/src/Components/poi/idv-status/idv-limited/index.ts b/packages/account/src/Components/poi/idv-status/idv-limited/index.ts
deleted file mode 100644
index 649a4a5158a4..000000000000
--- a/packages/account/src/Components/poi/idv-status/idv-limited/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import IdvLimited from './idv-limited';
-
-export default IdvLimited;
diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.tsx b/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.tsx
new file mode 100644
index 000000000000..52c58bef0094
--- /dev/null
+++ b/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import IdvRejected from '../idv-rejected';
+
+jest.mock('Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
+
+describe('
', () => {
+ const mockHandleRequireSubmission = jest.fn();
+
+ it('should render IdvRejected component and trigger click', () => {
+ render(
);
+
+ expect(screen.getByText('IdvDocumentRejected')).toBeInTheDocument();
+ expect(screen.getByText(/ID verification failed/i)).toBeInTheDocument();
+ expect(screen.getByText(/we were unable to verify your ID with the details you provided/i)).toBeInTheDocument();
+
+ const btn = screen.getByRole('button');
+ expect(btn).toHaveTextContent(/try again/i);
+ fireEvent.click(btn);
+ expect(mockHandleRequireSubmission).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx b/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx
new file mode 100644
index 000000000000..81a4bbc6f83d
--- /dev/null
+++ b/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
+
+type TIdvRejected = {
+ handleRequireSubmission: () => void;
+};
+
+const IdvRejected = ({ handleRequireSubmission }: TIdvRejected) => {
+ return (
+
+
+
+ {localize('ID verification failed')}
+
+
+ {localize('We were unable to verify your ID with the details you provided.')}
+
+
+
+ );
+};
+
+export default IdvRejected;
diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/index.js b/packages/account/src/Components/poi/idv-status/idv-rejected/index.js
new file mode 100644
index 000000000000..f35e095598df
--- /dev/null
+++ b/packages/account/src/Components/poi/idv-status/idv-rejected/index.js
@@ -0,0 +1,3 @@
+import IdvRejected from './idv-rejected';
+
+export default IdvRejected;
diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx b/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx
index aa923548204f..86212d2144de 100644
--- a/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx
+++ b/packages/account/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.tsx
@@ -1,154 +1,55 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
-import { idv_error_statuses } from '@deriv/shared';
import IdvSubmitComplete from '../idv-submit-complete';
-import { StoreProvider, mockStore } from '@deriv/stores';
jest.mock('../../../../../Assets/ic-idv-document-pending.svg', () => jest.fn(() => 'IdvDocumentPending'));
-type TIdvSubmitCompleteProps = React.ComponentProps
;
-
describe('', () => {
- const mock_props: TIdvSubmitCompleteProps = {
+ const mock_props = {
needs_poa: false,
is_from_external: false,
- redirect_button: '',
};
- const store = mockStore({
- client: {
- account_status: {
- authentication: {
- attempts: {
- count: 0,
- history: [],
- },
- },
- },
- },
- });
-
- const renderComponent = ({ props = mock_props, store_config = store }) =>
- render(
-
-
-
-
-
- );
-
- it('should render IdvSubmitComplete component external, no needs_poa, without mismatch_status', () => {
- const new_props: TIdvSubmitCompleteProps = {
- ...mock_props,
- redirect_button: 'Mock Redirect Button',
- };
- renderComponent({ props: new_props });
-
+ const commonRenderCheck = () => {
expect(screen.getByText('IdvDocumentPending')).toBeInTheDocument();
- expect(screen.getByText('Mock Redirect Button')).toBeInTheDocument();
expect(screen.getByText('Your documents were submitted successfully')).toBeInTheDocument();
expect(
screen.getByText('We’ll review your documents and notify you of its status within 5 minutes.')
).toBeInTheDocument();
- expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
- expect(screen.queryByText('Your document has been submitted')).not.toBeInTheDocument();
- expect(
- screen.queryByText(
- "We'll review your proof of identity again and will give you an update as soon as possible."
- )
- ).not.toBeInTheDocument();
+ };
+ it('should render IdvSubmitComplete component not external, no needs_poa', () => {
+ render();
+
+ commonRenderCheck();
expect(screen.queryByText("Next, we'll need your proof of address.")).not.toBeInTheDocument();
+ expect(screen.queryByText('Submit proof of address')).not.toBeInTheDocument();
});
+ it('should render IdvSubmitComplete component not external, needs_poa', () => {
+ mock_props.needs_poa = true;
- it('should render IdvSubmitComplete component needs_poa not external, without mismatch_status and redirect_button', () => {
- const new_props: TIdvSubmitCompleteProps = {
- ...mock_props,
- needs_poa: true,
- };
-
- renderComponent({ props: new_props });
+ render(
+
+
+
+ );
- expect(screen.getByText('IdvDocumentPending')).toBeInTheDocument();
- expect(screen.getByText('Your documents were submitted successfully')).toBeInTheDocument();
- expect(screen.getByText('Submit proof of address')).toBeInTheDocument();
+ commonRenderCheck();
expect(screen.getByText("Next, we'll need your proof of address.")).toBeInTheDocument();
- expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
- expect(screen.queryByText('Your document has been submitted')).not.toBeInTheDocument();
- expect(
- screen.queryByText(
- "We'll review your proof of identity again and will give you an update as soon as possible."
- )
- ).not.toBeInTheDocument();
- });
-
- it('should render IdvSubmitComplete component with mismatch_status ', () => {
- const new_store = mockStore({
- client: {
- account_status: {
- authentication: {
- attempts: {
- count: 2,
- history: [{ status: 'pending' }],
- },
- },
- },
- },
- });
-
- const new_props: TIdvSubmitCompleteProps = {
- ...mock_props,
- mismatch_status: idv_error_statuses.poi_name_dob_mismatch,
- };
- renderComponent({ props: new_props, store_config: new_store });
-
- expect(screen.getByText('IdvDocumentPending')).toBeInTheDocument();
- expect(screen.getByText('Your profile is updated')).toBeInTheDocument();
- expect(
- screen.getByText(
- "We'll review your proof of identity again and will give you an update as soon as possible."
- )
- ).toBeInTheDocument();
- expect(
- screen.queryByText('We’ll review your documents and notify you of its status within 5 minutes.')
- ).not.toBeInTheDocument();
- expect(screen.queryByText('Your documents were submitted successfully')).not.toBeInTheDocument();
- expect(screen.queryByText('Your document has been submitted')).not.toBeInTheDocument();
- expect(screen.queryByText("Next, we'll need your proof of address.")).not.toBeInTheDocument();
+ expect(screen.getByText('Submit proof of address')).toBeInTheDocument();
});
+ it('should render IdvSubmitComplete component external, needs_poa', () => {
+ mock_props.needs_poa = true;
+ mock_props.is_from_external = true;
- it('should render IdvSubmitComplete component with mismatch_status', () => {
- const new_store = mockStore({
- client: {
- account_status: {
- authentication: {
- attempts: {
- count: 2,
- history: [{ status: 'pending' }],
- },
- },
- },
- },
- });
-
- const new_props: TIdvSubmitCompleteProps = {
- ...mock_props,
- mismatch_status: idv_error_statuses.poi_expired,
- };
- renderComponent({ props: new_props, store_config: new_store });
+ render(
+
+
+
+ );
- expect(screen.getByText('IdvDocumentPending')).toBeInTheDocument();
- expect(screen.getByText('Your document has been submitted')).toBeInTheDocument();
- expect(
- screen.getByText(
- "We'll review your proof of identity again and will give you an update as soon as possible."
- )
- ).toBeInTheDocument();
- expect(
- screen.queryByText('We’ll review your documents and notify you of its status within 5 minutes.')
- ).not.toBeInTheDocument();
- expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
- expect(screen.queryByText('Your documents were submitted successfully')).not.toBeInTheDocument();
- expect(screen.queryByText("Next, we'll need your proof of address.")).not.toBeInTheDocument();
+ commonRenderCheck();
+ expect(screen.getByText("Next, we'll need your proof of address.")).toBeInTheDocument();
+ expect(screen.queryByText('Submit proof of address')).not.toBeInTheDocument();
});
});
diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx
index 7b66f7720ee1..bd0f526e110d 100644
--- a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx
+++ b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx
@@ -1,81 +1,39 @@
+import IdvDocumentPending from '../../../../Assets/ic-idv-document-pending.svg';
+import PoaButton from '../../../poa/poa-button/poa-button';
import React from 'react';
import { Text } from '@deriv/components';
-import { idv_error_statuses, TIDVErrorStatus } from '@deriv/shared';
-import { observer, useStore } from '@deriv/stores';
-import { Localize } from '@deriv/translations';
-import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
-import PoaButton from 'Components/poa/poa-button';
+import { localize } from '@deriv/translations';
type TIdvSubmitComplete = {
- is_from_external: boolean;
- mismatch_status: TIDVErrorStatus;
needs_poa: boolean;
- redirect_button: React.ReactNode;
+ is_from_external: boolean;
+ redirect_button: React.ReactElement;
};
-const IdvSubmitComplete = observer(
- ({ is_from_external, mismatch_status, needs_poa, redirect_button }: Partial) => {
- const { client } = useStore();
- const { account_status } = client;
-
- const attempt_count = account_status?.authentication?.attempts?.count ?? 0;
- const attempt_history = account_status?.authentication?.attempts?.history ?? [];
-
- const is_already_attempted = attempt_count > 1 || attempt_history.length > 1;
-
- const is_mismatch_error =
- mismatch_status === idv_error_statuses.poi_name_dob_mismatch ||
- mismatch_status === idv_error_statuses.poi_dob_mismatch ||
- mismatch_status === idv_error_statuses.poi_name_mismatch;
-
- const is_expired_or_failed_error =
- mismatch_status === idv_error_statuses.poi_expired || mismatch_status === idv_error_statuses.poi_failed;
-
- const getHeaderText = () => {
- if (is_already_attempted) {
- if (is_mismatch_error) return ;
- if (is_expired_or_failed_error)
- return ;
- }
- return ;
- };
-
- const getDescriptionText = () => {
- if (is_already_attempted && (is_mismatch_error || is_expired_or_failed_error))
- return (
-
- );
- return (
-
- );
- };
-
- const poa_button = !is_from_external && (
- } />
- );
-
- return (
-
-
-
- {getHeaderText()}
-
-
- {getDescriptionText()}
-
- {needs_poa ? (
-
-
-
-
- {poa_button}
-
- ) : (
-
{redirect_button}
- )}
-
+
+
+ {localize('Your documents were submitted successfully')}
+
+
+ {localize('We’ll review your documents and notify you of its status within 5 minutes.')}
+
+ {needs_poa ? (
+
+
+ {localize("Next, we'll need your proof of address.")}
+
+ {poa_button}
+
+ ) : (
+
{redirect_button}
+ )}
+
@@ -29,15 +26,13 @@ const IdvVerified = ({ needs_poa, is_from_external, redirect_button }: Partial
{!isMobile() && (
-
+ {localize("Next, we'll need your proof of address.")}
)}
- {!is_from_external && (
- } />
- )}
+ {!is_from_external && }
) : (
- redirect_button ||
+ redirect_button
)}