From 1ff2d924d07bfe482306a13c834fbc2b73a29cf9 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sat, 7 Nov 2020 22:01:10 +0200
Subject: [PATCH] WIP: customer form styling. fix: journal increment number
 settings.

---
 client/src/common/classes.js                  |   6 +-
 client/src/components/CurrenciesSelectList.js |  40 +-
 client/src/components/DisplayNameList.js      |  43 ++
 client/src/components/RequiredHint.js         |   5 +
 client/src/components/SalutationList.js       |  22 +
 client/src/components/index.js                |  11 +-
 .../Accounting/MakeJournalEntriesForm.js      |  31 +-
 .../Accounting/MakeJournalEntriesHeader.js    |  48 +-
 .../Accounting/withManualJournalsActions.js   |   4 -
 .../Customers/CustomerAddressTabs.js          | 493 +++++++++++-------
 .../Customers/CustomerFinancialPanel.js       |  87 ++++
 ...erFooter.js => CustomerFloatingActions.js} |  23 +-
 .../src/containers/Customers/CustomerForm.js  | 243 ++-------
 .../CustomerFormAfterPrimarySection.js        |  70 +++
 .../Customers/CustomerFormPrimarySection.js   | 125 +++++
 .../Customers/CustomerTypeRadioField.js       |  35 +-
 .../src/containers/Customers/CustomersTabs.js |  32 +-
 .../JournalNumberDialogContent.js             |  21 +-
 .../Sales/Estimate/EntriesItemsTable.js       |   1 -
 client/src/lang/en/index.js                   |   9 +-
 .../manualJournals/manualJournals.reducers.js |   4 -
 client/src/style/App.scss                     |   1 -
 client/src/style/objects/form.scss            |   1 +
 client/src/style/pages/customer.scss          | 286 +++++++---
 server/src/models/Account.js                  |   2 +-
 25 files changed, 1037 insertions(+), 606 deletions(-)
 create mode 100644 client/src/components/DisplayNameList.js
 create mode 100644 client/src/components/RequiredHint.js
 create mode 100644 client/src/components/SalutationList.js
 create mode 100644 client/src/containers/Customers/CustomerFinancialPanel.js
 rename client/src/containers/Customers/{CustomerFooter.js => CustomerFloatingActions.js} (66%)
 create mode 100644 client/src/containers/Customers/CustomerFormAfterPrimarySection.js
 create mode 100644 client/src/containers/Customers/CustomerFormPrimarySection.js

