re-structure to monorepo.

packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSForm.schema.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  customer_name: Yup.string().required(),
+  customer_phone_number: Yup.number(),
+  sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
+});
+
+export const CreateNotifyViaSMSFormSchema = Schema;

packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSForm.tsx

@@ -0,0 +1,158 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { castArray, includes } from 'lodash';
+import { Formik, Form, useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Callout, Classes, Intent } 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, 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>
+        {intl.formatHTMLMessage(
+          { id: 'notiify_via_sms.dialog.sms_note' },
+          {
+            value: messagesUnits,
+          },
+        )}
+      </SMSPreviewSectionNote>
+    </SMSPreviewSectionRoot>
+  );
+}
+
+/**
+ * Notify Via SMS Form.
+ */
+function NotifyViaSMSForm({
+  initialValues: initialValuesComponent,
+  notificationTypes,
+  onSubmit,
+  onCancel,
+  onValuesChange,
+  calloutCodes,
+  formikProps,
+}) {
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...transformToForm(initialValuesComponent, defaultInitialValues),
+  };
+  // Ensure always returns array.
+  const formattedNotificationTypes = React.useMemo(
+    () => castArray(notificationTypes),
+    [notificationTypes],
+  );
+
+  return (
+    <Formik
+      enableReinitialize={true}
+      validationSchema={CreateNotifyViaSMSFormSchema}
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+    >
+      <Form>
+        <div className={Classes.DIALOG_BODY}>
+          <NotifyContent>
+            <NotifyFieldsSection>
+              <NotifyViaSMSAlerts calloutCodes={calloutCodes} />
+              <NotifyViaSMSFormFields
+                notificationTypes={formattedNotificationTypes}
+              />
+            </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} />;
+}
+
+/**
+ * Notify via SMS form alerts.
+ */
+function NotifyViaSMSAlerts({ calloutCodes }) {
+  return [
+    includes(calloutCodes, 100) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        {intl.get('notify_Via_sms.dialog.customer_phone_number_does_not_eixst')}
+      </Callout>
+    ),
+    includes(calloutCodes, 200) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        {intl.get('notify_Via_sms.dialog.customer_phone_number_invalid')}
+      </Callout>
+    ),
+  ];
+}
+
+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;
+`;

packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { inputIntent } from '@/utils';
+
+export default function NotifyViaSMSFormFields({ notificationTypes }) {
+  return (
+    <NotifyViaSMSFormFieldsRoot>
+      <FastField name={'notification_key'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'notify_via_sms.dialog.notification_type'} />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_name'} />}
+          >
+            <ListSelect
+              items={notificationTypes}
+              selectedItemProp={'key'}
+              selectedItem={value}
+              textProp={'label'}
+              popoverProps={{ minimal: true }}
+              filterable={false}
+              onItemSelect={(notification) => {
+                form.setFieldValue('notification_key', notification.key);
+              }}
+              disabled={notificationTypes.length < 2}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Send Notification to ----------- */}
+      <FastField name={'customer_name'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'notify_via_sms.dialog.send_notification_to'} />}
+            className={classNames('form-group--customer-name', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_name'} />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              disabled={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Phone number ----------- */}
+      <FastField name={'customer_phone_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'phone_number'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="customer_phone_number" />}
+            className={classNames(
+              'form-group--customer_phone_number',
+              CLASSES.FILL,
+            )}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              disabled={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </NotifyViaSMSFormFieldsRoot>
+  );
+}
+
+const NotifyViaSMSFormFieldsRoot = styled.div``;

packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button } from '@blueprintjs/core';
+
+import {
+  DialogFooter,
+  DialogFooterActions,
+  FormattedMessage as T,
+} from '@/components';
+
+/**
+ *
+ */
+export default function NotifyViaSMSFormFloatingActions({ onCancel }) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = (event) => {
+    onCancel && onCancel(event);
+  };
+
+  return (
+    <DialogFooter>
+      <DialogFooterActions alignment={'left'}>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '110px' }}
+          type="submit"
+        >
+          <T id={'send_sms'} />
+        </Button>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'cancel'} />
+        </Button>
+      </DialogFooterActions>
+    </DialogFooter>
+  );
+}

packages/webapp/src/containers/NotifyViaSMS/utils.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
+  if (errors.some((e) => e.type === 'CUSTOMER_SMS_NOTIFY_PHONE_INVALID')) {
+    setCalloutCode([200]);
+    setErrors({
+      customer_phone_number: 'The personal phone number is invalid.',
+    });
+  }
+  if (errors.find((error) => error.type === 'CUSTOMER_HAS_NO_PHONE_NUMBER')) {
+    setCalloutCode([100]);
+    setErrors({
+      customer_phone_number: intl.get(
+        'notify_via_sms.dialog.customer_no_phone_error_message',
+      ),
+    });
+  }
+};
+
+export const getSMSUnits = (message, threshold = 140) => {
+  return Math.ceil(message.length / threshold);
+};