refactor(webapp): bound Formik fields

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx

@@ -1,24 +1,19 @@
 // @ts-nocheck
 import React from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { FastField, Field, ErrorMessage } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import {
   FFormGroup,
   FormattedMessage as T,
   WarehouseSelect,
+  FDateInput,
+  FInputGroup,
 } from '@/components';
-import { momentFormatter, compose, tansformDateValue } from '@/utils';
+import { momentFormatter, compose } from '@/utils';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import { FieldRequiredHint, Icon, InputPrependButton } from '@/components';
-import { inputIntent, handleDateChange } from '@/utils';
 import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
 import { useObserveTransferNoSettings } from './utils';
 import withSettings from '@/containers/Settings/withSettings';
@@ -37,6 +32,7 @@ function WarehouseTransferFormHeaderFields({
   warehouseTransferNumberPrefix,
 }) {
   const { warehouses } = useWarehouseTransferFormContext();
+  const { values } = useFormikContext();
 
   // Handle warehouse transfer number changing.
   const handleTransferNumberChange = () => {
@@ -44,10 +40,13 @@ function WarehouseTransferFormHeaderFields({
   };
 
   // Handle transfer no. field blur.
-  const handleTransferNoBlur = (form, field) => (event) => {
+  const handleTransferNoBlur = (event) => {
     const newValue = event.target.value;
 
-    if (field.value !== newValue && warehouseTransferAutoIncrement) {
+    if (
+      values.transaction_number !== newValue &&
+      warehouseTransferAutoIncrement
+    ) {
       openDialog('warehouse-transfer-no-form', {
         initialFormValues: {
           manualTransactionNo: newValue,
@@ -66,70 +65,58 @@ function WarehouseTransferFormHeaderFields({
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Date ----------- */}
-      <FastField name={'date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--date', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'date'}
+        label={<T id={'date'} />}
+        inline
+        labelInfo={<FieldRequiredHint />}
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+          }}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Transfer number ----------- */}
-      <Field name={'transaction_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'warehouse_transfer.label.transfer_no'} />}
-            // labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--transfer-no', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="transfer_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleTransferNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleTransferNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={
-                        'warehouse_transfer.setting_your_auto_generated_transfer_no'
-                      }
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup
+        name={'transaction_number'}
+        label={<T id={'warehouse_transfer.label.transfer_no'} />}
+        inline
+        fill
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'transaction_number'}
+            minimal={true}
+            asyncControl={true}
+            onBlur={handleTransferNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleTransferNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T
+                  id={
+                    'warehouse_transfer.setting_your_auto_generated_transfer_no'
+                  }
+                />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
 
       {/* ----------- Form Warehouse ----------- */}
       <FFormGroup