From b35b2c5f0c528d2d2635b1eead59243cf32260e0 Mon Sep 17 00:00:00 2001
From: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Date: Fri, 21 Jun 2024 08:39:35 +0400
Subject: [PATCH] Amina/coj 737/duplicate document error fix (#15635)

* feat: poa_account_settings

* feat: duplicate document in mt5 poa

* fix: component naming

* fix: poi duplicate document

* fix: cfd-poa

* fix: test case

* fix: test case fix

* fix: constant value

* fix: linting:

* fix: typing

* fix: removed step-idex undefined

* fix: test case description

* fix: remove back button in manual upload if resunbmission
---
 .../icon-message-content.tsx                  |  2 +-
 .../poa/status/unverified/unverified.tsx      | 13 +++--
 .../poi-manual-upload-failed.spec.tsx         | 27 ++++++++++
 .../poi-manual-upload-failed/index.ts         |  3 ++
 .../poi-manual-upload-failed.tsx              | 21 ++++++++
 .../__tests__/unsupported-failed.spec.tsx     | 21 --------
 .../poi-unsupported-failed/index.ts           |  3 --
 .../unsupported-failed.tsx                    | 19 -------
 .../status/unsupported/detail-component.tsx   | 26 ++++++++--
 .../poi/status/unsupported/unsupported.tsx    |  4 +-
 .../account/src/Constants/api-error-codes.ts  |  1 +
 .../proof-of-address-container.tsx            | 37 ++++++++++++--
 .../ProofOfAddress/proof-of-address-form.tsx  | 43 ++++++++--------
 .../proof-of-identity-submission.jsx          |  1 +
 .../proof-of-ownership-form.tsx               |  6 ++-
 .../components/cfds-listing/cfds-listing.scss |  4 ++
 .../src/Components/__tests__/cfd-poa.spec.tsx | 20 ++++++++
 packages/cfd/src/Components/cfd-poa.tsx       | 51 +++++++++++++++----
 .../features/Components/proof-of-address.tsx  |  4 +-
 19 files changed, 212 insertions(+), 94 deletions(-)
 create mode 100644 packages/account/src/Components/poi-manual-upload-failed/__tests__/poi-manual-upload-failed.spec.tsx
 create mode 100644 packages/account/src/Components/poi-manual-upload-failed/index.ts
 create mode 100644 packages/account/src/Components/poi-manual-upload-failed/poi-manual-upload-failed.tsx
 delete mode 100644 packages/account/src/Components/poi-unsupported-failed/__tests__/unsupported-failed.spec.tsx
 delete mode 100644 packages/account/src/Components/poi-unsupported-failed/index.ts
 delete mode 100644 packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx

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 (
         <IconMessageContent
-            message={localize('We could not verify your proof of address')}
-            text={localize('Please check your email for details.')}
+            message={title ?? localize('We could not verify your proof of address')}
+            text={description ?? localize('Please check your email for details.')}
             icon={<Icon icon='IcPoaError' size={128} />}
         >
             <Button onClick={onClick} has_effect primary>
                 <Text className='dc-btn__text' size='xs' weight='bold' as='p'>
-                    {localize('Resubmit')}
+                    {button_text ?? localize('Resubmit')}
                 </Text>
             </Button>
         </IconMessageContent>
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(() => <div>Mocked Icon</div>),
+    };
+});
+
+describe('<POIManualUploadFailed />', () => {
+    const error = 'MockAPIError';
+    it('should render <POIManualUploadFailed /> component with its default content', () => {
+        render(<POIManualUploadFailed error={error} />);
+        expect(screen.getByText('Proof of identity documents upload failed')).toBeInTheDocument();
+        expect(screen.getByText('MockAPIError')).toBeInTheDocument();
+        expect(screen.getByText('Mocked Icon')).toBeInTheDocument();
+    });
+
+    it('should render <POIManualUploadFailed /> component with content from props', () => {
+        render(<POIManualUploadFailed message='message' error={error} />);
+        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<TPOIManualUploadFailed>) => (
+    <IconMessageContent
+        message={message ?? <Localize i18n_default_text={'Proof of identity documents upload failed'} />}
+        text={error}
+        icon={<Icon icon='IcPoiFailed' size={128} />}
+        className='account-management-dashboard'
+    >
+        {children}
+    </IconMessageContent>
+);
+
+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(() => <div>Mocked Icon</div>),
-    };
-});
-
-describe('<UnsupportedFailed />', () => {
-    const error = 'error';
-    it('should render <UnsupportedFailed /> component with its content', () => {
-        render(<UnsupportedFailed error={error} />);
-        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) => (
-    <IconMessageContent
-        message={localize('Proof of identity documents upload failed')}
-        text={error}
-        icon={<Icon icon='IcPoiFailed' size={128} />}
-        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 <UploadComplete is_from_external={true} needs_poa={false} is_manual_upload />;
         case STATUS.IS_FAILED:
-            return <PoiUnsupportedFailed error={response_error} />;
+            return <POIManualUploadFailed error={response_error} />;
+        case STATUS.IS_DUPLICATE_UPLOAD:
+            return (
+                <POIManualUploadFailed
+                    error={
+                        <Localize i18n_default_text='It seems you’ve submitted this document before. Upload a new document.' />
+                    }
+                >
+                    <Button onClick={onClickBack} large primary className='upload_error_btn'>
+                        <Localize i18n_default_text='Try Again' />
+                    </Button>
+                </POIManualUploadFailed>
+            );
+
         default:
             return (
                 <React.Fragment>
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<number | null>(null);
@@ -102,7 +104,7 @@ const Unsupported = ({
                 <Localize i18n_default_text='Please upload one of the following documents:' />
             </Text>
             <Documents documents={documents} toggleDetail={toggleDetail} />
-            {!is_for_mt5 && (
+            {!is_for_mt5 && !is_resubmission && (
                 <FormFooter className='proof-of-identity__footer'>
                     <Button className='back-btn' onClick={handleBack} type='button' has_effect large secondary>
                         <Localize i18n_default_text='Back' />
diff --git a/packages/account/src/Constants/api-error-codes.ts b/packages/account/src/Constants/api-error-codes.ts
index 10449548c446..fdab6a4ac182 100644
--- a/packages/account/src/Constants/api-error-codes.ts
+++ b/packages/account/src/Constants/api-error-codes.ts
@@ -4,4 +4,5 @@
 export const API_ERROR_CODES = Object.freeze({
     DUPLICATE_ACCOUNT: 'DuplicateAccount',
     CLAIMED_DOCUMENT: 'ClaimedDocument',
+    DUPLICATE_DOCUMENT: 'DuplicateUpload',
 });
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx
index 7fb1635878c3..c4954391a76d 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx
@@ -28,7 +28,8 @@ type TAuthenticationStatus = Record<
     | 'needs_poi'
     | 'poa_address_mismatch'
     | 'resubmit_poa'
-    | 'poa_expiring_soon',
+    | 'poa_expiring_soon'
+    | 'has_submitted_duplicate_poa',
     boolean
 > & { document_status?: DeepRequired<GetAccountStatus>['authentication']['document']['status'] };
 
@@ -47,6 +48,7 @@ const ProofOfAddressContainer = observer(({ onSubmit }: TProofOfAddressContainer
         is_age_verified: false,
         poa_address_mismatch: false,
         poa_expiring_soon: false,
+        has_submitted_duplicate_poa: false,
     });
 
     const { client, notifications, common, ui } = useStore();
@@ -92,13 +94,28 @@ const ProofOfAddressContainer = observer(({ onSubmit }: TProofOfAddressContainer
     }, [is_switching, refreshNotifications]);
 
     const handleResubmit = () => {
-        setAuthenticationStatus(authentication_status => ({ ...authentication_status, ...{ resubmit_poa: true } }));
+        setAuthenticationStatus(authentication_status => ({
+            ...authentication_status,
+            ...{ resubmit_poa: true },
+        }));
     };
 
-    const onSubmitDocument = (needs_poi: boolean) => {
+    const handleDuplicatePOASubmission = () => {
         setAuthenticationStatus(authentication_status => ({
             ...authentication_status,
-            ...{ has_submitted_poa: true, needs_poi, poa_expiring_soon: false },
+            ...{ resubmit_poa: true, has_submitted_duplicate_poa: false, has_submitted_poa: false },
+        }));
+    };
+
+    const onSubmitDocument = (needs_poi: boolean, has_submitted_duplicate_poa?: boolean) => {
+        setAuthenticationStatus(authentication_status => ({
+            ...authentication_status,
+            ...{
+                has_submitted_poa: true,
+                needs_poi,
+                poa_expiring_soon: false,
+                has_submitted_duplicate_poa: has_submitted_duplicate_poa ?? false,
+            },
         }));
         if (is_verification_modal_visible) {
             onSubmit?.();
@@ -114,6 +131,7 @@ const ProofOfAddressContainer = observer(({ onSubmit }: TProofOfAddressContainer
         has_submitted_poa,
         poa_address_mismatch,
         poa_expiring_soon,
+        has_submitted_duplicate_poa,
     } = authentication_status;
 
     const from_platform = getPlatformRedirect(app_routing_history);
@@ -147,6 +165,17 @@ const ProofOfAddressContainer = observer(({ onSubmit }: TProofOfAddressContainer
 
     if (is_loading) return <Loading is_fullscreen={false} className='account__initial-loader' />;
     if (!allow_document_upload) return <NotRequired />;
+    if (has_submitted_duplicate_poa)
+        return (
+            <Unverified
+                title={<Localize i18n_default_text='Proof of address documents upload failed' />}
+                description={
+                    <Localize i18n_default_text='It seems you’ve submitted this document before. Upload a new document.' />
+                }
+                button_text={<Localize i18n_default_text='Try again' />}
+                onClick={handleDuplicatePOASubmission}
+            />
+        );
     if (has_submitted_poa && !poa_address_mismatch)
         return <Submitted needs_poi={needs_poi} redirect_button={redirect_button} />;
     if (should_allow_resubmit) {
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
index 04d5a4d4f669..1fc8049743a9 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
@@ -17,15 +17,15 @@ import CommonMistakeExamples from '../../../Components/poa/common-mistakes/commo
 import PersonalDetailsForm from '../../../Components/forms/personal-details-form.jsx';
 import { isServerError, validate } from '../../../Helpers/utils';
 import { getFileUploaderDescriptions } from '../../../Constants/file-uploader';
+import { API_ERROR_CODES } from '../../../Constants/api-error-codes';
 
 type TProofOfAddressForm = {
-    className?: string;
+    className: string;
     is_resubmit: boolean;
-    is_for_cfd_modal?: boolean;
-    onCancel?: () => void;
-    onSubmit: (needs_poi: boolean) => void;
-    onSubmitForCFDModal: (index: number, values: FormikValues) => void;
-    step_index: number;
+    is_for_cfd_modal: boolean;
+    onCancel: () => void;
+    onSubmit: (needs_poi: boolean, has_submitted_duplicate_poa?: boolean) => void;
+    onSubmitForCFDModal: (values: FormikValues, has_submitted_duplicate_poa?: boolean) => void;
 };
 
 type TFormInitialValues = Record<
@@ -36,14 +36,7 @@ type TFormInitialValues = Record<
 type TFormState = Record<'is_btn_loading' | 'is_submit_success' | 'should_allow_submit' | 'should_show_form', boolean>;
 
 const ProofOfAddressForm = observer(
-    ({
-        is_resubmit,
-        is_for_cfd_modal,
-        onSubmit,
-        onSubmitForCFDModal,
-        step_index,
-        className,
-    }: Partial<TProofOfAddressForm>) => {
+    ({ is_resubmit, is_for_cfd_modal, onSubmit, onSubmitForCFDModal, className }: Partial<TProofOfAddressForm>) => {
         const { client, notifications, ui } = useStore();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } =
             client;
@@ -201,10 +194,20 @@ const ProofOfAddressForm = observer(
             // upload files
             try {
                 const api_response = await upload(document_files);
+
                 if (api_response?.warning) {
-                    setStatus({ msg: api_response?.message });
                     setFormState({ ...form_state, ...{ is_btn_loading: false } });
-                    setShouldScrollToTop(true);
+
+                    if (api_response.warning === API_ERROR_CODES.DUPLICATE_DOCUMENT) {
+                        if (is_for_cfd_modal) {
+                            onSubmitForCFDModal?.(values, true);
+                        } else {
+                            onSubmit?.(false, true);
+                        }
+                    } else {
+                        setStatus({ msg: api_response?.message });
+                        setShouldScrollToTop(true);
+                    }
                     return;
                 }
 
@@ -237,15 +240,13 @@ const ProofOfAddressForm = observer(
             } catch (error) {
                 if (isServerError(error)) {
                     setStatus({ msg: error.message });
+                    setSubmitting(false);
                     setFormState({ ...form_state, ...{ is_btn_loading: false } });
                     setShouldScrollToTop(true);
                 }
-            } finally {
-                setSubmitting(false);
-                setFormState({ ...form_state, ...{ is_btn_loading: false } });
             }
-            if (is_for_cfd_modal && typeof step_index !== 'undefined') {
-                onSubmitForCFDModal?.(step_index, values);
+            if (is_for_cfd_modal) {
+                onSubmitForCFDModal?.(values);
             }
         };
 
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx
index dcf76925f365..3ce7aef173f8 100644
--- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx
+++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx
@@ -208,6 +208,7 @@ const POISubmission = observer(
                                 handleViewComplete={handleViewComplete}
                                 onfido={onfido}
                                 handleBack={handleBack}
+                                is_resubmission={needs_resubmission}
                             />
                         );
                     default:
diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
index ac0fd29bf6b6..10cb82bf4805 100644
--- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
@@ -21,6 +21,7 @@ import {
     TProofOfOwnershipFormValue,
 } from '../../../Types';
 import { isValidPaymentMethodIdentifier, isValidFile } from './validation';
+import { API_ERROR_CODES } from 'Constants/api-error-codes';
 
 type TProofOfOwnershipFormProps = {
     grouped_payment_method_data: Partial<Record<TPaymentMethod, TPaymentMethodInfo>>;
@@ -205,7 +206,10 @@ const ProofOfOwnershipForm = observer(({ grouped_payment_method_data }: TProofOf
                             const response = await uploader.upload(processed_file);
                             const upload_error: Array<string> = [];
                             if (response?.warning) {
-                                if (response?.warning?.trim() === 'DuplicateUpload' && response?.message) {
+                                if (
+                                    response?.warning?.trim() === API_ERROR_CODES.DUPLICATE_DOCUMENT &&
+                                    response?.message
+                                ) {
                                     upload_error[index] = response?.message;
                                     const error_obj = {
                                         [payment_id]: {
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
index 690d84c48e0f..29fdbe22712c 100644
--- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss
+++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -1085,6 +1085,10 @@
             display: flex;
             flex-direction: column;
             justify-content: center;
+
+            .upload_error_btn {
+                margin-top: 3.2rem;
+            }
         }
 
         @include desktop() {
diff --git a/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx b/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx
index 1f9fd1ae6d50..649c410b9ccc 100644
--- a/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx
+++ b/packages/cfd/src/Components/__tests__/cfd-poa.spec.tsx
@@ -111,4 +111,24 @@ describe('<CFDPOA />', () => {
             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(
+            <BrowserRouter>
+                <CFDProviders store={mock_store}>
+                    <CFDPOA {...mock_props} />
+                </CFDProviders>
+            </BrowserRouter>
+        );
+        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/cfd-poa.tsx b/packages/cfd/src/Components/cfd-poa.tsx
index 3f78ebf58c01..30e9a0de87f2 100644
--- a/packages/cfd/src/Components/cfd-poa.tsx
+++ b/packages/cfd/src/Components/cfd-poa.tsx
@@ -1,6 +1,9 @@
 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;
@@ -9,20 +12,46 @@ type TCFDPOA = {
 };
 
 const CFDPOA = ({ index, onSave, onSubmit }: TCFDPOA) => {
-    const onSubmitForCFDModal = (index: number, values: FormikValues) => {
-        onSave(index, values);
-        onSubmit(index, values);
+    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 (
-        <div className='cfd-proof-of-address'>
-            <ProofOfAddressForm
-                step_index={index}
-                is_for_cfd_modal
-                onSubmitForCFDModal={onSubmitForCFDModal}
-                className='cfd-proof-of-address__form'
-            />
-        </div>
+        <React.Fragment>
+            {has_submitted_duplicate_poa ? (
+                <IconMessageContent
+                    message={<Localize i18n_default_text='We could not verify your proof of address' />}
+                    text={<Localize i18n_default_text='Proof of address documents upload failed' />}
+                    icon={<Icon icon='IcPoaError' size={128} />}
+                >
+                    <Button
+                        onClick={() => setHasSubmittedDuplicatePOA(false)}
+                        has_effect
+                        primary
+                        large
+                        className='upload_error_btn'
+                    >
+                        <Text className='dc-btn__text' size='xs' weight='bold' as='p'>
+                            <Localize i18n_default_text='Try again' />
+                        </Text>
+                    </Button>
+                </IconMessageContent>
+            ) : (
+                <div className='cfd-proof-of-address'>
+                    <ProofOfAddressForm
+                        is_for_cfd_modal
+                        onSubmitForCFDModal={onSubmitForCFDModal}
+                        className='cfd-proof-of-address__form'
+                    />
+                </div>
+            )}
+        </React.Fragment>
     );
 };
 
diff --git a/packages/cfd/src/features/Components/proof-of-address.tsx b/packages/cfd/src/features/Components/proof-of-address.tsx
index 83dc957f40bd..129291acdf59 100644
--- a/packages/cfd/src/features/Components/proof-of-address.tsx
+++ b/packages/cfd/src/features/Components/proof-of-address.tsx
@@ -9,14 +9,14 @@ type TProofOfAddress = {
 };
 
 const ProofOfAddress = ({ index, onSave, onSubmit }: TProofOfAddress) => {
-    const onSubmitForCFDModal = (index: number, values: FormikValues) => {
+    const onSubmitForCFDModal = (values: FormikValues) => {
         onSave(index, values);
         onSubmit(index, values);
     };
 
     return (
         <div className='cfd-proof-of-address'>
-            <ProofOfAddressForm step_index={index} is_for_cfd_modal onSubmitForCFDModal={onSubmitForCFDModal} />
+            <ProofOfAddressForm is_for_cfd_modal onSubmitForCFDModal={onSubmitForCFDModal} />
         </div>
     );
 };