feat: SMS message preview with variables.

src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js

@@ -4,6 +4,9 @@ import '../../../style/pages/SMSMessage/SMSMessage.scss';
 import { SMSMessageDialogProvider } from './SMSMessageDialogProvider';
 import SMSMessageForm from './SMSMessageForm';
 
+/**
+ * SMS message dialog content.
+ */
 export default function SMSMessageDialogContent({
   // #ownProps
   dialogName,

src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js

@@ -15,6 +15,7 @@ function SMSMessageDialogProvider({ notificationkey, dialogName, ...props }) {
   const { mutateAsync: editSMSNotificationMutate } =
     useSettingEditSMSNotification();
 
+  // SMS notificiation details
   const { data: smsNotification, isLoading: isSMSNotificationLoading } =
     useSettingSMSNotification(notificationkey);
 

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js

@@ -2,24 +2,28 @@ import React from 'react';
 import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
+import { castArray } from 'lodash';
 
 import SMSMessageFormFields from './SMSMessageFormFields';
 import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
 
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
-const messageVariables = [
-  {
-    variable: '{CompanyName}',
-    description: 'References to the current company name.',
-  },
-];
-
 /**
  * SMS message form content.
  */
 export default function SMSMessageFormContent() {
+  // SMS message dialog context.
+  const { smsNotification } = useSMSMessageDialogContext();
+
+  // Ensure always returns array.
+  const messageVariables = React.useMemo(
+    () => castArray(smsNotification.allowed_variables),
+    [smsNotification.allowed_variables],
+  );
+
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
@@ -30,7 +34,7 @@ export default function SMSMessageFormContent() {
             <SMSMessageVariables>
               {messageVariables.map(({ variable, description }) => (
                 <MessageVariable>
-                  <strong>{variable}</strong> {description}
+                  <strong>{`{${variable}}`}</strong> {description}
                 </MessageVariable>
               ))}
             </SMSMessageVariables>

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js

@@ -30,9 +30,6 @@ function SMSMessageFormFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <DialogFooterActions alignment={'left'}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
@@ -41,6 +38,9 @@ function SMSMessageFormFloatingActions({
         >
           Save SMS Message
         </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
       </DialogFooterActions>
     </div>
   );