npm - @capillarytech/creatives-library - Versions diffs - 8.0.207 → 8.0.209 - Mend

@capillarytech/creatives-library 8.0.207 → 8.0.209

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 (77) hide show

package/v2Components/HtmlEditor/hooks/useEditorContent.js ADDED Viewed

@@ -0,0 +1,274 @@
+/**
+ * useEditorContent - Custom hook for managing unified editor content state
+ *
+ * Handles unified HTML content with embedded CSS and JavaScript
+ * Simplified from separate language management to single editor approach
+ */
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { PERFORMANCE } from '../constants';
+import { useSmartDebounce, analyzeContentSize, useCleanup } from '../utils/simplePerformance';
+/**
+ * Custom hook for unified editor content management
+ *
+ * @param {string} initialContent - Initial unified HTML content
+ * @param {Object} options - Configuration options
+ * @returns {Object} Content state and methods
+ */
+const DEFAULT_CONTENT = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Editor Preview</title>
+    <style>
+        /* Your CSS styles here */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to HTML Editor</h1>
+        <p>Start editing your HTML, CSS, and JavaScript code above to see the live preview here.</p>
+        <button id="demoButton">Click me!</button>
+    </div>
+    <script>
+        // Your JavaScript code here
+        document.getElementById('demoButton').addEventListener('click', function() {
+            alert('Hello from the HTML Editor!');
+        });
+    </script>
+</body>
+</html>`;
+export const useEditorContent = (
+  initialContent = null,
+  options = {}
+) => {
+  const {
+    autoSave = true,
+    autoSaveInterval = PERFORMANCE.AUTO_SAVE_INTERVAL,
+    onSave = null,
+    onChange = null
+  } = options;
+  // Unified content state
+  const [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
+  const [isDirty, setIsDirty] = useState(false);
+  const [lastSaved, setLastSaved] = useState(null);
+  const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
+  // Refs for performance optimization
+  const onChangeDebounceRef = useRef(null);
+  const validationDebounceRef = useRef(null);
+  const autoSaveRef = useRef(null);
+  const validationCallbackRef = useRef(null);
+  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
+  // Smart debouncing hooks
+  const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);
+  const debouncedValidation = useSmartDebounce((content) => {
+    if (validationCallbackRef.current) {
+      validationCallbackRef.current(content);
+    }
+  }, PERFORMANCE.VALIDATION_DEBOUNCE);
+  // Update unified content
+  const updateContent = useCallback((value, immediate = false) => {
+    setContent(prevContent => {
+      // Skip update if content hasn't actually changed
+      if (prevContent === value) {
+        return prevContent;
+      }
+      // Analyze content for performance optimization
+      const analysis = analyzeContentSize(value);
+      // Use smart debouncing for callbacks
+      if (onChange) {
+        if (immediate) {
+          onChange(value);
+        } else {
+          debouncedOnChange(value, analysis.size);
+        }
+      }
+      // Use smart debouncing for validation
+      if (validationCallbackRef.current) {
+        if (immediate) {
+          validationCallbackRef.current(value);
+        } else {
+          debouncedValidation(value, analysis.size);
+        }
+      }
+      // Update refs
+      lastContentRef.current = value;
+      return value;
+    });
+    setIsDirty(true);
+  }, [onChange, debouncedOnChange, debouncedValidation]);
+  // Get current unified content
+  const currentContent = useMemo(() => {
+    return content || '';
+  }, [content]);
+  // Check if content exists
+  const hasContent = useCallback(() => {
+    return content && typeof content === 'string' && content.trim().length > 0;
+  }, [content]);
+  // Get content size for performance monitoring
+  const getContentSize = useCallback(() => {
+    return (content && typeof content === 'string') ? content.length : 0;
+  }, [content]);
+  // Performance analysis
+  const contentAnalysis = useMemo(() => {
+    return analyzeContentSize(content);
+  }, [content]);
+  // Check if content is large (for performance warnings)
+  const isLargeContent = useMemo(() => {
+    return contentAnalysis.isLarge;
+  }, [contentAnalysis.isLarge]);
+  // Mark content as saved
+  const markAsSaved = useCallback(() => {
+    setIsDirty(false);
+    setLastSaved(new Date());
+  }, []);
+  // Reset all content
+  const resetContent = useCallback(() => {
+    const contentToUse = initialContent || DEFAULT_CONTENT;
+    setContent(contentToUse);
+    setIsDirty(false);
+    setLastSaved(null);
+    lastContentRef.current = contentToUse;
+  }, [initialContent]);
+  // Save content (calls onSave callback if provided)
+  const saveContent = useCallback(async () => {
+    if (onSave && isDirty) {
+      try {
+        await onSave(content);
+        markAsSaved();
+        return true;
+      } catch (error) {
+        console.error('Failed to save content:', error);
+        return false;
+      }
+    }
+    return false;
+  }, [content, isDirty, onSave, markAsSaved]);
+  // Register validation callback
+  const registerValidationCallback = useCallback((callback) => {
+    validationCallbackRef.current = callback;
+  }, []);
+  // Unregister validation callback
+  const unregisterValidationCallback = useCallback(() => {
+    validationCallbackRef.current = null;
+  }, []);
+  // Toggle auto-save
+  const toggleAutoSave = useCallback(() => {
+    setIsAutoSaveEnabled(prev => !prev);
+  }, []);
+  // Force validation
+  const validateContent = useCallback(() => {
+    if (validationCallbackRef.current) {
+      validationCallbackRef.current(content);
+    }
+  }, [content]);
+  // Auto-save effect
+  useEffect(() => {
+    if (isAutoSaveEnabled && isDirty && autoSaveInterval > 0) {
+      autoSaveRef.current = setTimeout(() => {
+        saveContent();
+      }, autoSaveInterval);
+      return () => {
+        if (autoSaveRef.current) {
+          clearTimeout(autoSaveRef.current);
+        }
+      };
+    }
+  }, [isDirty, isAutoSaveEnabled, autoSaveInterval, saveContent]);
+  // Cleanup effect with performance optimization
+  useCleanup(() => {
+    if (onChangeDebounceRef.current) {
+      clearTimeout(onChangeDebounceRef.current);
+      onChangeDebounceRef.current = null;
+    }
+    if (validationDebounceRef.current) {
+      clearTimeout(validationDebounceRef.current);
+      validationDebounceRef.current = null;
+    }
+    if (autoSaveRef.current) {
+      clearTimeout(autoSaveRef.current);
+      autoSaveRef.current = null;
+    }
+  });
+  // Return state and methods
+  return {
+    // Content state
+    content: currentContent,
+    isDirty,
+    lastSaved,
+    isAutoSaveEnabled,
+    isLargeContent,
+    // Content methods
+    updateContent,
+    hasContent,
+    getContentSize,
+    resetContent,
+    saveContent,
+    markAsSaved,
+    // Auto-save methods
+    toggleAutoSave,
+    // Validation methods
+    registerValidationCallback,
+    unregisterValidationCallback,
+    validateContent,
+    // Computed properties
+    canSave: isDirty && onSave !== null,
+    isEmpty: !hasContent(),
+    characterCount: getContentSize(),
+    // Performance indicators
+    shouldShowPerformanceWarning: isLargeContent,
+    contentAnalysis
+  };
+};
+export default useEditorContent;

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

@@ -0,0 +1,407 @@
+/**
+ * useInAppContent - Custom hook for managing device-specific content in InApp variant
+ *
+ * Manages separate HTML content for Android and iOS devices with sync functionality
+ */
+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'
+};
+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
+};
+/**
+ * Default InApp content for different devices
+ */
+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>`
+};
+/**
+ * Custom hook for InApp content management with device-specific content
+ *
+ * @param {Object} initialContent - Initial content for both devices
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.autoSave - Enable auto-save functionality
+ * @param {number} options.autoSaveInterval - Auto-save interval in milliseconds
+ * @param {Function} options.onSave - Callback when content is saved
+ * @param {Function} options.onChange - Callback when content changes
+ * @returns {Object} Content state and methods
+ */
+export const useInAppContent = (initialContent = {}, options = {}) => {
+  // Destructure options with better defaults
+  const {
+    autoSave = AUTO_SAVE_CONFIG.DEFAULT_ENABLED,
+    autoSaveInterval = AUTO_SAVE_CONFIG.DEFAULT_INTERVAL,
+    onSave,
+    onChange
+  } = options;
+  // Destructure device types for cleaner code
+  const { ANDROID, IOS } = DEVICE_TYPES;
+  // 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]
+  }));
+  // Current active device
+  const [activeDevice, setActiveDevice] = useState(ANDROID);
+  // Content sync state
+  const [keepContentSame, setKeepContentSame] = useState(false);
+  // Dirty state tracking
+  const [isDirty, setIsDirty] = useState(false);
+  const [lastSaved, setLastSaved] = useState(null);
+  // Auto-save timer
+  const autoSaveTimerRef = useRef(null);
+  const changeTimestampRef = useRef(null);
+  // Refs to store current values for auto-save
+  const onSaveRef = useRef(onSave);
+  const deviceContentRef = useRef(deviceContent);
+  // Update refs when values change
+  useEffect(() => {
+    onSaveRef.current = onSave;
+  }, [onSave]);
+  useEffect(() => {
+    deviceContentRef.current = deviceContent;
+  }, [deviceContent]);
+  // Get current active content
+  const currentContent = useMemo(() => {
+    return deviceContent[activeDevice] || '';
+  }, [deviceContent, activeDevice]);
+  // Update content for current device
+  const updateContent = useCallback((newContent) => {
+    // Validate input
+    if (typeof newContent !== CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE) {
+      console.warn('useInAppContent: newContent must be a string');
+      return;
+    }
+    // Create the updated content object
+    let updatedDeviceContent;
+    if (keepContentSame) {
+      // When sync is enabled, update both devices with the same content
+      updatedDeviceContent = {
+        [ANDROID]: newContent,
+        [IOS]: newContent
+      };
+    } else {
+      // When sync is disabled, update only the current device
+      setDeviceContent(prev => {
+        updatedDeviceContent = {
+          ...prev,
+          [activeDevice]: newContent
+        };
+        return updatedDeviceContent;
+      });
+      // Early return for independent mode to avoid double state update
+      setIsDirty(true);
+      changeTimestampRef.current = Date.now();
+      // Trigger onChange callback with optional chaining
+      onChange?.(updatedDeviceContent, 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) {
+        if (autoSaveTimerRef.current) {
+          clearTimeout(autoSaveTimerRef.current);
+        }
+        autoSaveTimerRef.current = setTimeout(() => {
+          // Use current values at time of execution
+          setIsDirty(false);
+          setLastSaved(new Date());
+          if (autoSaveTimerRef.current) {
+            clearTimeout(autoSaveTimerRef.current);
+            autoSaveTimerRef.current = null;
+          }
+          // Get the current onSave callback and deviceContent from refs
+          const currentOnSave = onSaveRef.current;
+          currentOnSave?.(deviceContentRef.current);
+        }, autoSaveInterval);
+      }
+      return;
+    }
+    // Handle sync mode state update
+    setDeviceContent(updatedDeviceContent);
+    setIsDirty(true);
+    changeTimestampRef.current = Date.now();
+    // Trigger onChange callback with optional chaining
+    onChange?.(updatedDeviceContent, activeDevice);
+    // Setup auto-save
+    if (autoSave && autoSaveInterval > AUTO_SAVE_CONFIG.MIN_AUTO_SAVE_INTERVAL_MS && newContent.length > CONTENT_VALIDATION.MIN_CONTENT_LENGTH) {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+      autoSaveTimerRef.current = setTimeout(() => {
+        // Use current values at time of execution
+        setIsDirty(false);
+        setLastSaved(new Date());
+        if (autoSaveTimerRef.current) {
+          clearTimeout(autoSaveTimerRef.current);
+          autoSaveTimerRef.current = null;
+        }
+        // Get the current onSave callback and deviceContent from refs
+        const currentOnSave = onSaveRef.current;
+        currentOnSave?.(deviceContentRef.current);
+      }, autoSaveInterval);
+    }
+  }, [activeDevice, keepContentSame, autoSave, autoSaveInterval, onChange]);
+  // Switch active device with better validation
+  const switchDevice = useCallback((device) => {
+    const validDevices = [ANDROID, IOS];
+    if (device !== activeDevice && validDevices.includes(device)) {
+      setActiveDevice(device);
+    } else if (!validDevices.includes(device)) {
+      console.warn(`useInAppContent: Invalid device type "${device}". Valid types are: ${validDevices.join(', ')}`);
+    }
+  }, [activeDevice, ANDROID, IOS]);
+  // Toggle content sync
+  const toggleContentSync = useCallback((enabled) => {
+    setKeepContentSame(enabled);
+    if (enabled) {
+      // When enabling sync, copy current device content to the other device
+      const currentActiveContent = deviceContent[activeDevice];
+      const syncedContent = {
+        [ANDROID]: currentActiveContent,
+        [IOS]: currentActiveContent
+      };
+      setDeviceContent(syncedContent);
+      setIsDirty(true);
+    }
+    // When disabled (enabled = false), we don't need to do anything special
+    // Each device will maintain its current content independently
+  }, [activeDevice, deviceContent]);
+  // Mark content as saved
+  const markAsSaved = useCallback(() => {
+    setIsDirty(false);
+    setLastSaved(new Date());
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+      autoSaveTimerRef.current = null;
+    }
+    onSave?.(deviceContent);
+  }, [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]);
+  // 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]);
+  // Get content for specific device
+  const getDeviceContent = useCallback((device) => {
+    return deviceContent[device] || '';
+  }, [deviceContent]);
+  // Set content for specific device
+  const setDeviceContent_ = useCallback((device, content) => {
+    const validDevices = [ANDROID, IOS];
+    if (!validDevices.includes(device)) {
+      console.warn(`useInAppContent: Invalid device type "${device}". Valid types are: ${validDevices.join(', ')}`);
+      return;
+    }
+    if (typeof content !== CONTENT_VALIDATION.DEFAULT_CONTENT_TYPE) {
+      console.warn('useInAppContent: content must be a string');
+      return;
+    }
+    if (keepContentSame) {
+      // Update both devices when sync is enabled
+      setDeviceContent({
+        [ANDROID]: content,
+        [IOS]: content
+      });
+    } else {
+      // Update specific device
+      setDeviceContent(prev => ({
+        ...prev,
+        [device]: content
+      }));
+    }
+    setIsDirty(true);
+  }, [keepContentSame, ANDROID, IOS]);
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    // Current state
+    content: currentContent,
+    deviceContent,
+    activeDevice,
+    keepContentSame,
+    isDirty,
+    lastSaved,
+    hasContent,
+    // Content management
+    updateContent,
+    getDeviceContent,
+    setDeviceContent: setDeviceContent_,
+    getContentSize,
+    // Device management
+    switchDevice,
+    toggleContentSync,
+    // Save management
+    markAsSaved
+  };
+};