[account-v2]/likhith/shaheer/[COJ-506]/integrated manual-flow-compone…

…nts (deriv-com#13504)

* integrated manual-flow-components

* chore: renamed file

* fix: added manual upload in route

* fix: dropzone upload issue

* chore: added selfie-docment-upload section

* fix: icon color and component

* chore: added selfieupload form

* [COJ] Shaheer / COJ-506 / Manual flow integration (deriv-com#63)

* fix: uses text component from deriv ui

* fix: fixes test

* fix: fixes styling

* fix: fixes button

* test: adds tests for manual form

* fix: checks country code

* fix: prevents unrequired items from hook

* style: adds full height

* fix: turns off autocomplete

* feat: adds yup validations

* fix: fixes type

* refactor: refactor file upload

* refactor: updates config

* Likhith/manual form code clean up (deriv-com#64)

* fix: included manual-form changes

* fix: updated selfie image

* fix: removed unwanted props

* fix: removed unwanted props

* fix: removed commented code

* Fixes datepicker component (deriv-com#65)

* fix: uses text component from deriv ui

* fix: fixes test

* fix: fixes styling

* fix: fixes button

* test: adds tests for manual form

* fix: checks country code

* fix: prevents unrequired items from hook

* style: adds full height

* fix: turns off autocomplete

* feat: adds yup validations

* fix: fixes type

* refactor: refactor file upload

* refactor: updates config

* fix: included manual-form changes

* fix: updated selfie image

* fix: removed unwanted props

* fix: removed unwanted props

* refactor: moves date picker component out

* refactor: refactors datepicker

* refactor: refactors date picker

* refactor: fixes type

* refactor: refactors datepicker

* refactor: renames component

* fix: passes props down the road

* refactor: renames testid

* test: fixes test

---------

Co-authored-by: Likhith Kolayari <[email protected]>

* fix: integrateion of manual-flow

* fix: manual upload date pick

* fix: added testcases for manual

* fix: code smells

* fix: fixes validation default

* fix: persists file dropzone

* Shaheer/coj 506 (deriv-com#67)

* fix: fixes validation default

* fix: persists file dropzone

* fix: validate form on mount

* fix: fixes height

* fix: validation errors

* fix: type issues

* fix: testcases

* fix: testcases

* fix: fixes nimc text error

* fix: removes console statements

* fix: adds todo for useKycAuthStatus hook

* test: fixes test case

* fix: adds color class

---------

Co-authored-by: Shaheer <[email protected]>
Co-authored-by: Shaheer <[email protected]>

packages/account-v2/src/App.tsx

@@ -2,34 +2,17 @@
 /* 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 { DocumentSelection } from './containers/DocumentSelection';
-import { DOCUMENT_LIST, INITIAL_VALUES, SELECTED_COUNTRY } from './mocks/idv-form.mock';
-import { IDVForm } from './modules/IDVForm';
-import { getIDVFormValidationSchema } from './modules/IDVForm/utils';
-import { ManualForm } from './modules/ManualForm';
 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} />
-                </Formik>
                 <RouteLinks />
-                {/* [TODO]:Mock - Remove Mock values */}
-                <DocumentSelection countryCode='ng' handleOnClick={val => console.log(val)} />
             </BreakpointProvider>
         </APIProvider>
     );

packages/account-v2/src/components/base/WalletDatePicker/WalletDatePicker.scss → packages/account-v2/src/components/DatePicker/DatePicker.scss

@@ -9,7 +9,7 @@ abbr[title] {
     text-decoration: none;
 }
 
-.wallets-datepicker {
+.datepicker {
     display: flex;
     flex-direction: column;
     position: relative;

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

@@ -1,25 +1,29 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import Calendar, { CalendarProps } from 'react-calendar';
 import { useOnClickOutside } from 'usehooks-ts';
 import { Input } from '@deriv-com/ui';
-import CalendarIcon from '../../../assets/date-picker/ic-calendar.svg';
-import unixToDateString from '../utils';
-import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
-import customFormatShortWeekday from './utils';
+import CalendarIcon from '../../assets/date-picker/ic-calendar.svg';
+import unixToDateString from '../base/utils';
 import 'react-calendar/dist/Calendar.css';
-import './WalletDatePicker.scss';
+import './DatePicker.scss';
 
-interface TDatePickerProps extends WalletTextFieldProps {
-    isInvalid?: WalletTextFieldProps['isInvalid'];
+interface TDatePickerProps extends ComponentProps<typeof Input> {
+    errorMessage?: string;
+    isInvalid?: boolean;
     maxDate?: Date;
     minDate?: Date;
     mobileAlignment?: 'above' | 'below';
     onDateChange: (formattedDate: string | null) => void;
+    value: string;
+}
+
+function customFormatShortWeekday(_locale: string | undefined, date: Date) {
+    const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+    return weekdays[date.getDay()];
 }
 
 // TODO: Move this component to @deriv-com/ui
-const WalletDatePicker = ({
-    defaultValue,
+const DatePicker = ({
     disabled,
     errorMessage,
     isInvalid,
@@ -30,8 +34,9 @@ const WalletDatePicker = ({
     onBlur,
     onChange,
     onDateChange,
+    ...props
 }: TDatePickerProps) => {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(defaultValue ? new Date(defaultValue) : 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);
 
@@ -57,10 +62,9 @@ const WalletDatePicker = ({
     }, [selectedDate]);
 
     return (
-        <div className='wallets-datepicker' ref={datePickerRef}>
+        <div className='datepicker' ref={datePickerRef}>
             <Input
-                aria-label={label}
-                className='w-full'
+                {...props}
                 error={isInvalid}
                 label={label}
                 message={isInvalid ? errorMessage?.toString() : ''}
@@ -69,8 +73,8 @@ const WalletDatePicker = ({
                 onClick={toggleCalendar}
                 rightPlaceholder={
                     <button
-                        className='wallets-datepicker__button'
-                        data-testid='wallets_datepicker_button'
+                        className='datepicker__button'
+                        data-testid='dt_datepicker_button'
                         disabled={disabled}
                         onClick={toggleCalendar}
                         type='button'
@@ -83,8 +87,8 @@ const WalletDatePicker = ({
             />
             {isCalendarOpen && (
                 <div
-                    className={`wallets-datepicker__container wallets-datepicker__container--${mobileAlignment}`}
-                    data-testid='wallets_datepicker_container'
+                    className={`datepicker__container datepicker__container--${mobileAlignment}`}
+                    data-testid='dt_datepicker_container'
                 >
                     <Calendar
                         formatShortWeekday={customFormatShortWeekday}
@@ -99,4 +103,4 @@ const WalletDatePicker = ({
     );
 };
 
-export default WalletDatePicker;
+export default DatePicker;

packages/account-v2/src/components/DatePicker/index.ts

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

packages/account-v2/src/components/base/Dropzone/Dropzone.scss → 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%;
@@ -55,34 +45,4 @@
             border: 0.5rem solid transparent;
         }
     }
-
-    &__placeholder {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1.4rem;
-    }
-
-    &__placeholder-icon {
-        flex-shrink: 0;
-    }
-
-    &__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);
-
-        &:hover {
-            background-color: var(--system-light-5-hover-background, #e9ecef);
-        }
-    }
 }