@capillarytech/creatives-library 8.0.262-alpha.1 → 8.0.263

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -1,13 +1,12 @@
 /**
  * ValidationTabs Component
  *
- * Displays validation errors in a tabbed interface with 3 categories:
- * - HTML issues: General HTML/CSS validation errors and warnings
- * - Label issues: Tag syntax errors (open/close tags, attributes, brackets)
- * - Liquid issues: Liquid expression errors (shown when liquid content is detected, even if liquid feature is disabled)
+ * Displays validation issues in a tabbed interface with 2 categories:
+ * - Errors: Blocking issues (API errors, Rule Group #1, client-side Liquid errors)
+ * - Warnings: Non-blocking issues
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 
@@ -18,49 +17,29 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 
 // Messages
 import messages from './messages';
-import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
-import { ISSUE_SOURCES, LABEL_ISSUE_PATTERNS } from '../../utils/validationConstants';
+import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../../constants';
 
 // Styles
 import './_validationTabs.scss';
-import {StyledCapTab} from '../../../../v2Containers/MobilePushNew/style';
+import { StyledCapTab } from '../../../../v2Containers/MobilePushNew/style';
+import { ISSUE_SOURCES } from '../../utils/validationConstants';
 
 /**
- * Categorize issues into HTML, Label, and Liquid categories
+ * Group issues into Errors (blocking) and Warnings (non-blocking)
  */
