feat: Add SMS Integration & SMS Message Form.

src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.js

@@ -0,0 +1,39 @@
+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();
+
+/**
+ * SMS Integration provider.
+ */
+function SMSIntegrationProvider({ ...props }) {
+  //Fetches Organization Settings.
+  const { isLoading: isSettingsLoading } = useSettings();
+
+  const { data: notifications, isLoading: isSMSNotificationsLoading } =
+    useSettingSMSNotifications();
+
+  // Provider state.
+  const provider = {
+    notifications,
+    isSMSNotificationsLoading,
+  };
+
+  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 };

src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Tabs, Tab } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import SMSMessagesDataTable from './SMSMessagesDataTable';
+
+import '../../../style/pages/Preferences/SMSIntegration.scss';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+function SMSIntegrationTabs({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('sms_integration.label'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <div className={classNames(CLASSES.CARD)}>
+      <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>
+    </div>
+  );
+}
+
+export default compose(withDashboardActions)(SMSIntegrationTabs);

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DataTableEditable, DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useSMSIntegrationTableColumns } from './components';
+import { useSMSIntegrationContext } from './SMSIntegrationProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function SMSMessagesDataTable({
+  // #withDialogAction
+  openDialog,
+}) {
+  // Table columns.
+  const columns = useSMSIntegrationTableColumns();
+
+  const { notifications, isSMSNotificationsLoading } =
+    useSMSIntegrationContext();
+
+  const handleEditSMSMessage = ({ key }) => {
+    openDialog('sms-message-form', { notificationkey: key });
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={notifications}
+      loading={isSMSNotificationsLoading}
+      progressBarLoading={isSMSNotificationsLoading}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+      payload={{
+        onEditSMSMessage: handleEditSMSMessage,
+      }}
+    />
+  );
+}
+
+export default compose(withDialogActions)(SMSMessagesDataTable);

src/containers/Preferences/SMSIntegration/components.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { SwitchFieldCell } from 'components/DataTableCells';
+import { safeCallback } from 'utils';
+
+/**
+ * Notification accessor.
+ */
+export const NotificationAccessor = (row) => {
+  return (
+    <span className="notification">
+      <span className={'notification__label'}>{row.notification_label}</span>
+      <span className={'notification__desc'}>
+        {row.notification_description}
+      </span>
+    </span>
+  );
+};
+
+export const SMSMessageCell = ({
+  payload: { onEditSMSMessage },
+  row: { original },
+}) => (
+  <div>
+    {original.sms_message}
+    <span
+      className="edit-text"
+      onClick={safeCallback(onEditSMSMessage, original)}
+    >
+      {'Edit'}
+    </span>
+  </div>
+);
+
+export function useSMSIntegrationTableColumns() {
+  return React.useMemo(() => [
+    {
+      Header: intl.get('sms_message.label_Notification'),
+      accessor: NotificationAccessor,
+      className: 'notification',
+      width: '180',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'module_formatted',
+      className: 'service',
+      width: '80',
+    },
+    {
+      Header: intl.get('sms_message.label_mesage'),
+      accessor: 'sms_message',
+      Cell: SMSMessageCell,
+      className: 'sms_message',
+      clickable: true,
+      width: '180',
+    },
+    {
+      Header: intl.get('sms_message.label_auto'),
+      accessor: 'is_notification_enabled',
+      Cell: SwitchFieldCell,
+      className: 'is_notification_enabled',
+      disableSortBy: true,
+      disableResizing: true,
+      width: '80',
+    },
+  ]);
+}

src/containers/Preferences/SMSIntegration/index.js

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