re-structure to monorepo.

packages/webapp/src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { useSettings, useSettingSMSNotifications } from '@/hooks/query';
+
+const SMSIntegrationContext = React.createContext();
+
+/**
+ * SMS Integration provider.
+ */
+function SMSIntegrationProvider({ ...props }) {
+  //Fetches Organization Settings.
+  const { isLoading: isSettingsLoading } = useSettings();
+
+  const {
+    data: notifications,
+    isLoading: isSMSNotificationsLoading,
+    isFetching: isSMSNotificationsFetching,
+  } = useSettingSMSNotifications();
+
+  // Provider state.
+  const provider = {
+    notifications,
+    isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION,
+      )}
+    >
+      <SMSIntegrationContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useSMSIntegrationContext = () => React.useContext(SMSIntegrationContext);
+
+export { SMSIntegrationProvider, useSMSIntegrationContext };

packages/webapp/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { Tabs, Tab } from '@blueprintjs/core';
+
+import { CLASSES } from '@/constants/classes';
+import SMSMessagesDataTable from './SMSMessagesDataTable';
+import { Card } from '@/components';
+
+import '@/style/pages/Preferences/SMSIntegration.scss';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+import { compose } from '@/utils';
+
+/**
+ * SMS Integration Tabs.
+ * @returns {React.JSX}
+ */
+function SMSIntegrationTabs({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('sms_integration.label'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <SMSIntegrationCard>
+      <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
+        <Tabs animate={true} defaultSelectedTabId={'sms_messages'}>
+          <Tab
+            id="overview"
+            title={intl.get('sms_integration.label.overview')}
+          />
+          <Tab
+            id="sms_messages"
+            title={intl.get('sms_integration.label.sms_messages')}
+            panel={<SMSMessagesDataTable />}
+          />
+        </Tabs>
+      </div>
+    </SMSIntegrationCard>
+  );
+}
+
+export default compose(withDashboardActions)(SMSIntegrationTabs);
+
+const SMSIntegrationCard = styled(Card)`
+  padding: 0;
+`;

packages/webapp/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+
+import { DataTable, AppToaster, TableSkeletonRows } from '@/components';
+
+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();
+
+  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) => {
+      toggleSmsNotification(notification.key, value);
+    },
+    [editSMSNotificationMutate],
+  );
+
+  // Table columns.
+  const columns = useSMSIntegrationTableColumns({
+    onSwitchChange: handleNotificationSwitchChange,
+  });
+
+  const {
+    notifications,
+    isSMSNotificationsLoading,
+    isSMSNotificationsFetching,
+  } = useSMSIntegrationContext();
+
+  // handle edit message link click
+  const handleEditMessageText = ({ key }) => {
+    openDialog('sms-message-form', { notificationkey: key });
+  };
+
+  const handleEnableNotification = (notification) => {
+    toggleSmsNotification(notification.key, true);
+  };
+
+  const handleDisableNotification = (notification) => {
+    toggleSmsNotification(notification.key, false);
+  };
+
+  return (
+    <SMSNotificationsTable
+      columns={columns}
+      data={notifications}
+      loading={isSMSNotificationsLoading}
+      progressBarLoading={isSMSNotificationsFetching}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEditMessageText: handleEditMessageText,
+        onEnableNotification: handleEnableNotification,
+        onDisableNotification: handleDisableNotification,
+      }}
+    />
+  );
+}
+
+export default compose(withDialogActions)(SMSMessagesDataTable);
+
+const SMSNotificationsTable = styled(DataTable)`
+  .table .tbody .tr .td {
+    align-items: flex-start;
+  }
+  .table .tbody .td {
+    padding: 0.8rem;
+  }
+`;

packages/webapp/src/containers/Preferences/SMSIntegration/components.tsx

@@ -0,0 +1,145 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import { SwitchFieldCell } from '@/components/DataTableCells';
+import { safeInvoke } from '@/utils';
+
+/**
+ * Notification accessor.
+ */
+export const NotificationAccessor = (row) => {
+  return (
+    <span className="notification">
+      <NotificationLabel>{row.notification_label}</NotificationLabel>
+      <NotificationDescription>
+        {row.notification_description}
+      </NotificationDescription>
+    </span>
+  );
+};
+
+/**
+ * SMS notification message cell.
+ */
+export const SMSMessageCell = ({
+  payload: { onEditMessageText },
+  row: { original },
+}) => (
+  <div>
+    <MessageBox>{original.sms_message}</MessageBox>
+    <MessageBoxActions>
+      <Button
+        minimal={true}
+        small={true}
+        intent={Intent.NONE}
+        onClick={() => safeInvoke(onEditMessageText, original)}
+      >
+        {intl.get('sms_messages.label_edit_message')}
+      </Button>
+    </MessageBoxActions>
+  </div>
+);
+
+/**
+ * Context menu of SMS notification messages.
+ */
+export function ActionsMenu({
+  payload: { onEditMessageText, onEnableNotification, onDisableNotification },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        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>
+  );
+}
+
+/**
+ * Retrieve SMS notifications messages table columns
+ * @returns
+ */
+export function useSMSIntegrationTableColumns({ onSwitchChange }) {
+  return React.useMemo(
+    () => [
+      {
+        id: 'notification',
+        Header: intl.get('sms_messages.column.notification'),
+        accessor: NotificationAccessor,
+        className: 'notification',
+        width: '180',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('sms_messages.column.service'),
+        accessor: 'module_formatted',
+        className: 'service',
+        width: '80',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('sms_messages.column.message'),
+        accessor: 'sms_message',
+        Cell: SMSMessageCell,
+        className: 'sms_message',
+        width: '180',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('sms_messages.column.auto'),
+        accessor: 'is_notification_enabled',
+        Cell: SwitchFieldCell,
+        className: 'is_notification_enabled',
+        disableResizing: true,
+        disableSortBy: true,
+        width: '80',
+        onSwitchChange,
+      },
+    ],
+    [onSwitchChange],
+  );
+}
+
+const NotificationLabel = styled.div`
+  font-weight: 500;
+`;
+
+const NotificationDescription = styled.div`
+  font-size: 14px;
+  margin-top: 6px;
+  display: block;
+  opacity: 0.75;
+`;
+
+const MessageBox = styled.div`
+  padding: 10px;
+  background-color: #fbfbfb;
+  border: 1px dashed #dcdcdc;
+  font-size: 14px;
+  line-height: 1.45;
+`;
+
+const MessageBoxActions = styled.div`
+  margin-top: 2px;
+
+  button {
+    font-size: 12px;
+  }
+`;

packages/webapp/src/containers/Preferences/SMSIntegration/index.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+
+import { SMSIntegrationProvider } from './SMSIntegrationProvider';
+import SMSIntegrationTabs from './SMSIntegrationTabs';
+
+/**
+ * SMS SMS Integration
+ */
+export default function SMSIntegration() {
+  return (
+    <SMSIntegrationProvider>
+      <SMSIntegrationTabs />
+    </SMSIntegrationProvider>
+  );
+}