feat: add SMS message template.

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+
+function SMSMessageTemplateFloatingAction() {
+  const history = useHistory();
+  const { isSubmitting } = useFormikContext();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <div className={'card__footer'}>
+      <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+        <T id={'save'} />
+      </Button>
+      <Button onClick={handleCloseClick} disabled={isSubmitting}>
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
+
+export default SMSMessageTemplateFloatingAction;

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import { CLASSES } from 'common/classes';
+
+import { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
+
+import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
+
+export const defaultInitialValues = {
+  entries: [
+    {
+      notification: '',
+      service: '',
+      message: '',
+      auto: true,
+      switch: true,
+    },
+  ],
+};
+
+export default function SMSMessageTemplateForm({}) {
+  // Form initial values.
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles form submit.
+  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
+
+  return (
+    <div
+      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_STRIP_STYLE)}
+    >
+      <Formik
+        validationSchema={CreateSMSMessageTemplateSchema}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        component={SMSMessageTemplateFormContent}
+      />
+    </div>
+  );
+}

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js

@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
+
+const Schema = Yup.object().shape({
+
+  entries: Yup.array().of(
+    Yup.object().shape({
+      notification: Yup.string().nullable(),
+      service: Yup.number().nullable(),
+      message: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
+      auto:Yup.boolean(),
+      switch:Yup.boolean(),
+     
+    }),
+  ),
+})
+export const CreateSMSMessageTemplateSchema = Schema;

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FastField } from 'formik';
+
+import SMSMessageTemplatesEntriesTable from './SMSMessageTemplatesEntriesTable';
+
+export default function SMSMessageTemplateFormBody() {
+  return (
+    <FastField name={'entries'}>
+      {({
+        form: { values, setFieldValue },
+        field: { value },
+        meta: { error, touched },
+      }) => (
+        <SMSMessageTemplatesEntriesTable
+          entries={value}
+          onUpdateData={(newEntries) => {
+            setFieldValue('entries', newEntries);
+          }}
+        />
+      )}
+    </FastField>
+  );
+}

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import SMSMessageTemplateFormBody from './SMSMessageTemplateFormBody';
+import SMSMessageTemplateFloatingAction from './SMSMessageTemplateFloatingAction';
+
+export default function SMSMessageTemplateFormContent() {
+  return (
+    <Form>
+      <SMSMessageTemplateFormBody />
+      <SMSMessageTemplateFloatingAction />
+    </Form>
+  );
+}

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { useSettings, useSaveSettings } from 'hooks/query';
+
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const SMSMessageTemplateContext = React.createContext();
+
+/**
+ * SMS message template provider.
+ */
+function SMSMessageTemplateProvider({ ...props }) {
+  
+  //Fetches Organization Settings.
+  const { isLoading: isSettingsLoading } = useSettings();
+
+  // Provider state.
+  const provider = {};
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isSettingsLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <SMSMessageTemplateContext.Provider value={provider} {...props} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const useSMSMessageTemplateContext = () =>
+  React.useContext(SMSMessageTemplateContext);
+
+export { SMSMessageTemplateProvider, useSMSMessageTemplateContext };

src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  InputGroupCell,
+  TextAreaCell,
+  SwitchFieldCell,
+} from 'components/DataTableCells';
+import { DataTableEditable } from 'components';
+import { compose, updateTableCell } from 'utils';
+
+export default function SMSMessageTemplatesEntriesTable({
+  onUpdateData,
+  entries,
+}) {
+  const columns = React.useMemo(() => [
+    {
+      Header: intl.get('sms_message_template.label_Notification'),
+      accessor: 'notification',
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'service',
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('sms_message_template.label_mesage'),
+      accessor: 'message',
+      // Cell: TextAreaCell,
+      Cell: InputGroupCell,
+      disableSortBy: true,
+      width: '150',
+    },
+    {
+      Header: intl.get('sms_message_template.label_auto'),
+      accessor: 'auto',
+      Cell: SwitchFieldCell,
+      disableSortBy: true,
+      disableResizing: true,
+      width: '120',
+    },
+  ]);
+
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}

src/containers/Preferences/SMSMessageTemplates/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SMSMessageTemplateProvider } from './SMSMessageTemplateProvider';
+import SMSMessageTemplateForm from './SMSMessageTemplateForm';
+
+/**
+ * SMS message template.
+ */
+export default function SMSMessageTemplates() {
+  return (
+    <SMSMessageTemplateProvider>
+      <SMSMessageTemplateForm />
+    </SMSMessageTemplateProvider>
+  );
+}