refactor: migrate form-fields file

packages/account/src/Components/forms/form-fields/__tests__/form-input-field.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FormInputField from '../form-input-field';
+import { Formik } from 'formik';
+
+describe('Tesing <FormInputField/> component', () => {
+    it('should render properties', () => {
+        const props = {
+            name: 'test-name',
+            optional: true,
+        };
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <FormInputField {...props} />
+            </Formik>
+        );
+
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should render Input field with optional status', () => {
+        const props = {
+            name: 'test-name',
+            optional: true,
+        };
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <FormInputField {...props} />
+            </Formik>
+        );
+
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+        expect(screen.getByRole('textbox')).not.toBeRequired();
+    });
+});

packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Field, FieldInputProps, FormikHelpers, FormikState } from 'formik';
+import { DateOfBirthPicker, TDatePickerOnChangeEvent } from '@deriv/components';
+import { toMoment } from '@deriv/shared';
+
+type TDateOfBirthFieldProps = {
+    name: string;
+    portal_id: string;
+} & React.ComponentProps<typeof DateOfBirthPicker>;
+
+type TDateOfBirthFieldHelpers = {
+    field: FieldInputProps<string | moment.Moment>;
+    form: FormikHelpers<{ date_of_birth: string | moment.Moment }> &
+        FormikState<{ date_of_birth: string | moment.Moment }>;
+};
+
+/**
+ * DateOfBirthField is a wrapper around DateOfBirthPicker that can be used with Formik.
+ * @name DateOfBirthField
+ * @param {string} name - Name of the field
+ * @param {string} portal_id - Portal ID
+ * @param {TDatePicker} [props] - Other props to pass to DateOfBirthPicker
+ * @returns {React.ReactNode}
+ */
+const DateOfBirthField = ({ name, portal_id, ...rest }: TDateOfBirthFieldProps) => (
+    <Field name={name}>
+        {({
+            field: { value },
+            form: { setFieldValue, errors, touched, setFieldTouched },
+        }: TDateOfBirthFieldHelpers) => (
+            <DateOfBirthPicker
+                {...rest}
+                error={touched.date_of_birth && errors.date_of_birth ? errors.date_of_birth : undefined}
+                name={name}
+                onBlur={() => setFieldTouched(name)}
+                onChange={({ target }: TDatePickerOnChangeEvent) =>
+                    setFieldValue(name, target?.value ? toMoment(target.value).format('YYYY-MM-DD') : '', true)
+                }
+                value={value}
+                portal_id={portal_id}
+            />
+        )}
+    </Field>
+);
+
+export default DateOfBirthField;

packages/account/src/Components/forms/form-fields/form-input-field.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FieldInputProps, FormikHelpers, FormikState, Field } from 'formik';
+import { Input } from '@deriv/components';
+
+type FormInputFieldProps = {
+    name: string;
+    optional?: boolean;
+    warn?: string;
+} & React.ComponentProps<typeof Input>;
+
+type TFormInputFieldHelpers = {
+    field: FieldInputProps<string>;
+    form: FormikHelpers<Record<string, string>> & FormikState<Record<string, string>>;
+};
+
+/**
+ * FormInputField is a wrapper around Input that can be used with Formik.
+ * @name FormInputField
+ * @param {string} name - Name of the field
+ * @param {boolean} [optional] - Whether the field is optional
+ * @param {string} [warn] - Display a warning message
+ * @param {Input} [props] - Other props to pass to Input
+ * @returns {React.ReactNode}
+ */
+const FormInputField = ({ name, optional = false, warn, ...rest }: FormInputFieldProps) => (
+    <Field name={name}>
+        {({ field, form: { errors, touched } }: TFormInputFieldHelpers) => (
+            <Input
+                {...field}
+                {...rest}
+                type='text'
+                required={!optional}
+                autoComplete='off'
+                error={touched[field.name] && errors[field.name] ? errors[field.name] : undefined}
+                warn={warn}
+            />
+        )}
+    </Field>
+);
+
+export default FormInputField;

packages/account/src/Components/forms/form-fields/index.ts

@@ -0,0 +1,4 @@
+import FormInputField from './form-input-field';
+import DateOfBirthField from './date-of-birth-field';
+
+export { FormInputField, DateOfBirthField };

packages/components/src/components/date-picker/date-picker.tsx

@@ -7,12 +7,8 @@ import MobileWrapper from '../mobile-wrapper';
 import DesktopWrapper from '../desktop-wrapper';
 import { useOnClickOutside } from '../../hooks/use-onclickoutside';
 import { MomentInput } from 'moment';
+import { TDatePickerOnChangeEvent } from '../types';
 
-type TDatePickerOnChangeEvent = {
-    date?: string;
-    duration?: number | null | string;
-    target?: { name: string; value: number | string | moment.Moment | null };
-};
 type TDatePicker = Omit<
     React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
     'value' | 'onSelect' | 'is_datepicker_visible' | 'placement' | 'style' | 'calendar_el_ref' | 'parent_ref'

packages/components/src/components/date-picker/index.ts

@@ -1,4 +1,3 @@
 import DatePicker from './date-picker';
 import './date-picker.scss';
-
 export default DatePicker;

packages/components/src/components/types/common.types.ts

@@ -14,3 +14,9 @@ export type TItem = {
 };
 
 export type TTableRowItem = { component: React.ReactNode };
+
+export type TDatePickerOnChangeEvent = {
+    date?: string;
+    duration?: number | null | string;
+    target?: { name?: string; value?: number | string | moment.Moment | null };
+};

packages/components/src/components/types/index.ts

@@ -2,7 +2,7 @@ import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
 import { TMultiStepProps, TMultiStepRefProps } from './multi-step.types';
 import { TPopoverProps } from './popover.types';
-import { TGetCardLables, TGetContractTypeDisplay } from './common.types';
+import { TGetCardLables, TGetContractTypeDisplay, TDatePickerOnChangeEvent } from './common.types';
 import { TErrorMessages, TGetContractPath, TToastConfig } from './contract.types';
 
 export type {
@@ -18,4 +18,5 @@ export type {
     TGetContractPath,
     TToastConfig,
     TGetContractTypeDisplay,
+    TDatePickerOnChangeEvent,
 };

packages/components/src/index.js → packages/components/src/index.ts

@@ -113,3 +113,4 @@ export { default as UnhandledErrorModal } from './components/unhandled-error-mod
 export { default as VerticalTab } from './components/vertical-tab';
 export { default as Wizard } from './components/wizard';
 export * from './hooks';
+export * from './components/types';