chrone: sperate client and server to different repos.

src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js

@@ -0,0 +1,29 @@
+import React, { lazy } from 'react';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { Drawer, DrawerSuspense } from 'components';
+import { compose } from 'utils';
+
+const InvoicesDrawerContent = lazy(() => import('./InvoiceDrawerContent'));
+
+/**
+ *  invoice drawer.
+ */
+function InvoiceDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload: { invoiceId },
+
+}) {
+  
+  return (
+    <Drawer isOpen={isOpen} name={name}>
+      <DrawerSuspense>
+        <InvoicesDrawerContent invoiceId={invoiceId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(InvoiceDrawer);

src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InvoiceDrawerProvider } from './InvoiceDrawerProvider';
+import InvoicePaper from './InvoicePaper';
+
+/**
+ *  Invoice drawer content.
+ */
+export default function InvoiceDrawerContent({
+  // #ownProp
+  invoiceId,
+}) {
+
+  return (
+    <InvoiceDrawerProvider invoiceId={invoiceId}>
+      <InvoicePaper />
+    </InvoiceDrawerProvider>
+  );
+}

src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js

@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from 'react';
+import { useInvoice } from 'hooks/query';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const InvoiceDrawerContext = createContext();
+
+/**
+ * Invoice drawer provider.
+ */
+function InvoiceDrawerProvider({ invoiceId, ...props }) {
+  // Fetch sale invoice details.
+  const {
+    data: { entries, ...invoice },
+    isLoading: isInvoiceLoading,
+  } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+  // Provider payload.
+  const provider = {
+    invoiceId,
+    invoice,
+    entries,
+
+    isInvoiceLoading,
+  };
+
+  return (
+    <DashboardInsider loading={isInvoiceLoading}>
+      <DrawerHeaderContent name={'invoice-drawer'} />
+      <InvoiceDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useInvoiceDrawerContext = () => useContext(InvoiceDrawerContext);
+
+export { InvoiceDrawerProvider, useInvoiceDrawerContext };

src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useInvoiceDrawerContext } from './InvoiceDrawerProvider';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import intl from 'react-intl-universal';
+
+export default function InvoicePaper() {
+  const { invoice, entries } = useInvoiceDrawerContext();
+
+  const propLabels = {
+    labels: {
+      name: intl.get('invoice'),
+      billedTo: intl.get('billed_to'),
+      date: intl.get('invoice_date_'),
+      refNo: intl.get('invoice_no__'),
+      billedFrom: intl.get('billed_from'),
+      amount: intl.get('invoice_amount'),
+      dueDate: intl.get('due_date_'),
+    },
+  };
+
+  const defaultValues = {
+    billedTo: invoice.customer.display_name,
+    date: invoice.invoice_date,
+    amount: invoice.balance,
+    billedFrom: '',
+    dueDate: invoice.due_date,
+    referenceNo: invoice.invoice_no,
+    ...invoice,
+  };
+
+  return (
+    <PaperTemplate
+      labels={propLabels.labels}
+      paperData={defaultValues}
+      entries={entries}
+    />
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+
+import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { If, Icon } from 'components';
+
+/**
+ * Invoice floating actions bar.
+ */
+export default function InvoiceFloatingActions() {
+  const history = useHistory();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Invoice form context.
+  const { setSubmitPayload, invoice } = useInvoiceFormContext();
+
+  // Handle submit & deliver button click.
+  const handleSubmitDeliverBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, deliver: true });
+    submitForm();
+  };
+
+  // Handle submit, deliver & new button click.
+  const handleSubmitDeliverAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit, deliver & continue editing button click.
+  const handleSubmitDeliverContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: true });
+    submitForm();
+  };
+
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, deliver: false });
+    submitForm();
+  };
+
+  // Handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: false });
+    submitForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Deliver ----------- */}
+      <If condition={!invoice || !invoice?.is_delivered}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitDeliverBtnClick}
+            text={<T id={'save_and_deliver'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'deliver_and_new'} />}
+                  onClick={handleSubmitDeliverAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'deliver_continue_editing'} />}
+                  onClick={handleSubmitDeliverContinueEditingBtnClick}
+                />
+              </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>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={invoice && invoice?.is_delivered}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitDeliverBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDeliverAndNewBtnClick}
+                />
+              </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>
+      </If>
+
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js

