added fallback images

glific · Sep 3, 2024 · 4dbd788 · 4dbd788
1 parent d7460c6
commit 4dbd788
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git 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<HTMLImageElement>();
 
   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
@@ -35,7 +35,7 @@ export const ChatMessageType = ({
   if (type !== 'LOCATION' && !media) {
     return (
       <div className={`${isContextMessage && styles.ContentMessageMaxWidth}`}>
-        <MessagesWithLinks message={body} showPreview={!isContextMessage} isSender={isSender} />
+        <MessagesWithLinks isSender={isSender} message={media.caption || media.text || body} />{' '}
       </div>
     );
   }

diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx
@@ -87,9 +87,13 @@ export const HSM = () => {
 
   const getSimulatorMessage = (messages: any) => {
     const message = removeFirstLineBreak(messages);
-    const media: any = { ...sampleMessages.media };
     const text = getTemplate(message);
-    media.caption = text;
+
+    const media = {
+      ...sampleMessages.media,
+      caption: text,
+    };
+
     setSampleMessages((val) => ({ ...val, body: text, media }));
   };
 

diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
@@ -314,6 +314,8 @@ const Template = ({
       setBody(bodyValue || '');
       setEditorState(bodyValue || '');
     }
+    variables = getExampleValue(exampleValue);
+    setVariables(variables);
 
     if (exampleValue) {
       if (hasButtons) {
@@ -324,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);
-      onExampleChange(getExampleFromBody(bodyValue, variables));
     }
 
     if (shortcodeValue && setNewShortcode) {
@@ -359,6 +363,7 @@ const Template = ({
     }
     if (MessageMediaValue) {
       setAttachmentURL(MessageMediaValue.sourceUrl);
+      getUrlAttachmentAndType(typeValue || 'TEXT', { url: MessageMediaValue.sourceUrl });
     } else {
       setAttachmentURL('');
     }
@@ -520,8 +525,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 });
       }
@@ -540,13 +547,15 @@ const Template = ({
 
   // Removing buttons when checkbox is checked or unchecked
   useEffect(() => {
-    const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables));
-    onExampleChange(message || '');
+    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;