[WALL] Fix button not disabled upload and added error screen for duplicate upload

packages/wallets/src/features/accounts/constants.tsx

@@ -49,3 +49,7 @@ export const statusCodes: Record<TStatusCodes, string> = {
     suspected: 'suspected',
     verified: 'verified',
 } as const;
+
+export const ErrorCode = {
+    DuplicateUpload: 'DuplicateUpload',
+} as const;

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx

@@ -13,7 +13,6 @@ const IdentityCardDocumentUpload = () => {
     const handleDateChange = (formattedDate: string | null) => {
         setFormValues('identityCardExpiryDate', formattedDate);
     };
-
     return (
         <div className='wallets-identity-card-document-upload' data-testid='dt_identity-card-document-upload'>
             <WalletText>First, enter your Identity card number and the expiry date.</WalletText>

packages/wallets/src/features/accounts/screens/PoiUploadError/PoiUploadError.scss

@@ -0,0 +1,13 @@
+.wallets-poi-upload-error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 99.6rem;
+    height: 60rem;
+
+    @include mobile {
+        width: 100%;
+        height: 100%;
+        padding: auto 1.6rem;
+    }
+}

packages/wallets/src/features/accounts/screens/PoiUploadError/PoiUploadError.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { DerivLightDeclinedPoiIcon } from '@deriv/quill-icons';
+import { WalletButton } from '../../../../components/Base';
+import { WalletsActionScreen } from '../../../../components/WalletsActionScreen';
+import { ErrorCode } from '../../constants';
+import './PoiUploadError.scss';
+import { useFlow } from '../../../../components/FlowProvider';
+
+type PoiUploadErrorProps = {
+    errorCode: keyof typeof ErrorCode;
+};
+
+const errorCodeToDescriptionMapper: Record<keyof typeof ErrorCode, string> = {
+    DuplicateUpload: 'It seems you’ve submitted this document before. Upload a new document.',
+};
+
+const PoiUploadError = ({ errorCode }: PoiUploadErrorProps) => {
+    const { formValues, setFormValues, switchScreen } = useFlow();
+
+    // clears the form values to navigate back to document selection
+    const switchBackToDocumentSelection = () => {
+        if (formValues.selectedManualDocument === 'passport') {
+            setFormValues('passportNumber', '');
+            setFormValues('passportExpiryDate', '');
+            setFormValues('passportCard', '');
+        } else if (formValues.selectedManualDocument === 'driving-license') {
+            setFormValues('drivingLicenseNumber', '');
+            setFormValues('drivingLicenseExpiryDate', '');
+            setFormValues('drivingLicenseCardFront', '');
+            setFormValues('drivingLicenseCardBack', '');
+        } else if (formValues.selectedManualDocument === 'identity-card') {
+            setFormValues('identityCardNumber', '');
+            setFormValues('identityCardExpiryDate', '');
+            setFormValues('identityCardFront', '');
+            setFormValues('identityCardBack', '');
+        } else if (formValues.selectedManualDocument === 'nimc-slip') {
+            setFormValues('nimcNumber', '');
+            setFormValues('nimcCardFront', '');
+            setFormValues('nimcCardBack', '');
+        }
+
+        setFormValues('selectedManualDocument', '');
+        switchScreen('manualScreen');
+    };
+
+    return (
+        <div className='wallets-poi-upload-error'>
+            <WalletsActionScreen
+                description={errorCodeToDescriptionMapper[errorCode]}
+                icon={<DerivLightDeclinedPoiIcon height={120} width={120} />}
+                renderButtons={() => (
+                    <WalletButton onClick={switchBackToDocumentSelection} size='lg'>
+                        Try again
+                    </WalletButton>
+                )}
+                title='Proof of identity documents upload failed'
+            />
+        </div>
+    );
+};
+
+export default PoiUploadError;

packages/wallets/src/features/accounts/screens/PoiUploadError/index.ts

@@ -0,0 +1 @@
+export { default as PoiUploadError } from './PoiUploadError';

packages/wallets/src/features/accounts/screens/index.ts

@@ -5,4 +5,5 @@ export * from './IDVDocumentUpload';
 export * from './ManualDocumentUpload';
 export * from './PersonalDetails';
 export * from './PoaScreen';
+export * from './PoiUploadError';
 export * from './SelfieDocumentUpload';

packages/wallets/src/features/cfd/flows/Verification/Verification.tsx

@@ -6,6 +6,7 @@ import { Loader } from '../../../../components/Loader';
 import { useModal } from '../../../../components/ModalProvider';
 import useDevice from '../../../../hooks/useDevice';
 import { THooks } from '../../../../types';
+import { ErrorCode } from '../../../accounts/constants';
 import {
     ManualDocumentUpload,
     PoaScreen,
@@ -14,6 +15,7 @@ import {
 } from '../../../accounts/screens';
 import { IDVDocumentUpload } from '../../../accounts/screens/IDVDocumentUpload';
 import { PersonalDetails } from '../../../accounts/screens/PersonalDetails';
+import { PoiUploadError } from '../../../accounts/screens/PoiUploadError';
 import { PlatformDetails } from '../../constants';
 import { MT5PasswordModal } from '../../modals';
 import { Onfido } from '../../screens';
@@ -27,6 +29,7 @@ const Loading = () => {
 };
 
 const screens = {
+    duplicateUploadErrorScreen: <PoiUploadError errorCode={ErrorCode.DuplicateUpload} />,
     idvScreen: <IDVDocumentUpload />,
     loadingScreen: <Loading />,
     manualScreen: <ManualDocumentUpload />,
@@ -56,7 +59,7 @@ const getManualVerificationFooter = ({
     if (!context.formValues.selectedManualDocument) return undefined;
 
     const onClickBack = () => {
-        if (context.currentScreenId === 'selfieScreen') {
+        if (context.currentScreenId === 'selfieScreen' || context.currentScreenId === 'duplicateUploadErrorScreen') {
             context.switchScreen('manualScreen');
         } else context.setFormValues('selectedManualDocument', '');
     };
@@ -78,7 +81,12 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
     const { data: poiStatus, isSuccess: isSuccessPOIStatus } = usePOI();
     const { data: poaStatus, isSuccess: isSuccessPOAStatus } = usePOA();
     const { isLoading: isUploadLoading, upload } = useDocumentUpload();
-    const { isLoading: isManualUploadLoading, uploadDocument } = useHandleManualDocumentUpload();
+    const {
+        error: errorManualDocumentUpload,
+        isError: isErrorManualDocumentUpload,
+        isLoading: isManualUploadLoading,
+        uploadDocument,
+    } = useHandleManualDocumentUpload();
     const { data: settings, update: updateSettings } = useSettings();
     const { submitIDVDocuments } = useIdentityDocumentVerificationAdd();
     const { getModalState, hide, show } = useModal();
@@ -105,6 +113,11 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
     const initialScreenId: keyof typeof screens = useMemo(() => {
         const service = poiStatus?.current?.service as keyof THooks.POI['services'];
 
+        if (isErrorManualDocumentUpload) {
+            if (errorManualDocumentUpload?.error.code === ErrorCode.DuplicateUpload) {
+                return 'duplicateUploadErrorScreen';
+            }
+        }
         if (service && poiStatus?.services && isSuccessPOIStatus) {
             const serviceStatus = poiStatus.status;
 
@@ -118,7 +131,17 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
             if (service === 'manual') return 'manualScreen';
         }
         return 'loadingScreen';
-    }, [poiStatus, isSuccessPOIStatus, shouldSubmitPOA, shouldFillPersonalDetails, show, selectedMarketType, platform]);
+    }, [
+        poiStatus,
+        isSuccessPOIStatus,
+        shouldSubmitPOA,
+        shouldFillPersonalDetails,
+        show,
+        selectedMarketType,
+        platform,
+        isErrorManualDocumentUpload,
+        errorManualDocumentUpload,
+    ]);
 
     const isNextDisabled = ({ currentScreenId, errors, formValues }: TFlowProviderContext<typeof screens>) => {
         switch (currentScreenId) {
@@ -139,15 +162,22 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                     return (
                         !formValues.drivingLicenceNumber ||
                         !formValues.drivingLicenseExpiryDate ||
+                        !!errors.drivingLicenseExpiryDate ||
                         !formValues.drivingLicenseCardFront ||
                         !formValues.drivingLicenseCardBack
                     );
                 } else if (formValues.selectedManualDocument === 'passport') {
-                    return !formValues.passportNumber || !formValues.passportExpiryDate || !formValues.passportCard;
+                    return (
+                        !formValues.passportNumber ||
+                        !formValues.passportExpiryDate ||
+                        !!errors.passportExpiryDate ||
+                        !formValues.passportCard
+                    );
                 } else if (formValues.selectedManualDocument === 'identity-card') {
                     return (
                         !formValues.identityCardNumber ||
                         !formValues.identityCardExpiryDate ||
+                        !!errors.identityCardExpiryDate ||
                         !formValues.identityCardFront ||
                         !formValues.identityCardBack
                     );
@@ -169,6 +199,8 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                 );
             case 'poaScreen':
                 return !formValues.townCityLine || !formValues.firstLine || !formValues.poaDocument || isUploadLoading;
+            case 'duplicateUploadErrorScreen':
+                return true;
             default:
                 return false;
         }
@@ -278,7 +310,9 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                 return (
                     <ModalStepWrapper
                         renderFooter={
-                            context.currentScreenId === 'manualScreen' || context.currentScreenId === 'selfieScreen'
+                            ['duplicateUploadErrorScreen', 'manualScreen', 'selfieScreen'].includes(
+                                context.currentScreenId
+                            )
                                 ? getManualVerificationFooter({
                                       context,
                                       isNextDisabled: isNextDisabled(context),
@@ -297,7 +331,11 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                                       </WalletButton>
                                   )
                         }
-                        title='Add a real MT5 account'
+                        title={
+                            context.currentScreenId === 'duplicateUploadErrorScreen'
+                                ? 'Submit your proof of identity'
+                                : 'Add a real MT5 account'
+                        }
                     >
                         {context.WalletScreen}
                     </ModalStepWrapper>