Merge branch 'feature/notify-via-SMS' of https://github.com/bigcapitalhq/client into feature/notify-via-SMS

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 />

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

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.

src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js

@@ -26,7 +26,7 @@ function NotifyInvoiceViaSMSDialog({
       <DialogSuspense>
         <NotifyInvoiceViaSMSDialogContent
           dialogName={dialogName}
-          invoice={invoiceId}
+          invoiceId={invoiceId}
         />
       </DialogSuspense>
     </Dialog>

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

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-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';
 
@@ -57,6 +57,8 @@ function NotifyViaSMSForm({
   onSubmit,
   onCancel,
   onValuesChange,
+  calloutCodes,
+  formikProps,
 }) {
   // Initial form values
   const initialValues = {
@@ -71,6 +73,7 @@ function NotifyViaSMSForm({
 
   return (
     <Formik
+      enableReinitialize={true}
       validationSchema={CreateNotifyViaSMSFormSchema}
       initialValues={initialValues}
       onSubmit={onSubmit}
@@ -79,6 +82,7 @@ function NotifyViaSMSForm({
         <div className={Classes.DIALOG_BODY}>
           <NotifyContent>
             <NotifyFieldsSection>
+              <NotifyViaSMSAlerts calloutCodes={calloutCodes} />
               <NotifyViaSMSFormFields
                 notificationTypes={formattedNotificationTypes}
               />
@@ -108,6 +112,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`

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