feat: add notify via SMS Form.

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>

src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js

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

src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js

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

src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js

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

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

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

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

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

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

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';
+/**
-
+ * Notify Invoice Via SMS Form.
-import { transformToForm, compose } from 'utils';
+ */
-
+function NotifyInvoiceViaSMSForm({
-const defaultInitialValues = {
-  customer_name: '',
-  customer_personal_phone: '',
-  sms_message: '',
-};
-
-function NotifyContactViaSMSForm({
   // #withDialogActions
   closeDialog,
 }) {
   const {
+    createNotifyInvoiceBySMSMutate,
     invoiceId,
     invoiceSMSDetail,
     dialogName,
-    createNotifyInvoiceBySMSMutate,
+  } = useNotifyInvoiceViaSMSContext();
-  } = useNotifyContactViaSMSContext();
-
-  // Initial form values
-  const initialValues = {
-    ...defaultInitialValues,
-    ...transformToForm(invoiceSMSDetail, defaultInitialValues),
-  };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
@@ -63,12 +49,12 @@ function NotifyContactViaSMSForm({
   };
 
   return (
-    <Formik
+    <NotifyViaSMSForm
-      validationSchema={CreateNotifyContactViaSMSFormSchema}
+      NotificationDetail={invoiceSMSDetail}
-      initialValues={initialValues}
+      NotificationName={dialogName}
       onSubmit={handleFormSubmit}
-      component={NotifyContactViaSMSFormContent}
     />
   );
 }
-export default compose(withDialogActions)(NotifyContactViaSMSForm);
+
+export default compose(withDialogActions)(NotifyInvoiceViaSMSForm);

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

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(() =>
+const NotifyInvoiceViaSMSDialogContent = React.lazy(() =>
-  import('./NotifyContactViaSMSContent'),
+  import('./NotifyInvoiceViaSMSDialogContent'),
 );
 
-/**
+function NotifyInvoiceViaSMSDialog({
- * Notify contact via SMS.
- */
-function NotifyContactViaSMSDialog({
   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())(NotifyInvoiceViaSMSDialog);
-export default compose(withDialogRedux())(NotifyContactViaSMSDialog);

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

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

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

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

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

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

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

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

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

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.

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

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

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;

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;

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, InputGroup } from '@blueprintjs/core';
-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';
+function NotifyViaSMSFormFields() {
-
-/**
- * Notify contact via SMS fields.
- */
-function NotifyContactViaSMSFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/* ----------- Send Notification to ----------- */}
@@ -88,4 +76,4 @@ function NotifyContactViaSMSFormFields() {
   );
 }
 
-export default NotifyContactViaSMSFormFields;
+export default NotifyViaSMSFormFields;

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)(NotifyViaSMSFormFloatingActions);
-export default compose(withDialogActions)(
-  NotifyContactViaSMSFormFloatingActions,
-);