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,16 +87,21 @@ 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 }));
   };
 
   const getAttachmentUrl = (type: any, media: any) => {
     const mediaBody = { ...media };
     const mediaObj: any = sampleMessages.media;
     mediaBody.caption = mediaObj.caption;
+
     setSampleMessages((val) => ({ ...val, type, media: mediaBody }));
   };
 

src/containers/Template/Form/Template.tsx

@@ -314,6 +314,8 @@
       setBody(bodyValue || '');
       setEditorState(bodyValue || '');
     }
+    variables = getExampleValue(exampleValue);
+    setVariables(variables);
 
     if (exampleValue) {
       if (hasButtons) {
@@ -324,10 +326,12 @@
         );
         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 @@
     }
     if (MessageMediaValue) {
       setAttachmentURL(MessageMediaValue.sourceUrl);
+      getUrlAttachmentAndType(typeValue || 'TEXT', { url: MessageMediaValue.sourceUrl });
     } else {
       setAttachmentURL('');
     }
@@ -520,8 +525,10 @@
   }, [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 @@
 
   // 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;
@@ -853,6 +862,10 @@
 
     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) {
         payloadCopy.languageId = language?.id;
         if (payloadCopy.type) {