Merge pull request #122 from likhith-deriv/likhith/shaheer/COJ-506/in…

…tegrate-manual-upload-flow fix: manual upload date pick
shaheer-deriv · Feb 19, 2024 · afea950 · afea950
2 parents 3bf64e6 + a829a7a
commit afea950
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 14 deletions.
diff --git a/packages/account-v2/src/App.tsx b/packages/account-v2/src/App.tsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import { APIProvider } from '@deriv/api';
 import { BreakpointProvider } from '@deriv/quill-design';
-import { ManualUploadContainer } from './pages/ManualFormContainer/manual-form-container';
 import RouteLinks from './router/components/route-links/route-links';
 import './index.scss';
 
@@ -13,10 +12,6 @@ const App: React.FC = () => {
         <APIProvider standalone>
             <BreakpointProvider>
                 <div className=' text-solid-slate-500 text-heading-h1'>Account V2</div>
-                <ManualUploadContainer
-                    selectedDocument='driving_licence'
-                    setSelectedDocument={val => console.log('Called with', val)}
-                />
                 <RouteLinks />
             </BreakpointProvider>
         </APIProvider>

diff --git a/packages/account-v2/src/components/DatePicker/DatePicker.tsx b/packages/account-v2/src/components/DatePicker/DatePicker.tsx
@@ -23,7 +23,6 @@ function customFormatShortWeekday(_locale: string | undefined, date: Date) {
 
 // TODO: Move this component to @deriv-com/ui
 const DatePicker = ({
-    defaultValue,
     disabled,
     errorMessage,
     isInvalid,
@@ -36,7 +35,7 @@ const DatePicker = ({
     onDateChange,
     ...props
 }: TDatePickerProps) => {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(defaultValue ? new Date('') : null);
+    const [selectedDate, setSelectedDate] = useState<Date | null>(props.value ? new Date(props.value ?? '') : null);
     const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);
     const datePickerRef = useRef<HTMLDivElement>(null);
 

diff --git a/packages/account-v2/src/containers/ManualForm/manual-form-inputs.tsx b/packages/account-v2/src/containers/ManualForm/manual-form-inputs.tsx
@@ -3,14 +3,12 @@ import { Field, FieldProps } from 'formik';
 import { Input, Text } from '@deriv-com/ui';
 import { DatePicker } from '../../components/DatePicker';
 import { TManualDocumentTypes } from '../../constants/manualFormConstants';
-import { useManualForm } from '../../hooks';
 import { getFieldsConfig, getTitleForFormInputs } from '../../utils/manual-form-utils';
 
-type TManualFormInputsProps = { selectedDocument: TManualDocumentTypes };
+type TManualFormInputsProps = { isExpiryDateRequired: boolean; selectedDocument: TManualDocumentTypes };
 
-export const ManualFormInputs = ({ selectedDocument }: TManualFormInputsProps) => {
+export const ManualFormInputs = ({ isExpiryDateRequired, selectedDocument }: TManualFormInputsProps) => {
     const fieldsConfig = getFieldsConfig(selectedDocument);
-    const { isExpiryDateRequired } = useManualForm();
 
     return (
         <Fragment>

diff --git a/packages/account-v2/src/containers/ManualForm/manual-form.tsx b/packages/account-v2/src/containers/ManualForm/manual-form.tsx
@@ -40,7 +40,7 @@ export const ManualForm = ({ formData, onCancel, onSubmit, selectedDocument }: T
                 <Form>
                     <div className='flex flex-col min-h-screen w-full'>
                         <div className='flex flex-col gap-1200'>
-                            <ManualFormInputs selectedDocument={selectedDocument} />
+                            <ManualFormInputs isExpiryDateRequired selectedDocument={selectedDocument} />
                             <ManualFormDocumentUpload selectedDocument={selectedDocument} />
                             <ManualFormFooter />
                         </div>

diff --git a/packages/account-v2/src/pages/ManualFormContainer/manual-form-container.tsx b/packages/account-v2/src/pages/ManualFormContainer/manual-form-container.tsx
@@ -25,6 +25,8 @@ export const ManualUploadContainer = ({ selectedDocument, setSelectedDocument }:
     const [formData, setFormData] = useState<Partial<TManualUploadFormData>>({});
     const [shouldUploadSelfie, setShouldUploadSelfie] = useState(false);
 
+    console.log('formData: ', formData);
+
     if (shouldUploadSelfie) {
         return (
             <SelfieDocumentUpload

diff --git a/packages/account-v2/src/router/constants/routesConfig.tsx b/packages/account-v2/src/router/constants/routesConfig.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ACCOUNT_V2_ROUTES } from '../../constants/routes';
-import { ManualUpload } from '../../modules';
 import { POAFormContainer } from '../../modules/POAForm/POAFormContainer';
+import { ManualUploadContainer } from '../../pages/ManualFormContainer/manual-form-container';
 import DummyRoute from '../components/dummy-route/dummy-route';
 
 export const routes = [
@@ -27,7 +27,12 @@ export const routes = [
     },
     {
         // TODO: Replace this with POI container
-        routeComponent: () => <ManualUpload countryCode='in' />,
+        routeComponent: () => (
+            <ManualUploadContainer
+                selectedDocument='driving_licence'
+                setSelectedDocument={val => console.log('Called with', val)}
+            />
+        ),
         routeName: 'Proof of identity',
         routePath: ACCOUNT_V2_ROUTES.ProofOfIdentity,
     },