From a1e8dbf1c7cbe801cce9b751b7230c515404de7b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Wed, 11 Nov 2020 17:18:54 +0200
Subject: [PATCH] feat: optimize customer form performance. feat: optimize item
 category form performance.

---
 client/src/containers/Customers/Customer.js   |   2 +-
 .../Customers/CustomerAddressTabs.js          | 521 +++++++-----------
 .../Customers/CustomerFinancialPanel.js       | 168 +++---
 .../src/containers/Customers/CustomerForm.js  | 123 ++---
 .../CustomerFormAfterPrimarySection.js        |  97 ++--
 .../Customers/CustomerFormPrimarySection.js   | 182 +++---
 .../containers/Customers/CustomerNotePanel.js |  32 +-
 .../Customers/CustomerTypeRadioField.js       |  42 +-
 .../src/containers/Customers/CustomersTabs.js |  31 +-
 .../ItemCategoryDialog/ItemCategoryForm.js    | 216 ++++++++
 .../ItemCategoryFormDialogContent.js          | 268 +--------
 client/src/containers/Items/ItemForm.js       |   3 +-
 client/src/containers/Items/ItemFormBody.js   |   1 -
 .../Items/ItemFormFloatingActions.js          |  10 +-
 .../Items/ItemFormInventorySection.js         |   4 +-
 .../Items/ItemFormPrimarySection.js           |  14 +-
 16 files changed, 727 insertions(+), 987 deletions(-)
 create mode 100644 client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

