WIP: customer form styling.

fix: journal increment number settings.

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

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

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={() => {

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

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

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

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

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