@capillarytech/creatives-library 8.0.235 → 8.0.236-alpha.1

package/v2Components/HtmlEditor/hooks/__tests__/useInAppContent.test.js

@@ -76,7 +76,7 @@ describe('useInAppContent', () => {
 
     it('initializes with custom content for Android', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '<p>Custom Android</p>'
+        [DEVICE_TYPES.ANDROID]: '<p>Custom Android</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -86,7 +86,7 @@ describe('useInAppContent', () => {
 
     it('initializes with custom content for iOS', () => {
       const customContent = {
-        [DEVICE_TYPES.IOS]: '<p>Custom iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>Custom iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -97,7 +97,7 @@ describe('useInAppContent', () => {
     it('initializes with custom content for both devices', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -112,10 +112,10 @@ describe('useInAppContent', () => {
       expect(screen.getByTestId('active-device')).toHaveTextContent(DEVICE_TYPES.ANDROID);
     });
 
-    it('has content by default', () => {
+    it('has no content by default (empty strings)', () => {
       render(<TestComponent />);
 
-      expect(screen.getByTestId('has-content')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-content')).toHaveTextContent('false');
     });
   });
 
@@ -152,7 +152,7 @@ describe('useInAppContent', () => {
     it('updates current content when switching devices', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android Content</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS Content</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS Content</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -220,7 +220,7 @@ describe('useInAppContent', () => {
     it('updates only current device when sync is disabled', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -254,7 +254,7 @@ describe('useInAppContent', () => {
       expect(mockOnChange).toHaveBeenCalled();
       expect(mockOnChange).toHaveBeenCalledWith(
         expect.objectContaining({
-          [DEVICE_TYPES.ANDROID]: '<p>New</p>'
+          [DEVICE_TYPES.ANDROID]: '<p>New</p>',
         }),
         DEVICE_TYPES.ANDROID
       );
@@ -294,7 +294,7 @@ describe('useInAppContent', () => {
     it('syncs content to both devices when sync is enabled', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -457,7 +457,7 @@ describe('useInAppContent', () => {
   describe('Content Queries', () => {
     it('reports hasContent as true for non-empty content', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '<p>Content</p>'
+        [DEVICE_TYPES.ANDROID]: '<p>Content</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -468,7 +468,7 @@ describe('useInAppContent', () => {
     it('reports hasContent as false for empty content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '',
-        [DEVICE_TYPES.IOS]: ''
+        [DEVICE_TYPES.IOS]: '',
       };
 
       let inAppState;
@@ -487,7 +487,7 @@ describe('useInAppContent', () => {
 
     it('calculates content size correctly', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '12345'
+        [DEVICE_TYPES.ANDROID]: '12345',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -498,7 +498,7 @@ describe('useInAppContent', () => {
     it('returns 0 size for empty content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '',
-        [DEVICE_TYPES.IOS]: ''
+        [DEVICE_TYPES.IOS]: '',
       };
 
       let inAppState;
@@ -518,7 +518,7 @@ describe('useInAppContent', () => {
     it('getDeviceContent returns content for specific device', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -655,7 +655,7 @@ describe('useInAppContent', () => {
     it('handles very large content', () => {
       const largeContent = 'a'.repeat(100000);
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: largeContent
+        [DEVICE_TYPES.ANDROID]: largeContent,
       };
 
       let inAppState;
@@ -698,7 +698,7 @@ describe('useInAppContent', () => {
     it('switches device and updates content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -781,5 +781,146 @@ describe('useInAppContent', () => {
       expect(mockOnSave).toHaveBeenCalledTimes(1);
     });
   });
-});
 
+  describe('setDeviceContent Coverage', () => {
+    it('sets content for specific device when sync is disabled', () => {
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, '<p>Android Only</p>');
+      });
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('<p>Android Only</p>');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('');
+    });
+
+    it('sets content for both devices when sync is enabled', () => {
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      // Enable sync first
+      act(() => {
+        inAppState.toggleContentSync(true);
+      });
+
+      // Then set content
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, '<p>Synced Content</p>');
+      });
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('<p>Synced Content</p>');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('<p>Synced Content</p>');
+    });
+
+    it('warns when setting content for invalid device', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent('InvalidDevice', '<p>Content</p>');
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid device type')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('warns when setting non-string content', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, 123);
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('content must be a string')
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Edge Cases Coverage', () => {
+    it('handles updateContent with non-string input', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.updateContent(123);
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('newContent must be a string')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles switchDevice with invalid device type', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.switchDevice('InvalidDevice');
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid device type')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles auto-save with content length below minimum', () => {
+      const onSave = jest.fn();
+      let inAppState;
+      render(
+        <TestComponent
+          options={{ autoSave: true, autoSaveInterval: 100, onSave }}
+          onStateChange={(state) => { inAppState = state; }}
+        />
+      );
+
+      act(() => {
+        inAppState.updateContent(''); // Empty content
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      // onSave should not be called for empty content
+      expect(onSave).not.toHaveBeenCalled();
+    });
+
+    it('handles auto-save interval below minimum', () => {
+      const onSave = jest.fn();
+      let inAppState;
+      render(
+        <TestComponent
+          options={{ autoSave: true, autoSaveInterval: 500, onSave }} // Below 1000ms minimum
+          onStateChange={(state) => { inAppState = state; }}
+        />
+      );
+
+      act(() => {
+        inAppState.updateContent('<p>Content</p>');
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      // onSave should not be called when interval is below minimum
+      expect(onSave).not.toHaveBeenCalled();
+    });
+  });
+});

package/v2Components/HtmlEditor/hooks/useInAppContent.js

@@ -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,36 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     deviceContentRef.current = deviceContent;
   }, [deviceContent]);
 
+  // Update content when initialContent prop changes (for edit mode)
+  useEffect(() => {
+    const newAndroidContent = initialContent?.[ANDROID];
+    const newIosContent = initialContent?.[IOS];
+
+    // Only update if initialContent has changed and is different from current content
+    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;
+    });
+  }, [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 +127,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;
       });
@@ -301,7 +219,7 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
       const currentActiveContent = deviceContent[activeDevice];
       const syncedContent = {
         [ANDROID]: currentActiveContent,
-        [IOS]: currentActiveContent
+        [IOS]: currentActiveContent,
       };
 
       setDeviceContent(syncedContent);
@@ -325,22 +243,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 +272,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 +312,6 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
     toggleContentSync,
 
     // Save management
-    markAsSaved
+    markAsSaved,
   };
 };

package/v2Components/HtmlEditor/index.js

@@ -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
- */
+ */