added optimizations

src/common/constants.ts

@@ -153,6 +153,8 @@ export const CALL_TO_ACTION = 'CALL_TO_ACTION';
 export const LIST = 'LIST';
 export const QUICK_REPLY = 'QUICK_REPLY';
 export const LOCATION_REQUEST = 'LOCATION_REQUEST_MESSAGE';
+export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use';
+export const COMPACT_MESSAGE_LENGTH = 35;
 
 // Gupshup sample media
 export const SAMPLE_MEDIA_FOR_SIMULATOR = [
@@ -210,11 +212,3 @@ export const yupPasswordValidation = (t: any) =>
     )
     .min(10, t('Password must be at least 10 characters long.'))
     .required(t('Input required'));
-
-export const INTERACTIVE_QUICK_REPLY = 'QUICK_REPLY';
-export const INTERACTIVE_LIST = 'LIST';
-export const INTERACTIVE_LOCATION_REQUEST = 'LOCATION_REQUEST_MESSAGE';
-
-export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use';
-
-export const COMPACT_MESSAGE_LENGTH = 35;

src/components/simulator/Simulator.tsx

@@ -24,8 +24,8 @@ import ResetIcon from 'assets/images/icons/Reset/Dark.svg?react';
 import {
   TIME_FORMAT,
   SAMPLE_MEDIA_FOR_SIMULATOR,
-  INTERACTIVE_LIST,
-  INTERACTIVE_QUICK_REPLY,
+  LIST,
+  QUICK_REPLY,
   DEFAULT_MESSAGE_LIMIT,
   LOCATION_REQUEST,
 } from 'common/constants';
