@capillarytech/creatives-library 8.0.292-alpha.14 → 8.0.292-alpha.17

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/InAppPreviewContent.js

@@ -15,13 +15,34 @@ import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import isEmpty from 'lodash/isEmpty';
-import { ANDROID, IOS, LAYOUT_TYPE_POPUP, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, LAYOUT_TYPE_FOOTER, CHANNELS } from '../constants';
+import {
+  ANDROID,
+  IOS,
+  LAYOUT_TYPE_POPUP,
+  LAYOUT_TYPE_HEADER,
+  LAYOUT_TYPE_FOOTER,
+  LAYOUT_TYPE_FULLSCREEN,
+  ANDROID_DEVICE_NAME,
+  IOS_DEVICE_NAME,
+  CHANNELS,
+  INAPP_HTML_LAYOUT_POSITIONS,
+} from '../constants';
 import messages from '../messages';
 
 // Import device mockup images (same as SMS)
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
+/**
+ * Detects if a string is HTML content (e.g. from HtmlEditor InApp template).
+ * Used to render HTML in an iframe (like InAppPreviewPane/ContentOverlay) instead of as plain text.
+ */
+const isHtmlContent = (str) => {
+  if (typeof str !== 'string' || !str.trim()) return false;
+  const trimmed = str.trim();
+  return trimmed.startsWith('<') && (trimmed.includes('>') || trimmed.includes('/'));
+};
+
 const InAppPreviewContent = ({
   content,
   device,
@@ -51,6 +72,12 @@ const InAppPreviewContent = ({
     templateLayoutType: deviceLayoutType = templateLayoutType || LAYOUT_TYPE_POPUP,
   } = deviceContent || {};
 
+  // When templateMsg is HTML (e.g. from HtmlEditor), render it in an iframe like InAppPreviewPane/ContentOverlay
+  const renderAsHtml = isHtmlContent(templateMsg);
+
+  // Layout positioning for HTML preview (modal, top banner, bottom banner, fullscreen) - match side-by-side ContentOverlay
+  const htmlLayoutKey = deviceLayoutType || LAYOUT_TYPE_POPUP;
+  const htmlLayoutPosition = INAPP_HTML_LAYOUT_POSITIONS[htmlLayoutKey] || INAPP_HTML_LAYOUT_POSITIONS[LAYOUT_TYPE_POPUP];
 
   // Render loading state
   if (isUpdating) {
@@ -106,76 +133,85 @@ const InAppPreviewContent = ({
         alt={`${deviceName} Device`}
       />
 
-      {/* Content Overlay - Use TemplatePreview's InApp structure (lines 1409-1486) */}
+      {/* Content Overlay - Use TemplatePreview's InApp structure or iframe for HTML (like InAppPreviewPane) */}
       <CapRow className={`sms-content-overlay inapp-content-overlay-height ${!showHeader ? 'inapp-content-overlay' : ''} sms-${device}`}>
-        {/* TemplatePreview InApp structure - shell-v2 wrapper */}
-        <CapRow className={`inapp-shell-v2 inapp-${device}`}>
-          {/* preview-image div wrapper */}
-          {/* inapp-message-container with layout type and device */}
-          <CapRow
-            className={`inapp-message-container-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${!showHeader && deviceLayoutType === LAYOUT_TYPE_FOOTER ? 'inapp-message-container-FOOTER-no-header' : ''} ${CHANNELS.SMS.toLowerCase()}`}
+        {renderAsHtml ? (
+          /* HTML content from HtmlEditor: position by layout (modal/top/bottom/fullscreen) like side-by-side ContentOverlay */
+          <div
+            className={`inapp-html-preview-iframe-wrapper inapp-html-preview-iframe-wrapper--${(htmlLayoutKey || '').toLowerCase()}`}
+            style={{
+              position: 'absolute',
+              ...htmlLayoutPosition,
+            }}
           >
-            {/* preview-inapp-screen - content container */}
-            <CapRow className="preview-inapp-screen">
-              {/* Title - Same as TemplatePreview (line 1420-1435) */}
-              <CapLabel
-                type="label16"
-                className={`inapp-title-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
+            <iframe
+              srcDoc={templateMsg}
+              title="InApp HTML Preview"
+              sandbox="allow-scripts allow-same-origin"
+              className="inapp-html-preview-iframe"
+            />
+          </div>
+        ) : (
+          /* TemplatePreview InApp structure - shell-v2 wrapper (template title/message/image/CTA) */
+          <CapRow className={`inapp-shell-v2 inapp-${device}`}>
+            <CapRow
+              className={`inapp-message-container-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${!showHeader && deviceLayoutType === LAYOUT_TYPE_FOOTER ? 'inapp-message-container-FOOTER-no-header' : ''} ${CHANNELS.SMS.toLowerCase()}`}
+            >
+              <CapRow className="preview-inapp-screen">
+                <CapLabel
+                  type="label16"
+                  className={`inapp-title-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
                     mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos
                       ? ''
                       : `without-image-title-${deviceLayoutType || LAYOUT_TYPE_POPUP}`
-                }`}
-              >
-                {/* eslint-disable-next-line no-unneeded-ternary */}
-                {templateTitle ? templateTitle : ' '}
-                {/* this ternary is required here for preview */}
-              </CapLabel>
-
-              {/* Image - Same as TemplatePreview (line 1437-1447) */}
-              {mediaPreview && (mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos) && (
-                <CapImage
-                  src={
-                    device.toLowerCase() === ANDROID
-                      ? mediaPreview?.inAppImageSrcAndroid
-                      : mediaPreview?.inAppImageSrcIos
-                  }
-                  className={`inapp-image-${deviceLayoutType || LAYOUT_TYPE_POPUP}`}
-                  alt={formatMessage(messages.previewGenerated)}
-                />
-              )}
-
-              {/* Message Content - Same as TemplatePreview (line 1448-1464) */}
-              <CapLabel
-                type="label2"
-                className={`align-left inapp-content-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
+                  }`}
+                >
+                  {/* eslint-disable-next-line no-unneeded-ternary */}
+                  {templateTitle ? templateTitle : ' '}
+                </CapLabel>
+
+                {mediaPreview && (mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos) && (
+                  <CapImage
+                    src={
+                      device.toLowerCase() === ANDROID
+                        ? mediaPreview?.inAppImageSrcAndroid
+                        : mediaPreview?.inAppImageSrcIos
+                    }
+                    className={`inapp-image-${deviceLayoutType || LAYOUT_TYPE_POPUP}`}
+                    alt={formatMessage(messages.previewGenerated)}
+                  />
+                )}
+
+                <CapLabel
+                  type="label2"
+                  className={`align-left inapp-content-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
                     mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos
                       ? ''
                       : `without-image-content-${deviceLayoutType || LAYOUT_TYPE_POPUP}`
-                }`}
-              >
-                {/* eslint-disable-next-line no-unneeded-ternary */}
-                {templateMsg ? templateMsg : ' '}
-                {/* this ternary is required here for preview */}
-              </CapLabel>
-
-              {/* CTA Button - Same as TemplatePreview (line 1465-1482) */}
-              {ctaData
-                && !isEmpty(ctaData)
-                && (ctaData[0]?.text || ctaData[0]?.actionText) && (
-                <CapButton
-                  type="primary"
-                  className={`inapp-button-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
-                    mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos
-                      ? ''
-                      : `without-image-button-${deviceLayoutType || LAYOUT_TYPE_POPUP}`
                   }`}
                 >
-                  {ctaData[0]?.text || ctaData[0]?.actionText}
-                </CapButton>
-              )}
+                  {/* eslint-disable-next-line no-unneeded-ternary */}
+                  {templateMsg ? templateMsg : ' '}
+                </CapLabel>
+
+                {ctaData
+                  && !isEmpty(ctaData)
+                  && (ctaData[0]?.text || ctaData[0]?.actionText) && (
+                  <CapButton
+                    type="primary"
+                    className={`inapp-button-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${
+                      mediaPreview?.inAppImageSrcAndroid || mediaPreview?.inAppImageSrcIos
+                        ? ''
+                        : `without-image-button-${deviceLayoutType || LAYOUT_TYPE_POPUP}`
+                    }`}
+                  >
+                    {ctaData[0]?.text || ctaData[0]?.actionText}
+                  </CapButton>
+                )}
+              </CapRow>
             </CapRow>
           </CapRow>
-        </CapRow>
+        )}
       </CapRow>
     </CapRow>
   );

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -760,6 +760,45 @@
     .inapp-content-overlay {
       width: 24.929rem;
     }
+
+    // InApp HTML preview (HtmlEditor content) - positioned by layout like side-by-side ContentOverlay
+    // Position/dimensions come from inline style (INAPP_HTML_LAYOUT_POSITIONS)
+    .inapp-html-preview-iframe-wrapper {
+      background: $CAP_WHITE;
+      overflow: hidden;
+      box-shadow: 0 0.125rem 0.75rem rgba($CAP_G01, 0.15);
+      border: 0.0625rem solid $CAP_G07;
+
+      &--popup {
+        border-radius: 0.75rem;
+        box-shadow: 0 0.25rem 1.25rem rgba($CAP_G01, 0.2);
+      }
+
+      &--header {
+        border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
+        box-shadow: 0 0.125rem 0.5rem rgba($CAP_G01, 0.15);
+      }
+
+      &--footer {
+        border-radius: 0.75rem 0.75rem 0.5rem 0.5rem;
+        box-shadow: 0 -0.125rem 0.5rem rgba($CAP_G01, 0.15);
+      }
+
+      &--fullscreen {
+        border-radius: 0.25rem;
+        box-shadow: none;
+        border: none;
+      }
+    }
+
+    .inapp-html-preview-iframe {
+      width: 100%;
+      height: 100%;
+      min-height: 10rem;
+      border: none;
+      display: block;
+      background: $CAP_WHITE;
+    }
   }
 
   // WhatsApp Preview Content Styles (Phase 8)
@@ -1078,7 +1117,7 @@
 
         // InApp message container styles - copied from TemplatePreview
         // POPUP/MODAL layout for Android
-        .inapp-message-container-POPUP {
+        .inapp-message-container-POPUP, .inapp-message-container-MODAL {
           background-color: $CAP_WHITE;
           position: relative;
           height: 22.5rem;

package/v2Components/CommonTestAndPreview/constants.js

@@ -125,6 +125,45 @@ export const LAYOUT_TYPE_FOOTER = 'FOOTER';
 export const LAYOUT_TYPE_MODAL = 'MODAL';
 export const LAYOUT_TYPE_BANNER = 'BANNER';
 
+// InApp HTML preview layout positions (match HtmlEditor ContentOverlay for consistent placement)
+// Used when rendering HTML content in Test and Preview so modal/top/bottom/fullscreen match side-by-side preview
+export const INAPP_HTML_LAYOUT_POSITIONS = {
+  [LAYOUT_TYPE_POPUP]: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    height: '55%',
+    maxWidth: '320px',
+    maxHeight: '380px',
+    minHeight: '180px',
+  },
+  [LAYOUT_TYPE_HEADER]: {
+    top: '2%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '90%',
+    height: '22%',
+    maxHeight: '160px',
+    minHeight: '100px',
+  },
+  [LAYOUT_TYPE_FOOTER]: {
+    bottom: '2%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '90%',
+    height: '22%',
+    maxHeight: '160px',
+    minHeight: '100px',
+  },
+  [LAYOUT_TYPE_FULLSCREEN]: {
+    top: '2%',
+    left: '2%',
+    width: '96%',
+    height: '96%',
+  },
+};
+
 // ============================================
 // CTA TYPE CONSTANTS
 // ============================================

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -191,7 +191,7 @@ const HTMLEditor = forwardRef(({
       inAppContent.updateContent(newContent, true);
       inAppLastAppliedInitialRef.current = { android: newAndroid, ios: newIos };
     }
-  }, [initialContent, isEmailVariant, isInAppVariant, emailContent, inAppContent]);
+  }, [initialContent, isEmailVariant, isInAppVariant]);
   // Handle context change for tag API calls
   // If variant is INAPP, use SMS layout; otherwise use the channel (EMAIL)
   const handleContextChange = useCallback((contextData) => {
@@ -324,7 +324,7 @@ const HTMLEditor = forwardRef(({
         : countIssuesBySeverity(validation.getAllIssues()),
     })
     ,
-  }), [validation, currentContent, apiValidationErrors]);
+  }), [validation, currentContent, apiValidationErrors]); // Include apiValidationErrors so ref methods return updated counts
 
   // Use ref to store callback to avoid infinite loops (callback in deps would cause re-runs)
   const onValidationChangeRef = useRef(onValidationChange);
@@ -832,5 +832,5 @@ HTMLEditor.defaultProps = {
   apiValidationErrors: null, // API validation errors from validateLiquidTemplateContent
 };
 
-// Export with injectIntl - HTMLEditor uses forwardRef internally
+// Export with injectIntl - HTMLEditor now uses forwardRef internally
 export default injectIntl(HTMLEditor);

package/v2Containers/InApp/index.js

@@ -142,13 +142,9 @@ export const InApp = (props) => {
   const [isHTMLTemplate, setIsHTMLTemplate] = useState(false);
   // Version to force HTMLEditor remount on layout changes
   const [htmlEditorContentVersion, setHtmlEditorContentVersion] = useState(0);
-  // Refs to store latest content (kept in sync in handleHtmlContentChange so Test and Preview reads fresh content in library mode)
+  // Refs to store latest content before layout changes
   const htmlContentAndroidRef = useRef(htmlContentAndroid);
   const htmlContentIosRef = useRef(htmlContentIos);
-  useEffect(() => {
-    htmlContentAndroidRef.current = htmlContentAndroid;
-    htmlContentIosRef.current = htmlContentIos;
-  }, [htmlContentAndroid, htmlContentIos]);
   const [accountId, setAccountId] = useState("");
   const [accessToken, setAccessToken] = useState("");
   const [accountName, setAccountName] = useState("");
@@ -176,15 +172,14 @@ export const InApp = (props) => {
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
 
-  // Get template content for TestAndPreviewSlidebox (same pattern as Mobile Push: read current content for preview)
-  // State is updated on every keystroke via onContentChange; refs are synced so we read fresh content in library mode too.
+  // Get template content for TestAndPreviewSlidebox
+  // Returns simple structure with preview fields only
+  // Transformation to payload structure happens in prepareTestMessagePayload
+  // Reference: Based on getPreviewSection() function (lines 490-530) which prepares content for TemplatePreview
   const getTemplateContent = useCallback(() => {
-    const androidMsg = isHTMLTemplate
-      ? (htmlContentAndroidRef.current ?? htmlContentAndroid ?? '')
-      : templateMessageAndroid;
-    const iosMsg = isHTMLTemplate
-      ? (htmlContentIosRef.current ?? htmlContentIos ?? '')
-      : templateMessageIos;
+    // For HTML template, use HTML editor content so preview stays in sync with typing
+    const androidMsg = isHTMLTemplate ? (htmlContentAndroid ?? '') : templateMessageAndroid;
+    const iosMsg = isHTMLTemplate ? (htmlContentIos ?? '') : templateMessageIos;
 
     // Prepare Android content
     const androidMediaPreview = {};
@@ -512,11 +507,40 @@ export const InApp = (props) => {
     }
   }, [editData.templateDetails || templateData]);
 
-  // Extract editor type from defaultData for stable reference
+  // Extract editor type: from defaultData (create flow) or derive from template content (edit flow)
   const editorType = useMemo(() => {
-    const type = defaultData?.['editor-type'];
-    return type;
-  }, [defaultData]);
+    const fromDefault = defaultData?.['editor-type'];
+    if (fromDefault) return fromDefault;
+
+    // Edit flow: derive from template content when editor-type wasn't passed from wrapper
+    const source = isFullMode ? editData?.templateDetails : templateData;
+    const versions = source?.versions;
+    const content = get(versions, 'base.content', {});
+    if (!content || isEmpty(content)) return undefined;
+
+    const androidContent = content?.ANDROID;
+    const iosContent = content?.IOS;
+    const androidTitle = (androidContent?.title ?? '').toString();
+    const iosTitle = (iosContent?.title ?? '').toString();
+    const androidType = androidContent?.type ?? '';
+    const iosType = iosContent?.type ?? '';
+    const androidStyle = get(androidContent, 'expandableDetails.style');
+    const iosStyle = get(iosContent, 'expandableDetails.style');
+    const isBEEeditorAndroid = get(androidContent, 'isBEEeditor');
+    const isBEEeditorIos = get(iosContent, 'isBEEeditor');
+    const isBeeFreeAndroid = !isEmpty(androidTitle) && androidTitle.toLowerCase() === 'bee free template';
+    const isBeeFreeIos = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'bee free template';
+    const isHTMLEditorAndroid = !isEmpty(androidTitle) && androidTitle.toLowerCase() === 'html editor template';
+    const isHTMLEditorIos = !isEmpty(iosTitle) && iosTitle.toLowerCase() === 'html editor template';
+
+    const androidIsHTML = isHTMLEditorAndroid
+      || ((androidType === INAPP_MEDIA_TYPES.HTML || androidStyle === BIG_HTML) && !isBEEeditorAndroid && !isBeeFreeAndroid);
+    const iosIsHTML = isHTMLEditorIos
+      || ((iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML) && !isBEEeditorIos && !isBeeFreeIos);
+
+    if (androidIsHTML || iosIsHTML) return INAPP_EDITOR_TYPES.HTML_EDITOR;
+    return INAPP_EDITOR_TYPES.DRAG_DROP_EDITOR;
+  }, [defaultData, isFullMode, editData?.templateDetails, templateData]);
 
   // Separate effect for handling editor type from wrapper in create mode
   useEffect(() => {
@@ -1013,12 +1037,11 @@ export const InApp = (props) => {
     );
   };
 
-  // Handle HTML content changes from HTMLEditor - update state and refs so Test and Preview has fresh content (full + library mode)
+  // Handle HTML content changes from HTMLEditor
   const handleHtmlContentChange = useCallback((deviceContent, changedDevice) => {
     // When "keep content same" is on, useInAppContent passes full deviceContent with both
     // android and ios set to the same value. We must update both states so preview shows
     // the synced content for each device. Otherwise only update the device that changed.
-    // Refs are updated synchronously so getTemplateContent() reads latest when opening the slidebox.
 
     // Clear validation errors when content changes (similar to Bee Editor)
     if (changedDevice) {
@@ -1041,36 +1064,33 @@ export const InApp = (props) => {
     const isSyncUpdate = hasAndroid && hasIos;
 
     if (isSyncUpdate) {
+      // Sync mode: update both so preview shows same content for Android and iOS
       if (hasAndroid) {
-        const v = deviceContent.android || '';
-        htmlContentAndroidRef.current = v;
-        setHtmlContentAndroid(v);
+        setHtmlContentAndroid(deviceContent.android || '');
       }
       if (hasIos) {
-        const v = deviceContent.ios || '';
-        htmlContentIosRef.current = v;
-        setHtmlContentIos(v);
+        setHtmlContentIos(deviceContent.ios || '');
       }
     } else if (changedDevice) {
+      // Only one device changed
       if (changedDevice.toUpperCase() === ANDROID && hasAndroid) {
-        const v = deviceContent.android || '';
-        htmlContentAndroidRef.current = v;
-        setHtmlContentAndroid(v);
+        setHtmlContentAndroid(deviceContent.android || '');
       } else if (changedDevice.toUpperCase() === IOS_CAPITAL && hasIos) {
-        const v = deviceContent.ios || '';
-        htmlContentIosRef.current = v;
-        setHtmlContentIos(v);
+        setHtmlContentIos(deviceContent.ios || '');
       }
     } else {
+      // Fallback: update both if changedDevice not provided
       if (hasAndroid) {
-        const newValue = deviceContent.android || '';
-        htmlContentAndroidRef.current = newValue;
-        setHtmlContentAndroid((prev) => (prev !== newValue ? newValue : prev));
+        setHtmlContentAndroid((prev) => {
+          const newValue = deviceContent.android || '';
+          return prev !== newValue ? newValue : prev;
+        });
       }
       if (hasIos) {
-        const newValue = deviceContent.ios || '';
-        htmlContentIosRef.current = newValue;
-        setHtmlContentIos((prev) => (prev !== newValue ? newValue : prev));
+        setHtmlContentIos((prev) => {
+          const newValue = deviceContent.ios || '';
+          return prev !== newValue ? newValue : prev;
+        });
       }
     }
   }, [ANDROID, IOS_CAPITAL, setErrorMessage]);