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

src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js

@@ -41,12 +41,14 @@ function NotifyEstimateViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
       setSubmitting(false);
     };
     createNotifyEstimateBySMSMutate([estimateId, values])
       .then(onSuccess)
-      .then(onError);
+      .catch(onError);
   };
 
   return (

src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js

@@ -53,7 +53,9 @@ function NotifyInvoiceViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
       setSubmitting(false);
     };
     // Transformes the form values to request.

src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js

@@ -44,7 +44,10 @@ function NotifyPaymentReceiveViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyPaymentReceivetBySMSMutate([paymentReceiveId, values])
       .then(onSuccess)

src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js

@@ -42,7 +42,10 @@ function NotifyReceiptViaSMSForm({
         data: { errors },
       },
     }) => {
-      transformErrors(errors);
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
     };
     createNotifyReceiptBySMSMutate([receiptId, values])
       .then(onSuccess)

src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js

@@ -9,6 +9,7 @@ import { AppToaster } from 'components';
 import SMSMessageFormContent from './SMSMessageFormContent';
 import { CreateSMSMessageFormSchema } from './SMSMessageForm.schema';
 import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+import { transformErrors } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -58,6 +59,9 @@ function SMSMessageForm({
         data: { errors },
       },
     }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
       setSubmitting(false);
     };
     debugger;

src/containers/Dialogs/SMSMessageDialog/index.js

@@ -20,7 +20,7 @@ function SMSMessageDialog({
   return (
     <Dialog
       name={dialogName}
-      title={intl.get('sms_message')}
+      title={intl.get('sms_message.dialog.label')}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}

src/containers/Dialogs/SMSMessageDialog/utils.js

@@ -0,0 +1,15 @@
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import intl from 'react-intl-universal';
+
+export const transformErrors = (errors, { setErrors }) => {
+  if (
+    errors.find((error) => error.type === 'UNSUPPORTED_SMS_MESSAGE_VARIABLES')
+  ) {
+    setErrors({
+      message_text: intl.get(
+        'sms_message.dialog.unsupported_variables_error_message',
+      ),
+    });
+  }
+};

src/containers/NotifyViaSMS/utils.js

@@ -2,13 +2,21 @@ import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
 
-export const transformErrors = (errors) => {
+export const transformErrors = (errors, { setErrors }) => {
   if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
     AppToaster.show({
       message: intl.get('notify_via_sms.dialog.error_message'),
       intent: Intent.DANGER,
     });
   }
+
+  if (errors.find((error) => error.type === 'CUSTOMER_HAS_NO_PHONE_NUMBER')) {
+    setErrors({
+      customer_phone_number: intl.get(
+        'notify_via_sms.dialog.customer_no_phone_error_message',
+      ),
+    });
+  }
 };
 
 

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
-import { useSMSIntegrationTableColumns } from './components';
+import { useSMSIntegrationTableColumns, ActionsMenu } from './components';
 import { useSMSIntegrationContext } from './SMSIntegrationProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -20,10 +20,12 @@ function SMSMessagesDataTable({
   const { notifications, isSMSNotificationsLoading } =
     useSMSIntegrationContext();
 
-  const handleEditSMSMessage = ({ key }) => {
+  const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };
 
+  const handleEnableNotification = () => {};
+
   return (
     <SMSNotificationsTable
       columns={columns}
@@ -32,8 +34,10 @@ function SMSMessagesDataTable({
       progressBarLoading={isSMSNotificationsLoading}
       TableLoadingRenderer={TableSkeletonRows}
       noInitialFetch={true}
+      ContextMenu={ActionsMenu}
       payload={{
-        onEditSMSMessage: handleEditSMSMessage,
+        onEditMessageText: handleEditMessageText,
+        onEnableNotification: handleEnableNotification,
       }}
     />
   );

src/containers/Preferences/SMSIntegration/components.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { Menu, MenuItem } from '@blueprintjs/core';
 
 import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
@@ -24,19 +25,40 @@ export const NotificationAccessor = (row) => {
  * SMS notification message cell.
  */
 export const SMSMessageCell = ({
-  payload: { onEditSMSMessage },
+  payload: { onEditMessageText },
   row: { original },
 }) => (
   <div>
     <MessageBox>{original.sms_message}</MessageBox>
     <MessageBoxActions>
-      <ButtonLink onClick={() => safeInvoke(onEditSMSMessage, original)}>
+      <ButtonLink onClick={() => safeInvoke(onEditMessageText, original)}>
         Edit message
       </ButtonLink>
     </MessageBoxActions>
   </div>
 );
 
+/**
+ * Context menu of SMS notification messages.
+ */
+export function ActionsMenu({
+  payload: { onEditMessageText, onEnableNotification },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('edit_message_text')}
+        onClick={safeInvoke(onEditMessageText, original)}
+      />
+      <MenuItem
+        text={intl.get('enable_notification')}
+        onClick={safeInvoke(onEnableNotification, original)}
+      />
+    </Menu>
+  );
+}
+
 /**
  * Retrieve SMS notifications messages table columns
  * @returns
@@ -49,12 +71,14 @@ export function useSMSIntegrationTableColumns() {
         accessor: NotificationAccessor,
         className: 'notification',
         width: '180',
+        disableSortBy: true,
       },
       {
         Header: intl.get('service'),
         accessor: 'module_formatted',
         className: 'service',
         width: '80',
+        disableSortBy: true,
       },
       {
         Header: intl.get('sms_message.label_mesage'),
@@ -63,14 +87,15 @@ export function useSMSIntegrationTableColumns() {
         className: 'sms_message',
         clickable: true,
         width: '180',
+        disableSortBy: true,
       },
       {
         Header: intl.get('sms_message.label_auto'),
         accessor: 'is_notification_enabled',
         Cell: SwitchFieldCell,
         className: 'is_notification_enabled',
-        disableSortBy: true,
         disableResizing: true,
+        disableSortBy: true,
         width: '80',
       },
     ],