npm - @capillarytech/creatives-library - Versions diffs - 8.0.242-alpha.0 → 8.0.242-alpha.2 - Mend

@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (216) hide show

package/v2Components/HtmlEditor/hooks/useInAppContent.js CHANGED Viewed

@@ -4,133 +4,30 @@
  * Manages separate HTML content for Android and iOS devices with sync functionality
  */
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import {
+  useState, useCallback, useRef, useEffect, useMemo,
+} from 'react';
 import { DEVICE_TYPES, PERFORMANCE } from '../constants';
 // Constants for better maintainability
 const CONTENT_VALIDATION = {
   MIN_CONTENT_LENGTH: 0,
-  DEFAULT_CONTENT_TYPE: 'string'
+  DEFAULT_CONTENT_TYPE: 'string',
 };
 const AUTO_SAVE_CONFIG = {
   DEFAULT_ENABLED: true,
   DEFAULT_INTERVAL: PERFORMANCE.AUTO_SAVE_INTERVAL,
-  MIN_AUTO_SAVE_INTERVAL_MS: 1000 // Minimum 1 second between auto-saves
+  MIN_AUTO_SAVE_INTERVAL_MS: 1000, // Minimum 1 second between auto-saves
 };
 /**
  * Default InApp content for different devices
+ * Empty strings - no default content for new templates
  */
 const DEFAULT_INAPP_CONTENT = {
-  [DEVICE_TYPES.ANDROID]: `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>In-App Notification</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 16px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
-            background-color: #ffffff;
-            color: #212121;
-        }
-        .notification {
-            max-width: 100%;
-            background: white;
-            border-radius: 8px;
-            padding: 16px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        }
-        .title {
-            font-size: 16px;
-            font-weight: 500;
-            margin: 0 0 8px 0;
-            color: #212121;
-        }
-        .message {
-            font-size: 14px;
-            line-height: 1.4;
-            margin: 0 0 16px 0;
-            color: #424242;
-        }
-        .cta-button {
-            background-color: #42b040;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            padding: 8px 16px;
-            font-size: 12px;
-            font-weight: 500;
-            cursor: pointer;
-            width: 100%;
-        }
-    </style>
-</head>
-<body>
-    <div class="notification">
-        <h2 class="title">Sample template</h2>
-        <p class="message">This is a sample template for in-app notification content. This can be triggered on any behavioural event while the user is on the app</p>
-        <button class="cta-button">Add to cart</button>
-    </div>
-</body>
-</html>`,
-  [DEVICE_TYPES.IOS]: `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>In-App Notification</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 16px;
-            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
-            background-color: #ffffff;
-            color: #000000;
-        }
-        .notification {
-            max-width: 100%;
-            background: white;
-            border-radius: 12px;
-            padding: 16px;
-            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-        }
-        .title {
-            font-size: 17px;
-            font-weight: 600;
-            margin: 0 0 8px 0;
-            color: #000000;
-        }
-        .message {
-            font-size: 15px;
-            line-height: 1.4;
-            margin: 0 0 16px 0;
-            color: #3c3c43;
-        }
-        .cta-button {
-            background-color: #007AFF;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 12px 16px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            width: 100%;
-        }
-    </style>
-</head>
-<body>
-    <div class="notification">
-        <h2 class="title">Sample template</h2>
-        <p class="message">This is a sample template for in-app notification content. This can be triggered on any behavioural event while the user is on the app</p>
-        <button class="cta-button">Add to cart</button>
-    </div>
-</body>
-</html>`
+  [DEVICE_TYPES.ANDROID]: '',
+  [DEVICE_TYPES.IOS]: '',
 };
 /**
@@ -150,7 +47,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     autoSave = AUTO_SAVE_CONFIG.DEFAULT_ENABLED,
     autoSaveInterval = AUTO_SAVE_CONFIG.DEFAULT_INTERVAL,
     onSave,
-    onChange
+    onChange,
   } = options;
   // Destructure device types for cleaner code
@@ -159,7 +56,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   // Device-specific content state with optional chaining
   const [deviceContent, setDeviceContent] = useState(() => ({
     [ANDROID]: initialContent?.[ANDROID] || DEFAULT_INAPP_CONTENT[ANDROID],
-    [IOS]: initialContent?.[IOS] || DEFAULT_INAPP_CONTENT[IOS]
+    [IOS]: initialContent?.[IOS] || DEFAULT_INAPP_CONTENT[IOS],
   }));
   // Current active device
@@ -189,15 +86,67 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     deviceContentRef.current = deviceContent;
   }, [deviceContent]);
+  // Ref to track if we've loaded initial content to prevent overriding user edits
+  const initialContentLoadedRef = useRef(false);
+  const previousContentRef = useRef({ android: '', ios: '' });
+  // Update content when initialContent prop changes (for edit mode)
+  // This should only run when loading a template for editing, NOT during active editing
+  useEffect(() => {
+    const newAndroidContent = initialContent?.[ANDROID];
+    const newIosContent = initialContent?.[IOS];
+    // Check if this is meaningful initialContent (has actual content)
+    const hasMeaningfulContent = (newAndroidContent && newAndroidContent.trim() !== '')
+      || (newIosContent && newIosContent.trim() !== '');
+    // Check if we're transitioning from empty to meaningful content (library mode scenario)
+    const wasEmpty = (!previousContentRef.current.android || previousContentRef.current.android.trim() === '')
+      && (!previousContentRef.current.ios || previousContentRef.current.ios.trim() === '');
+    const isTransitioningToContent = wasEmpty && hasMeaningfulContent;
+    // 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)
+    // This prevents the effect from overriding user edits during active editing
+    // while still allowing content to load properly in library mode
+    if (!initialContentLoadedRef.current || isTransitioningToContent) {
+      if (hasMeaningfulContent) {
+        // Mark as loaded to prevent future updates from overriding user edits
+        initialContentLoadedRef.current = true;
+        setDeviceContent((prev) => {
+          let updated = false;
+          const updatedContent = { ...prev };
+          if (newAndroidContent !== undefined && newAndroidContent !== prev[ANDROID]) {
+            updatedContent[ANDROID] = newAndroidContent;
+            updated = true;
+          }
+          if (newIosContent !== undefined && newIosContent !== prev[IOS]) {
+            updatedContent[IOS] = newIosContent;
+            updated = true;
+          }
+          return updated ? updatedContent : prev;
+        });
+        // Update previous content ref
+        previousContentRef.current = {
+          android: newAndroidContent || '',
+          ios: newIosContent || '',
+        };
+      }
+    }
+  }, [initialContent, ANDROID, IOS]);
   // Get current active content
-  const currentContent = useMemo(() => {
-    return deviceContent[activeDevice] || '';
-  }, [deviceContent, activeDevice]);
+  const currentContent = useMemo(() => deviceContent?.[activeDevice] || '', [deviceContent, activeDevice]);
   // Update content for current device
   const updateContent = useCallback((newContent) => {
     // Validate input
-    if (typeof newContent !== CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE) {
+    if (typeof newContent !== CONTENT_VALIDATION?.DEFAULT_CONTENT_TYPE) {
       console.warn('useInAppContent: newContent must be a string');
       return;
     }
@@ -209,14 +158,14 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       // When sync is enabled, update both devices with the same content
       updatedDeviceContent = {
         [ANDROID]: newContent,
-        [IOS]: newContent
+        [IOS]: newContent,
       };
     } else {
       // When sync is disabled, update only the current device
-      setDeviceContent(prev => {
+      setDeviceContent((prev) => {
         updatedDeviceContent = {
           ...prev,
-          [activeDevice]: newContent
+          [activeDevice]: newContent,
         };
         return updatedDeviceContent;
       });
@@ -225,8 +174,9 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       setIsDirty(true);
       changeTimestampRef.current = Date.now();
-      // Trigger onChange callback with optional chaining
-      onChange?.(updatedDeviceContent, activeDevice);
+      // Trigger onChange callback - pass only changed device content
+      // This prevents parent from updating both device states when only one changed
+      onChange?.({ [activeDevice]: newContent }, activeDevice);
       // Setup auto-save for independent mode
       if (autoSave && autoSaveInterval > AUTO_SAVE_CONFIG.MIN_AUTO_SAVE_INTERVAL_MS && newContent.length > CONTENT_VALIDATION.MIN_CONTENT_LENGTH) {
@@ -257,7 +207,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     setIsDirty(true);
     changeTimestampRef.current = Date.now();
-    // Trigger onChange callback with optional chaining
+    // Trigger onChange callback - in sync mode, pass full content
     onChange?.(updatedDeviceContent, activeDevice);
     // Setup auto-save
@@ -301,7 +251,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       const currentActiveContent = deviceContent[activeDevice];
       const syncedContent = {
         [ANDROID]: currentActiveContent,
-        [IOS]: currentActiveContent
+        [IOS]: currentActiveContent,
       };
       setDeviceContent(syncedContent);
@@ -325,22 +275,16 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   }, [deviceContent, onSave]);
   // Check if content exists for current device
-  const hasContent = useMemo(() => {
-    return typeof currentContent === CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE &&
-           currentContent.trim().length > CONTENT_VALIDATION.MIN_CONTENT_LENGTH;
-  }, [currentContent]);
+  const hasContent = useMemo(() => typeof currentContent === CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE
+    && currentContent?.trim()?.length > CONTENT_VALIDATION.MIN_CONTENT_LENGTH, [currentContent]);
   // Get content size for current device
-  const getContentSize = useCallback(() => {
-    return typeof currentContent === CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE
-      ? currentContent.length
-      : CONTENT_VALIDATION.MIN_CONTENT_LENGTH;
-  }, [currentContent]);
+  const getContentSize = useCallback(() => typeof currentContent === CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE
+    ? currentContent?.length
+    : CONTENT_VALIDATION?.MIN_CONTENT_LENGTH, [currentContent]);
   // Get content for specific device
-  const getDeviceContent = useCallback((device) => {
-    return deviceContent[device] || '';
-  }, [deviceContent]);
+  const getDeviceContent = useCallback((device) => deviceContent[device] || '', [deviceContent]);
   // Set content for specific device
   const setDeviceContent_ = useCallback((device, content) => {
@@ -360,25 +304,23 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       // Update both devices when sync is enabled
       setDeviceContent({
         [ANDROID]: content,
-        [IOS]: content
+        [IOS]: content,
       });
     } else {
       // Update specific device
-      setDeviceContent(prev => ({
+      setDeviceContent((prev) => ({
         ...prev,
-        [device]: content
+        [device]: content,
       }));
     }
     setIsDirty(true);
   }, [keepContentSame, ANDROID, IOS]);
   // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (autoSaveTimerRef.current) {
-        clearTimeout(autoSaveTimerRef.current);
-      }
-    };
+  useEffect(() => () => {
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
   }, []);
   return {
@@ -402,6 +344,6 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     toggleContentSync,
     // Save management
-    markAsSaved
+    markAsSaved,
   };
 };

package/v2Components/HtmlEditor/index.js CHANGED Viewed

@@ -26,4 +26,4 @@ export { HTML_EDITOR_VARIANTS, DEVICE_TYPES } from './constants';
  * - Default export (lazy): ~0KB initial bundle (loads ~400KB when needed)
  * - HTMLEditorSync: ~400KB added to initial bundle
  * - Constants: ~1KB added to initial bundle
- */
+ */