diff --git a/client/src/common/classes.js b/client/src/common/classes.js
index ca94a067a..dca1f9ad9 100644
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -10,6 +10,7 @@ const CLASSES = {
   PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
   PAGE_FORM_HEADER_FIELDS: 'page-form__header-fields',
   PAGE_FORM_HEADER_BIG_NUMBERS: 'page-form__big-numbers',
+  PAGE_FORM_TABS: 'page-form__tabs',
   
   PAGE_FORM_FOOTER: 'page-form__footer',
   PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-actions',
@@ -20,6 +21,9 @@ const CLASSES = {
   PAGE_FORM_RECEIPT: 'page-form--receipt',
   PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made',
   PAGE_FORM_PAYMENT_RECEIVE: 'page-form--payment-receive',
+  PAGE_FORM_CUSTOMER: 'page-form--customer',
+
+  FORM_GROUP_LIST_SELECT: 'form-group--select-list',
 
   CLOUD_SPINNER: 'cloud-spinner',
   IS_LOADING: 'is-loading',
@@ -28,4 +32,4 @@ const CLASSES = {
 
 export {
   CLASSES,
-}
\ No newline at end of file
+}
diff --git a/client/src/components/CurrenciesSelectList.js b/client/src/components/CurrenciesSelectList.js
index 2ae5788e5..fd15b44b7 100644
--- a/client/src/components/CurrenciesSelectList.js
+++ b/client/src/components/CurrenciesSelectList.js
@@ -2,18 +2,14 @@
 
 import React, {useCallback} from 'react';
 import {
-  FormGroup,
   MenuItem,
   Button,
 } from '@blueprintjs/core';
 import {
   Select
 } from '@blueprintjs/select';
-import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
 
 export default function CurrenciesSelectList({
-  formGroupProps,
   selectProps,
   onItemSelect,
   className,
@@ -43,30 +39,18 @@ export default function CurrenciesSelectList({
   };
 
   return (
-    <FormGroup
-      label={<T id={'currency'}/>}
-      className={
-        classNames(
-          'form-group--select-list',
-          'form-group--currency',
-          className,
-        )
-      }
-      {...formGroupProps}
+    <Select
+      items={currencies}
+      noResults={<MenuItem disabled={true} text='No results.' />}
+      itemRenderer={currencyItem}
+      itemPredicate={filterCurrenciesPredicator}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onCurrencySelect}
+      {...selectProps}
     >
-      <Select
-        items={currencies}
-        noResults={<MenuItem disabled={true} text='No results.' />}
-        itemRenderer={currencyItem}
-        itemPredicate={filterCurrenciesPredicator}
-        popoverProps={{ minimal: true }}
-        onItemSelect={onCurrencySelect}
-        {...selectProps}
-      >
-        <Button
-          text={'USD US dollars'}
-        />
-      </Select>
-    </FormGroup>
+      <Button
+        text={'USD US dollars'}
+      />
+    </Select>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/DisplayNameList.js b/client/src/components/DisplayNameList.js
new file mode 100644
index 000000000..eb0cb28b3
--- /dev/null
+++ b/client/src/components/DisplayNameList.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import ListSelect from "./ListSelect";
+
+export default function DisplayNameList({
+  salutation,
+  firstName,
+  lastName,
+  company,
+  ...restProps
+}) {
+  const formats = [
+    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    { format: '{1} {2}', values: [firstName, lastName], required: [] },
+    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+    { format: '{1}', values: [company], required: [1] }
+  ];
+
+  const formatOptions = formats
+    .filter((format) => !format.values.some((value, index) => {
+      return !value && format.required.indexOf(index + 1) !== -1;
+    }))
+    .map((formatOption) => {
+      const { format, values } = formatOption;
+      let label = format;
+
+      values.forEach((value, index) => {
+        const replaceWith = (value || '');
+        label = label.replace(`{${index + 1}}`, replaceWith).trim();
+      });
+      return { label: label.replace(/\s+/g, " ") };
+    });
+
+  return (
+    <ListSelect
+      items={formatOptions}
+      selectedItemProp={'label'}
+      labelProp={'label'}
+      defaultText={'Select display name as'}
+      filterable={false}
+      { ...restProps }
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/RequiredHint.js b/client/src/components/RequiredHint.js
new file mode 100644
index 000000000..f63c1d289
--- /dev/null
+++ b/client/src/components/RequiredHint.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function RequiredHint() {
+  return (<span class="required">*</span>);
+}
\ No newline at end of file
diff --git a/client/src/components/SalutationList.js b/client/src/components/SalutationList.js
new file mode 100644
index 000000000..9b7e1d660
--- /dev/null
+++ b/client/src/components/SalutationList.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  ListSelect,
+} from 'components';
+
+export default function SalutationList({
+  ...restProps
+}) {
+  const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
+  const items = saluations.map((saluation) => ({ key: saluation, label: saluation }));
+
+  return (
+    <ListSelect
+      items={items}
+      selectedItemProp={'key'}
+      labelProp={'label'}
+      defaultText={'Salutation'}
+      filterable={false}
+      {...restProps}
+    />
+  );
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 00f0948bb..10850ed2a 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -32,7 +32,9 @@ import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
 import ContactSelecetList from './ContactSelecetList';
 import CurrencySelectList from './CurrencySelectList'
-
+import SalutationList from './SalutationList';
+import DisplayNameList from './DisplayNameList';
+import MoneyInputGroup from './MoneyInputGroup';
 
 const Hint = FieldHint;
 
@@ -70,6 +72,9 @@ export {
   Row,
   CloudLoadingIndicator,
   MoneyExchangeRate,
-  ContactSelecetList ,
-  CurrencySelectList
+  ContactSelecetList,
+  CurrencySelectList,
+  DisplayNameList,
+  SalutationList,
+  MoneyInputGroup,
 };
diff --git a/client/src/containers/Accounting/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournalEntriesForm.js
index 0c2b5d536..64816f3fb 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js
@@ -21,14 +21,13 @@ import withManualJournalDetail from 'containers/Accounting/withManualJournalDeta
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
-import withManualJournals from './withManualJournals';
 
 import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
 import withMediaActions from 'containers/Media/withMediaActions';
 
 import useMedia from 'hooks/useMedia';
-import { compose, repeatValue } from 'utils';
+import { compose, repeatValue, orderingLinesIndexes } from 'utils';
 import withManualJournalsActions from './withManualJournalsActions';
 
 const ERROR = {
@@ -52,7 +51,6 @@ function MakeJournalEntriesForm({
   // #withJournalsActions
   requestMakeJournalEntries,
   requestEditManualJournal,
-  setJournalNumberChanged,
 
   // #withDashboard
   changePageTitle,
@@ -62,9 +60,6 @@ function MakeJournalEntriesForm({
   journalNextNumber,
   journalNumberPrefix,
 
-  // #withManualJournals
-  journalNumberChanged,
-
   // #ownProps
   manualJournalId,
   manualJournal,
@@ -143,12 +138,6 @@ function MakeJournalEntriesForm({
 
   const [payload, setPayload] = useState({});
 
-  const reorderingEntriesIndex = (entries) =>
-    entries.map((entry, index) => ({
-      ...entry,
-      index: index + 1,
-    }));
-
   const defaultEntry = useMemo(
     () => ({
       index: 0,
@@ -188,7 +177,7 @@ function MakeJournalEntriesForm({
           }
         : {
             ...defaultInitialValues,
-            entries: reorderingEntriesIndex(defaultInitialValues.entries),
+            entries: orderingLinesIndexes(defaultInitialValues.entries),
           }),
     }),
     [manualJournal, defaultInitialValues, defaultEntry],
@@ -377,12 +366,9 @@ function MakeJournalEntriesForm({
     },
   });
 
-  useEffect(() => {
-    if (journalNumberChanged) {
-      setFieldValue('journal_number', journalNumber);
-      setJournalNumberChanged(false);
-    }
-  }, [journalNumberChanged, setJournalNumberChanged, journalNumber, setFieldValue]);
+  useEffect(() => {    
+    setFieldValue('journal_number', journalNumber);
+  }, [journalNumber, setFieldValue]);
 
   // Change page subtitle.
   useEffect(() => {
@@ -420,7 +406,7 @@ function MakeJournalEntriesForm({
   const handleClickAddNewRow = useCallback(() => {
     setFieldValue(
       'entries',
-      reorderingEntriesIndex([...values.entries, defaultEntry]),
+      orderingLinesIndexes([...values.entries, defaultEntry]),
     );
   }, [values.entries, defaultEntry, setFieldValue]);
 
@@ -428,7 +414,7 @@ function MakeJournalEntriesForm({
   const handleClickClearLines = useCallback(() => {
     setFieldValue(
       'entries',
-      reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
+      orderingLinesIndexes([...repeatValue(defaultEntry, 4)]),
     );
   }, [defaultEntry, setFieldValue]);
 
@@ -480,9 +466,6 @@ function MakeJournalEntriesForm({
 export default compose(
   withJournalsActions,
   withManualJournalDetail,
-  withManualJournals(({ journalNumberChanged }) => ({
-    journalNumberChanged,
-  })),
   withAccountsActions,
   withDashboardActions,
   withMediaActions,
diff --git a/client/src/containers/Accounting/MakeJournalEntriesHeader.js b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
index cf4dd0e8c..c2d4857a4 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesHeader.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
@@ -4,13 +4,14 @@ import {
   FormGroup,
   Intent,
   Position,
-  Classes,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
 import {
   CurrenciesSelectList,
@@ -19,7 +20,7 @@ import {
   FieldHint,
   FieldRequiredHint,
   Icon,
-  InputPrependButton
+  InputPrependButton,
 } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -75,24 +76,25 @@ function MakeJournalEntriesHeader({
               <ErrorMessage name="journal_number" {...{ errors, touched }} />
             }
             fill={true}
-            
           >
             <InputGroup
               intent={
                 errors.journal_number && touched.journal_number && Intent.DANGER
               }
               fill={true}
-              rightElement={<InputPrependButton
-                buttonProps={{
-                  onClick: handleJournalNumberChange,
-                  icon: (<Icon icon={'settings-18'} />)
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated journal number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />}
+              rightElement={
+                <InputPrependButton
+                  buttonProps={{
+                    onClick: handleJournalNumberChange,
+                    icon: <Icon icon={'settings-18'} />,
+                  }}
+                  tooltip={true}
+                  tooltipProps={{
+                    content: 'Setting your auto-generated journal number',
+                    position: Position.BOTTOM_LEFT,
+                  }}
+                />
+              }
               {...getFieldProps('journal_number')}
               onBlur={handleJournalNumberChanged}
             />
@@ -106,6 +108,7 @@ function MakeJournalEntriesHeader({
             intent={errors.date && touched.date && Intent.DANGER}
             helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
             minimal={true}
+            className={classNames(CLASSES.FILL)}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
@@ -169,7 +172,7 @@ function MakeJournalEntriesHeader({
             className={classNames(
               'form-group--account-type',
               'form-group--select-list',
-              Classes.FILL,
+              CLASSES.FILL,
             )}
           >
             <InputGroup
@@ -183,13 +186,20 @@ function MakeJournalEntriesHeader({
         </Col>
 
         <Col width={230}>
-          <CurrenciesSelectList className={Classes.FILL} />
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--currency',
+              CLASSES.FILL
+            )}
+          >
+            <CurrenciesSelectList />
+          </FormGroup>
         </Col>
       </Row>
     </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(MakeJournalEntriesHeader);
+export default compose(withDialogActions)(MakeJournalEntriesHeader);
diff --git a/client/src/containers/Accounting/withManualJournalsActions.js b/client/src/containers/Accounting/withManualJournalsActions.js
index 0e1600164..6c75d6a54 100644
--- a/client/src/containers/Accounting/withManualJournalsActions.js
+++ b/client/src/containers/Accounting/withManualJournalsActions.js
@@ -24,10 +24,6 @@ const mapActionsToProps = (dispatch) => ({
     type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
     queries,
   }),
-  setJournalNumberChanged: (isChanged) => dispatch({
-    type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
-    payload: { isChanged },
-  }),
 });
 
 export default connect(null, mapActionsToProps);
diff --git a/client/src/containers/Customers/CustomerAddressTabs.js b/client/src/containers/Customers/CustomerAddressTabs.js
index 6aeeacfb1..00bc26e09 100644
--- a/client/src/containers/Customers/CustomerAddressTabs.js
+++ b/client/src/containers/Customers/CustomerAddressTabs.js
@@ -1,245 +1,364 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import * as Yup from 'yup';
-import { useFormik } from 'formik';
-import {
-  FormGroup,
-  MenuItem,
-  Intent,
-  InputGroup,
-  HTMLSelect,
-  Button,
-  Classes,
-} from '@blueprintjs/core';
-
-import { Row, Col } from 'react-grid-system';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import React from 'react';
+import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
+import { Row, Col } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 import ErrorMessage from 'components/ErrorMessage';
 
 const CustomerBillingAddress = ({
-  formik: { errors, touched, setFieldValue, getFieldProps },
+  errors,
+  touched,
+  setFieldValue,
+  getFieldProps,
 }) => {
   return (
-    <div className={'customer-form'}>
-      <Row gutterWidth={16} className={'customer-form__tabs-section'}>
-        <Col width={404}>
-          <h4>
-            <T id={'billing_address'} />
-          </h4>
+    <Row className={'customer-form__tabs-section'}>
+      <Col xs={6}>
+        <h4>
+          <T id={'billing_address'} />
+        </h4>
 
-          <FormGroup
-            label={<T id={'country'} />}
-            className={'form-group--journal-number'}
+        <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
             }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_country"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_country &&
-                touched.billing_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_country')}
-            />
-          </FormGroup>
+            {...getFieldProps('billing_address_country')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_1 &&
+            touched.billing_address_1 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_1 &&
+              touched.billing_address_1 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_1')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'address'} />}
+          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 }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_2 &&
+              touched.billing_address_2 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_2')}
+          />
+        </FormGroup>
+
+        <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
             }
-            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>
+            {...getFieldProps('billing_address_city')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
+        <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
             }
-            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>
+            {...getFieldProps('billing_address_state')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'zip_code'} />}
+        <FormGroup
+          label={<T id={'zip_code'} />}
+          intent={
+            errors.billing_address_zipcode &&
+            touched.billing_address_zipcode &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="billing_address_zipcode"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
             intent={
               errors.billing_address_zipcode &&
               touched.billing_address_zipcode &&
               Intent.DANGER
             }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_zipcode"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_zipcode &&
-                touched.billing_address_zipcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_zipcode')}
-            />
-          </FormGroup>
-        </Col>
-        <Col width={404}>
-          <h4>
-            <T id={'shipping_address'} />
-          </h4>
+            {...getFieldProps('billing_address_zipcode')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'country'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'phone'} />}
+          intent={
+          errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="shipping_phone" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+            }
+            {...getFieldProps('shipping_phone')}
+          />
+        </FormGroup>
+      </Col>
+
+      <Col xs={6}>
+        <h4>
+          <T id={'shipping_address'} />
+        </h4>
+
+        <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
             }
-            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>
+            {...getFieldProps('shipping_address_country')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_1 &&
+            touched.billing_address_1 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_1 &&
+              touched.billing_address_1 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_1')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'address'} />}
+          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 }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_2 &&
+              touched.billing_address_2 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_2')}
+          />
+        </FormGroup>
+
+        <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
             }
-            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>
+            {...getFieldProps('shipping_address_city')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
+        <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
             }
-            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>
+            {...getFieldProps('shipping_address_state')}
+          />
+        </FormGroup>
 
-          <FormGroup
-            label={<T id={'zip_code'} />}
+        <FormGroup
+          label={<T id={'zip_code'} />}
+          intent={
+            errors.shipping_address_zipcode &&
+            touched.shipping_address_zipcode &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="shipping_address_zipcode"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
             intent={
               errors.shipping_address_zipcode &&
               touched.shipping_address_zipcode &&
               Intent.DANGER
             }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_zipcode"
-                {...{ errors, touched }}
-              />
+            {...getFieldProps('shipping_address_zipcode')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'phone'} />}
+          intent={
+            errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="shipping_phone" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.shipping_phone && touched.shipping_phone && Intent.DANGER
             }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_zipcode &&
-                touched.shipping_address_zipcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_zipcode')}
-            />
-          </FormGroup>
-        </Col>
-      </Row>
-    </div>
+            {...getFieldProps('shipping_phone')}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
   );
 };
 
diff --git a/client/src/containers/Customers/CustomerFinancialPanel.js b/client/src/containers/Customers/CustomerFinancialPanel.js
new file mode 100644
index 000000000..8ecae873e
--- /dev/null
+++ b/client/src/containers/Customers/CustomerFinancialPanel.js
@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import moment from 'moment';
+import classNames from 'classnames';
+import { FormGroup, Intent, Position, Classes } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  ErrorMessage,
+  MoneyInputGroup,
+  CurrenciesSelectList,
+  Row,
+  Col,
+} from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import { momentFormatter, tansformDateValue } from 'utils';
+
+export default function CustomerFinancialPanel({
+  setFieldValue,
+  errors,
+  touched,
+  values,
+}) {
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue('payment_date', formatted);
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <div>
+      <Row>
+        <Col xs={6}>
+          <FormGroup
+            label={<T id={'opening_balance_at'} />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={
+              errors.opening_balance_date &&
+              touched.opening_balance_date &&
+              Intent.DANGER
+            }
+            inline={true}
+            helperText={
+              <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            }
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={handleDateChange}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
+
+          <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={'$'}
+              inputGroupProps={{
+                fill: true,
+              }}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--balance-currency',
+              Classes.FILL,
+            )}
+            inline={true}
+          >
+            <CurrenciesSelectList />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
diff --git a/client/src/containers/Customers/CustomerFooter.js b/client/src/containers/Customers/CustomerFloatingActions.js
similarity index 66%
rename from client/src/containers/Customers/CustomerFooter.js
rename to client/src/containers/Customers/CustomerFloatingActions.js
index f1c0aaf51..645bf4561 100644
--- a/client/src/containers/Customers/CustomerFooter.js
+++ b/client/src/containers/Customers/CustomerFloatingActions.js
@@ -1,16 +1,19 @@
 import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
-export default function CustomerFloatingFooter({
-  formik: { isSubmitting, resetForm },
+export default function CustomerFloatingActions({
+  isSubmitting,
+  resetForm,
   onSubmitClick,
   onCancelClick,
 
-  customer,
+  customerId,
 }) {
   return (
-    <div className={'form__floating-footer'}>
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
       <Button
         intent={Intent.PRIMARY}
         disabled={isSubmitting}
@@ -19,7 +22,7 @@ export default function CustomerFloatingFooter({
           onSubmitClick({ publish: true, redirect: true });
         }}
       >
-        {customer && customer.id ? <T id={'edit'} /> : <T id={'save'} />}
+        {customerId ? <T id={'edit'} /> : <T id={'save'} />}
       </Button>
 
       <Button
@@ -34,16 +37,6 @@ export default function CustomerFloatingFooter({
         <T id={'save_new'} />
       </Button>
 
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={() => {
-          onSubmitClick({ publish: false, redirect: false });
-        }}
-      >
-        <T id={'save_as_draft'} />
-      </Button>
-
       <Button
         className={'ml1'}
         onClick={() => {
diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js
index 056db476c..cb18db28f 100644
--- a/client/src/containers/Customers/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm.js
@@ -1,22 +1,19 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import {
-  FormGroup,
-  Intent,
-  InputGroup,
-  Checkbox,
-} from '@blueprintjs/core';
-import { Row, Col } from 'react-grid-system';
+import { Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { pick } from 'lodash';
+import classNames from 'classnames';
 
+import { CLASSES } from 'common/classes';
 import AppToaster from 'components/AppToaster';
-import ErrorMessage from 'components/ErrorMessage';
 
+import CustomerFormPrimarySection from './CustomerFormPrimarySection';
+import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
 import CustomersTabs from 'containers/Customers/CustomersTabs';
-import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
+import CustomerFloatingActions from './CustomerFloatingActions';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCustomerDetail from 'containers/Customers/withCustomerDetail';
@@ -26,7 +23,6 @@ import withCustomers from 'containers/Customers//withCustomers';
 import useMedia from 'hooks/useMedia';
 
 import { compose } from 'utils';
-import CustomerFloatingFooter from './CustomerFooter';
 
 function CustomerForm({
   // #withDashboardActions
@@ -73,9 +69,7 @@ function CustomerForm({
       .label(formatMessage({ id: 'customer_type_' })),
     first_name: Yup.string().trim(),
     last_name: Yup.string().trim(),
-
     company_name: Yup.string().trim(),
-
     display_name: Yup.string()
       .trim()
       .required()
@@ -153,13 +147,19 @@ function CustomerForm({
       : changePageTitle(formatMessage({ id: 'new_customer' }));
   }, [changePageTitle, customer, formatMessage]);
 
-  const formik = useFormik({
+  const {
+    setFieldValue,
+    getFieldProps,
+    errors,
+    values,
+    touched,
+    handleSubmit
+  } = useFormik({
     enableReinitialize: true,
     validationSchema: validationSchema,
     initialValues: {
       ...initialValues,
     },
-
     onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
       const formValues = { ...values, status: payload.publish };
       if (customer && customer.id) {
@@ -172,7 +172,6 @@ function CustomerForm({
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            // history.push('/customers');
             resetForm();
             saveInvokeSubmit({ action: 'update', ...payload });
           })
@@ -199,20 +198,7 @@ function CustomerForm({
     },
   });
 
-  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
-  const handleCustomerTypeCahange = useCallback(
-    (value) => {
-      formik.setFieldValue('customer_type', value);
-    },
-    [formik.setFieldValue],
-  );
-
-  console.log(formik.values, 'ER');
-  const { errors, touched, getFieldProps, values, isSubmitting } = useMemo(
-    () => formik,
-    [formik],
-  );
-
+ 
   const initialAttachmentFiles = useMemo(() => {
     return customer && customer.media
       ? customer.media.map((attach) => ({
@@ -239,9 +225,9 @@ function CustomerForm({
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
-      formik.handleSubmit();
+      handleSubmit();
     },
-    [setPayload, formik],
+    [setPayload, handleSubmit],
   );
 
   const handleCancelClick = useCallback(
@@ -250,180 +236,47 @@ function CustomerForm({
     },
     [onCancelForm],
   );
+
   return (
-    <div className={'customer-form'}>
-      <form onSubmit={formik.handleSubmit}>
-        <div className={'customer-form__primary-section'}>
-          <CustomerTypeRadioField
-            selectedValue={formik.values.customer_type}
-            onChange={handleCustomerTypeCahange}
-            className={'form-group--customer-type'}
-          />
-
-          <Row>
-            <Col md={3.5} className={'form-group--contact-name'}>
-              <FormGroup
-                label={<T id={'contact_name'} />}
-                inline={true}
-                intent={
-                  formik.errors.first_name &&
-                  formik.touched.first_name &&
-                  Intent.DANGER
-                }
-                helperText={
-                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
-                }
-                // className={'form-group--contact-name'}
-              >
-                <InputGroup
-                  placeholder={'First Name'}
-                  intent={
-                    formik.errors.first_name &&
-                    formik.touched.first_name &&
-                    Intent.DANGER
-                  }
-                  {...formik.getFieldProps('first_name')}
-                />
-              </FormGroup>
-            </Col>
-
-            <Col md={2}>
-              <FormGroup
-                inline={true}
-                intent={
-                  formik.errors.last_name &&
-                  formik.touched.last_name &&
-                  Intent.DANGER
-                }
-                helperText={
-                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
-                }
-                // className={'form-group--contact-name'}
-              >
-                <InputGroup
-                  placeholder={'Last Name'}
-                  intent={
-                    formik.errors.last_name &&
-                    formik.touched.last_name &&
-                    Intent.DANGER
-                  }
-                  {...formik.getFieldProps('last_name')}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
-          {/* Company Name */}
-          <FormGroup
-            label={<T id={'company_name'} />}
-            className={'form-group--company_name'}
-            labelInfo={requiredSpan}
-            intent={
-              formik.errors.company_name &&
-              formik.touched.company_name &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name={'company_name'} />
-            }
-          >
-            <InputGroup
-              intent={
-                formik.errors.company_name &&
-                formik.touched.company_name &&
-                Intent.DANGER
-              }
-              {...formik.getFieldProps('company_name')}
+    <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}
             />
-          </FormGroup>
-          {/* Display Name */}
-          <FormGroup
-            label={<T id={'display_name'} />}
-            intent={
-              formik.errors.display_name &&
-              formik.touched.display_name &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name={'display_name'} />
-            }
-          >
-            <InputGroup
-              intent={
-                formik.errors.display_name &&
-                formik.touched.display_name &&
-                Intent.DANGER
-              }
-              {...formik.getFieldProps('display_name')}
+          </div>
+
+          <div className={'page-form__after-priamry-section'}>
+            <CustomerFormAfterPrimarySection
+              setFieldValue={setFieldValue}
+              getFieldProps={getFieldProps}
+              errors={errors}
+              values={values}
+              touched={touched}
             />
-          </FormGroup>
+          </div>
         </div>
-        <Row>
-          {/* Email */}
-          <Col md={6}>
-            <FormGroup
-              label={<T id={'email'} />}
-              intent={
-                formik.errors.email && formik.touched.email && Intent.DANGER
-              }
-              helperText={
-                <ErrorMessage name={'email'} {...{ errors, touched }} />
-              }
-              className={'form-group--email'}
-              inline={true}
-            >
-              <InputGroup
-                intent={
-                  formik.errors.email && formik.touched.email && Intent.DANGER
-                }
-                {...formik.getFieldProps('email')}
-              />
-            </FormGroup>
-          </Col>
 
-          {/* Active checkbox */}
-          <FormGroup label={' '} inline={true} className={'form-group--active'}>
-            <Checkbox
-              inline={true}
-              label={<T id={'active'} />}
-              defaultChecked={formik.values.active}
-              {...formik.getFieldProps('active')}
-            />
-          </FormGroup>
-        </Row>
-
-        <FormGroup
-          label={<T id={'phone_number'} />}
-          intent={
-            formik.errors.work_phone &&
-            formik.touched.work_phone &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage name={'work_phone'} {...{ errors, touched }} />
-          }
-          className={'form-group--phone-number'}
-          inline={true}
-        >
-          <InputGroup
-            intent={
-              formik.errors.work_phone &&
-              formik.touched.work_phone &&
-              Intent.DANGER
-            }
-            {...formik.getFieldProps('work_phone')}
-          />
-        </FormGroup>
-
-        <CustomersTabs formik={formik} />
+        <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+          <CustomersTabs
+            setFieldValue={setFieldValue}
+            getFieldProps={getFieldProps}
+            errors={errors}
+            values={values}
+            touched={touched} />
+        </div>
       </form>
 
-      <CustomerFloatingFooter
-        formik={formik}
+      <CustomerFloatingActions
         onSubmitClick={handleSubmitClick}
         customer={customer}
         onCancelClick={handleCancelClick}
+        customerId={null}
       />
     </div>
   );
diff --git a/client/src/containers/Customers/CustomerFormAfterPrimarySection.js b/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
new file mode 100644
index 000000000..72e7410bb
--- /dev/null
+++ b/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
+import { Row, Col } from 'react-grid-system';
+import { FormattedMessage as T } from 'react-intl';
+import { ErrorMessage } from 'components';
+
+export default function CustomerFormAfterPrimarySection({
+  setFieldValue,
+  getFieldProps,
+  errors,
+  values,
+  touched,
+}) {
+  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>
+  
+
+      {/*------------ Customer email -----------*/}    
+      <FormGroup
+        intent={errors.work_phone && touched.work_phone && Intent.DANGER}
+        helperText={
+          <ErrorMessage name={'work_phone'} {...{ errors, touched }} />
+        }
+        className={'form-group--phone-number'}
+        label={<T id={'phone_number'} />}
+        inline={true}
+      >
+        <InputGroup
+          intent={
+            errors.work_phone && touched.work_phone && Intent.DANGER
+          }
+          {...getFieldProps('work_phone')}
+        />
+      </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>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/containers/Customers/CustomerFormPrimarySection.js b/client/src/containers/Customers/CustomerFormPrimarySection.js
new file mode 100644
index 000000000..611b44d73
--- /dev/null
+++ b/client/src/containers/Customers/CustomerFormPrimarySection.js
@@ -0,0 +1,125 @@
+import React, { useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { FormGroup, Intent, InputGroup, ControlGroup } from '@blueprintjs/core';
+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';
+
+/**
+ * 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 = (salutation) => {
+    setFieldValue('salutation', salutation.label);
+  };
+  // Handle display name field select.
+  const handleDisplayNameSelect = (displayName) => {
+    setFieldValue('display_name', displayName.label);
+  };
+
+  return (
+    <div className={'customer-form__primary-section-content'}>
+      {/**-----------Customer type. -----------*/}
+      <CustomerTypeRadioField
+        selectedValue={values.customer_type}
+        onChange={handleCustomerTypeCahange}
+      />
+
+      {/**----------- Contact name -----------*/}
+      <FormGroup
+        className={classNames('form-group--contact_name')}
+        label={<T id={'contact_name'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <SalutationList
+            onItemSelect={handleSalutationSelect}
+            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')}
+          />
+        </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>
+
+      {/*----------- 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}
+          onItemSelect={handleDisplayNameSelect}
+          popoverProps={{ minimal: true }}
+        />
+      </FormGroup>
+    </div>
+  );
+}
diff --git a/client/src/containers/Customers/CustomerTypeRadioField.js b/client/src/containers/Customers/CustomerTypeRadioField.js
index 8b65c3580..9e0fb796b 100644
--- a/client/src/containers/Customers/CustomerTypeRadioField.js
+++ b/client/src/containers/Customers/CustomerTypeRadioField.js
@@ -1,23 +1,32 @@
 import React from 'react';
-import { handleStringChange } from 'utils';
-import { useIntl } from 'react-intl';
-import { RadioGroup, Radio } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
+import { handleStringChange } from 'utils';
+
+/**
+ * Customer type radio field.
+ */
 export default function RadioCustomer(props) {
   const { onChange, ...rest } = props;
   const { formatMessage } = useIntl();
 
   return (
-    <RadioGroup
+    <FormGroup
       inline={true}
-      label={formatMessage({ id: 'customer_type' })}
-      onChange={handleStringChange((value) => {
-        onChange && onChange(value);
-      })}
-      {...rest}
-    >
-      <Radio label={formatMessage({ id: 'business' })} value="business" />
-      <Radio label={formatMessage({ id: 'individual' })} value="individual" />
-    </RadioGroup>
+      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>
   );
 }
diff --git a/client/src/containers/Customers/CustomersTabs.js b/client/src/containers/Customers/CustomersTabs.js
index aea897e07..9f6c921ca 100644
--- a/client/src/containers/Customers/CustomersTabs.js
+++ b/client/src/containers/Customers/CustomersTabs.js
@@ -4,8 +4,15 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerNotTabs from './CustomerNotTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
+import CustomerFinancialPanel from './CustomerFinancialPanel';
 
-function CustomersTabs({ formik }) {
+function CustomersTabs({
+  setFieldValue,
+  getFieldProps,
+  errors,
+  values,
+  touched,
+}) {
   const [animate, setAnimate] = useState(true);
   const { formatMessage } = useIntl();
   const handleChangeTabs = useCallback(() => {}, []);
@@ -14,25 +21,36 @@ function CustomersTabs({ formik }) {
     <div>
       <Tabs animate={animate} id={'customer-tabs'} large={true}>
         <Tab
-          id={'other'}
-          title={formatMessage({ id: 'other' })}
-          panel={'Other'}
+          id={'financial'}
+          title={formatMessage({ id: 'financial_details' })}
+          panel={<CustomerFinancialPanel
+            values={values}
+            errors={errors} 
+            setFieldValue={setFieldValue}
+            touched={touched}
+          />}
         />
         <Tab
           id={'address'}
           title={formatMessage({ id: 'address' })}
-          panel={<CustomerAddressTabs formik={formik} />}
+          panel={<CustomerAddressTabs
+            setFieldValue={setFieldValue}
+            getFieldProps={getFieldProps}
+            errors={errors}
+            values={values}
+            touched={touched}
+          />}
         />
         <Tab
           id={'attachement'}
           title={formatMessage({ id: 'attachement' })}
           panel={<CustomerAttachmentTabs />}
         />
-        <Tab
+        {/* <Tab
           id={'note'}
           title={formatMessage({ id: 'note' })}
           panel={<CustomerNotTabs formik={formik} />}
-        />
+        /> */}
       </Tabs>
     </div>
   );
diff --git a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
index 657d3efe3..8026d846e 100644
--- a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
+++ b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
@@ -28,20 +28,10 @@ function JournalNumberDialogContent({
 
   // #withManualJournalsActions
   setJournalNumberChanged,
-}) {
-  const [isChanged, setIsChanged] = useState(false);
-  
+}) {  
   const fetchSettings = useQuery(
-    ['settings', { group: 'manual_journal' }],
+    ['settings'],
     () => requestFetchOptions({}),
-    {
-      onSuccess: () => {
-        if (isChanged) {
-          setJournalNumberChanged(true);
-          setIsChanged(false);
-        }
-      }
-    }
   );
 
   const handleSubmitForm = (values, { setSubmitting }) => {
@@ -51,10 +41,11 @@ function JournalNumberDialogContent({
 
     requestSubmitOptions({ options }).then(() => {
       setSubmitting(false);
-      setIsChanged(true);
-      
-      queryCache.invalidateQueries('settings');
       closeDialog('journal-number-form');
+
+      setTimeout(() => {
+        queryCache.invalidateQueries('settings');
+      }, 250);
     }).catch(() => {
       setSubmitting(false);
     });
diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
index 2e1e416c3..b23ad4ec5 100644
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -3,7 +3,6 @@ import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
-
 import { CLASSES } from 'common/classes';
 import { Hint, Icon } from 'components';
 import DataTable from 'components/DataTable';
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index d9ba48e51..e1a0e346d 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -787,8 +787,13 @@ export default {
   invoice_number_is_not_unqiue:  'Invoice number is not unqiue',
   sale_receipt_number_not_unique: 'Receipt number is not unique',
   sale_invoice_number_is_exists: 'Sale invoice number is exists',
-  bill_number_exists:'Bill number exists',
+  bill_number_exists: 'Bill number exists',
   ok: 'Ok!',
   quantity_cannot_be_zero_or_empty: 'Quantity cannot be zero or empty.',
-
+  customer_email: 'Customer email',
+  customer_phone_number: 'Customer phone number',
+  opening_balance_at: 'Opening balance at',
+  opening_balance: 'Opening balance',
+  balance_currency: 'Balance currency',
+  financial_details: 'Financial details'
 };
diff --git a/client/src/store/manualJournals/manualJournals.reducers.js b/client/src/store/manualJournals/manualJournals.reducers.js
index c046de633..561791173 100644
--- a/client/src/store/manualJournals/manualJournals.reducers.js
+++ b/client/src/store/manualJournals/manualJournals.reducers.js
@@ -2,7 +2,6 @@ import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
 import { createTableQueryReducers } from 'store/queryReducers';
 import { omit } from 'lodash';
-import { journalNumberReducers } from 'store/journalNumber.reducer';
 
 const initialState = {
   items: {},
@@ -16,7 +15,6 @@ const initialState = {
   paginationMeta: {
     total: 0,
   },
-  journalNumberChanged: false,
 };
 
 const defaultJournal = {
@@ -117,8 +115,6 @@ const reducer = createReducer(initialState, {
       },
     };    
   },
-
-  ...journalNumberReducers(t.MANUAL_JOURNAL_NUMBER_CHANGED),
 });
 
 export default createTableQueryReducers('manual_journals', reducer);
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index c7b2e607e..b298e67ac 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -44,7 +44,6 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'components/pagination';
 @import 'components/resizer';
 
-// Pages
 // Pages
 @import 'pages/dashboard';
 @import 'pages/accounts-chart';
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index 10fb360ef..0fb0ed6e8 100644
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -313,6 +313,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
   &.#{$ns}-radio {
     .#{$ns}-control-indicator{
       border: 2px solid #cecece;
+      background-color: #fff;
 
       &::before{
         height: 14px;
diff --git a/client/src/style/pages/customer.scss b/client/src/style/pages/customer.scss
index ef434fe92..6a957f289 100644
--- a/client/src/style/pages/customer.scss
+++ b/client/src/style/pages/customer.scss
@@ -1,105 +1,219 @@
-.customer-form {
-  padding: 25px;
-  padding-bottom: 90px;
-  width: 100%;
-  margin-bottom: 30px;
 
-  .bp3-form-group {
-    .bp3-label {
-      width: 130px;
+
+.page-form--customer{
+  $self: '.page-form';
+  padding: 20px;
+
+  #{$self}__header{
+    padding: 0;
+  }
+  #{$self}__primary-section{
+    padding: 30px 22px 0;
+    margin: -20px -20px 14px;
+    overflow: hidden;
+  }
+
+  #{$self}__header{
+
+    .bp3-form-group{
+
+      .bp3-label{
+        width: 200px;
+      }
+
+      .bp3-form-content{
+        width: 100%;
+      }
     }
-    .bp3-form-content {
-      width: 375px;
-    }
-    textarea {
-      min-width: 100%;
-      max-width: 100%;
-      width: 100%;
-      max-height: 120px;
+
+    .form-group--contact_name{
+
+      .bp3-control-group > *{
+        flex-shrink: unset;
+
+        &:not(:last-child) {
+          padding-right: 10px;
+        }
+
+        &.input-group--salutation-list{
+          width: 25%;
+        }
+        &.input-group--first-name,
+        &.input-group--last-name{
+          width: 37%;
+        }
+      }
     }
   }
 
-  .form-group--customer-type {
-    .bp3-label {
-      position: relative;
-      display: inline-block;
-      margin: 0 50px 30px 0px;
+  .bp3-form-group{
+    margin-bottom: 14px;
+  }
+
+  .bp3-tab-panel{
+    margin-top: 26px; 
+  }
+
+  #{$self}__tabs{
+    margin-top: 20px;
+
+    .bp3-form-group{
+      
+      .bp3-label{
+        min-width: 145px;
+      }
+      .bp3-form-content{
+        width: 100%;
+      }
     }
-  }
 
-  // .form-group--contact-name {
-  //   .bp3-input-group .bp3-input {
-  //     position: relative;
-  //     // display: none;
-  //     width: 50%;
-  //   }
-  //   // .row {
-  //   //   width: fit-content;
-  //   // }
-
-  //   // .#{$ns}-form-content{
-  //   //   width: 350px;
-  //   // }
-  // }
-
-  h1 {
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  &__primary-section {
-    background-color: #fafafa;
-    padding: 40px 22px 22px;
-    margin: -22px -22px 22px;
-    background-color: #fafafa;
-  }
-
-  &__tabs-section {
-    position: relative;
-    h4 {
-      margin: 0;
+    h4{
       font-weight: 500;
-      margin-bottom: 20px;
+      color: #888;
+      margin-bottom: 1.2rem;
       font-size: 14px;
-      color: #828282;
-    }
-    > div:first-of-type {
-      padding-right: 40px !important;
-    }
-    > div ~ div {
-      padding-left: 40px !important;
     }
   }
 
-  .dropzone-container {
-    align-self: end;
-  }
+  .bp3-tabs{
+    .bp3-tab-list{
+      position: relative;
 
-  .dropzone {
-    width: 300px;
-    height: 100px;
-    margin-right: 20px;
+      &:before{
+        content: "";
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #F0F0F0;  
+      }
+
+      > *:not(:last-child){
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab{
+        font-size: 15px;
+        color: #555;
+
+        &[aria-selected="true"],
+        &:not([aria-disabled="true"]):hover{
+          color: $pt-link-color;
+        }
+      }
+    }
   }
 }
 
-.form-group--contact-name {
-  .bp3-form-group.bp3-inline label.bp3-label {
-    line-height: 30px;
-    display: inline-block;
-    margin: 0 45px 0 0;
-    width: 200px;
-  }
 
-  .bp3-input-group .bp3-input {
-    position: relative;
-    // display: none;
-    width: 100%;
-    // margin-left: 30px;
-  }
-  // .row {
-  //   width: fit-content;
-  // }
+.customer-form{
 
-  // .#{$ns}-form-content{
-  //   width: 350px;
-  // }
+
+  &__primary-section{
+    background-color: #fafafa;
+    padding: 40px 22px 5px;
+    margin: -20px -20px 26px;
+
+    &-content{
+      width: 600px;
+    }
+  }
+  &__after-primary-section{
+    &-content{
+      width: 600px;
+    }
+  }
+  
+
+  
 }
+
+// .customer-form {
+//   padding: 25px;
+//   padding-bottom: 90px;
+//   width: 100%;
+//   margin-bottom: 30px;
+
+
+
+//   .form-group--customer-type {
+//     .bp3-label {
+//       position: relative;
+//       display: inline-block;
+//       margin: 0 50px 30px 0px;
+//     }
+//   }
+
+//   // .form-group--contact-name {
+//   //   .bp3-input-group .bp3-input {
+//   //     position: relative;
+//   //     // display: none;
+//   //     width: 50%;
+//   //   }
+//   //   // .row {
+//   //   //   width: fit-content;
+//   //   // }
+
+//   //   // .#{$ns}-form-content{
+//   //   //   width: 350px;
+//   //   // }
+//   // }
+
+//   h1 {
+//     font-size: 14px;
+//     margin-bottom: 20px;
+//   }
+//   &__primary-section {
+//     
+//   }
+
+//   &__tabs-section {
+//     position: relative;
+//     h4 {
+//       margin: 0;
+//       font-weight: 500;
+//       margin-bottom: 20px;
+//       font-size: 14px;
+//       color: #828282;
+//     }
+//     > div:first-of-type {
+//       padding-right: 40px !important;
+//     }
+//     > div ~ div {
+//       padding-left: 40px !important;
+//     }
+//   }
+
+//   .dropzone-container {
+//     align-self: end;
+//   }
+
+//   .dropzone {
+//     width: 300px;
+//     height: 100px;
+//     margin-right: 20px;
+//   }
+// }
+
+// .form-group--contact-name {
+//   .bp3-form-group.bp3-inline label.bp3-label {
+//     line-height: 30px;
+//     display: inline-block;
+//     margin: 0 45px 0 0;
+//     width: 200px;
+//   }
+
+//   .bp3-input-group .bp3-input {
+//     position: relative;
+//     // display: none;
+//     width: 100%;
+//     // margin-left: 30px;
+//   }
+//   // .row {
+//   //   width: fit-content;
+//   // }
+
+//   // .#{$ns}-form-content{
+//   //   width: 350px;
+//   // }
+// }
diff --git a/server/src/models/Account.js b/server/src/models/Account.js
index 4bba025bc..721e2dedf 100644
--- a/server/src/models/Account.js
+++ b/server/src/models/Account.js
@@ -11,7 +11,7 @@ import DependencyGraph from 'lib/DependencyGraph';
 
 export default class Account extends TenantModel {
   /**
-   * Table name
+   * Table name.
    */
   static get tableName() {
     return 'accounts';