@capillarytech/creatives-library 8.0.236-alpha.5 → 8.0.236-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.236-alpha.5",
+  "version": "8.0.236-alpha.7",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -13,7 +13,7 @@
  */
 
 import React, {
-  useRef, useCallback, useMemo, useState,
+  useRef, useCallback, useMemo, useState, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
@@ -38,6 +38,7 @@ import { useEditorContent } from './hooks/useEditorContent';
 import { useInAppContent } from './hooks/useInAppContent';
 import { useLayoutState } from './hooks/useLayoutState';
 import { useValidation } from './hooks/useValidation';
+import { transformValidationToErrorInfo } from './utils/validationAdapter';
 
 // Constants
 import {
@@ -71,6 +72,7 @@ const HTMLEditor = ({
   onTagSelect = null,
   onContextChange = null,
   globalActions = null, // Redux actions for API calls
+  onValidationChange = null, // Callback to propagate validation errors to parent
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -275,7 +277,9 @@ const HTMLEditor = ({
         editor.insertText(label, cursor);
 
         // Focus the editor if focus method is available
-        editor?.focus?.();
+        if (editor && typeof editor.focus === 'function') {
+          editor.focus();
+        }
 
         // Show success notification
         CapNotification.success({
@@ -305,13 +309,15 @@ const HTMLEditor = ({
   const handleSave = useCallback(() => {
     try {
       const { html, css, javascript } = content?.content || {};
-      const currentContent = { html, css, javascript };
+      const contentToSave = { html, css, javascript };
 
       if (onSave) {
-        onSave(currentContent);
+        onSave(contentToSave);
       }
 
-      markAsSaved?.();
+      if (markAsSaved) {
+        markAsSaved();
+      }
 
       CapNotification.success({
         message: intl.formatMessage(messages.contentSaved),
@@ -337,13 +343,15 @@ const HTMLEditor = ({
         // Access the CodeMirror view through the exposed ref methods
         if (editorInstance?.navigateToLine) {
           editorInstance.navigateToLine(line, column);
-        } else {
-          editorInstance?.focus?.();
+        } else if (editorInstance && typeof editorInstance.focus === 'function') {
+          editorInstance.focus();
           // Fallback: just focus the editor if navigation isn't available
         }
       } catch (err) {
         // Fallback: just focus the editor
-        editorInstance?.focus?.();
+        if (editorInstance && typeof editorInstance.focus === 'function') {
+          editorInstance.focus();
+        }
       }
     }
   }, [getActiveEditorRef]);
@@ -357,6 +365,63 @@ const HTMLEditor = ({
     setIsFullscreenModalOpen(false);
   }, []);
 
+  // Propagate validation errors to parent component
+  // Use refs to track previous values and prevent infinite loops
+  const lastValidationErrorsRef = useRef(null);
+  const lastActiveDeviceRef = useRef(variant === HTML_EDITOR_VARIANTS.INAPP ? content?.activeDevice : null);
+
+  useEffect(() => {
+    if (onValidationChange && validation && !validation.isValidating) {
+      const errorData = transformValidationToErrorInfo(validation, variant);
+
+      // Create error messages object
+      let errorMessages;
+      if (variant === HTML_EDITOR_VARIANTS.INAPP && content?.activeDevice) {
+        const currentActiveDevice = content.activeDevice;
+        const deviceKey = currentActiveDevice === 'android' ? 'ANDROID' : 'IOS';
+        errorMessages = {
+          STANDARD_ERROR_MSG: {
+            [deviceKey]: errorData.errorMessages.STANDARD_ERROR_MSG || [],
+            ANDROID: currentActiveDevice === 'android' ? (errorData.errorMessages.STANDARD_ERROR_MSG || []) : [],
+            IOS: currentActiveDevice === 'ios' ? (errorData.errorMessages.STANDARD_ERROR_MSG || []) : [],
+            GENERIC: [],
+          },
+          LIQUID_ERROR_MSG: {
+            [deviceKey]: errorData.errorMessages.LIQUID_ERROR_MSG || [],
+            ANDROID: currentActiveDevice === 'android' ? (errorData.errorMessages.LIQUID_ERROR_MSG || []) : [],
+            IOS: currentActiveDevice === 'ios' ? (errorData.errorMessages.LIQUID_ERROR_MSG || []) : [],
+            GENERIC: [],
+          },
+        };
+      } else {
+        // For Email variant or when no active device, use generic format
+        errorMessages = {
+          STANDARD_ERROR_MSG: {
+            ANDROID: [],
+            IOS: [],
+            GENERIC: errorData.errorMessages.STANDARD_ERROR_MSG || [],
+          },
+          LIQUID_ERROR_MSG: {
+            ANDROID: [],
+            IOS: [],
+            GENERIC: errorData.errorMessages.LIQUID_ERROR_MSG || [],
+          },
+        };
+      }
+
+      // Only call onValidationChange if errors actually changed
+      const errorsString = JSON.stringify(errorMessages);
+      const deviceForComparison = variant === HTML_EDITOR_VARIANTS.INAPP ? content?.activeDevice : null;
+      const deviceChanged = lastActiveDeviceRef.current !== deviceForComparison;
+
+      if (lastValidationErrorsRef.current !== errorsString || deviceChanged) {
+        lastValidationErrorsRef.current = errorsString;
+        lastActiveDeviceRef.current = deviceForComparison;
+        onValidationChange(errorMessages);
+      }
+    }
+  }, [validation?.summary?.totalErrors, validation?.summary?.totalWarnings, validation?.isValidating, variant, content?.activeDevice, onValidationChange]);
+
   // Context value for providers
   const contextValue = useMemo(() => ({
     variant,
@@ -566,6 +631,7 @@ HTMLEditor.propTypes = {
   onTagSelect: PropTypes.func,
   onContextChange: PropTypes.func, // Deprecated: use globalActions instead
   globalActions: PropTypes.object, // Redux actions for API calls
+  onValidationChange: PropTypes.func, // Callback to propagate validation errors to parent
 };
 
 HTMLEditor.defaultProps = {
@@ -587,6 +653,7 @@ HTMLEditor.defaultProps = {
   onTagSelect: null,
   onContextChange: null,
   globalActions: null,
+  onValidationChange: null,
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref

package/v2Components/HtmlEditor/hooks/useInAppContent.js

@@ -54,16 +54,31 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   const { ANDROID, IOS } = DEVICE_TYPES;
 
   // Device-specific content state with optional chaining
+  // FIX: If iOS content is empty but Android has content, use Android content for iOS
+  // This handles the case where "keepContentSame" was used during save
+  const initialAndroidContent = initialContent?.[ANDROID] || DEFAULT_INAPP_CONTENT[ANDROID];
+  const initialIosContent = initialContent?.[IOS] || DEFAULT_INAPP_CONTENT[IOS];
+  const iosContentToUse = (!initialIosContent || initialIosContent.trim() === '') && initialAndroidContent && initialAndroidContent.trim() !== ''
+    ? initialAndroidContent
+    : initialIosContent;
+
+  // Check if both devices have the same content initially
+  const initialHasSameContent = initialAndroidContent && iosContentToUse
+    && initialAndroidContent.trim() !== ''
+    && iosContentToUse.trim() !== ''
+    && initialAndroidContent.trim() === iosContentToUse.trim();
+
   const [deviceContent, setDeviceContent] = useState(() => ({
-    [ANDROID]: initialContent?.[ANDROID] || DEFAULT_INAPP_CONTENT[ANDROID],
-    [IOS]: initialContent?.[IOS] || DEFAULT_INAPP_CONTENT[IOS],
+    [ANDROID]: initialAndroidContent,
+    [IOS]: iosContentToUse,
   }));
 
   // Current active device
   const [activeDevice, setActiveDevice] = useState(ANDROID);
 
   // Content sync state
-  const [keepContentSame, setKeepContentSame] = useState(false);
+  // FIX: Initialize keepContentSame to true if both devices have the same content initially
+  const [keepContentSame, setKeepContentSame] = useState(initialHasSameContent);
 
   // Dirty state tracking
   const [isDirty, setIsDirty] = useState(false);
@@ -105,6 +120,13 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       && (!previousContentRef.current.ios || previousContentRef.current.ios.trim() === '');
     const isTransitioningToContent = wasEmpty && hasMeaningfulContent;
 
+    // FIX: Check if both devices have the same content (indicates "keepContentSame" was used)
+    // If they do, automatically enable content sync
+    const hasSameContent = newAndroidContent && newIosContent
+      && newAndroidContent.trim() !== ''
+      && newIosContent.trim() !== ''
+      && newAndroidContent.trim() === newIosContent.trim();
+
     // Only update if:
     // 1. We haven't loaded initial content yet (first load), OR
     // 2. We're transitioning from empty to meaningful content (library mode data fetch)
@@ -131,6 +153,24 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
           return updated ? updatedContent : prev;
         });
 
+        // FIX: If both devices have the same content, enable content sync
+        // This ensures the "keepContentSame" checkbox is checked when loading templates
+        // that were saved with the same content for both devices
+        // Also check if iOS is empty but Android has content (same content scenario)
+        const iosEmptyButAndroidHasContent = (!newIosContent || newIosContent.trim() === '')
+          && newAndroidContent && newAndroidContent.trim() !== '';
+
+        if ((hasSameContent || iosEmptyButAndroidHasContent) && !keepContentSame) {
+          setKeepContentSame(true);
+          // If iOS is empty but Android has content, sync iOS to Android
+          if (iosEmptyButAndroidHasContent) {
+            setDeviceContent((prev) => ({
+              ...prev,
+              [IOS]: newAndroidContent,
+            }));
+          }
+        }
+
         // Update previous content ref
         previousContentRef.current = {
           android: newAndroidContent || '',
@@ -138,7 +178,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
         };
       }
     }
-  }, [initialContent, ANDROID, IOS]);
+  }, [initialContent, ANDROID, IOS, keepContentSame]);
 
   // Get current active content
   const currentContent = useMemo(() => deviceContent?.[activeDevice] || '', [deviceContent, activeDevice]);

package/v2Containers/InApp/index.js

@@ -208,8 +208,14 @@ export const InApp = (props) => {
       }
     }
     //cleanup code
+    // FIX ISSUE #4: Reset edit flow state when component unmounts or id changes
+    // This ensures templates can be edited multiple times
     return () => {
       actions.resetEditTemplate();
+      setEditFlow(false);
+      // Reset content states to allow fresh edit
+      setHtmlContentAndroid('');
+      setHtmlContentIos('');
     };
   }, [paramObj.id]);
 
@@ -262,7 +268,10 @@ export const InApp = (props) => {
       setEditFlow(true);
       setTempName(name);
       setTemplateDate(createdAt);
-      setTemplateLayoutType(editContent?.ANDROID?.bodyType);
+      // FIX ISSUE #3: When changing layout type, check both Android and iOS bodyType
+      // Prefer Android bodyType, but fall back to iOS if Android is not available
+      const layoutType = editContent?.ANDROID?.bodyType || editContent?.IOS?.bodyType;
+      setTemplateLayoutType(layoutType);
       // Call showTemplateName callback when in edit mode + full mode to show template name header
       if (showTemplateName && name) {
         showTemplateName({
@@ -288,7 +297,7 @@ export const InApp = (props) => {
           title: androidTitle = '',
           message: androidMessage = '',
           type: androidType = '',
-          ctas: androidCta = {},
+          ctas: androidCta = null,
           expandableDetails: androidExpandableDetails = {},
         } = androidContent || {};
         const {
@@ -315,6 +324,9 @@ export const InApp = (props) => {
         // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
         if (androidIsHTML) {
           setHtmlContentAndroid(androidMessage);
+          // FIX: Also initialize iOS content with Android content if iOS is empty
+          // This handles the case where "keepContentSame" was used during save
+          // We'll check iOS content below, but pre-initialize here to ensure it's set
         }
         setTemplateMediaType(
           androidIsHTML ? INAPP_MEDIA_TYPES.HTML
@@ -323,59 +335,82 @@ export const InApp = (props) => {
               : INAPP_MEDIA_TYPES.IMAGE
         );
         setInAppImageSrcAndroid(androidImage);
-        setDeepLinkValueAndroid(androidCta[0]?.actionLink || '');
+        setDeepLinkValueAndroid(androidCta && Array.isArray(androidCta) && androidCta[0]?.actionLink ? androidCta[0].actionLink : '');
         setAddActionLinkAndroid(!isEmpty(androidCta) && true);
         setButtonTypeAndroid(
           androidCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
         );
-        if (androidCtaLength > 0) {
+        if (androidCtaLength > 0 && androidCtas && Array.isArray(androidCtas)) {
           setCtaDataAndroid(getCtaObject(androidCtas));
         }
       }
       const iosContent = editContent?.IOS;
-      if (!isEmpty(iosContent)) {
-        const {
-          title: iosTitle = '',
-          message: iosMessage = '',
-          type: iosType = '',
-          ctas: iosCta = {},
-          expandableDetails: iosExpandableDetails = {},
-        } = iosContent || {};
-        const {
-          style: iosStyle,
-          image: iosImage,
-          ctas: iosCtas,
-        } = iosExpandableDetails || {};
-        const iosCtaLength = iosCtas?.length;
-
-        // Check if this is an HTML template (if Android wasn't HTML, check iOS)
-        // Note: androidIsHTML is in the outer scope from the Android content check above
-        if (!androidIsHTML) {
-          // Check if this is a Bee editor template
-          const isBEEeditor = get(iosContent, 'isBEEeditor');
-          const isBeeFreeTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template';
-          // Check if this is an HTML editor template (identified by special title)
-          const isHTMLEditorTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'html editor template';
-          // Check if this is an HTML template
-          // Prioritize HTML editor template title, then check type/style
-          // But exclude if it's a Bee editor template
-          const iosIsHTML = isHTMLEditorTemplate || ((iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML)
-            && !isBEEeditor
-            && !isBeeFreeTemplate);
-          setIsHTMLTemplate(iosIsHTML);
-          // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
-          if (iosIsHTML) {
-            setHtmlContentIos(iosMessage);
-          }
-        } else {
-          // If Android is HTML, also initialize iOS HTML content if available
-          if (androidIsHTML) {
-            setHtmlContentIos(iosMessage);
-          }
+      // FIX ISSUE #3: Check for iOS content with deviceType === IOS || IOS_CAPITAL
+      const iosDeviceType = get(iosContent, 'deviceType');
+      const isIosDevice = iosDeviceType === IOS || iosDeviceType === IOS_CAPITAL;
+      
+      // FIX: Always process iOS content initialization, even if iosContent is empty
+      // This handles the case where "keepContentSame" was used and iOS content might be empty
+      const {
+        title: iosTitle = '',
+        message: iosMessage = '',
+        type: iosType = '',
+        ctas: iosCta = null,
+        expandableDetails: iosExpandableDetails = {},
+      } = iosContent || {};
+      const {
+        style: iosStyle,
+        image: iosImage,
+        ctas: iosCtas,
+      } = iosExpandableDetails || {};
+      const iosCtaLength = iosCtas?.length;
+
+      // FIX: If iOS content is empty but Android has content, use Android content for iOS
+      // This handles the case where "keepContentSame" was used during save
+      const androidMsg = androidContent?.message || '';
+      const iosMessageToUse = (iosMessage && iosMessage.trim() !== '') ? iosMessage : androidMsg;
+
+      // Check if this is an HTML template (if Android wasn't HTML, check iOS)
+      // Note: androidIsHTML is in the outer scope from the Android content check above
+      if (!androidIsHTML) {
+        // Check if this is a Bee editor template
+        const isBEEeditor = get(iosContent, 'isBEEeditor');
+        const isBeeFreeTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template';
+        // Check if this is an HTML editor template (identified by special title)
+        const isHTMLEditorTemplate = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'html editor template';
+        // Check if this is an HTML template
+        // Prioritize HTML editor template title, then check type/style
+        // But exclude if it's a Bee editor template
+        const iosIsHTML = isHTMLEditorTemplate || ((iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML)
+          && !isBEEeditor
+          && !isBeeFreeTemplate);
+        setIsHTMLTemplate(iosIsHTML);
+        // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
+        if (iosIsHTML) {
+          setHtmlContentIos(iosMessageToUse);
         }
-
+      } else {
+        // If Android is HTML, also initialize iOS HTML content
+        if (androidIsHTML) {
+          // Use iOS message if available, otherwise use Android message
+          setHtmlContentIos(iosMessageToUse);
+        }
+      }
+      
+      // FIX: Also handle the case where iOS content doesn't exist in backend but Android is HTML
+      // This ensures iOS content is set even when iOS content object is empty
+      // This is critical for "keepContentSame" scenario where iOS might be empty in backend
+      if (androidIsHTML && androidContent && (!iosContent || isEmpty(iosContent) || !iosMessage || iosMessage.trim() === '')) {
+        const androidMsgForIos = androidContent?.message || '';
+        if (androidMsgForIos && androidMsgForIos.trim() !== '') {
+          setHtmlContentIos(androidMsgForIos);
+        }
+      }
+      
+      // Only set other iOS properties if iOS content exists or is a valid iOS device
+      if (!isEmpty(iosContent) || isIosDevice) {
         setTitleIos(iosTitle);
-        setTemplateMessageIos(iosMessage);
+        setTemplateMessageIos(iosMessageToUse);
         // Update templateMediaType if iOS is HTML and Android wasn't
         if (!androidIsHTML) {
           // Check if this is a Bee editor template
@@ -397,8 +432,8 @@ export const InApp = (props) => {
         setInAppImageSrcIos(iosImage);
         setButtonTypeIos(iosCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
         setAddActionLinkIos(!isEmpty(iosCta) && true);
-        setDeepLinkValueIos(iosCta[0]?.actionLink || '');
-        if (iosCtaLength > 0) {
+        setDeepLinkValueIos(iosCta && Array.isArray(iosCta) && iosCta[0]?.actionLink ? iosCta[0].actionLink : '');
+        if (iosCtaLength > 0 && iosCtas && Array.isArray(iosCtas)) {
           setCtaDataIos(getCtaObject(iosCtas));
         }
       }
@@ -501,8 +536,12 @@ export const InApp = (props) => {
   // tag Code end
 
   const onTemplateLayoutTypeChange = ({ target: { value } }) => {
+    // FIX ISSUE #3: When changing layout type, preserve iOS content
     // Update layout type and force HTMLEditor to remount with latest content
     // Increment version to force remount - this ensures editor displays current content
+    // Store current content in refs before remounting to preserve it
+    htmlContentAndroidRef.current = htmlContentAndroid;
+    htmlContentIosRef.current = htmlContentIos;
     setTemplateLayoutType(value);
     setHtmlEditorContentVersion(prev => prev + 1);
   };
@@ -626,8 +665,8 @@ export const InApp = (props) => {
       const iosMediaValid = !iosSupported || (templateMediaType === INAPP_MEDIA_TYPES.TEXT || inAppImageSrcIos !== '');
 
       // Check CTA requirements
-      const androidCtaValid = !isBtnTypeCtaAndroid || (ctaDataAndroid[0]?.isSaved);
-      const iosCtaValid = !isBtnTypeCTaIos || (ctaDataIos[0]?.isSaved);
+      const androidCtaValid = !isBtnTypeCtaAndroid || (ctaDataAndroid && Array.isArray(ctaDataAndroid) && ctaDataAndroid[0]?.isSaved);
+      const iosCtaValid = !isBtnTypeCTaIos || (ctaDataIos && Array.isArray(ctaDataIos) && ctaDataIos[0]?.isSaved);
 
       // Check action link requirements
       const androidActionLinkValid = !addActionLinkAndroid || deepLinkValueAndroid;
@@ -687,7 +726,7 @@ export const InApp = (props) => {
     }
     //cta
     if (isBtnTypeCtaAndroid) {
-      if (ctaDataAndroid[0]?.isSaved) {
+      if (ctaDataAndroid && Array.isArray(ctaDataAndroid) && ctaDataAndroid[0]?.isSaved) {
         //if button type is cta and 1st button is saved
         return false;
       }
@@ -695,7 +734,7 @@ export const InApp = (props) => {
       return true;
     }
     if (isBtnTypeCTaIos) {
-      if (ctaDataIos[0]?.isSaved) {
+      if (ctaDataIos && Array.isArray(ctaDataIos) && ctaDataIos[0]?.isSaved) {
         //if button type is cta and 1st button is saved
         return false;
       }
@@ -714,14 +753,20 @@ export const InApp = (props) => {
     return false;
   };
 
-  const getCtaPayload = (type) => (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
-    const { text, urlType, url } = cta;
-    return {
-      type: urlType,
-      actionText: text,
-      actionLink: url,
-    };
-  });
+  const getCtaPayload = (type) => {
+    const ctaData = type === ANDROID ? ctaDataAndroid : ctaDataIos;
+    if (!ctaData || !Array.isArray(ctaData)) {
+      return [];
+    }
+    return ctaData.map((cta) => {
+      const { text, urlType, url } = cta;
+      return {
+        type: urlType,
+        actionText: text,
+        actionLink: url,
+      };
+    });
+  };
 
   const createPayload = () => {
     let androidMediaParams = {};
@@ -765,11 +810,21 @@ export const InApp = (props) => {
 
     // Check account-level device support
     const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-    const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
+    const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL || get(editContent, 'IOS.deviceType') === IOS;
 
     // Check if devices have content (for HTML Editor)
-    const hasAndroidContent = htmlContentAndroid && htmlContentAndroid?.trim() !== '';
-    const hasIosContent = htmlContentIos && htmlContentIos?.trim() !== '';
+    // If Android has content but iOS doesn't, and both devices are supported, check if content should be synced
+    // This handles the case where "keepContentSame" checkbox was used during creation
+    let hasAndroidContent = htmlContentAndroid && htmlContentAndroid?.trim() !== '';
+    let hasIosContent = htmlContentIos && htmlContentIos?.trim() !== '';
+
+    // FIX ISSUE #2: If Android has content but iOS doesn't, and both are supported,
+    // check if we should copy Android content to iOS (for "same content" scenario)
+    if (hasAndroidContent && !hasIosContent && androidSupported && iosSupported && isHTMLTemplate) {
+      // In create mode, if Android has content and iOS doesn't, use Android content for iOS
+      // This handles the "keepContentSame" checkbox scenario
+      hasIosContent = true; // Mark as having content so iOS is included in payload
+    }
 
     // For HTML Editor, check if device has content and is supported
     // For legacy editor, use isDisableDone check
@@ -802,10 +857,30 @@ export const InApp = (props) => {
     } : {};
 
     // Use HTML content if HTMLEditor is enabled and it's an HTML template, otherwise use regular message
-    const iosMessage = isHTMLTemplate && htmlContentIos
+    // FIX ISSUE #2: If iOS content is empty but Android has content (same content scenario), use Android content
+    let iosMessage = isHTMLTemplate && htmlContentIos
       ? htmlContentIos
       : templateMessageIos;
 
+    // FIX: If both devices have the same content (keepContentSame scenario), ensure iOS uses Android content
+    // This handles the case where keepContentSame is enabled and both should have the same content
+    const bothHaveSameContent = isHTMLTemplate && androidMessage && iosMessage
+      && androidMessage.trim() === iosMessage.trim()
+      && androidMessage.trim() !== '';
+    
+    // If iOS message is empty but Android has content and both devices are supported, use Android content
+    // OR if both have the same content (keepContentSame), ensure they're both set correctly
+    if (isHTMLTemplate && androidSupported && iosSupported) {
+      if ((!iosMessage || iosMessage.trim() === '') && androidMessage && androidMessage.trim() !== '') {
+        iosMessage = androidMessage;
+        hasIosContent = true; // Mark as having content
+      } else if (bothHaveSameContent) {
+        // Ensure both are using the same content (in case of any discrepancies)
+        iosMessage = androidMessage;
+        hasIosContent = true;
+      }
+    }
+
     // Determine type and style for iOS
     const iosType = isHTMLTemplate ? INAPP_MEDIA_TYPES.HTML : templateMediaType;
     const iosExpandableStyle = isHTMLTemplate ? BIG_HTML : BIG_TEXT;
@@ -909,11 +984,39 @@ export const InApp = (props) => {
     );
   };
 
+  // Handle validation errors from HTMLEditor
+  const handleHtmlValidationErrors = useCallback((validationErrors) => {
+    // Update errorMessage state with validation errors from HTMLEditor
+    setErrorMessage((prev) => {
+      // Merge validation errors, preserving any existing errors from other sources
+      const newErrorState = {
+        STANDARD_ERROR_MSG: {
+          ANDROID: validationErrors.STANDARD_ERROR_MSG?.ANDROID || prev.STANDARD_ERROR_MSG?.ANDROID || [],
+          IOS: validationErrors.STANDARD_ERROR_MSG?.IOS || prev.STANDARD_ERROR_MSG?.IOS || [],
+          GENERIC: validationErrors.STANDARD_ERROR_MSG?.GENERIC || prev.STANDARD_ERROR_MSG?.GENERIC || [],
+        },
+        LIQUID_ERROR_MSG: {
+          ANDROID: validationErrors.LIQUID_ERROR_MSG?.ANDROID || prev.LIQUID_ERROR_MSG?.ANDROID || [],
+          IOS: validationErrors.LIQUID_ERROR_MSG?.IOS || prev.LIQUID_ERROR_MSG?.IOS || [],
+          GENERIC: validationErrors.LIQUID_ERROR_MSG?.GENERIC || prev.LIQUID_ERROR_MSG?.GENERIC || [],
+        },
+      };
+      return newErrorState;
+    });
+  }, []);
+
   // Handle HTML content changes from HTMLEditor
   const handleHtmlContentChange = useCallback((deviceContent, changedDevice) => {
     // The onChange callback from useInAppContent passes the full deviceContent object
-    // But we only want to update the state for the device that actually changed
-    // Use the second parameter (changedDevice) if provided, otherwise update both
+    // When keepContentSame is enabled, both android and ios will have the same content
+    // We need to detect this and update both states accordingly
+
+    // FIX: Check if both devices have the same content (indicates keepContentSame is enabled)
+    // When keepContentSame is enabled, useInAppContent passes both android and ios with the same value
+    const hasBothDevices = deviceContent?.android !== undefined && deviceContent?.ios !== undefined;
+    const androidContent = typeof deviceContent?.android === 'string' ? deviceContent.android : '';
+    const iosContent = typeof deviceContent?.ios === 'string' ? deviceContent.ios : '';
+    const isSyncMode = hasBothDevices && androidContent === iosContent;
 
     // Clear validation errors when content changes (similar to Bee Editor)
     // This ensures Done button re-enables after user fixes errors
@@ -932,8 +1035,18 @@ export const InApp = (props) => {
       }));
     }
 
-    if (changedDevice) {
-      // Only update the device that actually changed
+    // FIX: If sync mode (keepContentSame is enabled), update both devices
+    if (isSyncMode) {
+      // Update both Android and iOS with the same content
+      // Use the Android content for both to ensure they're exactly the same
+      const syncContent = androidContent || '';
+      setHtmlContentAndroid(syncContent);
+      setHtmlContentIos(syncContent);
+      // Also update refs to ensure latest values are available immediately
+      htmlContentAndroidRef.current = syncContent;
+      htmlContentIosRef.current = syncContent;
+    } else if (changedDevice) {
+      // Only update the device that actually changed (when sync is disabled)
       if (changedDevice.toUpperCase() === ANDROID && deviceContent?.android !== undefined) {
         setHtmlContentAndroid(deviceContent.android || '');
       } else if (changedDevice.toUpperCase() === IOS_CAPITAL && deviceContent?.ios !== undefined) {
@@ -955,16 +1068,35 @@ export const InApp = (props) => {
         });
       }
     }
-  }, [ANDROID, IOS, setErrorMessage]);
+  }, [ANDROID, IOS_CAPITAL, setErrorMessage]);
 
   // Handle HTML save from HTMLEditor
   const handleHtmlSave = useCallback((deviceContent) => {
-    // Update state for both devices if present in the callback
-    if (deviceContent?.android !== undefined) {
-      setHtmlContentAndroid(deviceContent.android || '');
-    }
-    if (deviceContent?.ios !== undefined) {
-      setHtmlContentIos(deviceContent.ios || '');
+    // FIX: Check if both devices have the same content (indicates keepContentSame is enabled)
+    // When keepContentSame is enabled, useInAppContent passes both android and ios with the same value
+    const hasBothDevices = deviceContent?.android !== undefined && deviceContent?.ios !== undefined;
+    const androidContent = typeof deviceContent?.android === 'string' ? deviceContent.android : '';
+    const iosContent = typeof deviceContent?.ios === 'string' ? deviceContent.ios : '';
+    const isSyncMode = hasBothDevices && androidContent === iosContent;
+
+    // FIX: If sync mode (keepContentSame is enabled), update both devices
+    if (isSyncMode) {
+      // Update both Android and iOS with the same content
+      // Use the Android content for both to ensure they're exactly the same
+      const syncContent = androidContent || '';
+      setHtmlContentAndroid(syncContent);
+      setHtmlContentIos(syncContent);
+      // Also update refs to ensure latest values are available immediately
+      htmlContentAndroidRef.current = syncContent;
+      htmlContentIosRef.current = syncContent;
+    } else {
+      // Update state for both devices if present in the callback
+      if (deviceContent?.android !== undefined) {
+        setHtmlContentAndroid(deviceContent.android || '');
+      }
+      if (deviceContent?.ios !== undefined) {
+        setHtmlContentIos(deviceContent.ios || '');
+      }
     }
     // Auto-save can trigger this, but we don't want to submit automatically
     // The user will click the Create/Update button to submit
@@ -1211,34 +1343,57 @@ export const InApp = (props) => {
               />
             </>
           )}
-          {shouldUseHTMLEditor ? (
-            <HTMLEditor
-              key={`inapp-html-editor-v${htmlEditorContentVersion}`}
-              variant={HTML_EDITOR_VARIANTS.INAPP}
-              layoutType={templateLayoutType}
-              initialContent={{
-                android: htmlContentAndroidRef.current || htmlContentAndroid || templateMessageAndroid || '',
-                ios: htmlContentIosRef.current || htmlContentIos || templateMessageIos || '',
-              }}
-              onContentChange={handleHtmlContentChange}
-              onSave={handleHtmlSave}
-              tags={tags}
-              injectedTags={injectedTags}
-              location={location}
-              selectedOfferDetails={selectedOfferDetails}
-              onTagSelect={() => {
-                // Tag insertion is handled by HTMLEditor's CodeEditorPane at cursor position
-                // Content updates will be propagated via onContentChange callback
-              }}
-              // Don't pass globalActions to prevent duplicate API calls
-              // HTMLEditor will use onContextChange instead
-              onContextChange={handleOnTagsContextChange}
-              // Pass validation errors to HTMLEditor for display
-              errors={errorMessage}
-              data-test="inapp-html-editor"
-              style={{ width: '138%' }}
-            />
-          ) : (
+          {shouldUseHTMLEditor ? (() => {
+            // FIX: When loading edit content, check if Android and iOS have the same content
+            // If they do, ensure both are initialized with the same content
+            const androidContentValue = htmlContentAndroidRef.current || htmlContentAndroid || templateMessageAndroid || '';
+            const iosContentValue = htmlContentIosRef.current || htmlContentIos || templateMessageIos || '';
+
+            // Check if both devices have the same content (indicates "keepContentSame" was used)
+            // Also check if iOS is empty but Android has content (same content scenario)
+            const hasSameContent = androidContentValue && iosContentValue && androidContentValue.trim() === iosContentValue.trim();
+            const iosEmptyButAndroidHasContent = (!iosContentValue || iosContentValue.trim() === '') && androidContentValue && androidContentValue.trim() !== '';
+
+            // If content is the same OR iOS is empty but Android has content, ensure both devices get the same content
+            // This ensures the "keepContentSame" checkbox state is correctly reflected
+            const initialContentForEditor = (hasSameContent || iosEmptyButAndroidHasContent)
+              ? {
+                android: androidContentValue,
+                ios: androidContentValue, // Use Android content for both
+              }
+              : {
+                android: androidContentValue,
+                ios: iosContentValue,
+              };
+
+            return (
+              <HTMLEditor
+                key={`inapp-html-editor-v${htmlEditorContentVersion}`}
+                variant={HTML_EDITOR_VARIANTS.INAPP}
+                layoutType={templateLayoutType}
+                initialContent={initialContentForEditor}
+                onContentChange={handleHtmlContentChange}
+                onSave={handleHtmlSave}
+                tags={tags}
+                injectedTags={injectedTags}
+                location={location}
+                selectedOfferDetails={selectedOfferDetails}
+                onTagSelect={() => {
+                  // Tag insertion is handled by HTMLEditor's CodeEditorPane at cursor position
+                  // Content updates will be propagated via onContentChange callback
+                }}
+                // Don't pass globalActions to prevent duplicate API calls
+                // HTMLEditor will use onContextChange instead
+                onContextChange={handleOnTagsContextChange}
+                // Pass validation errors to HTMLEditor for display
+                errors={errorMessage}
+                // Pass callback to receive validation errors from HTMLEditor
+                onValidationChange={handleHtmlValidationErrors}
+                data-test="inapp-html-editor"
+                style={{ width: '138%' }}
+              />
+            );
+          })() : (
             <InappAdvanced
               getFormData={getFormData}
               setIsLoadingContent={setIsLoadingContent}

package/v2Containers/InappAdvance/index.js

@@ -143,6 +143,17 @@ export const InappAdvanced = (props) => {
     } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
 
+    // LIBRARY MODE FIX: Backend stores bodyType as 'POPUP' but UI expects 'MODAL'
+    // Convert back to MODAL for display (same as HTML Editor)
+    if (!isFullMode && editContent) {
+      if (editContent.ANDROID?.bodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
+        editContent.ANDROID.bodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
+      }
+      if (editContent.IOS?.bodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
+        editContent.IOS.bodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
+      }
+    }
+
     if (editContent && !isEmpty(editContent)) {
       setEditFlow(true);
       if (setTemplateName && name) {
@@ -171,7 +182,12 @@ export const InappAdvanced = (props) => {
         });
       }
       // Get layout type from Android or iOS, whichever is available
-      const layoutType = editContent?.ANDROID?.bodyType || editContent?.IOS?.bodyType;
+      // FIX: Convert POPUP to MODAL for UI consistency (backend stores POPUP, UI uses MODAL)
+      let layoutType = editContent?.ANDROID?.bodyType || editContent?.IOS?.bodyType;
+      // Map POPUP to MODAL so it's treated the same as HTML Editor templates
+      if (layoutType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
+        layoutType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
+      }
       if (layoutType) {
         setTemplateLayoutType(layoutType);
       }
@@ -682,21 +698,80 @@ export const InappAdvanced = (props) => {
   // Check if BEE editor has content for a device
   const hasBeeContent = (device) => {
     if (device === ANDROID) {
-      // Check state values first (most up-to-date), then fall back to refs
-      const stateHtmlValue = androidBeeHtml?.value || (typeof androidBeeHtml === 'string' ? androidBeeHtml : '');
-      const htmlContent = stateHtmlValue || latestAndroidHtmlRef.current || '';
+      // Check JSON content first - this is updated immediately when content is added
       const jsonContent = androidBeeJson && androidBeeJson !== '{}';
-      // Ensure htmlContent is a string before calling trim
-      const htmlContentStr = typeof htmlContent === 'string' ? htmlContent : '';
-      return htmlContentStr && htmlContentStr.trim() !== '' && jsonContent;
+
+      // If JSON is empty, there's no content
+      if (!jsonContent) {
+        return false;
+      }
+
+      // Check if JSON has actual content (not just empty structure)
+      // Parse JSON to check if it has meaningful content
+      try {
+        const parsedJson = typeof androidBeeJson === 'string' ? JSON.parse(androidBeeJson) : androidBeeJson;
+        // Check if JSON has rows with content (Bee editor structure)
+        const hasRows = parsedJson?.page?.rows && Array.isArray(parsedJson.page.rows) && parsedJson.page.rows.length > 0;
+        if (!hasRows) {
+          return false;
+        }
+
+        // Check if rows have actual modules/content
+        const hasContent = parsedJson.page.rows.some((row) => {
+          const columns = row?.columns || [];
+          return columns.some((col) => {
+            const modules = col?.modules || [];
+            return modules.length > 0;
+          });
+        });
+
+        // If JSON has content, return true (HTML might not be ready yet, but that's okay)
+        // The HTML will be generated when saving, but we should enable the button as soon as JSON has content
+        return hasContent;
+      } catch (e) {
+        // If JSON parsing fails, fall back to checking HTML
+        const stateHtmlValue = androidBeeHtml?.value || (typeof androidBeeHtml === 'string' ? androidBeeHtml : '');
+        const htmlContent = stateHtmlValue || latestAndroidHtmlRef.current || '';
+        const htmlContentStr = typeof htmlContent === 'string' ? htmlContent : '';
+        return htmlContentStr && htmlContentStr.trim() !== '';
+      }
     }
-    // Check state values first (most up-to-date), then fall back to refs
-    const stateHtmlValue = iosBeeHtml?.value || (typeof iosBeeHtml === 'string' ? iosBeeHtml : '');
-    const htmlContent = stateHtmlValue || latestIosHtmlRef.current || '';
+
+    // iOS device - same logic as Android
     const jsonContent = iosBeeJson && iosBeeJson !== '{}';
-    // Ensure htmlContent is a string before calling trim
-    const htmlContentStr = typeof htmlContent === 'string' ? htmlContent : '';
-    return htmlContentStr && htmlContentStr.trim() !== '' && jsonContent;
+
+    // If JSON is empty, there's no content
+    if (!jsonContent) {
+      return false;
+    }
+
+    // Check if JSON has actual content (not just empty structure)
+    try {
+      const parsedJson = typeof iosBeeJson === 'string' ? JSON.parse(iosBeeJson) : iosBeeJson;
+      // Check if JSON has rows with content (Bee editor structure)
+      const hasRows = parsedJson?.page?.rows && Array.isArray(parsedJson.page.rows) && parsedJson.page.rows.length > 0;
+      if (!hasRows) {
+        return false;
+      }
+
+      // Check if rows have actual modules/content
+      const hasContent = parsedJson.page.rows.some((row) => {
+        const columns = row?.columns || [];
+        return columns.some((col) => {
+          const modules = col?.modules || [];
+          return modules.length > 0;
+        });
+      });
+
+      // If JSON has content, return true (HTML might not be ready yet, but that's okay)
+      return hasContent;
+    } catch (e) {
+      // If JSON parsing fails, fall back to checking HTML
+      const stateHtmlValue = iosBeeHtml?.value || (typeof iosBeeHtml === 'string' ? iosBeeHtml : '');
+      const htmlContent = stateHtmlValue || latestIosHtmlRef.current || '';
+      const htmlContentStr = typeof htmlContent === 'string' ? htmlContent : '';
+      return htmlContentStr && htmlContentStr.trim() !== '';
+    }
   };
 
   // Check if Done button should be disabled
@@ -709,11 +784,9 @@ export const InappAdvanced = (props) => {
     // Get account-level device support
     const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
     const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
     // Check if devices have content
     const hasAndroidContent = hasBeeContent(ANDROID);
     const hasIosContent = hasBeeContent(IOS);
-
     // If no tags are available (e.g., in tests), allow submission even without content
     // This is to support test scenarios where content validation might not be fully set up
     const hasTags = tags && tags.length > 0;

package/v2Containers/Templates/index.js

@@ -1169,7 +1169,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return templates.filter((template) => {
       const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
-      const inappBodyType = androidBodyType || iosBodyType;
+      let inappBodyType = androidBodyType || iosBodyType;
+      // FIX: Map POPUP to MODAL for filter consistency (backend stores POPUP, UI uses MODAL)
+      if (inappBodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
+        inappBodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
+      }
       return inappBodyType === selectedInAppLayout;
     });
   }
@@ -1275,7 +1279,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
-      const inappBodyType = androidBodyType || iosBodyType;
+      let inappBodyType = androidBodyType || iosBodyType;
+      // FIX: Map POPUP to MODAL for display consistency (backend stores POPUP, UI shows MODAL/Popup)
+      // This ensures Bee Editor templates show the same as HTML Editor templates
+      if (inappBodyType === INAPP_MESSAGE_LAYOUT_TYPES.POPUP) {
+        inappBodyType = INAPP_MESSAGE_LAYOUT_TYPES.MODAL;
+      }
       const isZaloPreviewLoading = previewTemplateId === template?._id;
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,