feat: optimize customer form performance.

feat: optimize item category form performance.

client/src/containers/Customers/Customer.js

@@ -42,7 +42,7 @@ function Customer({
 
   const handleFormSubmit = useCallback(
     (payload) => {
-      payload.redirect && history.push('/customers');
+      
     },
     [history],
   );

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 = ({}) => {
-
-const CustomerBillingAddress = ({
-  errors,
-  touched,
-  setFieldValue,
-  getFieldProps,
-}) => {
   return (
     <div className={'tab-panel--address'}>
       <Row>
@@ -19,172 +14,105 @@ const CustomerBillingAddress = ({
             <T id={'billing_address'} />
           </h4>
           {/*------------ Billing Address country -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_country'}>
-            className={'form-group--journal-number'}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            intent={
+              <FormGroup
-              errors.billing_address_country &&
+                className={'form-group--journal-number'}
-              touched.billing_address_country &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_country" />}
-            inline={true}
+                label={<T id={'country'} />}
-            helperText={
+              >
-              <ErrorMessage
+                <InputGroup {...field} />
-                name="billing_address_country"
+              </FormGroup>
-                {...{ errors, touched }}
+            )}
-              />
+          </FastField>
-            }
+
-            label={<T id={'country'} />}
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_country &&
-                touched.billing_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_country')}
-            />
-          </FormGroup>
           {/*------------ Billing Address 1  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_1'}>
-            label={<T id={'address_line_1'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--address_line_1'}
+              <FormGroup
-            intent={
+                label={<T id={'address_line_1'} />}
-              errors.billing_address_1 &&
+                className={'form-group--address_line_1'}
-              touched.billing_address_1 &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_1" />}
-            inline={true}
+              >
-            helperText={
+                <TextArea {...field} />
-              <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
+              </FormGroup>
-            }
+            )}
-          >
+          </FastField>
-            <TextArea
+
-              intent={
-                errors.billing_address_1 &&
-                touched.billing_address_1 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_1')}
-            />
-          </FormGroup>
           {/*------------ Billing Address 2  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_2'}>
-            label={<T id={'address_line_2'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'address_line_2'} />}
-              errors.billing_address_2 &&
+                className={'form-group--journal-number'}
-              touched.billing_address_2 &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_2" />}
-            inline={true}
+              >
-            helperText={
+                <TextArea {...field} />
-              <ErrorMessage name="billing_address_2" {...{ errors, touched }} />
+              </FormGroup>
-            }
+            )}
-          >
+          </FastField>
-            <TextArea
-              intent={
-                errors.billing_address_2 &&
-                touched.billing_address_2 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_2')}
-            />
-          </FormGroup>
           {/*------------ Billing Address city  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_city'}>
-            label={<T id={'city_town'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'city_town'} />}
-              errors.billing_address_city &&
+                className={'form-group--journal-number'}
-              touched.billing_address_city &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_city" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="billing_address_city"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_city &&
-                touched.billing_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_city')}
-            />
-          </FormGroup>
           {/*------------ Billing Address state  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_state'}>
-            label={<T id={'state'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'state'} />}
-              errors.billing_address_state &&
+                className={'form-group--journal-number'}
-              touched.billing_address_state &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_state" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="billing_address_state"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_state &&
-                touched.billing_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_state')}
-            />
-          </FormGroup>
           {/*------------ Billing Address postcode  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_postcode'}>
-            label={<T id={'zip_code'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            intent={
+              <FormGroup
-              errors.billing_address_postcode &&
+                label={<T id={'zip_code'} />}
-              touched.billing_address_postcode &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="billing_address_postcode" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="billing_address_postcode"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_postcode &&
-                touched.billing_address_postcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_postcode')}
-            />
-          </FormGroup>
           {/*------------ Billing Address phone  -----------*/}
-          <FormGroup
+          <FastField name={'billing_address_phone'}>
-            label={<T id={'phone'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            intent={
+              <FormGroup
-              errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
+                label={<T id={'phone'} />}
-            }
+                intent={inputIntent({ error, touched })}
-            inline={true}
+                inline={true}
-            helperText={
+                helperText={<ErrorMessage name="billing_address_phone" />}
-              <ErrorMessage name="billing_address_phone" {...{ errors, touched }} />
+              >
-            }
+                <InputGroup {...field} />
-          >
+              </FormGroup>
-            <InputGroup
+            )}
-              intent={
+          </FastField>
-                errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
-              }
-              {...getFieldProps('billing_address_phone')}
-            />
-          </FormGroup>
         </Col>
 
         <Col xs={6}>
@@ -192,172 +120,107 @@ const CustomerBillingAddress = ({
             <T id={'shipping_address'} />
           </h4>
           {/*------------ Shipping Address country -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_country'}>
-            label={<T id={'country'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'country'} />}
-              errors.shipping_address_country &&
+                className={'form-group--journal-number'}
-              touched.shipping_address_country &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_country" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="shipping_address_country"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_country &&
-                touched.shipping_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_country')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address 1  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_1'}>
-            label={<T id={'address_line_1'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'address_line_1'} />}
-              errors.shipping_address_1 &&
+                className={'form-group--journal-number'}
-              touched.shipping_address_1 &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_1" />}
-            inline={true}
+              >
-            helperText={
+                <TextArea {...field} />
-              <ErrorMessage name="shipping_address_1" {...{ errors, touched }} />
+              </FormGroup>
-            }
+            )}
-          >
+          </FastField>
-            <TextArea
+
-              intent={
-                errors.shipping_address_1 &&
-                touched.shipping_address_1 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_1')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address 2  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_2'}>
-            label={<T id={'address_line_2'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'address_line_2'} />}
-              errors.shipping_address_2 &&
+                className={'form-group--journal-number'}
-              touched.shipping_address_2 &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_2" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage name="shipping_address_2" {...{ errors, touched }} />
+              </FormGroup>
-            }
+            )}
-          >
+          </FastField>
-            <TextArea
+
-              intent={
-                errors.shipping_address_2 &&
-                touched.shipping_address_2 &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_2')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address city  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_city'}>
-            label={<T id={'city_town'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'city_town'} />}
-              errors.shipping_address_city &&
+                className={'form-group--journal-number'}
-              touched.shipping_address_city &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_city" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="shipping_address_city"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_city &&
-                touched.shipping_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_city')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address state  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_state'}>
-            label={<T id={'state'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            className={'form-group--journal-number'}
+              <FormGroup
-            intent={
+                label={<T id={'state'} />}
-              errors.shipping_address_state &&
+                className={'form-group--journal-number'}
-              touched.shipping_address_state &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_state" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="shipping_address_state"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_state &&
-                touched.shipping_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_state')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address postcode  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_postcode'}>
-            label={<T id={'zip_code'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            intent={
+              <FormGroup
-              errors.shipping_address_postcode &&
+                label={<T id={'zip_code'} />}
-              touched.shipping_address_postcode &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="shipping_address_postcode" />}
-            inline={true}
+              >
-            helperText={
+                <InputGroup {...field} />
-              <ErrorMessage
+              </FormGroup>
-                name="shipping_address_postcode"
+            )}
-                {...{ errors, touched }}
+          </FastField>
-              />
+
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_postcode &&
-                touched.shipping_address_postcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_postcode')}
-            />
-          </FormGroup>
           {/*------------ Shipping Address phone  -----------*/}
-          <FormGroup
+          <FastField name={'shipping_address_phone'}>
-            label={<T id={'phone'} />}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-            intent={
+              <FormGroup
-              errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
+                label={<T id={'phone'} />}
-            }
+                intent={inputIntent({ error, touched })}
-            inline={true}
+                inline={true}
-            helperText={
+                helperText={<ErrorMessage name="shipping_address_phone" />}
-              <ErrorMessage name="shipping_address_phone" {...{ errors, touched }} />
+              >
-            }
+                <InputGroup {...field} />
-          >
+              </FormGroup>
-            <InputGroup
+            )}
-              intent={
+          </FastField>
-                errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_phone')}
-            />
-          </FormGroup>
         </Col>
       </Row>
     </div>

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 {
+import { FastField, ErrorMessage } from 'formik';
-  ErrorMessage,
+import { MoneyInputGroup, CurrencySelectList, Row, Col } from 'components';
-  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
+          <FastField name={'opening_balance_at'}>
-            label={<T id={'opening_balance_at'} />}
+            {({ form, field: { value }, meta: { error, touched } }) => (
-            className={classNames('form-group--select-list', Classes.FILL)}
+              <FormGroup
-            intent={
+                label={<T id={'opening_balance_at'} />}
-              errors.opening_balance_at &&
+                className={classNames('form-group--select-list', Classes.FILL)}
-              touched.opening_balance_at &&
+                intent={inputIntent({ error, touched })}
-              Intent.DANGER
+                inline={true}
-            }
+                helperText={<ErrorMessage name="opening_balance_at" />}
-            inline={true}
+              >
-            helperText={
+                <DateInput
-              <ErrorMessage
+                  {...momentFormatter('YYYY/MM/DD')}
-                name="opening_balance_at"
+                  value={tansformDateValue(value)}
-                {...{ errors, touched }}
+                  // onChange={}
-              />
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-            }
+                  disabled={customerId}
-          >
+                />
-            <DateInput
+              </FormGroup>
-              {...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,
             )}
-            inline={true}
+          </FastField>
-          >
+
-            {/* <CurrenciesSelectList /> */}
+          {/*------------ Opening balance  -----------*/}
-            <CurrencySelectList
+          <FastField name={'opening_balance'}>
-              currenciesList={currenciesList}
+            {({ field, field: { value }, meta: { error, touched } }) => (
-              selectedCurrencyCode={values.currency_code}
+              <FormGroup
-              onCurrencySelected={onItemsSelect('currency_code')}
+                label={<T id={'opening_balance'} />}
-              disabled={customerId}
+                className={classNames(
-            />
+                  'form-group--opening-balance',
-          </FormGroup>
+                  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>

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) => {
+    (payload, event) => {
-      onCancelForm && onCancelForm(payload);
+     
     },
-    [onCancelForm],
+    [],
   );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
-      <form onSubmit={handleSubmit}>
+      <Formik
-        <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
+        validationSchema={validationSchema}
-          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+        initialValues={initialValues}
-            <CustomerFormPrimarySection
+        onSubmit={handleFormSubmit}
-              setFieldValue={setFieldValue}
+      >
-              getFieldProps={getFieldProps}
+        {({ isSubmitting }) => (
-              errors={errors}
+          <Form>
-              values={values}
+            <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
-              touched={touched}
+              <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>
+          </Form>
-
+        )}
-          <div className={'page-form__after-priamry-section'}>
+      </Formik>
-            <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}
-      />
     </div>
   );
 }

client/src/containers/Customers/CustomerFormAfterPrimarySection.js

@@ -1,35 +1,26 @@
 import React from 'react';
-import {
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-  FormGroup,
+import { FastField, ErrorMessage } from 'formik';
-  Intent,
-  InputGroup,
-  ControlGroup,
-} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { ErrorMessage } from 'components';
+import { inputIntent } from 'utils';
 
-export default function CustomerFormAfterPrimarySection({
+export default function CustomerFormAfterPrimarySection({}) {
-  setFieldValue,
-  getFieldProps,
-  errors,
-  values,
-  touched,
-}) {
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
-      <FormGroup
+      <FastField name={'email'}>
-        intent={errors.email && touched.email && Intent.DANGER}
+        {({ field, meta: { error, touched } }) => (
-        helperText={<ErrorMessage name={'email'} {...{ errors, touched }} />}
+          <FormGroup
-        className={'form-group--email'}
+            intent={inputIntent({ error, touched })}
-        label={<T id={'customer_email'} />}
+            helperText={<ErrorMessage name={'email'} />}
-        inline={true}
+            className={'form-group--email'}
-      >
+            label={<T id={'customer_email'} />}
-        <InputGroup
+            inline={true}
-          intent={errors.email && touched.email && Intent.DANGER}
+          >
-          {...getFieldProps('email')}
+            <InputGroup {...field} />
-        />
+          </FormGroup>
-      </FormGroup>
+        )}
+      </FastField>
 
       {/*------------ Phone number -----------*/}
       <FormGroup
@@ -38,33 +29,41 @@ export default function CustomerFormAfterPrimarySection({
         inline={true}
       >
         <ControlGroup>
-          <InputGroup
+          <FastField name={'work_phone'}>
-            intent={errors.work_phone && touched.work_phone && Intent.DANGER}
+            {({ field, meta: { error, touched } }) => (
-            {...getFieldProps('work_phone')}
+              <InputGroup
-            placeholder={'Work'}
+                intent={inputIntent({ error, touched })}
-          />
+                placeholder={'Work'}
-
+                {...field}
-          <InputGroup
+              />
-            intent={errors.personal_phone && touched.personal_phone && Intent.DANGER}
+            )}
-            {...getFieldProps('personal_phone')}
+          </FastField>
-            placeholder={'Mobile'}
+          <FastField name={'personal_phone'}>
-          />
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={'Mobile'}
+                {...field}
+              />
+            )}
+          </FastField>
         </ControlGroup>
       </FormGroup>
 
       {/*------------ Customer website -----------*/}
-      <FormGroup
+      <FastField name={'website'}>
-        intent={errors.website && touched.website && Intent.DANGER}
+        {({ field, meta: { error, touched } }) => (
-        helperText={<ErrorMessage name={'website'} {...{ errors, touched }} />}
+          <FormGroup
-        className={'form-group--website'}
+            intent={inputIntent({ error, touched })}
-        label={<T id={'website'} />}
+            helperText={<ErrorMessage name={'website'} />}
-        inline={true}
+            className={'form-group--website'}
-      >
+            label={<T id={'website'} />}
-        <InputGroup
+            inline={true}
-          intent={errors.website && touched.website && Intent.DANGER}
+          >
-          {...getFieldProps('website')}
+            <InputGroup {...field} />
-        />
+          </FormGroup>
-      </FormGroup>
+        )}
+      </FastField>
     </div>
   );
 }

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
+      <CustomerTypeRadioField />
-        selectedValue={values.customer_type}
-        onChange={handleCustomerTypeCahange}
-      />
 
       {/**----------- Contact name -----------*/}
       <FormGroup
@@ -61,74 +30,93 @@ export default function CustomerFormPrimarySection({
         inline={true}
       >
         <ControlGroup>
-          <SalutationList
+          <FastField name={'salutation'}>
-            onItemSelect={handleSalutationSelect}
+            {({ form, field: { value }, meta: { error, touched } }) => (
-            selectedItem={values.salutation}
+              <SalutationList
-            popoverProps={{ minimal: true }}
+                onItemSelect={(salutation) => {
-            className={classNames(
+                  form.setFieldValue('salutation', salutation.label);
-              CLASSES.FORM_GROUP_LIST_SELECT,
+                }}
-              CLASSES.FILL,
+                selectedItem={value}
-              'input-group--salutation-list',
+                popoverProps={{ minimal: true }}
-              'select-list--fill-button',
+                className={classNames(
+                  CLASSES.FORM_GROUP_LIST_SELECT,
+                  CLASSES.FILL,
+                  'input-group--salutation-list',
+                  'select-list--fill-button',
+                )}
+              />
             )}
-          />
+          </FastField>
-          <InputGroup
+
-            placeholder={'First Name'}
+          <FastField name={'first_name'}>
-            intent={errors.first_name && touched.first_name && Intent.DANGER}
+            {({ field, meta: { error, touched } }) => (
-            {...getFieldProps('first_name')}
+              <InputGroup
-            className={classNames('input-group--first-name')}
+                placeholder={'First Name'}
-          />
+                intent={inputIntent({ error, touched })}
-          <InputGroup
+                className={classNames('input-group--first-name')}
-            placeholder={'Last Name'}
+                {...field}
-            intent={errors.last_name && touched.last_name && Intent.DANGER}
+              />
-            {...getFieldProps('last_name')}
+            )}
-            className={classNames('input-group--last-name')}
+          </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
+      <FastField name={'company_name'}>
-        className={classNames('form-group--company_name')}
+        {({ field, meta: { error, touched } }) => (
-        label={<T id={'company_name'} />}
+          <FormGroup
-        intent={errors.company_name && touched.company_name && Intent.DANGER}
+            className={classNames('form-group--company_name')}
-        helperText={
+            label={<T id={'company_name'} />}
-          <ErrorMessage {...{ errors, touched }} name={'company_name'} />
+            intent={inputIntent({ error, touched })}
-        }
+            helperText={<ErrorMessage name={'company_name'} />}
-        inline={true}
+            inline={true}
-      >
+          >
-        <InputGroup
+            <InputGroup {...field} />
-          intent={errors.company_name && touched.company_name && Intent.DANGER}
+          </FormGroup>
-          {...getFieldProps('company_name')}
+        )}
-        />
+      </FastField>
-      </FormGroup>
 
       {/*----------- Display Name -----------*/}
-      <FormGroup
+      <Field name={'display_name'}>
-        intent={errors.display_name && touched.display_name && Intent.DANGER}
+        {({ form, field: { value }, meta: { error, touched } }) => (
-        helperText={
+          <FormGroup
-          <ErrorMessage {...{ errors, touched }} name={'display_name'} />
+            helperText={<ErrorMessage name={'display_name'} />}
-        }
+            intent={inputIntent({ error, touched })}
-        label={
+            label={
-          <>
+              <>
-            <T id={'display_name'} />
+                <T id={'display_name'} />
-            <FieldRequiredHint />
+                <FieldRequiredHint />
-            <Hint />
+                <Hint />
-          </>
+              </>
-        }
+            }
-        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-        inline={true}
+            inline={true}
-      >
+          >
-        <DisplayNameList
+            <DisplayNameList
-          firstName={values.first_name}
+              firstName={form.values.first_name}
-          lastName={values.last_name}
+              lastName={form.values.last_name}
-          company={values.company_name}
+              company={form.values.company_name}
-          salutation={values.salutation}
+              salutation={form.values.salutation}
-          onItemSelect={handleDisplayNameSelect}
+              onItemSelect={(displayName) => {
-          // selectedItem={values.display_name}
+                form.setFieldValue('display_name', displayName.label);
-          popoverProps={{ minimal: true }}
+              }}
-        />
+              selectedItem={value}
-      </FormGroup>
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
     </div>
   );
 }

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 { FormGroup, TextArea, Classes } from '@blueprintjs/core';
-import { Row, Col } from 'components';
+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
+      <FastField name={'note'}>
-        label={<T id={'note'} />}
+        {({ field, field: { value }, meta: { error, touched } }) => (
-        className={classNames('form-group--note', Classes.FILL)}
+          <FormGroup
-        intent={errors.note && touched.note && Intent.DANGER}
+            label={<T id={'note'} />}
-        helperText={
+            className={classNames('form-group--note', Classes.FILL)}
-          <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            intent={inputIntent({ error, touched })}
-        }
+            helperText={<ErrorMessage name="payment_date" />}
-      >
+          >
-        <TextArea
+            <TextArea {...field} />
-          intent={errors.note && touched.note && Intent.DANGER}
+          </FormGroup>
-          {...getFieldProps('note')}
+        )}
-        />
+      </FastField>
-      </FormGroup>
     </div>
   );
 }
- 

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
+    <FastField name={'customer_type'}>
-      inline={true}
+      {({ form, field: { value }, meta: { error, touched } }) => (
-      label={<T id={'customer_type'} />}
+        <FormGroup
-      className={classNames('form-group--customer_type')}>
+          inline={true}
-      <RadioGroup  
+          label={<T id={'customer_type'} />}
-        inline={true}
+          className={classNames('form-group--customer_type')}
-        onChange={handleStringChange((value) => {
+        >
-          onChange && onChange(value);
+          <RadioGroup
-        })}
+            inline={true}
-        {...rest}
+            onChange={handleStringChange((value) => {
-      >
+              saveInvoke(onChange, value);
-        <Radio label={formatMessage({ id: 'business' })} value="business" />
+              form.setFieldValue('customer_type', value);
-        <Radio label={formatMessage({ id: 'individual' })} value="individual" />
+            })}
-      </RadioGroup>
+            selectedValue={value}
-    </FormGroup>
+          >
+            <Radio label={formatMessage({ id: 'business' })} value="business" />
+            <Radio
+              label={formatMessage({ id: 'individual' })}
+              value="individual"
+            />
+          </RadioGroup>
+        </FormGroup>
+      )}
+    </FastField>
   );
 }

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={
+          panel={<CustomerFinancialPanel />}
-            <CustomerFinancialPanel
-              values={values}
-              errors={errors}
-              setFieldValue={setFieldValue}
-              touched={touched}
-              customerId={customer}
-            />
-          }
         />
         <Tab
           id={'address'}
           title={formatMessage({ id: 'address' })}
-          panel={
+          panel={<CustomerAddressTabs />}
-            <CustomerAddressTabs
-              setFieldValue={setFieldValue}
-              getFieldProps={getFieldProps}
-              errors={errors}
-              values={values}
-              touched={touched}
-            />
-          }
         />
         <Tab
           id="notes"
           title={formatMessage({ id: 'notes' })}
-          panel={
+          panel={<CustomerNotePanel />}
-            <CustomerNotePanel
-              errors={errors}
-              touched={touched}
-              getFieldProps={getFieldProps}
-            />
-          }
         />
         <Tab
           id={'attachement'}

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>
+  );
+}

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js

@@ -1,27 +1,10 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
-import {
+import { Intent } from '@blueprintjs/core';
-  Button,
-  Classes,
-  FormGroup,
-  InputGroup,
-  Intent,
-  TextArea,
-  MenuItem,
-} 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 { Formik } from 'formik';
-import {
+import { AppToaster, DialogContent } from 'components';
-  ListSelect,
-  AccountsSelectList,
-  FieldRequiredHint,
-  Hint,
-  AppToaster,
-  ErrorMessage,
-  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}>
+      <Formik
-        <div className={Classes.DIALOG_BODY}>
+        validationSchema={validationSchema}
-          {/* ----------- Category name ----------- */}
+        initialValues={initialValues}
-          <FormGroup
+        onSubmit={handleFormSubmit}
-            label={<T id={'category_name'} />}
+      >
-            labelInfo={FieldRequiredHint}
+        {({ isSubmitting }) => (
-            className={'form-group--category-name'}
+          <ItemCategoryForm
-            intent={errors.name && touched.name && Intent.DANGER}
+            itemCategoryId={itemCategoryId}
-            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
+            accountsList={accountsList}
-            inline={true}
+            categoriesList={categoriesList}
-          >
+            isSubmitting={isSubmitting}
-            <InputGroup
+          />
-              medium={true}
+        )}
-              intent={errors.name && touched.name && Intent.DANGER}
+      </Formik>
-              {...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>
     </DialogContent>
   );
 }

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';
 

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';

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);

client/src/containers/Items/ItemFormInventorySection.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Field, FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import { FormGroup, Intent, InputGroup, Position } from '@blueprintjs/core';
+import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { AccountsSelectList, Col, Row, Hint } from 'components';
 import { CLASSES } from 'common/classes';

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
+                <InputGroup medium={true} {...field} />
-                  medium={true}
-                  {...field}
-                />
               </FormGroup>
             )}
           </FastField>
@@ -117,16 +113,12 @@ function ItemFormPrimarySection({
             {({ field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'item_code'} />}
-                labelInfo={<Hint />}
+                className={'form-group--item_code'}
-                className={'  -group--item-sku'}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
-                <InputGroup
+                <InputGroup medium={true} {...field} />
-                  medium={true}
-                  {...field}
-                />
               </FormGroup>
             )}
           </FastField>