feat add localization.

src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js

@@ -40,7 +40,7 @@ function NotifyInvoiceViaSMSForm({
     // Handle request response success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: intl.get('notify_via_sms.dialog.success_message'),
+        message: intl.get('notify_invoice_via_sms.dialog.success_message'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
@@ -9,6 +10,9 @@ import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 const messageVariables = [
   {
     variable: '{CompanyName}',
@@ -19,7 +23,10 @@ const messageVariables = [
 /**
  * SMS message form content.
  */
-export default function SMSMessageFormContent() {
+function SMSMessageFormContent({
+  // #withCurrentOrganization
+  organization: { name },
+}) {
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
@@ -28,11 +35,19 @@ export default function SMSMessageFormContent() {
             <SMSMessageFormFields />
 
             <SMSMessageVariables>
-              {messageVariables.map(({ variable, description }) => (
+              <MessageVariable>
+                {intl.formatHTMLMessage(
+                  { id: 'sms_message.dialog.message_variable_description' },
+                  {
+                    value: name,
+                  },
+                )}
+              </MessageVariable>
+              {/* {messageVariables.map(({ variable, description }) => (
                 <MessageVariable>
-                  <strong>{variable}</strong> {description}
+                  <strong>{variable}</strong> {description} 
                 </MessageVariable>
-              ))}
+              ))} */}
             </SMSMessageVariables>
           </FormFields>
 
@@ -46,6 +61,8 @@ export default function SMSMessageFormContent() {
   );
 }
 
+export default compose(withCurrentOrganization())(SMSMessageFormContent);
+
 /**
  * SMS Message preview section.
  * @returns {JSX}
@@ -61,9 +78,12 @@ function SMSMessagePreviewSection() {
     <SMSPreviewSectionRoot>
       <SMSMessagePreview message={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
-        send this SMS notification.
+        {intl.formatHTMLMessage(
+          { id: 'sms_message.dialog.sms_note' },
+          {
+            value: messagesUnits,
+          },
+        )}
       </SMSPreviewSectionNote>
     </SMSPreviewSectionRoot>
   );

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js

@@ -30,16 +30,16 @@ 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}
           style={{ minWidth: '75px' }}
           type="submit"
         >
-          Save SMS Message
+          <T id={'save_sms_message'} />
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
         </Button>
       </DialogFooterActions>
     </div>

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { castArray } from 'lodash';
 import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
@@ -36,9 +37,12 @@ function SMSMessagePreviewSection() {
     <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
-        send this SMS notification.
+        {intl.formatHTMLMessage(
+          { id: 'notiify_via_sms.dialog.sms_note' },
+          {
+            value: messagesUnits,
+          },
+        )}
       </SMSPreviewSectionNote>
     </SMSPreviewSectionRoot>
   );

src/containers/NotifyViaSMS/NotifyViaSMSFormFields.js

@@ -18,7 +18,7 @@ export default function NotifyViaSMSFormFields({ notificationTypes }) {
       <FastField name={'notification_key'}>
         {({ form, meta: { error, touched } }) => (
           <FormGroup
-            label={'Notification type'}
+            label={<T id={'notify_via_sms.dialog.notification_type'} />}
             className={classNames(CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_name'} />}

src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js

@@ -25,7 +25,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
           style={{ minWidth: '110px' }}
           type="submit"
         >
-          Send SMS
+          <T id={'send_sms'} />
         </Button>
         <Button
           disabled={isSubmitting}
@@ -37,4 +37,4 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
       </DialogFooterActions>
     </div>
   );
-}
+}

src/containers/NotifyViaSMS/utils.js

@@ -5,7 +5,7 @@ import intl from 'react-intl-universal';
 export const transformErrors = (errors, { setErrors }) => {
   if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
     AppToaster.show({
-      message: intl.get('notify_via_sms.dialog.error_message'),
+      message: intl.get('notify_via_sms.dialog.phone_invalid_error_message'),
       intent: Intent.DANGER,
     });
   }

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 
@@ -31,7 +32,9 @@ function SMSMessagesDataTable({
         is_notification_enabled: value,
       }).then(() => {
         AppToaster.show({
-          message: 'SMS notification hs been enabled successfully.',
+          message: intl.get(
+            'sms_messages.notification_switch_change_success_message',
+          ),
           intent: Intent.SUCCESS,
         });
       });

src/containers/Preferences/SMSIntegration/components.js

@@ -33,7 +33,7 @@ export const SMSMessageCell = ({
     <MessageBox>{original.sms_message}</MessageBox>
     <MessageBoxActions>
       <ButtonLink onClick={() => safeInvoke(onEditMessageText, original)}>
-        Edit message
+        {intl.get('sms_messages.label_edit_message')}
       </ButtonLink>
     </MessageBoxActions>
   </div>
@@ -87,7 +87,7 @@ export function useSMSIntegrationTableColumns({ onSwitchChange }) {
         accessor: 'sms_message',
         Cell: SMSMessageCell,
         className: 'sms_message',
-        clickable: true,
+        // clickable: true,
         width: '180',
         disableSortBy: true,
       },