refactor(webapp): bound Formik fields

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.tsx

@@ -1,35 +1,38 @@
 // @ts-nocheck
 import React from 'react';
-import { Field, FastField, ErrorMessage } from 'formik';
-import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { useAutofocus } from '@/hooks';
-import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
-import { inputIntent, toSafeNumber } from '@/utils';
+import {
+  Row,
+  Col,
+  FMoneyInputGroup,
+  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
+} from '@/components';
+import { toSafeNumber } from '@/utils';
 import { decrementQuantity, incrementQuantity } from './utils';
 
 export default function IncrementAdjustmentFields() {
   const incrementFieldRef = useAutofocus();
+  const { values, setFieldValue } = useFormikContext();
 
   return (
     <Row>
       {/*------------ Quantity on hand  -----------*/}
       <Col className={'col--quantity-on-hand'}>
-        <FastField name={'quantity_on_hand'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'qty_on_hand'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity_on_hand" />}
-            >
-              <InputGroup
-                disabled={true}
-                medium={'true'}
-                intent={inputIntent({ error, touched })}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'quantity_on_hand'}
+          label={<T id={'qty_on_hand'} />}
+          fastField
+        >
+          <FInputGroup
+            name={'quantity_on_hand'}
+            disabled={true}
+            medium={'true'}
+            fastField
+          />
+        </FFormGroup>
       </Col>
 
       {/*------------ Sign -----------*/}
@@ -39,65 +42,36 @@ export default function IncrementAdjustmentFields() {
 
       {/*------------ Increment -----------*/}
       <Col className={'col--quantity'}>
-        <Field name={'quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'increment'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity" />}
-              fill={true}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                inputRef={(ref) => (incrementFieldRef.current = ref)}
-                onChange={(value) => {
-                  setFieldValue('quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'new_quantity',
-                    incrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup
+          name={'quantity'}
+          label={<T id={'increment'} />}
+          fill
+          fastField
+        >
+          <FMoneyInputGroup
+            name={'quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            inputRef={(ref) => (incrementFieldRef.current = ref)}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'new_quantity',
+                incrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+            fastField
+          />
+        </FFormGroup>
       </Col>
 
       {/*------------ Cost -----------*/}
       <Col className={'col--cost'}>
-        <FastField name={'cost'}>
-          {({
-            form: { setFieldValue },
-            field: { value },
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'cost'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="cost" />}
-            >
-              <MoneyInputGroup
-                value={value}
-                onChange={(value) => {
-                  setFieldValue('cost', value);
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'cost'} label={<T id={'cost'} />} fastField>
+          <FMoneyInputGroup name={'cost'} fastField />
+        </FFormGroup>
       </Col>
 
       {/*------------ Sign -----------*/}
@@ -107,38 +81,27 @@ export default function IncrementAdjustmentFields() {
 
       {/*------------ New quantity -----------*/}
       <Col className={'col--quantity-on-hand'}>
-        <Field name={'new_quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'new_quantity'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="new_quantity" />}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                onChange={(value) => {
-                  setFieldValue('new_quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'quantity',
-                    decrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup
+          name={'new_quantity'}
+          label={<T id={'new_quantity'} />}
+          fastField
+        >
+          <FMoneyInputGroup
+            name={'new_quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'quantity',
+                decrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+            fastField
+          />
+        </FFormGroup>
       </Col>
     </Row>
   );

packages/webapp/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.tsx

@@ -1,11 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import { Classes, FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T, FieldRequiredHint } from '@/components';
-import { ErrorMessage, FastField } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import {
+  FormattedMessage as T,
+  FieldRequiredHint,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
 
 import { useAutofocus } from '@/hooks';
-import { inputIntent } from '@/utils';
 
 /**
  * Item category form fields.
@@ -16,45 +20,35 @@ export default function ItemCategoryFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/* ----------- Category name ----------- */}
-      <FastField name={'name'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'category_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--category-name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="name" />}
-            inline={true}
-          >
-            <InputGroup
-              medium={true}
-              inputRef={(ref) => (categoryNameFieldRef.current = ref)}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'name'}
+        label={<T id={'category_name'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FInputGroup
+          name={'name'}
+          medium={true}
+          inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Description ----------- */}
-      <FastField name={'description'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="description" />}
-            inline={true}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'description'}
+        label={<T id={'description'} />}
+        inline
+        fastField
+      >
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fastField
+        />
+      </FFormGroup>
     </div>
   );
 }

packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { Classes, FormGroup, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { Classes, Position } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -10,14 +8,10 @@ import {
   FormattedMessage as T,
   FFormGroup,
   FTextArea,
+  FDateInput,
 } from '@/components';
 import { useAutofocus } from '@/hooks';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 
 /**
  *  locking Transactions form fields.
@@ -28,31 +22,24 @@ export default function LockingTransactionsFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------  Locking Date -----------*/}
-      <FastField name={'lock_to_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'locking_transactions.dialog.locking_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="lock_to_date" />}
-            minimal={true}
-            className={classNames(CLASSES.FILL, 'form-group--date')}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('lock_to_date', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{
-                position: Position.BOTTOM,
-                minimal: true,
-              }}
-              intent={inputIntent({ error, touched })}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'lock_to_date'}
+        label={<T id={'locking_transactions.dialog.locking_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        minimal={true}
+        className={classNames(CLASSES.FILL, 'form-group--date')}
+        fastField
+      >
+        <FDateInput
+          name={'lock_to_date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{
+            position: Position.BOTTOM,
+            minimal: true,
+          }}
+          fastField
+        />
+      </FFormGroup>
 
       {/*------------ Locking  Reason -----------*/}
       <FFormGroup
@@ -66,6 +53,7 @@ export default function LockingTransactionsFormFields() {
           growVertically={true}
           large={true}
           inputRef={(ref) => (reasonFieldRef.current = ref)}
+          fill
           fastField
         />
       </FFormGroup>

packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx

@@ -2,18 +2,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { Classes, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
-import { DateInput } from '@blueprintjs/datetime';
 import { isEqual } from 'lodash';
 import {
   Icon,
@@ -23,20 +15,18 @@ import {
   FieldRequiredHint,
   FAccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
+  FMoneyInputGroup,
   FormattedMessage as T,
   ExchangeRateMutedField,
   BranchSelect,
   BranchSelectButton,
   FeatureCan,
+  FFormGroup,
+  FDateInput,
+  FInputGroup,
+  FTextArea,
 } from '@/components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  compose,
-} from '@/utils';
+import { momentFormatter, compose } from '@/utils';
 import { useAutofocus } from '@/hooks';
 import { Features, ACCOUNT_TYPE } from '@/constants';
 import { useSetPrimaryBranchToForm } from './utils';
@@ -63,46 +53,39 @@ function RefundVendorCreditFormFields({
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />} fill>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/* ------------- Refund date ------------- */}
-          <FastField name={'refund_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'refund_date'}
-                label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('refund_date', formattedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  inputProps={{
-                    leftIcon: <Icon icon={'date-range'} />,
-                  }}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'refund_date'}
+            label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'refund_date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={5}>
@@ -130,34 +113,23 @@ function RefundVendorCreditFormFields({
       </Row>
 
       {/* ------------- Amount ------------- */}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'refund_vendor_credit.dialog.amount'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--amount', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-          >
-            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                intent={inputIntent({ error, touched })}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'amount'}
+        label={<T id={'refund_vendor_credit.dialog.amount'} />}
+        labelInfo={<FieldRequiredHint />}
+        fill
+        fastField
+      >
+        <ControlGroup>
+          <InputPrependText text={values.currency_code} />
+          <FMoneyInputGroup
+            name={'amount'}
+            minimal={true}
+            inputRef={(ref) => (amountFieldRef.current = ref)}
+            fastField
+          />
+        </ControlGroup>
+      </FFormGroup>
 
       <If condition={!isEqual(base_currency, values.currency_code)}>
         {/*------------ exchange rate -----------*/}
@@ -172,34 +144,19 @@ function RefundVendorCreditFormFields({
       </If>
 
       {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference_no'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference_no'}
+        label={<T id={'reference_no'} />}
+        fill
+        fastField
+      >
+        <FInputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FastField name={'description'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_vendor_credit.dialog.description'} />}
-            className={'form-group--description'}
-          >
-            <TextArea growVertically={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'description'} fill fastField>
+        <FTextArea name={'description'} growVertically={true} fastField />
+      </FFormGroup>
     </div>
   );
 }

packages/webapp/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { Classes, Position } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -10,13 +8,11 @@ import {
   Col,
   Row,
   FormattedMessage as T,
+  FFormGroup,
+  FDateInput,
+  FTextArea,
 } from '@/components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 import { useAutofocus } from '@/hooks';
 
 /**
@@ -30,87 +26,65 @@ export default function UnlockingPartialTransactionsFormFields() {
       <Row>
         <Col xs={6}>
           {/*------------  Unlocking from date  -----------*/}
-          <FastField name={'unlock_from_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={
-                  <T id={'unlocking_partial_transactions.dialog.from_date'} />
-                }
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="unlock_from_date" />}
-                minimal={true}
-                className={classNames(CLASSES.FILL, 'form-group--date')}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('unlock_from_date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'unlock_from_date'}
+            label={<T id={'unlocking_partial_transactions.dialog.from_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            minimal
+            fastField
+          >
+            <FDateInput
+              name={'unlock_from_date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={6}>
-          {/*------------  Unlocking from date  -----------*/}
-          <FastField name={'unlock_to_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={
-                  <T id={'unlocking_partial_transactions.dialog.to_date'} />
-                }
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="unlock_to_date" />}
-                minimal={true}
-                className={classNames(CLASSES.FILL, 'form-group--date')}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('unlock_to_date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          {/*------------  Unlocking to date  -----------*/}
+          <FFormGroup
+            name={'unlock_to_date'}
+            label={<T id={'unlocking_partial_transactions.dialog.to_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            minimal={true}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'unlock_to_date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
       </Row>
 
       {/*------------ unLocking  reason -----------*/}
-      <FastField name={'reason'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--reason'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'reason'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (reasonFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reason'}
+        label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+      >
+        <FTextArea
+          name={'reason'}
+          growVertically={true}
+          large={true}
+          inputRef={(ref) => (reasonFieldRef.current = ref)}
+          fill
+          fastField
+        />
+      </FFormGroup>
     </div>
   );
 }