chrone: sperate client and server to different repos.

src/containers/Customers/CustomerForm/CustomerAddressTabs.js

@@ -0,0 +1,230 @@
+import React from 'react';
+import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+import { Row, Col } from 'components';
+import { FormattedMessage as T } from 'components';
+import { FastField, ErrorMessage } from 'formik';
+import { inputIntent } from 'utils';
+
+const CustomerBillingAddress = ({}) => {
+  return (
+    <div className={'tab-panel--address'}>
+      <Row>
+        <Col xs={6}>
+          <h4>
+            <T id={'billing_address'} />
+          </h4>
+          {/*------------ Billing Address country -----------*/}
+          <FastField name={'billing_address_country'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_country" />}
+                label={<T id={'country'} />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Billing Address 1  -----------*/}
+          <FastField name={'billing_address_1'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_1'} />}
+                className={'form-group--address_line_1'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_1" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Billing Address 2  -----------*/}
+          <FastField name={'billing_address_2'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_2'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_2" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+          {/*------------ Billing Address city  -----------*/}
+          <FastField name={'billing_address_city'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'city_town'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_city" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Billing Address state  -----------*/}
+          <FastField name={'billing_address_state'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'state'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_state" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+          {/*------------ Billing Address postcode  -----------*/}
+          <FastField name={'billing_address_postcode'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'zip_code'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_postcode" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Billing Address phone  -----------*/}
+          <FastField name={'billing_address_phone'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'phone'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="billing_address_phone" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={6}>
+          <h4>
+            <T id={'shipping_address'} />
+          </h4>
+          {/*------------ Shipping Address country -----------*/}
+          <FastField name={'shipping_address_country'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'country'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_country" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address 1  -----------*/}
+          <FastField name={'shipping_address_1'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_1'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_1" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address 2  -----------*/}
+          <FastField name={'shipping_address_2'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'address_line_2'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_2" />}
+              >
+                <TextArea {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address city  -----------*/}
+          <FastField name={'shipping_address_city'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'city_town'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_city" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address state  -----------*/}
+          <FastField name={'shipping_address_state'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'state'} />}
+                className={'form-group--journal-number'}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_state" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address postcode  -----------*/}
+          <FastField name={'shipping_address_postcode'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'zip_code'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_postcode" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Shipping Address phone  -----------*/}
+          <FastField name={'shipping_address_phone'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'phone'} />}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="shipping_address_phone" />}
+              >
+                <InputGroup {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default CustomerBillingAddress;

src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js

@@ -0,0 +1,24 @@
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
+import Dragzone from 'components/Dragzone';
+import { FormattedMessage as T } from 'components';
+
+function CustomerAttachmentTabs() {
+  return (
+    <div>
+      <Dragzone
+        initialFiles={[]}
+        onDrop={null}
+        onDeleteFile={[]}
+        hint={<T id={'attachments_maximum'} />}
+      />
+    </div>
+  );
+}
+
+export default CustomerAttachmentTabs;

src/containers/Customers/CustomerForm/CustomerFinancialPanel.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
+import moment from 'moment';
+import {
+  MoneyInputGroup,
+  InputPrependText,
+  CurrencySelectList,
+  Row,
+  Col,
+} from 'components';
+import { FormattedMessage as T } from 'components';
+
+import { useCustomerFormContext } from './CustomerFormProvider';
+
+import {
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+} from 'utils';
+
+/**
+ * Customer financial panel.
+ */
+export default function CustomerFinancialPanel() {
+  const {
+    currencies,
+    customerId
+  } = useCustomerFormContext();
+
+  return (
+    <div className={'tab-panel--financial'}>
+      <Row>
+        <Col xs={6}>
+          {/*------------ Opening balance at -----------*/}
+          <FastField name={'opening_balance_at'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'opening_balance_at'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="opening_balance_at" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={(date) => {
+                    form.setFieldValue(
+                      'opening_balance_at',
+                      moment(date).format('YYYY-MM-DD'),
+                    );
+                  }}
+                  value={tansformDateValue(value)}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  disabled={customerId}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Opening balance  -----------*/}
+          <FastField name={'opening_balance'}>
+            {({
+              form,
+              field,
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'opening_balance'} />}
+                className={classNames(
+                  'form-group--opening-balance',
+                  Classes.FILL,
+                )}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+              >
+                <ControlGroup>
+                  <InputPrependText text={form.values.currency_code} />
+                  <MoneyInputGroup
+                    value={value}
+                    inputGroupProps={{ fill: true }}
+                    disabled={customerId}
+                    onChange={(balance) => {
+                      form.setFieldValue('opening_balance', balance);
+                    }}
+                  />
+                </ControlGroup>
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Currency  -----------*/}
+          <FastField name={'currency_code'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'currency'} />}
+                className={classNames(
+                  'form-group--select-list',
+                  'form-group--balance-currency',
+                  Classes.FILL,
+                )}
+                inline={true}
+              >
+                <CurrencySelectList
+                  currenciesList={currencies}
+                  selectedCurrencyCode={value}
+                  onCurrencySelected={(currency) => {
+                    form.setFieldValue('currency_code', currency.currency_code);
+                  }}
+                  disabled={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}

src/containers/Customers/CustomerForm/CustomerFloatingActions.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+
+import { CLASSES } from 'common/classes';
+import { Icon } from 'components';
+import { useCustomerFormContext } from './CustomerFormProvider';
+
+/**
+ * Customer floating actions bar.
+ */
+export default function CustomerFloatingActions() {
+  const history = useHistory();
+
+  // Customer form context.
+  const { isNewMode,setSubmitPayload } = useCustomerFormContext();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ noRedirect: false });
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  // handle clear button clicl.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  // Handle submit & new button click.
+  const handleSubmitAndNewClick = (event) => {
+    submitForm();
+    setSubmitPayload({ noRedirect: true });
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

src/containers/Customers/CustomerForm/CustomerForm.js

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from 'common/classes';
+import AppToaster from 'components/AppToaster';
+
+import CustomerFormPrimarySection from './CustomerFormPrimarySection';
+import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
+import CustomersTabs from './CustomersTabs';
+import CustomerFloatingActions from './CustomerFloatingActions';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose, transformToForm } from 'utils';
+import { useCustomerFormContext } from './CustomerFormProvider';
+import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
+
+const defaultInitialValues = {
+  customer_type: 'business',
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  company_name: '',
+  display_name: '',
+
+  email: '',
+  work_phone: '',
+  personal_phone: '',
+  website: '',
+  note: '',
+  active: true,
+
+  billing_address_country: '',
+  billing_address_1: '',
+  billing_address_2: '',
+  billing_address_city: '',
+  billing_address_state: '',
+  billing_address_postcode: '',
+  billing_address_phone: '',
+
+  shipping_address_country: '',
+  shipping_address_1: '',
+  shipping_address_2: '',
+  shipping_address_city: '',
+  shipping_address_state: '',
+  shipping_address_postcode: '',
+  shipping_address_phone: '',
+
+  opening_balance: '',
+  currency_code: '',
+  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Customer form.
+ */
+function CustomerForm({ organization: { base_currency } }) {
+  const {
+    customer,
+    customerId,
+    submitPayload,
+    contactDuplicate,
+    editCustomerMutate,
+    createCustomerMutate,
+    isNewMode,
+  } = useCustomerFormContext();
+
+  // const isNewMode = !customerId;
+  const history = useHistory();
+
+  /**
+   * Initial values in create and edit mode.
+   */
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      currency_code: base_currency,
+      ...transformToForm(contactDuplicate || customer, defaultInitialValues),
+    }),
+    [customer, contactDuplicate, base_currency],
+  );
+
+  //Handles the form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, resetForm, setErrors },
+  ) => {
+    const formValues = { ...values };
+
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_customer_has_been_created_successfully'
+            : 'the_item_customer_has_been_edited_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+
+      if (!submitPayload.noRedirect) {
+        history.push('/customers');
+      }
+    };
+
+    const onError = () => {
+      setSubmitting(false);
+    };
+
+    if (isNewMode) {
+      createCustomerMutate(formValues).then(onSuccess).catch(onError);
+    } else {
+      editCustomerMutate([customer.id, formValues])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
+      <Formik
+        validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+            <CustomerFormPrimarySection />
+          </div>
+
+          <div className={'page-form__after-priamry-section'}>
+            <CustomerFormAfterPrimarySection />
+          </div>
+
+          <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+            <CustomersTabs />
+          </div>
+
+          <CustomerFloatingActions />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(CustomerForm);

src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -0,0 +1,48 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  customer_type: Yup.string()
+    .required()
+    .trim()
+    .label(intl.get('customer_type_')),
+  salutation: Yup.string().trim(),
+  first_name: Yup.string().trim(),
+  last_name: Yup.string().trim(),
+  company_name: Yup.string().trim(),
+  display_name: Yup.string()
+    .trim()
+    .required()
+    .label(intl.get('display_name_')),
+
+  email: Yup.string().email().nullable(),
+  work_phone: Yup.number(),
+  personal_phone: Yup.number(),
+  website: Yup.string().url().nullable(),
+
+  active: Yup.boolean(),
+  note: Yup.string().trim(),
+
+  billing_address_country: Yup.string().trim(),
+  billing_address_1: Yup.string().trim(),
+  billing_address_2: Yup.string().trim(),
+  billing_address_city: Yup.string().trim(),
+  billing_address_state: Yup.string().trim(),
+  billing_address_postcode: Yup.number().nullable(),
+  billing_address_phone: Yup.number(),
+
+  shipping_address_country: Yup.string().trim(),
+  shipping_address_1: Yup.string().trim(),
+  shipping_address_2: Yup.string().trim(),
+  shipping_address_city: Yup.string().trim(),
+  shipping_address_state: Yup.string().trim(),
+  shipping_address_postcode: Yup.number().nullable(),
+  shipping_address_phone: Yup.number(),
+
+  opening_balance: Yup.number().nullable(),
+  currency_code: Yup.string(),
+  opening_balance_at: Yup.date(),
+});
+
+export const CreateCustomerForm = Schema;
+export const EditCustomerForm = Schema;

src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { inputIntent } from 'utils';
+
+export default function CustomerFormAfterPrimarySection({}) {
+  
+  return (
+    <div class="customer-form__after-primary-section-content">
+      {/*------------ Customer email -----------*/}
+      <FastField name={'email'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'email'} />}
+            className={'form-group--email'}
+            label={<T id={'customer_email'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Phone number -----------*/}
+      <FormGroup
+        className={'form-group--phone-number'}
+        label={<T id={'phone_number'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <FastField name={'work_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={intl.get('work')}
+                {...field}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'personal_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={intl.get('Mobile')}
+                {...field}
+              />
+            )}
+          </FastField>
+        </ControlGroup>
+      </FormGroup>
+
+      {/*------------ Customer website -----------*/}
+      <FastField name={'website'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'website'} />}
+            className={'form-group--website'}
+            label={<T id={'website'} />}
+            inline={true}
+          >
+            <InputGroup placeholder={'http://'} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Customers/CustomerForm/CustomerFormPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { DashboardCard } from 'components';
+import CustomerForm from './CustomerForm';
+import { CustomerFormProvider } from './CustomerFormProvider';
+
+import 'style/pages/Customers/PageForm.scss';
+
+export default function CustomerFormPage() {
+  const { id } = useParams();
+
+  return (
+    <CustomerFormProvider customerId={id}>
+      <DashboardCard page>
+        <CustomerForm />
+      </DashboardCard>
+    </CustomerFormProvider>
+  );
+}

src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import {
+  Hint,
+  FieldRequiredHint,
+  SalutationList,
+  DisplayNameList,
+} from 'components';
+import CustomerTypeRadioField from './CustomerTypeRadioField';
+import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
+import { useAutofocus } from 'hooks';
+
+/**
+ * Customer form primary section.
+ */
+export default function CustomerFormPrimarySection({}) {
+  const firstNameFieldRef = useAutofocus();
+  
+  
+  return (
+    <div className={'customer-form__primary-section-content'}>
+      {/**-----------Customer type. -----------*/}
+      <CustomerTypeRadioField />
+
+      {/**----------- Contact name -----------*/}
+      <FormGroup
+        className={classNames('form-group--contact_name')}
+        label={<T id={'contact_name'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <FastField name={'salutation'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <SalutationList
+                onItemSelect={(salutation) => {
+                  form.setFieldValue('salutation', salutation.label);
+                }}
+                selectedItem={value}
+                popoverProps={{ minimal: true }}
+                className={classNames(
+                  CLASSES.FORM_GROUP_LIST_SELECT,
+                  CLASSES.FILL,
+                  'input-group--salutation-list',
+                  'select-list--fill-button',
+                )}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'first_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={intl.get('first_name')}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--first-name')}
+                inputRef={(ref) => (firstNameFieldRef.current = ref)}
+                {...field}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'last_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={intl.get('last_name')}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--last-name')}
+                {...field}
+              />
+            )}
+          </FastField>
+        </ControlGroup>
+      </FormGroup>
+
+      {/*----------- Company Name -----------*/}
+      <FastField name={'company_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            className={classNames('form-group--company_name')}
+            label={<T id={'company_name'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'company_name'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*----------- Display Name -----------*/}
+      <Field name={'display_name'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            helperText={<ErrorMessage name={'display_name'} />}
+            intent={inputIntent({ error, touched })}
+            label={
+              <>
+                <T id={'display_name'} />
+                <FieldRequiredHint />
+                <Hint />
+              </>
+            }
+            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+            inline={true}
+          >
+            <DisplayNameList
+              firstName={form.values.first_name}
+              lastName={form.values.last_name}
+              company={form.values.company_name}
+              salutation={form.values.salutation}
+              onItemSelect={(displayName) => {
+                form.setFieldValue('display_name', displayName.label);
+              }}
+              selectedItem={value}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
+    </div>
+  );
+}

src/containers/Customers/CustomerForm/CustomerFormProvider.js

@@ -0,0 +1,73 @@
+import React, { useState, createContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useCustomer,
+  useCurrencies,
+  useCreateCustomer,
+  useEditCustomer,
+  useContact,
+} from 'hooks/query';
+
+const CustomerFormContext = createContext();
+
+function CustomerFormProvider({ customerId, ...props }) {
+  const { state } = useLocation();
+
+  const contactId = state?.action;
+
+  // Handle fetch customer details.
+  const { data: customer, isLoading: isCustomerLoading } = useCustomer(
+    customerId,
+    { enabled: !!customerId },
+  );
+  // Handle fetch contact duplicate details.
+  const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
+    contactId,
+    { enabled: !!contactId, },
+  );
+  // Handle fetch Currencies data table
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  const { mutateAsync: editCustomerMutate } = useEditCustomer();
+  const { mutateAsync: createCustomerMutate } = useCreateCustomer();
+
+  // determines whether the form new or duplicate mode.
+  const isNewMode = contactId || !customerId;
+
+  const provider = {
+    customerId,
+    customer,
+    currencies,
+    contactDuplicate,
+    submitPayload,
+    isNewMode,
+
+    isCustomerLoading,
+    isCurrenciesLoading,
+
+    setSubmitPayload,
+    editCustomerMutate,
+    createCustomerMutate,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isCustomerLoading ||
+        isCurrenciesLoading ||
+        isContactLoading
+      }
+      name={'customer-form'}
+    >
+      <CustomerFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useCustomerFormContext = () => React.useContext(CustomerFormContext);
+
+export { CustomerFormProvider, useCustomerFormContext };

src/containers/Customers/CustomerForm/CustomerNotePanel.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { inputIntent } from 'utils';
+
+export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
+  return (
+    <div className={'tab-panel--note'}>
+      <FastField name={'note'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'note'} />}
+            className={classNames('form-group--note', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_date" />}
+          >
+            <TextArea {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Customers/CustomerForm/CustomerTypeRadioField.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { FastField } from 'formik';
+
+import { handleStringChange, saveInvoke } from 'utils';
+
+/**
+ * Customer type radio field.
+ */
+export default function RadioCustomer(props) {
+  const { onChange, ...rest } = props;
+  
+
+  return (
+    <FastField name={'customer_type'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          inline={true}
+          label={<T id={'customer_type'} />}
+          className={classNames('form-group--customer_type')}
+        >
+          <RadioGroup
+            inline={true}
+            onChange={handleStringChange((value) => {
+              saveInvoke(onChange, value);
+              form.setFieldValue('customer_type', value);
+            })}
+            selectedValue={value}
+          >
+            <Radio label={intl.get('business')} value="business" />
+            <Radio
+              label={intl.get('individual')}
+              value="individual"
+            />
+          </RadioGroup>
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}

src/containers/Customers/CustomerForm/CustomersTabs.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import CustomerAddressTabs from './CustomerAddressTabs';
+import CustomerAttachmentTabs from './CustomerAttachmentTabs';
+import CustomerFinancialPanel from './CustomerFinancialPanel';
+import CustomerNotePanel from './CustomerNotePanel';
+
+export default function CustomersTabs() {
+  
+
+  return (
+    <div>
+      <Tabs
+        animate={true}
+        id={'customer-tabs'}
+        large={true}
+        defaultSelectedTabId="financial"
+      >
+        <Tab
+          id={'financial'}
+          title={intl.get('financial_details')}
+          panel={<CustomerFinancialPanel />}
+        />
+        <Tab
+          id={'address'}
+          title={intl.get('address')}
+          panel={<CustomerAddressTabs />}
+        />
+        <Tab
+          id="notes"
+          title={intl.get('notes')}
+          panel={<CustomerNotePanel />}
+        />
+        <Tab
+          id={'attachement'}
+          title={intl.get('attachement')}
+          panel={<CustomerAttachmentTabs />}
+        />
+      </Tabs>
+    </div>
+  );
+}

src/containers/Customers/CustomersAlerts.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
+import ContactActivateAlert from '../../containers/Alerts/Contacts/ContactActivateAlert';
+import ContactInactivateAlert from '../../containers/Alerts/Contacts/ContactInactivateAlert';
+
+/**
+ * Customers alert.
+ */
+export default function ItemsAlerts() {
+  return (
+    <div>
+      <CustomerDeleteAlert name={'customer-delete'} />
+      <ContactActivateAlert name={'contact-activate'} />
+      <ContactInactivateAlert name={'contact-inactivate'} />
+    </div>
+  );
+}

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Intent,
+  Switch,
+  Alignment,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  If,
+  Icon,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { useRefreshCustomers } from 'hooks/query/customers';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customers actions bar.
+ */
+function CustomerActionsBar({
+  // #withCustomers
+  customersSelectedRows = [],
+  customersFilterConditions,
+
+  // #withCustomersActions
+  setCustomersTableState,
+  accountsInactiveMode,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  // History context.
+  const history = useHistory();
+
+  // Customers list context.
+  const { customersViews, fields } = useCustomersListContext();
+
+  // Customers refresh action.
+  const { refresh } = useRefreshCustomers();
+
+  const onClickNewCustomer = () => {
+    history.push('/customers/new');
+  };
+
+  // Handle Customers bulk delete button click.,
+  const handleBulkDelete = () => {
+    openAlert('customers-bulk-delete', { customersIds: customersSelectedRows });
+  };
+
+  const handleTabChange = (view) => {
+    setCustomersTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setCustomersTableState({ inactiveMode: checked });
+  };
+
+  // Handle click a refresh customers
+  const handleRefreshBtnClick = () => { refresh(); };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'customers'}
+          views={customersViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_customer'} />}
+          onClick={onClickNewCustomer}
+        />
+        <NavbarDivider />
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: customersFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCustomersTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={customersFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={customersSelectedRows.length}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={accountsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withCustomersActions,
+  withCustomers(({ customersSelectedRows, customersTableState }) => ({
+    customersSelectedRows,
+    accountsInactiveMode: customersTableState.inactiveMode,
+    customersFilterConditions: customersTableState.filterRoles,
+  })),
+  withAlertActions,
+)(CustomerActionsBar);

src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'components';
+
+export default function CustomersEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'create_and_manage_your_organization_s_customers'} />}
+      description={
+        <p>
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/customers/new');
+            }}
+          >
+            <T id={'new_customer'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Customers/CustomersLanding/CustomersList.js

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+
+import 'style/pages/Customers/List.scss';
+
+import { DashboardPageContent } from 'components';
+
+import CustomersActionsBar from './CustomersActionsBar';
+import CustomersViewsTabs from './CustomersViewsTabs';
+import CustomersTable from './CustomersTable';
+import CustomersAlerts from 'containers/Customers/CustomersAlerts';
+import { CustomersListProvider } from './CustomersListProvider';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customers list.
+ */
+function CustomersList({
+  // #withCustomers
+  customersTableState,
+  customersTableStateChanged,
+
+  // #withCustomersActions
+  resetCustomersTableState,
+}) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      resetCustomersTableState();
+    },
+    [resetCustomersTableState],
+  );
+
+  return (
+    <CustomersListProvider
+      tableState={customersTableState}
+      tableStateChanged={customersTableStateChanged}
+    >
+      <CustomersActionsBar />
+
+      <DashboardPageContent>
+        <CustomersViewsTabs />
+        <CustomersTable />
+      </DashboardPageContent>
+      <CustomersAlerts />
+    </CustomersListProvider>
+  );
+}
+
+export default compose(
+  withCustomers(({ customersTableState, customersTableStateChanged }) => ({
+    customersTableState,
+    customersTableStateChanged,
+  })),
+  withCustomersActions,
+)(CustomersList);

src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -0,0 +1,66 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
+import { transformCustomersStateToQuery } from './utils';
+
+const CustomersListContext = createContext();
+
+function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
+  // Transformes the table state to fetch query.
+  const tableQuery = transformCustomersStateToQuery(tableState);
+
+  // Fetch customers resource views and fields.
+  const { data: customersViews, isLoading: isViewsLoading } =
+    useResourceViews('customers');
+
+  // Fetch the customers resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');
+
+  // Fetches customers data with pagination meta.
+  const {
+    data: { customers, pagination, filterMeta },
+    isLoading: isCustomersLoading,
+    isFetching: isCustomersFetching,
+  } = useCustomers(tableQuery, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(customers) && !isCustomersLoading && !tableStateChanged;
+
+  const state = {
+    customersViews,
+    customers,
+    pagination,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isViewsLoading,
+    isCustomersLoading,
+    isCustomersFetching,
+
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      name={'customers-list'}
+    >
+      <CustomersListContext.Provider value={state} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useCustomersListContext = () => React.useContext(CustomersListContext);
+
+export { CustomersListProvider, useCustomersListContext };

src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import CustomersEmptyStatus from './CustomersEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import { TABLES } from 'common/tables';
+import { DataTable, DashboardContentTable } from 'components';
+import { ActionsMenu, useCustomersTableColumns } from './components';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import { compose } from 'utils';
+
+/**
+ * Customers table.
+ */
+function CustomersTable({
+  // #withCustomersActions
+  setCustomersTableState,
+
+  // #withCustomers
+  customersTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogActions
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Customers table columns.
+  const columns = useCustomersTableColumns();
+
+  // Customers list context.
+  const {
+    isEmptyStatus,
+    customers,
+    pagination,
+    isCustomersLoading,
+    isCustomersFetching,
+  } = useCustomersListContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CUSTOMERS);
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setCustomersTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setCustomersTableState],
+  );
+
+  // Handles the customer delete action.
+  const handleCustomerDelete = ({ id }) => {
+    openAlert('customer-delete', { contactId: id });
+  };
+
+  // Handle the customer edit action.
+  const handleCustomerEdit = (customer) => {
+    history.push(`/customers/${customer.id}/edit`);
+  };
+
+  const handleContactDuplicate = ({ id }) => {
+    openDialog('contact-duplicate', { contactId: id });
+  };
+
+  // Handle cancel/confirm inactive.
+  const handleInactiveCustomer = ({ id, contact_service }) => {
+    openAlert('contact-inactivate', {
+      contactId: id,
+      service: contact_service,
+    });
+  };
+
+  // Handle cancel/confirm  activate.
+  const handleActivateCustomer = ({ id, contact_service }) => {
+    openAlert('contact-activate', { contactId: id, service: contact_service });
+  };
+
+  // Handle view detail contact.
+  const handleViewDetailCustomer = ({ id }) => {
+    openDrawer('customer-details-drawer', { customerId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('customer-details-drawer', { customerId: cell.row.original.id });
+  };
+
+  if (isEmptyStatus) {
+    return <CustomersEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={customers}
+        loading={isCustomersLoading}
+        headerLoading={isCustomersLoading}
+        progressBarLoading={isCustomersFetching}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
+        expandable={false}
+        sticky={true}
+        spinnerProps={{ size: 30 }}
+        pagination={true}
+        manualSortBy={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onDelete: handleCustomerDelete,
+          onEdit: handleCustomerEdit,
+          onDuplicate: handleContactDuplicate,
+          onInactivate: handleInactiveCustomer,
+          onActivate: handleActivateCustomer,
+          onViewDetails: handleViewDetailCustomer,
+        }}
+        ContextMenu={ActionsMenu}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withCustomersActions,
+  withDrawerActions,
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
+)(CustomersTable);

src/containers/Customers/CustomersLanding/CustomersViewsTabs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { compose, transfromViewsToTabs } from 'utils';
+
+/**
+ * Customers views tabs.
+ */
+function CustomersViewsTabs({
+  // #withCustomersActions
+  setCustomersTableState,
+
+  // #withCustomers
+  customersCurrentView,
+}) {
+  // Customers list context.
+  const { customersViews } = useCustomersListContext();
+
+  // Transformes the views to tabs.
+  const tabs = transfromViewsToTabs(customersViews);
+
+  // Handle tabs change.
+  const handleTabsChange = (viewSlug) => {
+    setCustomersTableState({ viewSlug: viewSlug || null });
+  };
+
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={customersCurrentView}
+          resourceName={'customers'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withCustomersActions,
+  withCustomers(({ customersTableState }) => ({
+    customersCurrentView: customersTableState.viewSlug,
+  })),
+)(CustomersViewsTabs);

src/containers/Customers/CustomersLanding/components.js

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+} from '@blueprintjs/core';
+import clsx from 'classnames';
+import intl from 'react-intl-universal';
+
+import { CLASSES } from '../../../common/classes';
+import { Icon, Money, If } from 'components';
+import {  } from 'utils';
+import { safeCallback, firstLettersArgs } from 'utils';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onDelete,
+    onDuplicate,
+    onInactivate,
+    onActivate,
+    onViewDetails,
+  },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_customer')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="duplicate-16" />}
+        text={intl.get('duplicate')}
+        onClick={safeCallback(onDuplicate, original)}
+      />
+      <If condition={original.active}>
+        <MenuItem
+          text={intl.get('inactivate_customer')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
+          onClick={safeCallback(onInactivate, original)}
+        />
+      </If>
+      <If condition={!original.active}>
+        <MenuItem
+          text={intl.get('activate_customer')}
+          icon={<Icon icon="play-16" iconSize={16} />}
+          onClick={safeCallback(onActivate, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_customer')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Avatar cell.
+ */
+export function AvatarCell(row) {
+  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
+}
+
+/**
+ * Phone number accessor.
+ */
+export function PhoneNumberAccessor(row) {
+  return <div className={'work_phone'}>{row.work_phone}</div>;
+}
+
+/**
+ * Balance accessor.
+ */
+export function BalanceAccessor(row) {
+  return <Money amount={row.closing_balance} currency={row.currency_code} />;
+}
+
+/**
+ * Retrieve customers table columns.
+ */
+export function useCustomersTableColumns() {
+  return useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        className: 'avatar',
+        width: 45,
+        disableResizing: true,
+        disableSortBy: true,
+        clickable: true,
+      },
+      {
+        id: 'display_name',
+        Header: intl.get('display_name'),
+        accessor: 'display_name',
+        className: 'display_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'company_name',
+        Header: intl.get('company_name'),
+        accessor: 'company_name',
+        className: 'company_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'work_phone',
+        Header: intl.get('work_phone'),
+        accessor: PhoneNumberAccessor,
+        className: 'phone_number',
+        width: 100,
+        clickable: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('receivable_balance'),
+        accessor: BalanceAccessor,
+        align: 'right',
+        width: 100,
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Customers/CustomersLanding/utils.js

@@ -0,0 +1,8 @@
+import { transformTableStateToQuery } from 'utils';
+
+export const transformCustomersStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode,
+  };
+};

src/containers/Customers/CustomersLanding/withCustomers.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import {
+  getCustomersTableStateFactory,
+  customersTableStateChangedFactory,
+} from 'store/customers/customers.selectors';
+
+
+export default (mapState) => {
+  const getCustomersTableState = getCustomersTableStateFactory();
+  const customersTableStateChanged = customersTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      customersTableState: getCustomersTableState(state, props),
+      customersTableStateChanged: customersTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Customers/CustomersLanding/withCustomersActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setCustomersTableState,
+  resetCustomersTableState
+} from 'store/customers/customers.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
+  resetCustomersTableState: () => dispatch(resetCustomersTableState()),
+});
+
+export default connect(null, mapDispatchToProps);

src/containers/Customers/CustomersUniversalSearch.js

@@ -0,0 +1,45 @@
+import intl from 'react-intl-universal';
+
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import withDrawerActions from '../Drawer/withDrawerActions';
+
+function CustomerUniversalSearchSelectComponent({
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.CUSTOMER) {
+    openDrawer('customer-details-drawer', { customerId: resourceId });
+    onAction && onAction();
+  }
+  return null;
+}
+
+const CustomerUniversalSearchSelectAction = withDrawerActions(
+  CustomerUniversalSearchSelectComponent,
+);
+
+/**
+ * Transformes customers to search.
+ * @param {*} contact
+ * @returns
+ */
+const customersToSearch = (contact) => ({
+  id: contact.id,
+  text: contact.display_name,
+  label: contact.formatted_balance,
+  reference: contact,
+});
+
+/**
+ * Binds universal search invoice configure.
+ */
+export const universalSearchCustomerBind = () => ({
+  resourceType: RESOURCES_TYPES.CUSTOMER,
+  optionItemLabel: intl.get('customers'),
+  selectItemAction: CustomerUniversalSearchSelectAction,
+  itemSelect: customersToSearch,
+});

src/containers/Customers/utils.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import intl from 'react-intl-universal';
+
+export const transformErrors = (errors) => {
+  if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
+    AppToaster.show({
+      message: intl.get('customer_has_sales_invoices'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'SOME.CUSTOMERS.HAVE.SALES_INVOICES')
+  ) {
+    AppToaster.show({
+      message: intl.get('some_customers_have_sales_invoices'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (errors.find((error) => error.type === 'CUSTOMER_HAS_TRANSACTIONS')) {
+    AppToaster.show({
+      message: intl.get('this_customer_cannot_be_deleted_as_it_is_associated_with_transactions'),
+      intent: Intent.DANGER,
+    });
+  }
+};

src/containers/Customers/withCustomerDetail.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { getCustomerById } from 'store/customers/customers.reducer';
+
+const mapStateToProps = (state, props) => ({
+  customer: getCustomerById(state, props.customerId),
+});
+
+export default connect(mapStateToProps);