feat: Optimize SMS notification module.

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -1,28 +1,62 @@
 import React from 'react';
-import { Formik, Form } from 'formik';
+import { Formik, Form, useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
 
 import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
 
 import { CreateNotifyViaSMSFormSchema } from './NotifyViaSMSForm.schema';
 import NotifyViaSMSFormFields from './NotifyViaSMSFormFields';
 import NotifyViaSMSFormFloatingActions from './NotifyViaSMSFormFloatingActions';
+import { FormObserver, SMSMessagePreview } from 'components';
 
-import { transformToForm, saveInvoke } from 'utils';
+import { transformToForm, safeInvoke } from 'utils';
+import { getSMSUnits } from './utils';
 
 const defaultInitialValues = {
+  notification_key: '',
   customer_name: '',
   customer_phone_number: '',
   sms_message: '',
 };
 
+/**
+ * Notify via sms - SMS message preview section.
+ */
+function SMSMessagePreviewSection() {
+  const {
+    values: { sms_message },
+  } = useFormikContext();
+
+  // Calculates the SMS units of message.
+  const messagesUnits = getSMSUnits(sms_message);
+
+  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
+        send this SMS notification.
+      </SMSPreviewSectionNote>
+    </SMSPreviewSectionRoot>
+  );
+}
+
 /**
  * Notify Via SMS Form.
  */
-function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
+function NotifyViaSMSForm({
+  initialValues: initialValuesComponent,
+  onSubmit,
+  onCancel,
+  onValuesChange,
+}) {
   // Initial form values
   const initialValues = {
     ...defaultInitialValues,
-    ...transformToForm(NotificationDetail, defaultInitialValues),
+    ...transformToForm(initialValuesComponent, defaultInitialValues),
   };
 
   return (
@@ -32,11 +66,56 @@ function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
       onSubmit={onSubmit}
     >
       <Form>
-        <NotifyViaSMSFormFields />
-        <NotifyViaSMSFormFloatingActions dialogName={NotificationName} />
+        <div className={Classes.DIALOG_BODY}>
+          <NotifyContent>
+            <NotifyFieldsSection>
+              <NotifyViaSMSFormFields />
+            </NotifyFieldsSection>
+            <SMSMessagePreviewSection />
+          </NotifyContent>
+        </div>
+
+        <NotifyViaSMSFormFloatingActions onCancel={onCancel} />
+        <NotifyObserveValuesChange onChange={onValuesChange} />
       </Form>
     </Formik>
   );
 }
 
+/**
+ * Observes the values change of notify form.
+ */
+function NotifyObserveValuesChange({ onChange }) {
+  const { values } = useFormikContext();
+
+  // Handle the form change observe.
+  const handleChange = () => {
+    safeInvoke(onChange, values);
+  };
+  return <FormObserver values={values} onChange={handleChange} />;
+}
+
 export default NotifyViaSMSForm;
+
+const NotifyContent = styled.div`
+  display: flex;
+`;
+
+const NotifyFieldsSection = styled.div`
+  flex: 1;
+  width: 65%;
+`;
+
+const SMSPreviewSectionRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
+`;
+
+const SMSPreviewSectionNote = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+`;