Fix for hsm templates

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 (

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

@@ -72,7 +72,7 @@ export const ChatMessageType = ({
               zIndex={1501} // greater than tooltips
             />
           </div>
-          <MessagesWithLinks isSender={isSender} message={media.caption || media.text} />
+          <MessagesWithLinks isSender={isSender} message={media.caption || media.text || body} />
         </div>
       );
 

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 }));
   };
 
@@ -100,12 +104,6 @@ export const HSM = () => {
     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) {
@@ -199,7 +197,6 @@ export const HSM = () => {
         getUrlAttachmentAndType={getAttachmentUrl}
         setCategory={setCategory}
         category={category}
-        onExampleChange={addButtonsToSampleMessage}
         allowTemplateCategoryChange={allowTemplateCategoryChange}
         setAllowTemplateCategoryChange={setAllowTemplateCategoryChange}
         languageVariant={languageVariant}

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;
@@ -183,7 +182,6 @@ const Template = ({
   getUrlAttachmentAndType,
   setCategory,
   category,
-  onExampleChange = () => {},
   allowTemplateCategoryChange,
   setAllowTemplateCategoryChange,
   languageStyle = 'dropdown',
@@ -327,7 +325,7 @@ const Template = ({
       }
       variables = getExampleValue(exampleValue);
       setVariables(variables);
-      onExampleChange(getExampleFromBody(bodyValue, variables));
+      getSimulatorMessage(getExampleFromBody(bodyValue, variables));
     }
 
     if (shortcodeValue && setNewShortcode) {
@@ -359,6 +357,7 @@ const Template = ({
     }
     if (MessageMediaValue) {
       setAttachmentURL(MessageMediaValue.sourceUrl);
+      getUrlAttachmentAndType(typeValue || 'TEXT', { url: MessageMediaValue.sourceUrl });
     } else {
       setAttachmentURL('');
     }
@@ -520,8 +519,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 });
       }
@@ -539,10 +540,10 @@ const Template = ({
   }, [templateType]);
 
   // Removing buttons when checkbox is checked or unchecked
-  useEffect(() => {
-    const { message }: any = getTemplateAndButton(getExampleFromBody(body, variables));
-    onExampleChange(message || '');
-  }, [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(() => {
@@ -555,7 +556,7 @@ const Template = ({
 
       const sampleText: any = parsedText && message + parsedText;
       if (sampleText) {
-        onExampleChange(sampleText);
+        getSimulatorMessage(sampleText);
       }
     }
   }, [templateButtons]);