refactor: date input field

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -127,34 +127,26 @@ function BillFormHeader() {
       </FastField>
 
       {/* ------- Bill number ------- */}
-      <FastField name={'bill_number'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'bill_number'} />}
-            inline={true}
-            className={('form-group--bill_number', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_number" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'bill_number'}
+        label={<T id={'bill_number'} />}
+        inline
+        fill
+        fastField
+      >
+        <FInputGroup name={'bill_number'} minimal={true} fastField />
+      </FFormGroup>
 
       {/* ------- Reference ------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference_no'}
+        label={<T id={'reference'} />}
+        inline={true}
+        fill
+        fastField
+      >
+        <FInputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -23,6 +23,7 @@ import {
   VendorDrawerLink,
   VendorsSelect,
   Stack,
+  FDateInput,
 } from '@/components';
 import {
   vendorsFieldShouldUpdate,
@@ -108,86 +109,63 @@ function VendorCreditNoteFormHeaderFields({
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
+
       {/* ------- Vendor Credit date ------- */}
-      <FastField name={'vendor_credit_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames(
-              'form-group--vendor_credit_date',
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="vendor_credit_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('vendor_credit_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'vendor_credit_date'}
+        label={<T id={'credit_note.label_credit_note_date'} />}
+        inline
+        labelInfo={<FieldRequiredHint />}
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'vendor_credit_date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
+          fill
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Vendor Credit No # ----------- */}
-      <FastField name={'vendor_credit_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={('form-group--vendor_credit_number', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="vendor_credit_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleVendorCreditNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleVendorCreditNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={'setting_your_auto_generated_vendor_credit_number'}
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+
+      <FFormGroup
+        name={'vendor_credit_number'}
+        label={<T id={'credit_note.label_credit_note'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'vendor_credit_number'}
+            minimal={true}
+            asyncControl={true}
+            onBlur={handleVendorCreditNoBlur}
+            fastField
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleVendorCreditNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_vendor_credit_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup label={<T id={'reference_no'} />} inline={true} fastField>
+        <FInputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>
     </Stack>
   );
 }

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -17,6 +17,7 @@ import { css } from '@emotion/css';
 import { Theme, useTheme } from '@emotion/react';
 
 import {
+  FDateInput,
   FInputGroup,
   FMoneyInputGroup,
   Stack,
@@ -117,30 +118,22 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       />
 
       {/* ------------ Payment date ------------ */}
-      <FastField name={'payment_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('payment_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'payment_date'}
+        label={<T id={'payment_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'payment_date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ------------ Full amount ------------ */}
       <FFormGroup
@@ -173,23 +166,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FFormGroup>
 
       {/* ------------ Payment number ------------ */}
-      <FastField name={'payment_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_no'} />}
-            inline={true}
-            className={('form-group--payment_number', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_number" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'payment_number'}
+        label={<T id={'payment_no'} />}
+        inline={true}
+        fastField
+      >
+        <FInputGroup name={'payment_number'} minimal={true} fastField />
+      </FFormGroup>
 
       {/* ------------ Payment account ------------ */}
       <FFormGroup