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