,
- fileUploadText: 'Upload the front of your driving licence.',
+ error: 'Front side of driving licence is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+ text: 'Upload the front of your driving licence.',
},
{
- fileUploadIcon: ,
- fileUploadText: 'Upload the back of your driving licence.',
+ error: 'Back side of driving licence is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.BACK,
+ text: 'Upload the back of your driving licence.',
},
],
uploadSectionHeader: 'Next, upload the front and back of your driving licence.',
@@ -56,14 +67,18 @@ export const MANUAL_DOCUMENT_TYPES_DATA = Object.freeze({
},
},
inputSectionHeader: 'First, enter your Identity card number and the expiry date.',
- upload: [
+ uploads: [
{
- fileUploadIcon: ,
- fileUploadText: 'Upload the front of your identity card.',
+ error: 'Front side of identity card is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+ text: 'Upload the front of your identity card.',
},
{
- fileUploadIcon: ,
- fileUploadText: 'Upload the back of your identity card.',
+ error: 'Back side of identity card is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.BACK,
+ text: 'Upload the back of your identity card.',
},
],
uploadSectionHeader: 'Next, upload the front and back of your identity card.',
@@ -77,14 +92,18 @@ export const MANUAL_DOCUMENT_TYPES_DATA = Object.freeze({
},
},
inputSectionHeader: 'First, enter your NIMC slip number and the expiry date.',
- upload: [
+ uploads: [
{
- fileUploadIcon: ,
- fileUploadText: 'Upload your NIMC slip.',
+ error: 'Front side of NIMC slip is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+ text: 'Upload your NIMC slip.',
},
{
- fileUploadIcon: ,
- fileUploadText: 'Upload your proof of age: birth certificate or age declaration document.',
+ error: 'Back side of NIMC slip is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.PHOTO,
+ text: 'Upload your proof of age: birth certificate or age declaration document.',
},
],
uploadSectionHeader: 'Next, upload the page of your NIMC slip that contains your photo.',
@@ -98,10 +117,12 @@ export const MANUAL_DOCUMENT_TYPES_DATA = Object.freeze({
},
},
inputSectionHeader: 'First, enter your Passport number and the expiry date.',
- upload: [
+ uploads: [
{
- fileUploadIcon: ,
- fileUploadText: 'Upload the page of your passport that contains your photo.',
+ error: 'Front side of passport is required.',
+ icon: ,
+ pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+ text: 'Upload the page of your passport that contains your photo.',
},
],
uploadSectionHeader: 'Next, upload the page of your passport that contains your photo.',
diff --git a/packages/account-v2/src/containers/ManualForm/__tests__/manualForm.spec.tsx b/packages/account-v2/src/containers/ManualForm/__tests__/manualForm.spec.tsx
index 438e16dad4dc..04c233574998 100644
--- a/packages/account-v2/src/containers/ManualForm/__tests__/manualForm.spec.tsx
+++ b/packages/account-v2/src/containers/ManualForm/__tests__/manualForm.spec.tsx
@@ -13,6 +13,7 @@ describe('ManualForm', () => {
selectedDocument?: React.ComponentProps['selectedDocument'];
}) => {
const mockProps: React.ComponentProps = {
+ onCancel: jest.fn(),
onSubmit: jest.fn(),
selectedDocument: selectedDocument ?? 'driving_licence',
};
diff --git a/packages/account-v2/src/containers/ManualForm/manualForm.tsx b/packages/account-v2/src/containers/ManualForm/manualForm.tsx
index 735bc33dd5a3..61cfc868c965 100644
--- a/packages/account-v2/src/containers/ManualForm/manualForm.tsx
+++ b/packages/account-v2/src/containers/ManualForm/manualForm.tsx
@@ -2,39 +2,52 @@ import React from 'react';
import { Form, Formik } from 'formik';
import { Button } from '@deriv-com/ui';
import { MANUAL_FORM_INITIAL_VALUES, TManualDocumentTypes } from '../../constants/manualFormConstants';
+import { useManualForm } from '../../hooks';
import { getManualFormValidationSchema } from '../../utils/manualFormUtils';
import { ManualFormDocumentUpload } from './manualFormDocumentUpload';
import { ManualFormFooter } from './manualFormFooter';
import { ManualFormInputs } from './manualFormInputs';
type TManualFormProps = {
+ onCancel: () => void;
onSubmit: (values: typeof MANUAL_FORM_INITIAL_VALUES) => void;
selectedDocument: TManualDocumentTypes;
- onCancel: () => void;
};
-export const ManualForm = ({ onSubmit, selectedDocument, onCancel }: TManualFormProps) => (
-