@@ -298,7 +298,7 @@ export const Simulator = ({
     if (content) {
       isInteractiveContentPresent = !!Object.entries(content).length;
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_LIST) {
+      if (isInteractiveContentPresent && messageType === LIST) {
         template = (
           <>
             <ListReplyTemplate
@@ -313,7 +313,7 @@ export const Simulator = ({
         );
       }
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_QUICK_REPLY) {
+      if (isInteractiveContentPresent && messageType === QUICK_REPLY) {
         template = (
           <QuickReplyTemplate
             {...content}
@@ -397,7 +397,7 @@ export const Simulator = ({
       const { templateType, interactiveContent } = interactiveMessage;
       const previewMessage = renderMessage(interactiveMessage, 'received', 0, true);
       setSimulatedMessage(previewMessage);
-      if (templateType === INTERACTIVE_LIST) {
+      if (templateType === LIST) {
         const { items } = JSON.parse(interactiveContent);
         setSelectedListTemplate(items);
       } else {

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx

@@ -9,10 +9,10 @@ import MessageIcon from 'assets/images/icons/Dropdown.svg?react';
 import {
   DATE_FORMAT,
   TIME_FORMAT,
-  INTERACTIVE_LIST,
-  INTERACTIVE_QUICK_REPLY,
+  LIST,
+  QUICK_REPLY,
   VALID_URL_REGEX,
-  INTERACTIVE_LOCATION_REQUEST,
+  LOCATION_REQUEST,
 } from 'common/constants';
 import { WhatsAppToJsx, WhatsAppTemplateButton } from 'common/RichEditor';
 import { Tooltip } from 'components/UI/Tooltip/Tooltip';
@@ -262,15 +262,15 @@ export const ChatMessage = ({
   }
 
   let template = null;
-  if (type === INTERACTIVE_LIST) {
+  if (type === LIST) {
     template = <ListReplyTemplate {...content} disabled component={ChatTemplate} />;
   }
 
-  if (type === INTERACTIVE_QUICK_REPLY) {
+  if (type === QUICK_REPLY) {
     template = <QuickReplyTemplate {...content} disabled />;
   }
 
-  if (type === INTERACTIVE_LOCATION_REQUEST) {
+  if (type === LOCATION_REQUEST) {
     template = <LocationRequestTemplate content={content} disabled />;
   }
 

src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx

@@ -1,17 +1,17 @@
 import { Button } from '@mui/material';
 import LocationIconDark from 'assets/images/icons/Location/Dark.svg?react';
 import styles from './LocationRequestTemplate.module.css';
-import { ChatMessageType } from '..//ChatMessageType/ChatMessageType';
+import { ChatMessageType } from '../ChatMessageType/ChatMessageType';
 
-export interface QuickReplyTemplateProps {
+export interface LocationRequestTemplateProps {
   content: any;
   disabled?: boolean;
 
   isSimulator?: boolean;
   onSendLocationClick?: any;
 }
 
-const payload = {
+const locationPayload = {
   type: 'location',
   name: 'location',
   id: 'LOCATION',
@@ -27,7 +27,7 @@ export const LocationRequestTemplate = ({
   isSimulator = false,
 
   onSendLocationClick = () => {},
-}: QuickReplyTemplateProps) => {
+}: LocationRequestTemplateProps) => {
   const body = content.body.text;
   return (
     <div>
@@ -38,7 +38,7 @@ export const LocationRequestTemplate = ({
         variant="text"
         disabled={disabled}
         startIcon={<LocationIconDark />}
-        onClick={() => onSendLocationClick({ payload })}
+        onClick={() => onSendLocationClick({ payload: locationPayload })}
         className={isSimulator ? styles.SimulatorButton : styles.ChatButton}
       >
         Send Location

src/containers/InteractiveMessage/InteractiveMessage.helper.ts

@@ -117,50 +117,53 @@ export const convertJSONtoStateData = (JSONData: any, interactiveType: string, l
   const data = { ...JSONData };
   const { title, body, items, content, options, globalButtons } = data;
 
-  if (interactiveType === QUICK_REPLY) {
-    const { type, header, url, text, caption } = content;
-    const result: any = {};
-    result.templateButtons = options.map((option: any) => ({ value: option.title }));
-    result.title = header || '';
-    switch (type) {
-      case 'image':
-      case 'video':
-        result.type = type.toUpperCase();
-        result.attachmentURL = url;
-        result.title = label;
-        break;
-      case 'file':
-        result.type = 'DOCUMENT';
-        result.attachmentURL = url;
-
-        result.title = label;
-        break;
-      default:
-        result.type = null;
+  let result: any = {};
+  switch (interactiveType) {
+    case QUICK_REPLY: {
+      const { type, header, url, text, caption } = content;
+      result.templateButtons = options.map((option: any) => ({ value: option.title }));
+      result.title = header || '';
+      switch (type) {
+        case 'image':
+        case 'video':
+          result.type = type.toUpperCase();
+          result.attachmentURL = url;
+          result.title = label;
+          break;
+        case 'file':
+          result.type = 'DOCUMENT';
+          result.attachmentURL = url;
+          result.title = label;
+          break;
+        default:
+          result.type = null;
+      }
+      result.body = text || '';
+      result.footer = caption;
+      break;
+    }
+    case LIST: {
+      result.templateButtons = items.map((item: any) => {
+        const itemOptions = item.options.map((option: any) => ({
+          title: option.title,
+          description: option.description,
+        }));
+        return {
+          title: item.title,
+          options: itemOptions,
+        };
+      });
+      result.body = body;
+      result.title = title;
+      result.globalButton = globalButtons[0].title;
+      break;
+    }
+    case LOCATION_REQUEST: {
+      result = { body: body.text, title: label };
+      break;
     }
-    result.body = text || '';
-    result.footer = caption;
-    return result;
-  } else if (interactiveType === LIST) {
-    const result: any = {};
-    result.templateButtons = items.map((item: any) => {
-      const itemOptions = item.options.map((option: any) => ({
-        title: option.title,
-        description: option.description,
-      }));
-      return {
-        title: item.title,
-        options: itemOptions,
-      };
-    });
-    result.body = body;
-    result.title = title;
-    result.globalButton = globalButtons[0].title;
-    return result;
-  } else if (interactiveType === LOCATION_REQUEST) {
-    const result = { body: body.text, title: label };
-    return result;
   }
+  return result;
 };
 
 export const getDefaultValuesByTemplate = (templateData: any) => {

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -52,7 +52,7 @@ const queries = {
 const templateTypeOptions = [
   { id: QUICK_REPLY, label: 'Reply buttons' },
   { id: LIST, label: 'List message' },
-  { id: LOCATION_REQUEST, label: 'Location request message' },
+  { id: LOCATION_REQUEST, label: 'Location request' },
 ];
 
 export const InteractiveMessage = () => {
@@ -628,7 +628,7 @@ export const InteractiveMessage = () => {
 
     if (templateType === LOCATION_REQUEST) {
       const bodyText = getPlainTextFromEditor(payload.body);
-      const listJson = {
+      const locationJson = {
         type: 'location_request_message',
         body: {
           type: 'text',
@@ -640,7 +640,7 @@ export const InteractiveMessage = () => {
       };
       Object.assign(updatedPayload, {
         type: LOCATION_REQUEST,
-        interactiveContent: JSON.stringify(listJson),
+        interactiveContent: JSON.stringify(locationJson),
       });
     }
     return updatedPayload;