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

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -12,14 +12,14 @@
  * Note: Uses injectIntl with forwardRef to provide direct access to CodeEditorPane via ref
  */
 
-import React, { useRef, useCallback, useMemo, useState } from 'react';
+import React, {
+  useRef, useCallback, useMemo, useState, useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
-import { Layout } from 'antd'; // Fallback - no Cap UI equivalent
 import { injectIntl, intlShape } from 'react-intl';
 
 // Cap UI Components (First Preference)
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapModal from '@capillarytech/cap-ui-library/CapModal';
@@ -40,7 +40,9 @@ import { useLayoutState } from './hooks/useLayoutState';
 import { useValidation } from './hooks/useValidation';
 
 // Constants
-import { HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT } from './constants';
+import {
+  HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT, TAG, EMBEDDED, DEFAULT, FULL, ALL, SMS, EMAIL,
+} from './constants';
 
 // Styles
 import './_htmlEditor.scss';
@@ -61,6 +63,21 @@ const HTMLEditor = ({
   showFullscreenButton = true,
   autoSave = true,
   autoSaveInterval = 30000, // 30 seconds
+  // Tag-related props - tags are fetched and managed by parent component (EmailHTMLEditor, INAPP, etc.)
+  tags = [],
+  injectedTags = {},
+  location,
+  eventContextTags = [],
+  selectedOfferDetails = [],
+  channel,
+  userLocale = 'en',
+  moduleFilterEnabled = true,
+  onTagContextChange, // Parent component handles tag fetching
+  onTagSelect = null,
+  onContextChange = null,
+  globalActions = null,
+  isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
+  isFullMode = true, // Full mode vs library mode - controls layout and visibility
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -69,9 +86,7 @@ const HTMLEditor = ({
   const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState(false);
 
   // Get the currently active editor ref based on fullscreen state
-  const getActiveEditorRef = useCallback(() => {
-    return isFullscreenModalOpen ? modalEditorRef : mainEditorRef;
-  }, [isFullscreenModalOpen]);
+  const getActiveEditorRef = useCallback(() => isFullscreenModalOpen ? modalEditorRef : mainEditorRef, [isFullscreenModalOpen]);
 
   // Initialize custom hooks for state management - always call both hooks to follow Rules of Hooks
   const isEmailVariant = variant === HTML_EDITOR_VARIANTS.EMAIL;
@@ -80,7 +95,7 @@ const HTMLEditor = ({
     autoSave: isEmailVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isEmailVariant ? onSave : null,
-    onChange: isEmailVariant ? onContentChange : null
+    onChange: isEmailVariant ? onContentChange : null,
   };
 
   const emailContent = useEditorContent(
@@ -97,7 +112,7 @@ const HTMLEditor = ({
       // Convert string content to device-specific format
       inAppInitialContent = {
         [DEVICE_TYPES.ANDROID]: initialContent,
-        [DEVICE_TYPES.IOS]: initialContent
+        [DEVICE_TYPES.IOS]: initialContent,
       };
     } else {
       // Use provided device-specific content
@@ -109,7 +124,7 @@ const HTMLEditor = ({
     autoSave: isInAppVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isInAppVariant ? onSave : null,
-    onChange: isInAppVariant ? onContentChange : null
+    onChange: isInAppVariant ? onContentChange : null,
   };
 
   const inAppContent = useInAppContent(inAppInitialContent, inAppOptions);
@@ -117,6 +132,64 @@ const HTMLEditor = ({
   // Use appropriate content hook based on variant
   const content = variant === HTML_EDITOR_VARIANTS.EMAIL ? emailContent : inAppContent;
 
+  // Update content when initialContent prop changes (for edit mode)
+  // This ensures the editor updates when template data loads
+  useEffect(() => {
+    if (isEmailVariant && emailContent && initialContent !== undefined && initialContent !== null) {
+      // Only update if content is different to avoid unnecessary updates
+      if (emailContent.content !== initialContent) {
+        emailContent.updateContent(initialContent, true); // immediate update
+      }
+    } else if (isInAppVariant && inAppContent && initialContent !== undefined && initialContent !== null) {
+      // Handle InApp variant updates
+      const contentToUpdate = typeof initialContent === 'string'
+        ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
+        : initialContent;
+      if (inAppContent.updateContent) {
+        const currentContent = inAppContent.getDeviceContent?.(inAppContent.activeDevice);
+        const newContent = contentToUpdate[inAppContent.activeDevice] || contentToUpdate[DEVICE_TYPES.ANDROID] || '';
+        if (currentContent !== newContent) {
+          inAppContent.updateContent(newContent, true);
+        }
+      }
+    }
+  }, [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) => {
+    // If onContextChange is provided, use it instead of making our own API call
+    // This prevents duplicate API calls when parent component handles tag fetching
+    if (onContextChange) {
+      onContextChange(contextData);
+      return;
+    }
+
+    // Only make API call if onContextChange is not provided and globalActions is available
+    if (!globalActions || !location) {
+      return;
+    }
+
+    const { type } = location.query || {};
+    const tempData = (contextData || '').toLowerCase();
+    const isEmbedded = type === EMBEDDED;
+    const embedded = isEmbedded ? type : FULL;
+    const context = tempData === ALL ? DEFAULT : tempData;
+
+    // Determine layout: INAPP variant uses SMS, EMAIL variant uses EMAIL
+    const layout = variant === HTML_EDITOR_VARIANTS.INAPP ? SMS : EMAIL;
+
+    const query = {
+      layout,
+      type: TAG,
+      context,
+      embedded,
+    };
+
+    // Call the API via Redux action - this will trigger the saga which calls Api.fetchSchemaForEntity
+    // The API endpoint will be: /meta/TAG?query={...}
+    globalActions.fetchSchemaForEntity(query);
+  }, [variant, globalActions, location, onContextChange]);
+
   // Destructure content properties for cleaner access throughout component
   const {
     activeDevice,
@@ -124,14 +197,14 @@ const HTMLEditor = ({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    markAsSaved
+    markAsSaved,
   } = content || {};
 
   const layout = useLayoutState({
     splitSizes: [50, 50],
     viewMode: 'desktop',
     mobileWidth: 375,
-    isFullscreen: false
+    isFullscreen: false,
   });
 
   // Get current content for validation based on variant
@@ -158,7 +231,7 @@ const HTMLEditor = ({
       'sanitizer.productionValidHtml': messages.sanitizer.productionValidHtml,
       'sanitizer.productionSanitized': messages.sanitizer.productionSanitized,
       'sanitizer.productionInlineCss': messages.sanitizer.productionInlineCss,
-      'sanitizer.productionLargeContent': messages.sanitizer.productionLargeContent
+      'sanitizer.productionLargeContent': messages.sanitizer.productionLargeContent,
     };
 
     const messageObj = messageMap[messageKey];
@@ -179,7 +252,7 @@ const HTMLEditor = ({
       'validator.largeImageDetected': messages.validator.largeImageDetected,
       'validator.unclosedCssRule': messages.validator.unclosedCssRule,
       'validator.emptyCssRule': messages.validator.emptyCssRule,
-      'validator.cssValidationFailed': messages.validator.cssValidationFailed
+      'validator.cssValidationFailed': messages.validator.cssValidationFailed,
     };
 
     const messageObj = messageMap[messageKey];
@@ -190,57 +263,69 @@ const HTMLEditor = ({
     enableRealTime: true,
     debounceMs: 500,
     enableSanitization: true,
-    securityLevel: 'standard'
+    securityLevel: 'standard',
   }, formatSanitizerMessage, formatValidatorMessage);
 
   // Handle label insertion at cursor position
+  // Note: This is called for notification purposes only when tag is inserted via CodeEditorPane
+  // The actual insertion happens in CodeEditorPane.handleTagSelect
   const handleLabelInsert = useCallback((label, position) => {
-    // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
-    const activeEditorRef = getActiveEditorRef();
-    const editor = activeEditorRef.current;
-
-    if (!editor) {
-      CapNotification.warning({
-        message: intl.formatMessage(messages.labelInsertError),
-        description: intl.formatMessage(messages.editorNotReady),
-        duration: 3
-      });
-      return;
-    }
-
-    // Check if the required methods exist
-    if (typeof editor?.insertText !== 'function') {
-      CapNotification.error({
-        message: intl.formatMessage(messages.labelInsertError),
-        description: intl.formatMessage(messages.editorMethodNotAvailable),
-        duration: 4
-      });
-      return;
-    }
-
-    try {
-      // Get current cursor position or use provided position
-      const cursor = position !== undefined
-        ? position
-        : (typeof editor?.getCursor === 'function' ? editor.getCursor() : 0);
-
-      // Insert label at cursor position
-      editor.insertText(label, cursor);
+    // If position is explicitly null, it means the editor wasn't ready when tag was selected
+    // In this case, CodeEditorPane couldn't insert the tag, so we should try here
+    if (position === null) {
+      // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
+      const activeEditorRef = getActiveEditorRef();
+      const editor = activeEditorRef.current;
+
+      if (!editor) {
+        CapNotification.warning({
+          message: intl.formatMessage(messages.labelInsertError),
+          description: intl.formatMessage(messages.editorNotReady),
+          duration: 3,
+        });
+        return;
+      }
 
-      // Focus the editor if focus method is available
-      editor?.focus?.();
+      // Check if the required methods exist
+      if (typeof editor?.insertText !== 'function') {
+        CapNotification.error({
+          message: intl.formatMessage(messages.labelInsertError),
+          description: intl.formatMessage(messages.editorMethodNotAvailable),
+          duration: 4,
+        });
+        return;
+      }
 
-      // Show success notification
+      try {
+        // Get current cursor position
+        const cursor = typeof editor?.getCursor === 'function' ? editor.getCursor() : 0;
+
+        // Insert label at cursor position
+        editor.insertText(label, cursor);
+
+        // Focus the editor if focus method is available
+        editor?.focus?.();
+
+        // Show success notification
+        CapNotification.success({
+          message: intl.formatMessage(messages.labelInserted),
+          description: intl.formatMessage(messages.labelInsertedDescription, { label }),
+          duration: 2,
+        });
+      } catch (error) {
+        CapNotification.error({
+          message: intl.formatMessage(messages.labelInsertError),
+          description: error.message,
+          duration: 4,
+        });
+      }
+    } else {
+      // Tag was already inserted by CodeEditorPane (position is a valid number)
+      // Just show success notification - no need to access editor
       CapNotification.success({
         message: intl.formatMessage(messages.labelInserted),
         description: intl.formatMessage(messages.labelInsertedDescription, { label }),
-        duration: 2
-      });
-    } catch (error) {
-      CapNotification.error({
-        message: intl.formatMessage(messages.labelInsertError),
-        description: error.message,
-        duration: 4
+        duration: 2,
       });
     }
   }, [intl, getActiveEditorRef]);
@@ -259,13 +344,13 @@ const HTMLEditor = ({
 
       CapNotification.success({
         message: intl.formatMessage(messages.contentSaved),
-        duration: 2
+        duration: 2,
       });
     } catch (error) {
       CapNotification.error({
         message: intl.formatMessage(messages.saveError),
         description: error.message,
-        duration: 4
+        duration: 4,
       });
     }
   }, [content, onSave, intl, markAsSaved]);
@@ -307,6 +392,7 @@ const HTMLEditor = ({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -319,13 +405,14 @@ const HTMLEditor = ({
       switchDevice,
       toggleContentSync,
       getDeviceContent,
-      layoutType
-    })
+      layoutType,
+    }),
   }), [
     variant,
     content,
     layout,
     validation,
+    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -336,7 +423,7 @@ const HTMLEditor = ({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    layoutType
+    layoutType,
   ]);
 
   // Loading state
@@ -348,9 +435,14 @@ const HTMLEditor = ({
     );
   }
 
+  // Add library-mode class when not in full mode
+  // Note: isFullMode defaults to true, so library mode is when isFullMode === false
+  const isLibraryMode = isFullMode === false;
+  const editorClassName = `html-editor html-editor--${variant} ${isLibraryMode ? 'html-editor--library-mode' : ''} ${className}`.trim();
+
   return (
     <EditorProvider value={contextValue}>
-      <div className={`html-editor html-editor--${variant} ${className}`} {...props}>
+      <div className={editorClassName} {...props}>
         {/* Editor Toolbar - Conditional based on variant */}
         {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
           <EditorToolbar
@@ -387,19 +479,23 @@ const HTMLEditor = ({
               ref={mainEditorRef}
               readOnly={readOnly}
               onLabelInsert={handleLabelInsert}
+              onErrorClick={handleValidationErrorClick}
+              tags={tags}
+              injectedTags={injectedTags}
+              location={location}
+              eventContextTags={eventContextTags}
+              selectedOfferDetails={selectedOfferDetails}
+              channel={channel}
+              userLocale={userLocale}
+              moduleFilterEnabled={moduleFilterEnabled}
+              onTagContextChange={onTagContextChange}
+              onTagSelect={onTagSelect}
+              onContextChange={handleContextChange}
             />
 
             {/* Preview Pane */}
             <PreviewPane />
           </SplitContainer>
-
-          {/* Validation Display - Full Width Below Split Container */}
-          <ValidationErrorDisplay
-            validation={validation}
-            onErrorClick={handleValidationErrorClick}
-            variant={variant}
-            className="html-editor-validation"
-          />
         </CapRow>
 
         {/* Fullscreen Modal */}
@@ -411,17 +507,17 @@ const HTMLEditor = ({
           maskClosable={false}
           centered
           closable={false}
-          width={"90vw"}
+          width="90vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className="html-editor-fullscreen">
+          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar
-                showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                showFullscreenButton // Show fullscreen button in modal to allow closing
                 onLabelInsert={handleLabelInsert}
                 onSave={handleSave}
-                isFullscreenMode={true}
+                isFullscreenMode
                 onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
               />
             ) : (
@@ -434,10 +530,10 @@ const HTMLEditor = ({
                   onKeepContentSameChange={toggleContentSync}
                 />
                 <EditorToolbar
-                  showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                  showFullscreenButton // Show fullscreen button in modal to allow closing
                   onLabelInsert={handleLabelInsert}
                   onSave={handleSave}
-                  isFullscreenMode={true}
+                  isFullscreenMode
                   onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
                   variant={variant}
                   showTitle={false} // Hide title in InApp variant
@@ -452,21 +548,23 @@ const HTMLEditor = ({
                 <CodeEditorPane
                   ref={modalEditorRef}
                   readOnly={readOnly}
-                  isFullscreenMode={true}
+                  isFullscreenMode
                   onLabelInsert={handleLabelInsert}
+                  onErrorClick={handleValidationErrorClick}
+                  tags={tags}
+                  injectedTags={injectedTags}
+                  location={location}
+                  eventContextTags={eventContextTags}
+                  selectedOfferDetails={selectedOfferDetails}
+                  channel={channel}
+                  userLocale={userLocale}
+                  moduleFilterEnabled={moduleFilterEnabled}
+                  onTagContextChange={onTagContextChange}
                 />
 
-              {/* Preview Pane */}
-              <PreviewPane isFullscreenMode={true} isModalContext={true} />
-            </SplitContainer>
-
-            {/* Validation Display in Modal */}
-            <ValidationErrorDisplay
-              validation={validation}
-              onErrorClick={handleValidationErrorClick}
-              variant={variant}
-              className="html-editor-validation"
-            />
+                {/* Preview Pane */}
+                <PreviewPane isFullscreenMode isModalContext />
+              </SplitContainer>
             </CapRow>
           </CapRow>
         </CapModal>
@@ -481,7 +579,7 @@ HTMLEditor.propTypes = {
   layoutType: PropTypes.string, // Layout type for InApp variant
   initialContent: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.objectOf(PropTypes.string) // Per-device content for INAPP variant
+    PropTypes.objectOf(PropTypes.string), // Per-device content for INAPP variant
   ]),
   onSave: PropTypes.func,
   onContentChange: PropTypes.func,
@@ -489,11 +587,27 @@ HTMLEditor.propTypes = {
   readOnly: PropTypes.bool,
   showFullscreenButton: PropTypes.bool,
   autoSave: PropTypes.bool,
-  autoSaveInterval: PropTypes.number
+  autoSaveInterval: PropTypes.number,
+  // Tag-related props - tags are fetched and managed by parent component
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  eventContextTags: PropTypes.array,
+  selectedOfferDetails: PropTypes.array,
+  channel: PropTypes.string,
+  userLocale: PropTypes.string,
+  moduleFilterEnabled: PropTypes.bool,
+  onTagContextChange: PropTypes.func, // Required - parent must handle tag fetching
+  onTagSelect: PropTypes.func,
+  onContextChange: PropTypes.func, // Deprecated: use globalActions instead
+  globalActions: PropTypes.object,
+  isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
+  isFullMode: PropTypes.bool, // Full mode vs library mode
 };
 
 HTMLEditor.defaultProps = {
   variant: HTML_EDITOR_VARIANTS.EMAIL, // Default to email variant
+  layoutType: null,
   initialContent: null, // Will use default from useEditorContent hook
   onSave: null,
   onContentChange: null,
@@ -501,7 +615,22 @@ HTMLEditor.defaultProps = {
   readOnly: false,
   showFullscreenButton: true,
   autoSave: true,
-  autoSaveInterval: 30000
+  autoSaveInterval: 30000,
+  // Tag-related defaults - tags are fetched and managed by parent component
+  tags: [],
+  injectedTags: {},
+  location: null,
+  eventContextTags: [],
+  selectedOfferDetails: [],
+  channel: null,
+  userLocale: 'en',
+  moduleFilterEnabled: true,
+  onTagContextChange: null, // Parent component should provide this
+  onTagSelect: null,
+  onContextChange: null,
+  globalActions: null, // Redux actions for API calls
+  isLiquidEnabled: false,
+  isFullMode: true, // Default to full mode
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref