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

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