From 940aab178eeece6b61dad8a65601f6d1ff3b9893 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 23 Aug 2024 12:32:29 +0530 Subject: [PATCH 1/5] added fallback image if no media --- src/components/UI/ImgFallback/ImgFallback.tsx | 2 +- .../ChatMessageType/ChatMessageType.tsx | 2 +- src/containers/Template/Form/HSM/HSM.tsx | 31 +++++++++++++++---- src/containers/Template/Form/Template.tsx | 18 ++++++++--- 4 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/components/UI/ImgFallback/ImgFallback.tsx b/src/components/UI/ImgFallback/ImgFallback.tsx index db4dcbe39..1669f6565 100644 --- a/src/components/UI/ImgFallback/ImgFallback.tsx +++ b/src/components/UI/ImgFallback/ImgFallback.tsx @@ -13,7 +13,7 @@ const ImgFallback = ({ src, alt, ...rest }: ImgProps) => { const imgRef: any = useRef(); useEffect(() => { - setImgSrc(src); + setImgSrc(src || FallbackImage); }, [src]); return ( diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType.tsx index 339668171..69f43933d 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType.tsx @@ -72,7 +72,7 @@ export const ChatMessageType = ({ zIndex={1501} // greater than tooltips /> - + ); diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx index 5a00834a7..54c5ce043 100644 --- a/src/containers/Template/Form/HSM/HSM.tsx +++ b/src/containers/Template/Form/HSM/HSM.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import { useParams, useLocation } from 'react-router-dom'; @@ -33,7 +33,9 @@ export const HSM = () => { const [category, setCategory] = useState(undefined); const [languageVariant, setLanguageVariant] = useState(false); const [allowTemplateCategoryChange, setAllowTemplateCategoryChange] = useState(true); - + useEffect(() => { + console.log(sampleMessages); + }, [sampleMessages]); const { t } = useTranslation(); const params = useParams(); const location: any = useLocation(); @@ -90,19 +92,35 @@ export const HSM = () => { const media: any = { ...sampleMessages.media }; const text = getTemplate(message); media.caption = text; + console.log(sampleMessages, { body: text, media }); + setSampleMessages((val) => ({ ...val, body: text, media })); }; const getAttachmentUrl = (type: any, media: any) => { - const mediaBody = { ...media }; - const mediaObj: any = sampleMessages.media; - mediaBody.caption = mediaObj.caption; - setSampleMessages((val) => ({ ...val, type, media: mediaBody })); + const message: any = { ...sampleMessages }; + + message.media = media; + message.type = type; + console.log(message); + + setSampleMessages(message); }; const addButtonsToSampleMessage = (buttonTemplate: string) => { const message: any = { ...sampleMessages }; message.body = buttonTemplate; + console.log(sampleMessages, message); + + setSampleMessages(message); + }; + + const updateSimulatorMessage = (body: any, type: any, media: any) => { + const message: any = { ...sampleMessages }; + message.body = body; + message.type = type; + message.media = media; + setSampleMessages(message); }; @@ -207,6 +225,7 @@ export const HSM = () => { setNewShortcode={setNewShortcode} newShortCode={newShortcode} existingShortCode={exisitingShortCode} + updateSimulatorMessage={updateSimulatorMessage} /> diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 88850bdb3..3c69df0f6 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -161,6 +161,7 @@ export interface TemplateProps { newShortCode?: any; setNewShortcode?: any; existingShortCode?: any; + updateSimulatorMessage?: any; } interface CallToActionTemplate { @@ -192,6 +193,7 @@ const Template = ({ setNewShortcode, newShortCode, existingShortCode, + updateSimulatorMessage, }: TemplateProps) => { // "Audio" option is removed in case of HSM Template const mediaTypes = @@ -327,7 +329,9 @@ const Template = ({ } variables = getExampleValue(exampleValue); setVariables(variables); - onExampleChange(getExampleFromBody(bodyValue, variables)); + console.log(1); + + updateSimulatorMessage(getExampleFromBody(bodyValue, variables), type, MessageMediaValue); } if (shortcodeValue && setNewShortcode) { @@ -520,8 +524,10 @@ const Template = ({ }, [languages]); useEffect(() => { - if ((type === '' || type) && attachmentURL) { - validateURL(attachmentURL); + if (type === '' || type) { + if (attachmentURL) { + validateURL(attachmentURL); + } if (getUrlAttachmentAndType) { getUrlAttachmentAndType(type.id || 'TEXT', { url: attachmentURL }); } @@ -541,7 +547,9 @@ const Template = ({ // Removing buttons when checkbox is checked or unchecked useEffect(() => { const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); - onExampleChange(message || ''); + console.log(message); + + updateSimulatorMessage(message || '', type, {}); }, [isAddButtonChecked]); // Converting buttons to template and vice-versa to show realtime update on simulator @@ -555,6 +563,8 @@ const Template = ({ const sampleText: any = parsedText && message + parsedText; if (sampleText) { + console.log(3); + onExampleChange(sampleText); } } From 56627ce55571f05bea18e99b8b23a29de5cc79eb Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 27 Aug 2024 21:01:39 +0530 Subject: [PATCH 2/5] fixed issue when image was not loading --- src/containers/Template/Form/HSM/HSM.tsx | 44 ++++++----------------- src/containers/Template/Form/Template.tsx | 23 ++++-------- 2 files changed, 18 insertions(+), 49 deletions(-) diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx index 54c5ce043..7808b2f36 100644 --- a/src/containers/Template/Form/HSM/HSM.tsx +++ b/src/containers/Template/Form/HSM/HSM.tsx @@ -33,9 +33,7 @@ export const HSM = () => { const [category, setCategory] = useState(undefined); const [languageVariant, setLanguageVariant] = useState(false); const [allowTemplateCategoryChange, setAllowTemplateCategoryChange] = useState(true); - useEffect(() => { - console.log(sampleMessages); - }, [sampleMessages]); + const { t } = useTranslation(); const params = useParams(); const location: any = useLocation(); @@ -87,41 +85,23 @@ export const HSM = () => { return text; }; - const getSimulatorMessage = (messages: any) => { + const getSimulatorMessage = (messages: any, mediaa?: any) => { const message = removeFirstLineBreak(messages); - const media: any = { ...sampleMessages.media }; const text = getTemplate(message); - media.caption = text; - console.log(sampleMessages, { body: text, media }); + + const media = { + ...sampleMessages.media, + caption: text, + }; setSampleMessages((val) => ({ ...val, body: text, media })); }; const getAttachmentUrl = (type: any, media: any) => { - const message: any = { ...sampleMessages }; - - message.media = media; - message.type = type; - console.log(message); - - setSampleMessages(message); - }; - - const addButtonsToSampleMessage = (buttonTemplate: string) => { - const message: any = { ...sampleMessages }; - message.body = buttonTemplate; - console.log(sampleMessages, message); - - setSampleMessages(message); - }; - - const updateSimulatorMessage = (body: any, type: any, media: any) => { - const message: any = { ...sampleMessages }; - message.body = body; - message.type = type; - message.media = media; - - setSampleMessages(message); + const mediaBody = { ...media }; + const mediaObj: any = sampleMessages.media; + mediaBody.caption = mediaObj.caption; + setSampleMessages((val) => ({ ...val, type, media: mediaBody })); }; const isCopyState = location.state === 'copy'; @@ -217,7 +197,6 @@ export const HSM = () => { getUrlAttachmentAndType={getAttachmentUrl} setCategory={setCategory} category={category} - onExampleChange={addButtonsToSampleMessage} allowTemplateCategoryChange={allowTemplateCategoryChange} setAllowTemplateCategoryChange={setAllowTemplateCategoryChange} languageVariant={languageVariant} @@ -225,7 +204,6 @@ export const HSM = () => { setNewShortcode={setNewShortcode} newShortCode={newShortcode} existingShortCode={exisitingShortCode} - updateSimulatorMessage={updateSimulatorMessage} /> diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 3c69df0f6..95c713ae1 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -152,7 +152,6 @@ export interface TemplateProps { getUrlAttachmentAndType?: any; setCategory?: any; category?: any; - onExampleChange?: any; languageStyle?: string; getSimulatorMessage?: any; allowTemplateCategoryChange?: boolean; @@ -161,7 +160,6 @@ export interface TemplateProps { newShortCode?: any; setNewShortcode?: any; existingShortCode?: any; - updateSimulatorMessage?: any; } interface CallToActionTemplate { @@ -184,7 +182,6 @@ const Template = ({ getUrlAttachmentAndType, setCategory, category, - onExampleChange = () => {}, allowTemplateCategoryChange, setAllowTemplateCategoryChange, languageStyle = 'dropdown', @@ -193,7 +190,6 @@ const Template = ({ setNewShortcode, newShortCode, existingShortCode, - updateSimulatorMessage, }: TemplateProps) => { // "Audio" option is removed in case of HSM Template const mediaTypes = @@ -329,9 +325,7 @@ const Template = ({ } variables = getExampleValue(exampleValue); setVariables(variables); - console.log(1); - - updateSimulatorMessage(getExampleFromBody(bodyValue, variables), type, MessageMediaValue); + getSimulatorMessage(getExampleFromBody(bodyValue, variables)); } if (shortcodeValue && setNewShortcode) { @@ -363,6 +357,7 @@ const Template = ({ } if (MessageMediaValue) { setAttachmentURL(MessageMediaValue.sourceUrl); + getUrlAttachmentAndType(typeValue || 'TEXT', { url: MessageMediaValue.sourceUrl }); } else { setAttachmentURL(''); } @@ -545,12 +540,10 @@ const Template = ({ }, [templateType]); // Removing buttons when checkbox is checked or unchecked - useEffect(() => { - const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); - console.log(message); - - updateSimulatorMessage(message || '', type, {}); - }, [isAddButtonChecked]); + // useEffect(() => { + // const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); + // onExampleChange(message || ''); + // }, [isAddButtonChecked]); // Converting buttons to template and vice-versa to show realtime update on simulator useEffect(() => { @@ -563,9 +556,7 @@ const Template = ({ const sampleText: any = parsedText && message + parsedText; if (sampleText) { - console.log(3); - - onExampleChange(sampleText); + getSimulatorMessage(sampleText); } } }, [templateButtons]); From c89eeafab66c94c8f22bca74c231a045067e828c Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 27 Aug 2024 21:12:39 +0530 Subject: [PATCH 3/5] fixed codacy errors and deepscan fixes --- src/containers/Template/Form/HSM/HSM.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx index 7808b2f36..68dcb3d57 100644 --- a/src/containers/Template/Form/HSM/HSM.tsx +++ b/src/containers/Template/Form/HSM/HSM.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import { useParams, useLocation } from 'react-router-dom'; @@ -85,7 +85,7 @@ export const HSM = () => { return text; }; - const getSimulatorMessage = (messages: any, mediaa?: any) => { + const getSimulatorMessage = (messages: any) => { const message = removeFirstLineBreak(messages); const text = getTemplate(message); From 08ccb619ec8a5764189bd95146fd5f9ca03c87a8 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 28 Aug 2024 11:35:13 +0530 Subject: [PATCH 4/5] copy hsm --- src/containers/Template/Form/Template.tsx | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 95c713ae1..99cd32767 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -539,12 +539,6 @@ const Template = ({ } }, [templateType]); - // Removing buttons when checkbox is checked or unchecked - // useEffect(() => { - // const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); - // onExampleChange(message || ''); - // }, [isAddButtonChecked]); - // Converting buttons to template and vice-versa to show realtime update on simulator useEffect(() => { if (templateButtons.length > 0) { @@ -565,7 +559,7 @@ const Template = ({ if (getSimulatorMessage && !isEditing) { getSimulatorMessage(getExampleFromBody(body, variables)); } - }, [body, variables]); + }, [body, variables, isAddButtonChecked]); useEffect(() => { setVariables(getVariables(body, variables)); @@ -851,10 +845,18 @@ const Template = ({ const setPayload = (payload: any) => { let payloadCopy = payload; - let translationsCopy: any = {}; + console.log(payloadCopy); + if (template) { + if (payloadCopy.isHsm) { + payloadCopy.category = category.label || category; + payloadCopy.example = getExampleFromBody(payloadCopy.body, variables); + } + if (template.sessionTemplate.sessionTemplate.language.id === language?.id) { + console.log(2); + payloadCopy.languageId = language?.id; if (payloadCopy.type) { payloadCopy.type = payloadCopy.type.id; @@ -888,6 +890,8 @@ const Template = ({ delete payloadCopy.isAddButtonChecked; delete payloadCopy.templateButtons; } else if (!defaultAttribute.isHsm) { + console.log(2); + let messageMedia = null; if (payloadCopy.type && payloadCopy.attachmentURL) { messageMedia = { @@ -962,6 +966,7 @@ const Template = ({ delete payloadCopy.variables; delete payloadCopy.existingShortCode; delete payloadCopy.newShortCode; + console.log(payloadCopy); return payloadCopy; }; From 7af2ce6d20a2e8ed50f27ad692091c87b38027f8 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 30 Aug 2024 21:43:19 +0530 Subject: [PATCH 5/5] refactoring --- src/containers/Template/Form/HSM/HSM.tsx | 8 ++++++ src/containers/Template/Form/Template.tsx | 35 ++++++++++++++--------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx index 68dcb3d57..0d0c29807 100644 --- a/src/containers/Template/Form/HSM/HSM.tsx +++ b/src/containers/Template/Form/HSM/HSM.tsx @@ -101,9 +101,16 @@ export const HSM = () => { const mediaBody = { ...media }; const mediaObj: any = sampleMessages.media; mediaBody.caption = mediaObj.caption; + setSampleMessages((val) => ({ ...val, type, media: mediaBody })); }; + const addButtonsToSampleMessage = (buttonTemplate: string) => { + const message: any = { ...sampleMessages }; + message.body = buttonTemplate; + setSampleMessages(message); + }; + const isCopyState = location.state === 'copy'; let isEditing = false; if (params.id && !isCopyState) { @@ -197,6 +204,7 @@ export const HSM = () => { getUrlAttachmentAndType={getAttachmentUrl} setCategory={setCategory} category={category} + onExampleChange={addButtonsToSampleMessage} allowTemplateCategoryChange={allowTemplateCategoryChange} setAllowTemplateCategoryChange={setAllowTemplateCategoryChange} languageVariant={languageVariant} diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 99cd32767..b4cf2dc19 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -152,6 +152,7 @@ export interface TemplateProps { getUrlAttachmentAndType?: any; setCategory?: any; category?: any; + onExampleChange?: any; languageStyle?: string; getSimulatorMessage?: any; allowTemplateCategoryChange?: boolean; @@ -182,6 +183,7 @@ const Template = ({ getUrlAttachmentAndType, setCategory, category, + onExampleChange = () => {}, allowTemplateCategoryChange, setAllowTemplateCategoryChange, languageStyle = 'dropdown', @@ -312,6 +314,8 @@ const Template = ({ setBody(bodyValue || ''); setEditorState(bodyValue || ''); } + variables = getExampleValue(exampleValue); + setVariables(variables); if (exampleValue) { if (hasButtons) { @@ -322,10 +326,12 @@ const Template = ({ ); setTemplateButtons(buttonsVal); setTemplateType(templateButtonType); + const parse = convertButtonsToTemplate(buttonsVal, templateButtonType); + const parsedText = parse.length ? `| ${parse.join(' | ')}` : null; + const { message }: any = getTemplateAndButton(getExampleFromBody(bodyValue, variables)); + const sampleText: any = parsedText && message + parsedText; + onExampleChange(sampleText); } - variables = getExampleValue(exampleValue); - setVariables(variables); - getSimulatorMessage(getExampleFromBody(bodyValue, variables)); } if (shortcodeValue && setNewShortcode) { @@ -539,9 +545,17 @@ const Template = ({ } }, [templateType]); + // Removing buttons when checkbox is checked or unchecked + useEffect(() => { + if (!isEditing) { + const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables)); + onExampleChange(message || ''); + } + }, [isAddButtonChecked]); + // Converting buttons to template and vice-versa to show realtime update on simulator useEffect(() => { - if (templateButtons.length > 0) { + if (templateButtons.length > 0 && !isEditing) { const parse = convertButtonsToTemplate(templateButtons, templateType); const parsedText = parse.length ? `| ${parse.join(' | ')}` : null; @@ -550,7 +564,7 @@ const Template = ({ const sampleText: any = parsedText && message + parsedText; if (sampleText) { - getSimulatorMessage(sampleText); + onExampleChange(sampleText); } } }, [templateButtons]); @@ -559,7 +573,7 @@ const Template = ({ if (getSimulatorMessage && !isEditing) { getSimulatorMessage(getExampleFromBody(body, variables)); } - }, [body, variables, isAddButtonChecked]); + }, [body, variables]); useEffect(() => { setVariables(getVariables(body, variables)); @@ -845,18 +859,14 @@ const Template = ({ const setPayload = (payload: any) => { let payloadCopy = payload; - let translationsCopy: any = {}; - console.log(payloadCopy); + let translationsCopy: any = {}; if (template) { if (payloadCopy.isHsm) { payloadCopy.category = category.label || category; payloadCopy.example = getExampleFromBody(payloadCopy.body, variables); } - if (template.sessionTemplate.sessionTemplate.language.id === language?.id) { - console.log(2); - payloadCopy.languageId = language?.id; if (payloadCopy.type) { payloadCopy.type = payloadCopy.type.id; @@ -890,8 +900,6 @@ const Template = ({ delete payloadCopy.isAddButtonChecked; delete payloadCopy.templateButtons; } else if (!defaultAttribute.isHsm) { - console.log(2); - let messageMedia = null; if (payloadCopy.type && payloadCopy.attachmentURL) { messageMedia = { @@ -966,7 +974,6 @@ const Template = ({ delete payloadCopy.variables; delete payloadCopy.existingShortCode; delete payloadCopy.newShortCode; - console.log(payloadCopy); return payloadCopy; };