@@ -0,0 +1,183 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { sumBy, omit, isEmpty } from 'lodash';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import { CLASSES } from 'common/classes';
+import {
+  getCreateInvoiceFormSchema,
+  getEditInvoiceFormSchema,
+} from './InvoiceForm.schema';
+
+import InvoiceFormHeader from './InvoiceFormHeader';
+import InvoiceItemsEntriesEditorField from './InvoiceItemsEntriesEditorField';
+import InvoiceFloatingActions from './InvoiceFloatingActions';
+import InvoiceFormFooter from './InvoiceFormFooter';
+import InvoiceFormDialogs from './InvoiceFormDialogs';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withMediaActions from 'containers/Media/withMediaActions';
+import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { AppToaster } from 'components';
+import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
+import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { transformToEditForm, defaultInvoice, transformErrors } from './utils';
+
+/**
+ * Invoice form.
+ */
+function InvoiceForm({
+  // #withSettings
+  invoiceNextNumber,
+  invoiceNumberPrefix,
+  invoiceIncrementMode,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Invoice form context.
+  const {
+    isNewMode,
+    invoice,
+    estimateId,
+    newInvoice,
+    createInvoiceMutate,
+    editInvoiceMutate,
+    submitPayload,
+  } = useInvoiceFormContext();
+
+  // Invoice number.
+  const invoiceNumber = transactionNumber(
+    invoiceNumberPrefix,
+    invoiceNextNumber,
+  );
+  // Form initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isEmpty(invoice)
+        ? { ...transformToEditForm(invoice), currency_code: base_currency }
+        : {
+            ...defaultInvoice,
+            ...(invoiceIncrementMode && {
+              invoice_no: invoiceNumber,
+            }),
+            entries: orderingLinesIndexes(defaultInvoice.entries),
+            ...newInvoice,
+            currency_code: base_currency,
+          }),
+    }),
+    [invoice, newInvoice, invoiceNumber, invoiceIncrementMode],
+  );
+
+  // Handles form submit.
+  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
+    setSubmitting(true);
+
+    const entries = values.entries.filter(
+      (item) => item.item_id && item.quantity,
+    );
+    const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
+
+    // Throw danger toaster in case total quantity equals zero.
+    if (totalQuantity === 0) {
+      AppToaster.show({
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...omit(values, ['invoice_no', 'invoice_no_manually']),
+      ...(values.invoice_no_manually && {
+        invoice_no: values.invoice_no,
+      }),
+      delivered: submitPayload.deliver,
+      from_estimate_id: estimateId,
+      entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
+    };
+    // Handle the request success.
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_invoice_has_been_created_successfully'
+            : 'the_invoice_has_been_edited_successfully',
+          { number: values.invoice_no },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/invoices');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
+    };
+    if (!isEmpty(invoice)) {
+      editInvoiceMutate([invoice.id, form]).then(onSuccess).catch(onError);
+    } else {
+      createInvoiceMutate(form).then(onSuccess).catch(onError);
+    }
+  };
+
+  const CreateInvoiceFormSchema = getCreateInvoiceFormSchema();
+  const EditInvoiceFormSchema = getEditInvoiceFormSchema();
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_INVOICE,
+      )}
+    >
+      <Formik
+        validationSchema={
+          isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <InvoiceFormHeader />
+          <InvoiceItemsEntriesEditorField />
+          <InvoiceFormFooter />
+          <InvoiceFloatingActions />
+          <InvoiceFormDialogs />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withMediaActions,
+  withSettings(({ invoiceSettings }) => ({
+    invoiceNextNumber: invoiceSettings?.nextNumber,
+    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
+    invoiceIncrementMode: invoiceSettings?.autoIncrement,
+  })),
+  withCurrentOrganization(),
+)(InvoiceForm);

src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.js

