Shaheer/mediator branch

packages/account-v2/src/App.tsx

@@ -2,34 +2,22 @@
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
-import { Formik } from 'formik';
 import { APIProvider } from '@deriv/api';
 import { BreakpointProvider } from '@deriv/quill-design';
-import { SelfieDocumentUpload } from './containers/SelfieDocumentUpload';
-import { DOCUMENT_LIST, INITIAL_VALUES, SELECTED_COUNTRY } from './mocks/idv-form.mock';
-import { IDVForm } from './modules/IDVForm';
-import { getIDVFormValidationSchema } from './modules/IDVForm/utils';
+import { ManualUploadContainer } from './pages/ManualFormContainer/manual-form-container';
 import RouteLinks from './router/components/route-links/route-links';
 import './index.scss';
 
 const App: React.FC = () => {
-    // TODO - Remove this once the IDV form is moved out
-    const getValidationSchema = getIDVFormValidationSchema(DOCUMENT_LIST);
-
     return (
         <APIProvider standalone>
             <BreakpointProvider>
                 <div className=' text-solid-slate-500 text-heading-h1'>Account V2</div>
-                {/* TODO - Remove this ManualForm later, only rendered here for testing purposes. */}
-                {/* <ManualForm onSubmit={() => {}} selectedDocument='driving_licence' /> */}
-                {/* [TODO]:Mock - Remove Mock values */}
-                <Formik initialValues={INITIAL_VALUES} onSubmit={() => {}} validationSchema={getValidationSchema}>
-                    {/* <IDVForm selectedCountry={SELECTED_COUNTRY} /> */}
-                    <SelfieDocumentUpload />
-                </Formik>
+                <ManualUploadContainer
+                    selectedDocument='driving_licence'
+                    setSelectedDocument={val => console.log('Called with', val)}
+                />
                 <RouteLinks />
-                {/* [TODO]:Mock - Remove Mock values */}
-                {/* <DocumentSelection countryCode='ng' handleOnClick={val => console.log(val)} /> */}
             </BreakpointProvider>
         </APIProvider>
     );

packages/account-v2/src/components/Dropzone/Dropzone.scss

@@ -23,16 +23,6 @@
         border: 0.1rem solid var(--status-success, #4bb4b3);
     }
 
-    &__content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 2.4rem;
-    }
-
     &__thumb {
         position: relative;
         width: 100%;
@@ -56,33 +46,33 @@
         }
     }
 
-    &__placeholder {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1.4rem;
-    }
+    // &__placeholder {
+    //     display: flex;
+    //     flex-direction: column;
+    //     align-items: center;
+    //     gap: 1.4rem;
+    // }
 
-    &__placeholder-icon {
-        flex-shrink: 0;
-    }
+    // &__placeholder-icon {
+    //     flex-shrink: 0;
+    // }
 
-    &__placeholder-text {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 3.2rem;
-    }
+    // &__placeholder-text {
+    //     display: flex;
+    //     flex-direction: column;
+    //     align-items: center;
+    //     gap: 3.2rem;
+    // }
 