diff --git a/client/src/containers/Customers/Customer.js b/client/src/containers/Customers/Customer.js
index edf1552f2..2bc2b9a5e 100644
--- a/client/src/containers/Customers/Customer.js
+++ b/client/src/containers/Customers/Customer.js
@@ -42,7 +42,7 @@ function Customer({
 
   const handleFormSubmit = useCallback(
     (payload) => {
-      payload.redirect && history.push('/customers');
+      
     },
     [history],
   );
diff --git a/client/src/containers/Customers/CustomerAddressTabs.js b/client/src/containers/Customers/CustomerAddressTabs.js
index bc6e067b4..63f3824ed 100644
--- a/client/src/containers/Customers/CustomerAddressTabs.js
+++ b/client/src/containers/Customers/CustomerAddressTabs.js
@@ -1,16 +1,11 @@
 import React from 'react';
-import { FormGroup, Intent, InputGroup, TextArea } from '@blueprintjs/core';
+import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
 import { Row, Col } from 'components';
 import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import { inputIntent } from 'utils';
 
-import ErrorMessage from 'components/ErrorMessage';
-
-const CustomerBillingAddress = ({
-  errors,
-  touched,
-  setFieldValue,
-  getFieldProps,
-}) => {
+const CustomerBillingAddress = ({}) => {
   return (
     <div className={'tab-panel--address'}>
       <Row>
@@ -19,172 +14,105 @@ const CustomerBillingAddress = ({
             <T id={'billing_address'} />
           </h4>
           {/*------------ Billing Address country -----------*/}
-          <FormGroup
-            className={'form-group--journal-number'}
-            intent={
-              errors.billing_address_country &&
-              touched.billing_address_country &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_country"
-                {...{ errors, touched }}
-              />
-            }
-            label={<T id={'country'} />}
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_country &&
-                touched.billing_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_country')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_country'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_country" />}
+                label={<T id={'country'} />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Billing Address 1  -----------*/}
-          <FormGroup
-            label={<T id={'address_line_1'} />}
-            className={'form-group--address_line_1'}
-            intent={
-              errors.billing_address_1 &&
-              touched.billing_address_1 &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
-            }
-          >
-            <TextArea
-              intent={
-                errors.billing_address_1 &&
-                touched.billing_address_1 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_1')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_1'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_1'} />}
+                className={'form-group--address_line_1'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_1" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Billing Address 2  -----------*/}
-          <FormGroup
-            label={<T id={'address_line_2'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.billing_address_2 &&
-              touched.billing_address_2 &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="billing_address_2" {...{ errors, touched }} />
-            }
-          >
-            <TextArea
-              intent={
-                errors.billing_address_2 &&
-                touched.billing_address_2 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_2')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_2'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_2'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_2" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
           {/*------------ Billing Address city  -----------*/}
-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.billing_address_city &&
-              touched.billing_address_city &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_city"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_city &&
-                touched.billing_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_city')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_city'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'city_town'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_city" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Billing Address state  -----------*/}
-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.billing_address_state &&
-              touched.billing_address_state &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_state"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_state &&
-                touched.billing_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_state')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_state'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'state'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_state" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
           {/*------------ Billing Address postcode  -----------*/}
-          <FormGroup
-            label={<T id={'zip_code'} />}
-            intent={
-              errors.billing_address_postcode &&
-              touched.billing_address_postcode &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_postcode"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_postcode &&
-                touched.billing_address_postcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_postcode')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_postcode'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'zip_code'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_postcode" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Billing Address phone  -----------*/}
-          <FormGroup
-            label={<T id={'phone'} />}
-            intent={
-              errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="billing_address_phone" {...{ errors, touched }} />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
-              }
-              {...getFieldProps('billing_address_phone')}
-            />
-          </FormGroup>
+          <FastField name={'billing_address_phone'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'phone'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_phone" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={6}>
@@ -192,172 +120,107 @@ const CustomerBillingAddress = ({
             <T id={'shipping_address'} />
           </h4>
           {/*------------ Shipping Address country -----------*/}
-          <FormGroup
-            label={<T id={'country'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.shipping_address_country &&
-              touched.shipping_address_country &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_country"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_country &&
-                touched.shipping_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_country')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_country'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'country'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_country" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address 1  -----------*/}
-          <FormGroup
-            label={<T id={'address_line_1'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.shipping_address_1 &&
-              touched.shipping_address_1 &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="shipping_address_1" {...{ errors, touched }} />
-            }
-          >
-            <TextArea
-              intent={
-                errors.shipping_address_1 &&
-                touched.shipping_address_1 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_1')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_1'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_1'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_1" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address 2  -----------*/}
-          <FormGroup
-            label={<T id={'address_line_2'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.shipping_address_2 &&
-              touched.shipping_address_2 &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="shipping_address_2" {...{ errors, touched }} />
-            }
-          >
-            <TextArea
-              intent={
-                errors.shipping_address_2 &&
-                touched.shipping_address_2 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_2')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_2'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_2'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_2" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address city  -----------*/}
-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.shipping_address_city &&
-              touched.shipping_address_city &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_city"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_city &&
-                touched.shipping_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_city')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_city'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'city_town'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_city" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address state  -----------*/}
-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
-            intent={
-              errors.shipping_address_state &&
-              touched.shipping_address_state &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_state"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_state &&
-                touched.shipping_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_state')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_state'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'state'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_state" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address postcode  -----------*/}
-          <FormGroup
-            label={<T id={'zip_code'} />}
-            intent={
-              errors.shipping_address_postcode &&
-              touched.shipping_address_postcode &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_postcode"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_postcode &&
-                touched.shipping_address_postcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_postcode')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_postcode'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'zip_code'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_postcode" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
           {/*------------ Shipping Address phone  -----------*/}
-          <FormGroup
-            label={<T id={'phone'} />}
-            intent={
-              errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage name="shipping_address_phone" {...{ errors, touched }} />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_phone')}
-            />
-          </FormGroup>
+          <FastField name={'shipping_address_phone'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'phone'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_phone" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>
diff --git a/client/src/containers/Customers/CustomerFinancialPanel.js b/client/src/containers/Customers/CustomerFinancialPanel.js
index 71edb0189..bea09ca4d 100644
--- a/client/src/containers/Customers/CustomerFinancialPanel.js
+++ b/client/src/containers/Customers/CustomerFinancialPanel.js
@@ -1,27 +1,21 @@
 import React, { useCallback, useState } from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
-import { FormGroup, Intent, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  ErrorMessage,
-  MoneyInputGroup,
-  CurrencySelectList,
-  Row,
-  Col,
-} from 'components';
+import { FastField, ErrorMessage } from 'formik';
+import { MoneyInputGroup, CurrencySelectList, Row, Col } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
 import withCurrencies from 'containers/Currencies/withCurrencies';
 
-import { compose, momentFormatter, tansformDateValue } from 'utils';
+import {
+  compose,
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+} from 'utils';
 
 function CustomerFinancialPanel({
-  setFieldValue,
-  errors,
-  touched,
-  values,
-
   // #withCurrencies
   currenciesList,
 
@@ -29,21 +23,6 @@ function CustomerFinancialPanel({
 }) {
   const [selectedItems, setSelectedItems] = useState();
 
-  const handleDateChange = useCallback(
-    (date) => {
-      const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue('opening_balance_at', formatted);
-    },
-    [setFieldValue],
-  );
-
-  const handleMoneyInputChange = useCallback(
-    (e, value) => {
-      setFieldValue('opening_balance', value);
-    },
-    [setFieldValue],
-  );
-
   const onItemsSelect = useCallback(
     (filedName) => {
       return (filed) => {
@@ -51,77 +30,82 @@ function CustomerFinancialPanel({
           ...selectedItems,
           [filedName]: filed,
         });
-        setFieldValue(filedName, filed.currency_code);
+        // setFieldValue(filedName, filed.currency_code);
       };
     },
-    [setFieldValue, selectedItems],
+    [selectedItems],
   );
   return (
     <div className={'tab-panel--financial'}>
       <Row>
         <Col xs={6}>
           {/*------------ Opening balance at -----------*/}
-          <FormGroup
-            label={<T id={'opening_balance_at'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            intent={
-              errors.opening_balance_at &&
-              touched.opening_balance_at &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="opening_balance_at"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(values.opening_balance_at)}
-              onChange={handleDateChange}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              disabled={customerId}
-            />
-          </FormGroup>
-          {/*------------ Opening balance  -----------*/}
-          <FormGroup
-            label={<T id={'opening_balance'} />}
-            className={classNames('form-group--opening-balance', Classes.FILL)}
-            intent={
-              errors.opening_balance && touched.opening_balance && Intent.DANGER
-            }
-            inline={true}
-          >
-            <MoneyInputGroup
-              value={values.opening_balance}
-              prefix={'$'}
-              onChange={handleMoneyInputChange}
-              inputGroupProps={{
-                fill: true,
-              }}
-              disabled={customerId}
-            />
-          </FormGroup>
-          {/*------------ Currency  -----------*/}
-          <FormGroup
-            label={<T id={'currency'} />}
-            className={classNames(
-              'form-group--select-list',
-              'form-group--balance-currency',
-              Classes.FILL,
+          <FastField name={'opening_balance_at'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'opening_balance_at'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="opening_balance_at" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  // onChange={}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  disabled={customerId}
+                />
+              </FormGroup>
             )}
-            inline={true}
-          >
-            {/* <CurrenciesSelectList /> */}
-            <CurrencySelectList
-              currenciesList={currenciesList}
-              selectedCurrencyCode={values.currency_code}
-              onCurrencySelected={onItemsSelect('currency_code')}
-              disabled={customerId}
-            />
-          </FormGroup>
+          </FastField>
+
+          {/*------------ Opening balance  -----------*/}
+          <FastField name={'opening_balance'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'opening_balance'} />}
+                className={classNames(
+                  'form-group--opening-balance',
+                  Classes.FILL,
+                )}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+              >
+                <MoneyInputGroup
+                  value={value}
+                  prefix={'$'}
+                  inputGroupProps={{
+                    fill: true,
+                  }}
+                  disabled={customerId}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Currency  -----------*/}
+          <FastField name={'currency_code'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'currency'} />}
+                className={classNames(
+                  'form-group--select-list',
+                  'form-group--balance-currency',
+                  Classes.FILL,
+                )}
+                inline={true}
+              >
+                <CurrencySelectList
+                  currenciesList={currenciesList}
+                  selectedCurrencyCode={value}
+                  onCurrencySelected={onItemsSelect('currency_code')}
+                  disabled={customerId}
+                />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>
diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js
index bfa5fd523..d8244188b 100644
--- a/client/src/containers/Customers/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm.js
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
+import { useFormik, Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -23,7 +23,7 @@ import withMediaActions from 'containers/Media/withMediaActions';
 import withCustomers from 'containers/Customers//withCustomers';
 import useMedia from 'hooks/useMedia';
 
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 
 /**
  * Customer form.
@@ -47,13 +47,12 @@ function CustomerForm({
   requestDeleteMedia,
 
   // #Props
+  customerId,
   onFormSubmit,
   onCancelForm,
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const [payload, setPayload] = useState({});
-
   const {
     setFiles,
     saveMedia,
@@ -129,7 +128,7 @@ function CustomerForm({
       billing_address_2: '',
       billing_address_city: '',
       billing_address_state: '',
-      billing_address_postcode: null,
+      billing_address_postcode: '',
       billing_address_phone: '',
 
       shipping_address_country: '',
@@ -137,7 +136,7 @@ function CustomerForm({
       shipping_address_2: '',
       shipping_address_city: '',
       shipping_address_state: '',
-      shipping_address_postcode: null,
+      shipping_address_postcode: '',
       shipping_address_phone: '',
 
       opening_balance: '',
@@ -160,14 +159,6 @@ function CustomerForm({
     [customer, defaultInitialValues],
   );
 
-  const saveInvokeSubmit = useCallback(
-    (payload) => {
-      onFormSubmit && onFormSubmit(payload);
-    },
-
-    [onFormSubmit],
-  );
-
   useEffect(() => {
     customer && customer.id
       ? changePageTitle(formatMessage({ id: 'edit_customer' }))
@@ -178,7 +169,7 @@ function CustomerForm({
     values,
     { setSubmitting, resetForm, setErrors },
   ) => {
-    const formValues = { ...values, status: payload.publish };
+    const formValues = { ...values };
     if (customer && customer.id) {
       requestEditCustomer(customer.id, formValues)
         .then((response) => {
@@ -190,7 +181,6 @@ function CustomerForm({
           });
           setSubmitting(false);
           resetForm();
-          saveInvokeSubmit({ action: 'update', ...payload });
         })
         .catch((errors) => {
           setSubmitting(false);
@@ -205,7 +195,6 @@ function CustomerForm({
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);
-          saveInvokeSubmit({ action: 'new', ...payload });
         })
         .catch((errors) => {
           setSubmitting(false);
@@ -213,23 +202,6 @@ function CustomerForm({
     }
   };
 
-  const {
-    setFieldValue,
-    getFieldProps,
-    errors,
-    values,
-    touched,
-    isSubmitting,
-    handleSubmit,
-  } = useFormik({
-    enableReinitialize: true,
-    validationSchema: validationSchema,
-    initialValues: {
-      ...initialValues,
-    },
-    onSubmit: handleFormSubmit,
-  });
-
   const initialAttachmentFiles = useMemo(() => {
     return customer && customer.media
       ? customer.media.map((attach) => ({
@@ -254,65 +226,44 @@ function CustomerForm({
     },
     [setDeletedFiles, deletedFiles],
   );
-  const handleSubmitClick = useCallback(
-    (payload) => {
-      setPayload(payload);
-      handleSubmit();
-    },
-    [setPayload, handleSubmit],
-  );
-
   const handleCancelClick = useCallback(
-    (payload) => {
-      onCancelForm && onCancelForm(payload);
+    (payload, event) => {
+     
     },
-    [onCancelForm],
+    [],
   );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
-      <form onSubmit={handleSubmit}>
-        <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
-          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-            <CustomerFormPrimarySection
-              setFieldValue={setFieldValue}
-              getFieldProps={getFieldProps}
-              errors={errors}
-              values={values}
-              touched={touched}
+      <Formik
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
+              <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+                <CustomerFormPrimarySection />
+              </div>
+
+              <div className={'page-form__after-priamry-section'}>
+                <CustomerFormAfterPrimarySection />
+              </div>
+            </div>
+
+            <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+              <CustomersTabs customerId={customerId} />
+            </div>
+
+            <CustomerFloatingActions
+              isSubmitting={isSubmitting}
+              onCancelClick={handleCancelClick}
+              customerId={customer}
             />
-          </div>
-
-          <div className={'page-form__after-priamry-section'}>
-            <CustomerFormAfterPrimarySection
-              setFieldValue={setFieldValue}
-              getFieldProps={getFieldProps}
-              errors={errors}
-              values={values}
-              touched={touched}
-            />
-          </div>
-        </div>
-
-        <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
-          <CustomersTabs
-            setFieldValue={setFieldValue}
-            getFieldProps={getFieldProps}
-            errors={errors}
-            values={values}
-            touched={touched}
-            customerId={customer}
-          />
-        </div>
-      </form>
-
-      <CustomerFloatingActions
-        isSubmitting={isSubmitting}
-        onSubmitClick={handleSubmitClick}
-        // customer={customer}
-        onCancelClick={handleCancelClick}
-        customerId={customer}
-      />
+          </Form>
+        )}
+      </Formik>
     </div>
   );
 }
diff --git a/client/src/containers/Customers/CustomerFormAfterPrimarySection.js b/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
index 25e3436f8..87ca54a4d 100644
--- a/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
+++ b/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
@@ -1,35 +1,26 @@
 import React from 'react';
-import {
-  FormGroup,
-  Intent,
-  InputGroup,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
-import { ErrorMessage } from 'components';
+import { inputIntent } from 'utils';
 
-export default function CustomerFormAfterPrimarySection({
-  setFieldValue,
-  getFieldProps,
-  errors,
-  values,
-  touched,
-}) {
+export default function CustomerFormAfterPrimarySection({}) {
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
-      <FormGroup
-        intent={errors.email && touched.email && Intent.DANGER}
-        helperText={<ErrorMessage name={'email'} {...{ errors, touched }} />}
-        className={'form-group--email'}
-        label={<T id={'customer_email'} />}
-        inline={true}
-      >
-        <InputGroup
-          intent={errors.email && touched.email && Intent.DANGER}
-          {...getFieldProps('email')}
-        />
-      </FormGroup>
+      <FastField name={'email'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'email'} />}
+            className={'form-group--email'}
+            label={<T id={'customer_email'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
 
       {/*------------ Phone number -----------*/}
       <FormGroup
@@ -38,33 +29,41 @@ export default function CustomerFormAfterPrimarySection({
         inline={true}
       >
         <ControlGroup>
-          <InputGroup
-            intent={errors.work_phone && touched.work_phone && Intent.DANGER}
-            {...getFieldProps('work_phone')}
-            placeholder={'Work'}
-          />
-
-          <InputGroup
-            intent={errors.personal_phone && touched.personal_phone && Intent.DANGER}
-            {...getFieldProps('personal_phone')}
-            placeholder={'Mobile'}
-          />
+          <FastField name={'work_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={'Work'}
+                {...field}
+              />
+            )}
+          </FastField>
+          <FastField name={'personal_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={'Mobile'}
+                {...field}
+              />
+            )}
+          </FastField>
         </ControlGroup>
       </FormGroup>
 
       {/*------------ Customer website -----------*/}
-      <FormGroup
-        intent={errors.website && touched.website && Intent.DANGER}
-        helperText={<ErrorMessage name={'website'} {...{ errors, touched }} />}
-        className={'form-group--website'}
-        label={<T id={'website'} />}
-        inline={true}
-      >
-        <InputGroup
-          intent={errors.website && touched.website && Intent.DANGER}
-          {...getFieldProps('website')}
-        />
-      </FormGroup>
+      <FastField name={'website'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'website'} />}
+            className={'form-group--website'}
+            label={<T id={'website'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
     </div>
   );
 }
diff --git a/client/src/containers/Customers/CustomerFormPrimarySection.js b/client/src/containers/Customers/CustomerFormPrimarySection.js
index f649c288a..46afad8a1 100644
--- a/client/src/containers/Customers/CustomerFormPrimarySection.js
+++ b/client/src/containers/Customers/CustomerFormPrimarySection.js
@@ -1,58 +1,27 @@
-import React, { useMemo, useCallback } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, Intent, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, Field, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import {
   Hint,
   FieldRequiredHint,
   SalutationList,
   DisplayNameList,
-  ErrorMessage,
-  Row,
-  Col,
 } from 'components';
 import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
 import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
 
 /**
  * Customer form primary section.
  */
 export default function CustomerFormPrimarySection({
-  setFieldValue,
-  getFieldProps,
-  errors,
-  values,
-  touched,
 }) {
-  const handleCustomerTypeCahange = useCallback(
-    (value) => {
-      setFieldValue('customer_type', value);
-    },
-    [setFieldValue],
-  );
-
-  // Handle salutation field select.
-  const handleSalutationSelect = useCallback(
-    (salutation) => {
-      setFieldValue('salutation', salutation.label);
-    },
-    [setFieldValue],
-  );
-
-  // Handle display name field select.
-  const handleDisplayNameSelect = useCallback(
-    (displayName) => {
-      setFieldValue('display_name', displayName.label);
-    },
-    [setFieldValue],
-  );
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**-----------Customer type. -----------*/}
-      <CustomerTypeRadioField
-        selectedValue={values.customer_type}
-        onChange={handleCustomerTypeCahange}
-      />
+      <CustomerTypeRadioField />
 
       {/**----------- Contact name -----------*/}
       <FormGroup
@@ -61,74 +30,93 @@ export default function CustomerFormPrimarySection({
         inline={true}
       >
         <ControlGroup>
-          <SalutationList
-            onItemSelect={handleSalutationSelect}
-            selectedItem={values.salutation}
-            popoverProps={{ minimal: true }}
-            className={classNames(
-              CLASSES.FORM_GROUP_LIST_SELECT,
-              CLASSES.FILL,
-              'input-group--salutation-list',
-              'select-list--fill-button',
+          <FastField name={'salutation'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <SalutationList
+                onItemSelect={(salutation) => {
+                  form.setFieldValue('salutation', salutation.label);
+                }}
+                selectedItem={value}
+                popoverProps={{ minimal: true }}
+                className={classNames(
+                  CLASSES.FORM_GROUP_LIST_SELECT,
+                  CLASSES.FILL,
+                  'input-group--salutation-list',
+                  'select-list--fill-button',
+                )}
+              />
             )}
-          />
-          <InputGroup
-            placeholder={'First Name'}
-            intent={errors.first_name && touched.first_name && Intent.DANGER}
-            {...getFieldProps('first_name')}
-            className={classNames('input-group--first-name')}
-          />
-          <InputGroup
-            placeholder={'Last Name'}
-            intent={errors.last_name && touched.last_name && Intent.DANGER}
-            {...getFieldProps('last_name')}
-            className={classNames('input-group--last-name')}
-          />
+          </FastField>
+
+          <FastField name={'first_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={'First Name'}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--first-name')}
+                {...field}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'last_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={'Last Name'}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--last-name')}
+                {...field}
+              />
+            )}
+          </FastField>
         </ControlGroup>
       </FormGroup>
 
       {/*----------- Company Name -----------*/}
-      <FormGroup
-        className={classNames('form-group--company_name')}
-        label={<T id={'company_name'} />}
-        intent={errors.company_name && touched.company_name && Intent.DANGER}
-        helperText={
-          <ErrorMessage {...{ errors, touched }} name={'company_name'} />
-        }
-        inline={true}
-      >
-        <InputGroup
-          intent={errors.company_name && touched.company_name && Intent.DANGER}
-          {...getFieldProps('company_name')}
-        />
-      </FormGroup>
+      <FastField name={'company_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            className={classNames('form-group--company_name')}
+            label={<T id={'company_name'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'company_name'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
 
       {/*----------- Display Name -----------*/}
-      <FormGroup
-        intent={errors.display_name && touched.display_name && Intent.DANGER}
-        helperText={
-          <ErrorMessage {...{ errors, touched }} name={'display_name'} />
-        }
-        label={
-          <>
-            <T id={'display_name'} />
-            <FieldRequiredHint />
-            <Hint />
-          </>
-        }
-        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-        inline={true}
-      >
-        <DisplayNameList
-          firstName={values.first_name}
-          lastName={values.last_name}
-          company={values.company_name}
-          salutation={values.salutation}
-          onItemSelect={handleDisplayNameSelect}
-          // selectedItem={values.display_name}
-          popoverProps={{ minimal: true }}
-        />
-      </FormGroup>
+      <Field name={'display_name'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            helperText={<ErrorMessage name={'display_name'} />}
+            intent={inputIntent({ error, touched })}
+            label={
+              <>
+                <T id={'display_name'} />
+                <FieldRequiredHint />
+                <Hint />
+              </>
+            }
+            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+            inline={true}
+          >
+            <DisplayNameList
+              firstName={form.values.first_name}
+              lastName={form.values.last_name}
+              company={form.values.company_name}
+              salutation={form.values.salutation}
+              onItemSelect={(displayName) => {
+                form.setFieldValue('display_name', displayName.label);
+              }}
+              selectedItem={value}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
     </div>
   );
 }
diff --git a/client/src/containers/Customers/CustomerNotePanel.js b/client/src/containers/Customers/CustomerNotePanel.js
index 32cd1f8e7..a258d5a08 100644
--- a/client/src/containers/Customers/CustomerNotePanel.js
+++ b/client/src/containers/Customers/CustomerNotePanel.js
@@ -1,27 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, Intent, TextArea, Classes } from '@blueprintjs/core';
-import { Row, Col } from 'components';
+import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
-import ErrorMessage from 'components/ErrorMessage';
+import { inputIntent } from 'utils';
 
 export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
   return (
     <div className={'tab-panel--note'}>
-      <FormGroup
-        label={<T id={'note'} />}
-        className={classNames('form-group--note', Classes.FILL)}
-        intent={errors.note && touched.note && Intent.DANGER}
-        helperText={
-          <ErrorMessage name="payment_date" {...{ errors, touched }} />
-        }
-      >
-        <TextArea
-          intent={errors.note && touched.note && Intent.DANGER}
-          {...getFieldProps('note')}
-        />
-      </FormGroup>
+      <FastField name={'note'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'note'} />}
+            className={classNames('form-group--note', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_date" />}
+          >
+            <TextArea {...field} />
+          </FormGroup>
+        )}
+      </FastField>
     </div>
   );
 }
- 
\ No newline at end of file
diff --git a/client/src/containers/Customers/CustomerTypeRadioField.js b/client/src/containers/Customers/CustomerTypeRadioField.js
index 9e0fb796b..39faef15c 100644
--- a/client/src/containers/Customers/CustomerTypeRadioField.js
+++ b/client/src/containers/Customers/CustomerTypeRadioField.js
@@ -2,8 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FastField } from 'formik';
 
-import { handleStringChange } from 'utils';
+import { handleStringChange, saveInvoke } from 'utils';
 
 /**
  * Customer type radio field.
@@ -13,20 +14,29 @@ export default function RadioCustomer(props) {
   const { formatMessage } = useIntl();
 
   return (
-    <FormGroup
-      inline={true}
-      label={<T id={'customer_type'} />}
-      className={classNames('form-group--customer_type')}>
-      <RadioGroup  
-        inline={true}
-        onChange={handleStringChange((value) => {
-          onChange && onChange(value);
-        })}
-        {...rest}
-      >
-        <Radio label={formatMessage({ id: 'business' })} value="business" />
-        <Radio label={formatMessage({ id: 'individual' })} value="individual" />
-      </RadioGroup>
-    </FormGroup>
+    <FastField name={'customer_type'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          inline={true}
+          label={<T id={'customer_type'} />}
+          className={classNames('form-group--customer_type')}
+        >
+          <RadioGroup
+            inline={true}
+            onChange={handleStringChange((value) => {
+              saveInvoke(onChange, value);
+              form.setFieldValue('customer_type', value);
+            })}
+            selectedValue={value}
+          >
+            <Radio label={formatMessage({ id: 'business' })} value="business" />
+            <Radio
+              label={formatMessage({ id: 'individual' })}
+              value="individual"
+            />
+          </RadioGroup>
+        </FormGroup>
+      )}
+    </FastField>
   );
 }
diff --git a/client/src/containers/Customers/CustomersTabs.js b/client/src/containers/Customers/CustomersTabs.js
index 02a76273b..15a6331bf 100644
--- a/client/src/containers/Customers/CustomersTabs.js
+++ b/client/src/containers/Customers/CustomersTabs.js
@@ -15,8 +15,7 @@ export default function CustomersTabs({
   customerId,
 }) {
   const { formatMessage } = useIntl();
-  const [customer] = useState(customerId);
-  
+ 
   return (
     <div>
       <Tabs
@@ -28,39 +27,17 @@ export default function CustomersTabs({
         <Tab
           id={'financial'}
           title={formatMessage({ id: 'financial_details' })}
-          panel={
-            <CustomerFinancialPanel
-              values={values}
-              errors={errors}
-              setFieldValue={setFieldValue}
-              touched={touched}
-              customerId={customer}
-            />
-          }
+          panel={<CustomerFinancialPanel />}
         />
         <Tab
           id={'address'}
           title={formatMessage({ id: 'address' })}
-          panel={
-            <CustomerAddressTabs
-              setFieldValue={setFieldValue}
-              getFieldProps={getFieldProps}
-              errors={errors}
-              values={values}
-              touched={touched}
-            />
-          }
+          panel={<CustomerAddressTabs />}
         />
         <Tab
           id="notes"
           title={formatMessage({ id: 'notes' })}
-          panel={
-            <CustomerNotePanel
-              errors={errors}
-              touched={touched}
-              getFieldProps={getFieldProps}
-            />
-          }
+          panel={<CustomerNotePanel />}
         />
         <Tab
           id={'attachement'}
diff --git a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js
new file mode 100644
index 000000000..a95c0ae29
--- /dev/null
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js
@@ -0,0 +1,216 @@
+import React, { useCallback } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { ErrorMessage, Form, FastField } from 'formik';
+import {
+  ListSelect,
+  AccountsSelectList,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
+import { inputIntent } from 'utils';
+
+export default function ItemCategoryForm({
+  itemCategoryId,
+  accountsList,
+  categoriesList,
+  isSubmitting,
+}) {
+  // Filters Item Categories list.
+  const filterItemCategories = useCallback(
+    (query, category, _index, exactMatch) => {
+      const normalizedTitle = category.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
+
+  const parentCategoryItem = useCallback(
+    (category, { handleClick, modifiers, query }) => {
+      return (
+        <MenuItem
+          text={category.name}
+          key={category.id}
+          onClick={handleClick}
+        />
+      );
+    },
+    [],
+  );
+
+  return (
+    <Form>
+      <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} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- Parent Category ----------- */}
+        <FastField name={'parent_account_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'parent_category'} />}
+              labelInfo={Hint}
+              className={classNames(
+                'form-group--select-list',
+                'form-group--parent-category',
+                Classes.FILL,
+              )}
+              inline={true}
+              helperText={<ErrorMessage name="parent_category_id" />}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={categoriesList}
+                noResults={<MenuItem disabled={true} text="No results." />}
+                itemRenderer={parentCategoryItem}
+                itemPredicate={filterItemCategories}
+                popoverProps={{ minimal: true }}
+                onItemSelect={(parentCategory) => {
+                  form.setFieldValue('parent_category_id', parentCategory.id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                defaultText={<T id={'select_parent_category'} />}
+                labelProp={'name'}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- 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} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- Cost account ----------- */}
+        <FastField name={'cost_account_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'cost_account'} />}
+              inline={true}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="cost_account_id" />}
+              className={classNames(
+                'form-group--cost-account',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+            >
+              <AccountsSelectList
+                accounts={accountsList}
+                onAccountSelected={(account) => {
+                  form.setFieldValue(account.id);
+                }}
+                defaultSelectText={<T id={'select_account'} />}
+                selectedAccountId={value}
+                filterByTypes={['cost_of_goods_sold']}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- Sell account ----------- */}
+        <FastField name={'sell_account_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'sell_account'} />}
+              inline={true}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="sell_account_id" />}
+              className={classNames(
+                'form-group--sell-account',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+            >
+              <AccountsSelectList
+                accounts={accountsList}
+                onAccountSelected={(account) => {
+                  form.setFieldValue('sell_account_id', account.id);
+                }}
+                defaultSelectText={<T id={'select_account'} />}
+                selectedAccountId={value}
+                filterByTypes={['income']}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- inventory account ----------- */}
+        <FastField name={'inventory_account_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'inventory_account'} />}
+              inline={true}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="inventory_account_id" />}
+              className={classNames(
+                'form-group--sell-account',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+            >
+              <AccountsSelectList
+                accounts={accountsList}
+                onAccountSelected={(account) => {
+                  form.setFieldValue('inventory_account_id', account.id);
+                }}
+                defaultSelectText={<T id={'select_account'} />}
+                selectedAccountId={value}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button>
+            <T id={'close'} />
+          </Button>
+          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+            {itemCategoryId ? <T id={'edit'} /> : <T id={'submit'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
diff --git a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js
index 201c62820..15d38be8e 100644
--- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js
@@ -1,27 +1,10 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import {
-  Button,
-  Classes,
-  FormGroup,
-  InputGroup,
-  Intent,
-  TextArea,
-  MenuItem,
-} from '@blueprintjs/core';
+import React, { useMemo } from 'react';
+import { Intent } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
 import { useQuery, queryCache } from 'react-query';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import classNames from 'classnames';
-import {
-  ListSelect,
-  AccountsSelectList,
-  FieldRequiredHint,
-  Hint,
-  AppToaster,
-  ErrorMessage,
-  DialogContent,
-} from 'components';
+import { Formik } from 'formik';
+import { AppToaster, DialogContent } from 'components';
 
 import withItemCategories from 'containers/Items/withItemCategories';
 import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
@@ -32,6 +15,7 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose, transformToForm } from 'utils';
+import ItemCategoryForm from './ItemCategoryForm';
 
 const defaultInitialValues = {
   name: '',
@@ -75,7 +59,6 @@ function ItemCategoryFormDialogContent({
   const isNewMode = !itemCategoryId;
 
   const { formatMessage } = useIntl();
-  const [selectedParentCategory, setParentCategory] = useState(null);
 
   // Fetches categories list.
   const fetchCategoriesList = useQuery(['items-categories-list'], () =>
@@ -138,237 +121,24 @@ function ItemCategoryFormDialogContent({
     }
   };
 
-  // Formik
-  const {
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    setFieldValue,
-    handleSubmit,
-    getFieldProps,
-  } = useFormik({
-    enableReinitialize: true,
-    validationSchema,
-    initialValues,
-    onSubmit: handleFormSubmit,
-  });
-
-  // Filters Item Categories list.
-  const filterItemCategories = useCallback(
-    (query, category, _index, exactMatch) => {
-      const normalizedTitle = category.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return normalizedTitle.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
-
-  const parentCategoryItem = useCallback(
-    (category, { handleClick, modifiers, query }) => {
-      return (
-        <MenuItem
-          text={category.name}
-          key={category.id}
-          onClick={handleClick}
-        />
-      );
-    },
-    [],
-  );
-
-  // Handle the dialog closing.
-  const handleClose = useCallback(() => {
-    closeDialog(dialogName);
-  }, [dialogName, closeDialog]);
-
-  const onChangeParentCategory = useCallback(
-    (parentCategory) => {
-      setParentCategory(parentCategory);
-      setFieldValue('parent_category_id', parentCategory.id);
-    },
-    [setFieldValue],
-  );
-
-  const onItemAccountSelect = useCallback(
-    (filedName) => {
-      return (account) => {
-        setFieldValue(filedName, account.id);
-      };
-    },
-    [setFieldValue],
-  );
-
   return (
     <DialogContent
       isLoading={fetchCategoriesList.isFetching || fetchAccountsList.isFetching}
     >
-      <form onSubmit={handleSubmit}>
-        <div className={Classes.DIALOG_BODY}>
-          {/* ----------- Category name ----------- */}
-          <FormGroup
-            label={<T id={'category_name'} />}
-            labelInfo={FieldRequiredHint}
-            className={'form-group--category-name'}
-            intent={errors.name && touched.name && Intent.DANGER}
-            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
-            inline={true}
-          >
-            <InputGroup
-              medium={true}
-              intent={errors.name && touched.name && Intent.DANGER}
-              {...getFieldProps('name')}
-            />
-          </FormGroup>
-          {/* ----------- Parent Category ----------- */}
-          <FormGroup
-            label={<T id={'parent_category'} />}
-            labelInfo={Hint}
-            className={classNames(
-              'form-group--select-list',
-              'form-group--parent-category',
-              Classes.FILL,
-            )}
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="parent_category_id"
-                {...{ errors, touched }}
-              />
-            }
-            intent={
-              errors.parent_category_id &&
-              touched.parent_category_id &&
-              Intent.DANGER
-            }
-          >
-            <ListSelect
-              items={categoriesList}
-              noResults={<MenuItem disabled={true} text="No results." />}
-              itemRenderer={parentCategoryItem}
-              itemPredicate={filterItemCategories}
-              popoverProps={{ minimal: true }}
-              onItemSelect={onChangeParentCategory}
-              selectedItem={values.parent_category_id}
-              selectedItemProp={'id'}
-              defaultText={<T id={'select_parent_category'} />}
-              labelProp={'name'}
-            />
-          </FormGroup>
-          {/* ----------- Description ----------- */}
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={errors.description && touched.description && Intent.DANGER}
-            helperText={
-              <ErrorMessage name="description" {...{ errors, touched }} />
-            }
-            inline={true}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              {...getFieldProps('description')}
-            />
-          </FormGroup>
-          {/* ----------- Cost account ----------- */}
-          <FormGroup
-            label={<T id={'cost_account'} />}
-            inline={true}
-            intent={
-              errors.cost_account_id && touched.cost_account_id && Intent.DANGER
-            }
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name="cost_account_id" />
-            }
-            className={classNames(
-              'form-group--cost-account',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-          >
-            <AccountsSelectList
-              accounts={accountsList}
-              onAccountSelected={onItemAccountSelect('cost_account_id')}
-              defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.cost_account_id}
-              filterByTypes={['cost_of_goods_sold']}
-            />
-          </FormGroup>
-          {/* ----------- Sell account ----------- */}
-          <FormGroup
-            label={<T id={'sell_account'} />}
-            inline={true}
-            intent={
-              errors.sell_account_id && touched.sell_account_id && Intent.DANGER
-            }
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name="sell_account_id" />
-            }
-            className={classNames(
-              'form-group--sell-account',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-          >
-            <AccountsSelectList
-              accounts={accountsList}
-              onAccountSelected={onItemAccountSelect('sell_account_id')}
-              defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.sell_account_id}
-              filterByTypes={['income']}
-            />
-          </FormGroup>
-          {/* ----------- inventory account ----------- */}
-          <FormGroup
-            label={<T id={'inventory_account'} />}
-            inline={true}
-            intent={
-              errors.inventory_account_id &&
-              touched.inventory_account_id &&
-              Intent.DANGER
-            }
-            helperText={
-              <ErrorMessage
-                {...{ errors, touched }}
-                name="inventory_account_id"
-              />
-            }
-            className={classNames(
-              'form-group--sell-account',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-          >
-            <AccountsSelectList
-              accounts={accountsList}
-              onAccountSelected={onItemAccountSelect('inventory_account_id')}
-              defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.inventory_account_id}
-            />
-          </FormGroup>
-        </div>
-
-        <div className={Classes.DIALOG_FOOTER}>
-          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>
-              <T id={'close'} />
-            </Button>
-            <Button
-              intent={Intent.PRIMARY}
-              type="submit"
-              disabled={isSubmitting}
-            >
-              {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
-            </Button>
-          </div>
-        </div>
-      </form>
+      <Formik
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {({ isSubmitting }) => (
+          <ItemCategoryForm
+            itemCategoryId={itemCategoryId}
+            accountsList={accountsList}
+            categoriesList={categoriesList}
+            isSubmitting={isSubmitting}
+          />
+        )}
+      </Formik>
     </DialogContent>
   );
 }
diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js
index 09341f0cc..670a666fe 100644
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -1,10 +1,9 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
-import { useFormik, Formik, Form } from 'formik';
+import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { pick, pickBy } from 'lodash';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
diff --git a/client/src/containers/Items/ItemFormBody.js b/client/src/containers/Items/ItemFormBody.js
index 12b92040c..27f23726c 100644
--- a/client/src/containers/Items/ItemFormBody.js
+++ b/client/src/containers/Items/ItemFormBody.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import {
   FormGroup,
-  Intent,
   Classes,
   Checkbox,
 } from '@blueprintjs/core';
diff --git a/client/src/containers/Items/ItemFormFloatingActions.js b/client/src/containers/Items/ItemFormFloatingActions.js
index 7e0a7eff0..ab32bfa99 100644
--- a/client/src/containers/Items/ItemFormFloatingActions.js
+++ b/client/src/containers/Items/ItemFormFloatingActions.js
@@ -20,7 +20,7 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
       </Button>
 
       <Button className={'ml1'} disabled={isSubmitting}>
-        <T id={'save_as_draft'} />
+        <T id={'save_new'} />
       </Button>
 
       <Button className={'ml1'} onClick={handleCancelBtnClick}>
@@ -42,10 +42,4 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
       </FastField>
     </div>
   );
-}
-
-// function areEqual(prevProps, nextProps) {
-//   return prevProps.isSubmitting === nextProps.isSubmitting;
-// }
-
-// export default memo(ItemFormFloatingActions, areEqual);
+}
\ No newline at end of file
diff --git a/client/src/containers/Items/ItemFormInventorySection.js b/client/src/containers/Items/ItemFormInventorySection.js
index af246f10d..42fa52166 100644
--- a/client/src/containers/Items/ItemFormInventorySection.js
+++ b/client/src/containers/Items/ItemFormInventorySection.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Field, FastField, ErrorMessage } from 'formik';
-import { FormGroup, Intent, InputGroup, Position } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { AccountsSelectList, Col, Row, Hint } from 'components';
 import { CLASSES } from 'common/classes';
diff --git a/client/src/containers/Items/ItemFormPrimarySection.js b/client/src/containers/Items/ItemFormPrimarySection.js
index e63ec625d..9411779f5 100644
--- a/client/src/containers/Items/ItemFormPrimarySection.js
+++ b/client/src/containers/Items/ItemFormPrimarySection.js
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import {
   FormGroup,
-  Intent,
   InputGroup,
   RadioGroup,
   Classes,
@@ -104,10 +103,7 @@ function ItemFormPrimarySection({
                 helperText={<ErrorMessage name={'name'} />}
                 inline={true}
               >
-                <InputGroup
-                  medium={true}
-                  {...field}
-                />
+                <InputGroup medium={true} {...field} />
               </FormGroup>
             )}
           </FastField>
@@ -117,16 +113,12 @@ function ItemFormPrimarySection({
             {({ field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'item_code'} />}
-                labelInfo={<Hint />}
-                className={'  -group--item-sku'}
+                className={'form-group--item_code'}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
-                <InputGroup
-                  medium={true}
-                  {...field}
-                />
+                <InputGroup medium={true} {...field} />
               </FormGroup>
             )}
           </FastField>