@@ -0,0 +1,55 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
+
+const getSchema = () => Yup.object().shape({
+  customer_id: Yup.string()
+    .label(intl.get('customer_name_'))
+    .required(),
+  invoice_date: Yup.date()
+    .required()
+    .label(intl.get('invoice_date_')),
+  due_date: Yup.date()
+    .required()
+    .label(intl.get('due_date_')),
+  invoice_no: Yup.string()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('invoice_no_')),
+  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+  delivered: Yup.boolean(),
+  from_estimate_id: Yup.string(),
+  invoice_message: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('note')),
+  terms_conditions: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('note')),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      quantity: Yup.number()
+        .nullable()
+        .max(DATATYPES_LENGTH.INT_10)
+        .when(['rate'], {
+          is: (rate) => rate,
+          then: Yup.number().required(),
+        }),
+      rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
+      item_id: Yup.number()
+        .nullable()
+        .when(['quantity', 'rate'], {
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
+          then: Yup.number().required(),
+        }),
+      discount: Yup.number().nullable().min(0).max(100),
+      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+    }),
+  ),
+});
+
+export const getCreateInvoiceFormSchema = getSchema;
+export const getEditInvoiceFormSchema = getSchema;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
+import { useFormikContext } from 'formik';
+
+/**
+ * Invoice form dialogs.
+ */
+export default function InvoiceFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  // Update the form once the invoice number form submit confirm.
+  const handleInvoiceNumberFormConfirm = ({ incrementNumber, manually }) => {
+    setFieldValue('invoice_no', incrementNumber || '');
+    setFieldValue('invoice_no_manually', manually);
+  };
+
+  return (
+    <>
+      <InvoiceNumberDialog
+        dialogName={'invoice-number-form'}
+        onConfirm={handleInvoiceNumberFormConfirm}
+      />
+    </>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import { Row, Col, Postbox } from 'components';
+import Dragzone from 'components/Dragzone';
+
+import { inputIntent } from 'utils';
+
+export default function InvoiceFormFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Postbox title={<T id={'invoice_details'} />} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Invoice message --------- */}
+            <FastField name={'invoice_message'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'invoice_message'} />}
+                  className={'form-group--invoice_message'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+
+            {/* --------- Terms and conditions --------- */}
+            <FastField name={'terms_conditions'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'terms_conditions'} />}
+                  className={'form-group--terms_conditions'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+
+          <Col md={4}>
+            <Dragzone
+              initialFiles={[]}
+              // onDrop={handleDropFiles}
+              // onDeleteFile={handleDeleteFile}
+              hint={<T id={'attachments_maximum'} />}
+            />
+          </Col>
+        </Row>
+      </Postbox>
+    </div>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import intl from 'react-intl-universal';
+
+import { CLASSES } from 'common/classes';
+import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
+
+import { getEntriesTotal } from 'containers/Entries/utils';
+import { PageFormBigNumber } from 'components';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'redux';
+
+/**
+ * Invoice form header section.
+ */
+function InvoiceFormHeader({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of invoice entries.
+  const totalDueAmount = useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <InvoiceFormHeaderFields />
+      <PageFormBigNumber
+        label={intl.get('due_amount')}
+        amount={totalDueAmount}
+        currencyCode={base_currency}
+      />
+    </div>
+  );
+}
+export default compose(withCurrentOrganization())(InvoiceFormHeader);

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import {
+  useObserveInvoiceNoSettings,
+  customerNameFieldShouldUpdate,
+} from './utils';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
+import { useInvoiceFormContext } from './InvoiceFormProvider';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { inputIntent, handleDateChange } from 'utils';
+
+/**
+ * Invoice form header fields.
+ */
+function InvoiceFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  invoiceAutoIncrement,
+  invoiceNumberPrefix,
+  invoiceNextNumber,
+}) {
+  // Invoice form context.
+  const { customers } = useInvoiceFormContext();
+
+  // Handle invoice number changing.
+  const handleInvoiceNumberChange = () => {
+    openDialog('invoice-number-form');
+  };
+
+  // Handle invoice no. field blur.
+  const handleInvoiceNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && invoiceAutoIncrement) {
+      openDialog('invoice-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs invoice number settings with form.
+  useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField
+        name={'customer_id'}
+        customers={customers}
+        shouldUpdate={customerNameFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(
+              'form-group--customer-name',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Invoice date ----------- */}
+      <FastField name={'invoice_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--invoice-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('invoice_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Due date ----------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            inline={true}
+            className={classNames('form-group--due-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Invoice number ----------- */}
+      <Field name={'invoice_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_no'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames('form-group--invoice-no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_no" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleInvoiceNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleInvoiceNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T id={'setting_your_auto_generated_invoice_number'} />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ invoiceSettings }) => ({
+    invoiceAutoIncrement: invoiceSettings?.autoIncrement,
+    invoiceNextNumber: invoiceSettings?.nextNumber,
+    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
+  })),
+)(InvoiceFormHeaderFields);

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import 'style/pages/SaleInvoice/PageForm.scss';
+
+import InvoiceForm from './InvoiceForm';
+import { InvoiceFormProvider } from './InvoiceFormProvider';
+
+/**
+ * Invoice form page.
+ */
+export default function InvoiceFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
+
+  return (
+    <InvoiceFormProvider invoiceId={idAsInteger}>
+      <InvoiceForm />
+    </InvoiceFormProvider>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js

@@ -0,0 +1,107 @@
+import React, { createContext, useState } from 'react';
+import { isEmpty, pick } from 'lodash';
+import { useLocation } from 'react-router-dom';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { transformToEditForm, ITEMS_FILTER_ROLES_QUERY } from './utils';
+import {
+  useInvoice,
+  useItems,
+  useCustomers,
+  useCreateInvoice,
+  useEditInvoice,
+  useSettingsInvoices,
+  useEstimate,
+} from 'hooks/query';
+
+const InvoiceFormContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function InvoiceFormProvider({ invoiceId, ...props }) {
+  const { state } = useLocation();
+  const estimateId = state?.action;
+
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  // Fetches the estimate by the given id.
+  const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
+    estimateId,
+    { enabled: !!estimateId },
+  );
+
+  const newInvoice = !isEmpty(estimate)
+    ? transformToEditForm({
+        ...pick(estimate, ['customer_id', 'customer', 'entries']),
+      })
+    : [];
+
+  // Handle fetching the items table based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+    stringified_filter_roles: ITEMS_FILTER_ROLES_QUERY,
+  });
+
+  // Handle fetch customers data table or list
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers({ page_size: 10000 });
+
+  // Handle fetching settings.
+  const { isLoading: isSettingsLoading } = useSettingsInvoices();
+
+  // Create and edit invoice mutations.
+  const { mutateAsync: createInvoiceMutate } = useCreateInvoice();
+  const { mutateAsync: editInvoiceMutate } = useEditInvoice();
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = useState();
+
+  // Detarmines whether the form in new mode.
+  const isNewMode = !invoiceId;
+
+  // Provider payload.
+  const provider = {
+    invoice,
+    items,
+    customers,
+    newInvoice,
+    estimateId,
+    submitPayload,
+
+    isInvoiceLoading,
+    isItemsLoading,
+    isCustomersLoading,
+    isSettingsLoading,
+
+    createInvoiceMutate,
+    editInvoiceMutate,
+    setSubmitPayload,
+    isNewMode,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isInvoiceLoading ||
+        isItemsLoading ||
+        isCustomersLoading ||
+        isEstimateLoading ||
+        isSettingsLoading
+      }
+      name={'invoice-form'}
+    >
+      <InvoiceFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInvoiceFormContext = () => React.useContext(InvoiceFormContext);
+
+export { InvoiceFormProvider, useInvoiceFormContext };

src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
+import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { entriesFieldShouldUpdate } from './utils';
+
+/**
+ * Invoice items entries editor field.
+ */
+export default function InvoiceItemsEntriesEditorField() {
+  const { items } = useInvoiceFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import moment from 'moment';
+import {
+  compose,
+  transformToForm,
+  repeatValue,
+  transactionNumber,
+} from 'utils';
+import { useFormikContext } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import { defaultFastFieldShouldUpdate } from 'utils';
+import intl from 'react-intl-universal';
+import { ERROR } from 'common/errors';
+import { AppToaster } from 'components';
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from 'containers/Entries/utils';
+
+export const MIN_LINES_NUMBER = 4;
+
+// Default invoice entry object.
+export const defaultInvoiceEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: '',
+  quantity: '',
+  description: '',
+  amount: '',
+};
+
+// Default invoice object.
+export const defaultInvoice = {
+  customer_id: '',
+  invoice_date: moment(new Date()).format('YYYY-MM-DD'),
+  due_date: moment().format('YYYY-MM-DD'),
+  delivered: '',
+  invoice_no: '',
+  invoice_no_manually: false,
+  reference_no: '',
+  invoice_message: '',
+  terms_conditions: '',
+  entries: [...repeatValue(defaultInvoiceEntry, MIN_LINES_NUMBER)],
+};
+
+/**
+ * Transform invoice to initial values in edit mode.
+ */
+export function transformToEditForm(invoice) {
+  const initialEntries = [
+    ...invoice.entries.map((invoice) => ({
+      ...transformToForm(invoice, defaultInvoiceEntry),
+    })),
+    ...repeatValue(
+      defaultInvoiceEntry,
+      Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
+    ),
+  ];
+  const entries = compose(
+    ensureEntriesHaveEmptyLine(defaultInvoiceEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(invoice, defaultInvoice),
+    entries,
+  };
+}
+
+/**
+ * Transformes the response errors types.
+ */
+export const transformErrors = (errors, { setErrors }) => {
+  if (errors.some((e) => e.type === ERROR.SALE_INVOICE_NUMBER_IS_EXISTS)) {
+    setErrors({
+      invoice_no: intl.get('sale_invoice_number_is_exists'),
+    });
+  }
+  if (
+    errors.some(
+      ({ type }) =>
+        type === ERROR.SALE_ESTIMATE_IS_ALREADY_CONVERTED_TO_INVOICE,
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('sale_estimate_is_already_converted_to_invoice'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.some((error) => error.type === ERROR.SALE_INVOICE_NO_IS_REQUIRED)
+  ) {
+    setErrors({
+      invoice_no: intl.get('invoice.field.error.invoice_no_required'),
+    });
+  }
+};
+
+/**
+ * Syncs invoice no. settings with form.
+ */
+export const useObserveInvoiceNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const invoiceNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('invoice_no', invoiceNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
+
+/**
+ * Detarmines customer name field when should update.
+ */
+export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.customers !== oldProps.customers ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines invoice entries field when should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+export const ITEMS_FILTER_ROLES_QUERY = JSON.stringify([
+  {
+    index: 1,
+    fieldKey: 'sellable',
+    value: true,
+    condition: '&&',
+    comparator: 'equals',
+  },
+  {
+    index: 2,
+    fieldKey: 'active',
+    value: true,
+    condition: '&&',
+    comparator: 'equals',
+  },
+]);

src/containers/Sales/Invoices/InvoiceUniversalSearch.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { T, Choose, Icon } from 'components';
+
+import { highlightText } from 'utils';
+
+import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+
+/**
+ * Universal search invoice item select action.
+ */
+function InvoiceUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.INVOICE) {
+    openDrawer('invoice-detail-drawer', { invoiceId: resourceId });
+  }
+  return null;
+}
+
+export const InvoiceUniversalSearchSelect = withDrawerActions(
+  InvoiceUniversalSearchSelectComponent,
+);
+
+/**
+ * Invoice status.
+ */
+function InvoiceStatus({ customer }) {
+  return (
+    <Choose>
+      <Choose.When condition={customer.is_fully_paid && customer.is_delivered}>
+        <span class="status status-success">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+
+      <Choose.When condition={customer.is_delivered}>
+        <Choose>
+          <Choose.When condition={customer.is_overdue}>
+            <span className={'status status-warning'}>
+              {intl.get('overdue_by', { overdue: customer.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'status status-warning'}>
+              {intl.get('due_in', { due: customer.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+      </Choose.When>
+      <Choose.Otherwise>
+        <span class="status status--gray">
+          <T id={'draft'} />
+        </span>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Universal search invoice item.
+ */
+export function InvoiceUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(item.text, query)}</div>
+          <span class="bp3-text-muted">
+            {highlightText(item.reference.invoice_no, query)}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_invoice_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">${item.reference.balance}</div>
+          <InvoiceStatus customer={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--invoice'}
+    />
+  );
+}
+
+/**
+ * Transformes invoices to search.
+ * @param {*} invoice
+ * @returns
+ */
+const transformInvoicesToSearch = (invoice) => ({
+  id: invoice.id,
+  text: invoice.customer.display_name,
+  label: invoice.formatted_balance,
+  reference: invoice,
+});
+
+/**
+ * Binds universal search invoice configure.
+ */
+export const universalSearchInvoiceBind = () => ({
+  resourceType: RESOURCES_TYPES.INVOICE,
+  optionItemLabel: intl.get('invoices'),
+  selectItemAction: InvoiceUniversalSearchSelect,
+  itemRenderer: InvoiceUniversalSearchItem,
+  itemSelect: transformInvoicesToSearch,
+});

src/containers/Sales/Invoices/InvoicesAlerts.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import InvoiceDeleteAlert from 'containers/Alerts/Invoices/InvoiceDeleteAlert';
+import InvoiceDeliverAlert from 'containers/Alerts/Invoices/InvoiceDeliverAlert';
+
+/**
+ * Invoices alert.
+ */
+export default function ItemsAlerts() {
+  return (
+    <div>
+      <InvoiceDeleteAlert name={'invoice-delete'} />
+      <InvoiceDeliverAlert name={'invoice-deliver'} />
+    </div>
+  );
+}

src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+
+import { compose, transfromViewsToTabs } from 'utils';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+/**
+ * Invoices views tabs.
+ */
+function InvoiceViewTabs({
+  // #withInvoiceActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesCurrentView,
+}) {
+  const history = useHistory();
+
+  // Invoices list context.
+  const { invoicesViews } = useInvoicesListContext();
+
+  const tabs = transfromViewsToTabs(invoicesViews);
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setInvoicesTableState({ viewSlug });
+  };
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    history.push('/custom_views/invoices/new');
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={invoicesCurrentView}
+          resourceName={'invoices'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesCurrentView: invoicesTableState.viewSlug,
+  })),
+)(InvoiceViewTabs);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import {
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { If, DashboardActionViewsList } from 'components';
+
+import { useRefreshInvoices } from 'hooks/query/invoices';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+import withInvoiceActions from './withInvoiceActions';
+import withInvoices from './withInvoices';
+
+import { compose } from 'utils';
+
+/**
+ * Invoices table actions bar.
+ */
+function InvoiceActionsBar({
+  // #withInvoiceActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesFilterRoles,
+}) {
+  const history = useHistory();
+
+  // Sale invoices list context.
+  const { invoicesViews, invoicesFields } = useInvoicesListContext();
+
+  // Handle new invoice button click.
+  const handleClickNewInvoice = () => {
+    history.push('/invoices/new');
+  };
+
+  // Invoices refresh action.
+  const { refresh } = useRefreshInvoices();
+
+  // Handle views tab change.
+  const handleTabChange = (view) => {
+    setInvoicesTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle click a refresh sale invoices
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'invoices'}
+          views={invoicesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_invoice'} />}
+          onClick={handleClickNewInvoice}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: invoicesFilterRoles,
+            defaultFieldKey: 'invoice_no',
+            fields: invoicesFields,
+            onFilterChange: (filterConditions) => {
+              setInvoicesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton conditionsCount={invoicesFilterRoles.length} />
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesFilterRoles: invoicesTableState.filterRoles,
+  })),
+)(InvoiceActionsBar);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -0,0 +1,158 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import InvoicesEmptyStatus from './InvoicesEmptyStatus';
+
+import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { useInvoicesTableColumns, ActionsMenu } from './components';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Invoices datatable.
+ */
+function InvoicesDataTable({
+  // #withInvoicesActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Invoices list context.
+  const {
+    invoices,
+    pagination,
+    isEmptyStatus,
+    isInvoicesLoading,
+    isInvoicesFetching,
+  } = useInvoicesListContext();
+
+  // Invoices table columns.
+  const columns = useInvoicesTableColumns();
+
+  // Handle delete sale invoice.
+  const handleDeleteInvoice = ({ id }) => {
+    openAlert('invoice-delete', { invoiceId: id });
+  };
+
+  // Handle cancel/confirm invoice deliver.
+  const handleDeliverInvoice = ({ id }) => {
+    openAlert('invoice-deliver', { invoiceId: id });
+  };
+
+  // Handle edit sale invoice.
+  const handleEditInvoice = (invoice) => {
+    history.push(`/invoices/${invoice.id}/edit`);
+  };
+
+  // handle quick payment receive.
+  const handleQuickPaymentReceive = ({ id }) => {
+    openDialog('quick-payment-receive', { invoiceId: id });
+  };
+
+  // Handle view detail invoice.
+  const handleViewDetailInvoice = ({ id }) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: id });
+  };
+
+  // Handle print invoices.
+  const handlePrintInvoice = ({ id }) => {
+    openDialog('invoice-pdf-preview', { invoiceId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.INVOICES);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setInvoicesTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setInvoicesTableState],
+  );
+
+  // Display invoice empty status instead of the table.
+  if (isEmptyStatus) {
+    return <InvoicesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={invoices}
+        loading={isInvoicesLoading}
+        headerLoading={isInvoicesLoading}
+        progressBarLoading={isInvoicesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onDelete: handleDeleteInvoice,
+          onDeliver: handleDeliverInvoice,
+          onEdit: handleEditInvoice,
+          onQuick: handleQuickPaymentReceive,
+          onViewDetails: handleViewDetailInvoice,
+          onPrint: handlePrintInvoice,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withInvoiceActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+)(InvoicesDataTable);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.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 EstimatesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={
+        <p>
+          <T id={'invoices_empty_status_description'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/invoices/new');
+            }}
+          >
+            <T id={'new_sale_invoice'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import 'style/pages/SaleInvoice/List.scss';
+
+import { DashboardContentTable, DashboardPageContent } from 'components';
+import InvoicesActionsBar from './InvoicesActionsBar';
+import { InvoicesListProvider } from './InvoicesListProvider';
+
+import InvoiceViewTabs from './InvoiceViewTabs';
+import InvoicesDataTable from './InvoicesDataTable';
+import InvoicesAlerts from '../InvoicesAlerts';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { transformTableStateToQuery, compose } from 'utils';
+
+/**
+ * Sale invoices list.
+ */
+function InvoicesList({
+  // #withInvoice
+  invoicesTableState,
+  invoicesTableStateChanged,
+
+  // #withInvoicesActions
+  resetInvoicesTableState,
+}) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetInvoicesTableState();
+    },
+    [resetInvoicesTableState],
+  );
+
+  return (
+    <InvoicesListProvider
+      query={transformTableStateToQuery(invoicesTableState)}
+      tableStateChanged={invoicesTableStateChanged}
+    >
+      <InvoicesActionsBar />
+
+      <DashboardPageContent>
+        <InvoiceViewTabs />
+        <InvoicesDataTable />
+      </DashboardPageContent>
+
+      <InvoicesAlerts />
+    </InvoicesListProvider>
+  );
+}
+
+export default compose(
+  withInvoices(({ invoicesTableState, invoicesTableStateChanged }) => ({
+    invoicesTableState,
+    invoicesTableStateChanged,
+  })),
+  withInvoiceActions,
+  withAlertsActions,
+)(InvoicesList);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js

@@ -0,0 +1,65 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
+
+const InvoicesListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function InvoicesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: invoicesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_invoices');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_invoices');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { invoices, pagination, filterMeta },
+    isFetching: isInvoicesFetching,
+    isLoading: isInvoicesLoading,
+  } = useInvoices(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(invoices) && !tableStateChanged && !isInvoicesLoading;
+
+  // Provider payload.
+  const provider = {
+    invoices,
+    pagination,
+
+    invoicesFields: getFieldsFromResourceMeta(resourceMeta.fields),
+    invoicesViews,
+
+    isInvoicesLoading,
+    isInvoicesFetching,
+    isResourceFetching,
+    isResourceLoading,
+    isViewsLoading,
+
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'sales-invoices-list'}
+    >
+      <InvoicesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInvoicesListContext = () => React.useContext(InvoicesListContext);
+
+export { InvoicesListProvider, useInvoicesListContext };

src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import {
+  Intent,
+  Tag,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  ProgressBar,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  AppToaster,
+  Choose,
+  If,
+  Icon,
+} from 'components';
+import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+
+export const statusAccessor = (row) => {
+  return (
+    <div className={'status-accessor'}>
+      <Choose>
+        <Choose.When condition={row.is_fully_paid && row.is_delivered}>
+          <span className={'fully-paid-icon'}>
+            <Icon icon="small-tick" iconSize={18} />
+          </span>
+          <span class="fully-paid-text">
+            <T id={'paid'} />
+          </span>
+        </Choose.When>
+
+        <Choose.When condition={row.is_delivered}>
+          <Choose>
+            <Choose.When condition={row.is_overdue}>
+              <span className={'overdue-status'}>
+                {intl.get('overdue_by', { overdue: row.overdue_days })}
+              </span>
+            </Choose.When>
+            <Choose.Otherwise>
+              <span className={'due-status'}>
+                {intl.get('due_in', { due: row.remaining_days })}
+              </span>
+            </Choose.Otherwise>
+          </Choose>
+
+          <If condition={row.is_partially_paid}>
+            <span class="partial-paid">
+              {intl.get('day_partially_paid', {
+                due: formattedAmount(row.due_amount, row.currency_code),
+              })}
+            </span>
+            <ProgressBar
+              animate={false}
+              stripes={false}
+              intent={Intent.PRIMARY}
+              value={calculateStatus(row.payment_amount, row.balance)}
+            />
+          </If>
+        </Choose.When>
+        <Choose.Otherwise>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+};
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('the_invoice_cannot_be_deleted'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('the_payment_amount_that_received'),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+export function ActionsMenu({
+  payload: {
+    onEdit,
+    onDeliver,
+    onDelete,
+    onDrawer,
+    onQuick,
+    onViewDetails,
+    onPrint,
+  },
+  row: { original },
+}) {
+  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_invoice')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <If condition={!original.is_delivered}>
+        <MenuItem
+          icon={<Icon icon="send" iconSize={16} />}
+          text={intl.get('mark_as_delivered')}
+          onClick={safeCallback(onDeliver, original)}
+        />
+      </If>
+      <If condition={original.is_delivered && !original.is_fully_paid}>
+        <MenuItem
+          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          text={intl.get('add_payment')}
+          onClick={safeCallback(onQuick, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon={'print-16'} iconSize={16} />}
+        text={intl.get('print')}
+        onClick={safeCallback(onPrint, original)}
+      />
+      <MenuItem
+        text={intl.get('delete_invoice')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoices table columns.
+ */
+export function useInvoicesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('invoice_date'),
+        accessor: 'invoice_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'invoice_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 180,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_no',
+        width: 100,
+        className: 'invoice_no',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('balance'),
+        accessor: 'formatted_amount',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'due_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setInvoicesTableState,
+  resetInvoicesTableState
+} from 'store/Invoice/invoices.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
+  resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
+});
+
+export default connect(null, mapDipatchToProps);

src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  getInvoicesTableStateFactory,
+  isInvoicesTableStateChangedFactory,
+} from 'store/Invoice/invoices.selector';
+
+export default (mapState) => {
+  const getInvoicesTableState = getInvoicesTableStateFactory();
+  const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      invoicesTableState: getInvoicesTableState(state, props),
+      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};