diff --git a/packages/account/src/Components/icon-message-content/icon-message-content.tsx b/packages/account/src/Components/icon-message-content/icon-message-content.tsx
index 5369be7c9d70..547b1581f734 100644
--- a/packages/account/src/Components/icon-message-content/icon-message-content.tsx
+++ b/packages/account/src/Components/icon-message-content/icon-message-content.tsx
@@ -9,7 +9,7 @@ type TIconMessageContent = {
icon: React.ReactElement;
is_disabled_for_mobile?: boolean;
message: React.ReactNode;
- text?: string | React.ReactElement;
+ text?: React.ReactNode;
};
const IconMessageContent = ({
diff --git a/packages/account/src/Components/poa/status/unverified/unverified.tsx b/packages/account/src/Components/poa/status/unverified/unverified.tsx
index 4e631d4ec9b9..5826f75efc3b 100644
--- a/packages/account/src/Components/poa/status/unverified/unverified.tsx
+++ b/packages/account/src/Components/poa/status/unverified/unverified.tsx
@@ -1,22 +1,25 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
import { Button, Icon, Text } from '@deriv/components';
import { localize } from '@deriv/translations';
import IconMessageContent from '../../../icon-message-content';
type TUnverified = {
+ title?: ReactNode;
+ description?: ReactNode;
onClick: () => void;
+ button_text?: ReactNode;
};
-export const Unverified = ({ onClick }: TUnverified) => {
+export const Unverified = ({ title, description, button_text, onClick }: TUnverified) => {
return (
}
>
diff --git a/packages/account/src/Components/poi-manual-upload-failed/__tests__/poi-manual-upload-failed.spec.tsx b/packages/account/src/Components/poi-manual-upload-failed/__tests__/poi-manual-upload-failed.spec.tsx
new file mode 100644
index 000000000000..9d9e534677d2
--- /dev/null
+++ b/packages/account/src/Components/poi-manual-upload-failed/__tests__/poi-manual-upload-failed.spec.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import POIManualUploadFailed from '../poi-manual-upload-failed';
+
+jest.mock('@deriv/components', () => {
+ const original_module = jest.requireActual('@deriv/components');
+ return {
+ ...original_module,
+ Icon: jest.fn(() =>
Mocked Icon
),
+ };
+});
+
+describe('', () => {
+ const error = 'MockAPIError';
+ it('should render component with its default content', () => {
+ render();
+ expect(screen.getByText('Proof of identity documents upload failed')).toBeInTheDocument();
+ expect(screen.getByText('MockAPIError')).toBeInTheDocument();
+ expect(screen.getByText('Mocked Icon')).toBeInTheDocument();
+ });
+
+ it('should render component with content from props', () => {
+ render();
+ expect(screen.getByText('message')).toBeInTheDocument();
+ expect(screen.getByText('Mocked Icon')).toBeInTheDocument();
+ });
+});
diff --git a/packages/account/src/Components/poi-manual-upload-failed/index.ts b/packages/account/src/Components/poi-manual-upload-failed/index.ts
new file mode 100644
index 000000000000..261760af3442
--- /dev/null
+++ b/packages/account/src/Components/poi-manual-upload-failed/index.ts
@@ -0,0 +1,3 @@
+import POIManualUploadFailed from './poi-manual-upload-failed';
+
+export default POIManualUploadFailed;
diff --git a/packages/account/src/Components/poi-manual-upload-failed/poi-manual-upload-failed.tsx b/packages/account/src/Components/poi-manual-upload-failed/poi-manual-upload-failed.tsx
new file mode 100644
index 000000000000..d4ac01f83eae
--- /dev/null
+++ b/packages/account/src/Components/poi-manual-upload-failed/poi-manual-upload-failed.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Icon } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import IconMessageContent from '../icon-message-content';
+
+type TPOIManualUploadFailed = {
+ error: string;
+ message?: ReactNode;
+};
+const POIManualUploadFailed = ({ children, message, error }: React.PropsWithChildren) => (
+ }
+ text={error}
+ icon={}
+ className='account-management-dashboard'
+ >
+ {children}
+
+);
+
+export default POIManualUploadFailed;
diff --git a/packages/account/src/Components/poi-unsupported-failed/__tests__/unsupported-failed.spec.tsx b/packages/account/src/Components/poi-unsupported-failed/__tests__/unsupported-failed.spec.tsx
deleted file mode 100644
index 5f3116cbed14..000000000000
--- a/packages/account/src/Components/poi-unsupported-failed/__tests__/unsupported-failed.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import UnsupportedFailed from '../unsupported-failed';
-
-jest.mock('@deriv/components', () => {
- const original_module = jest.requireActual('@deriv/components');
- return {
- ...original_module,
- Icon: jest.fn(() => Mocked Icon
),
- };
-});
-
-describe('', () => {
- const error = 'error';
- it('should render component with its content', () => {
- render();
- expect(screen.getByText('Proof of identity documents upload failed')).toBeInTheDocument();
- expect(screen.getByText('error')).toBeInTheDocument();
- expect(screen.getByText('Mocked Icon')).toBeInTheDocument();
- });
-});
diff --git a/packages/account/src/Components/poi-unsupported-failed/index.ts b/packages/account/src/Components/poi-unsupported-failed/index.ts
deleted file mode 100644
index 97772ea79910..000000000000
--- a/packages/account/src/Components/poi-unsupported-failed/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import UnsupportedFailed from './unsupported-failed';
-
-export default UnsupportedFailed;
diff --git a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx b/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx
deleted file mode 100644
index 1be1b4b562dc..000000000000
--- a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Icon } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import IconMessageContent from '../icon-message-content';
-
-type TUnsupportedFailed = {
- error?: string;
-};
-
-const UnsupportedFailed = ({ error }: TUnsupportedFailed) => (
- }
- className='account-management-dashboard'
- />
-);
-
-export default UnsupportedFailed;
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 b6e3dd479ebe..6de913c85674 100644
--- a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
+++ b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
@@ -1,11 +1,12 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
//@ts-nocheck [TODO] - Need to fix typescript errors in OnfidoUpload component
import React from 'react';
-import { Loading, Icon, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { Loading, Icon, Text, Button } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
import { WS } from '@deriv/shared';
import { UploadComplete } from '../upload-complete/upload-complete';
-import PoiUnsupportedFailed from '../../../poi-unsupported-failed';
+import POIManualUploadFailed from '../../../poi-manual-upload-failed';
+import { API_ERROR_CODES } from '../../../../Constants/api-error-codes';
import uploadFile from '../../../file-uploader-container/upload-file';
import OnfidoUpload from '../../../../Sections/Verification/ProofOfIdentity/onfido-sdk-view-container';
@@ -74,7 +75,9 @@ const DetailComponent = ({
})
.then(response => {
file_to_upload_index += 1;
- if (response.warning || response.error) {
+ if (response?.warning === API_ERROR_CODES.DUPLICATE_DOCUMENT) {
+ setStatus(STATUS.IS_DUPLICATE_UPLOAD);
+ } else if (response?.warning || response.error) {
is_any_failed = true;
setStatus(STATUS.IS_FAILED);
setError(
@@ -122,7 +125,20 @@ const DetailComponent = ({
case STATUS.IS_COMPLETED:
return ;
case STATUS.IS_FAILED:
- return ;
+ return ;
+ case STATUS.IS_DUPLICATE_UPLOAD:
+ return (
+
+ }
+ >
+
+
+ );
+
default:
return (
diff --git a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
index 10704a5f22fb..e9cf976e8bf8 100644
--- a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
+++ b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx
@@ -38,6 +38,7 @@ type TUnsupported = {
submissions_left: number;
};
is_for_mt5?: boolean;
+ is_resubmission?: boolean;
};
const Unsupported = ({
@@ -52,6 +53,7 @@ const Unsupported = ({
handleViewComplete,
onfido,
is_for_mt5,
+ is_resubmission,
...props
}: TUnsupported) => {
const [detail, setDetail] = React.useState(null);
@@ -102,7 +104,7 @@ const Unsupported = ({
- {!is_for_mt5 && (
+ {!is_for_mt5 && !is_resubmission && (