refactoring hsm

glific · Jan 3, 2025 · f2aca7c · f2aca7c
1 parent 5b65e56
commit f2aca7c
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 101 deletions.
diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.tsx b/src/components/UI/Form/AutoComplete/AutoComplete.tsx
@@ -178,7 +178,9 @@ export const AutoComplete = ({
           freeSolo={freeSolo}
           autoSelect={autoSelect}
           disableClearable={disableClearable}
-          getOptionLabel={(option: any) => (option[optionLabel] != null ? option[optionLabel] : option)}
+          getOptionLabel={(option: any) =>
+            option[optionLabel] != null ? option[optionLabel] : typeof option === 'string' ? option : ''
+          }
           getOptionDisabled={getOptionDisabled}
           isOptionEqualToValue={(option, value) => {
             if (value) {

diff --git a/src/containers/HSM/HSM.helper.ts b/src/containers/HSM/HSM.helper.ts
@@ -0,0 +1,102 @@
+import { CALL_TO_ACTION, MEDIA_MESSAGE_TYPES, QUICK_REPLY } from 'common/constants';
+
+export interface CallToActionTemplate {
+  type: string;
+  title: string;
+  value: string;
+}
+
+export interface QuickReplyTemplate {
+  value: string;
+}
+
+export const mediaOptions = MEDIA_MESSAGE_TYPES.map((option: string) => ({ id: option, label: option })).filter(
+  ({ label }) => label !== 'AUDIO' && label !== 'STICKER'
+);
+
+export const removeFirstLineBreak = (text: any) =>
+  text?.length === 1 ? text.slice(0, 1).replace(/(\r\n|\n|\r)/, '') : text;
+
+/**
+ *
+ * @param templateButtons buttons that need to be converted to gupshup format
+ * @param templateType depending on template type convert button to gupshup format
+ */
+export const convertButtonsToTemplate = (templateButtons: Array<any>, templateType: string | null) =>
+  templateButtons.reduce((result: any, temp: any) => {
+    const { title, value } = temp;
+    if (templateType === CALL_TO_ACTION && value && title) {
+      result.push(`[${title}, ${value}]`);
+    }
+    if (templateType === QUICK_REPLY && value) {
+      result.push(`[${value}]`);
+    }
+    return result;
+  }, []);
+
+/**
+ *
+ * @param templateType template type
+ * @param message
+ * @param buttons
+ * Since messages and buttons are now separated
+ * we are combining both message and buttons,
+ * so that you can see preview in simulator
+ */
+
+export const getTemplateAndButtons = (templateType: string, message: string, buttons: string) => {
+  const templateButtons = JSON.parse(buttons);
+  let result: any;
+  if (templateType === CALL_TO_ACTION) {
+    result = templateButtons.map((button: any) => {
+      const { phone_number: phoneNo, url, type, text } = button;
+      return { type, value: url || phoneNo, title: text };
+    });
+  }
+
+  if (templateType === QUICK_REPLY) {
+    result = templateButtons.map((button: any) => {
+      const { text, type } = button;
+      return { type, value: text };
+    });
+  }
+
+  // Getting in template format of gupshup
+  const templateFormat = convertButtonsToTemplate(result, templateType);
+  // Pre-pending message with buttons
+  const template = `${message} | ${templateFormat.join(' | ')}`;
+  return { buttons: result, template };
+};
+
+export const getExampleFromBody = (body: string, variables: Array<any>) => {
+  return body.replace(/{{(\d+)}}/g, (match, number) => {
+    let index = parseInt(number) - 1;
+
+    return variables[index]?.text ? (variables[index] ? `[${variables[index]?.text}]` : match) : `{{${number}}}`;
+  });
+};
+
+export const getVariables = (message: string, variables: any) => {
+  const regex = /{{\d+}}/g;
+  const matches = message.match(regex);
+
+  if (!matches) {
+    return [];
+  }
+
+  return matches.map((match, index) => (variables[index]?.text ? variables[index] : { text: '', id: index + 1 }));
+};
+
+export const getExampleValue = (example: string) => {
+  const regex = /\[([^\]]+)\]/g;
+  let match;
+  const variables = [];
+  let id = 1;
+
+  while ((match = regex.exec(example)) !== null) {
+    variables.push({ text: match[1], id });
+    id++;
+  }
+
+  return variables;
+};
diff --git a/src/containers/HSM/HSM.tsx b/src/containers/HSM/HSM.tsx
@@ -7,7 +7,7 @@ import * as Yup from 'yup';
 
 import TemplateIcon from 'assets/images/icons/Template/UnselectedDark.svg?react';
 
-import { CALL_TO_ACTION, MEDIA_MESSAGE_TYPES, QUICK_REPLY } from 'common/constants';
+import { CALL_TO_ACTION, QUICK_REPLY } from 'common/constants';
 import { validateMedia } from 'common/utils';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
@@ -27,6 +27,17 @@ import { CREATE_TEMPLATE, DELETE_TEMPLATE, UPDATE_TEMPLATE } from 'graphql/mutat
 
 import { TemplateVariables } from './TemplateVariables/TemplateVariables';
 import styles from './HSM.module.css';
+import {
+  convertButtonsToTemplate,
+  getExampleFromBody,
+  getVariables,
+  getExampleValue,
+  getTemplateAndButtons,
+  mediaOptions,
+  removeFirstLineBreak,
+  CallToActionTemplate,
+  QuickReplyTemplate,
+} from './HSM.helper';
 
 const queries = {
   getItemQuery: GET_TEMPLATE,
@@ -35,108 +46,9 @@ const queries = {
   deleteItemQuery: DELETE_TEMPLATE,
 };
 
-interface CallToActionTemplate {
-  type: string;
-  title: string;
-  value: string;
-}
-
-interface QuickReplyTemplate {
-  value: string;
-}
-
 const templateIcon = <TemplateIcon className={styles.TemplateIcon} />;
 const regexForShortcode = /^[a-z0-9_]+$/g;
 const dialogMessage = ' It will stop showing when you are drafting a customized message.';
-const mediaOptions = MEDIA_MESSAGE_TYPES.map((option: string) => ({ id: option, label: option })).filter(
-  ({ label }) => label !== 'AUDIO' && label !== 'STICKER'
-);
-
-const removeFirstLineBreak = (text: any) => (text?.length === 1 ? text.slice(0, 1).replace(/(\r\n|\n|\r)/, '') : text);
-
-/**
- *
- * @param templateButtons buttons that need to be converted to gupshup format
- * @param templateType depending on template type convert button to gupshup format
- */
-const convertButtonsToTemplate = (templateButtons: Array<any>, templateType: string | null) =>
-  templateButtons.reduce((result: any, temp: any) => {
-    const { title, value } = temp;
-    if (templateType === CALL_TO_ACTION && value && title) {
-      result.push(`[${title}, ${value}]`);
-    }
-    if (templateType === QUICK_REPLY && value) {
-      result.push(`[${value}]`);
-    }
-    return result;
-  }, []);
-
-/**
- *
- * @param templateType template type
- * @param message
- * @param buttons
- * Since messages and buttons are now separated
- * we are combining both message and buttons,
- * so that you can see preview in simulator
- */
-
-const getTemplateAndButtons = (templateType: string, message: string, buttons: string) => {
-  const templateButtons = JSON.parse(buttons);
-  let result: any;
-  if (templateType === CALL_TO_ACTION) {
-    result = templateButtons.map((button: any) => {
-      const { phone_number: phoneNo, url, type, text } = button;
-      return { type, value: url || phoneNo, title: text };
-    });
-  }
-
-  if (templateType === QUICK_REPLY) {
-    result = templateButtons.map((button: any) => {
-      const { text, type } = button;
-      return { type, value: text };
-    });
-  }
-
-  // Getting in template format of gupshup
-  const templateFormat = convertButtonsToTemplate(result, templateType);
-  // Pre-pending message with buttons
-  const template = `${message} | ${templateFormat.join(' | ')}`;
-  return { buttons: result, template };
-};
-
-const getExampleFromBody = (body: string, variables: Array<any>) => {
-  return body.replace(/{{(\d+)}}/g, (match, number) => {
-    let index = parseInt(number) - 1;
-
-    return variables[index]?.text ? (variables[index] ? `[${variables[index]?.text}]` : match) : `{{${number}}}`;
-  });
-};
-
-const getVariables = (message: string, variables: any) => {
-  const regex = /{{\d+}}/g;
-  const matches = message.match(regex);
-
-  if (!matches) {
-    return [];
-  }
-
-  return matches.map((match, index) => (variables[index]?.text ? variables[index] : { text: '', id: index + 1 }));
-};
-
-const getExampleValue = (example: string) => {
-  const regex = /\[([^\]]+)\]/g;
-  let match;
-  const variables = [];
-  let id = 1;
-
-  while ((match = regex.exec(example)) !== null) {
-    variables.push({ text: match[1], id });
-    id++;
-  }
-
-  return variables;
-};
 
 export const HSM = () => {
   const [language, setLanguageId] = useState<any>(null);