feat: SMS notification module.

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { castArray } from 'lodash';
 import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
@@ -34,7 +35,6 @@ function SMSMessagePreviewSection() {
   return (
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={sms_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
@@ -49,6 +49,7 @@ function SMSMessagePreviewSection() {
  */
 function NotifyViaSMSForm({
   initialValues: initialValuesComponent,
+  notificationTypes,
   onSubmit,
   onCancel,
   onValuesChange,
@@ -58,6 +59,11 @@ function NotifyViaSMSForm({
     ...defaultInitialValues,
     ...transformToForm(initialValuesComponent, defaultInitialValues),
   };
+  // Ensure always returns array.
+  const formattedNotificationTypes = React.useMemo(
+    () => castArray(notificationTypes),
+    [notificationTypes],
+  );
 
   return (
     <Formik
@@ -69,8 +75,11 @@ function NotifyViaSMSForm({
         <div className={Classes.DIALOG_BODY}>
           <NotifyContent>
             <NotifyFieldsSection>
-              <NotifyViaSMSFormFields />
+              <NotifyViaSMSFormFields
+                notificationTypes={formattedNotificationTypes}
+              />
             </NotifyFieldsSection>
+
             <SMSMessagePreviewSection />
           </NotifyContent>
         </div>

src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import {
   ListSelect,
@@ -11,14 +12,9 @@ import {
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 
-const notificationTypes = [
-  { key: 'details', label: 'Invoice details' },
-  { key: 'reminder', label: 'Invoice reminder' },
-];
-
-export default function NotifyViaSMSFormFields() {
+export default function NotifyViaSMSFormFields({ notificationTypes }) {
   return (
-    <div>
+    <NotifyViaSMSFormFieldsRoot>
       <FastField name={'notification_key'}>
         {({ form, meta: { error, touched } }) => (
           <FormGroup
@@ -37,6 +33,7 @@ export default function NotifyViaSMSFormFields() {
               onItemSelect={(notification) => {
                 form.setFieldValue('notification_key', notification.key);
               }}
+              disabled={notificationTypes.length < 2}
             />
           </FormGroup>
         )}
@@ -82,6 +79,8 @@ export default function NotifyViaSMSFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </NotifyViaSMSFormFieldsRoot>
   );
 }
+
+const NotifyViaSMSFormFieldsRoot = styled.div``;