feat: SMS notification module.

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}
+      initialValues={initialValues}
-      NotificationName={dialogName}
+      notificationTypes={notificationType}
+      onCancel={handleFormCancel}
       onSubmit={handleFormSubmit}
     />
   );

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}

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}
+      initialValues={initialValues}
-      NotificationName={dialogName}
+      notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
+      onCancel={handleFormCancel}
     />
   );
 }

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}
+      initialValues={initialValues}
-      NotificationName={dialogName}
+      notificationTypes={notificationType}
       onSubmit={handleFormSubmit}
+      onCancel={handleFormCancel}
     />
   );
 }

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,

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>

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 = [
+export default function NotifyViaSMSFormFields({ notificationTypes }) {
-  { key: 'details', label: 'Invoice details' },
-  { key: 'reminder', label: 'Invoice reminder' },
-];
-
-export default function NotifyViaSMSFormFields() {
   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``;

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

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