feat: Optimize SMS notification module.

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)

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

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 (

src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js

@@ -32,4 +32,5 @@ function NotifyInvoiceViaSMSDialog({
     </Dialog>
   );
 }
+
 export default compose(withDialogRedux())(NotifyInvoiceViaSMSDialog);

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

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;
+`;

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 } }) => (

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;
+`;