-    &__remove-file {
-        position: absolute;
-        top: 0.8rem;
-        right: 0.8rem;
-        border-radius: 50%;
-        background-color: var(--system-light-5-active-background, #d6dadb);
+    // &__remove-file {
+    //     position: absolute;
+    //     top: 0.8rem;
+    //     right: 0.8rem;
+    //     border-radius: 50%;
+    //     background-color: var(--system-light-5-active-background, #d6dadb);
 
-        &:hover {
-            background-color: var(--system-light-5-hover-background, #e9ecef);
-        }
-    }
+    //     &:hover {
+    //         background-color: var(--system-light-5-hover-background, #e9ecef);
+    //     }
+    // }
 }

packages/account-v2/src/components/Dropzone/Dropzone.tsx

@@ -112,11 +112,11 @@ const Dropzone: React.FC<TProps> = ({
                     { 'wallets-dropzone--active': file }
                 )}
             >
-                <div className='wallets-dropzone__content'>
+                <div className='w-full h-full flex flex-col items-center justify-center gap-400'>
                     {showHoverMessage && <Text size='sm'>{hoverMessage}</Text>}
                     {!file && (
-                        <div className='wallets-dropzone__placeholder'>
-                            <div className='wallets-dropzone__placeholder-icon'>{icon}</div>
+                        <div className='flex flex-col items-center gap-700'>
+                            <div className='flex-shrink-0'>{icon}</div>
                             {title && (
                                 <Text align='center' color='primary' size='xs' weight={titleType}>
                                     {title}
@@ -126,7 +126,7 @@ const Dropzone: React.FC<TProps> = ({
                                 {description}
                             </Text>
                             {buttonText && (
-                                <div className='wallets-dropzone__placeholder-text'>
+                                <div className='flex flex-col items-center gap-1600'>
                                     <Button onClick={open} type='button' variant='outlined'>
                                         {buttonText}
                                     </Button>
@@ -150,7 +150,7 @@ const Dropzone: React.FC<TProps> = ({
                             >
                                 {hasFrame && <DropzoneFrame />}
                                 <IconButton
-                                    className='wallets-dropzone__remove-file'
+                                    className='absolute top-400 right-400 rounded-pill'
                                     color='black'
                                     data-testid='dt_remove-button'
                                     icon={<StandaloneXmarkBoldIcon fill='#ffffff' iconSize='sm' />}

packages/account-v2/src/components/IconButton/icon-button.tsx

@@ -2,7 +2,6 @@ import React, { ButtonHTMLAttributes, ComponentProps, forwardRef, Ref } from 're
 import clsx from 'clsx';
 import { TGenericSizes } from '../types';
 import { iconButtonVariants } from './icon-button.classnames';
-import './icon-button.scss';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     color?: 'black' | 'primary' | 'transparent' | 'white';

packages/account-v2/src/components/base/WalletDatePicker/WalletDatePicker.tsx

@@ -60,6 +60,7 @@ const WalletDatePicker = ({
         <div className='wallets-datepicker' ref={datePickerRef}>
             <Input
                 aria-label={label}
+                autoComplete='off'
                 className='w-full'
                 error={isInvalid}
                 label={label}

packages/account-v2/src/constants/manualFormConstants.tsx

@@ -15,11 +15,18 @@ export const MANUAL_DOCUMENT_TYPES = Object.freeze({
     PASSPORT: 'passport',
 });
 
+export const MANUAL_DOCUMENT_SELFIE = 'selfie_with_id';
+
 export const MANUAL_FORM_INITIAL_VALUES = Object.freeze({
-    document_expiry: '',
     document_number: '',
 });
 
+const MANUAL_FORM_PAGE_TYPES = Object.freeze({
+    BACK: 'back',
+    FRONT: 'front',
+    PHOTO: 'photo',
+});
+
 const documentExpiry = {
     errorMessage: 'Expiry date is required.',
     label: 'Expiry date',
@@ -35,14 +42,18 @@ export const MANUAL_DOCUMENT_TYPES_DATA = Object.freeze({
             },
         },
         inputSectionHeader: 'First, enter your Driving licence number and the expiry date.',
-        upload: [
+        uploads: [
             {
-                fileUploadIcon: <DrivingLicenseCardFront />,
-                fileUploadText: 'Upload the front of your driving licence.',
+                error: 'Front side of driving licence is required.',
+                icon: <DrivingLicenseCardFront />,
+                pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+                text: 'Upload the front of your driving licence.',
             },
             {
-                fileUploadIcon: <IdentityCardBack />,
-                fileUploadText: 'Upload the back of your driving licence.',
+                error: 'Back side of driving licence is required.',
+                icon: <IdentityCardBack />,
+                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: <IdentityCardFront />,
-                fileUploadText: 'Upload the front of your identity card.',
+                error: 'Front side of identity card is required.',
+                icon: <IdentityCardFront />,
+                pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+                text: 'Upload the front of your identity card.',
             },
             {
-                fileUploadIcon: <IdentityCardBack />,
-                fileUploadText: 'Upload the back of your identity card.',
+                error: 'Back side of identity card is required.',
+                icon: <IdentityCardBack />,
+                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: <NIMCSlipFront />,
-                fileUploadText: 'Upload your NIMC slip.',
+                error: 'Front side of NIMC slip is required.',
+                icon: <NIMCSlipFront />,
+                pageType: MANUAL_FORM_PAGE_TYPES.FRONT,
+                text: 'Upload your NIMC slip.',
             },
             {
-                fileUploadIcon: <ProofOfAgeIcon />,
-                fileUploadText: 'Upload your proof of age: birth certificate or age declaration document.',
+                error: 'Back side of NIMC slip is required.',
+                icon: <ProofOfAgeIcon />,
+                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: <PassportPlaceholder />,
-                fileUploadText: 'Upload the page of your passport that contains your photo.',
+                error: 'Front side of passport is required.',
+                icon: <PassportPlaceholder />,
+                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.',

packages/account-v2/src/containers/ManualForm/__tests__/manualForm.spec.tsx

@@ -13,6 +13,7 @@ describe('ManualForm', () => {
         selectedDocument?: React.ComponentProps<typeof ManualForm>['selectedDocument'];
     }) => {
         const mockProps: React.ComponentProps<typeof ManualForm> = {
+            onCancel: jest.fn(),
             onSubmit: jest.fn(),
             selectedDocument: selectedDocument ?? 'driving_licence',
         };