fix: SMS notification messages context menu.

src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js

@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { useSettings, useSettingSMSNotifications } from 'hooks/query';
-import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const SMSIntegrationContext = React.createContext();
 
@@ -13,13 +12,17 @@ function SMSIntegrationProvider({ ...props }) {
   //Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();
 
-  const { data: notifications, isLoading: isSMSNotificationsLoading } =
-    useSettingSMSNotifications();
+  const {
+    data: notifications,
+    isLoading: isSMSNotificationsLoading,
+    isFetching: isSMSNotificationsFetching,
+  } = useSettingSMSNotifications();
 
   // Provider state.
   const provider = {
     notifications,
     isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
   };
 
   return (

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js

@@ -24,20 +24,24 @@ function SMSMessagesDataTable({
   const { mutateAsync: editSMSNotificationMutate } =
     useSettingEditSMSNotification();
 
+  const toggleSmsNotification = (notificationKey, value) => {
+    editSMSNotificationMutate({
+      notification_key: notificationKey,
+      is_notification_enabled: value,
+    }).then(() => {
+      AppToaster.show({
+        message: intl.get(
+          'sms_messages.notification_switch_change_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+    });
+  };
+
   // Handle notification switch change.
   const handleNotificationSwitchChange = React.useCallback(
     (event, value, notification) => {
-      editSMSNotificationMutate({
-        notification_key: notification.key,
-        is_notification_enabled: value,
-      }).then(() => {
-        AppToaster.show({
-          message: intl.get(
-            'sms_messages.notification_switch_change_success_message',
-          ),
-          intent: Intent.SUCCESS,
-        });
-      });
+      toggleSmsNotification(notification.key, value);
     },
     [editSMSNotificationMutate],
   );
@@ -47,28 +51,37 @@ function SMSMessagesDataTable({
     onSwitchChange: handleNotificationSwitchChange,
   });
 
-  const { notifications, isSMSNotificationsLoading } =
-    useSMSIntegrationContext();
+  const {
+    notifications,
+    isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
+  } = useSMSIntegrationContext();
 
   // handle edit message link click
   const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };
 
-  const handleEnableNotification = () => {};
+  const handleEnableNotification = (notification) => {
+    toggleSmsNotification(notification.key, true);
+  };
+
+  const handleDisableNotification = (notification) => {
+    toggleSmsNotification(notification.key, false);
+  };
 
   return (
     <SMSNotificationsTable
       columns={columns}
       data={notifications}
       loading={isSMSNotificationsLoading}
-      progressBarLoading={isSMSNotificationsLoading}
+      progressBarLoading={isSMSNotificationsFetching}
       TableLoadingRenderer={TableSkeletonRows}
-      noInitialFetch={true}
       ContextMenu={ActionsMenu}
       payload={{
         onEditMessageText: handleEditMessageText,
         onEnableNotification: handleEnableNotification,
+        onDisableNotification: handleDisableNotification,
       }}
     />
   );

src/containers/Preferences/SMSIntegration/components.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Intent, Button, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { SwitchFieldCell } from 'components/DataTableCells';
-
 import { safeInvoke } from 'utils';
 
 /**
@@ -47,19 +46,27 @@ export const SMSMessageCell = ({
  * Context menu of SMS notification messages.
  */
 export function ActionsMenu({
-  payload: { onEditMessageText, onEnableNotification },
+  payload: { onEditMessageText, onEnableNotification, onDisableNotification },
   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)}
+        text={intl.get('sms_notifications.edit_message_text')}
+        onClick={() => safeInvoke(onEditMessageText, original)}
       />
+      <MenuDivider />
+      {!original.is_notification_enabled ? (
+        <MenuItem
+          text={intl.get('sms_notifications.enable_notification')}
+          onClick={() => safeInvoke(onEnableNotification, original)}
+        />
+      ) : (
+        <MenuItem
+          text={intl.get('sms_notifications.disable_notification')}
+          onClick={() => safeInvoke(onDisableNotification, original)}
+        />
+      )}
     </Menu>
   );
 }