feat: Reset to defailt SMS message.

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js

@@ -1,11 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
+import { useFormikContext, FastField, ErrorMessage } from 'formik';
+import { Intent, Button, FormGroup, TextArea } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from 'components';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 
-import { FastField, Field, ErrorMessage } from 'formik';
-import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T, FieldRequiredHint } from 'components';
 import { inputIntent } from 'utils';
 
+/**
+ *
+ */
 export default function SMSMessageFormFields() {
+  // SMS message dialog context.
+  const { smsNotification } = useSMSMessageDialogContext();
+
+  // Form formik context.
+  const { setFieldValue } = useFormikContext();
+
+  // Handle the button click.
+  const handleBtnClick = () => {
+    setFieldValue('message_text', smsNotification.default_sms_message);
+  };
+
   return (
     <div>
       {/* ----------- Message Text ----------- */}
@@ -15,7 +33,19 @@ export default function SMSMessageFormFields() {
             label={<T id={'notify_via_sms.dialog.message_text'} />}
             className={'form-group--message_text'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'message_text'} />}
+            helperText={
+              <>
+                <ErrorMessage name={'message_text'} />
+                <ResetButton
+                  minimal={true}
+                  small={true}
+                  intent={Intent.PRIMARY}
+                  onClick={handleBtnClick}
+                >
+                  Reset to default message.
+                </ResetButton>
+              </>
+            }
           >
             <TextArea
               growVertically={true}
@@ -29,3 +59,7 @@ export default function SMSMessageFormFields() {
     </div>
   );
 }
+
+const ResetButton = styled(Button)`
+  font-size: 12px;
+`;

src/containers/Preferences/SMSIntegration/components.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Button, Menu, MenuItem } from '@blueprintjs/core';
 
-import { ButtonLink } from 'components';
 import { SwitchFieldCell } from 'components/DataTableCells';
 
 import { safeInvoke } from 'utils';
@@ -32,9 +31,14 @@ export const SMSMessageCell = ({
   <div>
     <MessageBox>{original.sms_message}</MessageBox>
     <MessageBoxActions>
-      <ButtonLink onClick={() => safeInvoke(onEditMessageText, original)}>
+      <Button
+        minimal={true}
+        small={true}
+        intent={Intent.NONE}
+        onClick={() => safeInvoke(onEditMessageText, original)}
+      >
         {intl.get('sms_messages.label_edit_message')}
-      </ButtonLink>
+      </Button>
     </MessageBoxActions>
   </div>
 );
@@ -87,7 +91,6 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
-        // clickable: true,
         width: '180',
         disableSortBy: true,
       },