Merge branch 'master' of https://github.com/shahzaib-deriv/deriv-app …

…into TRAH-2979-restructure-real-account-creation

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);
-        }
-    }
 }