@capillarytech/creatives-library 8.0.262-alpha.0 → 8.0.262

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';
 
@@ -19,48 +18,27 @@ 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';
 
 // Styles
 import './_validationTabs.scss';
-import {StyledCapTab} from '../../../../v2Containers/MobilePushNew/style';
+import { StyledCapTab } from '../../../../v2Containers/MobilePushNew/style';
 
 /**
- * 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 };
 };
 
 /**
@@ -83,24 +61,13 @@ const isBlockingError = (issue) => {
   return false;
 };
 
-/**
- * Get icon based on whether issue is blocking error or warning
- * Blocking errors use error-icon, warnings use alert-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="alert-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 +75,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 +106,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 +141,13 @@ const ValidationTabContent = ({
 ValidationTabContent.propTypes = {
   issues: PropTypes.array,
   onErrorClick: PropTypes.func,
+  onExpand: PropTypes.func,
 };
 
 ValidationTabContent.defaultProps = {
   issues: [],
   onErrorClick: null,
+  onExpand: null,
 };
 
 /**
@@ -187,137 +157,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 +254,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 +276,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/hooks/useValidation.js

@@ -29,6 +29,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
@@ -350,14 +365,19 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     });
 
     // 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',
         message: `Security issue: ${issue.type}`,
-        line: 1,
-        column: 1,
+        line,
+        column,
         rule: isBlocking ? 'sanitizer.dangerousProtocolDetected' : 'security-violation',
         severity: isBlocking ? 'error' : 'warning',
         source: 'security',
@@ -399,7 +419,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)

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -31,9 +31,8 @@ export const LABEL_ISSUE_PATTERNS = [
   'alt-require',
 ];
 
-// Tab keys for error categorization
+// Tab keys: Errors = blocking, Warnings = non-blocking
 export const ERROR_TAB_KEYS = {
-  HTML: 'html',
-  LABEL: 'label',
-  LIQUID: 'liquid',
+  ERRORS: 'errors',
+  WARNINGS: 'warnings',
 };

package/v2Containers/CreativesContainer/index.js

@@ -126,9 +126,7 @@ export class Creatives extends React.Component {
       // HTML Editor validation state (for email channel)
       htmlEditorValidationState: {
         isContentEmpty: true,
-        issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 0,
-        },
+        issueCounts: { errors: 0, warnings: 0, total: 0 },
         validationComplete: false, // Flag to track if validation has completed
         errorsAcknowledged: false, // Flag to track if user has acknowledged errors by clicking redirection icon
       },

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -262,10 +262,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }
@@ -392,10 +391,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }
@@ -522,10 +520,9 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -651,55 +651,11 @@ const EmailHTMLEditor = (props) => {
       setSubjectError('');
     }
 
-    // 1.5. Check for HTML/Label/Liquid validation errors (excluding API errors which we just cleared)
-    // If errors exist, block save and reset acknowledgment
-    // Try to get issue counts from ref first, fallback to stored state
-    let issueCounts = {
-      html: 0, label: 0, liquid: 0, total: 0,
-    };
-    let allIssues = [];
-    if (htmlEditorRef.current && typeof htmlEditorRef.current.getAllIssues === 'function') {
-      allIssues = htmlEditorRef.current.getAllIssues();
-      // Filter out API validation errors - they're validated separately via API call
-      const clientSideIssues = allIssues.filter((issue) => issue.rule !== 'liquid-api-validation' && issue.rule !== 'standard-api-validation');
-
-      // Count only client-side errors
-      issueCounts = {
-        html: 0,
-        label: 0,
-        liquid: 0,
-        total: clientSideIssues.length,
-      };
-
-      clientSideIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        // Check if it's a liquid error (client-side only, not API)
-        if (source === 'liquid-validator' && rule !== 'liquid-api-validation') {
-          issueCounts.liquid++;
-        } else if (
-          messageLower.includes('tag must be paired')
-          || messageLower.includes('open tag match failed')
-          || messageLower.includes('closed tag match failed')
-          || messageLower.includes('unclosed')
-          || messageLower.includes('missing required')
-          || ruleLower.includes('tag-pair')
-          || ruleLower.includes('attr-value-not-empty')
-          || ruleLower.includes('attr-no-duplication')
-          || ruleLower.includes('tag-self-close')
-          || ruleLower.includes('spec-char-escape')
-          || ruleLower.includes('tagname-lowercase')
-          || ruleLower.includes('attr-lowercase')
-          || ruleLower.includes('src-not-empty')
-          || ruleLower.includes('alt-require')
-        ) {
-          issueCounts.label++;
-        } else {
-          issueCounts.html++;
-        }
-      });
+    // 1.5. Check for validation errors (Errors = blocking, Warnings = non-blocking)
+    // Get issue counts from ref or stored state
+    let issueCounts = { errors: 0, warnings: 0, total: 0 };
+    if (htmlEditorRef.current && typeof htmlEditorRef.current.getIssueCounts === 'function') {
+      issueCounts = htmlEditorRef.current.getIssueCounts();
     } else if (lastValidationStateRef.current?.issueCounts) {
       issueCounts = lastValidationStateRef.current.issueCounts;
     }