feat: optimize style of SMS notifications module.

src/components/DataTableCells/SwitchFieldCell.js

@@ -1,21 +1,28 @@
 import React from 'react';
 import classNames from 'classnames';
-import { get } from 'lodash';
 import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
 
+import { safeInvoke } from 'utils';
+
+/**
+ * Switch editable cell.
+ */
 const SwitchEditableCell = ({
   row: { index, original },
-  column: { id, switchProps },
+  column: { id, switchProps, onSwitchChange },
   cell: { value: initialValue },
   payload,
 }) => {
   const [value, setValue] = React.useState(initialValue);
 
+  // Handle the switch change.
   const onChange = (e) => {
     const newValue = e.target.checked;
 
     setValue(newValue);
-    payload.updateData(index, id, newValue);
+
+    safeInvoke(payload.updateData, index, id, newValue);
+    safeInvoke(onSwitchChange, e, newValue, original);
   };
 
   React.useEffect(() => {
@@ -31,7 +38,7 @@ const SwitchEditableCell = ({
     >
       <Switch
         value={value}
-        // onChange={onChange}
+        onChange={onChange}
         checked={initialValue}
         minimal={true}
         className="ml2"
@@ -40,4 +47,5 @@ const SwitchEditableCell = ({
     </FormGroup>
   );
 };
-export default SwitchEditableCell;
+
+export default SwitchEditableCell;

src/components/Dialog/Dialog.js

@@ -9,16 +9,16 @@ function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
 
   const handleClose = (event) => {
-    closeDialog(name)
+    closeDialog(name);
     onClose && onClose(event);
   };
   return (
     <Dialog {...props} onClose={handleClose}>
-      { children }
+      {children}
     </Dialog>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(DialogComponent);
+const DialogRoot = compose(withDialogActions)(DialogComponent);
+
+export { DialogRoot as Dialog };

src/components/Dialog/DialogContent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
 
-export default function DialogContent(props) {
+export function DialogContent(props) {
   const { isLoading, children } = props;
 
   const loadingContent = (

src/components/Dialog/DialogFooterActions.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooterActions({ alignment = 'right', children }) {
+  return (
+    <DialogFooterActionsRoot
+      className={Classes.DIALOG_FOOTER_ACTIONS}
+      alignment={alignment}
+    >
+      {children}
+    </DialogFooterActionsRoot>
+  );
+}
+
+const DialogFooterActionsRoot = styled.div`
+  margin-left: -10px;
+  margin-right: -10px;
+  justify-content: ${(props) =>
+    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
+
+  .bp3-button {
+    margin-left: 10px;
+    margin-left: 10px;
+  }
+`;

src/components/Dialog/DialogSuspense.js

@@ -5,7 +5,7 @@ function LoadingContent() {
   return (<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>);
 }
 
-export default function DialogSuspense({
+export function DialogSuspense({
   children
 }) {
   return (

src/components/Dialog/index.js

@@ -0,0 +1,6 @@
+
+
+export * from './Dialog';
+export * from './DialogFooterActions';
+export * from './DialogSuspense';
+export * from './DialogContent';

src/components/index.js

@@ -23,9 +23,6 @@ import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
 import DashboardActionViewsList from './Dashboard/DashboardActionViewsList';
-import Dialog from './Dialog/Dialog';
-import DialogContent from './Dialog/DialogContent';
-import DialogSuspense from './Dialog/DialogSuspense';
 import InputPrependButton from './Forms/InputPrependButton';
 import CategoriesSelectList from './CategoriesSelectList';
 import Row from './Grid/Row';
@@ -63,6 +60,7 @@ import AvaterCell from './AvaterCell';
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
 
+export * from './Dialog';
 export * from './Menu';
 export * from './AdvancedFilter/AdvancedFilterDropdown';
 export * from './AdvancedFilter/AdvancedFilterPopover';
@@ -121,9 +119,6 @@ export {
   LoadingIndicator,
   DashboardActionViewsList,
   AppToaster,
-  Dialog,
-  DialogContent,
-  DialogSuspense,
   InputPrependButton,
   CategoriesSelectList,
   Col,
@@ -159,5 +154,5 @@ export {
   ItemsMultiSelect,
   Card,
   AvaterCell,
-  MoreMenuItems
+  MoreMenuItems,
 };

src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js

@@ -64,7 +64,6 @@ function SMSMessageForm({
       }
       setSubmitting(false);
     };
-    debugger;
     editSMSNotificationMutate(form).then(onSuccess).catch(onError);
   };
 

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js

@@ -60,7 +60,6 @@ function SMSMessagePreviewSection() {
   return (
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={message} />
-
       <SMSPreviewSectionNote>
         <strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
         characters. <strong>{messagesUnits}</strong> SMS units will be used to

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
+import { DialogFooterActions, FormattedMessage as T } from 'components';
 
 import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -20,6 +19,7 @@ function SMSMessageFormFloatingActions({
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
+  // SMS Message dialog contxt.
   const { dialogName } = useSMSMessageDialogContext();
 
   // Handle close button click.
@@ -29,7 +29,7 @@ function SMSMessageFormFloatingActions({
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <DialogFooterActions alignment={'left'}>
         <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
           <T id={'cancel'} />
         </Button>
@@ -41,13 +41,9 @@ function SMSMessageFormFloatingActions({
         >
           Save SMS Message
         </Button>
-      </FooterActions>
+      </DialogFooterActions>
     </div>
   );
 }
 
 export default compose(withDialogActions)(SMSMessageFormFloatingActions);
-
-const FooterActions = styled.div`
-  justify-content: flex-start;
-`;

src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
-
-import { safeCallback } from 'utils';
+import { DialogFooterActions, FormattedMessage as T } from 'components';
 
 /**
  *
@@ -21,7 +18,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
 
   return (
     <div className={Classes.DIALOG_FOOTER}>
-      <FooterActions className={Classes.DIALOG_FOOTER_ACTIONS}>
+      <DialogFooterActions alignment={'left'}>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
@@ -37,11 +34,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
         >
           <T id={'cancel'} />
         </Button>
-      </FooterActions>
+      </DialogFooterActions>
     </div>
   );
-}
-
-const FooterActions = styled.div`
-  justify-content: flex-start;
-`;
+}

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js

@@ -1,25 +1,53 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
 
-import { DataTable } from 'components';
+import { DataTable, AppToaster } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useSMSIntegrationTableColumns, ActionsMenu } from './components';
 import { useSMSIntegrationContext } from './SMSIntegrationProvider';
+import { useSettingEditSMSNotification } from 'hooks/query';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+/**
+ * SMS Message data table.
+ */
 function SMSMessagesDataTable({
   // #withDialogAction
   openDialog,
 }) {
+  // Edit SMS message notification mutations.
+  const { mutateAsync: editSMSNotificationMutate } =
+    useSettingEditSMSNotification();
+
+  // Handle notification switch change.
+  const handleNotificationSwitchChange = React.useCallback(
+    (event, value, notification) => {
+      editSMSNotificationMutate({
+        notification_key: notification.key,
+        is_notification_enabled: value,
+      }).then(() => {
+        AppToaster.show({
+          message: 'SMS notification hs been enabled successfully.',
+          intent: Intent.SUCCESS,
+        });
+      });
+    },
+    [editSMSNotificationMutate],
+  );
+
   // Table columns.
-  const columns = useSMSIntegrationTableColumns();
+  const columns = useSMSIntegrationTableColumns({
+    onSwitchChange: handleNotificationSwitchChange,
+  });
 
   const { notifications, isSMSNotificationsLoading } =
     useSMSIntegrationContext();
 
+  // handle edit message link click
   const handleEditMessageText = ({ key }) => {
     openDialog('sms-message-form', { notificationkey: key });
   };

src/containers/Preferences/SMSIntegration/components.js

@@ -5,6 +5,7 @@ import { Menu, MenuItem } from '@blueprintjs/core';
 
 import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
+
 import { safeInvoke } from 'utils';
 
 /**
@@ -63,7 +64,7 @@ export function ActionsMenu({
  * Retrieve SMS notifications messages table columns
  * @returns
  */
-export function useSMSIntegrationTableColumns() {
+export function useSMSIntegrationTableColumns({ onSwitchChange }) {
   return React.useMemo(
     () => [
       {
@@ -98,9 +99,10 @@ export function useSMSIntegrationTableColumns() {
         disableResizing: true,
         disableSortBy: true,
         width: '80',
+        onSwitchChange,
       },
     ],
-    [],
+    [onSwitchChange],
   );
 }
 

src/hooks/query/settings.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';