feat: Reset to defailt SMS message.

src/components/Button/ButtonLink.js

@@ -1,23 +1,13 @@
 import styled from 'styled-components';
-import { Button } from '@blueprintjs/core';
 
-export const ButtonLink = styled(Button)`
-  line-height: inherit;
+export const ButtonLink = styled.button`
+  color: #0052cc;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
 
-  &.bp3-small {
-    min-height: auto;
-    min-width: auto;
-    padding: 0;
-  }
-  &:not([class*='bp3-intent-']) {
-    &,
-    &:hover {
-      color: #0052cc;
-      background: transparent;
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
+  &:hover,
+  &:active {
+    text-decoration: underline;
   }
 `;

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,
       },

src/lang/en/index.json

@@ -1446,7 +1446,7 @@
   "sms_messages.label_notification": "Notification",
   "sms_messages.label_mesage": "Message",
   "sms_messages.label_auto": "Auto",
-  "sms_messages.label_edit_message": "Edit message",
+  "sms_messages.label_edit_message": "Edit Message",
   "sms_messages.notification_switch_change_success_message": "SMS notification hs been enabled successfully.",
   "sms_message.dialog.label": "SMS message",
   "sms_message.dialog.sms_note": "<strong>Note :</strong>  One SMS unit can contain a maximum of 160 characters. <strong>{value}</strong> SMS units will be used to send this SMS notification.",