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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.262-alpha.1",
+  "version": "8.0.263",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/ErrorInfoNote/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
@@ -15,57 +15,45 @@ import messages from './messages';
 import { processErrors } from './utils';
 import ErrorTypeRenderer from './ErrorTypeRenderer';
 import { ANDROID, GENERIC, IOS } from '../../v2Containers/CreativesContainer/constants';
-import { LABEL_ISSUE_PATTERNS, ERROR_TAB_KEYS } from '../HtmlEditor/utils/validationConstants';
+import { ERROR_TAB_KEYS } from '../HtmlEditor/utils/validationConstants';
 import { SEVERITY } from '../HtmlEditor/components/ValidationPanel/constants';
 import { LIQUID_DOC_URL } from './constants';
 
 const { CapLabelInline } = CapLabel;
 
 /**
- * Categorize error messages into HTML, Label, and Liquid categories
+ * Group messages into Errors (blocking) and Warnings (non-blocking).
+ * STANDARD_ERROR_MSG + LIQUID_ERROR_MSG = errors; optional STANDARD_WARNING_MSG = warnings.
  */
-const categorizeErrorMessages = (standardErrors, liquidErrors) => {
-  const htmlIssues = [];
-  const labelIssues = [];
-  const liquidIssues = [];
-
-  // Process standard errors
-  (standardErrors || []).forEach((error, index) => {
-    const errorLower = (error || '').toLowerCase();
-
-    // Check if it's a Label (tag syntax) issue
-    const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-      (pattern) => errorLower.includes(pattern.toLowerCase()),
-    );
+const groupByErrorsAndWarnings = (standardErrors, liquidErrors, standardWarnings = []) => {
+  const errors = [];
 
-    if (isLabelIssue) {
-      labelIssues.push({
-        message: error,
-        severity: SEVERITY.ERROR,
-        index,
-        source: 'label',
-      });
-    } else {
-      htmlIssues.push({
-        message: error,
-        severity: SEVERITY.ERROR,
-        index,
-        source: 'html',
-      });
-    }
+  (standardErrors || []).forEach((message, index) => {
+    errors.push({
+      message,
+      severity: SEVERITY.ERROR,
+      index,
+      source: 'standard',
+    });
   });
 
-  // Process liquid errors
-  (liquidErrors || []).forEach((error, index) => {
-    liquidIssues.push({
-      message: error,
+  (liquidErrors || []).forEach((message, index) => {
+    errors.push({
+      message,
       severity: SEVERITY.ERROR,
       index,
       source: 'liquid',
     });
   });
 
-  return { htmlIssues, labelIssues, liquidIssues };
+  const warnings = (standardWarnings || []).map((message, index) => ({
+    message,
+    severity: SEVERITY.WARNING,
+    index,
+    source: 'standard',
+  }));
+
+  return { errors, warnings };
 };
 
 /**
@@ -90,16 +78,6 @@ const cleanErrorMessage = (message, lineMatch, charMatch, ruleMatch) => {
   return displayMessage.trim();
 };
 
-/**
- * Get icon based on severity
- */
-const getSeverityIcon = (severity) => {
-  if (severity === SEVERITY.WARNING) {
-    return <CapIcon type="warning" className="error-info-note__icon error-info-note__icon--warning" />;
-  }
-  return <CapIcon type="warning-circle" className="error-info-note__icon error-info-note__icon--error" />;
-};
-
 /**
  * Tab content component
  */
@@ -139,9 +117,6 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
             key={key}
             className={`error-info-note__item error-info-note__item--${severity || 'error'}`}
           >
-            <CapRow className="error-info-note__item-icon">
-              {getSeverityIcon(severity)}
-            </CapRow>
             <CapRow className="error-info-note__item-content">
               <CapLabelInline type="label2" className="error-info-note__item-message">
                 {displayMessage}
@@ -222,6 +197,7 @@ export const ErrorInfoNote = (props) => {
   const {
     LIQUID_ERROR_MSG: rawLiquidErrors = [],
     STANDARD_ERROR_MSG: rawStandardErrors = [],
+    STANDARD_WARNING_MSG: rawStandardWarnings = [],
   } = errorMessages || {};
 
   // Detect if platform-specific (ANDROID/IOS) or GENERIC
@@ -280,33 +256,26 @@ export const ErrorInfoNote = (props) => {
     );
   }
 
-  // Categorize errors for tabbed interface
-  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => categorizeErrorMessages(
+  // Group into Errors (blocking) and Warnings (non-blocking)
+  const { errors: errorIssues, warnings: warningIssues } = useMemo(() => groupByErrorsAndWarnings(
     Array.isArray(rawStandardErrors) ? rawStandardErrors : [],
     Array.isArray(rawLiquidErrors) ? rawLiquidErrors : [],
-  ), [rawStandardErrors, rawLiquidErrors]);
-
-  // 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;
-
-  // Set default active key
-  useMemo(() => {
-    if (!activeKey) {
-      if (htmlCount > 0) {
-        setActiveKey(ERROR_TAB_KEYS.HTML);
-      } else if (labelCount > 0) {
-        setActiveKey(ERROR_TAB_KEYS.LABEL);
-      } else if (liquidCount > 0) {
-        // Show liquid tab even when liquid is disabled if liquid content is detected
-        setActiveKey(ERROR_TAB_KEYS.LIQUID);
-      }
+    Array.isArray(rawStandardWarnings) ? rawStandardWarnings : [],
+  ), [rawStandardErrors, rawLiquidErrors, rawStandardWarnings]);
+
+  const errorsCount = errorIssues.length;
+  const warningsCount = warningIssues.length;
+  const totalCount = errorsCount + warningsCount;
+  const hasLiquidErrors = Array.isArray(rawLiquidErrors) && rawLiquidErrors.length > 0;
+
+  // Default active tab: errors if any, else warnings
+  useEffect(() => {
+    if (errorsCount > 0) {
+      setActiveKey(ERROR_TAB_KEYS.ERRORS);
+    } else if (warningsCount > 0) {
+      setActiveKey(ERROR_TAB_KEYS.WARNINGS);
     }
-  }, [htmlCount, labelCount, liquidCount, activeKey]);
+  }, [errorsCount, warningsCount]);
 
   // Handle close
   const handleClose = () => {
@@ -329,48 +298,25 @@ export const ErrorInfoNote = (props) => {
     return null;
   }
 
-  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
+  // Build tab panes: only Errors and Warnings
   const tabPanes = [];
 
-  if (htmlCount > 0) {
-    tabPanes.push({
-      key: ERROR_TAB_KEYS.HTML,
-      tab: (
-        <CapLabelInline type="label2" className="error-info-note__tab-label">
-          <FormattedMessage {...messages.htmlIssues} />
-          <CapLabelInline type="label2" className="error-info-note__tab-count">
-            (
-            {htmlCount}
-            )
-          </CapLabelInline>
-        </CapLabelInline>
-      ),
-      content: (
-        <TabContent
-          issues={htmlIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  if (labelCount > 0) {
+  if (errorsCount > 0) {
     tabPanes.push({
-      key: ERROR_TAB_KEYS.LABEL,
+      key: ERROR_TAB_KEYS.ERRORS,
       tab: (
-        <CapLabelInline type="label2" className="error-info-note__tab-label">
-          <FormattedMessage {...messages.labelIssues} />
+        <CapLabelInline type="label2" className="error-info-note__tab-label error-info-note__tab-label--errors">
+          <FormattedMessage {...messages.errors} />
           <CapLabelInline type="label2" className="error-info-note__tab-count">
             (
-            {labelCount}
+            {errorsCount}
             )
           </CapLabelInline>
         </CapLabelInline>
       ),
       content: (
         <TabContent
-          issues={labelIssues}
+          issues={errorIssues}
           onErrorClick={onErrorClick}
           intl={intl}
         />
@@ -378,24 +324,22 @@ export const ErrorInfoNote = (props) => {
     });
   }
 
-  // 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) {
+  if (warningsCount > 0) {
     tabPanes.push({
-      key: ERROR_TAB_KEYS.LIQUID,
+      key: ERROR_TAB_KEYS.WARNINGS,
       tab: (
-        <CapLabelInline type="label2" className="error-info-note__tab-label">
-          <FormattedMessage {...messages.liquidIssues} />
+        <CapLabelInline type="label2" className="error-info-note__tab-label error-info-note__tab-label--warnings">
+          <FormattedMessage {...messages.warnings} />
           <CapLabelInline type="label2" className="error-info-note__tab-count">
             (
-            {liquidCount}
+            {warningsCount}
             )
           </CapLabelInline>
         </CapLabelInline>
       ),
       content: (
         <TabContent
-          issues={liquidIssues}
+          issues={warningIssues}
           onErrorClick={onErrorClick}
           intl={intl}
         />
@@ -413,7 +357,7 @@ export const ErrorInfoNote = (props) => {
           className="error-info-note__tabs"
         />
         <CapRow className="error-info-note__actions">
-          {activeKey === ERROR_TAB_KEYS.LIQUID && isLiquidEnabled && (
+          {hasLiquidErrors && isLiquidEnabled && (
             <CapButton
               type="flat"
               className="error-info-note__liquid-doc"
@@ -462,7 +406,7 @@ const ErrorSection = ({
             <CapButton
               type="flat"
               className="add-btn"
-              onClick={() => window.open('https://docs.capillarytech.com/docs/liquid-language-in-messages', '_blank')}
+              onClick={() => window.open(LIQUID_DOC_URL, '_blank')}
             >
               <FormattedMessage {...messages.liquidDoc} />
               <CapIcon size="s" type="launch" />
@@ -531,6 +475,7 @@ ErrorInfoNote.propTypes = {
         GENERIC: PropTypes.array,
       }),
     ]),
+    STANDARD_WARNING_MSG: PropTypes.array,
   }),
   onErrorClick: PropTypes.func,
   onClose: PropTypes.func,

package/v2Components/ErrorInfoNote/messages.js

@@ -6,18 +6,14 @@
 import { defineMessages } from "react-intl";
 const scope = "creatives.componentsV2.ErrorInfoNote";
 export default defineMessages({
-  // Tab labels for new tabbed interface
-  htmlIssues: {
-    id: `${scope}.htmlIssues`,
-    defaultMessage: "HTML issues",
-  },
-  labelIssues: {
-    id: `${scope}.labelIssues`,
-    defaultMessage: "Label issues",
-  },
-  liquidIssues: {
-    id: `${scope}.liquidIssues`,
-    defaultMessage: "Liquid issues",
+  // Tab labels: Errors = blocking, Warnings = non-blocking
+  errors: {
+    id: `${scope}.errors`,
+    defaultMessage: "Errors",
+  },
+  warnings: {
+    id: `${scope}.warnings`,
+    defaultMessage: "Warnings",
   },
   navigateToError: {
     id: `${scope}.navigateToError`,

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -41,8 +41,9 @@ import { useValidation } from './hooks/useValidation';
 // Constants
 import {
   HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT, TAG, EMBEDDED, DEFAULT, FULL, ALL, SMS, EMAIL,
+  BLOCKING_ERROR_RULE_IDS,
+  VALIDATION_SEVERITY,
 } from './constants';
-import { ISSUE_SOURCES, LABEL_ISSUE_PATTERNS } from './utils/validationConstants';
 
 // Styles
 import './_htmlEditor.scss';
@@ -50,6 +51,31 @@ import './components/FullscreenModal/_fullscreenModal.scss';
 
 // Messages
 import messages from './messages';
+import { ISSUE_SOURCES } from './utils/validationConstants';
+
+/** Check if an issue is a blocking error (Errors tab). Non-blocking = Warnings. */
+const isBlockingError = (issue) => {
+  const { rule, source, severity } = issue || {};
+  if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') return true;
+  if (source === ISSUE_SOURCES.LIQUID && severity === VALIDATION_SEVERITY.ERROR) return true;
+  if (BLOCKING_ERROR_RULE_IDS.includes(rule)) return true;
+  return false;
+};
+
+/** Count issues as Errors (blocking) and Warnings (non-blocking). */
+const countIssuesBySeverity = (allIssues) => {
+  let errors = 0;
+  let warnings = 0;
+  (allIssues || []).forEach((issue) => {
+    if (isBlockingError(issue)) errors += 1;
+    else warnings += 1;
+  });
+  return {
+    errors,
+    warnings,
+    total: (allIssues || []).length,
+  };
+};
 
 const HTMLEditor = forwardRef(({
   intl,
@@ -276,96 +302,17 @@ const HTMLEditor = forwardRef(({
     getContent: () => currentContent,
     isContentEmpty: () => !currentContent || currentContent.trim() === '',
     getIssueCounts: () => {
-      // Check if validation is ready and has getAllIssues method
       if (!validation || typeof validation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
+        return { errors: 0, warnings: 0, total: 0 };
       }
-      const allIssues = validation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        // Check if it's a Liquid issue
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount++;
-          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) {
-          labelCount++;
-          return;
-        }
-
-        // Default to HTML issues
-        htmlCount++;
-      });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
+      return countIssuesBySeverity(validation.getAllIssues());
     },
     getValidationState: () => ({
       isValidating: validation?.isValidating || false,
       hasErrors: validation?.hasBlockingErrors || false,
-      issueCounts: (() => {
-        if (!validation || typeof validation.getAllIssues !== 'function') {
-          return {
-            html: 0, label: 0, liquid: 0, total: 0,
-          };
-        }
-        const allIssues = validation.getAllIssues();
-        // Use same logic as getIssueCounts
-        let htmlCount = 0;
-        let labelCount = 0;
-        let liquidCount = 0;
-
-        allIssues.forEach((issue) => {
-          const { source, rule, message } = issue;
-          const messageLower = (message || '').toLowerCase();
-          const ruleLower = (rule || '').toLowerCase();
-
-          if (source === ISSUE_SOURCES.LIQUID) {
-            liquidCount++;
-            return;
-          }
-
-          const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-            (pattern) => messageLower.includes(pattern.toLowerCase())
-                || ruleLower.includes(pattern.toLowerCase()),
-          );
-
-          if (isLabelIssue) {
-            labelCount++;
-            return;
-          }
-
-          htmlCount++;
-        });
-
-        return {
-          html: htmlCount,
-          label: labelCount,
-          liquid: liquidCount,
-          total: allIssues.length,
-        };
-      })(),
+      issueCounts: !validation || typeof validation.getAllIssues !== 'function'
+        ? { errors: 0, warnings: 0, total: 0 }
+        : countIssuesBySeverity(validation.getAllIssues()),
     })
     ,
   }), [validation, currentContent, apiValidationErrors]); // Include apiValidationErrors so ref methods return updated counts
@@ -402,49 +349,13 @@ const HTMLEditor = forwardRef(({
       return;
     }
 
-    // Calculate issue counts from validation using ref (avoid stale closure)
+    // Calculate issue counts: Errors (blocking) and Warnings (non-blocking)
     const calculateIssueCounts = () => {
       const currentValidation = validationRef.current;
       if (!currentValidation || typeof currentValidation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
+        return { errors: 0, warnings: 0, total: 0 };
       }
-      const allIssues = currentValidation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount += 1;
-          return;
-        }
-
-        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-          (pattern) => messageLower.includes(pattern.toLowerCase())
-            || ruleLower.includes(pattern.toLowerCase()),
-        );
-
-        if (isLabelIssue) {
-          labelCount += 1;
-          return;
-        }
-
-        htmlCount += 1;
-      });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
+      return countIssuesBySeverity(currentValidation.getAllIssues());
     };
 
     const issueCounts = calculateIssueCounts();
@@ -465,9 +376,8 @@ const HTMLEditor = forwardRef(({
       || lastState.validationComplete !== newState.validationComplete
       || lastState.hasErrors !== newState.hasErrors
       || lastState.issueCounts?.total !== newState.issueCounts?.total
-      || lastState.issueCounts?.html !== newState.issueCounts?.html
-      || lastState.issueCounts?.label !== newState.issueCounts?.label
-      || lastState.issueCounts?.liquid !== newState.issueCounts?.liquid;
+      || lastState.issueCounts?.errors !== newState.issueCounts?.errors
+      || lastState.issueCounts?.warnings !== newState.issueCounts?.warnings;
 
     if (hasChanged) {
       lastSentValidationStateRef.current = newState;
@@ -487,9 +397,7 @@ const HTMLEditor = forwardRef(({
     const isContentEmpty = !currentContent || currentContent.trim() === '';
     onValidationChangeRef.current({
       isContentEmpty,
-      issueCounts: {
-        html: 0, label: 0, liquid: 0, total: 0,
-      },
+      issueCounts: { errors: 0, warnings: 0, total: 0 },
       validationComplete: false, // Validation hasn't run yet
       hasErrors: false,
     });
@@ -507,51 +415,10 @@ const HTMLEditor = forwardRef(({
       return;
     }
 
-    // Recalculate issue counts including API errors
-    const calculateIssueCounts = () => {
-      if (!validation || typeof validation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
-      }
-      const allIssues = validation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount += 1;
-          return;
-        }
-
-        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-          (pattern) => messageLower.includes(pattern.toLowerCase())
-            || ruleLower.includes(pattern.toLowerCase()),
-        );
-
-        if (isLabelIssue) {
-          labelCount += 1;
-          return;
-        }
-
-        htmlCount += 1;
-      });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
-    };
-
-    const issueCounts = calculateIssueCounts();
+    // Recalculate issue counts (Errors + Warnings) including API errors
+    const issueCounts = !validation || typeof validation.getAllIssues !== 'function'
+      ? { errors: 0, warnings: 0, total: 0 }
+      : countIssuesBySeverity(validation.getAllIssues());
     const isContentEmpty = !currentContent || currentContent.trim() === '';
 
     const newState = {
@@ -565,9 +432,8 @@ const HTMLEditor = forwardRef(({
     const hasChanged = !lastState
       || lastState.hasErrors !== newState.hasErrors
       || lastState.issueCounts?.total !== newState.issueCounts?.total
-      || lastState.issueCounts?.html !== newState.issueCounts?.html
-      || lastState.issueCounts?.label !== newState.issueCounts?.label
-      || lastState.issueCounts?.liquid !== newState.issueCounts?.liquid;
+      || lastState.issueCounts?.errors !== newState.issueCounts?.errors
+      || lastState.issueCounts?.warnings !== newState.issueCounts?.warnings;
 
     if (hasChanged) {
       lastSentValidationStateRef.current = newState;
@@ -643,10 +509,10 @@ const HTMLEditor = forwardRef(({
   const handleSave = useCallback(() => {
     try {
       const { html, css, javascript } = content?.content || {};
-      const currentContent = { html, css, javascript };
+      const contentToSave = { html, css, javascript };
 
       if (onSave) {
-        onSave(currentContent);
+        onSave(contentToSave);
       }
 
       markAsSaved?.();
@@ -819,10 +685,10 @@ const HTMLEditor = forwardRef(({
           visible={isFullscreenModalOpen}
           onCancel={handleCloseFullscreen}
           footer={null}
-          maskClosable={false}
+          maskClosable
           centered
           closable={false}
-          width="90vw"
+          width="93vw"
           className="html-editor-fullscreen-modal"
         >
           <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>