From 549093d898d83158431f899eb820917514308a7d Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Fri, 24 Nov 2023 14:37:51 +0530 Subject: [PATCH] added optimizations --- src/common/constants.ts | 10 +-- src/components/simulator/Simulator.tsx | 10 +-- .../ChatMessages/ChatMessage/ChatMessage.tsx | 12 +-- .../LocationRequestTemplate.tsx | 10 +-- .../InteractiveMessage.helper.ts | 87 ++++++++++--------- .../InteractiveMessage/InteractiveMessage.tsx | 6 +- 6 files changed, 66 insertions(+), 69 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index c0755d53b..b87964443 100644 --- a/src/common/constants.ts +++ b/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; diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx index 0981aa38b..67d3a360a 100644 --- a/src/components/simulator/Simulator.tsx +++ b/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 = ( <> ; } - if (type === INTERACTIVE_QUICK_REPLY) { + if (type === QUICK_REPLY) { template = ; } - if (type === INTERACTIVE_LOCATION_REQUEST) { + if (type === LOCATION_REQUEST) { template = ; } diff --git a/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx index cc14241c6..1439adf62 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx @@ -1,9 +1,9 @@ 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; @@ -11,7 +11,7 @@ export interface QuickReplyTemplateProps { 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 (
@@ -38,7 +38,7 @@ export const LocationRequestTemplate = ({ variant="text" disabled={disabled} startIcon={} - onClick={() => onSendLocationClick({ payload })} + onClick={() => onSendLocationClick({ payload: locationPayload })} className={isSimulator ? styles.SimulatorButton : styles.ChatButton} > Send Location diff --git a/src/containers/InteractiveMessage/InteractiveMessage.helper.ts b/src/containers/InteractiveMessage/InteractiveMessage.helper.ts index 12eeac19b..fea220abb 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.helper.ts +++ b/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) => { diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 88fce9fe5..713c94e71 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/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;