-const categorizeIssues = (allIssues) => {
-  const htmlIssues = [];
-  const labelIssues = [];
-  const liquidIssues = [];
+const groupByErrorsAndWarnings = (allIssues) => {
+  const errors = [];
+  const warnings = [];
 
   allIssues.forEach((issue) => {
-    const { source, rule, message } = issue;
-    const messageLower = (message || '').toLowerCase();
-    const ruleLower = (rule || '').toLowerCase();
-
-    // Check if it's a Liquid issue - ONLY by source, not by message content
-    // This prevents false positives where HTML errors mention liquid syntax
-    if (source === ISSUE_SOURCES.LIQUID) {
-      liquidIssues.push(issue);
-      return;
-    }
-
-    // Check if it's a Label (tag syntax) issue
-    const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-      (pattern) => messageLower.includes(pattern.toLowerCase())
-        || ruleLower.includes(pattern.toLowerCase()),
-    );
-
-    if (isLabelIssue) {
-      labelIssues.push(issue);
-      return;
+    if (isBlockingError(issue)) {
+      errors.push(issue);
+    } else {
+      warnings.push(issue);
     }
-
-    // Default to HTML issues
-    htmlIssues.push(issue);
   });
 
-  return { htmlIssues, labelIssues, liquidIssues };
+  return { errors, warnings };
 };
 
 /**
@@ -73,7 +52,7 @@ const isBlockingError = (issue) => {
     return true;
   }
   // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  if (source === 'liquid-validator' && severity === 'error') {
+  if (source === ISSUE_SOURCES.LIQUID && severity === VALIDATION_SEVERITY.ERROR) {
     return true;
   }
   // Rule Group #1 errors are blocking
@@ -83,24 +62,13 @@ const isBlockingError = (issue) => {
   return false;
 };
 
-/**
- * Get icon based on whether issue is blocking error or warning
- * Blocking errors use error-icon, warnings use warning
- */
-const getSeverityIcon = (issue) => {
-  if (isBlockingError(issue)) {
-    return <CapIcon type="error-icon" className="validation-tabs__icon validation-tabs__icon--error" />;
-  }
-  // All other issues (warnings, non-blocking) use warning icon
-  return <CapIcon type="warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
-};
-
 /**
  * ValidationTabContent - Renders the content for each tab
  */
 const ValidationTabContent = ({
   issues,
   onErrorClick,
+  onExpand,
 }) => {
   if (!issues || issues.length === 0) {
     return null;
@@ -108,6 +76,10 @@ const ValidationTabContent = ({
 
   const handleNavigateClick = (issue, e) => {
     e.stopPropagation();
+    // Expand panel when redirection is clicked so it does not stay stuck to footer
+    if (onExpand) {
+      onExpand();
+    }
     if (onErrorClick) {
       // Always call onErrorClick to acknowledge the error (enables buttons)
       // If line number exists, navigate to it; otherwise just acknowledge and focus editor
@@ -135,9 +107,6 @@ const ValidationTabContent = ({
             key={key}
             className={`validation-tabs__item validation-tabs__item--${displaySeverity}`}
           >
-            <div className="validation-tabs__item-icon">
-              {getSeverityIcon(issue)}
-            </div>
             <div className="validation-tabs__item-content">
               <span className="validation-tabs__item-message">
                 {message}
@@ -173,11 +142,13 @@ const ValidationTabContent = ({
 ValidationTabContent.propTypes = {
   issues: PropTypes.array,
   onErrorClick: PropTypes.func,
+  onExpand: PropTypes.func,
 };
 
 ValidationTabContent.defaultProps = {
   issues: [],
   onErrorClick: null,
+  onExpand: null,
 };
 
 /**
@@ -187,137 +158,95 @@ const ValidationTabs = ({
   intl,
   validation,
   onErrorClick,
-  onClose,
+  isCollapsed = false,
+  onToggleCollapse,
+  onExpand,
   className,
 }) => {
-  const [activeKey, setActiveKey] = useState(null);
+  const [activeKey, setActiveKey] = useState('errors');
 
-  // Categorize issues
-  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => {
+  // Group issues into Errors (blocking) and Warnings (non-blocking)
+  const { errors, warnings } = useMemo(() => {
     if (!validation) {
-      return { htmlIssues: [], labelIssues: [], liquidIssues: [] };
+      return { errors: [], warnings: [] };
     }
-
-    // Get all issues from validation
     const allIssues = validation.getAllIssues ? validation.getAllIssues() : [];
-    const categorized = categorizeIssues(allIssues);
-    return categorized;
+    return groupByErrorsAndWarnings(allIssues);
   }, [validation]);
 
-  // Calculate counts
-  const htmlCount = htmlIssues.length;
-  const labelCount = labelIssues.length;
-  const liquidCount = liquidIssues.length;
-  // Include liquid issues in total count even when liquid is disabled
-  // This ensures liquid errors are shown when liquid content is detected but feature is disabled
-  const totalCount = htmlCount + labelCount + liquidCount;
+  const errorsCount = errors.length;
+  const warningsCount = warnings.length;
+  const totalCount = errorsCount + warningsCount;
 
-  // Set default active key when issues change
-  useMemo(() => {
-    if (htmlCount > 0 && !activeKey) {
-      setActiveKey('html');
-    } else if (labelCount > 0 && !activeKey) {
-      setActiveKey('label');
-    } else if (liquidCount > 0 && !activeKey) {
-      // Show liquid tab even when liquid is disabled if liquid content is detected
-      setActiveKey('liquid');
+  // Default active tab: errors if any, else warnings
+  useEffect(() => {
+    if (errorsCount > 0) {
+      setActiveKey('errors');
+    } else if (warningsCount > 0) {
+      setActiveKey('warnings');
     }
-  }, [htmlCount, labelCount, liquidCount, activeKey]);
+  }, [errorsCount, warningsCount]);
 
-  // Don't render if no issues
   if (totalCount === 0) {
     return null;
   }
 
-  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
   const tabPanes = [];
 
-  if (htmlCount > 0) {
+  if (errorsCount > 0) {
     tabPanes.push({
-      key: 'html',
+      key: 'errors',
       tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.htmlIssues)} (${htmlCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.htmlIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {htmlCount}
-              )
-            </span>
+        <CapTooltip title={`${intl.formatMessage(messages.errors)} (${errorsCount})`}>
+          <span className="validation-tabs__tab-label validation-tabs__tab-label--errors">
+            <FormattedMessage {...messages.errors} />
+            <span className="validation-tabs__tab-count">({errorsCount})</span>
           </span>
         </CapTooltip>
       ),
       content: (
         <ValidationTabContent
-          issues={htmlIssues}
+          issues={errors}
           onErrorClick={onErrorClick}
-          intl={intl}
+          onExpand={onExpand}
         />
       ),
     });
   }
 
-  if (labelCount > 0) {
+  if (warningsCount > 0) {
     tabPanes.push({
-      key: 'label',
+      key: 'warnings',
       tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.labelIssues)} (${labelCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.labelIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {labelCount}
-              )
-            </span>
+        <CapTooltip title={`${intl.formatMessage(messages.warnings)} (${warningsCount})`}>
+          <span className="validation-tabs__tab-label validation-tabs__tab-label--warnings">
+            <FormattedMessage {...messages.warnings} />
+            <span className="validation-tabs__tab-count">({warningsCount})</span>
           </span>
         </CapTooltip>
       ),
       content: (
         <ValidationTabContent
-          issues={labelIssues}
+          issues={warnings}
           onErrorClick={onErrorClick}
-          intl={intl}
+          onExpand={onExpand}
         />
       ),
     });
   }
 
-  // Show liquid issues tab even when liquid is disabled if liquid content is detected
-  // This allows users to see errors when they add liquid content but liquid feature is not enabled
-  if (liquidCount > 0) {
-    tabPanes.push({
-      key: 'liquid',
-      tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.liquidIssues)} (${liquidCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.liquidIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {liquidCount}
-              )
-            </span>
-          </span>
-        </CapTooltip>
-      ),
-      content: (
-        <ValidationTabContent
-          issues={liquidIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  // Handle close
-  const handleClose = () => {
-    if (onClose) {
-      onClose();
+  const handleToggleCollapse = () => {
+    if (onToggleCollapse) {
+      onToggleCollapse();
     }
   };
 
+  const collapseLabel = isCollapsed
+    ? intl.formatMessage(messages.expandPanel)
+    : intl.formatMessage(messages.collapsePanel);
+
   return (
-    <div className={`validation-tabs ${className || ''}`}>
+    <div className={`validation-tabs ${isCollapsed ? 'validation-tabs--collapsed' : ''} ${className || ''}`}>
       <CapRow className="validation-tabs__header">
         <StyledCapTab
           className="validation-tabs__tabs"
@@ -326,14 +255,14 @@ const ValidationTabs = ({
           panes={tabPanes}
         />
         <CapRow className="validation-tabs__actions">
-          <CapTooltip title={intl.formatMessage(messages.closePanel)}>
+          <CapTooltip title={collapseLabel}>
             <button
               type="button"
-              className="validation-tabs__close"
-              onClick={handleClose}
-              aria-label={intl.formatMessage(messages.closePanel)}
+              className="validation-tabs__collapse-toggle"
+              onClick={handleToggleCollapse}
+              aria-label={collapseLabel}
             >
-              <CapIcon type="close" />
+              <CapIcon type={isCollapsed ? 'chevron-up' : 'chevron-down'} />
             </button>
           </CapTooltip>
         </CapRow>
@@ -348,16 +277,18 @@ ValidationTabs.propTypes = {
     getAllIssues: PropTypes.func,
   }),
   onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
+  isCollapsed: PropTypes.bool,
+  onToggleCollapse: PropTypes.func,
+  onExpand: PropTypes.func,
   className: PropTypes.string,
 };
 
 ValidationTabs.defaultProps = {
   validation: null,
   onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: false,
+  isCollapsed: false,
+  onToggleCollapse: null,
+  onExpand: null,
   className: '',
 };
 

package/v2Components/HtmlEditor/components/ValidationTabs/messages.js

@@ -9,18 +9,14 @@ import { defineMessages } from 'react-intl';
 const scope = 'app.components.HtmlEditor.ValidationTabs';
 
 export default defineMessages({
-  // Tab labels
-  htmlIssues: {
-    id: `${scope}.htmlIssues`,
-    defaultMessage: 'HTML issues',
+  // Tab labels (Errors = blocking, Warnings = non-blocking)
+  errors: {
+    id: `${scope}.errors`,
+    defaultMessage: 'Errors',
   },
-  labelIssues: {
-    id: `${scope}.labelIssues`,
-    defaultMessage: 'Label issues',
-  },
-  liquidIssues: {
-    id: `${scope}.liquidIssues`,
-    defaultMessage: 'Liquid issues',
+  warnings: {
+    id: `${scope}.warnings`,
+    defaultMessage: 'Warnings',
   },
 
   // Error item labels
@@ -38,9 +34,13 @@ export default defineMessages({
     id: `${scope}.navigateToError`,
     defaultMessage: 'Go to error location',
   },
-  closePanel: {
-    id: `${scope}.closePanel`,
-    defaultMessage: 'Close validation panel',
+  collapsePanel: {
+    id: `${scope}.collapsePanel`,
+    defaultMessage: 'Collapse validation panel',
+  },
+  expandPanel: {
+    id: `${scope}.expandPanel`,
+    defaultMessage: 'Expand validation panel',
   },
 
   // Liquid documentation

package/v2Components/HtmlEditor/constants.js

@@ -4,6 +4,9 @@
  * Centralized constants for the HTML Editor component
  */
 
+// Documentation URL for Liquid / HTML editor
+export const LIQUID_DOC_URL = 'https://docs.capillarytech.com/docs/liquid-language-in-messages';
+
 // HTML Editor Variants
 export const HTML_EDITOR_VARIANTS = {
   EMAIL: 'email',

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -10,7 +10,8 @@ import {
 } from 'react';
 import { validateHTML, extractAndValidateCSS } from '../utils/htmlValidator';
 import { sanitizeHTML, isContentSafe, findUnsafeContent } from '../utils/contentSanitizer';
-import { BLOCKING_ERROR_RULE_IDS } from '../constants';
+import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../constants';
+import { ISSUE_SOURCES } from '../utils/validationConstants';
 
 /**
  * Custom hook for managing HTML/CSS validation
@@ -29,6 +30,21 @@ const getLineNumberFromPosition = (text, position) => {
   return text.substring(0, position).split('\n').length;
 };
 
+/**
+ * Get 1-based line and column from a character position in text
+ */
+const getLineAndColumnFromPosition = (text, position) => {
+  if (!text || position === undefined || position < 0) {
+    return { line: 1, column: 1 };
+  }
+  const before = text.substring(0, position);
+  const lines = before.split('\n');
+  const line = lines.length;
+  const lastLine = lines[lines.length - 1] || '';
+  const column = lastLine.length + 1;
+  return { line, column };
+};
+
 /**
  * Find line number for a tag or pattern in content
  * Used for API errors to locate where the error occurs
@@ -326,47 +342,52 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     const apiLiquidErrors = (apiValidationErrors?.liquidErrors || []).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: errorMessage,
         line: extractedLine,
         column: null,
         rule: 'liquid-api-validation',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       };
     });
 
     const apiStandardErrors = (apiValidationErrors?.standardErrors || []).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: errorMessage,
         line: extractedLine,
         column: null,
         rule: 'standard-api-validation',
-        severity: 'error',
+        severity: VALIDATION_SEVERITY.ERROR,
         source: 'api-validator',
       };
     });
 
     // Security: protocol types are Rule Group #1 (blocking); others are warnings
+    // Use issue.position (from findUnsafeContent) to show real line/column when available
     const PROTOCOL_TYPES = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
+    const contentStr = typeof content === 'string' ? content : '';
     const securityAsIssues = (validationState.securityIssues || []).map((issue) => {
       const isBlocking = PROTOCOL_TYPES.includes(issue?.type);
+      const { line, column } = (issue?.position !== undefined && contentStr)
+        ? getLineAndColumnFromPosition(contentStr, issue.position)
+        : { line: 1, column: 1 };
       return {
-        type: isBlocking ? 'error' : 'warning',
+        type: isBlocking ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING,
         message: `Security issue: ${issue.type}`,
-        line: 1,
-        column: 1,
+        line,
+        column,
         rule: isBlocking ? 'sanitizer.dangerousProtocolDetected' : 'security-violation',
-        severity: isBlocking ? 'error' : 'warning',
+        severity: isBlocking ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING,
         source: 'security',
       };
     });
 
     // Sanitization warnings (Rule Group #1 entries have rule set by contentSanitizer)
     const sanitizationAsIssues = (validationState.sanitizationWarnings || []).map((w) => {
-      const sev = BLOCKING_ERROR_RULE_IDS.includes(w.rule) ? 'error' : 'warning';
+      const sev = BLOCKING_ERROR_RULE_IDS.includes(w.rule) ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING;
       return {
         ...w,
         severity: sev,
@@ -399,7 +420,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
     // Ensure we always return an array
     return Array.isArray(allIssues) ? allIssues : [];
-  }, [validationState, apiValidationErrors, extractLineNumberFromMessage]);
+  }, [validationState, apiValidationErrors, extractLineNumberFromMessage, content]);
 
   /**
    * Check if validation is clean (no errors or warnings)
@@ -431,7 +452,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
   const protocolTypes = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
   // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === 'liquid-validator' && e.severity === 'error');
+  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
   const hasBlockingErrors = (validationState.sanitizationWarnings || []).some((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)) || (validationState.securityIssues || []).some((s) => protocolTypes.includes(s?.type)) || hasApiErrors || hasClientSideLiquidErrors;
 
   return {

package/v2Components/HtmlEditor/messages.js

@@ -328,6 +328,16 @@ export default defineMessages({
     },
   },
 
+  htmlEditorTooltip: {
+    id: `${scope}.htmlEditorTooltip`,
+    defaultMessage: 'This editor supports standard HTML for emails. Avoid CSS frameworks, external stylesheets, and scripts. {docLink}',
+  },
+
+  viewDocumentation: {
+    id: `${scope}.viewDocumentation`,
+    defaultMessage: 'View documentation',
+  },
+
   // HTML Validator messages
   validator: {
     // General validation messages