From 46f6380fe6098b35c41af0bde4228e5d0197a820 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 4 Nov 2021 15:46:14 +0200
Subject: [PATCH 01/41] feat: add notify via SMS.

---
 src/components/DialogsContainer.js            |  2 +
 .../NotifyContactViaSMSContent.js             | 19 +++++
 .../NotifyContactViaSMSForm.js                | 47 +++++++++++
 .../NotifyContactViaSMSForm.schema.js         | 11 +++
 .../NotifyContactViaSMSFormContent.js         | 16 ++++
 .../NotifyContactViaSMSFormFields.js          | 79 +++++++++++++++++++
 .../NotifyContactViaSMSFormFloatingActions.js | 45 +++++++++++
 .../NotifyContactViaSMSFormProvider.js        | 33 ++++++++
 .../NotifyContactViaSMSDialog/index.js        | 32 ++++++++
 .../InvoiceDetailActionsBar.js                | 11 ++-
 .../Drawers/InvoiceDetailDrawer/utils.js      | 13 ++-
 .../NotifyConactViaSMSDialog.scss             | 32 ++++++++
 12 files changed, 335 insertions(+), 5 deletions(-)
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
 create mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
 create mode 100644 src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss

diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index 1a31006dc..1530c5cf7 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -20,6 +20,7 @@ import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDial
 import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
 import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
 import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
+import NotifyContactViaSMSDialog from '../containers/Dialogs/NotifyContactViaSMSDialog';
 
 /**
  * Dialogs container.
@@ -45,6 +46,7 @@ export default function DialogsContainer() {
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
       <MoneyInDialog dialogName={'money-in'} />
       <MoneyOutDialog dialogName={'money-out'} />
+      <NotifyContactViaSMSDialog dialogName={'notify-via-sms'} />
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
     </div>
   );
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
new file mode 100644
index 000000000..59f725294
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import '../../../style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
+import { NotifyContactViaSMSFormProvider } from './NotifyContactViaSMSFormProvider';
+import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
+
+/**
+ * Notify contact via SMS.
+ */
+export default function NotifyContactViaSMSContent({
+  // #ownProps
+  dialogName,
+}) {
+  return (
+    <NotifyContactViaSMSFormProvider dialogName={dialogName}>
+      <NotifyContactViaSMSForm />
+    </NotifyContactViaSMSFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
new file mode 100644
index 000000000..56b49508f
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+import { CreateNotifyContactViaSMSFormSchema } from './NotifyContactViaSMSForm.schema';
+
+import NotifyContactViaSMSFormContent from './NotifyContactViaSMSFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  name: '',
+  phone: '',
+  note: '',
+};
+
+function NotifyContactViaSMSForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName } = useNotifyContactViaSMSContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
+
+  return (
+    <Formik
+      validationSchema={CreateNotifyContactViaSMSFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={NotifyContactViaSMSFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(NotifyContactViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
new file mode 100644
index 000000000..694f1e73c
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
@@ -0,0 +1,11 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  customer_id: Yup.string().required(),
+  phone: Yup.number().required(),
+  note: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
+});
+
+export const CreateNotifyContactViaSMSFormSchema = Schema;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
new file mode 100644
index 000000000..336306f34
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import NotifyContactViaSMSFormFields from './NotifyContactViaSMSFormFields';
+import NotifyContactViaSMSFormFloatingActions from './NotifyContactViaSMSFormFloatingActions';
+/**
+ * Nofity contact via SMS form content.
+ */
+export default function NotifyContactViaSMSFormContent() {
+  return (
+    <Form>
+      <NotifyContactViaSMSFormFields />
+      <NotifyContactViaSMSFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
new file mode 100644
index 000000000..ca0cf59c8
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useAutofocus } from 'hooks';
+import {
+  Classes,
+  FormGroup,
+  TextArea,
+  Intent,
+  InputGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
+import { FieldRequiredHint } from 'components';
+
+import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
+
+/**
+ * Notify contact via SMS fields.
+ */
+function NotifyContactViaSMSFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Send Notification to ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'notify_via_sms.dialog.send_notification_to'} />}
+            className={classNames('form-group--customer-name', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Phone number ----------- */}
+      <FastField name={'phone'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'phone_number'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="phone" />}
+            className={classNames('form-group--phone', CLASSES.FILL)}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Message Text ----------- */}
+      <FastField name={'note'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'notify_via_sms.dialog.message_text'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--note'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'note'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default NotifyContactViaSMSFormFields;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js
new file mode 100644
index 000000000..8b785bbf1
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function NotifyContactViaSMSFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useNotifyContactViaSMSContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'send'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(
+  NotifyContactViaSMSFormFloatingActions,
+);
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
new file mode 100644
index 000000000..4cdfa1d2e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCustomers } from 'hooks/query';
+
+const NotifyContactViaSMSContext = React.createContext();
+
+/**
+ * Notify contact via SMS provider.
+ */
+function NotifyContactViaSMSFormProvider({ dialogName, ...props }) {
+  // Fetches customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  // State provider.
+  const provider = {
+    dialogName,
+    customers,
+  };
+
+  return (
+    <DialogContent isLoading={isCustomersLoading}>
+      <NotifyContactViaSMSContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useNotifyContactViaSMSContext = () =>
+  React.useContext(NotifyContactViaSMSContext);
+
+export { NotifyContactViaSMSFormProvider, useNotifyContactViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
new file mode 100644
index 000000000..2c99a0985
--- /dev/null
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const NotifyContactViaSMSDialogContent = React.lazy(() =>
+  import('./NotifyContactViaSMSContent'),
+);
+
+/**
+ * Notify contact via SMS.
+ */
+function NotifyContactViaSMSDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Notify via SMS'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--notify-vis-sms'}
+    >
+      <DialogSuspense>
+        <NotifyContactViaSMSDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(NotifyContactViaSMSDialog);
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index b83b8a6ed..5b5a7dd87 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -76,6 +76,10 @@ function InvoiceDetailActionsBar({
   const handleBadDebtInvoice = () => {
     openDialog('write-off-bad-debt', { invoiceId });
   };
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-via-sms', {});
+  };
 
   // Handle cancele write-off invoice.
   const handleCancelBadDebtInvoice = () => {
@@ -117,8 +121,11 @@ function InvoiceDetailActionsBar({
         <NavbarDivider />
         <BadDebtMenuItem
           invoice={invoice}
-          onAlert={handleCancelBadDebtInvoice}
-          onDialog={handleBadDebtInvoice}
+          payload={{
+            onBadDebt: handleBadDebtInvoice,
+            onCancelBadDebt: handleCancelBadDebtInvoice,
+            onNotifyViaSMS: handleNotifyViaSMS,
+          }}
         />
       </NavbarGroup>
     </DashboardActionsBar>
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index 26bd03fab..7fae12971 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -58,7 +58,10 @@ export const useInvoiceReadonlyEntriesColumns = () =>
     [],
   );
 
-export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
+export const BadDebtMenuItem = ({
+  invoice,
+  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
+}) => {
   return (
     <Popover
       minimal={true}
@@ -73,16 +76,20 @@ export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
             <Choose.When condition={!invoice.is_writtenoff}>
               <MenuItem
                 text={<T id={'bad_debt.dialog.bad_debt'} />}
-                onClick={onDialog}
+                onClick={onBadDebt}
               />
             </Choose.When>
             <Choose.When condition={invoice.is_writtenoff}>
               <MenuItem
-                onClick={onAlert}
+                onClick={onCancelBadDebt}
                 text={<T id={'bad_debt.dialog.cancel_bad_debt'} />}
               />
             </Choose.When>
           </Choose>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
         </Menu>
       }
     >
diff --git a/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
new file mode 100644
index 000000000..27b7f2a8c
--- /dev/null
+++ b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
@@ -0,0 +1,32 @@
+.dialog--notify-vis-sms {
+  max-width: 350px;
+  max-height: 450px;
+
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+      margin-top: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+
+    .form-group {
+      &--note {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

From 17a4744e587b4ef19ab2ac3252cc56aa30a74d0c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 4 Nov 2021 16:55:37 +0200
Subject: [PATCH 02/41] feat: add SMS message template.

---
 .../DataTableCells/SwitchFieldCell.js         | 43 ++++++++++++
 src/components/DataTableCells/TextAreaCell.js | 42 ++++++++++++
 src/components/DataTableCells/index.js        |  8 ++-
 src/config/preferencesMenu.js                 | 21 +++---
 .../SMSMessageTemplateFloatingAction.js       | 28 ++++++++
 .../SMSMessageTemplateForm.js                 | 46 +++++++++++++
 .../SMSMessageTemplateForm.schema.js          | 19 ++++++
 .../SMSMessageTemplateFormBody.js             | 23 +++++++
 .../SMSMessageTemplateFormContent.js          | 16 +++++
 .../SMSMessageTemplateProvider.js             | 42 ++++++++++++
 .../SMSMessageTemplatesEntriesTable.js        | 68 +++++++++++++++++++
 .../Preferences/SMSMessageTemplates/index.js  | 14 ++++
 src/lang/en/index.json                        | 18 +++--
 src/routes/preferences.js                     |  6 ++
 14 files changed, 378 insertions(+), 16 deletions(-)
 create mode 100644 src/components/DataTableCells/SwitchFieldCell.js
 create mode 100644 src/components/DataTableCells/TextAreaCell.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
 create mode 100644 src/containers/Preferences/SMSMessageTemplates/index.js

diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js
new file mode 100644
index 000000000..0e9635439
--- /dev/null
+++ b/src/components/DataTableCells/SwitchFieldCell.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
+
+const SwitchEditableCell = ({
+  row: { index, original },
+  column: { id, switchProps },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  const onChange = (e) => {
+    const newValue = e.target.checked;
+
+    setValue(newValue);
+    payload.updateData(index, id, newValue);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Switch
+        value={value}
+        onChange={onChange}
+        checked={initialValue}
+        minimal={true}
+        className="ml2"
+        {...switchProps}
+      />
+    </FormGroup>
+  );
+};
+export default SwitchEditableCell;
diff --git a/src/components/DataTableCells/TextAreaCell.js b/src/components/DataTableCells/TextAreaCell.js
new file mode 100644
index 000000000..c8ff97a0c
--- /dev/null
+++ b/src/components/DataTableCells/TextAreaCell.js
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
+
+const TextAreaEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <TextArea
+        growVertically={true}
+        large={true}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        fill={true}
+      />
+    </FormGroup>
+  );
+};
+
+export default TextAreaEditableCell;
diff --git a/src/components/DataTableCells/index.js b/src/components/DataTableCells/index.js
index 2a0688ad2..fed349eed 100644
--- a/src/components/DataTableCells/index.js
+++ b/src/components/DataTableCells/index.js
@@ -6,7 +6,9 @@ import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 import NumericInputCell from './NumericInputCell';
-import CheckBoxFieldCell from './CheckBoxFieldCell'
+import CheckBoxFieldCell from './CheckBoxFieldCell';
+import SwitchFieldCell from './SwitchFieldCell';
+import TextAreaCell from './TextAreaCell';
 
 export {
   AccountsListFieldCell,
@@ -18,5 +20,7 @@ export {
   DivFieldCell,
   EmptyDiv,
   NumericInputCell,
-  CheckBoxFieldCell
+  CheckBoxFieldCell,
+  SwitchFieldCell,
+  TextAreaCell,
 };
diff --git a/src/config/preferencesMenu.js b/src/config/preferencesMenu.js
index 3e1b981dd..56066043d 100644
--- a/src/config/preferencesMenu.js
+++ b/src/config/preferencesMenu.js
@@ -1,29 +1,34 @@
-import React  from 'react'
-import {  FormattedMessage as T } from 'components';
+import React from 'react';
+import { FormattedMessage as T } from 'components';
 
 export default [
   {
-    text: <T id={'general'}/>,
+    text: <T id={'general'} />,
     disabled: false,
     href: '/preferences/general',
   },
   {
-    text: <T id={'users'}/>,
+    text: <T id={'users'} />,
     href: '/preferences/users',
   },
   {
-    text: <T id={'currencies'}/>,
-   
+    text: <T id={'currencies'} />,
+
     href: '/preferences/currencies',
   },
   {
-    text: <T id={'accountant'}/>,
+    text: <T id={'accountant'} />,
     disabled: false,
     href: '/preferences/accountant',
   },
   {
-    text: <T id={'items'}/>,
+    text: <T id={'items'} />,
     disabled: false,
     href: '/preferences/items',
   },
+  {
+    text: <T id={'sms_message'} />,
+    disabled: false,
+    href: '/preferences/sms-message',
+  },
 ];
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
new file mode 100644
index 000000000..e989d4dfc
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+
+function SMSMessageTemplateFloatingAction() {
+  const history = useHistory();
+  const { isSubmitting } = useFormikContext();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <div className={'card__footer'}>
+      <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+        <T id={'save'} />
+      </Button>
+      <Button onClick={handleCloseClick} disabled={isSubmitting}>
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
+
+export default SMSMessageTemplateFloatingAction;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
new file mode 100644
index 000000000..ead8f137c
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+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 { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
+
+import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
+
+export const defaultInitialValues = {
+  entries: [
+    {
+      notification: '',
+      service: '',
+      message: '',
+      auto: true,
+      switch: true,
+    },
+  ],
+};
+
+export default function SMSMessageTemplateForm({}) {
+  // Form initial values.
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles form submit.
+  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
+
+  return (
+    <div
+      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_STRIP_STYLE)}
+    >
+      <Formik
+        validationSchema={CreateSMSMessageTemplateSchema}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        component={SMSMessageTemplateFormContent}
+      />
+    </div>
+  );
+}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
new file mode 100644
index 000000000..584e342e5
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
+
+const Schema = Yup.object().shape({
+
+  entries: Yup.array().of(
+    Yup.object().shape({
+      notification: Yup.string().nullable(),
+      service: Yup.number().nullable(),
+      message: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
+      auto:Yup.boolean(),
+      switch:Yup.boolean(),
+     
+    }),
+  ),
+})
+export const CreateSMSMessageTemplateSchema = Schema;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
new file mode 100644
index 000000000..90067fb43
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { FastField } from 'formik';
+
+import SMSMessageTemplatesEntriesTable from './SMSMessageTemplatesEntriesTable';
+
+export default function SMSMessageTemplateFormBody() {
+  return (
+    <FastField name={'entries'}>
+      {({
+        form: { values, setFieldValue },
+        field: { value },
+        meta: { error, touched },
+      }) => (
+        <SMSMessageTemplatesEntriesTable
+          entries={value}
+          onUpdateData={(newEntries) => {
+            setFieldValue('entries', newEntries);
+          }}
+        />
+      )}
+    </FastField>
+  );
+}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
new file mode 100644
index 000000000..217361a35
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import SMSMessageTemplateFormBody from './SMSMessageTemplateFormBody';
+import SMSMessageTemplateFloatingAction from './SMSMessageTemplateFloatingAction';
+
+export default function SMSMessageTemplateFormContent() {
+  return (
+    <Form>
+      <SMSMessageTemplateFormBody />
+      <SMSMessageTemplateFloatingAction />
+    </Form>
+  );
+}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
new file mode 100644
index 000000000..b90df0a4e
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { useSettings, useSaveSettings } from 'hooks/query';
+
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const SMSMessageTemplateContext = React.createContext();
+
+/**
+ * SMS message template provider.
+ */
+function SMSMessageTemplateProvider({ ...props }) {
+  
+  //Fetches Organization Settings.
+  const { isLoading: isSettingsLoading } = useSettings();
+
+  // Provider state.
+  const provider = {};
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isSettingsLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <SMSMessageTemplateContext.Provider value={provider} {...props} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const useSMSMessageTemplateContext = () =>
+  React.useContext(SMSMessageTemplateContext);
+
+export { SMSMessageTemplateProvider, useSMSMessageTemplateContext };
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
new file mode 100644
index 000000000..67ed04c43
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  InputGroupCell,
+  TextAreaCell,
+  SwitchFieldCell,
+} from 'components/DataTableCells';
+import { DataTableEditable } from 'components';
+import { compose, updateTableCell } from 'utils';
+
+export default function SMSMessageTemplatesEntriesTable({
+  onUpdateData,
+  entries,
+}) {
+  const columns = React.useMemo(() => [
+    {
+      Header: intl.get('sms_message_template.label_Notification'),
+      accessor: 'notification',
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'service',
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('sms_message_template.label_mesage'),
+      accessor: 'message',
+      // Cell: TextAreaCell,
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('sms_message_template.label_auto'),
+      accessor: 'auto',
+      Cell: SwitchFieldCell,
+      disableSortBy: true,
+      disableResizing: true,
+      width: '120',
+    },
+  ]);
+
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
diff --git a/src/containers/Preferences/SMSMessageTemplates/index.js b/src/containers/Preferences/SMSMessageTemplates/index.js
new file mode 100644
index 000000000..3a086ca9b
--- /dev/null
+++ b/src/containers/Preferences/SMSMessageTemplates/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { SMSMessageTemplateProvider } from './SMSMessageTemplateProvider';
+import SMSMessageTemplateForm from './SMSMessageTemplateForm';
+
+/**
+ * SMS message template.
+ */
+export default function SMSMessageTemplates() {
+  return (
+    <SMSMessageTemplateProvider>
+      <SMSMessageTemplateForm />
+    </SMSMessageTemplateProvider>
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 058cfe230..a025575bd 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1407,7 +1407,6 @@
   "cash_flow_money_out": "Money Out",
   "cash_flow_transaction.switch_item": "Transactions {value}",
   "cash_flow_transaction.balance_in_bigcapital": "Balance in Bigcapital",
-
   "AR_aging_summary.filter_customers.all_customers": "All customers",
   "AR_aging_summary.filter_customers.all_customers.hint": "All customers, include that ones have zero-balance.",
   "AR_aging_summary.filter_customers.without_zero_balance": "Customers without zero balance",
@@ -1425,8 +1424,15 @@
   "bad_debt.dialog.bad_debt": "Bad debt",
   "bad_debt.dialog.cancel_bad_debt": "Cancel bad debt",
   "bad_debt.dialog.header_note": "The seller can charge the amount of an invoice to the bad debt expense account when it is certain that the invoice will not be paid.",
-  "bad_debt.dialog.success_message":"The given sale invoice has been writte-off successfully.",
-  "bad_debt.cancel_alert.success_message":"The given sale invoice has been canceled write-off successfully.",
-  "bad_debt.cancel_alert.message": "Are you sure you want to write off this invoice?"
- 
-}
+  "bad_debt.dialog.success_message": "The given sale invoice has been writte-off successfully.",
+  "bad_debt.cancel_alert.success_message": "The given sale invoice has been canceled write-off successfully.",
+  "bad_debt.cancel_alert.message": "Are you sure you want to write off this invoice?",
+  "notify_via_sms.dialog.send_notification_to":"Send notification to",
+  "notify_via_sms.dialog.message_text":"Message Text",
+  "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
+  "send": "Send",
+  "sms_message_template.label_mesage":"Message",
+  "sms_message_template.label_Notification":"Notification",
+  "sms_message_template.label_auto":"Auto",
+  "sms_message":"SMS message"
+}
\ No newline at end of file
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index cc539a664..080b747c1 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -4,6 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
 import Item from 'containers/Preferences/Item';
+import SMSMessageTemplates from '../containers/Preferences/SMSMessageTemplates';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
 
 const BASE_URL = '/preferences';
@@ -34,6 +35,11 @@ export default [
     component: Item,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/sms-message`,
+    component: SMSMessageTemplates,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/`,
     component: DefaultRoute,

From 2c71d0751225b02cbf3fdc1b4c06cb39f33e356c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 4 Nov 2021 17:05:38 +0200
Subject: [PATCH 03/41] feat: add localization.

---
 .../SMSMessageTemplateForm.js                   | 17 ++++++++++++++---
 src/lang/en/index.json                          |  1 +
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
index ead8f137c..439272f65 100644
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
+++ b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
@@ -3,12 +3,13 @@ import { Formik, Form } from 'formik';
 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 { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
-
 import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
 
 export const defaultInitialValues = {
   entries: [
@@ -22,12 +23,21 @@ export const defaultInitialValues = {
   ],
 };
 
-export default function SMSMessageTemplateForm({}) {
+function SMSMessageTemplateForm({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
   // Form initial values.
   const initialValues = {
     ...defaultInitialValues,
   };
 
+  React.useEffect(() => {
+    changePreferencesPageTitle(
+      intl.get('sms_message_template.label.sms_messages_template'),
+    );
+  }, [changePreferencesPageTitle]);
+
   // Handles form submit.
   const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
 
@@ -44,3 +54,4 @@ export default function SMSMessageTemplateForm({}) {
     </div>
   );
 }
+export default compose(withDashboardActions)(SMSMessageTemplateForm);
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index a025575bd..bcb9fc4a7 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1431,6 +1431,7 @@
   "notify_via_sms.dialog.message_text":"Message Text",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
   "send": "Send",
+  "sms_message_template.label.sms_messages_template":"SMS Messages template",
   "sms_message_template.label_mesage":"Message",
   "sms_message_template.label_Notification":"Notification",
   "sms_message_template.label_auto":"Auto",

From 2bd4c5f7249fbac97aa9d209e54adf16455d2de1 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 6 Nov 2021 00:08:25 +0200
Subject: [PATCH 04/41] fix: SMS message templates.

---
 .../SMSMessageTemplateFloatingAction.js       | 28 --------
 .../SMSMessageTemplateForm.js                 | 57 ----------------
 .../SMSMessageTemplateForm.schema.js          | 19 ------
 .../SMSMessageTemplateFormBody.js             | 23 -------
 .../SMSMessageTemplateFormContent.js          | 16 -----
 .../SMSMessageTemplatesEntriesTable.js        | 68 -------------------
 .../Preferences/SMSMessageTemplates/index.js  | 14 ----
 .../SMSMessagesTemplatesDataTable.js          | 54 +++++++++++++++
 .../SMSMessagesTemplatesProvider.js}          | 21 ++----
 .../SMSMessagesTemplates/components.js        | 40 +++++++++++
 .../Preferences/SMSMessagesTemplates/index.js | 15 ++++
 src/routes/preferences.js                     |  4 +-
 12 files changed, 118 insertions(+), 241 deletions(-)
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
 delete mode 100644 src/containers/Preferences/SMSMessageTemplates/index.js
 create mode 100644 src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
 rename src/containers/Preferences/{SMSMessageTemplates/SMSMessageTemplateProvider.js => SMSMessagesTemplates/SMSMessagesTemplatesProvider.js} (51%)
 create mode 100644 src/containers/Preferences/SMSMessagesTemplates/components.js
 create mode 100644 src/containers/Preferences/SMSMessagesTemplates/index.js

diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
deleted file mode 100644
index e989d4dfc..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { useFormikContext } from 'formik';
-
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { useHistory } from 'react-router-dom';
-
-function SMSMessageTemplateFloatingAction() {
-  const history = useHistory();
-  const { isSubmitting } = useFormikContext();
-
-  const handleCloseClick = () => {
-    history.go(-1);
-  };
-
-  return (
-    <div className={'card__footer'}>
-      <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
-        <T id={'save'} />
-      </Button>
-      <Button onClick={handleCloseClick} disabled={isSubmitting}>
-        <T id={'close'} />
-      </Button>
-    </div>
-  );
-}
-
-export default SMSMessageTemplateFloatingAction;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
deleted file mode 100644
index 439272f65..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
-import { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
-import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
-
-export const defaultInitialValues = {
-  entries: [
-    {
-      notification: '',
-      service: '',
-      message: '',
-      auto: true,
-      switch: true,
-    },
-  ],
-};
-
-function SMSMessageTemplateForm({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
-  // Form initial values.
-  const initialValues = {
-    ...defaultInitialValues,
-  };
-
-  React.useEffect(() => {
-    changePreferencesPageTitle(
-      intl.get('sms_message_template.label.sms_messages_template'),
-    );
-  }, [changePreferencesPageTitle]);
-
-  // Handles form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
-
-  return (
-    <div
-      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_STRIP_STYLE)}
-    >
-      <Formik
-        validationSchema={CreateSMSMessageTemplateSchema}
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-        component={SMSMessageTemplateFormContent}
-      />
-    </div>
-  );
-}
-export default compose(withDashboardActions)(SMSMessageTemplateForm);
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
deleted file mode 100644
index 584e342e5..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-import { isBlank } from 'utils';
-
-const Schema = Yup.object().shape({
-
-  entries: Yup.array().of(
-    Yup.object().shape({
-      notification: Yup.string().nullable(),
-      service: Yup.number().nullable(),
-      message: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
-      auto:Yup.boolean(),
-      switch:Yup.boolean(),
-     
-    }),
-  ),
-})
-export const CreateSMSMessageTemplateSchema = Schema;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
deleted file mode 100644
index 90067fb43..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { FastField } from 'formik';
-
-import SMSMessageTemplatesEntriesTable from './SMSMessageTemplatesEntriesTable';
-
-export default function SMSMessageTemplateFormBody() {
-  return (
-    <FastField name={'entries'}>
-      {({
-        form: { values, setFieldValue },
-        field: { value },
-        meta: { error, touched },
-      }) => (
-        <SMSMessageTemplatesEntriesTable
-          entries={value}
-          onUpdateData={(newEntries) => {
-            setFieldValue('entries', newEntries);
-          }}
-        />
-      )}
-    </FastField>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
deleted file mode 100644
index 217361a35..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
-import SMSMessageTemplateFormBody from './SMSMessageTemplateFormBody';
-import SMSMessageTemplateFloatingAction from './SMSMessageTemplateFloatingAction';
-
-export default function SMSMessageTemplateFormContent() {
-  return (
-    <Form>
-      <SMSMessageTemplateFormBody />
-      <SMSMessageTemplateFloatingAction />
-    </Form>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
deleted file mode 100644
index 67ed04c43..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import {
-  InputGroupCell,
-  TextAreaCell,
-  SwitchFieldCell,
-} from 'components/DataTableCells';
-import { DataTableEditable } from 'components';
-import { compose, updateTableCell } from 'utils';
-
-export default function SMSMessageTemplatesEntriesTable({
-  onUpdateData,
-  entries,
-}) {
-  const columns = React.useMemo(() => [
-    {
-      Header: intl.get('sms_message_template.label_Notification'),
-      accessor: 'notification',
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('service'),
-      accessor: 'service',
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('sms_message_template.label_mesage'),
-      accessor: 'message',
-      // Cell: TextAreaCell,
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('sms_message_template.label_auto'),
-      accessor: 'auto',
-      Cell: SwitchFieldCell,
-      disableSortBy: true,
-      disableResizing: true,
-      width: '120',
-    },
-  ]);
-
-  const handleUpdateData = React.useCallback(
-    (rowIndex, columnId, value) => {
-      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
-        entries,
-      );
-      onUpdateData(newRows);
-    },
-    [onUpdateData, entries],
-  );
-
-  return (
-    <DataTableEditable
-      columns={columns}
-      data={entries}
-      payload={{
-        errors: [],
-        updateData: handleUpdateData,
-      }}
-    />
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/index.js b/src/containers/Preferences/SMSMessageTemplates/index.js
deleted file mode 100644
index 3a086ca9b..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { SMSMessageTemplateProvider } from './SMSMessageTemplateProvider';
-import SMSMessageTemplateForm from './SMSMessageTemplateForm';
-
-/**
- * SMS message template.
- */
-export default function SMSMessageTemplates() {
-  return (
-    <SMSMessageTemplateProvider>
-      <SMSMessageTemplateForm />
-    </SMSMessageTemplateProvider>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
new file mode 100644
index 000000000..ad5b8682c
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  DataTableEditable,
+  DataTable,
+  DashboardContentTable,
+} from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { useSMSMessagesTemplatesTableColumns } from './components';
+
+import { compose } from 'utils';
+
+function SMSMessagesTemplatesDataTable({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  // Table columns.
+  const columns = useSMSMessagesTemplatesTableColumns();
+
+  React.useEffect(() => {
+    changePreferencesPageTitle(
+      intl.get('sms_message_template.label.sms_messages_template'),
+    );
+  }, [changePreferencesPageTitle]);
+
+  const DATA = [
+    {
+      notification: 'notification',
+      service: 'service',
+      message: 'message',
+      auto: true,
+    },
+    {
+      notification: 'notification',
+      service: 'service',
+      message: 'message',
+      auto: false,
+    },
+  ];
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={[]}
+      // loading={}
+      // progressBarLoading={}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+    />
+  );
+}
+export default compose(withDashboardActions)(SMSMessagesTemplatesDataTable);
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
similarity index 51%
rename from src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
rename to src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
index b90df0a4e..474ea97b1 100644
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
+++ b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
@@ -1,17 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { useSettings, useSaveSettings } from 'hooks/query';
+import { useSettings } from 'hooks/query';
 
-import PreferencesPageLoader from '../PreferencesPageLoader';
-
-const SMSMessageTemplateContext = React.createContext();
+const SMSMessagesTemplatesContext = React.createContext();
 
 /**
- * SMS message template provider.
+ * SMS message templates provider.
  */
-function SMSMessageTemplateProvider({ ...props }) {
-  
+function SMSMessagesTemplatesProvider({ ...props }) {
   //Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();
 
@@ -26,17 +23,13 @@ function SMSMessageTemplateProvider({ ...props }) {
       )}
     >
       <div className={classNames(CLASSES.CARD)}>
-        {isSettingsLoading ? (
-          <PreferencesPageLoader />
-        ) : (
-          <SMSMessageTemplateContext.Provider value={provider} {...props} />
-        )}
+        <SMSMessagesTemplatesContext.Provider value={provider} {...props} />
       </div>
     </div>
   );
 }
 
 const useSMSMessageTemplateContext = () =>
-  React.useContext(SMSMessageTemplateContext);
+  React.useContext(SMSMessagesTemplatesContext);
 
-export { SMSMessageTemplateProvider, useSMSMessageTemplateContext };
+export { SMSMessagesTemplatesProvider, useSMSMessageTemplateContext };
diff --git a/src/containers/Preferences/SMSMessagesTemplates/components.js b/src/containers/Preferences/SMSMessagesTemplates/components.js
new file mode 100644
index 000000000..5824a65c2
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/components.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import {
+  InputGroupCell,
+  TextAreaCell,
+  SwitchFieldCell,
+} from 'components/DataTableCells';
+
+export function useSMSMessagesTemplatesTableColumns() {
+  return React.useMemo(() => [
+    {
+      Header: intl.get('sms_message_template.label_Notification'),
+      accessor: 'notification',
+      className: 'notification',
+      width: '150',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'service',
+      className: 'service',
+      width: '100',
+    },
+    {
+      Header: intl.get('sms_message_template.label_mesage'),
+      accessor: 'message',
+      className: 'message',
+      width: '180',
+    },
+    {
+      Header: intl.get('sms_message_template.label_auto'),
+      accessor: 'auto',
+      Cell: SwitchFieldCell,
+      className: 'auto',
+      disableSortBy: true,
+      disableResizing: true,
+      width: '80',
+    },
+  ]);
+}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/index.js b/src/containers/Preferences/SMSMessagesTemplates/index.js
new file mode 100644
index 000000000..44f4df09b
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { SMSMessagesTemplatesProvider } from './SMSMessagesTemplatesProvider';
+import SMSMessagesTemplatesDataTable from './SMSMessagesTemplatesDataTable';
+
+/**
+ * SMS messages templates.
+ */
+export default function SMSMessagesTemplates() {
+  return (
+    <SMSMessagesTemplatesProvider>
+      <SMSMessagesTemplatesDataTable />
+    </SMSMessagesTemplatesProvider>
+  );
+}
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 080b747c1..75b0990fe 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -4,7 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
 import Item from 'containers/Preferences/Item';
-import SMSMessageTemplates from '../containers/Preferences/SMSMessageTemplates';
+import SMSMessagesTemplates from '../containers/Preferences/SMSMessagesTemplates';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
 
 const BASE_URL = '/preferences';
@@ -37,7 +37,7 @@ export default [
   },
   {
     path: `${BASE_URL}/sms-message`,
-    component: SMSMessageTemplates,
+    component: SMSMessagesTemplates,
     exact: true,
   },
   {

From d26ef01afccaabedfae00e373eb7b12d5e37bc9f Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 6 Nov 2021 21:47:17 +0200
Subject: [PATCH 05/41] feat: notify by SMS.

---
 src/components/MoreMenutItems.js              | 36 +++++++++++++
 src/components/MoreVertMenutItems.js          | 46 ----------------
 src/components/index.js                       |  6 +--
 .../NotifyContactViaSMSContent.js             |  8 ++-
 .../NotifyContactViaSMSForm.js                | 39 +++++++++++---
 .../NotifyContactViaSMSForm.schema.js         |  6 +--
 .../NotifyContactViaSMSFormFields.js          | 32 +++++++----
 .../NotifyContactViaSMSFormProvider.js        | 32 +++++++----
 .../NotifyContactViaSMSDialog/index.js        | 13 +++--
 .../InvoiceDetailActionsBar.js                | 16 +-----
 .../Drawers/InvoiceDetailDrawer/utils.js      |  4 +-
 src/hooks/query/estimates.js                  | 35 ++++++++++++
 src/hooks/query/invoices.js                   | 54 ++++++++++++++++---
 src/hooks/query/paymentReceives.js            | 31 +++++++++++
 src/hooks/query/receipts.js                   | 31 ++++++++++-
 src/hooks/query/settings.js                   | 15 ++++++
 src/hooks/query/types.js                      |  9 ++++
 17 files changed, 307 insertions(+), 106 deletions(-)
 create mode 100644 src/components/MoreMenutItems.js
 delete mode 100644 src/components/MoreVertMenutItems.js

diff --git a/src/components/MoreMenutItems.js b/src/components/MoreMenutItems.js
new file mode 100644
index 000000000..2201a7206
--- /dev/null
+++ b/src/components/MoreMenutItems.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+function MoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
+        </Menu>
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}
+
+export default MoreMenuItems;
diff --git a/src/components/MoreVertMenutItems.js b/src/components/MoreVertMenutItems.js
deleted file mode 100644
index 9282f33c1..000000000
--- a/src/components/MoreVertMenutItems.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  PopoverInteractionKind,
-  MenuItem,
-  Position,
-} from '@blueprintjs/core';
-
-import { Select } from '@blueprintjs/select';
-import { Icon } from 'components';
-
-function MoreVertMenutItems({ text, items, onItemSelect, buttonProps }) {
-  // Menu items renderer.
-  const itemsRenderer = (item, { handleClick, modifiers, query }) => (
-    <MenuItem text={item.name} label={item.label} onClick={handleClick} />
-  );
-  const handleMenuSelect = (type) => {
-    onItemSelect && onItemSelect(type);
-  };
-
-  return (
-    <Select
-      items={items}
-      itemRenderer={itemsRenderer}
-      onItemSelect={handleMenuSelect}
-      popoverProps={{
-        minimal: true,
-        position: Position.BOTTOM_LEFT,
-        interactionKind: PopoverInteractionKind.CLICK,
-        modifiers: {
-          offset: { offset: '0, 4' },
-        },
-      }}
-      filterable={false}
-    >
-      <Button
-        text={text}
-        icon={<Icon icon={'more-vert'} iconSize={16} />}
-        minimal={true}
-        {...buttonProps}
-      />
-    </Select>
-  );
-}
-
-export default MoreVertMenutItems;
diff --git a/src/components/index.js b/src/components/index.js
index aa156307e..8d38aefcf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -61,7 +61,7 @@ import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
-import MoreVertMenutItems from './MoreVertMenutItems';
+import MoreMenuItems from './MoreMenutItems';
 
 export * from './Menu';
 export * from './AdvancedFilter/AdvancedFilterDropdown';
@@ -83,7 +83,7 @@ export * from './MultiSelectTaggable';
 export * from './Utils/FormatNumber';
 export * from './Utils/FormatDate';
 export * from './BankAccounts';
-export * from './IntersectionObserver'
+export * from './IntersectionObserver';
 export * from './Datatable/CellForceWidth';
 export * from './Button';
 export * from './IntersectionObserver';
@@ -158,5 +158,5 @@ export {
   ItemsMultiSelect,
   Card,
   AvaterCell,
-  MoreVertMenutItems,
+  MoreMenuItems
 };
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
index 59f725294..669cb9527 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../../../style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
+import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
 import { NotifyContactViaSMSFormProvider } from './NotifyContactViaSMSFormProvider';
 import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
 
@@ -10,9 +10,13 @@ import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
 export default function NotifyContactViaSMSContent({
   // #ownProps
   dialogName,
+  invoice,
 }) {
   return (
-    <NotifyContactViaSMSFormProvider dialogName={dialogName}>
+    <NotifyContactViaSMSFormProvider
+      invoiceId={invoice}
+      dialogName={dialogName}
+    >
       <NotifyContactViaSMSForm />
     </NotifyContactViaSMSFormProvider>
   );
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
index 56b49508f..c411563c1 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
@@ -13,27 +13,54 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
 
-import { compose } from 'utils';
+import { transformToForm, compose } from 'utils';
 
 const defaultInitialValues = {
-  name: '',
-  phone: '',
-  note: '',
+  customer_name: '',
+  customer_personal_phone: '',
+  sms_message: '',
 };
 
 function NotifyContactViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { dialogName } = useNotifyContactViaSMSContext();
+  const {
+    invoiceId,
+    invoiceSMSDetail,
+    dialogName,
+    createNotifyInvoiceBySMSMutate,
+  } = useNotifyContactViaSMSContext();
 
   // Initial form values
   const initialValues = {
     ...defaultInitialValues,
+    ...transformToForm(invoiceSMSDetail, defaultInitialValues),
   };
 
   // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('notify_via_sms.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    createNotifyInvoiceBySMSMutate([invoiceId, values])
+      .then(onSuccess)
+      .catch(onError);
+  };
 
   return (
     <Formik
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
index 694f1e73c..b624980db 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
@@ -3,9 +3,9 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  customer_id: Yup.string().required(),
-  phone: Yup.number().required(),
-  note: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
+  customer_name: Yup.string().required(),
+  customer_personal_phone: Yup.number().required(),
+  sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
 });
 
 export const CreateNotifyContactViaSMSFormSchema = Schema;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
index ca0cf59c8..baf1f7a04 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
@@ -24,48 +24,60 @@ function NotifyContactViaSMSFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/* ----------- Send Notification to ----------- */}
-      <FastField name={'customer_id'}>
+      <FastField name={'customer_name'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'notify_via_sms.dialog.send_notification_to'} />}
             className={classNames('form-group--customer-name', CLASSES.FILL)}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_id'} />}
+            helperText={<ErrorMessage name={'customer_name'} />}
           >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              disabled={true}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>
 
       {/* ----------- Phone number ----------- */}
-      <FastField name={'phone'}>
+      <FastField name={'customer_personal_phone'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'phone_number'} />}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="phone" />}
-            className={classNames('form-group--phone', CLASSES.FILL)}
+            helperText={<ErrorMessage name="customer_personal_phone" />}
+            className={classNames(
+              'form-group--customer_personal_phone',
+              CLASSES.FILL,
+            )}
           >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              disabled={true}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>
 
       {/* ----------- Message Text ----------- */}
-      <FastField name={'note'}>
+      <FastField name={'sms_message'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'notify_via_sms.dialog.message_text'} />}
             labelInfo={<FieldRequiredHint />}
-            className={'form-group--note'}
+            className={'form-group--sms_message'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'note'} />}
+            helperText={<ErrorMessage name={'sms_message'} />}
           >
             <TextArea
               growVertically={true}
               large={true}
+              disabled={true}
               intent={inputIntent({ error, touched })}
               {...field}
             />
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
index 4cdfa1d2e..962ac8921 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
@@ -1,27 +1,41 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useCustomers } from 'hooks/query';
+import {
+  useInvoice,
+  useCreateNotifyInvoiceBySMS,
+  useInvocieSMSDetails,
+} from 'hooks/query';
 
 const NotifyContactViaSMSContext = React.createContext();
 
 /**
  * Notify contact via SMS provider.
  */
-function NotifyContactViaSMSFormProvider({ dialogName, ...props }) {
-  // Fetches customers list.
-  const {
-    data: { customers },
-    isLoading: isCustomersLoading,
-  } = useCustomers();
+function NotifyContactViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
+  // Handle fetch invoice data.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
+    useInvocieSMSDetails(invoiceId, {
+      enabled: !!invoiceId,
+    });
+
+  // Create notfiy invoice by sms mutations.
+  const { mutateAsync: createNotifyInvoiceBySMSMutate } =
+    useCreateNotifyInvoiceBySMS();
 
   // State provider.
   const provider = {
+    invoiceId,
+    invoiceSMSDetail,
     dialogName,
-    customers,
+    createNotifyInvoiceBySMSMutate,
   };
 
   return (
-    <DialogContent isLoading={isCustomersLoading}>
+    <DialogContent isLoading={isInvoiceLoading || isInvoiceSMSDetailLoading}>
       <NotifyContactViaSMSContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
index 2c99a0985..64240e927 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
+++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
@@ -12,18 +12,25 @@ const NotifyContactViaSMSDialogContent = React.lazy(() =>
 /**
  * Notify contact via SMS.
  */
-function NotifyContactViaSMSDialog({ dialogName, payload, isOpen }) {
+function NotifyContactViaSMSDialog({
+  dialogName,
+  payload: { invoiceId },
+  isOpen,
+}) {
   return (
     <Dialog
       name={dialogName}
-      title={'Notify via SMS'}
+      title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
       className={'dialog--notify-vis-sms'}
     >
       <DialogSuspense>
-        <NotifyContactViaSMSDialogContent dialogName={dialogName} />
+        <NotifyContactViaSMSDialogContent
+          dialogName={dialogName}
+          invoice={invoiceId}
+        />
       </DialogSuspense>
     </Dialog>
   );
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index 5b5a7dd87..1aeba690e 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -6,28 +6,17 @@ import {
   NavbarGroup,
   Classes,
   NavbarDivider,
-  Popover,
-  PopoverInteractionKind,
-  Position,
   Intent,
-  MenuItem,
-  Menu,
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-import { moreVertOptions } from '../../../common/moreVertOptions';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import {
-  If,
-  Icon,
-  FormattedMessage as T,
-  // MoreVertMenutItems,
-} from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
 
 import { compose } from 'utils';
 
@@ -78,7 +67,7 @@ function InvoiceDetailActionsBar({
   };
   // Handle notify via SMS.
   const handleNotifyViaSMS = () => {
-    openDialog('notify-via-sms', {});
+    openDialog('notify-via-sms', { invoiceId });
   };
 
   // Handle cancele write-off invoice.
@@ -120,7 +109,6 @@ function InvoiceDetailActionsBar({
         />
         <NavbarDivider />
         <BadDebtMenuItem
-          invoice={invoice}
           payload={{
             onBadDebt: handleBadDebtInvoice,
             onCancelBadDebt: handleCancelBadDebtInvoice,
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index 7fae12971..68c4cbc29 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { Icon, FormattedMessage as T, Choose } from 'components';
 import { FormatNumberCell } from '../../../components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
  * Retrieve invoice readonly details table columns.
@@ -59,9 +60,10 @@ export const useInvoiceReadonlyEntriesColumns = () =>
   );
 
 export const BadDebtMenuItem = ({
-  invoice,
   payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
 }) => {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
   return (
     <Popover
       minimal={true}
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index 8c25c4baa..2b6766329 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -189,3 +189,38 @@ export function useRefreshEstimates() {
     },
   };
 }
+
+export function useCreateNotifyEstimateBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`sales/estimates/${id}/notify-by-sms`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate  sale estimate.
+        queryClient.invalidateQueries([t.NOTIFY_SALE_ESTIMATE_BY_SMS, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useEstimateSMS(estimateId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_ESTIMATE_SMS, estimateId],
+    {
+      method: 'get',
+      url: `sales/estimates/${estimateId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 67debc80c..9948d6064 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -219,14 +219,52 @@ export function useCancelBadDebt(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id) => apiRequest.post(`sales/invoices/${id}/writeoff/cancel`), {
-    onSuccess: (res, id) => {
-      // Invalidate
-      queryClient.invalidateQueries([t.CANCEL_BAD_DEBT, id]);
+  return useMutation(
+    (id) => apiRequest.post(`sales/invoices/${id}/writeoff/cancel`),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.CANCEL_BAD_DEBT, id]);
 
-      // Common invalidate queries.
-      commonInvalidateQueries(queryClient);
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
     },
-    ...props,
-  });
+  );
+}
+
+export function useCreateNotifyInvoiceBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`sales/invoices/${id}/notify-by-sms`),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_SALE_INVOICE_BY_SMS, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useInvocieSMSDetails(invoiceId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_INVOICE_SMS, invoiceId],
+    {
+      method: 'get',
+      url: `sales/invoices/${invoiceId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
 }
diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js
index 6f8a0f28a..ea6ba6274 100644
--- a/src/hooks/query/paymentReceives.js
+++ b/src/hooks/query/paymentReceives.js
@@ -174,3 +174,34 @@ export function useRefreshPaymentReceive() {
     },
   };
 }
+
+export function useCreateNotifyPaymentReceiveBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`sales/payment_receives/${id}/notify-by-sms`),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_PAYMENT_RECEIVE_BY_SMS, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function usePaymentReceiveSMS(id, props, requestProps) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVE_SMS, id],
+    { method: 'get', url: `sales/payment_receives/${id}/sms-details`, ...requestProps },
+    {
+      select: (res) => res.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js
index ebefb6c26..6db29e4c3 100644
--- a/src/hooks/query/receipts.js
+++ b/src/hooks/query/receipts.js
@@ -23,7 +23,7 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate the cashflow transactions.
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
-  
+
   // Invalidate the settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
 };
@@ -163,3 +163,32 @@ export function useRefreshReceipts() {
     },
   };
 }
+
+export function useCreateNotifyReceiptBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    (id) => apiRequest.post(`sales/receipts/${id}/notify-by-sms`),
+    {
+      onSuccess: (res, id) => {
+        queryClient.invalidateQueries([t.NOTIFY_SALE_RECEIPT_BY_SMS, id]);
+
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useReceiptSMS(receiptId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_RECEIPT_SMS, receiptId],
+    { method: 'get', url: `sales/receipts/${receiptId}/sms-details`, ...requestProps },
+    {
+      select: (res) => res.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 22e25c72b..7aebe4bf1 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -123,3 +123,18 @@ export function useSettingCashFlow(props) {
     props,
   );
 }
+
+/**
+ * Retrieve SMS settings.
+ */
+export function useSettingSMSNotifications(props) {
+  return useRequestQuery(
+    [t.SETTING_SMS_NOTIFICATIONS],
+    { method: 'get', url: `settings/sms-notifications` },
+    {
+      select: (res) => res.data.notifications,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 54952a47c..ff9bbe20a 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -51,11 +51,15 @@ const ITEMS = {
 const SALE_ESTIMATES = {
   SALE_ESTIMATES: 'SALE_ESTIMATES',
   SALE_ESTIMATE: 'SALE_ESTIMATE',
+  SALE_ESTIMATE_SMS: 'SALE_ESTIMATE_SMS',
+  NOTIFY_SALE_ESTIMATE_BY_SMS: 'NOTIFY_SALE_ESTIMATE_BY_SMS',
 };
 
 const SALE_RECEIPTS = {
   SALE_RECEIPTS: 'SALE_RECEIPTS',
   SALE_RECEIPT: 'SALE_RECEIPT',
+  SALE_RECEIPT_SMS: 'SALE_RECEIPT_SMS',
+  NOTIFY_SALE_RECEIPT_BY_SMS: 'NOTIFY_SALE_RECEIPT_BY_SMS',
 };
 
 const INVENTORY_ADJUSTMENTS = {
@@ -79,12 +83,16 @@ const PAYMENT_RECEIVES = {
   PAYMENT_RECEIVE: 'PAYMENT_RECEIVE',
   PAYMENT_RECEIVE_NEW_ENTRIES: 'PAYMENT_RECEIVE_NEW_ENTRIES',
   PAYMENT_RECEIVE_EDIT_PAGE: 'PAYMENT_RECEIVE_EDIT_PAGE',
+  PAYMENT_RECEIVE_SMS: 'PAYMENT_RECEIVE_SMS',
+  NOTIFY_PAYMENT_RECEIVE_BY_SMS: 'NOTIFY_PAYMENT_RECEIVE_BY_SMS',
 };
 
 const SALE_INVOICES = {
   SALE_INVOICES: 'SALE_INVOICES',
   SALE_INVOICE: 'SALE_INVOICE',
   SALE_INVOICES_DUE: 'SALE_INVOICES_DUE',
+  SALE_INVOICE_SMS: 'SALE_INVOICE_SMS',
+  NOTIFY_SALE_INVOICE_BY_SMS: 'NOTIFY_SALE_INVOICE_BY_SMS',
   BAD_DEBT: 'BAD_DEBT',
   CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
 };
@@ -103,6 +111,7 @@ const SETTING = {
   SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS',
   SETTING_ITEMS: 'SETTING_ITEMS',
   SETTING_CASHFLOW: 'SETTING_CASHFLOW',
+  SETTING_SMS_NOTIFICATIONS: 'SETTING_SMS_NOTIFICATIONS',
 };
 
 const ORGANIZATIONS = {

From 834d365a9712850c0db4b254ee36c8553fc3c36c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 7 Nov 2021 13:39:29 +0200
Subject: [PATCH 06/41] feat: Add SMS Integration & SMS Message Form.

---
 src/common/classes.js                         |  1 +
 .../DataTableCells/SwitchFieldCell.js         |  2 +-
 src/components/DialogsContainer.js            |  2 +
 .../SMSMessageDialogContent.js                | 20 +++++
 .../SMSMessageDialogProvider.js               | 38 +++++++++
 .../SMSMessageDialog/SMSMessageForm.js        | 79 +++++++++++++++++++
 .../SMSMessageDialog/SMSMessageForm.schema.js | 11 +++
 .../SMSMessageDialog/SMSMessageFormContent.js | 17 ++++
 .../SMSMessageDialog/SMSMessageFormFields.js  | 31 ++++++++
 .../SMSMessageFormFloatingActions.js          | 47 +++++++++++
 .../Dialogs/SMSMessageDialog/index.js         | 39 +++++++++
 .../SMSIntegration/SMSIntegrationProvider.js  | 39 +++++++++
 .../SMSIntegration/SMSIntegrationTabs.js      | 42 ++++++++++
 .../SMSIntegration/SMSMessagesDataTable.js    | 40 ++++++++++
 .../Preferences/SMSIntegration/components.js  | 67 ++++++++++++++++
 .../Preferences/SMSIntegration/index.js       | 15 ++++
 .../SMSMessagesTemplatesDataTable.js          | 54 -------------
 .../SMSMessagesTemplatesProvider.js           | 35 --------
 .../SMSMessagesTemplates/components.js        | 40 ----------
 .../Preferences/SMSMessagesTemplates/index.js | 15 ----
 .../Preferences/Users/components.js           |  2 +-
 src/hooks/query/settings.js                   | 41 +++++++++-
 src/hooks/query/types.js                      |  2 +
 src/lang/en/index.json                        | 15 ++--
 src/routes/preferences.js                     |  4 +-
 .../NotifyConactViaSMSDialog.scss             |  2 +-
 .../pages/Preferences/SMSIntegration.scss     | 38 +++++++++
 src/style/pages/SMSMessage/SMSMessage.scss    | 29 +++++++
 28 files changed, 612 insertions(+), 155 deletions(-)
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/index.js
 create mode 100644 src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
 create mode 100644 src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
 create mode 100644 src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
 create mode 100644 src/containers/Preferences/SMSIntegration/components.js
 create mode 100644 src/containers/Preferences/SMSIntegration/index.js
 delete mode 100644 src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
 delete mode 100644 src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
 delete mode 100644 src/containers/Preferences/SMSMessagesTemplates/components.js
 delete mode 100644 src/containers/Preferences/SMSMessagesTemplates/index.js
 create mode 100644 src/style/pages/Preferences/SMSIntegration.scss
 create mode 100644 src/style/pages/SMSMessage/SMSMessage.scss

diff --git a/src/common/classes.js b/src/common/classes.js
index f20587caa..bea33a718 100644
--- a/src/common/classes.js
+++ b/src/common/classes.js
@@ -66,6 +66,7 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users',
   PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
   PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
+  PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
 
   FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
 
diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js
index 0e9635439..df5bb0e89 100644
--- a/src/components/DataTableCells/SwitchFieldCell.js
+++ b/src/components/DataTableCells/SwitchFieldCell.js
@@ -31,7 +31,7 @@ const SwitchEditableCell = ({
     >
       <Switch
         value={value}
-        onChange={onChange}
+        // onChange={onChange}
         checked={initialValue}
         minimal={true}
         className="ml2"
diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index 1530c5cf7..67172eba0 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -21,6 +21,7 @@ import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
 import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
 import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
 import NotifyContactViaSMSDialog from '../containers/Dialogs/NotifyContactViaSMSDialog';
+import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
 
 /**
  * Dialogs container.
@@ -48,6 +49,7 @@ export default function DialogsContainer() {
       <MoneyOutDialog dialogName={'money-out'} />
       <NotifyContactViaSMSDialog dialogName={'notify-via-sms'} />
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
+      <SMSMessageDialog dialogName={'sms-message-form'} />
     </div>
   );
 }
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
new file mode 100644
index 000000000..134a42f48
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import '../../../style/pages/SMSMessage/SMSMessage.scss';
+import { SMSMessageDialogProvider } from './SMSMessageDialogProvider';
+import SMSMessageForm from './SMSMessageForm';
+
+export default function SMSMessageDialogContent({
+  // #ownProps
+  dialogName,
+  notificationkey,
+}) {
+  return (
+    <SMSMessageDialogProvider
+      dialogName={dialogName}
+      notificationkey={notificationkey}
+    >
+      <SMSMessageForm />
+    </SMSMessageDialogProvider>
+  );
+}
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
new file mode 100644
index 000000000..28c6b180f
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useSettingEditSMSNotification,
+  useSettingSMSNotification,
+} from 'hooks/query';
+
+const SMSMessageDialogContext = React.createContext();
+
+/**
+ * SMS Message dialog provider.
+ */
+function SMSMessageDialogProvider({ notificationkey, dialogName, ...props }) {
+  // Edit SMS message notification mutations.
+  const { mutateAsync: editSMSNotificationMutate } =
+    useSettingEditSMSNotification();
+
+  const { data: smsNotification, isLoading: isSMSNotificationLoading } =
+    useSettingSMSNotification(notificationkey);
+
+  //  provider.
+  const provider = {
+    dialogName,
+    smsNotification,
+    editSMSNotificationMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isSMSNotificationLoading}>
+      <SMSMessageDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useSMSMessageDialogContext = () =>
+  React.useContext(SMSMessageDialogContext);
+
+export { SMSMessageDialogProvider, useSMSMessageDialogContext };
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
new file mode 100644
index 000000000..3a98f36a6
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { omit } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+
+import SMSMessageFormContent from './SMSMessageFormContent';
+import { CreateSMSMessageFormSchema } from './SMSMessageForm.schema';
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  notification_key: '',
+  is_notification_enabled: '',
+  message_text: '',
+};
+
+/**
+ * SMS Message form.
+ */
+function SMSMessageForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, smsNotification, editSMSNotificationMutate } =
+    useSMSMessageDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    ...transformToForm(smsNotification, defaultInitialValues),
+    notification_key: smsNotification.key,
+    message_text: smsNotification.sms_message,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['is_notification_enabled', 'sms_message']),
+      notification_key: smsNotification.key,
+    };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('sms_message.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    editSMSNotificationMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateSMSMessageFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={SMSMessageFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(SMSMessageForm);
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js
new file mode 100644
index 000000000..441e73381
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js
@@ -0,0 +1,11 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  notification_key: Yup.string().required(),
+  is_notification_enabled: Yup.boolean(),
+  message_text: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT),
+});
+
+export const CreateSMSMessageFormSchema = Schema;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
new file mode 100644
index 000000000..52c417b24
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import SMSMessageFormFields from './SMSMessageFormFields';
+import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
+
+/**
+ * SMS message form content.
+ */
+export default function SMSMessageFormContent() {
+  return (
+    <Form>
+      <SMSMessageFormFields />
+      <SMSMessageFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
new file mode 100644
index 000000000..fd4c54c0c
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { FastField, Field, ErrorMessage } from 'formik';
+import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T, FieldRequiredHint } from 'components';
+import { inputIntent } from 'utils';
+
+export default function SMSMessageFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Message Text ----------- */}
+      <FastField name={'message_text'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'notify_via_sms.dialog.message_text'} />}
+            className={'form-group--message_text'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'message_text'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
new file mode 100644
index 000000000..efa1a090a
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * SMS Message Form floating actions.
+ */
+function SMSMessageFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useSMSMessageDialogContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(SMSMessageFormFloatingActions);
diff --git a/src/containers/Dialogs/SMSMessageDialog/index.js b/src/containers/Dialogs/SMSMessageDialog/index.js
new file mode 100644
index 000000000..acb3c8784
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'redux';
+
+const SMSMessageDialogContent = React.lazy(() =>
+  import('./SMSMessageDialogContent'),
+);
+
+/**
+ * SMS Message dialog.
+ */
+function SMSMessageDialog({
+  dialogName,
+  payload: { notificationkey },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={intl.get('sms_message')}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--sms-message'}
+    >
+      <DialogSuspense>
+        <SMSMessageDialogContent
+          dialogName={dialogName}
+          notificationkey={notificationkey}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(SMSMessageDialog);
diff --git a/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js b/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
new file mode 100644
index 000000000..23b03f148
--- /dev/null
+++ b/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { useSettings, useSettingSMSNotifications } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const SMSIntegrationContext = React.createContext();
+
+/**
+ * SMS Integration provider.
+ */
+function SMSIntegrationProvider({ ...props }) {
+  //Fetches Organization Settings.
+  const { isLoading: isSettingsLoading } = useSettings();
+
+  const { data: notifications, isLoading: isSMSNotificationsLoading } =
+    useSettingSMSNotifications();
+
+  // Provider state.
+  const provider = {
+    notifications,
+    isSMSNotificationsLoading,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION,
+      )}
+    >
+      <SMSIntegrationContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useSMSIntegrationContext = () => React.useContext(SMSIntegrationContext);
+
+export { SMSIntegrationProvider, useSMSIntegrationContext };
diff --git a/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js b/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
new file mode 100644
index 000000000..ebad8a644
--- /dev/null
+++ b/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Tabs, Tab } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import SMSMessagesDataTable from './SMSMessagesDataTable';
+
+import '../../../style/pages/Preferences/SMSIntegration.scss';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+function SMSIntegrationTabs({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('sms_integration.label'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <div className={classNames(CLASSES.CARD)}>
+      <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
+        <Tabs animate={true} defaultSelectedTabId={'sms_messages'}>
+          <Tab
+            id="overview"
+            title={intl.get('sms_integration.label.overview')}
+          />
+          <Tab
+            id="sms_messages"
+            title={intl.get('sms_integration.label.sms_messages')}
+            panel={<SMSMessagesDataTable />}
+          />
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDashboardActions)(SMSIntegrationTabs);
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
new file mode 100644
index 000000000..db3aefad8
--- /dev/null
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { DataTableEditable, DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useSMSIntegrationTableColumns } from './components';
+import { useSMSIntegrationContext } from './SMSIntegrationProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function SMSMessagesDataTable({
+  // #withDialogAction
+  openDialog,
+}) {
+  // Table columns.
+  const columns = useSMSIntegrationTableColumns();
+
+  const { notifications, isSMSNotificationsLoading } =
+    useSMSIntegrationContext();
+
+  const handleEditSMSMessage = ({ key }) => {
+    openDialog('sms-message-form', { notificationkey: key });
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={notifications}
+      loading={isSMSNotificationsLoading}
+      progressBarLoading={isSMSNotificationsLoading}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+      payload={{
+        onEditSMSMessage: handleEditSMSMessage,
+      }}
+    />
+  );
+}
+
+export default compose(withDialogActions)(SMSMessagesDataTable);
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
new file mode 100644
index 000000000..841e8f8bd
--- /dev/null
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { SwitchFieldCell } from 'components/DataTableCells';
+import { safeCallback } from 'utils';
+
+/**
+ * Notification accessor.
+ */
+export const NotificationAccessor = (row) => {
+  return (
+    <span className="notification">
+      <span className={'notification__label'}>{row.notification_label}</span>
+      <span className={'notification__desc'}>
+        {row.notification_description}
+      </span>
+    </span>
+  );
+};
+
+export const SMSMessageCell = ({
+  payload: { onEditSMSMessage },
+  row: { original },
+}) => (
+  <div>
+    {original.sms_message}
+    <span
+      className="edit-text"
+      onClick={safeCallback(onEditSMSMessage, original)}
+    >
+      {'Edit'}
+    </span>
+  </div>
+);
+
+export function useSMSIntegrationTableColumns() {
+  return React.useMemo(() => [
+    {
+      Header: intl.get('sms_message.label_Notification'),
+      accessor: NotificationAccessor,
+      className: 'notification',
+      width: '180',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'module_formatted',
+      className: 'service',
+      width: '80',
+    },
+    {
+      Header: intl.get('sms_message.label_mesage'),
+      accessor: 'sms_message',
+      Cell: SMSMessageCell,
+      className: 'sms_message',
+      clickable: true,
+      width: '180',
+    },
+    {
+      Header: intl.get('sms_message.label_auto'),
+      accessor: 'is_notification_enabled',
+      Cell: SwitchFieldCell,
+      className: 'is_notification_enabled',
+      disableSortBy: true,
+      disableResizing: true,
+      width: '80',
+    },
+  ]);
+}
diff --git a/src/containers/Preferences/SMSIntegration/index.js b/src/containers/Preferences/SMSIntegration/index.js
new file mode 100644
index 000000000..bd3d7d5cc
--- /dev/null
+++ b/src/containers/Preferences/SMSIntegration/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { SMSIntegrationProvider } from './SMSIntegrationProvider';
+import SMSIntegrationTabs from './SMSIntegrationTabs';
+
+/**
+ * SMS SMS Integration
+ */
+export default function SMSIntegration() {
+  return (
+    <SMSIntegrationProvider>
+      <SMSIntegrationTabs />
+    </SMSIntegrationProvider>
+  );
+}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
deleted file mode 100644
index ad5b8682c..000000000
--- a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import {
-  DataTableEditable,
-  DataTable,
-  DashboardContentTable,
-} from 'components';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { useSMSMessagesTemplatesTableColumns } from './components';
-
-import { compose } from 'utils';
-
-function SMSMessagesTemplatesDataTable({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
-  // Table columns.
-  const columns = useSMSMessagesTemplatesTableColumns();
-
-  React.useEffect(() => {
-    changePreferencesPageTitle(
-      intl.get('sms_message_template.label.sms_messages_template'),
-    );
-  }, [changePreferencesPageTitle]);
-
-  const DATA = [
-    {
-      notification: 'notification',
-      service: 'service',
-      message: 'message',
-      auto: true,
-    },
-    {
-      notification: 'notification',
-      service: 'service',
-      message: 'message',
-      auto: false,
-    },
-  ];
-  return (
-    <DataTableEditable
-      columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
-      TableLoadingRenderer={TableSkeletonRows}
-      noInitialFetch={true}
-    />
-  );
-}
-export default compose(withDashboardActions)(SMSMessagesTemplatesDataTable);
diff --git a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
deleted file mode 100644
index 474ea97b1..000000000
--- a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { useSettings } from 'hooks/query';
-
-const SMSMessagesTemplatesContext = React.createContext();
-
-/**
- * SMS message templates provider.
- */
-function SMSMessagesTemplatesProvider({ ...props }) {
-  //Fetches Organization Settings.
-  const { isLoading: isSettingsLoading } = useSettings();
-
-  // Provider state.
-  const provider = {};
-
-  return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
-        <SMSMessagesTemplatesContext.Provider value={provider} {...props} />
-      </div>
-    </div>
-  );
-}
-
-const useSMSMessageTemplateContext = () =>
-  React.useContext(SMSMessagesTemplatesContext);
-
-export { SMSMessagesTemplatesProvider, useSMSMessageTemplateContext };
diff --git a/src/containers/Preferences/SMSMessagesTemplates/components.js b/src/containers/Preferences/SMSMessagesTemplates/components.js
deleted file mode 100644
index 5824a65c2..000000000
--- a/src/containers/Preferences/SMSMessagesTemplates/components.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-
-import {
-  InputGroupCell,
-  TextAreaCell,
-  SwitchFieldCell,
-} from 'components/DataTableCells';
-
-export function useSMSMessagesTemplatesTableColumns() {
-  return React.useMemo(() => [
-    {
-      Header: intl.get('sms_message_template.label_Notification'),
-      accessor: 'notification',
-      className: 'notification',
-      width: '150',
-    },
-    {
-      Header: intl.get('service'),
-      accessor: 'service',
-      className: 'service',
-      width: '100',
-    },
-    {
-      Header: intl.get('sms_message_template.label_mesage'),
-      accessor: 'message',
-      className: 'message',
-      width: '180',
-    },
-    {
-      Header: intl.get('sms_message_template.label_auto'),
-      accessor: 'auto',
-      Cell: SwitchFieldCell,
-      className: 'auto',
-      disableSortBy: true,
-      disableResizing: true,
-      width: '80',
-    },
-  ]);
-}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/index.js b/src/containers/Preferences/SMSMessagesTemplates/index.js
deleted file mode 100644
index 44f4df09b..000000000
--- a/src/containers/Preferences/SMSMessagesTemplates/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { SMSMessagesTemplatesProvider } from './SMSMessagesTemplatesProvider';
-import SMSMessagesTemplatesDataTable from './SMSMessagesTemplatesDataTable';
-
-/**
- * SMS messages templates.
- */
-export default function SMSMessagesTemplates() {
-  return (
-    <SMSMessagesTemplatesProvider>
-      <SMSMessagesTemplatesDataTable />
-    </SMSMessagesTemplatesProvider>
-  );
-}
diff --git a/src/containers/Preferences/Users/components.js b/src/containers/Preferences/Users/components.js
index 6b288a0df..853852a61 100644
--- a/src/containers/Preferences/Users/components.js
+++ b/src/containers/Preferences/Users/components.js
@@ -78,7 +78,7 @@ export function ActionsMenu({
  */
 function StatusAccessor(user) {
   return !user.is_invite_accepted ? (
-    <Tag minimal={true}>
+    <Tag minimal={true} >
       <T id={'inviting'} />
     </Tag>
   ) : user.active ? (
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 7aebe4bf1..74f302bc6 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -125,7 +125,7 @@ export function useSettingCashFlow(props) {
 }
 
 /**
- * Retrieve SMS settings.
+ * Retrieve SMS Notifications settings.
  */
 export function useSettingSMSNotifications(props) {
   return useRequestQuery(
@@ -138,3 +138,42 @@ export function useSettingSMSNotifications(props) {
     },
   );
 }
+
+/**
+ * Retrieve Specific SMS Notification settings.
+ */
+export function useSettingSMSNotification(key, props) {
+  return useRequestQuery(
+    [t.SETTING_SMS_NOTIFICATIONS, key],
+    {
+      method: 'get',
+      url: `settings/sms-notification/${key}`,
+    },
+    {
+      select: (res) => res.data.notification,
+      defaultData: {
+        smsNotification: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve Edit SMS Notification settings.
+ */
+export function useSettingEditSMSNotification(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post(`settings/sms-notification`, values),
+    {
+      onSuccess: () => {
+        // Invalidate
+        queryClient.invalidateQueries([t.SETTING_SMS_NOTIFICATIONS]);
+      },
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index ff9bbe20a..9e233ab00 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -111,7 +111,9 @@ const SETTING = {
   SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS',
   SETTING_ITEMS: 'SETTING_ITEMS',
   SETTING_CASHFLOW: 'SETTING_CASHFLOW',
+  SETTING_SMS_NOTIFICATION: 'SETTING_SMS_NOTIFICATION',
   SETTING_SMS_NOTIFICATIONS: 'SETTING_SMS_NOTIFICATIONS',
+  SETTING_EDIT_SMS_NOTIFICATION: 'SETTING_EDIT_SMS_NOTIFICATION',
 };
 
 const ORGANIZATIONS = {
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index bcb9fc4a7..b61f78f99 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1430,10 +1430,15 @@
   "notify_via_sms.dialog.send_notification_to":"Send notification to",
   "notify_via_sms.dialog.message_text":"Message Text",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
+  "notify_via_sms.dialog.success_message":"To notify have been successfully",
   "send": "Send",
-  "sms_message_template.label.sms_messages_template":"SMS Messages template",
-  "sms_message_template.label_mesage":"Message",
-  "sms_message_template.label_Notification":"Notification",
-  "sms_message_template.label_auto":"Auto",
-  "sms_message":"SMS message"
+  "sms_integration.label":"SMS Integration",
+  "sms_integration.label.overview":"Overview",
+  "sms_integration.label.sms_messages":"SMS Messages",
+  "sms_message.label.sms_messages_template":"SMS Notifications ",
+  "sms_message.label_mesage":"Message",
+  "sms_message.label_Notification":"Notification",
+  "sms_message.label_auto":"Auto",
+  "sms_message":"SMS message",
+  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
 }
\ No newline at end of file
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 75b0990fe..98ff2e46b 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -4,7 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
 import Item from 'containers/Preferences/Item';
-import SMSMessagesTemplates from '../containers/Preferences/SMSMessagesTemplates';
+import SMSIntegration from '../containers/Preferences/SMSIntegration';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
 
 const BASE_URL = '/preferences';
@@ -37,7 +37,7 @@ export default [
   },
   {
     path: `${BASE_URL}/sms-message`,
-    component: SMSMessagesTemplates,
+    component: SMSIntegration,
     exact: true,
   },
   {
diff --git a/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
index 27b7f2a8c..e0ba9e197 100644
--- a/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
+++ b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
@@ -14,7 +14,7 @@
     }
 
     .form-group {
-      &--note {
+      &--sms_message {
         .bp3-form-content {
           textarea {
             width: 100%;
diff --git a/src/style/pages/Preferences/SMSIntegration.scss b/src/style/pages/Preferences/SMSIntegration.scss
new file mode 100644
index 000000000..d2a52edf0
--- /dev/null
+++ b/src/style/pages/Preferences/SMSIntegration.scss
@@ -0,0 +1,38 @@
+// SMS Integration.
+// ---------------------------------
+
+.preferences-page__inside-content--sms-integration {
+  .bigcapital-datatable {
+    .table {
+      .tbody {
+        .notification {
+          &__label {
+            font-weight: 500;
+          }
+
+          &__desc {
+            font-size: 13px;
+            margin-top: 3px;
+            line-height: 1.25;
+            display: block;
+          }
+        }
+
+        .sms_message.td {
+          .edit-text {
+            display: inline-block;
+            font-size: 11.5px;
+            color: #1652c8;
+            margin-left: 2px;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+  .bp3-tabs {
+    .bp3-tab-panel {
+      margin-top: 0;
+    }
+  }
+}
diff --git a/src/style/pages/SMSMessage/SMSMessage.scss b/src/style/pages/SMSMessage/SMSMessage.scss
new file mode 100644
index 000000000..7b447d293
--- /dev/null
+++ b/src/style/pages/SMSMessage/SMSMessage.scss
@@ -0,0 +1,29 @@
+.dialog--sms-message {
+  max-width: 350px;
+
+  .bp3-form-group {
+    margin-bottom: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 6px;
+    }
+  }
+
+  .form-group {
+    &--message_text {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          min-height: 90px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

From 6dcb98a438e0c2472eb653cc075310759cba5617 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 7 Nov 2021 13:44:20 +0200
Subject: [PATCH 07/41] feat: add preferneces menu.

---
 src/config/preferencesMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/preferencesMenu.js b/src/config/preferencesMenu.js
index 56066043d..031dfe0e1 100644
--- a/src/config/preferencesMenu.js
+++ b/src/config/preferencesMenu.js
@@ -27,7 +27,7 @@ export default [
     href: '/preferences/items',
   },
   {
-    text: <T id={'sms_message'} />,
+    text: <T id={'sms_integration.label'} />,
     disabled: false,
     href: '/preferences/sms-message',
   },

From 7706d2992cb618f9d4b81f405726eb27bb28ea41 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 7 Nov 2021 16:40:02 +0200
Subject: [PATCH 08/41] feat: add notify via SMS Form.

---
 src/components/DialogsContainer.js            | 10 +++-
 .../NotifyContactViaSMSContent.js             | 23 --------
 .../NotifyContactViaSMSFormContent.js         | 16 ------
 .../NotifyContactViaSMSFormProvider.js        | 47 -----------------
 .../NotifyEstimateViaSMSDialogContent.js      | 18 +++++++
 .../NotifyEstimateViaSMSForm.js               | 49 +++++++++++++++++
 .../NotifyEstimateViaSMSFormProvider.js       | 30 +++++++++++
 .../NotifyEstimateViaSMSDialog/index.js       | 36 +++++++++++++
 .../NotifyInvoiceViaSMSDialogContent.js       | 19 +++++++
 .../NotifyInvoiceViaSMSForm.js}               | 42 +++++----------
 .../NotifyInvoiceViaSMSFormProvider.js        | 35 +++++++++++++
 .../index.js                                  | 16 +++---
 .../NotifyPaymentReceiveViaFormProvider.js    | 33 ++++++++++++
 .../NotifyPaymentReceiveViaSMSContent.js      | 19 +++++++
 .../NotifyPaymentReceiveViaSMSForm.js         | 52 +++++++++++++++++++
 .../NotifyPaymentReceiveViaSMSDialog/index.js | 34 ++++++++++++
 .../NotifyReceiptViaSMSDialogContent.js       | 19 +++++++
 .../NotifyReceiptViaSMSForm.js                | 52 +++++++++++++++++++
 .../NotifyReceiptViaSMSFormProvider.js        | 28 ++++++++++
 .../NotifyReceiptViaSMSDialog/index.js        | 35 +++++++++++++
 .../EstimateDetailActionsBar.js               | 12 ++++-
 .../InvoiceDetailActionsBar.js                |  2 +-
 .../PaymentReceiveActionsBar.js               | 16 +++++-
 .../ReceiptDetailActionBar.js                 | 13 ++++-
 .../NotifyViaSMS/NotifyViaSMSForm.js          | 42 +++++++++++++++
 .../NotifyViaSMSForm.schema.js}               |  2 +-
 .../NotifyViaSMSFormFields.js}                | 18 ++-----
 .../NotifyViaSMSFormFloatingActions.js}       | 14 ++---
 28 files changed, 577 insertions(+), 155 deletions(-)
 delete mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
 delete mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
 delete mode 100644 src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
 create mode 100644 src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js
 create mode 100644 src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
 create mode 100644 src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
 create mode 100644 src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js
 create mode 100644 src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
 rename src/containers/Dialogs/{NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js => NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js} (55%)
 create mode 100644 src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
 rename src/containers/Dialogs/{NotifyContactViaSMSDialog => NotifyInvoiceViaSMSDialog}/index.js (67%)
 create mode 100644 src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
 create mode 100644 src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js
 create mode 100644 src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
 create mode 100644 src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
 create mode 100644 src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js
 create mode 100644 src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
 create mode 100644 src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
 create mode 100644 src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js
 create mode 100644 src/containers/NotifyViaSMS/NotifyViaSMSForm.js
 rename src/containers/{Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js => NotifyViaSMS/NotifyViaSMSForm.schema.js} (84%)
 rename src/containers/{Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js => NotifyViaSMS/NotifyViaSMSFormFields.js} (87%)
 rename src/containers/{Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js => NotifyViaSMS/NotifyViaSMSFormFloatingActions.js} (77%)

diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index 67172eba0..6f42dff69 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -20,7 +20,10 @@ import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDial
 import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
 import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
 import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
-import NotifyContactViaSMSDialog from '../containers/Dialogs/NotifyContactViaSMSDialog';
+import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
+import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
+import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
+import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog'
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
 
 /**
@@ -47,7 +50,10 @@ export default function DialogsContainer() {
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
       <MoneyInDialog dialogName={'money-in'} />
       <MoneyOutDialog dialogName={'money-out'} />
-      <NotifyContactViaSMSDialog dialogName={'notify-via-sms'} />
+      <NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
+      <NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
+      <NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
+      <NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
     </div>
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
deleted file mode 100644
index 669cb9527..000000000
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
-import { NotifyContactViaSMSFormProvider } from './NotifyContactViaSMSFormProvider';
-import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
-
-/**
- * Notify contact via SMS.
- */
-export default function NotifyContactViaSMSContent({
-  // #ownProps
-  dialogName,
-  invoice,
-}) {
-  return (
-    <NotifyContactViaSMSFormProvider
-      invoiceId={invoice}
-      dialogName={dialogName}
-    >
-      <NotifyContactViaSMSForm />
-    </NotifyContactViaSMSFormProvider>
-  );
-}
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
deleted file mode 100644
index 336306f34..000000000
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import NotifyContactViaSMSFormFields from './NotifyContactViaSMSFormFields';
-import NotifyContactViaSMSFormFloatingActions from './NotifyContactViaSMSFormFloatingActions';
-/**
- * Nofity contact via SMS form content.
- */
-export default function NotifyContactViaSMSFormContent() {
-  return (
-    <Form>
-      <NotifyContactViaSMSFormFields />
-      <NotifyContactViaSMSFormFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
deleted file mode 100644
index 962ac8921..000000000
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { DialogContent } from 'components';
-import {
-  useInvoice,
-  useCreateNotifyInvoiceBySMS,
-  useInvocieSMSDetails,
-} from 'hooks/query';
-
-const NotifyContactViaSMSContext = React.createContext();
-
-/**
- * Notify contact via SMS provider.
- */
-function NotifyContactViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
-  // Handle fetch invoice data.
-  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
-    enabled: !!invoiceId,
-  });
-
-  const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
-    useInvocieSMSDetails(invoiceId, {
-      enabled: !!invoiceId,
-    });
-
-  // Create notfiy invoice by sms mutations.
-  const { mutateAsync: createNotifyInvoiceBySMSMutate } =
-    useCreateNotifyInvoiceBySMS();
-
-  // State provider.
-  const provider = {
-    invoiceId,
-    invoiceSMSDetail,
-    dialogName,
-    createNotifyInvoiceBySMSMutate,
-  };
-
-  return (
-    <DialogContent isLoading={isInvoiceLoading || isInvoiceSMSDetailLoading}>
-      <NotifyContactViaSMSContext.Provider value={provider} {...props} />
-    </DialogContent>
-  );
-}
-
-const useNotifyContactViaSMSContext = () =>
-  React.useContext(NotifyContactViaSMSContext);
-
-export { NotifyContactViaSMSFormProvider, useNotifyContactViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js
new file mode 100644
index 000000000..6384dcc1e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { NotifyEstimateViaSMSFormProvider } from './NotifyEstimateViaSMSFormProvider';
+import NotifyEstimateViaSMSForm from './NotifyEstimateViaSMSForm';
+
+export default function NotifyEstimateViaSMSDialogContent({
+  // #ownProps
+  dialogName,
+  estimate,
+}) {
+  return (
+    <NotifyEstimateViaSMSFormProvider
+      estimateId={estimate}
+      dialogName={dialogName}
+    >
+      <NotifyEstimateViaSMSForm />
+    </NotifyEstimateViaSMSFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
new file mode 100644
index 000000000..5019bad7e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
+import { useEstimateViaSMSContext } from './NotifyEstimateViaSMSFormProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function NotifyEstimateViaSMSForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, estimateId } = useEstimateViaSMSContext();
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('notify_via_sms.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <NotifyViaSMSForm
+      NotificationDetail={{}}
+      NotificationName={dialogName}
+      onSubmit={handleFormSubmit}
+    />
+  );
+}
+
+export default compose(withDialogActions)(NotifyEstimateViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
new file mode 100644
index 000000000..5f3d8d38e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { DialogContent } from 'components';
+// import {  } from 'hooks/query';
+
+const NotifyEstimateViaSMSContext = React.createContext();
+
+function NotifyEstimateViaSMSFormProvider({
+  estimateId,
+  dialogName,
+  ...props
+}) {
+  // State provider.
+  const provider = {
+    estimateId,
+    dialogName,
+  };
+
+  return (
+    <DialogContent
+    // isLoading={}
+    >
+      <NotifyEstimateViaSMSContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useEstimateViaSMSContext = () =>
+  React.useContext(NotifyEstimateViaSMSContext);
+
+export { NotifyEstimateViaSMSFormProvider, useEstimateViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js
new file mode 100644
index 000000000..a935e5852
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const NotifyEstimateViaSMSDialogContent = React.lazy(() =>
+  import('./NotifyEstimateViaSMSDialogContent'),
+);
+
+function NotifyEstimateViaSMSDialog({
+  dialogName,
+  payload: { estimateId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--notify-vis-sms'}
+    >
+      <DialogSuspense>
+        <NotifyEstimateViaSMSDialogContent
+          dialogName={dialogName}
+          estimate={estimateId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(NotifyEstimateViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
new file mode 100644
index 000000000..88f75332d
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyInvoiceViaSMSFormProvider } from './NotifyInvoiceViaSMSFormProvider';
+import NotifyInvoiceViaSMSForm from './NotifyInvoiceViaSMSForm';
+
+export default function NotifyInvoiceViaSMSDialogContent({
+  // #ownProps
+  dialogName,
+  invoice,
+}) {
+  return (
+    <NotifyInvoiceViaSMSFormProvider
+      invoiceId={invoice}
+      dialogName={dialogName}
+    >
+      <NotifyInvoiceViaSMSForm />
+    </NotifyInvoiceViaSMSFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
similarity index 55%
rename from src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
rename to src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index c411563c1..0f2ae70fc 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -1,42 +1,28 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-
 import { AppToaster } from 'components';
-import { CreateNotifyContactViaSMSFormSchema } from './NotifyContactViaSMSForm.schema';
 
-import NotifyContactViaSMSFormContent from './NotifyContactViaSMSFormContent';
+import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
+import { useNotifyInvoiceViaSMSContext } from './NotifyInvoiceViaSMSFormProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
 
-import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
-
-import { transformToForm, compose } from 'utils';
-
-const defaultInitialValues = {
-  customer_name: '',
-  customer_personal_phone: '',
-  sms_message: '',
-};
-
-function NotifyContactViaSMSForm({
+/**
+ * Notify Invoice Via SMS Form.
+ */
+function NotifyInvoiceViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
   const {
+    createNotifyInvoiceBySMSMutate,
     invoiceId,
     invoiceSMSDetail,
     dialogName,
-    createNotifyInvoiceBySMSMutate,
-  } = useNotifyContactViaSMSContext();
-
-  // Initial form values
-  const initialValues = {
-    ...defaultInitialValues,
-    ...transformToForm(invoiceSMSDetail, defaultInitialValues),
-  };
+  } = useNotifyInvoiceViaSMSContext();
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
@@ -63,12 +49,12 @@ function NotifyContactViaSMSForm({
   };
 
   return (
-    <Formik
-      validationSchema={CreateNotifyContactViaSMSFormSchema}
-      initialValues={initialValues}
+    <NotifyViaSMSForm
+      NotificationDetail={invoiceSMSDetail}
+      NotificationName={dialogName}
       onSubmit={handleFormSubmit}
-      component={NotifyContactViaSMSFormContent}
     />
   );
 }
-export default compose(withDialogActions)(NotifyContactViaSMSForm);
+
+export default compose(withDialogActions)(NotifyInvoiceViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
new file mode 100644
index 000000000..4793db09a
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+
+const NotifyInvoiceViaSMSContext = React.createContext();
+
+function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
+  const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
+    useInvocieSMSDetails(invoiceId, {
+      enabled: !!invoiceId,
+    });
+
+  // Create notfiy invoice by sms mutations.
+  const { mutateAsync: createNotifyInvoiceBySMSMutate } =
+    useCreateNotifyInvoiceBySMS();
+
+  // State provider.
+  const provider = {
+    invoiceId,
+    invoiceSMSDetail,
+    dialogName,
+    createNotifyInvoiceBySMSMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isInvoiceSMSDetailLoading}>
+      <NotifyInvoiceViaSMSContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useNotifyInvoiceViaSMSContext = () =>
+  React.useContext(NotifyInvoiceViaSMSContext);
+
+export { NotifyInvoiceViaSMSFormProvider, useNotifyInvoiceViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
similarity index 67%
rename from src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
rename to src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
index 64240e927..19ae087b8 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/index.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
@@ -3,16 +3,13 @@ import React from 'react';
 import { FormattedMessage as T } from 'components';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'redux';
+import { compose } from 'utils';
 
-const NotifyContactViaSMSDialogContent = React.lazy(() =>
-  import('./NotifyContactViaSMSContent'),
+const NotifyInvoiceViaSMSDialogContent = React.lazy(() =>
+  import('./NotifyInvoiceViaSMSDialogContent'),
 );
 
-/**
- * Notify contact via SMS.
- */
-function NotifyContactViaSMSDialog({
+function NotifyInvoiceViaSMSDialog({
   dialogName,
   payload: { invoiceId },
   isOpen,
@@ -27,7 +24,7 @@ function NotifyContactViaSMSDialog({
       className={'dialog--notify-vis-sms'}
     >
       <DialogSuspense>
-        <NotifyContactViaSMSDialogContent
+        <NotifyInvoiceViaSMSDialogContent
           dialogName={dialogName}
           invoice={invoiceId}
         />
@@ -35,5 +32,4 @@ function NotifyContactViaSMSDialog({
     </Dialog>
   );
 }
-
-export default compose(withDialogRedux())(NotifyContactViaSMSDialog);
+export default compose(withDialogRedux())(NotifyInvoiceViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
new file mode 100644
index 000000000..9ee75ecf8
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { DialogContent } from 'components';
+// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+
+const NotifyPaymentReceiveViaSMSContext = React.createContext();
+
+function NotifyPaymentReceiveViaFormProvider({
+  paymentReceiveId,
+  dialogName,
+  ...props
+}) {
+  // State provider.
+  const provider = {
+    paymentReceiveId,
+    dialogName,
+  };
+
+  return (
+    <DialogContent
+    // isLoading={}
+    >
+      <NotifyPaymentReceiveViaSMSContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useNotifyPaymentReceiveViaSMSContext = () =>
+  React.useContext(NotifyPaymentReceiveViaSMSContext);
+
+export {
+  NotifyPaymentReceiveViaFormProvider,
+  useNotifyPaymentReceiveViaSMSContext,
+};
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js
new file mode 100644
index 000000000..8b1f49934
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyPaymentReceiveViaFormProvider } from './NotifyPaymentReceiveViaFormProvider';
+import NotifyPaymentReceiveViaSMSForm from './NotifyPaymentReceiveViaSMSForm';
+
+export default function NotifyPaymentReceiveViaSMSContent({
+  // #ownProps
+  dialogName,
+  paymentReceive,
+}) {
+  return (
+    <NotifyPaymentReceiveViaFormProvider
+      paymentReceiveId={paymentReceive}
+      dialogName={dialogName}
+    >
+      <NotifyPaymentReceiveViaSMSForm />
+    </NotifyPaymentReceiveViaFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
new file mode 100644
index 000000000..0db3d6100
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
+import { useNotifyPaymentReceiveViaSMSContext } from './NotifyPaymentReceiveViaFormProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Notify Payment Recive Via SMS Form.
+ */
+function NotifyPaymentReceiveViaSMSForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, paymentReceiveId } =
+    useNotifyPaymentReceiveViaSMSContext();
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('notify_via_sms.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <NotifyViaSMSForm
+      NotificationDetail={{}}
+      NotificationName={dialogName}
+      onSubmit={handleFormSubmit}
+    />
+  );
+}
+export default compose(withDialogActions)(NotifyPaymentReceiveViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
new file mode 100644
index 000000000..26f2a4df3
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const NotifyPaymentReceiveViaSMSDialogContent = React.lazy(() =>
+  import('./NotifyPaymentReceiveViaSMSContent'),
+);
+
+function NotifyPaymentReciveViaSMSDialog({
+  dialogName,
+  payload: { paymentReceiveId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--notify-vis-sms'}
+    >
+      <DialogSuspense>
+        <NotifyPaymentReceiveViaSMSDialogContent
+          dialogName={dialogName}
+          paymnetReceive={paymentReceiveId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(NotifyPaymentReciveViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js
new file mode 100644
index 000000000..7f4e40e04
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyReceiptViaSMSFormProvider } from './NotifyReceiptViaSMSFormProvider';
+import NotifyReceiptViaSMSForm from './NotifyReceiptViaSMSForm';
+
+export default function NotifyReceiptViaSMSDialogContent({
+  // #ownProps
+  dialogName,
+  receipt,
+}) {
+  return (
+    <NotifyReceiptViaSMSFormProvider
+      receiptId={receipt}
+      dialogName={dialogName}
+    >
+      <NotifyReceiptViaSMSForm />
+    </NotifyReceiptViaSMSFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
new file mode 100644
index 000000000..5ca513ce9
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
+import { useNotifyReceiptViaSMSContext } from './NotifyReceiptViaSMSFormProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Notify Receipt Via SMS Form.
+ */
+function NotifyReceiptViaSMSForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, receiptId } = useNotifyReceiptViaSMSContext();
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('notify_via_sms.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <NotifyViaSMSForm
+      NotificationDetail={{}}
+      NotificationName={dialogName}
+      onSubmit={handleFormSubmit}
+    />
+  );
+}
+
+export default compose(withDialogActions)(NotifyReceiptViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
new file mode 100644
index 000000000..fa8dce2b9
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogContent } from 'components';
+// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+
+const NotifyReceiptViaSMSContext = React.createContext();
+
+function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
+  // Create notfiy receipt via sms mutations.
+
+  // State provider.
+  const provider = {
+    receiptId,
+    dialogName,
+  };
+
+  return (
+    <DialogContent
+    // isLoading={}
+    >
+      <NotifyReceiptViaSMSContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useNotifyReceiptViaSMSContext = () =>
+  React.useContext(NotifyReceiptViaSMSContext);
+
+export { NotifyReceiptViaSMSFormProvider, useNotifyReceiptViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js
new file mode 100644
index 000000000..67ae48813
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const NotifyReceiptViaSMSDialogContent = React.lazy(() =>
+  import('./NotifyReceiptViaSMSDialogContent'),
+);
+
+function NotifyReceiptViaSMSDialog({
+  dialogName,
+  payload: { receiptId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--notify-vis-sms'}
+    >
+      <DialogSuspense>
+        <NotifyReceiptViaSMSDialogContent
+          dialogName={dialogName}
+          receipt={receiptId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(NotifyReceiptViaSMSDialog);
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
index 0c468be41..1a7c3c051 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
@@ -15,7 +15,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 
 import { compose } from 'utils';
 
@@ -51,6 +51,10 @@ function EstimateDetailActionsBar({
   const handlePrintEstimate = () => {
     openDialog('estimate-pdf-preview', { estimateId });
   };
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-estimate-via-sms', { estimateId });
+  };
 
   return (
     <DashboardActionsBar>
@@ -75,6 +79,12 @@ function EstimateDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteEstimate}
         />
+        <NavbarDivider />
+        <MoreMenuItems
+          payload={{
+            onNotifyViaSMS: handleNotifyViaSMS,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index 1aeba690e..b4fa903b7 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -67,7 +67,7 @@ function InvoiceDetailActionsBar({
   };
   // Handle notify via SMS.
   const handleNotifyViaSMS = () => {
-    openDialog('notify-via-sms', { invoiceId });
+    openDialog('notify-invoice-via-sms', { invoiceId });
   };
 
   // Handle cancele write-off invoice.
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 1f4939feb..94bb19c65 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -16,7 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 
 import { compose } from 'utils';
 
@@ -29,6 +29,9 @@ function PaymentReceiveActionsBar({
 
   // #withDrawerActions
   closeDrawer,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -46,6 +49,11 @@ function PaymentReceiveActionsBar({
     openAlert('payment-receive-delete', { paymentReceiveId });
   };
 
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-payment-via-sms', { paymentReceiveId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,6 +71,12 @@ function PaymentReceiveActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeletePaymentReceive}
         />
+        <NavbarDivider />
+        <MoreMenuItems
+          payload={{
+            onNotifyViaSMS: handleNotifyViaSMS,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index b6e17c191..608805a00 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -14,7 +14,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
 import { safeCallback, compose } from 'utils';
@@ -46,6 +46,11 @@ function ReceiptDetailActionBar({
   const onPrintReceipt = () => {
     openDialog('receipt-pdf-preview', { receiptId });
   };
+
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-receipt-via-sms', { receiptId });
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -69,6 +74,12 @@ function ReceiptDetailActionBar({
           intent={Intent.DANGER}
           onClick={safeCallback(onDeleteReceipt)}
         />
+        <NavbarDivider />
+        <MoreMenuItems
+          payload={{
+            onNotifyViaSMS: handleNotifyViaSMS,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
new file mode 100644
index 000000000..021bd7724
--- /dev/null
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+
+import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
+
+import { CreateNotifyViaSMSFormSchema } from './NotifyViaSMSForm.schema';
+import NotifyViaSMSFormFields from './NotifyViaSMSFormFields';
+import NotifyViaSMSFormFloatingActions from './NotifyViaSMSFormFloatingActions';
+
+import { transformToForm, saveInvoke } from 'utils';
+
+const defaultInitialValues = {
+  customer_name: '',
+  customer_personal_phone: '',
+  sms_message: '',
+};
+
+/**
+ * Notify Via SMS Form.
+ */
+function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...transformToForm(NotificationDetail, defaultInitialValues),
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateNotifyViaSMSFormSchema}
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+    >
+      <Form>
+        <NotifyViaSMSFormFields />
+        <NotifyViaSMSFormFloatingActions dialogName={NotificationName} />
+      </Form>
+    </Formik>
+  );
+}
+
+export default NotifyViaSMSForm;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
similarity index 84%
rename from src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
rename to src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
index b624980db..f32e4a3a2 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
@@ -8,4 +8,4 @@ const Schema = Yup.object().shape({
   sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
 });
 
-export const CreateNotifyContactViaSMSFormSchema = Schema;
+export const CreateNotifyViaSMSFormSchema = Schema;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
similarity index 87%
rename from src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
rename to src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index baf1f7a04..59d79cca3 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -2,25 +2,13 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'components';
 
-import { useAutofocus } from 'hooks';
-import {
-  Classes,
-  FormGroup,
-  TextArea,
-  Intent,
-  InputGroup,
-} from '@blueprintjs/core';
+import { Classes, FormGroup, TextArea, InputGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 import { FieldRequiredHint } from 'components';
 
-import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
-
-/**
- * Notify contact via SMS fields.
- */
-function NotifyContactViaSMSFormFields() {
+function NotifyViaSMSFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/* ----------- Send Notification to ----------- */}
@@ -88,4 +76,4 @@ function NotifyContactViaSMSFormFields() {
   );
 }
 
-export default NotifyContactViaSMSFormFields;
+export default NotifyViaSMSFormFields;
diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
similarity index 77%
rename from src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js
rename to src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
index 8b785bbf1..899125f5f 100644
--- a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
@@ -1,21 +1,20 @@
 import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+
 import { FormattedMessage as T } from 'components';
 
-import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
-function NotifyContactViaSMSFormFloatingActions({
+function NotifyViaSMSFormFloatingActions({
   // #withDialogActions
   closeDialog,
+  dialogName,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
-  const { dialogName } = useNotifyContactViaSMSContext();
-
   // Handle close button click.
   const handleCancelBtnClick = () => {
     closeDialog(dialogName);
@@ -39,7 +38,4 @@ function NotifyContactViaSMSFormFloatingActions({
     </div>
   );
 }
-
-export default compose(withDialogActions)(
-  NotifyContactViaSMSFormFloatingActions,
-);
+export default compose(withDialogActions)(NotifyViaSMSFormFloatingActions);

From 4d89f1e0e0c44f58326a579803db870df8b4384f Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 7 Nov 2021 20:11:15 +0200
Subject: [PATCH 09/41] feat: add notify by sms .

---
 .../NotifyEstimateViaSMSForm.js               | 20 +++++++++-------
 .../NotifyEstimateViaSMSFormProvider.js       | 20 ++++++++++++----
 .../NotifyInvoiceViaSMSFormProvider.js        |  4 ++--
 .../NotifyPaymentReceiveViaFormProvider.js    | 22 ++++++++++++++----
 .../NotifyPaymentReceiveViaSMSForm.js         | 23 +++++++++++--------
 .../NotifyPaymentReceiveViaSMSDialog/index.js |  2 +-
 .../NotifyReceiptViaSMSForm.js                | 20 +++++++++-------
 .../NotifyReceiptViaSMSFormProvider.js        | 15 ++++++++----
 .../NotifyViaSMS/NotifyViaSMSForm.js          |  2 +-
 .../NotifyViaSMS/NotifyViaSMSForm.schema.js   |  2 +-
 .../NotifyViaSMS/NotifyViaSMSFormFields.js    |  6 ++---
 src/hooks/query/estimates.js                  | 17 +++++++-------
 src/hooks/query/invoices.js                   |  9 ++++----
 src/hooks/query/paymentReceives.js            | 21 ++++++++++++-----
 src/hooks/query/receipts.js                   | 17 +++++++++-----
 src/hooks/query/types.js                      |  8 +++----
 src/lang/en/index.json                        |  8 +++++--
 17 files changed, 141 insertions(+), 75 deletions(-)

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index 5019bad7e..851c9fcc1 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -14,32 +14,36 @@ function NotifyEstimateViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { dialogName, estimateId } = useEstimateViaSMSContext();
+  const {
+    estimateId,
+    dialogName,
+    estimateSMSDetail,
+    createNotifyEstimateBySMSMutate,
+  } = useEstimateViaSMSContext();
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: intl.get('notify_via_sms.dialog.success_message'),
+        message: intl.get('notify_estimate_via_sms.dialog.success_message'),
         intent: Intent.SUCCESS,
       });
       closeDialog(dialogName);
     };
 
     // Handle request response errors.
-    const onError = ({
-      response: {
-        data: { errors },
-      },
-    }) => {
+    const onError = () => {
       setSubmitting(false);
     };
+    createNotifyEstimateBySMSMutate([estimateId, values])
+      .then(onSuccess)
+      .then(onError);
   };
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={{}}
+      NotificationDetail={estimateSMSDetail}
       NotificationName={dialogName}
       onSubmit={handleFormSubmit}
     />
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
index 5f3d8d38e..f913bdc23 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { DialogContent } from 'components';
-// import {  } from 'hooks/query';
+import {
+  useEstimateSMSDetail,
+  useCreateNotifyEstimateBySMS,
+} from 'hooks/query';
 
 const NotifyEstimateViaSMSContext = React.createContext();
 
@@ -9,16 +12,25 @@ function NotifyEstimateViaSMSFormProvider({
   dialogName,
   ...props
 }) {
+  const { data: estimateSMSDetail, isLoading: isEstimateSMSDetailLoading } =
+    useEstimateSMSDetail(estimateId, {
+      enabled: !!estimateId,
+    });
+
+  // Create notfiy estimate by sms mutations.
+  const { mutateAsync: createNotifyEstimateBySMSMutate } =
+    useCreateNotifyEstimateBySMS();
+
   // State provider.
   const provider = {
     estimateId,
     dialogName,
+    estimateSMSDetail,
+    createNotifyEstimateBySMSMutate,
   };
 
   return (
-    <DialogContent
-    // isLoading={}
-    >
+    <DialogContent isLoading={isEstimateSMSDetailLoading}>
       <NotifyEstimateViaSMSContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
index 4793db09a..26faac775 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+import { useCreateNotifyInvoiceBySMS, useInvoiceSMSDetail } from 'hooks/query';
 
 const NotifyInvoiceViaSMSContext = React.createContext();
 
 function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
   const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
-    useInvocieSMSDetails(invoiceId, {
+    useInvoiceSMSDetail(invoiceId, {
       enabled: !!invoiceId,
     });
 
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
index 9ee75ecf8..46c164a0f 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { DialogContent } from 'components';
-// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+import {
+  useCreateNotifyPaymentReceiveBySMS,
+  usePaymentReceiveSMSDetail,
+} from 'hooks/query';
 
 const NotifyPaymentReceiveViaSMSContext = React.createContext();
 
@@ -9,16 +12,27 @@ function NotifyPaymentReceiveViaFormProvider({
   dialogName,
   ...props
 }) {
+  // Create notfiy receipt via sms mutations.
+  const { mutateAsync: createNotifyPaymentReceivetBySMSMutate } =
+    useCreateNotifyPaymentReceiveBySMS();
+
+  const {
+    data: paymentReceiveMSDetail,
+    isLoading: isPaymentReceiveSMSDetailLoading,
+  } = usePaymentReceiveSMSDetail(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+
   // State provider.
   const provider = {
     paymentReceiveId,
     dialogName,
+    paymentReceiveMSDetail,
+    createNotifyPaymentReceivetBySMSMutate,
   };
 
   return (
-    <DialogContent
-    // isLoading={}
-    >
+    <DialogContent isLoading={isPaymentReceiveSMSDetailLoading}>
       <NotifyPaymentReceiveViaSMSContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index 0db3d6100..de79deecb 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -17,33 +17,38 @@ function NotifyPaymentReceiveViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { dialogName, paymentReceiveId } =
-    useNotifyPaymentReceiveViaSMSContext();
+  const {
+    dialogName,
+    paymentReceiveId,
+    paymentReceiveMSDetail,
+    createNotifyPaymentReceivetBySMSMutate,
+  } = useNotifyPaymentReceiveViaSMSContext();
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: intl.get('notify_via_sms.dialog.success_message'),
+        message: intl.get(
+          'notify_payment_receive_via_sms.dialog.success_message',
+        ),
         intent: Intent.SUCCESS,
       });
       closeDialog(dialogName);
     };
 
     // Handle request response errors.
-    const onError = ({
-      response: {
-        data: { errors },
-      },
-    }) => {
+    const onError = ({}) => {
       setSubmitting(false);
     };
+    createNotifyPaymentReceivetBySMSMutate([paymentReceiveId, values])
+      .then(onSuccess)
+      .catch(onError);
   };
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={{}}
+      NotificationDetail={paymentReceiveMSDetail}
       NotificationName={dialogName}
       onSubmit={handleFormSubmit}
     />
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
index 26f2a4df3..f9ce607f9 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
@@ -25,7 +25,7 @@ function NotifyPaymentReciveViaSMSDialog({
       <DialogSuspense>
         <NotifyPaymentReceiveViaSMSDialogContent
           dialogName={dialogName}
-          paymnetReceive={paymentReceiveId}
+          paymentReceive={paymentReceiveId}
         />
       </DialogSuspense>
     </Dialog>
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index 5ca513ce9..c9ae06410 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -17,32 +17,36 @@ function NotifyReceiptViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { dialogName, receiptId } = useNotifyReceiptViaSMSContext();
+  const {
+    dialogName,
+    receiptId,
+    receiptSMSDetail,
+    createNotifyReceiptBySMSMutate,
+  } = useNotifyReceiptViaSMSContext();
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: intl.get('notify_via_sms.dialog.success_message'),
+        message: intl.get('notify_receipt_via_sms.dialog.success_message'),
         intent: Intent.SUCCESS,
       });
       closeDialog(dialogName);
     };
 
     // Handle request response errors.
-    const onError = ({
-      response: {
-        data: { errors },
-      },
-    }) => {
+    const onError = ({}) => {
       setSubmitting(false);
     };
+    createNotifyReceiptBySMSMutate([receiptId, values])
+      .then(onSuccess)
+      .catch(onError);
   };
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={{}}
+      NotificationDetail={receiptSMSDetail}
       NotificationName={dialogName}
       onSubmit={handleFormSubmit}
     />
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
index fa8dce2b9..3f2515319 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
@@ -1,22 +1,29 @@
 import React from 'react';
 import { DialogContent } from 'components';
-// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
+import { useCreateNotifyReceiptBySMS, useReceiptSMSDetail } from 'hooks/query';
 
 const NotifyReceiptViaSMSContext = React.createContext();
 
 function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
   // Create notfiy receipt via sms mutations.
+  const { mutateAsync: createNotifyReceiptBySMSMutate } =
+    useCreateNotifyReceiptBySMS();
+
+  const { data: receiptSMSDetail, isLoading: isReceiptSMSDetailLoading } =
+    useReceiptSMSDetail(receiptId, {
+      enabled: !!receiptId,
+    });
 
   // State provider.
   const provider = {
     receiptId,
     dialogName,
+    receiptSMSDetail,
+    createNotifyReceiptBySMSMutate,
   };
 
   return (
-    <DialogContent
-    // isLoading={}
-    >
+    <DialogContent isLoading={isReceiptSMSDetailLoading}>
       <NotifyReceiptViaSMSContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index 021bd7724..93eb57375 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -11,7 +11,7 @@ import { transformToForm, saveInvoke } from 'utils';
 
 const defaultInitialValues = {
   customer_name: '',
-  customer_personal_phone: '',
+  customer_phone_number: '',
   sms_message: '',
 };
 
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
index f32e4a3a2..3e855eb49 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
@@ -4,7 +4,7 @@ import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   customer_name: Yup.string().required(),
-  customer_personal_phone: Yup.number().required(),
+  customer_phone_number: Yup.number().required(),
   sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
 });
 
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index 59d79cca3..37c88c1e7 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -31,15 +31,15 @@ function NotifyViaSMSFormFields() {
       </FastField>
 
       {/* ----------- Phone number ----------- */}
-      <FastField name={'customer_personal_phone'}>
+      <FastField name={'customer_phone_number'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'phone_number'} />}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="customer_personal_phone" />}
+            helperText={<ErrorMessage name="customer_phone_number" />}
             className={classNames(
-              'form-group--customer_personal_phone',
+              'form-group--customer_phone_number',
               CLASSES.FILL,
             )}
           >
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index 2b6766329..0000e6120 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -195,30 +195,31 @@ export function useCreateNotifyEstimateBySMS(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (id) => apiRequest.post(`sales/estimates/${id}/notify-by-sms`),
+    ([id, values]) =>
+      apiRequest.post(`sales/estimates/${id}/notify-by-sms`, values),
     {
-      onSuccess: (res, id) => {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_SALE_ESTIMATE_BY_SMS, id]);
+
         // Common invalidate queries.
         commonInvalidateQueries(queryClient);
-
-        // Invalidate  sale estimate.
-        queryClient.invalidateQueries([t.NOTIFY_SALE_ESTIMATE_BY_SMS, id]);
       },
       ...props,
     },
   );
 }
 
-export function useEstimateSMS(estimateId, props, requestProps) {
+export function useEstimateSMSDetail(estimateId, props, requestProps) {
   return useRequestQuery(
-    [t.SALE_ESTIMATE_SMS, estimateId],
+    [t.SALE_ESTIMATE_SMS_DETAIL, estimateId],
     {
       method: 'get',
       url: `sales/estimates/${estimateId}/sms-details`,
       ...requestProps,
     },
     {
-      select: (res) => res.data,
+      select: (res) => res.data.data,
       defaultData: {},
       ...props,
     },
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 9948d6064..6c1c7f767 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -239,9 +239,10 @@ export function useCreateNotifyInvoiceBySMS(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (id) => apiRequest.post(`sales/invoices/${id}/notify-by-sms`),
+    ([id, values]) =>
+      apiRequest.post(`sales/invoices/${id}/notify-by-sms`, values),
     {
-      onSuccess: (res, id) => {
+      onSuccess: (res, [id, values]) => {
         // Invalidate
         queryClient.invalidateQueries([t.NOTIFY_SALE_INVOICE_BY_SMS, id]);
 
@@ -253,9 +254,9 @@ export function useCreateNotifyInvoiceBySMS(props) {
   );
 }
 
-export function useInvocieSMSDetails(invoiceId, props, requestProps) {
+export function useInvoiceSMSDetail(invoiceId, props, requestProps) {
   return useRequestQuery(
-    [t.SALE_INVOICE_SMS, invoiceId],
+    [t.SALE_INVOICE_SMS_DETAIL, invoiceId],
     {
       method: 'get',
       url: `sales/invoices/${invoiceId}/sms-details`,
diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js
index ea6ba6274..06e7b39cb 100644
--- a/src/hooks/query/paymentReceives.js
+++ b/src/hooks/query/paymentReceives.js
@@ -180,9 +180,10 @@ export function useCreateNotifyPaymentReceiveBySMS(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (id) => apiRequest.post(`sales/payment_receives/${id}/notify-by-sms`),
+    ([id, values]) =>
+      apiRequest.post(`sales/payment_receives/${id}/notify-by-sms`, values),
     {
-      onSuccess: (res, id) => {
+      onSuccess: (res, [id, values]) => {
         // Invalidate
         queryClient.invalidateQueries([t.NOTIFY_PAYMENT_RECEIVE_BY_SMS, id]);
 
@@ -194,12 +195,20 @@ export function useCreateNotifyPaymentReceiveBySMS(props) {
   );
 }
 
-export function usePaymentReceiveSMS(id, props, requestProps) {
+export function usePaymentReceiveSMSDetail(
+  paymentReceiveId,
+  props,
+  requestProps,
+) {
   return useRequestQuery(
-    [t.PAYMENT_RECEIVE_SMS, id],
-    { method: 'get', url: `sales/payment_receives/${id}/sms-details`, ...requestProps },
+    [t.PAYMENT_RECEIVE_SMS_DETAIL, paymentReceiveId],
     {
-      select: (res) => res.data,
+      method: 'get',
+      url: `sales/payment_receives/${paymentReceiveId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
       defaultData: {},
       ...props,
     },
diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js
index 6db29e4c3..a9b0c705b 100644
--- a/src/hooks/query/receipts.js
+++ b/src/hooks/query/receipts.js
@@ -168,9 +168,10 @@ export function useCreateNotifyReceiptBySMS(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
   return useMutation(
-    (id) => apiRequest.post(`sales/receipts/${id}/notify-by-sms`),
+    ([id, values]) =>
+      apiRequest.post(`sales/receipts/${id}/notify-by-sms`, values),
     {
-      onSuccess: (res, id) => {
+      onSuccess: (res, [id, values]) => {
         queryClient.invalidateQueries([t.NOTIFY_SALE_RECEIPT_BY_SMS, id]);
 
         // Invalidate queries.
@@ -181,12 +182,16 @@ export function useCreateNotifyReceiptBySMS(props) {
   );
 }
 
-export function useReceiptSMS(receiptId, props, requestProps) {
+export function useReceiptSMSDetail(receiptId, props, requestProps) {
   return useRequestQuery(
-    [t.SALE_RECEIPT_SMS, receiptId],
-    { method: 'get', url: `sales/receipts/${receiptId}/sms-details`, ...requestProps },
+    [t.SALE_RECEIPT_SMS_DETAIL, receiptId],
     {
-      select: (res) => res.data,
+      method: 'get',
+      url: `sales/receipts/${receiptId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
       defaultData: {},
       ...props,
     },
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 9e233ab00..1aebbd8e1 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -51,14 +51,14 @@ const ITEMS = {
 const SALE_ESTIMATES = {
   SALE_ESTIMATES: 'SALE_ESTIMATES',
   SALE_ESTIMATE: 'SALE_ESTIMATE',
-  SALE_ESTIMATE_SMS: 'SALE_ESTIMATE_SMS',
+  SALE_ESTIMATE_SMS_DETAIL: 'SALE_ESTIMATE_SMS_DETAIL',
   NOTIFY_SALE_ESTIMATE_BY_SMS: 'NOTIFY_SALE_ESTIMATE_BY_SMS',
 };
 
 const SALE_RECEIPTS = {
   SALE_RECEIPTS: 'SALE_RECEIPTS',
   SALE_RECEIPT: 'SALE_RECEIPT',
-  SALE_RECEIPT_SMS: 'SALE_RECEIPT_SMS',
+  SALE_RECEIPT_SMS_DETAIL: 'SALE_RECEIPT_SMS_DETAIL',
   NOTIFY_SALE_RECEIPT_BY_SMS: 'NOTIFY_SALE_RECEIPT_BY_SMS',
 };
 
@@ -83,7 +83,7 @@ const PAYMENT_RECEIVES = {
   PAYMENT_RECEIVE: 'PAYMENT_RECEIVE',
   PAYMENT_RECEIVE_NEW_ENTRIES: 'PAYMENT_RECEIVE_NEW_ENTRIES',
   PAYMENT_RECEIVE_EDIT_PAGE: 'PAYMENT_RECEIVE_EDIT_PAGE',
-  PAYMENT_RECEIVE_SMS: 'PAYMENT_RECEIVE_SMS',
+  PAYMENT_RECEIVE_SMS_DETAIL: 'PAYMENT_RECEIVE_SMS_DETAIL',
   NOTIFY_PAYMENT_RECEIVE_BY_SMS: 'NOTIFY_PAYMENT_RECEIVE_BY_SMS',
 };
 
@@ -91,7 +91,7 @@ const SALE_INVOICES = {
   SALE_INVOICES: 'SALE_INVOICES',
   SALE_INVOICE: 'SALE_INVOICE',
   SALE_INVOICES_DUE: 'SALE_INVOICES_DUE',
-  SALE_INVOICE_SMS: 'SALE_INVOICE_SMS',
+  SALE_INVOICE_SMS_DETAIL: 'SALE_INVOICE_SMS_DETAIL',
   NOTIFY_SALE_INVOICE_BY_SMS: 'NOTIFY_SALE_INVOICE_BY_SMS',
   BAD_DEBT: 'BAD_DEBT',
   CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index b61f78f99..267d1a00d 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1430,7 +1430,10 @@
   "notify_via_sms.dialog.send_notification_to":"Send notification to",
   "notify_via_sms.dialog.message_text":"Message Text",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notify_via_sms.dialog.success_message":"To notify have been successfully",
+  "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
+  "notify_estimate_via_sms.dialog.success_message":"The sale estimate sms notification has been sent successfully",
+  "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
+  "notify_payment_receive_via_sms.dialog.success_message":"The payment notification has been sent successfully.",
   "send": "Send",
   "sms_integration.label":"SMS Integration",
   "sms_integration.label.overview":"Overview",
@@ -1441,4 +1444,5 @@
   "sms_message.label_auto":"Auto",
   "sms_message":"SMS message",
   "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
-}
\ No newline at end of file
+}
+

From 6d67d6163ddbb690caf2e36401b4e84c5ba6bc13 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 13:20:49 +0200
Subject: [PATCH 10/41] feat: handle error.

---
 .../NotifyEstimateViaSMSForm.js               |  9 +++++++--
 .../NotifyInvoiceViaSMSForm.js                |  3 ++-
 .../NotifyPaymentReceiveViaSMSForm.js         |  9 +++++++--
 .../NotifyReceiptViaSMSForm.js                |  9 +++++++--
 .../NotifyViaSMS/NotifyViaSMSForm.schema.js   |  2 +-
 src/containers/NotifyViaSMS/utils.js          | 12 +++++++++++
 src/lang/ar/index.json                        | 20 ++++++++++++++++++-
 src/lang/en/index.json                        |  1 +
 8 files changed, 56 insertions(+), 9 deletions(-)
 create mode 100644 src/containers/NotifyViaSMS/utils.js

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index 851c9fcc1..e4eb9fea4 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -6,6 +6,7 @@ import { AppToaster } from 'components';
 
 import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
 import { useEstimateViaSMSContext } from './NotifyEstimateViaSMSFormProvider';
+import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
@@ -33,8 +34,12 @@ function NotifyEstimateViaSMSForm({
     };
 
     // Handle request response errors.
-    const onError = () => {
-      setSubmitting(false);
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      transformErrors(errors);
     };
     createNotifyEstimateBySMSMutate([estimateId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index 0f2ae70fc..f3de4151f 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -6,6 +6,7 @@ import { AppToaster } from 'components';
 
 import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
 import { useNotifyInvoiceViaSMSContext } from './NotifyInvoiceViaSMSFormProvider';
+import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
@@ -41,7 +42,7 @@ function NotifyInvoiceViaSMSForm({
         data: { errors },
       },
     }) => {
-      setSubmitting(false);
+      transformErrors(errors);
     };
     createNotifyInvoiceBySMSMutate([invoiceId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index de79deecb..f37ab6c45 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -6,6 +6,7 @@ import { AppToaster } from 'components';
 
 import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
 import { useNotifyPaymentReceiveViaSMSContext } from './NotifyPaymentReceiveViaFormProvider';
+import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
@@ -38,8 +39,12 @@ function NotifyPaymentReceiveViaSMSForm({
     };
 
     // Handle request response errors.
-    const onError = ({}) => {
-      setSubmitting(false);
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      transformErrors(errors);
     };
     createNotifyPaymentReceivetBySMSMutate([paymentReceiveId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index c9ae06410..52293ccf5 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -6,6 +6,7 @@ import { AppToaster } from 'components';
 
 import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
 import { useNotifyReceiptViaSMSContext } from './NotifyReceiptViaSMSFormProvider';
+import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
@@ -36,8 +37,12 @@ function NotifyReceiptViaSMSForm({
     };
 
     // Handle request response errors.
-    const onError = ({}) => {
-      setSubmitting(false);
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      transformErrors(errors);
     };
     createNotifyReceiptBySMSMutate([receiptId, values])
       .then(onSuccess)
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
index 3e855eb49..ff3114609 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.js
@@ -4,7 +4,7 @@ import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   customer_name: Yup.string().required(),
-  customer_phone_number: Yup.number().required(),
+  customer_phone_number: Yup.number(),
   sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
 });
 
diff --git a/src/containers/NotifyViaSMS/utils.js b/src/containers/NotifyViaSMS/utils.js
new file mode 100644
index 000000000..5ed16cae1
--- /dev/null
+++ b/src/containers/NotifyViaSMS/utils.js
@@ -0,0 +1,12 @@
+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_SMS_NOTIFY_PHONE_INVALID')) {
+    AppToaster.show({
+      message: intl.get('notify_via_sms.dialog.error_message'),
+      intent: Intent.DANGER,
+    });
+  }
+};
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 945c453cb..4281ccc13 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1439,5 +1439,23 @@
   "bad_debt.dialog.header_note": "يمكن للبائع تحميل مبلغ الفاتورة على حساب مصروفات الديون المعدومة عندما يكون من المؤكد أن الفاتورة لن يتم دفعها.",
   "bad_debt.dialog.success_message":"تم شطب فاتورة البيع المقدمة بنجاح.",
   "bad_debt.cancel_alert.success_message":"تم إلغاء شطب فاتورة البيع المقدمة بنجاح.",
-  "bad_debt.cancel_alert.message": "هل أنت متأكد أنك تريد شطب هذه الفاتورة؟ "
+  "bad_debt.cancel_alert.message": "هل أنت متأكد أنك تريد شطب هذه الفاتورة؟ ",
+  "notify_via_sms.dialog.send_notification_to":"إرسال إشعار إلى ",
+  "notify_via_sms.dialog.message_text":"نص رسالة ",
+  "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
+  "notify_via_sms.dialog.error_message":"Notify vis SMS",
+  "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
+  "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار  الرسائل القصيرة الخاصة بتقدير المبيعات بنجاح. ",
+  "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
+  "notify_payment_receive_via_sms.dialog.success_message":"تم إرسال إشعار الدفع بنجاح. ",
+  "send": "إرسال",
+  "sms_integration.label":"SMS Integration",
+  "sms_integration.label.overview":"نظرة عامة",
+  "sms_integration.label.sms_messages":"رسائل SMS ",
+  "sms_message.label.sms_messages_template":" إشعارات رسائل  قصيرة ",
+  "sms_message.label_mesage":"رسالة ",
+  "sms_message.label_Notification":"إشعار",
+  "sms_message.label_auto":"Auto",
+  "sms_message":"رسالة SMS"  ,
+  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 267d1a00d..87aedd67a 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1430,6 +1430,7 @@
   "notify_via_sms.dialog.send_notification_to":"Send notification to",
   "notify_via_sms.dialog.message_text":"Message Text",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
+  "notify_via_sms.dialog.error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
   "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
   "notify_estimate_via_sms.dialog.success_message":"The sale estimate sms notification has been sent successfully",
   "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",

From adc6b336e0df3a8aa2808ccc3f4de5be0d22775a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 14:54:11 +0200
Subject: [PATCH 11/41] fix: handle error.

---
 .../NotifyEstimateViaSMSForm.js                        |  7 +++++--
 .../NotifyInvoiceViaSMSForm.js                         |  5 ++++-
 .../NotifyPaymentReceiveViaSMSForm.js                  |  5 ++++-
 .../NotifyReceiptViaSMSForm.js                         |  5 ++++-
 src/containers/NotifyViaSMS/utils.js                   | 10 +++++++++-
 src/lang/ar/index.json                                 |  2 ++
 src/lang/en/index.json                                 |  3 ++-
 7 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index e4eb9fea4..6613bcd37 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -39,11 +39,14 @@ function NotifyEstimateViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyEstimateBySMSMutate([estimateId, values])
       .then(onSuccess)
-      .then(onError);
+      .catch(onError);
   };
 
   return (
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index f3de4151f..96b684f82 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -42,7 +42,10 @@ function NotifyInvoiceViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyInvoiceBySMSMutate([invoiceId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index f37ab6c45..997890d8b 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -44,7 +44,10 @@ function NotifyPaymentReceiveViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyPaymentReceivetBySMSMutate([paymentReceiveId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index 52293ccf5..b778f97d4 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -42,7 +42,10 @@ function NotifyReceiptViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyReceiptBySMSMutate([receiptId, values])
       .then(onSuccess)
diff --git a/src/containers/NotifyViaSMS/utils.js b/src/containers/NotifyViaSMS/utils.js
index 5ed16cae1..e000b7f13 100644
--- a/src/containers/NotifyViaSMS/utils.js
+++ b/src/containers/NotifyViaSMS/utils.js
@@ -2,11 +2,19 @@ import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
 
-export const transformErrors = (errors) => {
+export const transformErrors = (errors, { setErrors }) => {
   if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
     AppToaster.show({
       message: intl.get('notify_via_sms.dialog.error_message'),
       intent: Intent.DANGER,
     });
   }
+
+  if (errors.find((error) => error.type === 'CUSTOMER_HAS_NO_PHONE_NUMBER')) {
+    setErrors({
+      customer_phone_number: intl.get(
+        'notify_via_sms.dialog.customer_no_phone_error_message',
+      ),
+    });
+  }
 };
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 4281ccc13..9edc01ec9 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1444,6 +1444,8 @@
   "notify_via_sms.dialog.message_text":"نص رسالة ",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
   "notify_via_sms.dialog.error_message":"Notify vis SMS",
+    "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_via_sms.dialog.customer_no_phone_error_message":"الزبون ليس لديه رقم هاتف.",
   "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
   "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار  الرسائل القصيرة الخاصة بتقدير المبيعات بنجاح. ",
   "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 87aedd67a..1c791975b 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1430,7 +1430,8 @@
   "notify_via_sms.dialog.send_notification_to":"Send notification to",
   "notify_via_sms.dialog.message_text":"Message Text",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notify_via_sms.dialog.error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_via_sms.dialog.customer_no_phone_error_message":"The customer has no phone number.",
   "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
   "notify_estimate_via_sms.dialog.success_message":"The sale estimate sms notification has been sent successfully",
   "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",

From 92d8096f3a882097a20f330ed54062f30b34f92f Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 15:00:44 +0200
Subject: [PATCH 12/41] feat: add Invalidate queries.

---
 src/hooks/query/customers.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/hooks/query/customers.js b/src/hooks/query/customers.js
index 3e397972a..75a6d6d3b 100644
--- a/src/hooks/query/customers.js
+++ b/src/hooks/query/customers.js
@@ -20,6 +20,12 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate the financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate SMS details.
+  queryClient.invalidateQueries(t.SALE_ESTIMATE_SMS_DETAIL);
+  queryClient.invalidateQueries(t.SALE_INVOICE_SMS_DETAIL);
+  queryClient.invalidateQueries(t.SALE_RECEIPT_SMS_DETAIL);
+  queryClient.invalidateQueries(t.PAYMENT_RECEIVE_SMS_DETAIL);
 };
 
 // Customers response selector.

From 5b09d8279e6a44898a1a8b17e9feb288bda49a9c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 15:13:41 +0200
Subject: [PATCH 13/41] feat: handle error sms messgae dialog.

---
 .../Dialogs/SMSMessageDialog/SMSMessageForm.js    |  4 ++++
 src/containers/Dialogs/SMSMessageDialog/utils.js  | 15 +++++++++++++++
 src/lang/en/index.json                            |  3 ++-
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/containers/Dialogs/SMSMessageDialog/utils.js

diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
index 3a98f36a6..19924f2c8 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
@@ -9,6 +9,7 @@ import { AppToaster } from 'components';
 import SMSMessageFormContent from './SMSMessageFormContent';
 import { CreateSMSMessageFormSchema } from './SMSMessageForm.schema';
 import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+import { transformErrors } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -60,6 +61,9 @@ function SMSMessageForm({
         data: { errors },
       },
     }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
       setSubmitting(false);
     };
 
diff --git a/src/containers/Dialogs/SMSMessageDialog/utils.js b/src/containers/Dialogs/SMSMessageDialog/utils.js
new file mode 100644
index 000000000..b4f46f1f7
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/utils.js
@@ -0,0 +1,15 @@
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import intl from 'react-intl-universal';
+
+export const transformErrors = (errors, { setErrors }) => {
+  if (
+    errors.find((error) => error.type === 'UNSUPPORTED_SMS_MESSAGE_VARIABLES')
+  ) {
+    setErrors({
+      message_text: intl.get(
+        'sms_message.dialog.unsupported_variables_error_message',
+      ),
+    });
+  }
+};
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 1c791975b..6fec2ea85 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1445,6 +1445,7 @@
   "sms_message.label_Notification":"Notification",
   "sms_message.label_auto":"Auto",
   "sms_message":"SMS message",
-  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
+  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully.",
+  "sms_message.dialog.unsupported_variables_error_message":"Unsupported variables"
 }
 

From 8c2d138976e35f4ebaf0a29336972c9408462b1d Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 16:10:54 +0200
Subject: [PATCH 14/41] fix: disable sort in SMS integration table.

---
 src/containers/Preferences/SMSIntegration/components.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 841e8f8bd..a8bd30796 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -39,12 +39,14 @@ export function useSMSIntegrationTableColumns() {
       accessor: NotificationAccessor,
       className: 'notification',
       width: '180',
+      disableSortBy: true,
     },
     {
       Header: intl.get('service'),
       accessor: 'module_formatted',
       className: 'service',
       width: '80',
+      disableSortBy: true,
     },
     {
       Header: intl.get('sms_message.label_mesage'),
@@ -53,6 +55,7 @@ export function useSMSIntegrationTableColumns() {
       className: 'sms_message',
       clickable: true,
       width: '180',
+      disableSortBy: true,
     },
     {
       Header: intl.get('sms_message.label_auto'),

From 7a1c9caa70d55e53c81cc2ed3ea7d1a6b41c9da9 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 8 Nov 2021 16:41:36 +0200
Subject: [PATCH 15/41] feat: add context menu in sms message table.

---
 .../Dialogs/SMSMessageDialog/index.js         |  2 +-
 .../SMSIntegration/SMSMessagesDataTable.js    | 10 +++++--
 .../Preferences/SMSIntegration/components.js  | 29 +++++++++++++++----
 src/lang/ar/index.json                        | 10 ++++---
 src/lang/en/index.json                        | 13 +++++----
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/containers/Dialogs/SMSMessageDialog/index.js b/src/containers/Dialogs/SMSMessageDialog/index.js
index acb3c8784..aadb1b13e 100644
--- a/src/containers/Dialogs/SMSMessageDialog/index.js
+++ b/src/containers/Dialogs/SMSMessageDialog/index.js
@@ -20,7 +20,7 @@ function SMSMessageDialog({
   return (
     <Dialog
       name={dialogName}
-      title={intl.get('sms_message')}
+      title={intl.get('sms_message.dialog.label')}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
index db3aefad8..382a03b67 100644
--- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { DataTableEditable, DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
-import { useSMSIntegrationTableColumns } from './components';
+import { useSMSIntegrationTableColumns, ActionsMenu } from './components';
 import { useSMSIntegrationContext } from './SMSIntegrationProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -18,10 +18,12 @@ function SMSMessagesDataTable({
   const { notifications, isSMSNotificationsLoading } =
     useSMSIntegrationContext();
 
-  const handleEditSMSMessage = ({ key }) => {
+  const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };
 
+  const handleEnableNotification = () => {};
+
   return (
     <DataTable
       columns={columns}
@@ -30,8 +32,10 @@ function SMSMessagesDataTable({
       progressBarLoading={isSMSNotificationsLoading}
       TableLoadingRenderer={TableSkeletonRows}
       noInitialFetch={true}
+      ContextMenu={ActionsMenu}
       payload={{
-        onEditSMSMessage: handleEditSMSMessage,
+        onEditMessageText: handleEditMessageText,
+        onEnableNotification: handleEnableNotification,
       }}
     />
   );
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index a8bd30796..ee02b1249 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -1,8 +1,27 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { SwitchFieldCell } from 'components/DataTableCells';
 import { safeCallback } from 'utils';
 
+export function ActionsMenu({
+  payload: { onEditMessageText, onEnableNotification },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('edit_message_text')}
+        onClick={safeCallback(onEditMessageText, original)}
+      />
+      <MenuItem
+        text={intl.get('enable_notification')}
+        onClick={safeCallback(onEnableNotification, original)}
+      />
+    </Menu>
+  );
+}
+
 /**
  * Notification accessor.
  */
@@ -18,14 +37,14 @@ export const NotificationAccessor = (row) => {
 };
 
 export const SMSMessageCell = ({
-  payload: { onEditSMSMessage },
+  payload: { onEditMessageText },
   row: { original },
 }) => (
   <div>
     {original.sms_message}
     <span
       className="edit-text"
-      onClick={safeCallback(onEditSMSMessage, original)}
+      onClick={safeCallback(onEditMessageText, original)}
     >
       {'Edit'}
     </span>
@@ -35,7 +54,7 @@ export const SMSMessageCell = ({
 export function useSMSIntegrationTableColumns() {
   return React.useMemo(() => [
     {
-      Header: intl.get('sms_message.label_Notification'),
+      Header: intl.get('sms_messages.label_notification'),
       accessor: NotificationAccessor,
       className: 'notification',
       width: '180',
@@ -49,7 +68,7 @@ export function useSMSIntegrationTableColumns() {
       disableSortBy: true,
     },
     {
-      Header: intl.get('sms_message.label_mesage'),
+      Header: intl.get('sms_messages.label_mesage'),
       accessor: 'sms_message',
       Cell: SMSMessageCell,
       className: 'sms_message',
@@ -58,7 +77,7 @@ export function useSMSIntegrationTableColumns() {
       disableSortBy: true,
     },
     {
-      Header: intl.get('sms_message.label_auto'),
+      Header: intl.get('sms_messages.label_auto'),
       accessor: 'is_notification_enabled',
       Cell: SwitchFieldCell,
       className: 'is_notification_enabled',
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 9edc01ec9..af6998c5c 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1455,9 +1455,11 @@
   "sms_integration.label.overview":"نظرة عامة",
   "sms_integration.label.sms_messages":"رسائل SMS ",
   "sms_message.label.sms_messages_template":" إشعارات رسائل  قصيرة ",
-  "sms_message.label_mesage":"رسالة ",
-  "sms_message.label_Notification":"إشعار",
-  "sms_message.label_auto":"Auto",
+  "sms_messages.label_mesage":"رسالة ",
+  "sms_messages.label_notification":"إشعار",
+  "sms_messages.label_auto":"Auto",
   "sms_message":"رسالة SMS"  ,
-  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
+  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully.",
+  "edit_message_text":"تعديل نص رسالة",
+  "enable_notification":"تفعيل الإشعارات"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 6fec2ea85..c15694cf0 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1440,12 +1440,13 @@
   "sms_integration.label":"SMS Integration",
   "sms_integration.label.overview":"Overview",
   "sms_integration.label.sms_messages":"SMS Messages",
-  "sms_message.label.sms_messages_template":"SMS Notifications ",
-  "sms_message.label_mesage":"Message",
-  "sms_message.label_Notification":"Notification",
-  "sms_message.label_auto":"Auto",
-  "sms_message":"SMS message",
+  "sms_messages.label_notification":"Notification",
+  "sms_messages.label_mesage":"Message",
+  "sms_messages.label_auto":"Auto",
+  "sms_message.dialog.label":"SMS message",
   "sms_message.dialog.success_message":"Sms notification settings has been updated successfully.",
-  "sms_message.dialog.unsupported_variables_error_message":"Unsupported variables"
+  "sms_message.dialog.unsupported_variables_error_message":"Unsupported variables",
+  "edit_message_text":"Edit message text",
+  "enable_notification":"Enable notification"
 }
 

From 48221a7af1ba2872342c3954fbe20a27581aff39 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 09:51:38 +0200
Subject: [PATCH 16/41] feat: Optimize SMS notification module.

---
 src/components/DialogsContainer.js            |   2 +
 src/components/SMSPreview/index.js            |  46 +++++++
 src/components/index.js                       |   1 +
 .../NotifyEstimateViaSMSForm.js               |   5 +-
 .../NotifyInvoiceViaSMSForm.js                |  37 +++++-
 .../NotifyInvoiceViaSMSFormProvider.js        |  19 ++-
 .../NotifyInvoiceViaSMSDialog/index.js        |   1 +
 .../SMSMessageDialog/SMSMessageForm.js        |   4 +-
 .../SMSMessageDialog/SMSMessageFormContent.js |  90 ++++++++++++-
 .../SMSMessageDialog/SMSMessageFormFields.js  |   2 +-
 .../SMSMessageFormFloatingActions.js          |  12 +-
 .../NotifyViaSMS/NotifyViaSMSForm.js          |  91 ++++++++++++-
 .../NotifyViaSMS/NotifyViaSMSFormFields.js    |  66 +++++-----
 .../NotifyViaSMSFormFloatingActions.js        |  40 +++---
 src/containers/NotifyViaSMS/utils.js          |   5 +
 .../SMSIntegration/SMSMessagesDataTable.js    |  15 ++-
 .../Preferences/SMSIntegration/components.js  | 123 ++++++++++++------
 src/hooks/query/invoices.js                   |   6 +-
 src/lang/en/index.json                        |  38 +++---
 src/static/json/icons.js                      |   7 +
 .../NotifyConactViaSMSDialog.scss             |   3 +-
 src/style/pages/Preferences/Page.scss         |   3 +-
 src/style/pages/SMSMessage/SMSMessage.scss    |   2 +-
 src/utils/index.js                            |   2 +-
 24 files changed, 479 insertions(+), 141 deletions(-)
 create mode 100644 src/components/SMSPreview/index.js

diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index 6f42dff69..db9f883c2 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -50,10 +50,12 @@ export default function DialogsContainer() {
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
       <MoneyInDialog dialogName={'money-in'} />
       <MoneyOutDialog dialogName={'money-out'} />
+
       <NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
       <NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
       <NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
       <NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
+
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
     </div>
diff --git a/src/components/SMSPreview/index.js b/src/components/SMSPreview/index.js
new file mode 100644
index 000000000..907d8274b
--- /dev/null
+++ b/src/components/SMSPreview/index.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from 'components';
+
+/**
+ * SMS Message preview.
+ */
+export function SMSMessagePreview({
+  message,
+  iconWidth = '265px',
+  iconHeight = '287px',
+  iconColor = '#adadad',
+}) {
+  return (
+    <SMSMessagePreviewBase>
+      <Icon
+        icon={'sms-message-preview'}
+        width={iconWidth}
+        height={iconHeight}
+        color={iconColor}
+      />
+      <SMSMessageText>{message}</SMSMessageText>
+    </SMSMessagePreviewBase>
+  );
+}
+
+const SMSMessageText = styled.div`
+  position: absolute;
+  top: 61px;
+  padding: 12px;
+  color: #fff;
+  border-radius: 12px;
+  margin-left: 12px;
+  margin-right: 12px;
+  overflow-wrap: break-word;
+  background: #2fa2e4;
+  font-size: 13px;
+  line-height: 1.6;
+`;
+
+const SMSMessagePreviewBase = styled.div`
+  position: relative;
+  width: 265px;
+  margin: 0 auto;
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 8d38aefcf..ee698b70c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -87,6 +87,7 @@ export * from './IntersectionObserver';
 export * from './Datatable/CellForceWidth';
 export * from './Button';
 export * from './IntersectionObserver';
+export * from './SMSPreview';
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index e4eb9fea4..acbef5440 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -24,6 +24,8 @@ function NotifyEstimateViaSMSForm({
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
@@ -31,8 +33,8 @@ function NotifyEstimateViaSMSForm({
         intent: Intent.SUCCESS,
       });
       closeDialog(dialogName);
+      setSubmitting(false);
     };
-
     // Handle request response errors.
     const onError = ({
       response: {
@@ -40,6 +42,7 @@ function NotifyEstimateViaSMSForm({
       },
     }) => {
       transformErrors(errors);
+      setSubmitting(false);
     };
     createNotifyEstimateBySMSMutate([estimateId, values])
       .then(onSuccess)
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index f3de4151f..ba1649ed4 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -11,6 +11,12 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+const transformFormValuesToRequest = (values) => {
+  return {
+    notification_type: values.notification_key,
+  };
+};
+
 /**
  * Notify Invoice Via SMS Form.
  */
@@ -23,16 +29,21 @@ function NotifyInvoiceViaSMSForm({
     invoiceId,
     invoiceSMSDetail,
     dialogName,
+    notificationType,
+    setNotificationType,
   } = useNotifyInvoiceViaSMSContext();
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
         message: intl.get('notify_via_sms.dialog.success_message'),
         intent: Intent.SUCCESS,
       });
+      setSubmitting(false);
       closeDialog(dialogName);
     };
 
@@ -43,17 +54,37 @@ function NotifyInvoiceViaSMSForm({
       },
     }) => {
       transformErrors(errors);
+      setSubmitting(false);
     };
-    createNotifyInvoiceBySMSMutate([invoiceId, values])
+    // Transformes the form values to request.
+    const requestValues = transformFormValuesToRequest(values);
+
+    createNotifyInvoiceBySMSMutate([invoiceId, requestValues])
       .then(onSuccess)
       .catch(onError);
   };
+  // Handle the form cancel.
+  const handleFormCancel = React.useCallback(() => {
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);
+
+  const initialValues = {
+    notification_key: notificationType,
+    ...invoiceSMSDetail,
+  };
+
+  const handleValuesChange = (values) => {
+    if (values.notification_key !== notificationType) {
+      setNotificationType(values.notification_key);
+    }
+  };
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={invoiceSMSDetail}
-      NotificationName={dialogName}
+      initialValues={initialValues}
       onSubmit={handleFormSubmit}
+      onCancel={handleFormCancel}
+      onValuesChange={handleValuesChange}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
index 26faac775..c052dc274 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -5,11 +5,19 @@ import { useCreateNotifyInvoiceBySMS, useInvoiceSMSDetail } from 'hooks/query';
 const NotifyInvoiceViaSMSContext = React.createContext();
 
 function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
-  const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
-    useInvoiceSMSDetail(invoiceId, {
-      enabled: !!invoiceId,
-    });
+  const [notificationType, setNotificationType] = React.useState('details');
 
+  // Retrieve the invoice sms notification message details.
+  const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
+    useInvoiceSMSDetail(
+      invoiceId,
+      {
+        notification_type: notificationType,
+      },
+      {
+        enabled: !!invoiceId,
+      },
+    );
   // Create notfiy invoice by sms mutations.
   const { mutateAsync: createNotifyInvoiceBySMSMutate } =
     useCreateNotifyInvoiceBySMS();
@@ -20,6 +28,9 @@ function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
     invoiceSMSDetail,
     dialogName,
     createNotifyInvoiceBySMSMutate,
+
+    notificationType,
+    setNotificationType,
   };
 
   return (
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
index 19ae087b8..8951788cf 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
@@ -32,4 +32,5 @@ function NotifyInvoiceViaSMSDialog({
     </Dialog>
   );
 }
+
 export default compose(withDialogRedux())(NotifyInvoiceViaSMSDialog);
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
index 3a98f36a6..2fdac2b75 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
@@ -44,7 +44,6 @@ function SMSMessageForm({
       ...omit(values, ['is_notification_enabled', 'sms_message']),
       notification_key: smsNotification.key,
     };
-
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
@@ -53,7 +52,6 @@ function SMSMessageForm({
       });
       closeDialog(dialogName);
     };
-
     // Handle request response errors.
     const onError = ({
       response: {
@@ -62,7 +60,7 @@ function SMSMessageForm({
     }) => {
       setSubmitting(false);
     };
-
+    debugger;
     editSMSNotificationMutate(form).then(onSuccess).catch(onError);
   };
 
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index 52c417b24..2d1890208 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -1,17 +1,103 @@
 import React from 'react';
-import { Form } from 'formik';
+import { Form, useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
 
 import SMSMessageFormFields from './SMSMessageFormFields';
 import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
 
+import { SMSMessagePreview } from 'components';
+import { getSMSUnits } from '../../NotifyViaSMS/utils';
+
+const messageVariables = [
+  {
+    variable: '{CompanyName}',
+    description: 'References to the current company name.',
+  },
+];
+
 /**
  * SMS message form content.
  */
 export default function SMSMessageFormContent() {
   return (
     <Form>
-      <SMSMessageFormFields />
+      <div className={Classes.DIALOG_BODY}>
+        <FormContent>
+          <FormFields>
+            <SMSMessageFormFields />
+
+            <SMSMessageVariables>
+              {messageVariables.map(({ variable, description }) => (
+                <MessageVariable>
+                  <strong>{variable}</strong> {description}
+                </MessageVariable>
+              ))}
+            </SMSMessageVariables>
+          </FormFields>
+
+          <FormPreview>
+            <SMSMessagePreviewSection />
+          </FormPreview>
+        </FormContent>
+      </div>
       <SMSMessageFormFloatingActions />
     </Form>
   );
 }
+
+/**
+ * SMS Message preview section.
+ * @returns {JSX}
+ */
+function SMSMessagePreviewSection() {
+  const {
+    values: { message_text: message },
+  } = useFormikContext();
+
+  const messagesUnits = getSMSUnits(message);
+
+  return (
+    <SMSPreviewSectionRoot>
+      <SMSMessagePreview message={message} />
+
+      <SMSPreviewSectionNote>
+        <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
+        characters. <strong>{messagesUnits}</strong> SMS units will be used to
+        send this SMS notification.
+      </SMSPreviewSectionNote>
+    </SMSPreviewSectionRoot>
+  );
+}
+
+const SMSPreviewSectionRoot = styled.div``;
+
+const SMSPreviewSectionNote = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+`;
+
+const SMSMessageVariables = styled.div`
+  list-style: none;
+  font-size: 12px;
+  opacity: 0.9;
+`;
+
+const MessageVariable = styled.div`
+  margin-bottom: 8px;
+`;
+
+const FormContent = styled.div`
+  display: flex;
+`;
+const FormFields = styled.div`
+  width: 55%;
+`;
+const FormPreview = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
+`;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
index fd4c54c0c..6fd2e79b5 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
@@ -7,7 +7,7 @@ import { inputIntent } from 'utils';
 
 export default function SMSMessageFormFields() {
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <div>
       {/* ----------- Message Text ----------- */}
       <FastField name={'message_text'}>
         {({ field, meta: { error, touched } }) => (
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
index efa1a090a..d7eabc30e 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
@@ -27,7 +29,7 @@ function SMSMessageFormFloatingActions({
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
         <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
           <T id={'cancel'} />
         </Button>
@@ -37,11 +39,15 @@ function SMSMessageFormFloatingActions({
           style={{ minWidth: '75px' }}
           type="submit"
         >
-          {<T id={'save'} />}
+          Save SMS Message
         </Button>
-      </div>
+      </FooterActions>
     </div>
   );
 }
 
 export default compose(withDialogActions)(SMSMessageFormFloatingActions);
+
+const FooterActions = styled.div`
+  justify-content: flex-start;
+`;
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index 93eb57375..a6f60ad1f 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -1,28 +1,62 @@
 import React from 'react';
-import { Formik, Form } from 'formik';
+import { Formik, Form, useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
 
 import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
 
 import { CreateNotifyViaSMSFormSchema } from './NotifyViaSMSForm.schema';
 import NotifyViaSMSFormFields from './NotifyViaSMSFormFields';
 import NotifyViaSMSFormFloatingActions from './NotifyViaSMSFormFloatingActions';
+import { FormObserver, SMSMessagePreview } from 'components';
 
-import { transformToForm, saveInvoke } from 'utils';
+import { transformToForm, safeInvoke } from 'utils';
+import { getSMSUnits } from './utils';
 
 const defaultInitialValues = {
+  notification_key: '',
   customer_name: '',
   customer_phone_number: '',
   sms_message: '',
 };
 
+/**
+ * Notify via sms - SMS message preview section.
+ */
+function SMSMessagePreviewSection() {
+  const {
+    values: { sms_message },
+  } = useFormikContext();
+
+  // Calculates the SMS units of message.
+  const messagesUnits = getSMSUnits(sms_message);
+
+  return (
+    <SMSPreviewSectionRoot>
+      <SMSMessagePreview message={sms_message} />
+
+      <SMSPreviewSectionNote>
+        <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
+        characters. <strong>{messagesUnits}</strong> SMS units will be used to
+        send this SMS notification.
+      </SMSPreviewSectionNote>
+    </SMSPreviewSectionRoot>
+  );
+}
+
 /**
  * Notify Via SMS Form.
  */
-function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
+function NotifyViaSMSForm({
+  initialValues: initialValuesComponent,
+  onSubmit,
+  onCancel,
+  onValuesChange,
+}) {
   // Initial form values
   const initialValues = {
     ...defaultInitialValues,
-    ...transformToForm(NotificationDetail, defaultInitialValues),
+    ...transformToForm(initialValuesComponent, defaultInitialValues),
   };
 
   return (
@@ -32,11 +66,56 @@ function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
       onSubmit={onSubmit}
     >
       <Form>
-        <NotifyViaSMSFormFields />
-        <NotifyViaSMSFormFloatingActions dialogName={NotificationName} />
+        <div className={Classes.DIALOG_BODY}>
+          <NotifyContent>
+            <NotifyFieldsSection>
+              <NotifyViaSMSFormFields />
+            </NotifyFieldsSection>
+            <SMSMessagePreviewSection />
+          </NotifyContent>
+        </div>
+
+        <NotifyViaSMSFormFloatingActions onCancel={onCancel} />
+        <NotifyObserveValuesChange onChange={onValuesChange} />
       </Form>
     </Formik>
   );
 }
 
+/**
+ * Observes the values change of notify form.
+ */
+function NotifyObserveValuesChange({ onChange }) {
+  const { values } = useFormikContext();
+
+  // Handle the form change observe.
+  const handleChange = () => {
+    safeInvoke(onChange, values);
+  };
+  return <FormObserver values={values} onChange={handleChange} />;
+}
+
 export default NotifyViaSMSForm;
+
+const NotifyContent = styled.div`
+  display: flex;
+`;
+
+const NotifyFieldsSection = styled.div`
+  flex: 1;
+  width: 65%;
+`;
+
+const SMSPreviewSectionRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
+`;
+
+const SMSPreviewSectionNote = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+`;
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index 37c88c1e7..65b2058d2 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -1,16 +1,47 @@
 import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
-
-import { Classes, FormGroup, TextArea, InputGroup } from '@blueprintjs/core';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
+
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
-import { FieldRequiredHint } from 'components';
 
-function NotifyViaSMSFormFields() {
+const notificationTypes = [
+  { key: 'details', label: 'Invoice details' },
+  { key: 'reminder', label: 'Invoice reminder' },
+];
+
+export default function NotifyViaSMSFormFields() {
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <div>
+      <FastField name={'notification_key'}>
+        {({ form, meta: { error, touched } }) => (
+          <FormGroup
+            label={'Notification type'}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_name'} />}
+          >
+            <ListSelect
+              items={notificationTypes}
+              selectedItemProp={'key'}
+              selectedItem={'details'}
+              textProp={'label'}
+              popoverProps={{ minimal: true }}
+              filterable={false}
+              onItemSelect={(notification) => {
+                form.setFieldValue('notification_key', notification.key);
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
       {/* ----------- Send Notification to ----------- */}
       <FastField name={'customer_name'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -51,29 +82,6 @@ function NotifyViaSMSFormFields() {
           </FormGroup>
         )}
       </FastField>
-
-      {/* ----------- Message Text ----------- */}
-      <FastField name={'sms_message'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'notify_via_sms.dialog.message_text'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--sms_message'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'sms_message'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              disabled={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </div>
   );
 }
-
-export default NotifyViaSMSFormFields;
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
index 899125f5f..96e3b50e0 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
@@ -1,41 +1,47 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import { FormattedMessage as T } from 'components';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
+import { safeCallback } from 'utils';
 
-function NotifyViaSMSFormFloatingActions({
-  // #withDialogActions
-  closeDialog,
-  dialogName,
-}) {
+/**
+ *
+ */
+export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
   // Handle close button click.
-  const handleCancelBtnClick = () => {
-    closeDialog(dialogName);
+  const handleCancelBtnClick = (event) => {
+    onCancel && onCancel(event);
   };
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
+      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
-          style={{ minWidth: '75px' }}
+          style={{ minWidth: '110px' }}
           type="submit"
         >
-          {<T id={'send'} />}
+          Send SMS
         </Button>
-      </div>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'cancel'} />
+        </Button>
+      </FooterActions>
     </div>
   );
 }
-export default compose(withDialogActions)(NotifyViaSMSFormFloatingActions);
+
+const FooterActions = styled.div`
+  justify-content: flex-start;
+`;
diff --git a/src/containers/NotifyViaSMS/utils.js b/src/containers/NotifyViaSMS/utils.js
index 5ed16cae1..598df1ce1 100644
--- a/src/containers/NotifyViaSMS/utils.js
+++ b/src/containers/NotifyViaSMS/utils.js
@@ -10,3 +10,8 @@ export const transformErrors = (errors) => {
     });
   }
 };
+
+
+export const getSMSUnits = (message, threshold = 140) => {
+  return Math.ceil(message.length / threshold);
+};
\ No newline at end of file
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
index db3aefad8..ebaa9e383 100644
--- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import { DataTableEditable, DataTable } from 'components';
+import styled from 'styled-components';
+
+import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useSMSIntegrationTableColumns } from './components';
@@ -23,7 +25,7 @@ function SMSMessagesDataTable({
   };
 
   return (
-    <DataTable
+    <SMSNotificationsTable
       columns={columns}
       data={notifications}
       loading={isSMSNotificationsLoading}
@@ -38,3 +40,12 @@ function SMSMessagesDataTable({
 }
 
 export default compose(withDialogActions)(SMSMessagesDataTable);
+
+const SMSNotificationsTable = styled(DataTable)`
+  .table .tbody .tr .td {
+    align-items: flex-start;
+  }
+  .table .tbody .td {
+    padding: 0.8rem;
+  }
+`;
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 841e8f8bd..0fff799c6 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
-import { safeCallback } from 'utils';
+import { safeInvoke } from 'utils';
 
 /**
  * Notification accessor.
@@ -9,59 +12,95 @@ import { safeCallback } from 'utils';
 export const NotificationAccessor = (row) => {
   return (
     <span className="notification">
-      <span className={'notification__label'}>{row.notification_label}</span>
-      <span className={'notification__desc'}>
+      <NotificationLabel>{row.notification_label}</NotificationLabel>
+      <NotificationDescription>
         {row.notification_description}
-      </span>
+      </NotificationDescription>
     </span>
   );
 };
 
+/**
+ * SMS notification message cell.
+ */
 export const SMSMessageCell = ({
   payload: { onEditSMSMessage },
   row: { original },
 }) => (
   <div>
-    {original.sms_message}
-    <span
-      className="edit-text"
-      onClick={safeCallback(onEditSMSMessage, original)}
-    >
-      {'Edit'}
-    </span>
+    <MessageBox>{original.sms_message}</MessageBox>
+    <MessageBoxActions>
+      <ButtonLink onClick={() => safeInvoke(onEditSMSMessage, original)}>
+        Edit message
+      </ButtonLink>
+    </MessageBoxActions>
   </div>
 );
 
+/**
+ * Retrieve SMS notifications messages table columns
+ * @returns
+ */
 export function useSMSIntegrationTableColumns() {
-  return React.useMemo(() => [
-    {
-      Header: intl.get('sms_message.label_Notification'),
-      accessor: NotificationAccessor,
-      className: 'notification',
-      width: '180',
-    },
-    {
-      Header: intl.get('service'),
-      accessor: 'module_formatted',
-      className: 'service',
-      width: '80',
-    },
-    {
-      Header: intl.get('sms_message.label_mesage'),
-      accessor: 'sms_message',
-      Cell: SMSMessageCell,
-      className: 'sms_message',
-      clickable: true,
-      width: '180',
-    },
-    {
-      Header: intl.get('sms_message.label_auto'),
-      accessor: 'is_notification_enabled',
-      Cell: SwitchFieldCell,
-      className: 'is_notification_enabled',
-      disableSortBy: true,
-      disableResizing: true,
-      width: '80',
-    },
-  ]);
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('sms_message.label_Notification'),
+        accessor: NotificationAccessor,
+        className: 'notification',
+        width: '180',
+      },
+      {
+        Header: intl.get('service'),
+        accessor: 'module_formatted',
+        className: 'service',
+        width: '80',
+      },
+      {
+        Header: intl.get('sms_message.label_mesage'),
+        accessor: 'sms_message',
+        Cell: SMSMessageCell,
+        className: 'sms_message',
+        clickable: true,
+        width: '180',
+      },
+      {
+        Header: intl.get('sms_message.label_auto'),
+        accessor: 'is_notification_enabled',
+        Cell: SwitchFieldCell,
+        className: 'is_notification_enabled',
+        disableSortBy: true,
+        disableResizing: true,
+        width: '80',
+      },
+    ],
+    [],
+  );
 }
+
+const NotificationLabel = styled.div`
+  font-weight: 500;
+`;
+
+const NotificationDescription = styled.div`
+  font-size: 14px;
+  margin-top: 6px;
+  display: block;
+  opacity: 0.75;
+`;
+
+const MessageBox = styled.div`
+  padding: 10px;
+  background-color: #fbfbfb;
+  border: 1px dashed #dcdcdc;
+  font-size: 14px;
+  line-height: 1.45;
+`;
+
+const MessageBoxActions = styled.div`
+  margin-top: 2px;
+
+  button {
+    font-size: 12px;
+  }
+`;
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 6c1c7f767..aabe2fa07 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -254,13 +254,13 @@ export function useCreateNotifyInvoiceBySMS(props) {
   );
 }
 
-export function useInvoiceSMSDetail(invoiceId, props, requestProps) {
+export function useInvoiceSMSDetail(invoiceId, query, props) {
   return useRequestQuery(
-    [t.SALE_INVOICE_SMS_DETAIL, invoiceId],
+    [t.SALE_INVOICE_SMS_DETAIL, invoiceId, query],
     {
       method: 'get',
       url: `sales/invoices/${invoiceId}/sms-details`,
-      ...requestProps,
+      params: query,
     },
     {
       select: (res) => res.data.data,
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 87aedd67a..d94b9f180 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1427,23 +1427,23 @@
   "bad_debt.dialog.success_message": "The given sale invoice has been writte-off successfully.",
   "bad_debt.cancel_alert.success_message": "The given sale invoice has been canceled write-off successfully.",
   "bad_debt.cancel_alert.message": "Are you sure you want to write off this invoice?",
-  "notify_via_sms.dialog.send_notification_to":"Send notification to",
-  "notify_via_sms.dialog.message_text":"Message Text",
-  "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notify_via_sms.dialog.error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
-  "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
-  "notify_estimate_via_sms.dialog.success_message":"The sale estimate sms notification has been sent successfully",
-  "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
-  "notify_payment_receive_via_sms.dialog.success_message":"The payment notification has been sent successfully.",
+  "notify_via_sms.dialog.send_notification_to": "Send notification to",
+  "notify_via_sms.dialog.message_text": "Message Text",
+  "notify_via_sms.dialog.notify_via_sms": "Notify vis SMS",
+  "notify_via_sms.dialog.success_message": "SMS notification has been sent successfully.",
+  "notify_via_sms.dialog.error_message": "Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_invoice_via_sms.dialog.success_message": "The sale invoice sms notification has been sent successfully",
+  "notify_estimate_via_sms.dialog.success_message": "The sale estimate sms notification has been sent successfully",
+  "notify_receipt_via_sms.dialog.success_message": "The sale receipt sms notification has been sent successfully",
+  "notify_payment_receive_via_sms.dialog.success_message": "The payment notification has been sent successfully.",
   "send": "Send",
-  "sms_integration.label":"SMS Integration",
-  "sms_integration.label.overview":"Overview",
-  "sms_integration.label.sms_messages":"SMS Messages",
-  "sms_message.label.sms_messages_template":"SMS Notifications ",
-  "sms_message.label_mesage":"Message",
-  "sms_message.label_Notification":"Notification",
-  "sms_message.label_auto":"Auto",
-  "sms_message":"SMS message",
-  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully."
-}
-
+  "sms_integration.label": "SMS Integration",
+  "sms_integration.label.overview": "Overview",
+  "sms_integration.label.sms_messages": "SMS Messages",
+  "sms_message.label.sms_messages_template": "SMS Notifications ",
+  "sms_message.label_mesage": "Message",
+  "sms_message.label_Notification": "Notification",
+  "sms_message.label_auto": "Auto",
+  "sms_message": "SMS message",
+  "sms_message.dialog.success_message": "Sms notification settings has been updated successfully."
+}
\ No newline at end of file
diff --git a/src/static/json/icons.js b/src/static/json/icons.js
index 42a191624..fc6ffe780 100644
--- a/src/static/json/icons.js
+++ b/src/static/json/icons.js
@@ -509,4 +509,11 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+  "sms-message-preview": {
+    path: [
+      'M8.341,375.3573H399.3271v-.0015l-390.9861-.07ZM363.2382,0H44.43A44.4508,44.4508,0,0,0,0,44.371V375.284l8.341.0016V44.371A36.0651,36.0651,0,0,1,44.43,8.33H90.7089a4.6454,4.6454,0,0,1,4.6482,4.6423v1.9718a23.8588,23.8588,0,0,0,23.8742,23.843H288.9146a23.8586,23.8586,0,0,0,23.8741-23.843V12.972A4.6456,4.6456,0,0,1,317.4372,8.33h45.801A36.0651,36.0651,0,0,1,399.3271,44.371V375.3558l8.341.0015V44.371A44.4508,44.4508,0,0,0,363.2382,0Z',
+      "M1199.9485,803.1623"
+    ],
+    viewBox: "0 0 407.6681 375.3573",
+  }
 };
diff --git a/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
index e0ba9e197..f4e334703 100644
--- a/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
+++ b/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
@@ -1,6 +1,5 @@
 .dialog--notify-vis-sms {
-  max-width: 350px;
-  max-height: 450px;
+  width: 800px;
 
   .bp3-dialog-body {
     .bp3-form-group {
diff --git a/src/style/pages/Preferences/Page.scss b/src/style/pages/Preferences/Page.scss
index 1f996676e..d156b96c4 100644
--- a/src/style/pages/Preferences/Page.scss
+++ b/src/style/pages/Preferences/Page.scss
@@ -17,8 +17,7 @@
   &__inside-content {
     display: flex;
     flex-direction: column;
-    height: 100%;
-
+  
     &--tabable {
       margin-left: -25px;
       margin-right: -25px;
diff --git a/src/style/pages/SMSMessage/SMSMessage.scss b/src/style/pages/SMSMessage/SMSMessage.scss
index 7b447d293..bd9b46c90 100644
--- a/src/style/pages/SMSMessage/SMSMessage.scss
+++ b/src/style/pages/SMSMessage/SMSMessage.scss
@@ -1,5 +1,5 @@
 .dialog--sms-message {
-  max-width: 350px;
+  width: 800px;
 
   .bp3-form-group {
     margin-bottom: 15px;
diff --git a/src/utils/index.js b/src/utils/index.js
index c5f67fd32..f91986577 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -341,7 +341,7 @@ export const saveInvoke = (func, ...rest) => {
 };
 
 export const safeInvoke = (func, ...rest) => {
-  return func && func(...rest);
+  func && func(...rest);
 };
 
 export const transformToForm = (obj, emptyInitialValues) => {

From 8daefb6946a167d19909c8b6b72b17fec92a5760 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 09:57:12 +0200
Subject: [PATCH 17/41] fix: add notification id to sms messages templates
 table.

---
 src/containers/Preferences/SMSIntegration/components.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 161bddfe0..3e59329ba 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -67,6 +67,7 @@ export function useSMSIntegrationTableColumns() {
   return React.useMemo(
     () => [
       {
+        id: 'notification',
         Header: intl.get('sms_message.label_Notification'),
         accessor: NotificationAccessor,
         className: 'notification',

From 4b5e06f50c8e8d15b39e9e4519b4cea26e7c1113 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 11:08:47 +0200
Subject: [PATCH 18/41] feat: SMS notification module.

---
 .../NotifyEstimateViaSMSForm.js               | 18 ++++++++++++++--
 .../NotifyInvoiceViaSMSForm.js                |  9 ++++++++
 .../NotifyPaymentReceiveViaSMSForm.js         | 20 ++++++++++++++++--
 .../NotifyReceiptViaSMSForm.js                | 21 +++++++++++++++++--
 .../NotifyReceiptViaSMSFormProvider.js        |  6 +++++-
 .../NotifyViaSMS/NotifyViaSMSForm.js          | 13 ++++++++++--
 .../NotifyViaSMS/NotifyViaSMSFormFields.js    | 15 +++++++------
 src/hooks/query/estimates.js                  | 10 +++++++++
 src/hooks/query/settings.js                   |  6 +++++-
 9 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index 4ad780a49..a7da22dd0 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+const notificationType = {
+  key: 'sale-estimate-details',
+  label: 'Sale estimate details',
+};
+
 function NotifyEstimateViaSMSForm({
   // #withDialogActions
   closeDialog,
@@ -51,10 +56,19 @@ function NotifyEstimateViaSMSForm({
       .catch(onError);
   };
 
+  const initialValues = {
+    ...estimateSMSDetail,
+  };
+  // Handle the form cancel.
+  const handleFormCancel = () => {
+    closeDialog(dialogName);
+  };
+
   return (
     <NotifyViaSMSForm
-      NotificationDetail={estimateSMSDetail}
-      NotificationName={dialogName}
+      initialValues={initialValues}
+      notificationTypes={notificationType}
+      onCancel={handleFormCancel}
       onSubmit={handleFormSubmit}
     />
   );
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index f30904583..9cb293b73 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -80,10 +80,19 @@ function NotifyInvoiceViaSMSForm({
       setNotificationType(values.notification_key);
     }
   };
+  // Momerize the notification types.
+  const notificationTypes = React.useMemo(
+    () => [
+      { key: 'details', label: 'Invoice details' },
+      { key: 'reminder', label: 'Invoice reminder' },
+    ],
+    [],
+  );
 
   return (
     <NotifyViaSMSForm
       initialValues={initialValues}
+      notificationTypes={notificationTypes}
       onSubmit={handleFormSubmit}
       onCancel={handleFormCancel}
       onValuesChange={handleValuesChange}
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index 997890d8b..684266739 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+const notificationType = {
+  key: 'payment-receive-details',
+  label: 'Payment receive thank you.',
+};
+
 /**
  * Notify Payment Recive Via SMS Form.
  */
@@ -53,12 +58,23 @@ function NotifyPaymentReceiveViaSMSForm({
       .then(onSuccess)
       .catch(onError);
   };
+  // Handle the form cancel.
+  const handleFormCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  // Form initial values.
+  const initialValues = React.useMemo(
+    () => ({ ...paymentReceiveMSDetail }),
+    [paymentReceiveMSDetail],
+  );
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={paymentReceiveMSDetail}
-      NotificationName={dialogName}
+      initialValues={initialValues}
+      notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
+      onCancel={handleFormCancel}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index b778f97d4..2b95a0d35 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+const notificationType = {
+  key: 'sale-receipt-details',
+  label: 'Sale receipt details',
+};
+
 /**
  * Notify Receipt Via SMS Form.
  */
@@ -51,12 +56,24 @@ function NotifyReceiptViaSMSForm({
       .then(onSuccess)
       .catch(onError);
   };
+  // Handle the form cancel.
+  const handleFormCancel = () => {
+    closeDialog(dialogName);
+  };
+  // Initial values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...receiptSMSDetail,
+    }),
+    [receiptSMSDetail],
+  );
 
   return (
     <NotifyViaSMSForm
-      NotificationDetail={receiptSMSDetail}
-      NotificationName={dialogName}
+      initialValues={initialValues}
+      notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
+      onCancel={handleFormCancel}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
index 3f2515319..cc2a00089 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
@@ -4,11 +4,15 @@ import { useCreateNotifyReceiptBySMS, useReceiptSMSDetail } from 'hooks/query';
 
 const NotifyReceiptViaSMSContext = React.createContext();
 
+/**
+ * 
+ */
 function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
-  // Create notfiy receipt via sms mutations.
+  // Create notfiy receipt via SMS mutations.
   const { mutateAsync: createNotifyReceiptBySMSMutate } =
     useCreateNotifyReceiptBySMS();
 
+  // Retrieve the receipt SMS notification details.
   const { data: receiptSMSDetail, isLoading: isReceiptSMSDetailLoading } =
     useReceiptSMSDetail(receiptId, {
       enabled: !!receiptId,
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index a6f60ad1f..b3a55a835 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { castArray } from 'lodash';
 import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
@@ -34,7 +35,6 @@ function SMSMessagePreviewSection() {
   return (
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={sms_message} />
-
       <SMSPreviewSectionNote>
         <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
         characters. <strong>{messagesUnits}</strong> SMS units will be used to
@@ -49,6 +49,7 @@ function SMSMessagePreviewSection() {
  */
 function NotifyViaSMSForm({
   initialValues: initialValuesComponent,
+  notificationTypes,
   onSubmit,
   onCancel,
   onValuesChange,
@@ -58,6 +59,11 @@ function NotifyViaSMSForm({
     ...defaultInitialValues,
     ...transformToForm(initialValuesComponent, defaultInitialValues),
   };
+  // Ensure always returns array.
+  const formattedNotificationTypes = React.useMemo(
+    () => castArray(notificationTypes),
+    [notificationTypes],
+  );
 
   return (
     <Formik
@@ -69,8 +75,11 @@ function NotifyViaSMSForm({
         <div className={Classes.DIALOG_BODY}>
           <NotifyContent>
             <NotifyFieldsSection>
-              <NotifyViaSMSFormFields />
+              <NotifyViaSMSFormFields
+                notificationTypes={formattedNotificationTypes}
+              />
             </NotifyFieldsSection>
+
             <SMSMessagePreviewSection />
           </NotifyContent>
         </div>
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index 65b2058d2..d2b925bdc 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import {
   ListSelect,
@@ -11,14 +12,9 @@ import {
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 
-const notificationTypes = [
-  { key: 'details', label: 'Invoice details' },
-  { key: 'reminder', label: 'Invoice reminder' },
-];
-
-export default function NotifyViaSMSFormFields() {
+export default function NotifyViaSMSFormFields({ notificationTypes }) {
   return (
-    <div>
+    <NotifyViaSMSFormFieldsRoot>
       <FastField name={'notification_key'}>
         {({ form, meta: { error, touched } }) => (
           <FormGroup
@@ -37,6 +33,7 @@ export default function NotifyViaSMSFormFields() {
               onItemSelect={(notification) => {
                 form.setFieldValue('notification_key', notification.key);
               }}
+              disabled={notificationTypes.length < 2}
             />
           </FormGroup>
         )}
@@ -82,6 +79,8 @@ export default function NotifyViaSMSFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </NotifyViaSMSFormFieldsRoot>
   );
 }
+
+const NotifyViaSMSFormFieldsRoot = styled.div``;
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index 0000e6120..b73eae6ce 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -190,6 +190,9 @@ export function useRefreshEstimates() {
   };
 }
 
+/**
+ *  
+ */
 export function useCreateNotifyEstimateBySMS(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
@@ -210,6 +213,13 @@ export function useCreateNotifyEstimateBySMS(props) {
   );
 }
 
+/**
+ * 
+ * @param {*} estimateId 
+ * @param {*} props 
+ * @param {*} requestProps 
+ * @returns 
+ */
 export function useEstimateSMSDetail(estimateId, props, requestProps) {
   return useRequestQuery(
     [t.SALE_ESTIMATE_SMS_DETAIL, estimateId],
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 74f302bc6..492ce6521 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -170,8 +170,12 @@ export function useSettingEditSMSNotification(props) {
     (values) => apiRequest.post(`settings/sms-notification`, values),
     {
       onSuccess: () => {
-        // Invalidate
         queryClient.invalidateQueries([t.SETTING_SMS_NOTIFICATIONS]);
+
+        queryClient.invalidateQueries(t.SALE_INVOICE_SMS_DETAIL);
+        queryClient.invalidateQueries(t.SALE_RECEIPT_SMS_DETAIL);
+        queryClient.invalidateQueries(t.PAYMENT_RECEIVE_SMS_DETAIL);
+        queryClient.invalidateQueries(t.SALE_ESTIMATE_SMS_DETAIL);
       },
       ...props,
     },

From 73715574828fc9e883fd8e4c4c6545fcd53f3d40 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 12:34:55 +0200
Subject: [PATCH 19/41] feat: optimize style of SMS notifications module.

---
 .../DataTableCells/SwitchFieldCell.js         | 18 ++++++++---
 src/components/Dialog/Dialog.js               | 10 +++---
 src/components/Dialog/DialogContent.js        |  2 +-
 src/components/Dialog/DialogFooterActions.js  | 26 +++++++++++++++
 src/components/Dialog/DialogSuspense.js       |  2 +-
 src/components/Dialog/index.js                |  6 ++++
 src/components/index.js                       |  9 ++----
 .../SMSMessageDialog/SMSMessageForm.js        |  1 -
 .../SMSMessageDialog/SMSMessageFormContent.js |  1 -
 .../SMSMessageFormFloatingActions.js          | 12 +++----
 .../NotifyViaSMSFormFloatingActions.js        | 15 +++------
 .../SMSIntegration/SMSMessagesDataTable.js    | 32 +++++++++++++++++--
 .../Preferences/SMSIntegration/components.js  |  6 ++--
 src/hooks/query/settings.js                   |  1 -
 14 files changed, 96 insertions(+), 45 deletions(-)
 create mode 100644 src/components/Dialog/DialogFooterActions.js
 create mode 100644 src/components/Dialog/index.js

diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js
index df5bb0e89..a25e96ae4 100644
--- a/src/components/DataTableCells/SwitchFieldCell.js
+++ b/src/components/DataTableCells/SwitchFieldCell.js
@@ -1,21 +1,28 @@
 import React from 'react';
 import classNames from 'classnames';
-import { get } from 'lodash';
 import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
 
+import { safeInvoke } from 'utils';
+
+/**
+ * Switch editable cell.
+ */
 const SwitchEditableCell = ({
   row: { index, original },
-  column: { id, switchProps },
+  column: { id, switchProps, onSwitchChange },
   cell: { value: initialValue },
   payload,
 }) => {
   const [value, setValue] = React.useState(initialValue);
 
+  // Handle the switch change.
   const onChange = (e) => {
     const newValue = e.target.checked;
 
     setValue(newValue);
-    payload.updateData(index, id, newValue);
+
+    safeInvoke(payload.updateData, index, id, newValue);
+    safeInvoke(onSwitchChange, e, newValue, original);
   };
 
   React.useEffect(() => {
@@ -31,7 +38,7 @@ const SwitchEditableCell = ({
     >
       <Switch
         value={value}
-        // onChange={onChange}
+        onChange={onChange}
         checked={initialValue}
         minimal={true}
         className="ml2"
@@ -40,4 +47,5 @@ const SwitchEditableCell = ({
     </FormGroup>
   );
 };
-export default SwitchEditableCell;
+
+export default SwitchEditableCell;
\ No newline at end of file
diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
index 95e1fdcbf..c5f793251 100644
--- a/src/components/Dialog/Dialog.js
+++ b/src/components/Dialog/Dialog.js
@@ -9,16 +9,16 @@ function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
 
   const handleClose = (event) => {
-    closeDialog(name)
+    closeDialog(name);
     onClose && onClose(event);
   };
   return (
     <Dialog {...props} onClose={handleClose}>
-      { children }
+      {children}
     </Dialog>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(DialogComponent);
\ No newline at end of file
+const DialogRoot = compose(withDialogActions)(DialogComponent);
+
+export { DialogRoot as Dialog };
diff --git a/src/components/Dialog/DialogContent.js b/src/components/Dialog/DialogContent.js
index 265182bc5..cb438f499 100644
--- a/src/components/Dialog/DialogContent.js
+++ b/src/components/Dialog/DialogContent.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
 
-export default function DialogContent(props) {
+export function DialogContent(props) {
   const { isLoading, children } = props;
 
   const loadingContent = (
diff --git a/src/components/Dialog/DialogFooterActions.js b/src/components/Dialog/DialogFooterActions.js
new file mode 100644
index 000000000..91c856e9a
--- /dev/null
+++ b/src/components/Dialog/DialogFooterActions.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooterActions({ alignment = 'right', children }) {
+  return (
+    <DialogFooterActionsRoot
+      className={Classes.DIALOG_FOOTER_ACTIONS}
+      alignment={alignment}
+    >
+      {children}
+    </DialogFooterActionsRoot>
+  );
+}
+
+const DialogFooterActionsRoot = styled.div`
+  margin-left: -10px;
+  margin-right: -10px;
+  justify-content: ${(props) =>
+    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
+
+  .bp3-button {
+    margin-left: 10px;
+    margin-left: 10px;
+  }
+`;
diff --git a/src/components/Dialog/DialogSuspense.js b/src/components/Dialog/DialogSuspense.js
index 6513d28c5..56ed625b9 100644
--- a/src/components/Dialog/DialogSuspense.js
+++ b/src/components/Dialog/DialogSuspense.js
@@ -5,7 +5,7 @@ function LoadingContent() {
   return (<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>);
 }
 
-export default function DialogSuspense({
+export function DialogSuspense({
   children
 }) {
   return (
diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js
new file mode 100644
index 000000000..c7c0982fb
--- /dev/null
+++ b/src/components/Dialog/index.js
@@ -0,0 +1,6 @@
+
+
+export * from './Dialog';
+export * from './DialogFooterActions';
+export * from './DialogSuspense';
+export * from './DialogContent';
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index ee698b70c..b8ca111f4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -23,9 +23,6 @@ import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
 import DashboardActionViewsList from './Dashboard/DashboardActionViewsList';
-import Dialog from './Dialog/Dialog';
-import DialogContent from './Dialog/DialogContent';
-import DialogSuspense from './Dialog/DialogSuspense';
 import InputPrependButton from './Forms/InputPrependButton';
 import CategoriesSelectList from './CategoriesSelectList';
 import Row from './Grid/Row';
@@ -63,6 +60,7 @@ import AvaterCell from './AvaterCell';
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
 
+export * from './Dialog';
 export * from './Menu';
 export * from './AdvancedFilter/AdvancedFilterDropdown';
 export * from './AdvancedFilter/AdvancedFilterPopover';
@@ -121,9 +119,6 @@ export {
   LoadingIndicator,
   DashboardActionViewsList,
   AppToaster,
-  Dialog,
-  DialogContent,
-  DialogSuspense,
   InputPrependButton,
   CategoriesSelectList,
   Col,
@@ -159,5 +154,5 @@ export {
   ItemsMultiSelect,
   Card,
   AvaterCell,
-  MoreMenuItems
+  MoreMenuItems,
 };
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
index a693850ec..3f2e8ecc9 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
@@ -64,7 +64,6 @@ function SMSMessageForm({
       }
       setSubmitting(false);
     };
-    debugger;
     editSMSNotificationMutate(form).then(onSuccess).catch(onError);
   };
 
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index 2d1890208..8cfc998f5 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -60,7 +60,6 @@ function SMSMessagePreviewSection() {
   return (
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={message} />
-
       <SMSPreviewSectionNote>
         <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
         characters. <strong>{messagesUnits}</strong> SMS units will be used to
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
index d7eabc30e..e4eba28df 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
+import { DialogFooterActions, FormattedMessage as T } from 'components';
 
 import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -20,6 +19,7 @@ function SMSMessageFormFloatingActions({
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
+  // SMS Message dialog contxt.
   const { dialogName } = useSMSMessageDialogContext();
 
   // Handle close button click.
@@ -29,7 +29,7 @@ function SMSMessageFormFloatingActions({
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <DialogFooterActions alignment={'left'}>
         <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
           <T id={'cancel'} />
         </Button>
@@ -41,13 +41,9 @@ function SMSMessageFormFloatingActions({
         >
           Save SMS Message
         </Button>
-      </FooterActions>
+      </DialogFooterActions>
     </div>
   );
 }
 
 export default compose(withDialogActions)(SMSMessageFormFloatingActions);
-
-const FooterActions = styled.div`
-  justify-content: flex-start;
-`;
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
index 96e3b50e0..84b517e44 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
-
-import { safeCallback } from 'utils';
+import { DialogFooterActions, FormattedMessage as T } from 'components';
 
 /**
  *
@@ -21,7 +18,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <DialogFooterActions alignment={'left'}>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
@@ -37,11 +34,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
         >
           <T id={'cancel'} />
         </Button>
-      </FooterActions>
+      </DialogFooterActions>
     </div>
   );
-}
-
-const FooterActions = styled.div`
-  justify-content: flex-start;
-`;
+}
\ No newline at end of file
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
index a183e4bd9..8635fbf6d 100644
--- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -1,25 +1,53 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
 
-import { DataTable } from 'components';
+import { DataTable, AppToaster } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useSMSIntegrationTableColumns, ActionsMenu } from './components';
 import { useSMSIntegrationContext } from './SMSIntegrationProvider';
+import { useSettingEditSMSNotification } from 'hooks/query';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+/**
+ * SMS Message data table.
+ */
 function SMSMessagesDataTable({
   // #withDialogAction
   openDialog,
 }) {
+  // Edit SMS message notification mutations.
+  const { mutateAsync: editSMSNotificationMutate } =
+    useSettingEditSMSNotification();
+
+  // Handle notification switch change.
+  const handleNotificationSwitchChange = React.useCallback(
+    (event, value, notification) => {
+      editSMSNotificationMutate({
+        notification_key: notification.key,
+        is_notification_enabled: value,
+      }).then(() => {
+        AppToaster.show({
+          message: 'SMS notification hs been enabled successfully.',
+          intent: Intent.SUCCESS,
+        });
+      });
+    },
+    [editSMSNotificationMutate],
+  );
+
   // Table columns.
-  const columns = useSMSIntegrationTableColumns();
+  const columns = useSMSIntegrationTableColumns({
+    onSwitchChange: handleNotificationSwitchChange,
+  });
 
   const { notifications, isSMSNotificationsLoading } =
     useSMSIntegrationContext();
 
+  // handle edit message link click
   const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 3e59329ba..f1708574a 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -5,6 +5,7 @@ import { Menu, MenuItem } from '@blueprintjs/core';
 
 import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
+
 import { safeInvoke } from 'utils';
 
 /**
@@ -63,7 +64,7 @@ export function ActionsMenu({
  * Retrieve SMS notifications messages table columns
  * @returns
  */
-export function useSMSIntegrationTableColumns() {
+export function useSMSIntegrationTableColumns({ onSwitchChange }) {
   return React.useMemo(
     () => [
       {
@@ -98,9 +99,10 @@ export function useSMSIntegrationTableColumns() {
         disableResizing: true,
         disableSortBy: true,
         width: '80',
+        onSwitchChange,
       },
     ],
-    [],
+    [onSwitchChange],
   );
 }
 
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 492ce6521..b7c70b335 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';

From 3039e43767e7efd7eea9c7246b0b31f7d5897198 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 12:41:31 +0200
Subject: [PATCH 20/41] feat: SMS message text preview words break.

---
 src/components/SMSPreview/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SMSPreview/index.js b/src/components/SMSPreview/index.js
index 907d8274b..0b53aaf4b 100644
--- a/src/components/SMSPreview/index.js
+++ b/src/components/SMSPreview/index.js
@@ -27,13 +27,13 @@ export function SMSMessagePreview({
 
 const SMSMessageText = styled.div`
   position: absolute;
-  top: 61px;
+  top: 60px;
   padding: 12px;
   color: #fff;
   border-radius: 12px;
   margin-left: 12px;
   margin-right: 12px;
-  overflow-wrap: break-word;
+  word-break: break-word;
   background: #2fa2e4;
   font-size: 13px;
   line-height: 1.6;

From 9e5fddf294e888d4707d870d81c66a661bac1586 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 13:49:16 +0200
Subject: [PATCH 21/41] feat: SMS notification handle errors.

---
 .../NotifyInvoiceViaSMSDialogContent.js       |  4 +--
 .../NotifyInvoiceViaSMSForm.js                | 10 ++++---
 .../NotifyInvoiceViaSMSFormProvider.js        |  4 +++
 .../NotifyInvoiceViaSMSDialog/index.js        |  2 +-
 .../NotifyViaSMS/NotifyViaSMSForm.js          | 28 +++++++++++++++++--
 src/containers/NotifyViaSMS/utils.js          | 15 ++++------
 6 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
index 88f75332d..349312e89 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
@@ -6,11 +6,11 @@ import NotifyInvoiceViaSMSForm from './NotifyInvoiceViaSMSForm';
 export default function NotifyInvoiceViaSMSDialogContent({
   // #ownProps
   dialogName,
-  invoice,
+  invoiceId,
 }) {
   return (
     <NotifyInvoiceViaSMSFormProvider
-      invoiceId={invoice}
+      invoiceId={invoiceId}
       dialogName={dialogName}
     >
       <NotifyInvoiceViaSMSForm />
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index 9cb293b73..604f0fd50 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -33,6 +33,8 @@ function NotifyInvoiceViaSMSForm({
     setNotificationType,
   } = useNotifyInvoiceViaSMSContext();
 
+  const [calloutCode, setCalloutCode] = React.useState([]);
+
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     setSubmitting(true);
@@ -46,7 +48,6 @@ function NotifyInvoiceViaSMSForm({
       setSubmitting(false);
       closeDialog(dialogName);
     };
-
     // Handle request response errors.
     const onError = ({
       response: {
@@ -54,13 +55,14 @@ function NotifyInvoiceViaSMSForm({
       },
     }) => {
       if (errors) {
-        transformErrors(errors, { setErrors });
+        transformErrors(errors, { setErrors, setCalloutCode });
       }
       setSubmitting(false);
     };
     // Transformes the form values to request.
     const requestValues = transformFormValuesToRequest(values);
 
+    // Submits invoice SMS notification.
     createNotifyInvoiceBySMSMutate([invoiceId, requestValues])
       .then(onSuccess)
       .catch(onError);
@@ -74,7 +76,7 @@ function NotifyInvoiceViaSMSForm({
     notification_key: notificationType,
     ...invoiceSMSDetail,
   };
-
+  // Handle form values change.
   const handleValuesChange = (values) => {
     if (values.notification_key !== notificationType) {
       setNotificationType(values.notification_key);
@@ -88,7 +90,6 @@ function NotifyInvoiceViaSMSForm({
     ],
     [],
   );
-
   return (
     <NotifyViaSMSForm
       initialValues={initialValues}
@@ -96,6 +97,7 @@ function NotifyInvoiceViaSMSForm({
       onSubmit={handleFormSubmit}
       onCancel={handleFormCancel}
       onValuesChange={handleValuesChange}
+      calloutCodes={calloutCode}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
index c052dc274..9fdad5c56 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -4,6 +4,9 @@ import { useCreateNotifyInvoiceBySMS, useInvoiceSMSDetail } from 'hooks/query';
 
 const NotifyInvoiceViaSMSContext = React.createContext();
 
+/**
+ * Invoice SMS notification provider.
+ */
 function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
   const [notificationType, setNotificationType] = React.useState('details');
 
@@ -16,6 +19,7 @@ function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
       },
       {
         enabled: !!invoiceId,
+        keepPreviousData: true,
       },
     );
   // Create notfiy invoice by sms mutations.
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
index 8951788cf..91f0c75e6 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
@@ -26,7 +26,7 @@ function NotifyInvoiceViaSMSDialog({
       <DialogSuspense>
         <NotifyInvoiceViaSMSDialogContent
           dialogName={dialogName}
-          invoice={invoiceId}
+          invoiceId={invoiceId}
         />
       </DialogSuspense>
     </Dialog>
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index b3a55a835..3c7886876 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { castArray } from 'lodash';
+import { castArray, includes } from 'lodash';
 import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
-import { Classes } from '@blueprintjs/core';
+import { Callout, Classes, Intent } from '@blueprintjs/core';
 
 import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
 
@@ -53,6 +53,8 @@ function NotifyViaSMSForm({
   onSubmit,
   onCancel,
   onValuesChange,
+  calloutCodes,
+  formikProps,
 }) {
   // Initial form values
   const initialValues = {
@@ -67,6 +69,7 @@ function NotifyViaSMSForm({
 
   return (
     <Formik
+      enableReinitialize={true}
       validationSchema={CreateNotifyViaSMSFormSchema}
       initialValues={initialValues}
       onSubmit={onSubmit}
@@ -75,6 +78,7 @@ function NotifyViaSMSForm({
         <div className={Classes.DIALOG_BODY}>
           <NotifyContent>
             <NotifyFieldsSection>
+              <NotifyViaSMSAlerts calloutCodes={calloutCodes} />
               <NotifyViaSMSFormFields
                 notificationTypes={formattedNotificationTypes}
               />
@@ -104,6 +108,26 @@ function NotifyObserveValuesChange({ onChange }) {
   return <FormObserver values={values} onChange={handleChange} />;
 }
 
+/**
+ * Notify via SMS form alerts.
+ */
+function NotifyViaSMSAlerts({ calloutCodes }) {
+  return [
+    includes(calloutCodes, 100) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        The customer phone number does not eixst, please enter a personal phone
+        number to the customer.
+      </Callout>
+    ),
+    includes(calloutCodes, 200) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        The customer phone number is invalid, please enter a valid personal
+        phone number to the customer.
+      </Callout>
+    ),
+  ];
+}
+
 export default NotifyViaSMSForm;
 
 const NotifyContent = styled.div`
diff --git a/src/containers/NotifyViaSMS/utils.js b/src/containers/NotifyViaSMS/utils.js
index 33804e5c2..2d6b78593 100644
--- a/src/containers/NotifyViaSMS/utils.js
+++ b/src/containers/NotifyViaSMS/utils.js
@@ -1,16 +1,14 @@
-import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
 
-export const transformErrors = (errors, { setErrors }) => {
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
   if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
-    AppToaster.show({
-      message: intl.get('notify_via_sms.dialog.error_message'),
-      intent: Intent.DANGER,
+    setCalloutCode([200]);
+    setErrors({
+      customer_phone_number: 'The personal phone number is invalid.',
     });
   }
-
   if (errors.find((error) => error.type === 'CUSTOMER_HAS_NO_PHONE_NUMBER')) {
+    setCalloutCode([100]);
     setErrors({
       customer_phone_number: intl.get(
         'notify_via_sms.dialog.customer_no_phone_error_message',
@@ -19,7 +17,6 @@ export const transformErrors = (errors, { setErrors }) => {
   }
 };
 
-
 export const getSMSUnits = (message, threshold = 140) => {
   return Math.ceil(message.length / threshold);
-};
\ No newline at end of file
+};

From 85f1c5584b130a159f3a3e656616ac2066c4b537 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 13:56:59 +0200
Subject: [PATCH 22/41] feat: SMS notification handle response errors.

---
 .../Dialogs/SMSMessageDialog/utils.js         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/containers/Dialogs/SMSMessageDialog/utils.js b/src/containers/Dialogs/SMSMessageDialog/utils.js
index b4f46f1f7..6b94176bd 100644
--- a/src/containers/Dialogs/SMSMessageDialog/utils.js
+++ b/src/containers/Dialogs/SMSMessageDialog/utils.js
@@ -1,15 +1,19 @@
 import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-import intl from 'react-intl-universal';
+import { castArray } from 'lodash';
 
 export const transformErrors = (errors, { setErrors }) => {
-  if (
-    errors.find((error) => error.type === 'UNSUPPORTED_SMS_MESSAGE_VARIABLES')
-  ) {
+  let unsupportedVariablesError = errors.find(
+    (error) => error.type === 'UNSUPPORTED_SMS_MESSAGE_VARIABLES',
+  );
+  if (unsupportedVariablesError) {
+    const variables = castArray(
+      unsupportedVariablesError.data.unsupported_args,
+    );
+    const stringifiedVariables = variables.join(', ');
+
     setErrors({
-      message_text: intl.get(
-        'sms_message.dialog.unsupported_variables_error_message',
-      ),
+      message_text: `The SMS message has unsupported variables - ${stringifiedVariables}`,
+      intent: Intent.DANGER,
     });
   }
 };

From e205c0b9a3772f1438dd88b52798ca24a2ae5a30 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 9 Nov 2021 16:20:18 +0200
Subject: [PATCH 23/41] feat add localization.

---
 .../NotifyInvoiceViaSMSForm.js                |  2 +-
 .../SMSMessageDialog/SMSMessageFormContent.js | 34 +++++++++---
 .../SMSMessageFormFloatingActions.js          |  8 +--
 .../NotifyViaSMS/NotifyViaSMSForm.js          | 10 ++--
 .../NotifyViaSMS/NotifyViaSMSFormFields.js    |  2 +-
 .../NotifyViaSMSFormFloatingActions.js        |  4 +-
 src/containers/NotifyViaSMS/utils.js          |  2 +-
 .../SMSIntegration/SMSMessagesDataTable.js    |  5 +-
 .../Preferences/SMSIntegration/components.js  |  4 +-
 src/lang/ar/index.json                        | 25 +++++----
 src/lang/en/index.json                        | 52 +++++++++++--------
 11 files changed, 94 insertions(+), 54 deletions(-)

diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index 9cb293b73..b3d33176d 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -40,7 +40,7 @@ function NotifyInvoiceViaSMSForm({
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: intl.get('notify_via_sms.dialog.success_message'),
+        message: intl.get('notify_invoice_via_sms.dialog.success_message'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index 8cfc998f5..6a8dcb293 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
@@ -9,6 +10,9 @@ import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 const messageVariables = [
   {
     variable: '{CompanyName}',
@@ -19,7 +23,10 @@ const messageVariables = [
 /**
  * SMS message form content.
  */
-export default function SMSMessageFormContent() {
+function SMSMessageFormContent({
+  // #withCurrentOrganization
+  organization: { name },
+}) {
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
@@ -28,11 +35,19 @@ export default function SMSMessageFormContent() {
             <SMSMessageFormFields />
 
             <SMSMessageVariables>
-              {messageVariables.map(({ variable, description }) => (
+              <MessageVariable>
+                {intl.formatHTMLMessage(
+                  { id: 'sms_message.dialog.message_variable_description' },
+                  {
+                    value: name,
+                  },
+                )}
+              </MessageVariable>
+              {/* {messageVariables.map(({ variable, description }) => (
                 <MessageVariable>
-                  <strong>{variable}</strong> {description}
+                  <strong>{variable}</strong> {description} 
                 </MessageVariable>
-              ))}
+              ))} */}
             </SMSMessageVariables>
           </FormFields>
 
@@ -46,6 +61,8 @@ export default function SMSMessageFormContent() {
   );
 }
 
+export default compose(withCurrentOrganization())(SMSMessageFormContent);
+
 /**
  * SMS Message preview section.
  * @returns {JSX}
@@ -61,9 +78,12 @@ function SMSMessagePreviewSection() {
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={message} />
       <SMSPreviewSectionNote>
-        <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
-        characters. <strong>{messagesUnits}</strong> SMS units will be used to
-        send this SMS notification.
+        {intl.formatHTMLMessage(
+          { id: 'sms_message.dialog.sms_note' },
+          {
+            value: messagesUnits,
+          },
+        )}
       </SMSPreviewSectionNote>
     </SMSPreviewSectionRoot>
   );
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
index e4eba28df..e823fba9d 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -30,16 +30,16 @@ function SMSMessageFormFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <DialogFooterActions alignment={'left'}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
           style={{ minWidth: '75px' }}
           type="submit"
         >
-          Save SMS Message
+          <T id={'save_sms_message'} />
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
         </Button>
       </DialogFooterActions>
     </div>
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index b3a55a835..a41bbb697 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { castArray } from 'lodash';
 import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
@@ -36,9 +37,12 @@ function SMSMessagePreviewSection() {
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={sms_message} />
       <SMSPreviewSectionNote>
-        <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
-        characters. <strong>{messagesUnits}</strong> SMS units will be used to
-        send this SMS notification.
+        {intl.formatHTMLMessage(
+          { id: 'notiify_via_sms.dialog.sms_note' },
+          {
+            value: messagesUnits,
+          },
+        )}
       </SMSPreviewSectionNote>
     </SMSPreviewSectionRoot>
   );
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index d2b925bdc..3b08b070e 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -18,7 +18,7 @@ export default function NotifyViaSMSFormFields({ notificationTypes }) {
       <FastField name={'notification_key'}>
         {({ form, meta: { error, touched } }) => (
           <FormGroup
-            label={'Notification type'}
+            label={<T id={'notify_via_sms.dialog.notification_type'} />}
             className={classNames(CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_name'} />}
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
index 84b517e44..dbe701aaf 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js
@@ -25,7 +25,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
           style={{ minWidth: '110px' }}
           type="submit"
         >
-          Send SMS
+          <T id={'send_sms'} />
         </Button>
         <Button
           disabled={isSubmitting}
@@ -37,4 +37,4 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
       </DialogFooterActions>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/containers/NotifyViaSMS/utils.js b/src/containers/NotifyViaSMS/utils.js
index 33804e5c2..9b78c1e35 100644
--- a/src/containers/NotifyViaSMS/utils.js
+++ b/src/containers/NotifyViaSMS/utils.js
@@ -5,7 +5,7 @@ import intl from 'react-intl-universal';
 export const transformErrors = (errors, { setErrors }) => {
   if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
     AppToaster.show({
-      message: intl.get('notify_via_sms.dialog.error_message'),
+      message: intl.get('notify_via_sms.dialog.phone_invalid_error_message'),
       intent: Intent.DANGER,
     });
   }
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
index 8635fbf6d..b2bb18603 100644
--- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 
@@ -31,7 +32,9 @@ function SMSMessagesDataTable({
         is_notification_enabled: value,
       }).then(() => {
         AppToaster.show({
-          message: 'SMS notification hs been enabled successfully.',
+          message: intl.get(
+            'sms_messages.notification_switch_change_success_message',
+          ),
           intent: Intent.SUCCESS,
         });
       });
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index f1708574a..d978edb25 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -33,7 +33,7 @@ export const SMSMessageCell = ({
     <MessageBox>{original.sms_message}</MessageBox>
     <MessageBoxActions>
       <ButtonLink onClick={() => safeInvoke(onEditMessageText, original)}>
-        Edit message
+        {intl.get('sms_messages.label_edit_message')}
       </ButtonLink>
     </MessageBoxActions>
   </div>
@@ -87,7 +87,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
-        clickable: true,
+        // clickable: true,
         width: '180',
         disableSortBy: true,
       },
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index af6998c5c..ab17a8691 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1442,24 +1442,31 @@
   "bad_debt.cancel_alert.message": "هل أنت متأكد أنك تريد شطب هذه الفاتورة؟ ",
   "notify_via_sms.dialog.send_notification_to":"إرسال إشعار إلى ",
   "notify_via_sms.dialog.message_text":"نص رسالة ",
+  "notify_via_sms.dialog.notification_type": "Notification type",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notify_via_sms.dialog.error_message":"Notify vis SMS",
-    "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
   "notify_via_sms.dialog.customer_no_phone_error_message":"الزبون ليس لديه رقم هاتف.",
   "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
   "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار  الرسائل القصيرة الخاصة بتقدير المبيعات بنجاح. ",
   "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
   "notify_payment_receive_via_sms.dialog.success_message":"تم إرسال إشعار الدفع بنجاح. ",
-  "send": "إرسال",
   "sms_integration.label":"SMS Integration",
-  "sms_integration.label.overview":"نظرة عامة",
-  "sms_integration.label.sms_messages":"رسائل SMS ",
-  "sms_message.label.sms_messages_template":" إشعارات رسائل  قصيرة ",
+  "sms_integration.label.overview":"Overview",
+  "sms_integration.label.sms_messages":"SMS Messages ",
   "sms_messages.label_mesage":"رسالة ",
   "sms_messages.label_notification":"إشعار",
   "sms_messages.label_auto":"Auto",
-  "sms_message":"رسالة SMS"  ,
-  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully.",
+  "sms_messages.label_edit_message": "Edit message",
+  "sms_messages.notification_switch_change_success_message":"SMS notification hs been enabled successfully.",
+  "sms_message.dialog.label": "SMS message",
+  "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
+  "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
+  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> References to the current company name.",
   "edit_message_text":"تعديل نص رسالة",
-  "enable_notification":"تفعيل الإشعارات"
+  "enable_notification":"تفعيل الإشعارات",
+  "send_sms":"Send SMS",
+  "save_sms_message":"Save SMS Message"
+
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index c15694cf0..83d78e1a7 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1427,26 +1427,32 @@
   "bad_debt.dialog.success_message": "The given sale invoice has been writte-off successfully.",
   "bad_debt.cancel_alert.success_message": "The given sale invoice has been canceled write-off successfully.",
   "bad_debt.cancel_alert.message": "Are you sure you want to write off this invoice?",
-  "notify_via_sms.dialog.send_notification_to":"Send notification to",
-  "notify_via_sms.dialog.message_text":"Message Text",
-  "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
-  "notify_via_sms.dialog.customer_no_phone_error_message":"The customer has no phone number.",
-  "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
-  "notify_estimate_via_sms.dialog.success_message":"The sale estimate sms notification has been sent successfully",
-  "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
-  "notify_payment_receive_via_sms.dialog.success_message":"The payment notification has been sent successfully.",
-  "send": "Send",
-  "sms_integration.label":"SMS Integration",
-  "sms_integration.label.overview":"Overview",
-  "sms_integration.label.sms_messages":"SMS Messages",
-  "sms_messages.label_notification":"Notification",
-  "sms_messages.label_mesage":"Message",
-  "sms_messages.label_auto":"Auto",
-  "sms_message.dialog.label":"SMS message",
-  "sms_message.dialog.success_message":"Sms notification settings has been updated successfully.",
-  "sms_message.dialog.unsupported_variables_error_message":"Unsupported variables",
-  "edit_message_text":"Edit message text",
-  "enable_notification":"Enable notification"
-}
-
+  "notify_via_sms.dialog.send_notification_to": "Send notification to",
+  "notify_via_sms.dialog.message_text": "Message Text",
+  "notify_via_sms.dialog.notification_type": "Notification type",
+  "notify_via_sms.dialog.notify_via_sms": "Notify vis SMS",
+  "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "notify_via_sms.dialog.phone_invalid_error_message": "Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_via_sms.dialog.customer_no_phone_error_message": "The customer has no phone number.",
+  "notify_invoice_via_sms.dialog.success_message": "The sale invoice sms notification has been sent successfully.",
+  "notify_estimate_via_sms.dialog.success_message": "The sale estimate sms notification has been sent successfully",
+  "notify_receipt_via_sms.dialog.success_message": "The sale receipt sms notification has been sent successfully",
+  "notify_payment_receive_via_sms.dialog.success_message": "The payment notification has been sent successfully.",
+  "sms_integration.label": "SMS Integration",
+  "sms_integration.label.overview": "Overview",
+  "sms_integration.label.sms_messages": "SMS Messages",
+  "sms_messages.label_notification": "Notification",
+  "sms_messages.label_mesage": "Message",
+  "sms_messages.label_auto": "Auto",
+  "sms_messages.label_edit_message": "Edit message",
+  "sms_messages.notification_switch_change_success_message":"SMS notification hs been enabled successfully.",
+  "sms_message.dialog.label": "SMS message",
+  "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
+  "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
+  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> References to the current company name.",
+  "edit_message_text": "Edit message text",
+  "enable_notification": "Enable notification",
+  "send_sms":"Send SMS",
+  "save_sms_message":"Save SMS Message"
+}
\ No newline at end of file

From 5fcf32dcaae74b4c8f547df96576e89a054f0fc0 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 9 Nov 2021 16:39:13 +0200
Subject: [PATCH 24/41] feat add localization again.

---
 src/containers/NotifyViaSMS/NotifyViaSMSForm.js |  6 ++----
 src/lang/ar/index.json                          |  2 ++
 src/lang/en/index.json                          | 10 ++++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index aec773b22..2f9721669 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -119,14 +119,12 @@ function NotifyViaSMSAlerts({ calloutCodes }) {
   return [
     includes(calloutCodes, 100) && (
       <Callout icon={null} intent={Intent.DANGER}>
-        The customer phone number does not eixst, please enter a personal phone
-        number to the customer.
+        {intl.get('notify_Via_sms.dialog.customer_phone_number_does_not_eixst')}
       </Callout>
     ),
     includes(calloutCodes, 200) && (
       <Callout icon={null} intent={Intent.DANGER}>
-        The customer phone number is invalid, please enter a valid personal
-        phone number to the customer.
+        {intl.get('notify_Via_sms.dialog.customer_phone_number_invalid')}
       </Callout>
     ),
   ];
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index ab17a8691..2cded970e 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1445,6 +1445,8 @@
   "notify_via_sms.dialog.notification_type": "Notification type",
   "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
   "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "The customer phone number does not eixst, please enter a personal phone number to the customer.",
+  "notify_Via_sms.dialog.customer_phone_number_invalid": "The customer phone number is invalid, please enter a valid personal phone number to the customer.",
   "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
   "notify_via_sms.dialog.customer_no_phone_error_message":"الزبون ليس لديه رقم هاتف.",
   "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 83d78e1a7..95c5da654 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1432,6 +1432,8 @@
   "notify_via_sms.dialog.notification_type": "Notification type",
   "notify_via_sms.dialog.notify_via_sms": "Notify vis SMS",
   "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "The customer phone number does not eixst, please enter a personal phone number to the customer.",
+  "notify_Via_sms.dialog.customer_phone_number_invalid": "The customer phone number is invalid, please enter a valid personal phone number to the customer.",
   "notify_via_sms.dialog.phone_invalid_error_message": "Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
   "notify_via_sms.dialog.customer_no_phone_error_message": "The customer has no phone number.",
   "notify_invoice_via_sms.dialog.success_message": "The sale invoice sms notification has been sent successfully.",
@@ -1445,14 +1447,14 @@
   "sms_messages.label_mesage": "Message",
   "sms_messages.label_auto": "Auto",
   "sms_messages.label_edit_message": "Edit message",
-  "sms_messages.notification_switch_change_success_message":"SMS notification hs been enabled successfully.",
+  "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
   "sms_message.dialog.label": "SMS message",
   "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
   "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
   "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
-  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> References to the current company name.",
+  "sms_message.dialog.message_variable_description": "<strong>{value}</strong> References to the current company name.",
   "edit_message_text": "Edit message text",
   "enable_notification": "Enable notification",
-  "send_sms":"Send SMS",
-  "save_sms_message":"Save SMS Message"
+  "send_sms": "Send SMS",
+  "save_sms_message": "Save SMS Message"
 }
\ No newline at end of file

From 5a8c61396f93dc8f980dd156405a5494e3415646 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 9 Nov 2021 18:16:09 +0200
Subject: [PATCH 25/41] feat: SMS message preview with variables.

---
 .../SMSMessageDialogContent.js                |  3 +++
 .../SMSMessageDialogProvider.js               |  1 +
 .../SMSMessageDialog/SMSMessageFormContent.js | 20 +++++++++++--------
 .../SMSMessageFormFloatingActions.js          |  6 +++---
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
index 134a42f48..b7cedf1b3 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
@@ -4,6 +4,9 @@ import '../../../style/pages/SMSMessage/SMSMessage.scss';
 import { SMSMessageDialogProvider } from './SMSMessageDialogProvider';
 import SMSMessageForm from './SMSMessageForm';
 
+/**
+ * SMS message dialog content.
+ */
 export default function SMSMessageDialogContent({
   // #ownProps
   dialogName,
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
index 28c6b180f..8aedd7e53 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
@@ -15,6 +15,7 @@ function SMSMessageDialogProvider({ notificationkey, dialogName, ...props }) {
   const { mutateAsync: editSMSNotificationMutate } =
     useSettingEditSMSNotification();
 
+  // SMS notificiation details
   const { data: smsNotification, isLoading: isSMSNotificationLoading } =
     useSettingSMSNotification(notificationkey);
 
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index 8cfc998f5..dc28ac84f 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -2,24 +2,28 @@ import React from 'react';
 import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
+import { castArray } from 'lodash';
 
 import SMSMessageFormFields from './SMSMessageFormFields';
 import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
 
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
-const messageVariables = [
-  {
-    variable: '{CompanyName}',
-    description: 'References to the current company name.',
-  },
-];
-
 /**
  * SMS message form content.
  */
 export default function SMSMessageFormContent() {
+  // SMS message dialog context.
+  const { smsNotification } = useSMSMessageDialogContext();
+
+  // Ensure always returns array.
+  const messageVariables = React.useMemo(
+    () => castArray(smsNotification.allowed_variables),
+    [smsNotification.allowed_variables],
+  );
+
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
@@ -30,7 +34,7 @@ export default function SMSMessageFormContent() {
             <SMSMessageVariables>
               {messageVariables.map(({ variable, description }) => (
                 <MessageVariable>
-                  <strong>{variable}</strong> {description}
+                  <strong>{`{${variable}}`}</strong> {description}
                 </MessageVariable>
               ))}
             </SMSMessageVariables>
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
index e4eba28df..d86be4514 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -30,9 +30,6 @@ function SMSMessageFormFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <DialogFooterActions alignment={'left'}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
@@ -41,6 +38,9 @@ function SMSMessageFormFloatingActions({
         >
           Save SMS Message
         </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
       </DialogFooterActions>
     </div>
   );

From 4d563e3ddd11cc86c1a81aa0626832f5abb360c1 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 10 Nov 2021 15:17:17 +0200
Subject: [PATCH 26/41] feat: add localization arabic.

---
 src/lang/ar/index.json | 44 +++++++++++++++++++++---------------------
 src/lang/en/index.json |  6 +++---
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 2cded970e..c584afa0d 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1442,33 +1442,33 @@
   "bad_debt.cancel_alert.message": "هل أنت متأكد أنك تريد شطب هذه الفاتورة؟ ",
   "notify_via_sms.dialog.send_notification_to":"إرسال إشعار إلى ",
   "notify_via_sms.dialog.message_text":"نص رسالة ",
-  "notify_via_sms.dialog.notification_type": "Notification type",
-  "notify_via_sms.dialog.notify_via_sms":"Notify vis SMS",
-  "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
-  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "The customer phone number does not eixst, please enter a personal phone number to the customer.",
-  "notify_Via_sms.dialog.customer_phone_number_invalid": "The customer phone number is invalid, please enter a valid personal phone number to the customer.",
-  "notify_via_sms.dialog.phone_invalid_error_message":"Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
+  "notify_via_sms.dialog.notification_type": "نوع إشعار",
+  "notify_via_sms.dialog.notify_via_sms":"إشعار عبر رسائل قصيرة",
+  "notiify_via_sms.dialog.sms_note": "<strong>ملاحظة :</strong> يمكن أن تحتوي رسالة قصيرة الواحدة على 160 حرفًا كحد أقصى. <strong>{value}</strong> سيتم استخدام وحدات الرسائل القصيرة لإرسال هذا  إشعار عبر الرسائل القصيرة. ",
+  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "رقم هاتف العميل غير موجود ، يرجى  إدخال رقم هاتف للعميل. ",
+  "notify_Via_sms.dialog.customer_phone_number_invalid": "رقم هاتف العميل غير صالح ، يرجى  إدخال رقم هاتف صحيح للعميل. ",
+  "notify_via_sms.dialog.phone_invalid_error_message":"لا يمكن إرسال إشعار الرسائل القصيرة ، رقم الهاتف للعميل غير صالح ، يرجى إدخال رقم صالح والمحاولة مرة أخرى.",
   "notify_via_sms.dialog.customer_no_phone_error_message":"الزبون ليس لديه رقم هاتف.",
-  "notify_invoice_via_sms.dialog.success_message":"The sale invoice sms notification has been sent successfully",
-  "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار  الرسائل القصيرة الخاصة بتقدير المبيعات بنجاح. ",
-  "notify_receipt_via_sms.dialog.success_message":"The sale receipt sms notification has been sent successfully",
+  "notify_invoice_via_sms.dialog.success_message":"تم إرسال إشعار فاتورة البيع عبر الرسائل القصيرة بنجاح ",
+  "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار العرض البيع عبر الرسائل القصيرة بنجاح ",
+  "notify_receipt_via_sms.dialog.success_message":"تم إرسال إشعار إيصال البيع عبر الرسائل القصيرة بنجاح ",
   "notify_payment_receive_via_sms.dialog.success_message":"تم إرسال إشعار الدفع بنجاح. ",
-  "sms_integration.label":"SMS Integration",
-  "sms_integration.label.overview":"Overview",
-  "sms_integration.label.sms_messages":"SMS Messages ",
+  "sms_integration.label":"تكامل الرسائل القصيرة",
+  "sms_integration.label.overview":"نظرة عامة",
+  "sms_integration.label.sms_messages":"الرسائل القصيرة ",
   "sms_messages.label_mesage":"رسالة ",
   "sms_messages.label_notification":"إشعار",
-  "sms_messages.label_auto":"Auto",
-  "sms_messages.label_edit_message": "Edit message",
-  "sms_messages.notification_switch_change_success_message":"SMS notification hs been enabled successfully.",
-  "sms_message.dialog.label": "SMS message",
-  "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
-  "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
-  "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
-  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> References to the current company name.",
+  "sms_messages.label_auto":"تلقائي",
+  "sms_messages.label_edit_message": "تعديل الرسالة ",
+  "sms_messages.notification_switch_change_success_message":"تم تمكين إشعار الرسائل القصيرة بنجاح.",
+  "sms_message.dialog.label": "رسالة قصيرة",
+  "sms_message.dialog.sms_note": "<strong>ملاحظة :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "sms_message.dialog.success_message": "تم تحديث إعدادات إشعار الرسائل القصيرة بنجاح. ",
+  "sms_message.dialog.unsupported_variables_error_message": "متغيرات غير مدعومة",
+  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> إشارة لاسم الشركة الحالي.",
   "edit_message_text":"تعديل نص رسالة",
   "enable_notification":"تفعيل الإشعارات",
-  "send_sms":"Send SMS",
-  "save_sms_message":"Save SMS Message"
+  "send_sms":"إرسال رسالة قصيرة",
+  "save_sms_message":"حفظ رسالة قصيرة"
 
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 95c5da654..ecceb3f22 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1431,7 +1431,7 @@
   "notify_via_sms.dialog.message_text": "Message Text",
   "notify_via_sms.dialog.notification_type": "Notification type",
   "notify_via_sms.dialog.notify_via_sms": "Notify vis SMS",
-  "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
   "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "The customer phone number does not eixst, please enter a personal phone number to the customer.",
   "notify_Via_sms.dialog.customer_phone_number_invalid": "The customer phone number is invalid, please enter a valid personal phone number to the customer.",
   "notify_via_sms.dialog.phone_invalid_error_message": "Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
@@ -1447,9 +1447,9 @@
   "sms_messages.label_mesage": "Message",
   "sms_messages.label_auto": "Auto",
   "sms_messages.label_edit_message": "Edit message",
-  "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
+  "sms_messages.notification_switch_change_success_message": "SMS notification has been enabled successfully.",
   "sms_message.dialog.label": "SMS message",
-  "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
   "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
   "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
   "sms_message.dialog.message_variable_description": "<strong>{value}</strong> References to the current company name.",

From e0c03141f0fe24abafb897fdb838d74841070438 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 10 Nov 2021 16:32:19 +0200
Subject: [PATCH 27/41] fix: localization arabic.

---
 src/lang/en/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index ecceb3f22..4e77fe7a5 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1447,7 +1447,7 @@
   "sms_messages.label_mesage": "Message",
   "sms_messages.label_auto": "Auto",
   "sms_messages.label_edit_message": "Edit message",
-  "sms_messages.notification_switch_change_success_message": "SMS notification has been enabled successfully.",
+  "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
   "sms_message.dialog.label": "SMS message",
   "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
   "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",

From da67217d748f2f6a5735b09055f875a76e4c3433 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 10 Nov 2021 20:49:50 +0200
Subject: [PATCH 28/41] feat: quick create action on select/suggest items
 fields.

---
 src/common/drawers.js                         |   4 +
 src/components/AccountsSelectList.js          |  87 ++++++---
 src/components/AccountsSuggestField.js        |  98 ++++++----
 src/components/ContactSelecetList.js          |  11 +-
 src/components/Contacts/ContactSelectField.js |  86 +++++++++
 .../Contacts/CustomerSelectField.js           | 116 ++++++++++++
 src/components/Contacts/VendorSelectField.js  | 115 ++++++++++++
 src/components/Contacts/index.js              |   5 +
 src/components/Contacts/utils.js              |  43 +++++
 src/components/Dashboard/DashboardContent.js  |   2 -
 .../DataTableCells/AccountsListFieldCell.js   |   4 +
 .../DataTableCells/ItemsListCell.js           |  13 +-
 src/components/Drawer/Drawer.js               |   3 +-
 src/components/Drawer/DrawerProvider.js       |  16 ++
 src/components/DrawersContainer.js            |  10 +-
 src/components/ItemsSuggestField.js           | 118 +++++++++----
 src/components/index.js                       |   1 +
 .../Accounting/MakeJournal/components.js      |   1 +
 .../CustomerForm/CustomerFloatingActions.js   |  22 ++-
 .../Customers/CustomerForm/CustomerForm.js    | 154 +---------------
 .../CustomerForm/CustomerFormFormik.js        | 127 +++++++++++++
 .../CustomerForm/CustomerFormPage.js          |  76 ++++++--
 .../CustomerForm/CustomerFormProvider.js      |  20 +--
 .../Customers/CustomerForm/utils.js           |  38 ++++
 .../QuickPaymentMadeFormFields.js             |   2 +-
 .../QuickCreateCustomerDrawerContent.js       |  25 +++
 .../QuickCustomerFormDrawer.js                |  65 +++++++
 .../QuickCreateCustomerDrawer/index.js        |  35 ++++
 .../QuickCreateItemDrawerContent.js           |  25 +++
 .../QuickCreateItemDrawerForm.js              |  86 +++++++++
 .../Drawers/QuickCreateItemDrawer/index.js    |  37 ++++
 .../QuickVendorFormDrawer.js                  |  85 +++++++++
 .../QuickWriteVendorDrawerContent.js          |  25 +++
 .../Drawers/QuickWriteVendorDrawer/index.js   |  36 ++++
 src/containers/Entries/components.js          |   5 +-
 src/containers/Entries/utils.js               |   9 +
 .../ExpenseForm/ExpenseFormHeaderFields.js    |   8 +-
 .../Expenses/ExpenseForm/components.js        |   1 +
 src/containers/Items/ItemForm.js              | 167 ++++++++----------
 src/containers/Items/ItemFormBody.js          |   4 +-
 .../Items/ItemFormFloatingActions.js          |  23 +--
 src/containers/Items/ItemFormFormik.js        | 112 ++++++++++++
 src/containers/Items/ItemFormPage.js          |  14 +-
 src/containers/Items/ItemFormProvider.js      |  36 ++--
 src/containers/Items/utils.js                 |   5 +-
 .../Bills/BillForm/BillFormHeaderFields.js    |   7 +-
 .../PaymentMadeFormHeaderFields.js            |   7 +-
 .../EstimateForm/EstimateFormHeaderFields.js  |   7 +-
 .../InvoiceForm/InvoiceFormHeaderFields.js    |  10 +-
 .../PaymentReceiveHeaderFields.js             |   7 +-
 .../ReceiptForm/ReceiptFormHeaderFields.js    |   8 +-
 .../VendorForm/VendorFloatingActions.js       |  27 +--
 .../{VendorForm.js => VendorFormFormik.js}    |  90 +++-------
 .../Vendors/VendorForm/VendorFormPage.js      |  63 +++++--
 .../Vendors/VendorForm/VendorFormProvider.js  |  24 ++-
 src/containers/Vendors/VendorForm/utils.js    |  36 ++++
 src/style/pages/Customers/Form.scss           | 157 ++++++++++++++++
 .../pages/Items/{PageForm.scss => Form.scss}  |  20 +--
 src/style/pages/SaleInvoice/PageForm.scss     |   9 +-
 .../PageForm.scss => Vendors/Form.scss}       |  19 +-
 src/style/pages/Vendors/PageForm.scss         | 164 +----------------
 61 files changed, 1885 insertions(+), 745 deletions(-)
 create mode 100644 src/components/Contacts/ContactSelectField.js
 create mode 100644 src/components/Contacts/CustomerSelectField.js
 create mode 100644 src/components/Contacts/VendorSelectField.js
 create mode 100644 src/components/Contacts/index.js
 create mode 100644 src/components/Contacts/utils.js
 create mode 100644 src/components/Drawer/DrawerProvider.js
 create mode 100644 src/containers/Customers/CustomerForm/CustomerFormFormik.js
 create mode 100644 src/containers/Customers/CustomerForm/utils.js
 create mode 100644 src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js
 create mode 100644 src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js
 create mode 100644 src/containers/Drawers/QuickCreateCustomerDrawer/index.js
 create mode 100644 src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js
 create mode 100644 src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js
 create mode 100644 src/containers/Drawers/QuickCreateItemDrawer/index.js
 create mode 100644 src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js
 create mode 100644 src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
 create mode 100644 src/containers/Drawers/QuickWriteVendorDrawer/index.js
 create mode 100644 src/containers/Items/ItemFormFormik.js
 rename src/containers/Vendors/VendorForm/{VendorForm.js => VendorFormFormik.js} (63%)
 create mode 100644 src/containers/Vendors/VendorForm/utils.js
 create mode 100644 src/style/pages/Customers/Form.scss
 rename src/style/pages/Items/{PageForm.scss => Form.scss} (85%)
 rename src/style/pages/{Customers/PageForm.scss => Vendors/Form.scss} (91%)

diff --git a/src/common/drawers.js b/src/common/drawers.js
index 449f51485..3a1b21032 100644
--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -10,4 +10,8 @@ export const DRAWERS = {
   BILL_DRAWER: 'bill-drawer',
   INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
   CASHFLOW_TRNASACTION_DRAWER: 'cashflow-transaction-drawer',
+
+  QUICK_WRITE_VENDOR: 'quick-write-vendor',
+  QUICK_CREATE_CUSTOMER: 'quick-create-customer',
+  QUICK_CREATE_ITEM: 'quick-create-item',
 };
diff --git a/src/components/AccountsSelectList.js b/src/components/AccountsSelectList.js
index 75a7d3e09..9ed337284 100644
--- a/src/components/AccountsSelectList.js
+++ b/src/components/AccountsSelectList.js
@@ -1,13 +1,55 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { MenuItemNestedText, FormattedMessage as T } from 'components';
+import * as R from 'ramda';
 import classNames from 'classnames';
+
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 import { CLASSES } from 'common/classes';
 
-export default function AccountsSelectList({
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts select list.
+ */
+function AccountsSelectList({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -21,6 +63,8 @@ export default function AccountsSelectList({
   filterByNormal,
   filterByRootTypes,
 
+  allowCreate,
+
   buttonProps = {},
 }) {
   const flattenAccounts = useMemo(
@@ -51,6 +95,7 @@ export default function AccountsSelectList({
     [initialAccountId, filteredAccounts],
   );
 
+  // Select account item.
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null,
   );
@@ -76,31 +121,25 @@ export default function AccountsSelectList({
     );
   }, []);
 
-  const onAccountSelect = useCallback(
+  // Handle the account item select.
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
-    },
-    [setSelectedAccount, onAccountSelected],
-  );
-
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
       } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
+        openDialog('account-form');
       }
     },
-    [],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Select
       items={filteredAccounts}
@@ -113,11 +152,13 @@ export default function AccountsSelectList({
         inline: popoverFill,
       }}
       filterable={true}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       disabled={disabled}
       className={classNames('form-group--select-list', {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
     >
       <Button
         disabled={disabled}
@@ -127,3 +168,5 @@ export default function AccountsSelectList({
     </Select>
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSelectList);
diff --git a/src/components/AccountsSuggestField.js b/src/components/AccountsSuggestField.js
index 62cd34737..55697a4fe 100644
--- a/src/components/AccountsSuggestField.js
+++ b/src/components/AccountsSuggestField.js
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
@@ -10,10 +11,55 @@ import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
 /**
  * Accounts suggest field.
  */
-export default function AccountsSuggestField({
+function AccountsSuggestField({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -26,6 +72,8 @@ export default function AccountsSuggestField({
   filterByNormal,
   filterByRootTypes = [],
 
+  allowCreate,
+
   ...suggestProps
 }) {
   const flattenAccounts = useMemo(
@@ -69,23 +117,6 @@ export default function AccountsSuggestField({
     }
   }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
 
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
-      }
-    },
-    [],
-  );
-
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
@@ -98,28 +129,31 @@ export default function AccountsSuggestField({
     );
   }, []);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
-
-  const onAccountSelect = useCallback(
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog('account-form');
+      }
     },
-    [setSelectedAccount, onAccountSelected],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Suggest
       items={filteredAccounts}
       noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       selectedItem={selectedAccount}
       inputProps={{ placeholder: defaultSelectText }}
       resetOnClose={true}
@@ -129,7 +163,11 @@ export default function AccountsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSuggestField);
diff --git a/src/components/ContactSelecetList.js b/src/components/ContactSelecetList.js
index 02f301fbe..1d649c28c 100644
--- a/src/components/ContactSelecetList.js
+++ b/src/components/ContactSelecetList.js
@@ -11,12 +11,14 @@ export default function ContactSelecetList({
   contactsList,
   initialContactId,
   selectedContactId,
-  selectedContactType,
+  createNewItemFrom,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
   popoverFill = false,
   disabled = false,
   buttonProps,
+
+  ...restProps
 }) {
   const contacts = useMemo(
     () =>
@@ -65,7 +67,7 @@ export default function ContactSelecetList({
   );
 
   // Filter Contact List
-  const filterContacts = (query, contact, index, exactMatch) => {
+  const itemPredicate = (query, contact, index, exactMatch) => {
     const normalizedTitle = contact.display_name.toLowerCase();
     const normalizedQuery = query.toLowerCase();
     if (exactMatch) {
@@ -83,7 +85,7 @@ export default function ContactSelecetList({
       items={contacts}
       noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={handleContactRenderer}
-      itemPredicate={filterContacts}
+      itemPredicate={itemPredicate}
       filterable={true}
       disabled={disabled}
       onItemSelect={onContactSelect}
@@ -92,8 +94,9 @@ export default function ContactSelecetList({
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
       inputProps={{
-        placeholder: intl.get('filter_')
+        placeholder: intl.get('filter_'),
       }}
+      {...restProps}
     >
       <Button
         disabled={disabled}
diff --git a/src/components/Contacts/ContactSelectField.js b/src/components/Contacts/ContactSelectField.js
new file mode 100644
index 000000000..c533ea4be
--- /dev/null
+++ b/src/components/Contacts/ContactSelectField.js
@@ -0,0 +1,86 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import { itemPredicate, handleContactRenderer } from './utils';
+
+export default function ContactSelectField({
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
diff --git a/src/components/Contacts/CustomerSelectField.js b/src/components/Contacts/CustomerSelectField.js
new file mode 100644
index 000000000..322e7b85b
--- /dev/null
+++ b/src/components/Contacts/CustomerSelectField.js
@@ -0,0 +1,116 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemRenderer,
+  createNewItemFromQuery,
+} from './utils';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function CustomerSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(CustomerSelectField);
diff --git a/src/components/Contacts/VendorSelectField.js b/src/components/Contacts/VendorSelectField.js
new file mode 100644
index 000000000..1f0560f74
--- /dev/null
+++ b/src/components/Contacts/VendorSelectField.js
@@ -0,0 +1,115 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemFromQuery,
+  createNewItemRenderer,
+} from './utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function VendorSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(VendorSelectField);
diff --git a/src/components/Contacts/index.js b/src/components/Contacts/index.js
new file mode 100644
index 000000000..d6c1821c2
--- /dev/null
+++ b/src/components/Contacts/index.js
@@ -0,0 +1,5 @@
+import ContactSelectField from './ContactSelectField';
+import CustomerSelectField from './CustomerSelectField';
+import VendorSelectField from './VendorSelectField';
+
+export { ContactSelectField, CustomerSelectField, VendorSelectField };
diff --git a/src/components/Contacts/utils.js b/src/components/Contacts/utils.js
new file mode 100644
index 000000000..59d0a4a8c
--- /dev/null
+++ b/src/components/Contacts/utils.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+
+// Filter Contact List
+export const itemPredicate = (query, contact, index, exactMatch) => {
+  const normalizedTitle = contact.display_name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+export const handleContactRenderer = (contact, { handleClick }) => (
+  <MenuItem
+    key={contact.id}
+    text={contact.display_name}
+    onClick={handleClick}
+  />
+);
+
+// Creates a new item from query.
+export const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+export const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
diff --git a/src/components/Dashboard/DashboardContent.js b/src/components/Dashboard/DashboardContent.js
index 3c75d2288..739b405e7 100644
--- a/src/components/Dashboard/DashboardContent.js
+++ b/src/components/Dashboard/DashboardContent.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoutes from 'components/Dashboard/DashboardContentRoute';
-import DashboardFooter from 'components/Dashboard/DashboardFooter';
 import DashboardErrorBoundary from './DashboardErrorBoundary';
 
 export default React.forwardRef(({}, ref) => {
@@ -11,7 +10,6 @@ export default React.forwardRef(({}, ref) => {
       <div className="dashboard-content" id="dashboard" ref={ref}>
         <DashboardTopbar />
         <DashboardContentRoutes />
-        <DashboardFooter />
       </div>
     </ErrorBoundary>
   );
diff --git a/src/components/DataTableCells/AccountsListFieldCell.js b/src/components/DataTableCells/AccountsListFieldCell.js
index 1f27453a1..690e64b24 100644
--- a/src/components/DataTableCells/AccountsListFieldCell.js
+++ b/src/components/DataTableCells/AccountsListFieldCell.js
@@ -17,6 +17,8 @@ export default function AccountCellRenderer({
     accountsDataProp,
     filterAccountsByRootTypes,
     filterAccountsByTypes,
+    fieldProps,
+    formGroupProps,
   },
   row: { index, original },
   cell: { value: initialValue },
@@ -53,6 +55,7 @@ export default function AccountCellRenderer({
         'form-group--account',
         Classes.FILL,
       )}
+      {...formGroupProps}
     >
       <AccountsSuggestField
         accounts={accounts}
@@ -66,6 +69,7 @@ export default function AccountCellRenderer({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );
diff --git a/src/components/DataTableCells/ItemsListCell.js b/src/components/DataTableCells/ItemsListCell.js
index 9ff7ddae1..ed6c024c6 100644
--- a/src/components/DataTableCells/ItemsListCell.js
+++ b/src/components/DataTableCells/ItemsListCell.js
@@ -1,15 +1,17 @@
 import React, { useCallback, useRef } from 'react';
-// import ItemsListField from 'components/ItemsListField';
-import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
-
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import ItemsSuggestField from 'components/ItemsSuggestField';
+
 import { useCellAutoFocus } from 'hooks';
 
+/**
+ * Items list cell.
+ */
 export default function ItemsListCell({
-  column: { id, filterSellable, filterPurchasable },
+  column: { id, filterSellable, filterPurchasable, fieldProps, formGroupProps },
   row: { index },
   cell: { value: initialValue },
   payload: { items, updateData, errors, autoFocus },
@@ -19,6 +21,7 @@ export default function ItemsListCell({
   // Auto-focus the items list input field.
   useCellAutoFocus(fieldRef, autoFocus, id, index);
 
+  // Handle the item selected.
   const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
@@ -32,6 +35,7 @@ export default function ItemsListCell({
     <FormGroup
       intent={error ? Intent.DANGER : null}
       className={classNames('form-group--select-list', Classes.FILL)}
+      {...formGroupProps}
     >
       <ItemsSuggestField
         items={items}
@@ -45,6 +49,7 @@ export default function ItemsListCell({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );
diff --git a/src/components/Drawer/Drawer.js b/src/components/Drawer/Drawer.js
index 96f7e0b5a..fe660deb2 100644
--- a/src/components/Drawer/Drawer.js
+++ b/src/components/Drawer/Drawer.js
@@ -3,6 +3,7 @@ import { Position, Drawer } from '@blueprintjs/core';
 
 import 'style/components/Drawer.scss';
 
+import { DrawerProvider } from './DrawerProvider';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { compose } from 'utils';
 
@@ -27,7 +28,7 @@ function DrawerComponent(props) {
       portalClassName={'drawer-portal'}
       {...props}
     >
-      {children}
+      <DrawerProvider {...props}>{children}</DrawerProvider>
     </Drawer>
   );
 }
diff --git a/src/components/Drawer/DrawerProvider.js b/src/components/Drawer/DrawerProvider.js
new file mode 100644
index 000000000..7b086cd32
--- /dev/null
+++ b/src/components/Drawer/DrawerProvider.js
@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from 'react';
+
+const DrawerContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function DrawerProvider({ ...props }) {
+  const provider = { ...props };
+
+  return <DrawerContext.Provider value={provider} {...props} />;
+}
+
+const useDrawerContext = () => useContext(DrawerContext);
+
+export { DrawerProvider, useDrawerContext };
diff --git a/src/components/DrawersContainer.js b/src/components/DrawersContainer.js
index f240fd1bf..135dcb8a3 100644
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -14,6 +14,9 @@ import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
 import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
+import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
+import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
+import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -38,7 +41,12 @@ export default function DrawersContainer() {
       <InventoryAdjustmentDetailDrawer
         name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
       />
-      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER} />
+      <CashflowTransactionDetailDrawer
+        name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER}
+      />
+      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
+      <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
+      <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
     </div>
   );
 }
diff --git a/src/components/ItemsSuggestField.js b/src/components/ItemsSuggestField.js
index a7223bfe9..7473a6bb5 100644
--- a/src/components/ItemsSuggestField.js
+++ b/src/components/ItemsSuggestField.js
@@ -1,13 +1,68 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
 import { Suggest } from '@blueprintjs/select';
+import classNames from 'classnames';
+import * as R from 'ramda';
+
+import { CLASSES } from 'common/classes';
 
 import { FormattedMessage as T } from 'components';
 
-export default function ItemsSuggestField({
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+// Creates a new item from query.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Item renderer.
+const itemRenderer = (item, { modifiers, handleClick }) => (
+  <MenuItem
+    key={item.id}
+    text={item.name}
+    label={item.code}
+    onClick={handleClick}
+  />
+);
+
+// Filters items.
+const filterItemsPredicater = (query, item, _index, exactMatch) => {
+  const normalizedTitle = item.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+function ItemsSuggestField({
   items,
   initialItemId,
   selectedItemId,
@@ -18,6 +73,10 @@ export default function ItemsSuggestField({
   sellable = false,
   purchasable = false,
   popoverFill = false,
+
+  allowCreate = true,
+
+  openDrawer,
   ...suggestProps
 }) {
   // Filters items based on filter props.
@@ -36,28 +95,23 @@ export default function ItemsSuggestField({
   // Find initial item object.
   const initialItem = useMemo(
     () => filteredItems.some((a) => a.id === initialItemId),
-    [initialItemId],
+    [initialItemId, filteredItems],
   );
 
   const [selectedItem, setSelectedItem] = useState(initialItem || null);
 
   const onItemSelect = useCallback(
     (item) => {
-      setSelectedItem({ ...item });
-      onItemSelected && onItemSelected(item);
+      if (item.id) {
+        setSelectedItem({ ...item });
+        onItemSelected && onItemSelected(item);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_ITEM);
+      }
     },
-    [setSelectedItem, onItemSelected],
+    [setSelectedItem, onItemSelected, openDrawer],
   );
 
-  const itemRenderer = useCallback((item, { modifiers, handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.code}
-      onClick={handleClick}
-    />
-  ));
-
   useEffect(() => {
     if (typeof selectedItemId !== 'undefined') {
       const item = selectedItemId
@@ -67,27 +121,12 @@ export default function ItemsSuggestField({
     }
   }, [selectedItemId, filteredItems, setSelectedItem]);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
-  // Filters items.
-  const filterItemsPredicater = useCallback(
-    (query, item, _index, exactMatch) => {
-      const normalizedTitle = item.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
   return (
     <Suggest
       items={filteredItems}
@@ -104,7 +143,12 @@ export default function ItemsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDrawerActions)(ItemsSuggestField);
diff --git a/src/components/index.js b/src/components/index.js
index aa156307e..415e1fe08 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -87,6 +87,7 @@ export * from './IntersectionObserver'
 export * from './Datatable/CellForceWidth';
 export * from './Button';
 export * from './IntersectionObserver';
+export * from './Contacts';
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Accounting/MakeJournal/components.js b/src/containers/Accounting/MakeJournal/components.js
index e7a5dbf86..f79926091 100644
--- a/src/containers/Accounting/MakeJournal/components.js
+++ b/src/containers/Accounting/MakeJournal/components.js
@@ -128,6 +128,7 @@ export const useJournalTableEntriesColumns = () => {
         className: 'account',
         disableSortBy: true,
         width: 160,
+        fieldProps: { allowCreate: true }
       },
       {
         Header: CreditHeaderCell,
diff --git a/src/containers/Customers/CustomerForm/CustomerFloatingActions.js b/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
index 2db9b862b..58d0a5f27 100644
--- a/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
+++ b/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
@@ -9,23 +9,24 @@ import {
   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 styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import { CLASSES } from 'common/classes';
 import { Icon } from 'components';
 import { useCustomerFormContext } from './CustomerFormProvider';
 
+import { safeInvoke } from 'utils';
+
 /**
  * Customer floating actions bar.
  */
-export default function CustomerFloatingActions() {
-  const history = useHistory();
-
+export default function CustomerFloatingActions({ onCancel }) {
   // Customer form context.
-  const { isNewMode,setSubmitPayload } = useCustomerFormContext();
+  const { isNewMode, setSubmitPayload } = useCustomerFormContext();
 
   // Formik context.
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -37,7 +38,7 @@ export default function CustomerFloatingActions() {
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
-    history.goBack();
+    safeInvoke(onCancel, event);
   };
 
   // handle clear button clicl.
@@ -55,7 +56,7 @@ export default function CustomerFloatingActions() {
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
-        <Button
+        <SaveButton
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
@@ -83,6 +84,7 @@ export default function CustomerFloatingActions() {
           />
         </Popover>
       </ButtonGroup>
+
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
@@ -99,3 +101,7 @@ export default function CustomerFloatingActions() {
     </div>
   );
 }
+
+const SaveButton = styled(Button)`
+  min-width: 100px;
+`;
diff --git a/src/containers/Customers/CustomerForm/CustomerForm.js b/src/containers/Customers/CustomerForm/CustomerForm.js
index c8648bfd0..7adf26da5 100644
--- a/src/containers/Customers/CustomerForm/CustomerForm.js
+++ b/src/containers/Customers/CustomerForm/CustomerForm.js
@@ -1,152 +1,14 @@
-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'),
-};
+import React from 'react';
+import { CustomerFormProvider } from './CustomerFormProvider';
+import CustomerFormFormik from './CustomerFormFormik';
 
 /**
- * Customer form.
+ * Abstructed 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);
-    }
-  };
-
+export default function CustomerForm({ customerId }) {
   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>
+    <CustomerFormProvider customerId={customerId}>
+      <CustomerFormFormik />
+    </CustomerFormProvider>
   );
 }
-
-export default compose(withCurrentOrganization())(CustomerForm);
diff --git a/src/containers/Customers/CustomerForm/CustomerFormFormik.js b/src/containers/Customers/CustomerForm/CustomerFormFormik.js
new file mode 100644
index 000000000..ff5851d20
--- /dev/null
+++ b/src/containers/Customers/CustomerForm/CustomerFormFormik.js
@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import AppToaster from 'components/AppToaster';
+
+import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
+
+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, saveInvoke } from 'utils';
+import { useCustomerFormContext } from './CustomerFormProvider';
+import { defaultInitialValues } from './utils';
+
+import 'style/pages/Customers/Form.scss';
+
+/**
+ * Customer form.
+ */
+function CustomerFormFormik({
+  organization: { base_currency },
+
+  // #ownProps
+  initialValues: initialCustomerValues,
+  onSubmitSuccess,
+  onSubmitError,
+  onCancel,
+  className,
+}) {
+  const {
+    customer,
+    submitPayload,
+    contactDuplicate,
+    editCustomerMutate,
+    createCustomerMutate,
+    isNewMode,
+  } = useCustomerFormContext();
+
+  /**
+   * Initial values in create and edit mode.
+   */
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      currency_code: base_currency,
+      ...transformToForm(contactDuplicate || customer, defaultInitialValues),
+      ...initialCustomerValues,
+    }),
+    [customer, contactDuplicate, base_currency, initialCustomerValues],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, formArgs) => {
+    const { setSubmitting, resetForm } = formArgs;
+    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();
+
+      saveInvoke(onSubmitSuccess, values, formArgs, submitPayload);
+    };
+
+    const onError = () => {
+      setSubmitting(false);
+      saveInvoke(onSubmitError, values, formArgs, submitPayload);
+    };
+
+    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,
+        className,
+      )}
+    >
+      <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 onCancel={onCancel} />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(CustomerFormFormik);
diff --git a/src/containers/Customers/CustomerForm/CustomerFormPage.js b/src/containers/Customers/CustomerForm/CustomerFormPage.js
index 50d264d1b..5cf1d3971 100644
--- a/src/containers/Customers/CustomerForm/CustomerFormPage.js
+++ b/src/containers/Customers/CustomerForm/CustomerFormPage.js
@@ -1,20 +1,74 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { DashboardCard } from 'components';
-import CustomerForm from './CustomerForm';
-import { CustomerFormProvider } from './CustomerFormProvider';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
-import 'style/pages/Customers/PageForm.scss';
+import CustomerFormFormik from './CustomerFormFormik';
+import {
+  CustomerFormProvider,
+  useCustomerFormContext,
+} from './CustomerFormProvider';
 
-export default function CustomerFormPage() {
-  const { id } = useParams();
+/**
+ * Customer form page loading.
+ * @returns {JSX}
+ */
+function CustomerFormPageLoading({ children }) {
+  const { isFormLoading } = useCustomerFormContext();
 
   return (
-    <CustomerFormProvider customerId={id}>
-      <DashboardCard page>
-        <CustomerForm />
-      </DashboardCard>
+    <CustomerDashboardInsider loading={isFormLoading}>
+      {children}
+    </CustomerDashboardInsider>
+  );
+}
+
+/**
+ * Customer form page.
+ * @returns {JSX}
+ */
+export default function CustomerFormPage() {
+  const history = useHistory();
+  const { id } = useParams();
+
+  const customerId = parseInt(id, 10);
+
+  // Handle the form submit success.
+  const handleSubmitSuccess = (values, formArgs, submitPayload) => {
+    if (!submitPayload.noRedirect) {
+      history.push('/customers');
+    }
+  };
+  // Handle the form cancel button click.
+  const handleFormCancel = () => {
+    history.goBack();
+  };
+
+  return (
+    <CustomerFormProvider customerId={customerId}>
+      <CustomerFormPageLoading>
+        <DashboardCard page>
+          <CustomerFormPageFormik
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </DashboardCard>
+      </CustomerFormPageLoading>
     </CustomerFormProvider>
   );
-}
\ No newline at end of file
+}
+
+const CustomerFormPageFormik = styled(CustomerFormFormik)`
+  .page-form {
+    &__floating-actions {
+      margin-left: -40px;
+      margin-right: -40px;
+    }
+  }
+`;
+
+const CustomerDashboardInsider = styled(DashboardInsider)`
+  padding-bottom: 64px;
+`;
diff --git a/src/containers/Customers/CustomerForm/CustomerFormProvider.js b/src/containers/Customers/CustomerForm/CustomerFormProvider.js
index 64fa78685..ae678b4b8 100644
--- a/src/containers/Customers/CustomerForm/CustomerFormProvider.js
+++ b/src/containers/Customers/CustomerForm/CustomerFormProvider.js
@@ -1,6 +1,5 @@
 import React, { useState, createContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useCustomer,
   useCurrencies,
@@ -24,7 +23,7 @@ function CustomerFormProvider({ customerId, ...props }) {
   // Handle fetch contact duplicate details.
   const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
     contactId,
-    { enabled: !!contactId, },
+    { enabled: !!contactId },
   );
   // Handle fetch Currencies data table
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
@@ -38,6 +37,9 @@ function CustomerFormProvider({ customerId, ...props }) {
   // determines whether the form new or duplicate mode.
   const isNewMode = contactId || !customerId;
 
+  const isFormLoading =
+    isCustomerLoading || isCurrenciesLoading || isContactLoading;
+
   const provider = {
     customerId,
     customer,
@@ -48,24 +50,14 @@ function CustomerFormProvider({ customerId, ...props }) {
 
     isCustomerLoading,
     isCurrenciesLoading,
+    isFormLoading,
 
     setSubmitPayload,
     editCustomerMutate,
     createCustomerMutate,
   };
 
-  return (
-    <DashboardInsider
-      loading={
-        isCustomerLoading ||
-        isCurrenciesLoading ||
-        isContactLoading
-      }
-      name={'customer-form'}
-    >
-      <CustomerFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <CustomerFormContext.Provider value={provider} {...props} />;
 }
 
 const useCustomerFormContext = () => React.useContext(CustomerFormContext);
diff --git a/src/containers/Customers/CustomerForm/utils.js b/src/containers/Customers/CustomerForm/utils.js
new file mode 100644
index 000000000..d72cfb92d
--- /dev/null
+++ b/src/containers/Customers/CustomerForm/utils.js
@@ -0,0 +1,38 @@
+import moment from 'moment';
+
+
+export 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'),
+};
diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
index 967fb68e0..852dca76e 100644
--- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
+++ b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
@@ -37,7 +37,7 @@ export default function QuickPaymentMadeFormFields() {
   const { accounts } = useQuickPaymentMadeContext();
 
   // Intl context.
-  
+
   const paymentMadeFieldRef = useAutofocus();
 
   return (
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js
new file mode 100644
index 000000000..260b5ef15
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  DrawerHeaderContent,
+  DrawerBody,
+  FormattedMessage as T,
+} from 'components';
+
+import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
+
+/**
+ * Quick create/edit customer drawer.
+ */
+export default function QuickCreateCustomerDrawerContent({ displayName }) {
+  return (
+    <React.Fragment>
+      <DrawerHeaderContent
+        name="quick-create-customer"
+        title={<T id={'create_a_new_customer'} />}
+      />
+      <DrawerBody>
+        <QuickCustomerFormDrawer displayName={displayName} />
+      </DrawerBody>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js
new file mode 100644
index 000000000..1b665c384
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import {
+  CustomerFormProvider,
+  useCustomerFormContext,
+} from '../../Customers/CustomerForm/CustomerFormProvider';
+import CustomerFormFormik from '../../Customers/CustomerForm/CustomerFormFormik';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+/**
+ * Drawer customer form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerCustomerFormLoading({ children }) {
+  const { isFormLoading } = useCustomerFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick customer form of the drawer.
+ */
+function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
+  // Handle the form submit request success.
+  const handleSubmitSuccess = () => {
+    closeDrawer('quick-create-customer');
+  };
+  // Handle the form cancel action.
+  const handleCancelForm = () => {
+    closeDrawer('quick-create-customer');
+  };
+
+  return (
+    <CustomerFormProvider customerId={customerId}>
+      <DrawerCustomerFormLoading>
+        <CustomerFormCard>
+          <CustomerFormFormik
+            initialValues={{ display_name: displayName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleCancelForm}
+          />
+        </CustomerFormCard>
+      </DrawerCustomerFormLoading>
+    </CustomerFormProvider>
+  );
+}
+
+export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
+
+const CustomerFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form {
+    &__floating-actions {
+      margin-left: -36px;
+      margin-right: -36px;
+    }
+  }
+`;
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/index.js b/src/containers/Drawers/QuickCreateCustomerDrawer/index.js
new file mode 100644
index 000000000..ce970532e
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const QuickCreateCustomerDrawerContent = React.lazy(() =>
+  import('./QuickCreateCustomerDrawerContent'),
+);
+
+/**
+ * Quick Create customer
+ */
+function QuickCreateCustomerDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'80%'}
+    >
+      <DrawerSuspense>
+        <QuickCreateCustomerDrawerContent displayName={payload.displayName} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(QuickCreateCustomerDrawer);
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js
new file mode 100644
index 000000000..b470822f8
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  DrawerHeaderContent,
+  DrawerBody,
+  FormattedMessage as T,
+} from 'components';
+
+import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
+
+/**
+ * Quick create/edit item drawer content.
+ */
+export default function QuickCreateItemDrawerContent({ itemName }) {
+  return (
+    <React.Fragment>
+      <DrawerHeaderContent
+        name="quick-create-item"
+        title={<T id={'create_a_new_item'} />}
+      />
+      <DrawerBody>
+        <QuickCreateItemDrawerForm itemName={itemName} />
+      </DrawerBody>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js
new file mode 100644
index 000000000..ada5848bb
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import ItemFormFormik from '../../Items/ItemFormFormik';
+import {
+  ItemFormProvider,
+  useItemFormContext,
+} from '../../Items/ItemFormProvider';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDashboardActions from '../../Dashboard/withDashboardActions';
+
+import { useDrawerContext } from 'components/Drawer/DrawerProvider';
+
+/**
+ * Drawer item form loading.
+ * @returns {JSX}
+ */
+function DrawerItemFormLoading({ children }) {
+  const { isFormLoading } = useItemFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick create/edit item drawer form.
+ */
+function QuickCreateItemDrawerForm({
+  itemId,
+  itemName,
+  closeDrawer,
+
+  // #withDashboardActions
+  addQuickActionEvent,
+}) {
+  // Drawer context.
+  const { payload } = useDrawerContext();
+
+  // Handle the form submit request success.
+  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+    if (submitPayload.redirect) {
+      closeDrawer('quick-create-item');
+    }
+    if (payload.quickActionEvent) {
+      addQuickActionEvent(payload.quickActionEvent, {
+        itemId: response.data.id,
+      });
+    }
+  };
+  // Handle the form cancel.
+  const handleFormCancel = () => {
+    closeDrawer('quick-create-item');
+  };
+
+  return (
+    <ItemFormProvider itemId={itemId}>
+      <DrawerItemFormLoading>
+        <ItemFormCard>
+          <ItemFormFormik
+            initialValues={{ name: itemName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </ItemFormCard>
+      </DrawerItemFormLoading>
+    </ItemFormProvider>
+  );
+}
+
+export default R.compose(
+  withDrawerActions,
+  withDashboardActions,
+)(QuickCreateItemDrawerForm);
+
+const ItemFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form__floating-actions {
+    margin-left: -36px;
+    margin-right: -36px;
+  }
+`;
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/index.js b/src/containers/Drawers/QuickCreateItemDrawer/index.js
new file mode 100644
index 000000000..972288d2a
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const QuickCretaeItemDrawerContent = React.lazy(() =>
+  import('./QuickCreateItemDrawerContent'),
+);
+
+/**
+ * Quick create item.
+ */
+function QuickCreateItemDrawer({
+  // #ownProps
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '800px', maxWidth: '1000px' }}
+      size={'72%'}
+      payload={payload}
+    >
+      <DrawerSuspense>
+        <QuickCretaeItemDrawerContent itemName={payload.name} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(QuickCreateItemDrawer);
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js b/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js
new file mode 100644
index 000000000..6996dac2a
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import {
+  VendorFormProvider,
+  useVendorFormContext,
+} from '../../Vendors/VendorForm/VendorFormProvider';
+import VendorFormFormik from '../../Vendors/VendorForm/VendorFormFormik';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDashboardActions from '../../Dashboard/withDashboardActions';
+
+import { useDrawerContext } from 'components/Drawer/DrawerProvider';
+
+/**
+ * Drawer vendor form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerVendorFormLoading({ children }) {
+  const { isFormLoading } = useVendorFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick vendor form of the drawer.
+ */
+function QuickVendorFormDrawer({
+  displayName,
+  closeDrawer,
+  vendorId,
+  addQuickActionEvent,
+}) {
+  const { payload } = useDrawerContext();
+
+  // Handle the form submit request success.
+  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+    if (!submitPayload.noRedirect) {
+      closeDrawer('quick-write-vendor');
+    }
+    if (payload.quickActionEvent) {
+      addQuickActionEvent(payload.quickActionEvent, {
+        vendorId: response.data.id,
+      });
+    }
+  };
+  // Handle the form cancel action.
+  const handleCancelForm = () => {
+    closeDrawer('quick-write-vendor');
+  };
+
+  return (
+    <VendorFormProvider vendorId={vendorId}>
+      <DrawerVendorFormLoading>
+        <VendorFormCard>
+          <VendorFormFormik
+            initialValues={{ display_name: displayName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleCancelForm}
+          />
+        </VendorFormCard>
+      </DrawerVendorFormLoading>
+    </VendorFormProvider>
+  );
+}
+
+export default R.compose(
+  withDrawerActions,
+  withDashboardActions,
+)(QuickVendorFormDrawer);
+
+const VendorFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form {
+    &__floating-actions {
+      margin-left: -36px;
+      margin-right: -36px;
+    }
+  }
+`;
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
new file mode 100644
index 000000000..b686d2211
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  DrawerHeaderContent,
+  DrawerBody,
+  FormattedMessage as T,
+} from 'components';
+
+import QuickVendorFormDrawer from './QuickVendorFormDrawer';
+
+/**
+ * Quick create/edit vendor drawer.
+ */
+export default function QuickWriteVendorDrawerContent({ displayName }) {
+  return (
+    <React.Fragment>
+      <DrawerHeaderContent
+        name="quick-create-customer"
+        title={"Create a new vendor"}
+      />
+      <DrawerBody>
+        <QuickVendorFormDrawer displayName={displayName} />
+      </DrawerBody>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/index.js b/src/containers/Drawers/QuickWriteVendorDrawer/index.js
new file mode 100644
index 000000000..6bd8ea2a4
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+const QuickWriteVendorDrawerContent = React.lazy(() =>
+  import('./QuickWriteVendorDrawerContent'),
+);
+
+/**
+ * Quick Write vendor.
+ */
+function QuickWriteVendorDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'80%'}
+      payload={payload}
+    >
+      <DrawerSuspense>
+        <QuickWriteVendorDrawerContent displayName={payload.displayName} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default R.compose(withDrawers())(QuickWriteVendorDrawer);
diff --git a/src/containers/Entries/components.js b/src/containers/Entries/components.js
index 85c057e04..80fcce6e3 100644
--- a/src/containers/Entries/components.js
+++ b/src/containers/Entries/components.js
@@ -108,7 +108,9 @@ const LandedCostHeaderCell = () => {
 /**
  * Retrieve editable items entries columns.
  */
-export function useEditableItemsEntriesColumns({ landedCost }) {
+export function useEditableItemsEntriesColumns({
+  landedCost,
+}) {
   return React.useMemo(
     () => [
       {
@@ -129,6 +131,7 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
         disableSortBy: true,
         width: 130,
         className: 'item',
+        fieldProps: { allowCreate: true },
       },
       {
         Header: intl.get('description'),
diff --git a/src/containers/Entries/utils.js b/src/containers/Entries/utils.js
index 7bfde9d47..22d8adb54 100644
--- a/src/containers/Entries/utils.js
+++ b/src/containers/Entries/utils.js
@@ -164,3 +164,12 @@ export const composeRowsOnNewRow = R.curry((rowIndex, newRow, rows) => {
     updateTableRow(rowIndex, newRow),
   )(rows);
 });
+
+/**
+ *
+ * @param {*} entries
+ * @returns
+ */
+export const composeControlledEntries = (entries) => {
+  return R.compose(orderingLinesIndexes, updateItemsEntriesTotal)(entries);
+};
diff --git a/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js b/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
index 407abb290..5208759fc 100644
--- a/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
+++ b/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
@@ -14,7 +14,7 @@ import {
 import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
   CurrencySelectList,
-  ContactSelecetList,
+  CustomerSelectField,
   AccountsSelectList,
   FieldRequiredHint,
   Hint,
@@ -78,6 +78,7 @@ export default function ExpenseFormHeader() {
               defaultSelectText={<T id={'select_payment_account'} />}
               selectedAccountId={value}
               filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+              allowCreate={true}
             />
           </FormGroup>
         )}
@@ -137,13 +138,14 @@ export default function ExpenseFormHeader() {
             helperText={<ErrorMessage name={'assign_to_customer'} />}
             inline={true}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
               }}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Expenses/ExpenseForm/components.js b/src/containers/Expenses/ExpenseForm/components.js
index 64f275d00..fb52ac569 100644
--- a/src/containers/Expenses/ExpenseForm/components.js
+++ b/src/containers/Expenses/ExpenseForm/components.js
@@ -113,6 +113,7 @@ export function useExpenseFormTableColumns({ landedCost }) {
         disableSortBy: true,
         width: 40,
         filterAccountsByRootTypes: ['expense'],
+        fieldProps: { allowCreate: true },
       },
       {
         Header: ExpenseAmountHeaderCell,
diff --git a/src/containers/Items/ItemForm.js b/src/containers/Items/ItemForm.js
index 99847d298..6638fe57d 100644
--- a/src/containers/Items/ItemForm.js
+++ b/src/containers/Items/ItemForm.js
@@ -1,110 +1,95 @@
 import React from 'react';
-import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
-import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 
-import 'style/pages/Items/PageForm.scss';
+import { useDashboardPageTitle } from 'hooks/state';
+import { useItemFormContext, ItemFormProvider } from './ItemFormProvider';
 
-import { CLASSES } from 'common/classes';
-import AppToaster from 'components/AppToaster';
-import ItemFormPrimarySection from './ItemFormPrimarySection';
-import ItemFormBody from './ItemFormBody';
-import ItemFormFloatingActions from './ItemFormFloatingActions';
-import ItemFormInventorySection from './ItemFormInventorySection';
+import ItemFormFormik from './ItemFormFormik';
 
-import {
-  transformSubmitRequestErrors,
-  useItemFormInitialValues,
-} from './utils';
-import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
-
-import { useItemFormContext } from './ItemFormProvider';
+import DashboardCard from 'components/Dashboard/DashboardCard';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 /**
- * Item form.
+ * Item form dashboard title.
+ * @returns {null}
  */
-export default function ItemForm() {
-  // Item form context.
-  const {
-    itemId,
-    item,
-    accounts,
-    createItemMutate,
-    editItemMutate,
-    submitPayload,
-    isNewMode,
-  } = useItemFormContext();
+function ItemFormDashboardTitle() {
+  // Change page title dispatcher.
+  const changePageTitle = useDashboardPageTitle();
 
+  // Item form context.
+  const { isNewMode } = useItemFormContext();
+
+  // Changes the page title in new and edit mode.
+  React.useEffect(() => {
+    isNewMode
+      ? changePageTitle(intl.get('new_item'))
+      : changePageTitle(intl.get('edit_item_details'));
+  }, [changePageTitle, isNewMode]);
+
+  return null;
+}
+
+/**
+ * Item form page loading state indicator.
+ * @returns {JSX}
+ */
+function ItemFormPageLoading({ children }) {
+  const { isFormLoading } = useItemFormContext();
+
+  return (
+    <DashboardItemFormPageInsider loading={isFormLoading} name={'item-form'}>
+      {children}
+    </DashboardItemFormPageInsider>
+  );
+}
+
+/**
+ * Item form of the page.
+ * @returns {JSX}
+ */
+export default function ItemForm({ itemId }) {
   // History context.
   const history = useHistory();
 
-  // Initial values in create and edit mode.
-  const initialValues = useItemFormInitialValues(item);
-
-  // Handles the form submit.
-  const handleFormSubmit = (
-    values,
-    { setSubmitting, resetForm, setErrors },
-  ) => {
-    setSubmitting(true);
-    const form = { ...values };
-
-    const onSuccess = (response) => {
-      AppToaster.show({
-        message: intl.get(
-          isNewMode
-            ? 'the_item_has_been_created_successfully'
-            : 'the_item_has_been_edited_successfully',
-          {
-            number: itemId,
-          },
-        ),
-        intent: Intent.SUCCESS,
-      });
-      resetForm();
-      setSubmitting(false);
-
-      // Submit payload.
-      if (submitPayload.redirect) {
-        history.push('/items');
-      }
-    };
-
-    // Handle response error.
-    const onError = (errors) => {
-      setSubmitting(false);
-      if (errors) {
-        const _errors = transformSubmitRequestErrors(errors);
-        setErrors({ ..._errors });
-      }
-    };
-    if (isNewMode) {
-      createItemMutate(form).then(onSuccess).catch(onError);
-    } else {
-      editItemMutate([itemId, form]).then(onSuccess).catch(onError);
+  // Handle the form submit success.
+  const handleSubmitSuccess = (values, form, submitPayload) => {
+    if (submitPayload.redirect) {
+      history.push('/items');
     }
   };
+  // Handle cancel button click.
+  const handleFormCancel = () => {
+    history.goBack();
+  };
 
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
-      <Formik
-        enableReinitialize={true}
-        validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <Form>
-          <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <ItemFormPrimarySection />
-            <ItemFormBody accounts={accounts} />
-            <ItemFormInventorySection accounts={accounts} />
-          </div>
+    <ItemFormProvider itemId={itemId}>
+      <ItemFormDashboardTitle />
 
-          <ItemFormFloatingActions />
-        </Form>
-      </Formik>
-    </div>
+      <ItemFormPageLoading>
+        <DashboardCard page>
+          <ItemFormPageFormik
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </DashboardCard>
+      </ItemFormPageLoading>
+    </ItemFormProvider>
   );
 }
+
+const DashboardItemFormPageInsider = styled(DashboardInsider)`
+  padding-bottom: 64px;
+`;
+
+const ItemFormPageFormik = styled(ItemFormFormik)`
+  .page-form {
+    &__floating-actions {
+      margin-left: -40px;
+      margin-right: -40px;
+    }
+  }
+`;
diff --git a/src/containers/Items/ItemFormBody.js b/src/containers/Items/ItemFormBody.js
index 5305e8ba2..2a7e06a19 100644
--- a/src/containers/Items/ItemFormBody.js
+++ b/src/containers/Items/ItemFormBody.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useFormikContext, FastField, Field, ErrorMessage } from 'formik';
+import { useFormikContext, FastField, ErrorMessage } from 'formik';
 import {
   FormGroup,
   Classes,
@@ -122,6 +122,7 @@ function ItemFormBody({ organization: { base_currency } }) {
                   disabled={!form.values.sellable}
                   filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
                   popoverFill={true}
+                  allowCreate={true}
                 />
               </FormGroup>
             )}
@@ -230,6 +231,7 @@ function ItemFormBody({ organization: { base_currency } }) {
                   disabled={!form.values.purchasable}
                   filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
                   popoverFill={true}
+                  allowCreate={true}
                 />
               </FormGroup>
             )}
diff --git a/src/containers/Items/ItemFormFloatingActions.js b/src/containers/Items/ItemFormFloatingActions.js
index eacce65db..fbdb1a152 100644
--- a/src/containers/Items/ItemFormFloatingActions.js
+++ b/src/containers/Items/ItemFormFloatingActions.js
@@ -1,20 +1,19 @@
 import React from 'react';
 import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
+import styled from 'styled-components';
 import { FastField, useFormikContext } from 'formik';
+import classNames from 'classnames';
+
+import { FormattedMessage as T } from 'components';
 
 import { CLASSES } from 'common/classes';
 import { useItemFormContext } from './ItemFormProvider';
+import { saveInvoke } from '../../utils';
 
 /**
  * Item form floating actions.
  */
-export default function ItemFormFloatingActions() {
-  // History context.
-  const history = useHistory();
-
+export default function ItemFormFloatingActions({ onCancel }) {
   // Item form context.
   const { setSubmitPayload, isNewMode } = useItemFormContext();
 
@@ -23,7 +22,7 @@ export default function ItemFormFloatingActions() {
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
-    history.goBack();
+    saveInvoke(onCancel, event);
   };
 
   // Handle submit button click.
@@ -38,7 +37,7 @@ export default function ItemFormFloatingActions() {
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button
+      <SaveButton
         intent={Intent.PRIMARY}
         disabled={isSubmitting}
         loading={isSubmitting}
@@ -47,7 +46,7 @@ export default function ItemFormFloatingActions() {
         className={'btn--submit'}
       >
         {isNewMode ? <T id={'save'} /> : <T id={'edit'} />}
-      </Button>
+      </SaveButton>
 
       <Button
         className={classNames('ml1', 'btn--submit-new')}
@@ -82,3 +81,7 @@ export default function ItemFormFloatingActions() {
     </div>
   );
 }
+
+const SaveButton = styled(Button)`
+  min-width: 100px;
+`;
\ No newline at end of file
diff --git a/src/containers/Items/ItemFormFormik.js b/src/containers/Items/ItemFormFormik.js
new file mode 100644
index 000000000..7876cd6ed
--- /dev/null
+++ b/src/containers/Items/ItemFormFormik.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+
+import 'style/pages/Items/Form.scss';
+
+import { CLASSES } from 'common/classes';
+import AppToaster from 'components/AppToaster';
+import ItemFormPrimarySection from './ItemFormPrimarySection';
+import ItemFormBody from './ItemFormBody';
+import ItemFormFloatingActions from './ItemFormFloatingActions';
+import ItemFormInventorySection from './ItemFormInventorySection';
+
+import {
+  transformSubmitRequestErrors,
+  useItemFormInitialValues,
+} from './utils';
+import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
+
+import { useItemFormContext } from './ItemFormProvider';
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+
+/**
+ * Item form.
+ */
+export default function ItemFormFormik({
+  // #ownProps
+  initialValues: initialValuesComponent,
+  onSubmitSuccess,
+  onSubmitError,
+  onCancel,
+  className,
+}) {
+  // Item form context.
+  const {
+    itemId,
+    item,
+    accounts,
+    createItemMutate,
+    editItemMutate,
+    submitPayload,
+    isNewMode,
+  } = useItemFormContext();
+
+  // Initial values in create and edit mode.
+  const initialValues = useItemFormInitialValues(item, initialValuesComponent);
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, form) => {
+    const { setSubmitting, resetForm, setErrors } = form;
+    const formValues = { ...values };
+
+    setSubmitting(true);
+
+    // Handle response succes.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_item_has_been_created_successfully'
+            : 'the_item_has_been_edited_successfully',
+          {
+            number: itemId,
+          },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      resetForm();
+      setSubmitting(false);
+
+      safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
+    };
+    // Handle response error.
+    const onError = (errors) => {
+      setSubmitting(false);
+
+      if (errors) {
+        const _errors = transformSubmitRequestErrors(errors);
+        setErrors({ ..._errors });
+      }
+      safeInvoke(onSubmitError, values, form, submitPayload, errors);
+    };
+    if (isNewMode) {
+      createItemMutate(formValues).then(onSuccess).catch(onError);
+    } else {
+      editItemMutate([itemId, formValues]).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <div class={classNames(CLASSES.PAGE_FORM_ITEM, className)}>
+      <Formik
+        enableReinitialize={true}
+        validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      > 
+        <Form>
+          <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
+            <ItemFormPrimarySection />
+            <ItemFormBody accounts={accounts} />
+            <ItemFormInventorySection accounts={accounts} />
+          </div>
+
+          <ItemFormFloatingActions onCancel={onCancel} />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
diff --git a/src/containers/Items/ItemFormPage.js b/src/containers/Items/ItemFormPage.js
index 5852b1bdd..c57f03661 100644
--- a/src/containers/Items/ItemFormPage.js
+++ b/src/containers/Items/ItemFormPage.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { ItemFormProvider } from './ItemFormProvider';
-import DashboardCard from 'components/Dashboard/DashboardCard';
-import ItemForm from 'containers/Items/ItemForm';
+import ItemForm from './ItemForm';
 
 /**
  * Item form page.
@@ -12,11 +10,5 @@ export default function ItemFormPage() {
   const { id } = useParams();
   const idInteger = parseInt(id, 10);
 
-  return (
-    <ItemFormProvider itemId={idInteger}>
-      <DashboardCard page>
-        <ItemForm />
-      </DashboardCard>
-    </ItemFormProvider>
-  );
-}
\ No newline at end of file
+  return <ItemForm itemId={idInteger} />;
+}
diff --git a/src/containers/Items/ItemFormProvider.js b/src/containers/Items/ItemFormProvider.js
index b491a2d5b..85dcd7276 100644
--- a/src/containers/Items/ItemFormProvider.js
+++ b/src/containers/Items/ItemFormProvider.js
@@ -1,8 +1,5 @@
-import React, { useEffect, createContext, useState } from 'react';
-import intl from 'react-intl-universal';
+import React, { createContext, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useItem,
   useSettingsItems,
@@ -11,7 +8,6 @@ import {
   useEditItem,
   useAccounts,
 } from 'hooks/query';
-import { useDashboardPageTitle } from 'hooks/state';
 import { useWatchItemError } from './utils';
 
 const ItemFormContext = createContext();
@@ -59,6 +55,13 @@ function ItemFormProvider({ itemId, ...props }) {
   // Detarmines whether the form new mode.
   const isNewMode = duplicateId || !itemId;
 
+  // Detarmines the form loading state.
+  const isFormLoading =
+    isItemsSettingsLoading ||
+    isAccountsLoading ||
+    isItemsCategoriesLoading ||
+    isItemLoading;
+
   // Provider state.
   const provider = {
     itemId,
@@ -68,6 +71,7 @@ function ItemFormProvider({ itemId, ...props }) {
     submitPayload,
     isNewMode,
 
+    isFormLoading,
     isAccountsLoading,
     isItemsCategoriesLoading,
     isItemLoading,
@@ -77,27 +81,7 @@ function ItemFormProvider({ itemId, ...props }) {
     setSubmitPayload,
   };
 
-  // Change page title dispatcher.
-  const changePageTitle = useDashboardPageTitle();
-
-  // Changes the page title in new and edit mode.
-  useEffect(() => {
-    isNewMode
-      ? changePageTitle(intl.get('new_item'))
-      : changePageTitle(intl.get('edit_item_details'));
-  }, [changePageTitle, isNewMode]);
-
-  const loading =
-    isItemsSettingsLoading ||
-    isAccountsLoading ||
-    isItemsCategoriesLoading ||
-    isItemLoading;
-
-  return (
-    <DashboardInsider loading={loading} name={'item-form'}>
-      <ItemFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <ItemFormContext.Provider value={provider} {...props} />;
 }
 
 const useItemFormContext = () => React.useContext(ItemFormContext);
diff --git a/src/containers/Items/utils.js b/src/containers/Items/utils.js
index 5d5dbf156..406746786 100644
--- a/src/containers/Items/utils.js
+++ b/src/containers/Items/utils.js
@@ -33,7 +33,7 @@ const defaultInitialValues = {
 /**
  * Initial values in create and edit mode.
  */
-export const useItemFormInitialValues = (item) => {
+export const useItemFormInitialValues = (item, initialValues) => {
   const { items: itemsSettings } = useSettingsSelector();
 
   return useMemo(
@@ -54,8 +54,9 @@ export const useItemFormInitialValues = (item) => {
         transformItemFormData(item, defaultInitialValues),
         defaultInitialValues,
       ),
+      ...initialValues,
     }),
-    [item, itemsSettings],
+    [item, itemsSettings, initialValues],
   );
 };
 
diff --git a/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js b/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
index dfa2a5d28..44bd7d75e 100644
--- a/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
+++ b/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
@@ -6,7 +6,7 @@ import { FastField, ErrorMessage } from 'formik';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { ContactSelecetList, FieldRequiredHint, Icon } from 'components';
+import { VendorSelectField, FieldRequiredHint, Icon } from 'components';
 import { vendorsFieldShouldUpdate } from './utils';
 
 import { useBillFormContext } from './BillFormProvider';
@@ -43,14 +43,15 @@ function BillFormHeader() {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <ContactSelecetList
-              contactsList={vendors}
+            <VendorSelectField
+              contacts={vendors}
               selectedContactId={value}
               defaultSelectText={<T id={'select_vender_account'} />}
               onContactSelected={(contact) => {
                 form.setFieldValue('vendor_id', contact.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
index d59d8994c..d2177f3ed 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -15,7 +15,7 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
   AccountsSelectList,
-  ContactSelecetList,
+  VendorSelectField,
   FieldRequiredHint,
   InputPrependText,
   Money,
@@ -90,8 +90,8 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <ContactSelecetList
-              contactsList={vendors}
+            <VendorSelectField
+              contacts={vendors}
               selectedContactId={value}
               defaultSelectText={<T id={'select_vender_account'} />}
               onContactSelected={(contact) => {
@@ -100,6 +100,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
               }}
               disabled={!isNewMode}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
index fce425f3a..e83642bf8 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -19,7 +19,7 @@ import { customersFieldShouldUpdate } from './utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  ContactSelecetList,
+  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -82,8 +82,8 @@ function EstimateFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
@@ -91,6 +91,7 @@ function EstimateFormHeader({
               }}
               popoverFill={true}
               intent={inputIntent({ error, touched })}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
index 1775d8d78..d5c8aaca6 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
@@ -10,20 +10,23 @@ 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,
+  CustomerSelectField,
   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';
 
 /**
@@ -84,14 +87,15 @@ function InvoiceFormHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
index 452ca971d..743e97d32 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -23,7 +23,7 @@ import {
 } from 'utils';
 import {
   AccountsSelectList,
-  ContactSelecetList,
+  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -134,8 +134,8 @@ function PaymentReceiveHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
@@ -147,6 +147,7 @@ function PaymentReceiveHeaderFields({
               buttonProps={{
                 elementRef: (ref) => (customerFieldRef.current = ref),
               }}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
index 60ec206bb..9f384dd77 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
@@ -12,7 +12,7 @@ import { FastField, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import {
   AccountsSelectList,
-  ContactSelecetList,
+  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -88,14 +88,15 @@ function ReceiptFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(contact) => {
                 form.setFieldValue('customer_id', contact.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
@@ -129,6 +130,7 @@ function ReceiptFormHeader({
                 ACCOUNT_TYPE.BANK,
                 ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
               ]}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Vendors/VendorForm/VendorFloatingActions.js b/src/containers/Vendors/VendorForm/VendorFloatingActions.js
index 1da3670da..085efd598 100644
--- a/src/containers/Vendors/VendorForm/VendorFloatingActions.js
+++ b/src/containers/Vendors/VendorForm/VendorFloatingActions.js
@@ -9,42 +9,43 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import styled from 'styled-components';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
 import { useFormikContext } from 'formik';
-import { useHistory } from 'react-router-dom';
+
+import { FormattedMessage as T } from 'components';
+
+import { CLASSES } from 'common/classes';
 import { Icon } from 'components';
 import { useVendorFormContext } from './VendorFormProvider';
 
+import { safeInvoke } from 'utils';
+
 /**
  * Vendor floating actions bar.
  */
-export default function VendorFloatingActions() {
+export default function VendorFloatingActions({ onCancel }) {
   // Formik context.
   const { resetForm, isSubmitting, submitForm } = useFormikContext();
 
   // Vendor form context.
   const { isNewMode, setSubmitPayload } = useVendorFormContext();
 
-  // History.
-  const history = useHistory();
-
   // Handle the submit button.
   const handleSubmitBtnClick = (event) => {
-    setSubmitPayload({ noRedirect: false, });
+    setSubmitPayload({ noRedirect: false });
     submitForm();
   };
 
   // Handle the submit & new button click.
   const handleSubmitAndNewClick = (event) => {
     submitForm();
-    setSubmitPayload({ noRedirect: true, });
+    setSubmitPayload({ noRedirect: true });
   };
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
-    history.goBack();
+    safeInvoke(onCancel, event);
   };
 
   // Handle clear button click.
@@ -56,7 +57,7 @@ export default function VendorFloatingActions() {
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
-        <Button
+        <SaveButton
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
@@ -101,3 +102,7 @@ export default function VendorFloatingActions() {
     </div>
   );
 }
+
+const SaveButton = styled(Button)`
+  min-width: 100px;
+`;
diff --git a/src/containers/Vendors/VendorForm/VendorForm.js b/src/containers/Vendors/VendorForm/VendorFormFormik.js
similarity index 63%
rename from src/containers/Vendors/VendorForm/VendorForm.js
rename to src/containers/Vendors/VendorForm/VendorFormFormik.js
index db9474aa1..c45bb2e59 100644
--- a/src/containers/Vendors/VendorForm/VendorForm.js
+++ b/src/containers/Vendors/VendorForm/VendorFormFormik.js
@@ -1,13 +1,10 @@
-import React, { useMemo, useEffect } from 'react';
+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 { FormattedMessage as T } from 'components';
 import AppToaster from 'components/AppToaster';
 import {
   CreateVendorFormSchema,
@@ -19,56 +16,27 @@ import VendorFormAfterPrimarySection from './VendorFormAfterPrimarySection';
 import VendorTabs from './VendorsTabs';
 import VendorFloatingActions from './VendorFloatingActions';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 
 import { useVendorFormContext } from './VendorFormProvider';
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm, safeInvoke } from 'utils';
 
-const defaultInitialValues = {
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  company_name: '',
-  display_name: '',
+import { defaultInitialValues } from './utils';
 
-  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'),
-};
+import 'style/pages/Vendors/Form.scss';
 
 /**
  * Vendor form.
  */
-function VendorForm({
-  // #withDashboardActions
-  changePageTitle,
-
+function VendorFormFormik({
   // #withCurrentOrganization
   organization: { base_currency },
+
+  // #ownProps
+  onSubmitSuccess,
+  onSubmitError,
+  onCancel,
+  className,
 }) {
   // Vendor form context.
   const {
@@ -82,11 +50,6 @@ function VendorForm({
     isNewMode,
   } = useVendorFormContext();
 
-  // const isNewMode = !vendorId;
-
-  // History context.
-  const history = useHistory();
-
   /**
    * Initial values in create and edit mode.
    */
@@ -101,14 +64,13 @@ function VendorForm({
   );
 
   // Handles the form submit.
-  const handleFormSubmit = (
-    values,
-    { setSubmitting, resetForm, setErrors },
-  ) => {
+  const handleFormSubmit = (values, form) => {
+    const { setSubmitting, resetForm } = form;
     const requestForm = { ...values };
+
     setSubmitting(true);
 
-    const onSuccess = () => {
+    const onSuccess = (response) => {
       AppToaster.show({
         message: intl.get(
           isNewMode
@@ -121,16 +83,15 @@ function VendorForm({
       setSubmitting(false);
       resetForm();
 
-      if (!submitPayload.noRedirect) {
-        history.push('/vendors');
-      }
+      safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
     };
 
     const onError = () => {
       setSubmitPayload(false);
       setSubmitting(false);
-    };
 
+      safeInvoke(onSubmitError, values, form, submitPayload);
+    };
     if (isNewMode) {
       createVendorMutate(requestForm).then(onSuccess).catch(onError);
     } else {
@@ -139,7 +100,13 @@ function VendorForm({
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_VENDOR)}>
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_VENDOR,
+        className,
+      )}
+    >
       <Formik
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
@@ -160,14 +127,11 @@ function VendorForm({
             <VendorTabs vendor={vendorId} />
           </div>
 
-          <VendorFloatingActions />
+          <VendorFloatingActions onCancel={onCancel} />
         </Form>
       </Formik>
     </div>
   );
 }
 
-export default compose(
-  withDashboardActions,
-  withCurrentOrganization(),
-)(VendorForm);
+export default compose(withCurrentOrganization())(VendorFormFormik);
diff --git a/src/containers/Vendors/VendorForm/VendorFormPage.js b/src/containers/Vendors/VendorForm/VendorFormPage.js
index 329644097..5553dba57 100644
--- a/src/containers/Vendors/VendorForm/VendorFormPage.js
+++ b/src/containers/Vendors/VendorForm/VendorFormPage.js
@@ -1,26 +1,69 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 
 import 'style/pages/Vendors/PageForm.scss';
 
-import { DashboardCard } from 'components';
-import VendorFrom from './VendorForm';
+import { DashboardCard, DashboardInsider } from 'components';
+import VendorFormFormik from './VendorFormFormik';
 
-import { VendorFormProvider } from './VendorFormProvider';
+import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
+
+/**
+ * Vendor form page loading wrapper.
+ * @returns {JSX}
+ */
+function VendorFormPageLoading({ children }) {
+  const { isFormLoading } = useVendorFormContext();
+
+  return (
+    <VendorDashboardInsider loading={isFormLoading}>
+      {children}
+    </VendorDashboardInsider>
+  );
+}
 
 /**
  * Vendor form page.
  */
-function VendorFormPage() {
+export default function VendorFormPage() {
+  const history = useHistory();
   const { id } = useParams();
-  
+
+  // Handle the form submit success.
+  const handleSubmitSuccess = (values, formArgs, submitPayload) => {
+    if (!submitPayload.noRedirect) {
+      history.push('/vendors');
+    }
+  };
+  // Handle the form cancel button click.
+  const handleFormCancel = () => {
+    history.goBack();
+  };
+
   return (
     <VendorFormProvider vendorId={id}>
-      <DashboardCard page>
-        <VendorFrom />
-      </DashboardCard>
+      <VendorFormPageLoading>
+        <DashboardCard page>
+          <VendorFormPageFormik
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </DashboardCard>
+      </VendorFormPageLoading>
     </VendorFormProvider>
   );
 }
 
-export default VendorFormPage;
+const VendorFormPageFormik = styled(VendorFormFormik)`
+  .page-form {
+    &__floating-actions {
+      margin-left: -40px;
+      margin-right: -40px;
+    }
+  }
+`;
+
+const VendorDashboardInsider = styled(DashboardInsider)`
+  padding-bottom: 64px;
+`;
diff --git a/src/containers/Vendors/VendorForm/VendorFormProvider.js b/src/containers/Vendors/VendorForm/VendorFormProvider.js
index 107b86af5..a40d2ed4f 100644
--- a/src/containers/Vendors/VendorForm/VendorFormProvider.js
+++ b/src/containers/Vendors/VendorForm/VendorFormProvider.js
@@ -6,7 +6,6 @@ import {
   useVendor,
   useContact,
   useCurrencies,
-  useCustomer,
   useCreateVendor,
   useEditVendor,
 } from 'hooks/query';
@@ -30,11 +29,10 @@ function VendorFormProvider({ vendorId, ...props }) {
   });
 
   // Handle fetch contact duplicate details.
-  const {
-    data: contactDuplicate,
-    isLoading: isContactLoading,
-  } = useContact(contactId, { enabled: !!contactId });
-
+  const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
+    contactId,
+    { enabled: !!contactId },
+  );
   // Create and edit vendor mutations.
   const { mutateAsync: createVendorMutate } = useCreateVendor();
   const { mutateAsync: editVendorMutate } = useEditVendor();
@@ -45,27 +43,25 @@ function VendorFormProvider({ vendorId, ...props }) {
   // determines whether the form new or duplicate mode.
   const isNewMode = contactId || !vendorId;
 
+  const isFormLoading =
+    isVendorLoading || isContactLoading || isCurrenciesLoading;
+
   const provider = {
     vendorId,
     currencies,
     vendor,
     contactDuplicate: { ...omit(contactDuplicate, ['opening_balance_at']) },
     submitPayload,
+
     isNewMode,
+    isFormLoading,
 
     createVendorMutate,
     editVendorMutate,
     setSubmitPayload,
   };
 
-  return (
-    <DashboardInsider
-      loading={isVendorLoading || isContactLoading || isCurrenciesLoading}
-      name={'vendor-form'}
-    >
-      <VendorFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <VendorFormContext.Provider value={provider} {...props} />;
 }
 
 const useVendorFormContext = () => React.useContext(VendorFormContext);
diff --git a/src/containers/Vendors/VendorForm/utils.js b/src/containers/Vendors/VendorForm/utils.js
new file mode 100644
index 000000000..8c9a70509
--- /dev/null
+++ b/src/containers/Vendors/VendorForm/utils.js
@@ -0,0 +1,36 @@
+import moment from 'moment';
+
+export const defaultInitialValues = {
+  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'),
+};
diff --git a/src/style/pages/Customers/Form.scss b/src/style/pages/Customers/Form.scss
new file mode 100644
index 000000000..6a90e84ed
--- /dev/null
+++ b/src/style/pages/Customers/Form.scss
@@ -0,0 +1,157 @@
+@import '../../Base.scss';
+
+.page-form--customer {
+  $self: '.page-form';
+  padding: 20px;
+
+  #{$self}__header {
+    padding: 0;
+  }
+  #{$self}__primary-section {
+    padding: 10px 0 0;
+    margin: 0 0 20px;
+    overflow: hidden;
+    border-bottom: 1px solid #e4e4e4;
+    max-width: 1000px;
+  }
+
+  .bp3-form-group {
+    max-width: 500px;
+
+    .bp3-control {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
+    &.bp3-inline {
+      .bp3-label {
+        min-width: 150px;
+      }
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+  }
+
+  .form-group--contact_name {
+    max-width: 600px;
+
+    .bp3-control-group > * {
+      flex-shrink: unset;
+
+      &:not(:last-child) {
+        padding-right: 10px;
+      }
+      &.input-group--salutation-list {
+        width: 25%;
+      }
+      &.input-group--first-name,
+      &.input-group--last-name {
+        width: 37%;
+      }
+    }
+  }
+
+  .bp3-form-group {
+    margin-bottom: 14px;
+  }
+
+  .bp3-tab-panel {
+    margin-top: 26px;
+  }
+
+  .form-group--phone-number {
+    .bp3-control-group > * {
+      flex-shrink: unset;
+      padding-right: 5px;
+      padding-left: 5px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  #{$self}__tabs {
+    margin-top: 20px;
+    max-width: 1000px;
+
+    h4 {
+      font-weight: 500;
+      color: #888;
+      margin-bottom: 1.2rem;
+      font-size: 14px;
+    }
+    // Tab panels.
+    .tab-panel {
+      &--address {
+        .bp3-form-group {
+          max-width: 440px;
+
+          &.bp3-inline {
+            .bp3-label {
+              min-width: 145px;
+            }
+          }
+
+          .bp3-form-content {
+            width: 100%;
+          }
+
+          textarea.bp3-input {
+            max-width: 100%;
+            width: 100%;
+            min-height: 50px;
+          }
+        }
+      }
+      &--note {
+        .form-group--note {
+          .bp3-form-group {
+            max-width: 600px;
+          }
+          textarea {
+            width: 100%;
+            min-height: 100px;
+          }
+        }
+      }
+    }
+
+    .dropzone-container {
+      max-width: 600px;
+    }
+  }
+
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #f0f0f0;
+      }
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #555;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: $pt-link-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/pages/Items/PageForm.scss b/src/style/pages/Items/Form.scss
similarity index 85%
rename from src/style/pages/Items/PageForm.scss
rename to src/style/pages/Items/Form.scss
index 9cc4db1d1..31575856d 100644
--- a/src/style/pages/Items/PageForm.scss
+++ b/src/style/pages/Items/Form.scss
@@ -1,16 +1,4 @@
 
-body.page-item-new,
-body.page-item-edit{
-
-  .dashboard__footer{
-    display: none;
-  }
-}
-
-.dashboard__insider--item-form{
-  padding-bottom: 64px;
-}
-
 .page-form--item {
   $self: '.page-form';
   padding: 20px;
@@ -85,18 +73,14 @@ body.page-item-edit{
   }
 
   #{$self}__floating-actions {
-    margin-left: -40px;
-    margin-right: -40px;
+    // margin-left: -40px;
+    // margin-right: -40px;
 
     .form-group--active {
       display: inline-block;
       margin: 0;
       margin-left: 40px;
     }
-
-    .btn--submit{
-      min-width: 65px;
-    }
   }
 
   .bp3-tooltip-indicator {
diff --git a/src/style/pages/SaleInvoice/PageForm.scss b/src/style/pages/SaleInvoice/PageForm.scss
index 2951ad0d4..bfb6be69c 100644
--- a/src/style/pages/SaleInvoice/PageForm.scss
+++ b/src/style/pages/SaleInvoice/PageForm.scss
@@ -1,13 +1,11 @@
-
 body.page-invoice-new,
-body.page-invoice-edit{
-
-  .dashboard__footer{
+body.page-invoice-edit {
+  .dashboard__footer {
     display: none;
   }
 }
 
-.dashboard__insider--invoice-form{
+.dashboard__insider--invoice-form {
   padding-bottom: 64px;
 }
 
@@ -29,7 +27,6 @@ body.page-invoice-edit{
     }
 
     .bp3-form-group {
-    
       &.bp3-inline {
         max-width: 450px;
       }
diff --git a/src/style/pages/Customers/PageForm.scss b/src/style/pages/Vendors/Form.scss
similarity index 91%
rename from src/style/pages/Customers/PageForm.scss
rename to src/style/pages/Vendors/Form.scss
index 57512123f..6a341d76c 100644
--- a/src/style/pages/Customers/PageForm.scss
+++ b/src/style/pages/Vendors/Form.scss
@@ -1,19 +1,6 @@
 @import '../../Base.scss';
 
-
-body.page-customer-new,
-body.page-customer-edit{
-
-  .dashboard__footer{
-    display: none;
-  }
-}
-
-.dashboard__insider--customer-form{
-  padding-bottom: 64px;
-}
-
-.page-form--customer {
+.page-form--vendor {
   $self: '.page-form';
   padding: 20px;
 
@@ -169,7 +156,7 @@ body.page-customer-edit{
   }
 
   #{$self}__floating-actions {
-    margin-left: -40px;
-    margin-right: -40px;
+    // margin-left: -40px;
+    // margin-right: -40px;
   }
 }
diff --git a/src/style/pages/Vendors/PageForm.scss b/src/style/pages/Vendors/PageForm.scss
index dd7e4a372..251f8b3da 100644
--- a/src/style/pages/Vendors/PageForm.scss
+++ b/src/style/pages/Vendors/PageForm.scss
@@ -10,166 +10,4 @@ body.page-vendor-edit{
 
 .dashboard__insider--vendor-form{
   padding-bottom: 64px;
-}
-
-
-.page-form--vendor {
-  $self: '.page-form';
-  padding: 20px;
-
-  #{$self}__header {
-    padding: 0;
-  }
-  #{$self}__primary-section {
-    padding: 10px 0 0;
-    margin: 0 0 20px;
-    overflow: hidden;
-    border-bottom: 1px solid #e4e4e4;
-    max-width: 1000px;
-  }
-
-  .bp3-form-group {
-    max-width: 500px;
-
-    .bp3-control {
-      margin-top: 8px;
-      margin-bottom: 8px;
-    }
-
-    &.bp3-inline {
-      .bp3-label {
-        min-width: 150px;
-      }
-    }
-    .bp3-form-content {
-      width: 100%;
-    }
-  }
-
-  .form-group--contact_name {
-    max-width: 600px;
-
-    .bp3-control-group > * {
-      flex-shrink: unset;
-
-      &:not(:last-child) {
-        padding-right: 10px;
-      }
-      &.input-group--salutation-list {
-        width: 25%;
-      }
-      &.input-group--first-name,
-      &.input-group--last-name {
-        width: 37%;
-      }
-    }
-  }
-
-  .bp3-form-group {
-    margin-bottom: 14px;
-  }
-
-  .bp3-tab-panel {
-    margin-top: 26px;
-  }
-
-  .form-group--phone-number {
-    .bp3-control-group > * {
-      flex-shrink: unset;
-      padding-right: 5px;
-      padding-left: 5px;
-
-      &:first-child {
-        padding-left: 0;
-      }
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-
-  #{$self}__tabs {
-    margin-top: 20px;
-    max-width: 1000px;
-
-    h4 {
-      font-weight: 500;
-      color: #888;
-      margin-bottom: 1.2rem;
-      font-size: 14px;
-    }
-    // Tab panels.
-    .tab-panel {
-      &--address {
-        .bp3-form-group {
-          max-width: 440px;
-
-          &.bp3-inline {
-            .bp3-label {
-              min-width: 145px;
-            }
-          }
-
-          .bp3-form-content {
-            width: 100%;
-          }
-
-          textarea.bp3-input {
-            max-width: 100%;
-            width: 100%;
-            min-height: 50px;
-          }
-        }
-      }
-      &--note {
-        .form-group--note {
-          .bp3-form-group {
-            max-width: 600px;
-          }
-          textarea {
-            width: 100%;
-            min-height: 100px;
-          }
-        }
-      }
-    }
-
-    .dropzone-container {
-      max-width: 600px;
-    }
-  }
-
-  .bp3-tabs {
-    .bp3-tab-list {
-      position: relative;
-
-      &:before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 2px;
-        background: #f0f0f0;
-      }
-
-      > *:not(:last-child) {
-        margin-right: 25px;
-      }
-
-      &.bp3-large > .bp3-tab {
-        font-size: 15px;
-        color: #555;
-
-        &[aria-selected='true'],
-        &:not([aria-disabled='true']):hover {
-          color: $pt-link-color;
-        }
-      }
-    }
-  }
-
-  #{$self}__floating-actions {
-    margin-left: -40px;
-    margin-right: -40px;
-  }
-}
+}
\ No newline at end of file

From 1a63ac69d897adc7dae46073fdca1f49bd36bb8c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 10 Nov 2021 21:31:28 +0200
Subject: [PATCH 29/41] fix: rename sms messages.

---
 src/containers/Preferences/SMSIntegration/components.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index d978edb25..7aeca2a4d 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -69,7 +69,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
     () => [
       {
         id: 'notification',
-        Header: intl.get('sms_message.label_Notification'),
+        Header: intl.get('sms_messages.label_notification'),
         accessor: NotificationAccessor,
         className: 'notification',
         width: '180',
@@ -83,7 +83,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         disableSortBy: true,
       },
       {
-        Header: intl.get('sms_message.label_mesage'),
+        Header: intl.get('sms_messages.label_mesage'),
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
@@ -92,7 +92,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         disableSortBy: true,
       },
       {
-        Header: intl.get('sms_message.label_auto'),
+        Header: intl.get('sms_messages.label_auto'),
         accessor: 'is_notification_enabled',
         Cell: SwitchFieldCell,
         className: 'is_notification_enabled',

From 95e75f0e8f9c12ecdacbfb6794156fe4ccd2db8f Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 10 Nov 2021 22:02:00 +0200
Subject: [PATCH 30/41] fix: notify invoice notification key query.

---
 .../NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js    | 6 ++----
 .../NotifyInvoiceViaSMSFormProvider.js                      | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index a2cf28c20..4c703c347 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -12,9 +12,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 const transformFormValuesToRequest = (values) => {
-  return {
-    notification_type: values.notification_key,
-  };
+  return pick(values, ['notification_key']);
 };
 
 /**
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
index 9fdad5c56..2d1bec964 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -15,7 +15,7 @@ function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
     useInvoiceSMSDetail(
       invoiceId,
       {
-        notification_type: notificationType,
+        notification_key: notificationType,
       },
       {
         enabled: !!invoiceId,

From 6b8178f643a5246df26394ca5c00a952ba9a1b2a Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 10 Nov 2021 23:53:39 +0200
Subject: [PATCH 31/41] feat: Reset to defailt SMS message.

---
 src/components/Button/ButtonLink.js           | 26 ++++--------
 .../SMSMessageDialog/SMSMessageFormFields.js  | 42 +++++++++++++++++--
 .../Preferences/SMSIntegration/components.js  | 13 +++---
 src/lang/en/index.json                        |  2 +-
 4 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/components/Button/ButtonLink.js b/src/components/Button/ButtonLink.js
index 9b9cb7b5b..655cdc615 100644
--- a/src/components/Button/ButtonLink.js
+++ b/src/components/Button/ButtonLink.js
@@ -1,23 +1,13 @@
 import styled from 'styled-components';
-import { Button } from '@blueprintjs/core';
 
-export const ButtonLink = styled(Button)`
-  line-height: inherit;
+export const ButtonLink = styled.button`
+  color: #0052cc;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
 
-  &.bp3-small {
-    min-height: auto;
-    min-width: auto;
-    padding: 0;
-  }
-  &:not([class*='bp3-intent-']) {
-    &,
-    &:hover {
-      color: #0052cc;
-      background: transparent;
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
+  &:hover,
+  &:active {
+    text-decoration: underline;
   }
 `;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
index 6fd2e79b5..543a842da 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
@@ -1,11 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
+import { useFormikContext, FastField, ErrorMessage } from 'formik';
+import { Intent, Button, FormGroup, TextArea } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from 'components';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 
-import { FastField, Field, ErrorMessage } from 'formik';
-import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T, FieldRequiredHint } from 'components';
 import { inputIntent } from 'utils';
 
+/**
+ *
+ */
 export default function SMSMessageFormFields() {
+  // SMS message dialog context.
+  const { smsNotification } = useSMSMessageDialogContext();
+
+  // Form formik context.
+  const { setFieldValue } = useFormikContext();
+
+  // Handle the button click.
+  const handleBtnClick = () => {
+    setFieldValue('message_text', smsNotification.default_sms_message);
+  };
+
   return (
     <div>
       {/* ----------- Message Text ----------- */}
@@ -15,7 +33,19 @@ export default function SMSMessageFormFields() {
             label={<T id={'notify_via_sms.dialog.message_text'} />}
             className={'form-group--message_text'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'message_text'} />}
+            helperText={
+              <>
+                <ErrorMessage name={'message_text'} />
+                <ResetButton
+                  minimal={true}
+                  small={true}
+                  intent={Intent.PRIMARY}
+                  onClick={handleBtnClick}
+                >
+                  Reset to default message.
+                </ResetButton>
+              </>
+            }
           >
             <TextArea
               growVertically={true}
@@ -29,3 +59,7 @@ export default function SMSMessageFormFields() {
     </div>
   );
 }
+
+const ResetButton = styled(Button)`
+  font-size: 12px;
+`;
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 7aeca2a4d..8c591a15f 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Button, Menu, MenuItem } from '@blueprintjs/core';
 
-import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
 
 import { safeInvoke } from 'utils';
@@ -32,9 +31,14 @@ export const SMSMessageCell = ({
   <div>
     <MessageBox>{original.sms_message}</MessageBox>
     <MessageBoxActions>
-      <ButtonLink onClick={() => safeInvoke(onEditMessageText, original)}>
+      <Button
+        minimal={true}
+        small={true}
+        intent={Intent.NONE}
+        onClick={() => safeInvoke(onEditMessageText, original)}
+      >
         {intl.get('sms_messages.label_edit_message')}
-      </ButtonLink>
+      </Button>
     </MessageBoxActions>
   </div>
 );
@@ -87,7 +91,6 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
-        // clickable: true,
         width: '180',
         disableSortBy: true,
       },
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 4e77fe7a5..a20e1e854 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1446,7 +1446,7 @@
   "sms_messages.label_notification": "Notification",
   "sms_messages.label_mesage": "Message",
   "sms_messages.label_auto": "Auto",
-  "sms_messages.label_edit_message": "Edit message",
+  "sms_messages.label_edit_message": "Edit Message",
   "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
   "sms_message.dialog.label": "SMS message",
   "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",

From 22069f4795a0b6f8c699e1ad9eee387c7a68bb52 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Thu, 11 Nov 2021 10:21:41 +0200
Subject: [PATCH 32/41] feat: optimize Arabic localization of SMS notifications
 module.

---
 .../Preferences/SMSIntegration/components.js  |  8 +--
 src/lang/ar/index.json                        | 51 ++++++++++---------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index 8c591a15f..c8a5f83df 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -73,21 +73,21 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
     () => [
       {
         id: 'notification',
-        Header: intl.get('sms_messages.label_notification'),
+        Header: intl.get('sms_messages.column.notification'),
         accessor: NotificationAccessor,
         className: 'notification',
         width: '180',
         disableSortBy: true,
       },
       {
-        Header: intl.get('service'),
+        Header: intl.get('sms_messages.column.service'),
         accessor: 'module_formatted',
         className: 'service',
         width: '80',
         disableSortBy: true,
       },
       {
-        Header: intl.get('sms_messages.label_mesage'),
+        Header: intl.get('sms_messages.column.message'),
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
@@ -95,7 +95,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         disableSortBy: true,
       },
       {
-        Header: intl.get('sms_messages.label_auto'),
+        Header: intl.get('sms_messages.column.auto'),
         accessor: 'is_notification_enabled',
         Cell: SwitchFieldCell,
         className: 'is_notification_enabled',
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index c584afa0d..b5839dab4 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1437,38 +1437,39 @@
   "bad_debt.dialog.bad_debt": "الديون المعدومة",
   "bad_debt.dialog.cancel_bad_debt": "إلغاء الديون المعدومة",
   "bad_debt.dialog.header_note": "يمكن للبائع تحميل مبلغ الفاتورة على حساب مصروفات الديون المعدومة عندما يكون من المؤكد أن الفاتورة لن يتم دفعها.",
-  "bad_debt.dialog.success_message":"تم شطب فاتورة البيع المقدمة بنجاح.",
-  "bad_debt.cancel_alert.success_message":"تم إلغاء شطب فاتورة البيع المقدمة بنجاح.",
+  "bad_debt.dialog.success_message": "تم شطب فاتورة البيع المقدمة بنجاح.",
+  "bad_debt.cancel_alert.success_message": "تم إلغاء شطب فاتورة البيع المقدمة بنجاح.",
   "bad_debt.cancel_alert.message": "هل أنت متأكد أنك تريد شطب هذه الفاتورة؟ ",
-  "notify_via_sms.dialog.send_notification_to":"إرسال إشعار إلى ",
-  "notify_via_sms.dialog.message_text":"نص رسالة ",
-  "notify_via_sms.dialog.notification_type": "نوع إشعار",
-  "notify_via_sms.dialog.notify_via_sms":"إشعار عبر رسائل قصيرة",
+  "notify_via_sms.dialog.send_notification_to": "إرسال إشعار إلى ",
+  "notify_via_sms.dialog.message_text": "نص الرسالة ",
+  "notify_via_sms.dialog.notification_type": "نوع الإشعار",
+  "notify_via_sms.dialog.notify_via_sms": "إشعار عبر رسائل قصيرة",
   "notiify_via_sms.dialog.sms_note": "<strong>ملاحظة :</strong> يمكن أن تحتوي رسالة قصيرة الواحدة على 160 حرفًا كحد أقصى. <strong>{value}</strong> سيتم استخدام وحدات الرسائل القصيرة لإرسال هذا  إشعار عبر الرسائل القصيرة. ",
   "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "رقم هاتف العميل غير موجود ، يرجى  إدخال رقم هاتف للعميل. ",
   "notify_Via_sms.dialog.customer_phone_number_invalid": "رقم هاتف العميل غير صالح ، يرجى  إدخال رقم هاتف صحيح للعميل. ",
-  "notify_via_sms.dialog.phone_invalid_error_message":"لا يمكن إرسال إشعار الرسائل القصيرة ، رقم الهاتف للعميل غير صالح ، يرجى إدخال رقم صالح والمحاولة مرة أخرى.",
-  "notify_via_sms.dialog.customer_no_phone_error_message":"الزبون ليس لديه رقم هاتف.",
-  "notify_invoice_via_sms.dialog.success_message":"تم إرسال إشعار فاتورة البيع عبر الرسائل القصيرة بنجاح ",
-  "notify_estimate_via_sms.dialog.success_message":"تم إرسال إشعار العرض البيع عبر الرسائل القصيرة بنجاح ",
-  "notify_receipt_via_sms.dialog.success_message":"تم إرسال إشعار إيصال البيع عبر الرسائل القصيرة بنجاح ",
-  "notify_payment_receive_via_sms.dialog.success_message":"تم إرسال إشعار الدفع بنجاح. ",
-  "sms_integration.label":"تكامل الرسائل القصيرة",
-  "sms_integration.label.overview":"نظرة عامة",
-  "sms_integration.label.sms_messages":"الرسائل القصيرة ",
-  "sms_messages.label_mesage":"رسالة ",
-  "sms_messages.label_notification":"إشعار",
-  "sms_messages.label_auto":"تلقائي",
+  "notify_via_sms.dialog.phone_invalid_error_message": "لا يمكن إرسال إشعار الرسائل القصيرة ، رقم الهاتف للعميل غير صالح ، يرجى إدخال رقم صالح والمحاولة مرة أخرى.",
+  "notify_via_sms.dialog.customer_no_phone_error_message": "الزبون ليس لديه رقم هاتف.",
+  "notify_invoice_via_sms.dialog.success_message": "تم إرسال إشعار فاتورة البيع عبر الرسائل القصيرة بنجاح ",
+  "notify_estimate_via_sms.dialog.success_message": "تم إرسال إشعار العرض البيع عبر الرسائل القصيرة بنجاح ",
+  "notify_receipt_via_sms.dialog.success_message": "تم إرسال إشعار إيصال البيع عبر الرسائل القصيرة بنجاح ",
+  "notify_payment_receive_via_sms.dialog.success_message": "تم إرسال إشعار الدفع بنجاح. ",
+  "sms_integration.label": "الرسائل القصيرة",
+  "sms_integration.label.overview": "نظرة عامة",
+  "sms_integration.label.sms_messages": "الرسائل القصيرة ",
+  "sms_messages.column.message": "الرسالة",
+  "sms_messages.column.notification": "إشعار",
+  "sms_messages.column.auto": "تلقائي",
+  "sms_messages.column.service": "الخدمة",
   "sms_messages.label_edit_message": "تعديل الرسالة ",
-  "sms_messages.notification_switch_change_success_message":"تم تمكين إشعار الرسائل القصيرة بنجاح.",
+  "sms_messages.notification_switch_change_success_message": "تم تفعيل الإشعار رسائل القصيرة بنجاح.",
   "sms_message.dialog.label": "رسالة قصيرة",
-  "sms_message.dialog.sms_note": "<strong>ملاحظة :</strong>  One SMS unit can contain amaximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
+  "sms_message.dialog.sms_note": "<strong>ملاحظة</strong>: تحتوي رسالة SMS الواحدة على 160 حرفًا كحد أقصى. سيتم استخدام عدد <strong> {value} </strong> رسائل القصيرة لإرسال هذا الإشعار.",
   "sms_message.dialog.success_message": "تم تحديث إعدادات إشعار الرسائل القصيرة بنجاح. ",
   "sms_message.dialog.unsupported_variables_error_message": "متغيرات غير مدعومة",
-  "sms_message.dialog.message_variable_description":"<strong>{value}</strong> إشارة لاسم الشركة الحالي.",
-  "edit_message_text":"تعديل نص رسالة",
-  "enable_notification":"تفعيل الإشعارات",
-  "send_sms":"إرسال رسالة قصيرة",
-  "save_sms_message":"حفظ رسالة قصيرة"
+  "sms_message.dialog.message_variable_description": "<strong>{value}</strong> إشارة لاسم الشركة الحالي.",
+  "edit_message_text": "تعديل نص رسالة",
+  "enable_notification": "تفعيل الإشعارات",
+  "send_sms": "إرسال رسالة قصيرة",
+  "save_sms_message": "حفظ رسالة قصيرة"
 
 }
\ No newline at end of file

From ce9169b24ddf93affddbe77376560d3867458588 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 11 Nov 2021 11:19:58 +0200
Subject: [PATCH 33/41] fix: add calloutCodes.

---
 .../NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js   | 5 ++++-
 .../NotifyPaymentReceiveViaSMSForm.js                        | 5 ++++-
 .../NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js     | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index a7da22dd0..30b58a3c5 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -27,6 +27,8 @@ function NotifyEstimateViaSMSForm({
     createNotifyEstimateBySMSMutate,
   } = useEstimateViaSMSContext();
 
+  const [calloutCode, setCalloutCode] = React.useState([]);
+
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     setSubmitting(true);
@@ -47,7 +49,7 @@ function NotifyEstimateViaSMSForm({
       },
     }) => {
       if (errors) {
-        transformErrors(errors, { setErrors });
+        transformErrors(errors, { setErrors, setCalloutCode });
       }
       setSubmitting(false);
     };
@@ -70,6 +72,7 @@ function NotifyEstimateViaSMSForm({
       notificationTypes={notificationType}
       onCancel={handleFormCancel}
       onSubmit={handleFormSubmit}
+      calloutCodes={calloutCode}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index 684266739..ee8a413cf 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -30,6 +30,8 @@ function NotifyPaymentReceiveViaSMSForm({
     createNotifyPaymentReceivetBySMSMutate,
   } = useNotifyPaymentReceiveViaSMSContext();
 
+  const [calloutCode, setCalloutCode] = React.useState([]);
+
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     // Handle request response success.
@@ -50,7 +52,7 @@ function NotifyPaymentReceiveViaSMSForm({
       },
     }) => {
       if (errors) {
-        transformErrors(errors, { setErrors });
+        transformErrors(errors, { setErrors, setCalloutCode });
       }
       setSubmitting(false);
     };
@@ -75,6 +77,7 @@ function NotifyPaymentReceiveViaSMSForm({
       notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
       onCancel={handleFormCancel}
+      calloutCodes={calloutCode}
     />
   );
 }
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index 2b95a0d35..7597b3dcb 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -30,6 +30,8 @@ function NotifyReceiptViaSMSForm({
     createNotifyReceiptBySMSMutate,
   } = useNotifyReceiptViaSMSContext();
 
+  const [calloutCode, setCalloutCode] = React.useState([]);
+  
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     // Handle request response success.
@@ -48,7 +50,7 @@ function NotifyReceiptViaSMSForm({
       },
     }) => {
       if (errors) {
-        transformErrors(errors, { setErrors });
+        transformErrors(errors, { setErrors, setCalloutCode });
       }
       setSubmitting(false);
     };
@@ -74,6 +76,7 @@ function NotifyReceiptViaSMSForm({
       notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
       onCancel={handleFormCancel}
+      calloutCodes={calloutCode}
     />
   );
 }

From eb5a82d413028fd19cdd987c7f046e0706dd3907 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Thu, 11 Nov 2021 11:26:49 +0200
Subject: [PATCH 34/41] feat: optimize SMS notifications RTL.

---
 .../SMSMessageDialog/SMSMessageFormContent.js    | 16 +++++++++++++---
 .../SMSMessageDialog/SMSMessageFormFields.js     |  2 +-
 src/containers/NotifyViaSMS/NotifyViaSMSForm.js  | 16 +++++++++++++---
 src/lang/ar/index.json                           |  6 +++---
 src/lang/en/index.json                           |  3 ++-
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index c9b56c6ea..f9f72adad 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -12,6 +12,8 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
 /**
  * SMS message form content.
  */
@@ -103,7 +105,15 @@ const FormPreview = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-  padding-left: 25px;
-  margin-left: 25px;
-  border-left: 1px solid #dcdcdd;
+
+  ${whenLtr(`
+    padding-left: 25px;
+    margin-left: 25px;
+    border-left: 1px solid #dcdcdd;
+  `)}
+  ${whenRtl(`
+    padding-right: 25px;
+    margin-right: 25px;
+    border-right: 1px solid #dcdcdd;
+  `)}
 `;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
index 543a842da..1ba600edc 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
@@ -42,7 +42,7 @@ export default function SMSMessageFormFields() {
                   intent={Intent.PRIMARY}
                   onClick={handleBtnClick}
                 >
-                  Reset to default message.
+                  <T id={'sms_message.edit_form.reset_to_default_message'} />
                 </ResetButton>
               </>
             }
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index 2f9721669..5a51e958b 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -15,6 +15,8 @@ import { FormObserver, SMSMessagePreview } from 'components';
 import { transformToForm, safeInvoke } from 'utils';
 import { getSMSUnits } from './utils';
 
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
 const defaultInitialValues = {
   notification_key: '',
   customer_name: '',
@@ -145,9 +147,17 @@ const SMSPreviewSectionRoot = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-  padding-left: 25px;
-  margin-left: 25px;
-  border-left: 1px solid #dcdcdd;
+
+  ${whenLtr(`
+    padding-left: 25px;
+    margin-left: 25px;
+    border-left: 1px solid #dcdcdd;
+  `)}
+  ${whenRtl(`
+    padding-right: 25px;
+    margin-right: 25px;
+    border-right: 1px solid #dcdcdd;
+  `)}
 `;
 
 const SMSPreviewSectionNote = styled.div`
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index b5839dab4..b4b13c46f 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1444,7 +1444,7 @@
   "notify_via_sms.dialog.message_text": "نص الرسالة ",
   "notify_via_sms.dialog.notification_type": "نوع الإشعار",
   "notify_via_sms.dialog.notify_via_sms": "إشعار عبر رسائل قصيرة",
-  "notiify_via_sms.dialog.sms_note": "<strong>ملاحظة :</strong> يمكن أن تحتوي رسالة قصيرة الواحدة على 160 حرفًا كحد أقصى. <strong>{value}</strong> سيتم استخدام وحدات الرسائل القصيرة لإرسال هذا  إشعار عبر الرسائل القصيرة. ",
+  "notiify_via_sms.dialog.sms_note": "<strong>ملاحظة :</strong> يمكن أن تحتوي رسالة قصيرة الواحدة على 160 حرفًا كحد أقصى <strong>{value}</strong>. سيتم استخدام وحدات الرسائل القصيرة لإرسال هذا  إشعار عبر الرسائل القصيرة. ",
   "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "رقم هاتف العميل غير موجود ، يرجى  إدخال رقم هاتف للعميل. ",
   "notify_Via_sms.dialog.customer_phone_number_invalid": "رقم هاتف العميل غير صالح ، يرجى  إدخال رقم هاتف صحيح للعميل. ",
   "notify_via_sms.dialog.phone_invalid_error_message": "لا يمكن إرسال إشعار الرسائل القصيرة ، رقم الهاتف للعميل غير صالح ، يرجى إدخال رقم صالح والمحاولة مرة أخرى.",
@@ -1470,6 +1470,6 @@
   "edit_message_text": "تعديل نص رسالة",
   "enable_notification": "تفعيل الإشعارات",
   "send_sms": "إرسال رسالة قصيرة",
-  "save_sms_message": "حفظ رسالة قصيرة"
-
+  "save_sms_message": "حفظ رسالة قصيرة",
+  "sms_message.edit_form.reset_to_default_message": "إعادة التعيين إلى الرسالة الافتراضية."
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index a20e1e854..0683e1e35 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1456,5 +1456,6 @@
   "edit_message_text": "Edit message text",
   "enable_notification": "Enable notification",
   "send_sms": "Send SMS",
-  "save_sms_message": "Save SMS Message"
+  "save_sms_message": "Save SMS Message",
+  "sms_message.edit_form.reset_to_default_message": "Reset to default message."
 }
\ No newline at end of file

From 66641ca56e641ccea881cce58e0cd8c21e74c00d Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 11 Nov 2021 12:13:14 +0200
Subject: [PATCH 35/41] fix: rename in eng file.

---
 src/lang/en/index.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 0683e1e35..7be623349 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1434,8 +1434,8 @@
   "notiify_via_sms.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",
   "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "The customer phone number does not eixst, please enter a personal phone number to the customer.",
   "notify_Via_sms.dialog.customer_phone_number_invalid": "The customer phone number is invalid, please enter a valid personal phone number to the customer.",
-  "notify_via_sms.dialog.phone_invalid_error_message": "Sms notification cannot be sent, customer personal phone number is invalid, please enter a valid one and try again.",
-  "notify_via_sms.dialog.customer_no_phone_error_message": "The customer has no phone number.",
+  "notify_via_sms.dialog.customer_no_phone_error_message": "The customer phone number does not eixst.",
+  "notify_via_sms.dialog.personal_phone_invalid_error_message": "The personal phone number is invalid.",
   "notify_invoice_via_sms.dialog.success_message": "The sale invoice sms notification has been sent successfully.",
   "notify_estimate_via_sms.dialog.success_message": "The sale estimate sms notification has been sent successfully",
   "notify_receipt_via_sms.dialog.success_message": "The sale receipt sms notification has been sent successfully",
@@ -1443,9 +1443,10 @@
   "sms_integration.label": "SMS Integration",
   "sms_integration.label.overview": "Overview",
   "sms_integration.label.sms_messages": "SMS Messages",
-  "sms_messages.label_notification": "Notification",
-  "sms_messages.label_mesage": "Message",
-  "sms_messages.label_auto": "Auto",
+  "sms_messages.column.notification": "Notification",
+  "sms_messages.column.message": "Message",
+  "sms_messages.column.auto": "Auto",
+  "sms_messages.column.service": "Service",
   "sms_messages.label_edit_message": "Edit Message",
   "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
   "sms_message.dialog.label": "SMS message",

From 35d755e417af45dd88957748c582cb037ec8a39a Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Thu, 11 Nov 2021 12:46:58 +0200
Subject: [PATCH 36/41] fix: SMS notification messages context menu.

---
 .../BalanceSheet/components.js                |  2 +-
 .../SMSIntegration/SMSIntegrationProvider.js  |  9 ++--
 .../SMSIntegration/SMSMessagesDataTable.js    | 45 ++++++++++++-------
 .../Preferences/SMSIntegration/components.js  | 25 +++++++----
 src/lang/ar/index.json                        | 12 ++---
 src/lang/en/index.json                        |  8 ++--
 6 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/src/containers/FinancialStatements/BalanceSheet/components.js b/src/containers/FinancialStatements/BalanceSheet/components.js
index 9439acb74..be3962ed9 100644
--- a/src/containers/FinancialStatements/BalanceSheet/components.js
+++ b/src/containers/FinancialStatements/BalanceSheet/components.js
@@ -27,7 +27,7 @@ export function BalanceSheetAlerts() {
         <Icon icon="info-block" iconSize={12} />{' '}
         <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
         <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
+          <T id={'report.compute_running.refresh'} />
         </Button>
       </div>
     </If>
diff --git a/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js b/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
index 23b03f148..523ff944e 100644
--- a/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
+++ b/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js
@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { useSettings, useSettingSMSNotifications } from 'hooks/query';
-import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const SMSIntegrationContext = React.createContext();
 
@@ -13,13 +12,17 @@ function SMSIntegrationProvider({ ...props }) {
   //Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();
 
-  const { data: notifications, isLoading: isSMSNotificationsLoading } =
-    useSettingSMSNotifications();
+  const {
+    data: notifications,
+    isLoading: isSMSNotificationsLoading,
+    isFetching: isSMSNotificationsFetching,
+  } = useSettingSMSNotifications();
 
   // Provider state.
   const provider = {
     notifications,
     isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
   };
 
   return (
diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
index b2bb18603..3dd79c381 100644
--- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
+++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js
@@ -24,20 +24,24 @@ function SMSMessagesDataTable({
   const { mutateAsync: editSMSNotificationMutate } =
     useSettingEditSMSNotification();
 
+  const toggleSmsNotification = (notificationKey, value) => {
+    editSMSNotificationMutate({
+      notification_key: notificationKey,
+      is_notification_enabled: value,
+    }).then(() => {
+      AppToaster.show({
+        message: intl.get(
+          'sms_messages.notification_switch_change_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+    });
+  };
+
   // Handle notification switch change.
   const handleNotificationSwitchChange = React.useCallback(
     (event, value, notification) => {
-      editSMSNotificationMutate({
-        notification_key: notification.key,
-        is_notification_enabled: value,
-      }).then(() => {
-        AppToaster.show({
-          message: intl.get(
-            'sms_messages.notification_switch_change_success_message',
-          ),
-          intent: Intent.SUCCESS,
-        });
-      });
+      toggleSmsNotification(notification.key, value);
     },
     [editSMSNotificationMutate],
   );
@@ -47,28 +51,37 @@ function SMSMessagesDataTable({
     onSwitchChange: handleNotificationSwitchChange,
   });
 
-  const { notifications, isSMSNotificationsLoading } =
-    useSMSIntegrationContext();
+  const {
+    notifications,
+    isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
+  } = useSMSIntegrationContext();
 
   // handle edit message link click
   const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };
 
-  const handleEnableNotification = () => {};
+  const handleEnableNotification = (notification) => {
+    toggleSmsNotification(notification.key, true);
+  };
+
+  const handleDisableNotification = (notification) => {
+    toggleSmsNotification(notification.key, false);
+  };
 
   return (
     <SMSNotificationsTable
       columns={columns}
       data={notifications}
       loading={isSMSNotificationsLoading}
-      progressBarLoading={isSMSNotificationsLoading}
+      progressBarLoading={isSMSNotificationsFetching}
       TableLoadingRenderer={TableSkeletonRows}
-      noInitialFetch={true}
       ContextMenu={ActionsMenu}
       payload={{
         onEditMessageText: handleEditMessageText,
         onEnableNotification: handleEnableNotification,
+        onDisableNotification: handleDisableNotification,
       }}
     />
   );
diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js
index c8a5f83df..ba2f37845 100644
--- a/src/containers/Preferences/SMSIntegration/components.js
+++ b/src/containers/Preferences/SMSIntegration/components.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Intent, Button, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { SwitchFieldCell } from 'components/DataTableCells';
-
 import { safeInvoke } from 'utils';
 
 /**
@@ -47,19 +46,27 @@ export const SMSMessageCell = ({
  * Context menu of SMS notification messages.
  */
 export function ActionsMenu({
-  payload: { onEditMessageText, onEnableNotification },
+  payload: { onEditMessageText, onEnableNotification, onDisableNotification },
   row: { original },
 }) {
   return (
     <Menu>
       <MenuItem
-        text={intl.get('edit_message_text')}
-        onClick={safeInvoke(onEditMessageText, original)}
-      />
-      <MenuItem
-        text={intl.get('enable_notification')}
-        onClick={safeInvoke(onEnableNotification, original)}
+        text={intl.get('sms_notifications.edit_message_text')}
+        onClick={() => safeInvoke(onEditMessageText, original)}
       />
+      <MenuDivider />
+      {!original.is_notification_enabled ? (
+        <MenuItem
+          text={intl.get('sms_notifications.enable_notification')}
+          onClick={() => safeInvoke(onEnableNotification, original)}
+        />
+      ) : (
+        <MenuItem
+          text={intl.get('sms_notifications.disable_notification')}
+          onClick={() => safeInvoke(onDisableNotification, original)}
+        />
+      )}
     </Menu>
   );
 }
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index b4b13c46f..62af42e11 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1445,8 +1445,8 @@
   "notify_via_sms.dialog.notification_type": "نوع الإشعار",
   "notify_via_sms.dialog.notify_via_sms": "إشعار عبر رسائل قصيرة",
   "notiify_via_sms.dialog.sms_note": "<strong>ملاحظة :</strong> يمكن أن تحتوي رسالة قصيرة الواحدة على 160 حرفًا كحد أقصى <strong>{value}</strong>. سيتم استخدام وحدات الرسائل القصيرة لإرسال هذا  إشعار عبر الرسائل القصيرة. ",
-  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "رقم هاتف العميل غير موجود ، يرجى  إدخال رقم هاتف للعميل. ",
-  "notify_Via_sms.dialog.customer_phone_number_invalid": "رقم هاتف العميل غير صالح ، يرجى  إدخال رقم هاتف صحيح للعميل. ",
+  "notify_Via_sms.dialog.customer_phone_number_does_not_eixst": "رقم هاتف الزبون غير موجود ، يرجى  إدخال رقم هاتف للعميل. ",
+  "notify_Via_sms.dialog.customer_phone_number_invalid": "رقم هاتف الزبون غير صالح ، يرجى  إدخال رقم هاتف صحيح للعميل. ",
   "notify_via_sms.dialog.phone_invalid_error_message": "لا يمكن إرسال إشعار الرسائل القصيرة ، رقم الهاتف للعميل غير صالح ، يرجى إدخال رقم صالح والمحاولة مرة أخرى.",
   "notify_via_sms.dialog.customer_no_phone_error_message": "الزبون ليس لديه رقم هاتف.",
   "notify_invoice_via_sms.dialog.success_message": "تم إرسال إشعار فاتورة البيع عبر الرسائل القصيرة بنجاح ",
@@ -1467,9 +1467,11 @@
   "sms_message.dialog.success_message": "تم تحديث إعدادات إشعار الرسائل القصيرة بنجاح. ",
   "sms_message.dialog.unsupported_variables_error_message": "متغيرات غير مدعومة",
   "sms_message.dialog.message_variable_description": "<strong>{value}</strong> إشارة لاسم الشركة الحالي.",
-  "edit_message_text": "تعديل نص رسالة",
-  "enable_notification": "تفعيل الإشعارات",
+  "sms_notifications.edit_message_text": "تعديل نص رسالة",
+  "sms_notifications.enable_notification": "تفعيل الإشعارات",
+  "sms_notifications.disable_notification": "تعطيل الإشعارات",
   "send_sms": "إرسال رسالة قصيرة",
   "save_sms_message": "حفظ رسالة قصيرة",
-  "sms_message.edit_form.reset_to_default_message": "إعادة التعيين إلى الرسالة الافتراضية."
+  "sms_message.edit_form.reset_to_default_message": "إعادة التعيين إلى الرسالة الافتراضية.",
+  "report.compute_running.refresh": "تحديث"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 0683e1e35..8f12c024f 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1453,9 +1453,11 @@
   "sms_message.dialog.success_message": "Sms notification settings has been updated successfully.",
   "sms_message.dialog.unsupported_variables_error_message": "Unsupported variables",
   "sms_message.dialog.message_variable_description": "<strong>{value}</strong> References to the current company name.",
-  "edit_message_text": "Edit message text",
-  "enable_notification": "Enable notification",
+  "sms_notifications.edit_message_text": "Edit message text",
+  "sms_notifications.enable_notification": "Enable notification",
+  "sms_notifications.disable_notification": "Disable notification",
   "send_sms": "Send SMS",
   "save_sms_message": "Save SMS Message",
-  "sms_message.edit_form.reset_to_default_message": "Reset to default message."
+  "sms_message.edit_form.reset_to_default_message": "Reset to default message.",
+  "report.compute_running.refresh": "Refresh"
 }
\ No newline at end of file

From 5803760c6104a70f6a41d80bff8b5802f3fedfc3 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 11 Nov 2021 15:23:23 +0200
Subject: [PATCH 37/41] fix: rowClassNames.

---
 .../CustomersBalanceSummaryTable.js                       | 2 +-
 .../CustomersTransactions/CustomersTransactionsTable.js   | 2 +-
 .../FinancialStatements/GeneralLedger/components.js       | 2 +-
 .../InventoryItemDetails/InventoryItemDetailsTable.js     | 2 +-
 .../FinancialStatements/InventoryItemDetails/utils.js     | 2 +-
 .../VendorsBalanceSummary/VendorsBalanceSummaryTable.js   | 2 +-
 .../VendorsTransactions/VendorsTransactionsTable.js       | 2 +-
 .../pages/FinancialStatements/CashFlowStatement.scss      | 8 ++++++--
 .../pages/FinancialStatements/ContactsBalanceSummary.scss | 4 ++++
 9 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js
index 6eb727d9d..29cd28088 100644
--- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js
+++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js
@@ -25,7 +25,7 @@ export default function CustomersBalanceSummaryTable({
   const columns = useCustomersSummaryColumns();
 
   const rowClassNames = (row) => {
-    return [`row-type--${row.original.rowTypes}`];
+    return [`row-type--${row.original.row_types}`];
   };
 
   return (
diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
index 1215da2f7..295725768 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
@@ -31,7 +31,7 @@ export default function CustomersTransactionsTable({
   ]);
 
   const rowClassNames = (row) => {
-    return [`row-type--${row.original.rowTypes}`];
+    return [`row-type--${row.original.row_types}`];
   };
 
   return (
diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js
index 9ccb69a7f..ee60301f0 100644
--- a/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -35,7 +35,7 @@ export function useGeneralLedgerTableColumns() {
           return row.date;
         },
         className: 'date',
-        textOverview: true,
+        // textOverview: true,
         width: 120,
       },
       {
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
index 5f730f76d..5ab72ed72 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
@@ -29,7 +29,7 @@ export default function InventoryItemDetailsTable({
   );
 
   const rowClassNames = (row) => {
-    return [`row-type--${row.original.rowTypes}`];
+    return [`row-type--${row.original.row_types}`];
   };
 
   return (
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
index 5824c4d52..35d2e29f1 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
@@ -9,7 +9,7 @@ const columnsMapper = (data, index, column) => ({
   id: column.key,
   key: column.key,
   Header: column.label,
-  // Cell: CellForceWidth,
+  Cell: CellForceWidth,
   accessor: `cells[${index}].value`,
   forceWidthAccess: `cells[0].value`,
   className: column.key,
diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js
index 7cb510ab9..55d57644a 100644
--- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js
+++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js
@@ -25,7 +25,7 @@ export default function VendorsBalanceSummaryTable({
   const columns = useVendorsBalanceColumns();
 
   const rowClassNames = (row) => {
-    return [`row-type--${row.original.rowTypes}`];
+    return [`row-type--${row.original.row_types}`];
   };
 
   return (
diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
index 98343c537..637115d88 100644
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
@@ -32,7 +32,7 @@ export default function VendorsTransactionsTable({
   ]);
 
   const rowClassNames = (row) => {
-    return [`row-type--${row.original.rowTypes}`];
+    return [`row-type--${row.original.row_types}`];
   };
 
   return (
diff --git a/src/style/pages/FinancialStatements/CashFlowStatement.scss b/src/style/pages/FinancialStatements/CashFlowStatement.scss
index 2ff22b8f2..419d7c8c1 100644
--- a/src/style/pages/FinancialStatements/CashFlowStatement.scss
+++ b/src/style/pages/FinancialStatements/CashFlowStatement.scss
@@ -10,7 +10,11 @@
       }
       .tbody {
         .tr:not(.no-results) {
-          &.row-type--CASH_END_PERIOD{
+          // &.row-type--AGGREGATE, 
+          &.row-type--ACCOUNTS {
+            border-top: 1px solid #bbb;
+          }
+          &.row-type--CASH_END_PERIOD {
             border-bottom: 3px double #333;
           }
           .td {
@@ -30,7 +34,7 @@
 
         .tr.is-expanded {
           .td.total,
-          .td.date-period{
+          .td.date-period {
             .cell-inner {
               display: none;
             }
diff --git a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
index 5a2ce5c5e..def379b49 100644
--- a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
+++ b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
@@ -11,6 +11,10 @@
       }
       .tbody {
         .tr:not(.no-results) {
+          &.row-type--CUSTOMER,
+          &.row-type--VENDOR {
+            border-top: 1px solid #BBB
+          }
           .td {
             border-bottom: 0;
             padding-top: 0.4rem;

From 918cd4aef344bb06bce239cfb5ed16277b1ed41d Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 11 Nov 2021 15:39:42 +0200
Subject: [PATCH 38/41] feat: add display name defaultText

---
 src/components/DisplayNameList.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/DisplayNameList.js b/src/components/DisplayNameList.js
index cb09cb4ac..3deba980f 100644
--- a/src/components/DisplayNameList.js
+++ b/src/components/DisplayNameList.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import ListSelect from "./ListSelect";
+import intl from 'react-intl-universal';
+import ListSelect from './ListSelect';
 
 export default function DisplayNameList({
   salutation,
@@ -9,25 +10,32 @@ export default function DisplayNameList({
   ...restProps
 }) {
   const formats = [
-    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    {
+      format: '{1} {2} {3}',
+      values: [salutation, firstName, lastName],
+      required: [1],
+    },
     { format: '{1} {2}', values: [firstName, lastName], required: [] },
     { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
-    { format: '{1}', values: [company], required: [1] }
+    { format: '{1}', values: [company], required: [1] },
   ];
 
   const formatOptions = formats
-    .filter((format) => !format.values.some((value, index) => {
-      return !value && format.required.indexOf(index + 1) !== -1;
-    }))
+    .filter(
+      (format) =>
+        !format.values.some((value, index) => {
+          return !value && format.required.indexOf(index + 1) !== -1;
+        }),
+    )
     .map((formatOption) => {
       const { format, values } = formatOption;
       let label = format;
 
       values.forEach((value, index) => {
-        const replaceWith = (value || '');
+        const replaceWith = value || '';
         label = label.replace(`{${index + 1}}`, replaceWith).trim();
       });
-      return { label: label.replace(/\s+/g, " ") };
+      return { label: label.replace(/\s+/g, ' ') };
     });
 
   return (
@@ -35,9 +43,9 @@ export default function DisplayNameList({
       items={formatOptions}
       selectedItemProp={'label'}
       textProp={'label'}
-      defaultText={'Select display name as'}
+      defaultText={intl.get('select_display_name_as')}
       filterable={false}
-      { ...restProps }
+      {...restProps}
     />
   );
-}
\ No newline at end of file
+}

From 376a16fd6599914c03f040dd930bfacc97439b1e Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 11 Nov 2021 16:15:45 +0200
Subject: [PATCH 39/41] fix: force-width

---
 .../CustomersTransactions/components.js                    | 4 ++--
 .../FinancialStatements/VendorsTransactions/components.js  | 4 ++--
 .../pages/FinancialStatements/ContactsTransactions.scss    | 7 +++----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/containers/FinancialStatements/CustomersTransactions/components.js b/src/containers/FinancialStatements/CustomersTransactions/components.js
index 989a6c811..938e7b019 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/components.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/components.js
@@ -22,14 +22,14 @@ export const useCustomersTransactionsColumns = () => {
           return (
             <span
               className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].key) }}
+              style={{ minWidth: getForceWidth(cells[0].value) }}
             >
               {cells[0].value}
             </span>
           );
         },
         className: 'customer_name',
-        textOverview: true,
+        // textOverview: true,
       },
       {
         Header: intl.get('account_name'),
diff --git a/src/containers/FinancialStatements/VendorsTransactions/components.js b/src/containers/FinancialStatements/VendorsTransactions/components.js
index 14c9f3145..bfb8e0fe5 100644
--- a/src/containers/FinancialStatements/VendorsTransactions/components.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/components.js
@@ -21,14 +21,14 @@ export const useVendorsTransactionsColumns = () => {
           return (
             <span
               className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].key) }}
+              style={{ minWidth: getForceWidth(cells[0].value) }}
             >
               {cells[0].value}
             </span>
           );
         },
         className: 'vendor_name',
-        textOverview: true,
+        // textOverview: true,
         // width: 240,
       },
       {
diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss
index 507a8d374..7fb3ff80a 100644
--- a/src/style/pages/FinancialStatements/ContactsTransactions.scss
+++ b/src/style/pages/FinancialStatements/ContactsTransactions.scss
@@ -64,12 +64,11 @@
                 display: none;
               }
             }
-          }
-          &--CUSTOMER:last-child {
-            .td {
-              border-bottom: 1px solid #ddd;
+            &:not(:first-child).is-expanded .td {
+              border-top: 1px solid #ddd;
             }
           }
+          &--CUSTOMER:last-child,
           &--VENDOR:last-child {
             .td {
               border-bottom: 1px solid #ddd;

From 4c58e491693f05920e563ae9accad5bd646237f8 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Thu, 11 Nov 2021 17:20:53 +0200
Subject: [PATCH 40/41] fix: SMS notification types.

---
 .../NotifyEstimateViaSMSForm.js               |  5 +++--
 .../NotifyInvoiceViaSMSForm.js                | 21 ++++++++++++-------
 .../NotifyPaymentReceiveViaSMSForm.js         |  7 +++++--
 .../NotifyReceiptViaSMSForm.js                |  3 ++-
 .../NotifyViaSMS/NotifyViaSMSFormFields.js    |  4 ++--
 src/lang/ar/index.json                        |  7 ++++++-
 src/lang/en/index.json                        |  7 ++++++-
 7 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
index 30b58a3c5..13bcefe70 100644
--- a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -13,7 +13,7 @@ import { compose } from 'utils';
 
 const notificationType = {
   key: 'sale-estimate-details',
-  label: 'Sale estimate details',
+  label: intl.get('sms_notification.estimate_details.type'),
 };
 
 function NotifyEstimateViaSMSForm({
@@ -60,6 +60,7 @@ function NotifyEstimateViaSMSForm({
 
   const initialValues = {
     ...estimateSMSDetail,
+    notification_key: notificationType.key,
   };
   // Handle the form cancel.
   const handleFormCancel = () => {
@@ -69,7 +70,7 @@ function NotifyEstimateViaSMSForm({
   return (
     <NotifyViaSMSForm
       initialValues={initialValues}
-      notificationTypes={notificationType}
+      notificationTypes={[notificationType]}
       onCancel={handleFormCancel}
       onSubmit={handleFormSubmit}
       calloutCodes={calloutCode}
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
index 4c703c347..4ce2349fe 100644
--- a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -15,6 +15,18 @@ const transformFormValuesToRequest = (values) => {
   return pick(values, ['notification_key']);
 };
 
+// Momerize the notification types.
+const notificationTypes = [
+  {
+    key: 'details',
+    label: intl.get('sms_notification.invoice_details.type'),
+  },
+  {
+    key: 'reminder',
+    label: intl.get('sms_notification.invoice_reminder.type'),
+  },
+];
+
 /**
  * Notify Invoice Via SMS Form.
  */
@@ -80,14 +92,7 @@ function NotifyInvoiceViaSMSForm({
       setNotificationType(values.notification_key);
     }
   };
-  // Momerize the notification types.
-  const notificationTypes = React.useMemo(
-    () => [
-      { key: 'details', label: 'Invoice details' },
-      { key: 'reminder', label: 'Invoice reminder' },
-    ],
-    [],
-  );
+
   return (
     <NotifyViaSMSForm
       initialValues={initialValues}
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
index ee8a413cf..42604817e 100644
--- a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -13,7 +13,7 @@ import { compose } from 'utils';
 
 const notificationType = {
   key: 'payment-receive-details',
-  label: 'Payment receive thank you.',
+  label: intl.get('sms_notification.payment_details.type'),
 };
 
 /**
@@ -67,7 +67,10 @@ function NotifyPaymentReceiveViaSMSForm({
 
   // Form initial values.
   const initialValues = React.useMemo(
-    () => ({ ...paymentReceiveMSDetail }),
+    () => ({
+      ...paymentReceiveMSDetail,
+      notification_key: notificationType.key,
+    }),
     [paymentReceiveMSDetail],
   );
 
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
index 7597b3dcb..185d25301 100644
--- a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -13,7 +13,7 @@ import { compose } from 'utils';
 
 const notificationType = {
   key: 'sale-receipt-details',
-  label: 'Sale receipt details',
+  label: intl.get('sms_notification.receipt_details.type'),
 };
 
 /**
@@ -66,6 +66,7 @@ function NotifyReceiptViaSMSForm({
   const initialValues = React.useMemo(
     () => ({
       ...receiptSMSDetail,
+      notification_key: notificationType.key,
     }),
     [receiptSMSDetail],
   );
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
index 3b08b070e..d8dcb4aa0 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js
@@ -16,7 +16,7 @@ export default function NotifyViaSMSFormFields({ notificationTypes }) {
   return (
     <NotifyViaSMSFormFieldsRoot>
       <FastField name={'notification_key'}>
-        {({ form, meta: { error, touched } }) => (
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'notify_via_sms.dialog.notification_type'} />}
             className={classNames(CLASSES.FILL)}
@@ -26,7 +26,7 @@ export default function NotifyViaSMSFormFields({ notificationTypes }) {
             <ListSelect
               items={notificationTypes}
               selectedItemProp={'key'}
-              selectedItem={'details'}
+              selectedItem={value}
               textProp={'label'}
               popoverProps={{ minimal: true }}
               filterable={false}
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 62af42e11..2b75235c9 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1473,5 +1473,10 @@
   "send_sms": "إرسال رسالة قصيرة",
   "save_sms_message": "حفظ رسالة قصيرة",
   "sms_message.edit_form.reset_to_default_message": "إعادة التعيين إلى الرسالة الافتراضية.",
-  "report.compute_running.refresh": "تحديث"
+  "report.compute_running.refresh": "تحديث",
+  "sms_notification.invoice_details.type": "تفاصيل الفاتورة",
+  "sms_notification.invoice_reminder.type": "تذكير بالفاتورة",
+  "sms_notification.estimate_details.type": "تفاصيل فاتورة عرض الاسعار",
+  "sms_notification.payment_details.type": "شكر علي عملية الدفع",
+  "sms_notification.receipt_details.type": "تفاصيل إيصال البيع"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 6756eedfa..dbd3c027b 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1460,5 +1460,10 @@
   "send_sms": "Send SMS",
   "save_sms_message": "Save SMS Message",
   "sms_message.edit_form.reset_to_default_message": "Reset to default message.",
-  "report.compute_running.refresh": "Refresh"
+  "report.compute_running.refresh": "Refresh",
+  "sms_notification.invoice_details.type": "Invoice details",
+  "sms_notification.invoice_reminder.type": "Invoice reminder",
+  "sms_notification.estimate_details.type": "Sale estimate details",
+  "sms_notification.payment_details.type": "Payment receive thank you.",
+  "sms_notification.receipt_details.type": "Sale receipt details"
 }
\ No newline at end of file

From 1990ce7562691f4d51bed69e0a644d0fcc6cce48 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Thu, 11 Nov 2021 17:50:58 +0200
Subject: [PATCH 41/41] fix: personal phone number placeholder.

---
 .../CustomerForm/CustomerFormAfterPrimarySection.js      | 9 ++++-----
 src/lang/ar/index.json                                   | 3 ++-
 src/lang/en/index.json                                   | 3 ++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js b/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
index d409b9d37..cabaea3ff 100644
--- a/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
+++ b/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
@@ -6,7 +6,6 @@ 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 -----------*/}
@@ -31,21 +30,21 @@ export default function CustomerFormAfterPrimarySection({}) {
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'work_phone'}>
+          <FastField name={'personal_phone'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
+                placeholder={intl.get('personal')}
                 {...field}
               />
             )}
           </FastField>
 
-          <FastField name={'personal_phone'}>
+          <FastField name={'work_phone'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={intl.get('Mobile')}
+                placeholder={intl.get('work')}
                 {...field}
               />
             )}
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 2b75235c9..9731ca8ad 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1478,5 +1478,6 @@
   "sms_notification.invoice_reminder.type": "تذكير بالفاتورة",
   "sms_notification.estimate_details.type": "تفاصيل فاتورة عرض الاسعار",
   "sms_notification.payment_details.type": "شكر علي عملية الدفع",
-  "sms_notification.receipt_details.type": "تفاصيل إيصال البيع"
+  "sms_notification.receipt_details.type": "تفاصيل إيصال البيع",
+  "personal": "المحمول"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index dbd3c027b..a13f1b07c 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1465,5 +1465,6 @@
   "sms_notification.invoice_reminder.type": "Invoice reminder",
   "sms_notification.estimate_details.type": "Sale estimate details",
   "sms_notification.payment_details.type": "Payment receive thank you.",
-  "sms_notification.receipt_details.type": "Sale receipt details"
+  "sms_notification.receipt_details.type": "Sale receipt details",
+  "personal": "Personal"
 }
\ No newline at end of file