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

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