@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

package/v2Components/ErrorInfoNote/index.js

@@ -1,445 +1,21 @@
-import React, { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapTab from '@capillarytech/cap-ui-library/CapTab';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import React from "react";
+import PropTypes from "prop-types";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapList from "@capillarytech/cap-ui-library/CapList";
 import {
   FormattedMessage,
+  FormattedNumber,
   injectIntl,
-} from 'react-intl';
-import './style.scss';
-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 { SEVERITY } from '../HtmlEditor/components/ValidationPanel/constants';
-import { LIQUID_DOC_URL } from './constants';
+} from "react-intl";
+import "./style.scss";
+import messages from "./messages";
+import { processErrors } from "./utils";
+import ErrorTypeRenderer from "./ErrorTypeRenderer";
+import { ANDROID, GENERIC, IOS } from "../../v2Containers/CreativesContainer/constants";
 
-const { CapLabelInline } = CapLabel;
-
-/**
- * Categorize error messages into HTML, Label, and Liquid categories
- */
-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()),
-    );
-
-    if (isLabelIssue) {
-      labelIssues.push({
-        message: error,
-        severity: SEVERITY.ERROR,
-        index,
-        source: 'label',
-      });
-    } else {
-      htmlIssues.push({
-        message: error,
-        severity: SEVERITY.ERROR,
-        index,
-        source: 'html',
-      });
-    }
-  });
-
-  // Process liquid errors
-  (liquidErrors || []).forEach((error, index) => {
-    liquidIssues.push({
-      message: error,
-      severity: SEVERITY.ERROR,
-      index,
-      source: 'liquid',
-    });
-  });
-
-  return { htmlIssues, labelIssues, liquidIssues };
-};
-
-/**
- * Clean error message by removing line/char and rule parts
- * @param {string} message - Original error message
- * @param {RegExpMatchArray|null} lineMatch - Line number match result
- * @param {RegExpMatchArray|null} charMatch - Character number match result
- * @param {RegExpMatchArray|null} ruleMatch - Rule name match result
- * @returns {string} Cleaned message without line/char/rule information
- */
-const cleanErrorMessage = (message, lineMatch, charMatch, ruleMatch) => {
-  let displayMessage = message;
-  if (lineMatch) {
-    displayMessage = displayMessage.replace(/Line\s+\d+,?\s*/gi, '');
-  }
-  if (charMatch) {
-    displayMessage = displayMessage.replace(/Char\s+\d+\.?\s*/gi, '');
-  }
-  if (ruleMatch) {
-    displayMessage = displayMessage.replace(/•\s*[a-z-]+$/i, '');
-  }
-  return displayMessage.trim();
-};
-
-/**
- * Get icon based on severity
- */
-const getSeverityIcon = (severity) => {
-  if (severity === SEVERITY.WARNING) {
-    return <CapIcon type="alert-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
- */
-const TabContent = ({ issues, onErrorClick, intl }) => {
-  if (!issues || issues.length === 0) {
-    return null;
-  }
-
-  const handleNavigateClick = (issue, e) => {
-    e.stopPropagation();
-    if (onErrorClick) {
-      onErrorClick(issue);
-    }
-  };
-
-  return (
-    <CapRow className="error-info-note__content">
-      {issues.map((issue, index) => {
-        const { severity, message } = issue;
-        const key = `${message}-${index}`;
-
-        // Parse line and char from message if present (format: "... Line X, Char Y.")
-        const lineMatch = message.match(/Line\s+(\d+)/i);
-        const charMatch = message.match(/Char\s+(\d+)/i);
-        const line = lineMatch ? parseInt(lineMatch[1], 10) : null;
-        const char = charMatch ? parseInt(charMatch[1], 10) : null;
-
-        // Extract rule from message (format: "... • rule-name")
-        const ruleMatch = message.match(/•\s*([a-z-]+)$/i);
-        const rule = ruleMatch ? ruleMatch[1] : null;
-
-        // Clean message (remove line/char and rule parts for display)
-        const displayMessage = cleanErrorMessage(message, lineMatch, charMatch, ruleMatch);
-
-        return (
-          <CapRow
-            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}
-              </CapLabelInline>
-              {line && (
-                <CapLabelInline type="label2" className="error-info-note__item-location">
-                  <FormattedMessage {...messages.line} />
-                  {' '}
-                  {line}
-                  {char ? (
-                    <>
-                      ,
-                      {' '}
-                      <FormattedMessage {...messages.char} />
-                      {' '}
-                      {char}
-                    </>
-                  ) : ''}
-                  .
-                </CapLabelInline>
-              )}
-              {rule && (
-                <CapLabelInline type="label2" className="error-info-note__item-rule">
-                  •
-                  {' '}
-                  {rule}
-                </CapLabelInline>
-              )}
-            </CapRow>
-            {onErrorClick && (
-              <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}>
-                <CapButton
-                  type="flat"
-                  className="error-info-note__item-navigate"
-                  onClick={(e) => handleNavigateClick({ ...issue, line, column: char }, e)}
-                  aria-label={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}
-                >
-                  <CapIcon type="redirection" />
-                </CapButton>
-              </CapTooltip>
-            )}
-          </CapRow>
-        );
-      })}
-    </CapRow>
-  );
-};
-
-TabContent.propTypes = {
-  issues: PropTypes.array,
-  onErrorClick: PropTypes.func,
-  intl: PropTypes.object,
-};
-
-TabContent.defaultProps = {
-  issues: [],
-  onErrorClick: null,
-  intl: null,
-};
-
-/**
- * ErrorInfoNote Component with Tabbed Interface
- * @param {boolean} useLegacyDisplay - If true, uses simple list display instead of tabbed interface (for BEE Editor)
- */
-export const ErrorInfoNote = (props) => {
-  const {
-    errorMessages,
-    onErrorClick,
-    onClose,
-    isLiquidEnabled = true,
-    intl,
-    useLegacyDisplay = false, // Use simple list display instead of tabs (for BEE Editor)
-  } = props;
-
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [activeKey, setActiveKey] = useState(null);
-
-  const {
-    LIQUID_ERROR_MSG: rawLiquidErrors = [],
-    STANDARD_ERROR_MSG: rawStandardErrors = [],
-  } = errorMessages || {};
-
-  // Detect if platform-specific (ANDROID/IOS) or GENERIC
-  const isObject = typeof rawStandardErrors === 'object' && rawStandardErrors !== null;
-  const isNotArray = !Array.isArray(rawLiquidErrors);
-  const hasPlatformKeys = isObject && isNotArray && [ANDROID, IOS, GENERIC].some((key) => key in rawLiquidErrors);
-
-  // For platform-specific errors or when useLegacyDisplay is true, use the legacy renderer
-  if (hasPlatformKeys) {
-    // Process errors for both platforms - they use the same structure but different platform parameters
-    const createPlatformErrors = (platform) => ({
-      STANDARD: processErrors(rawStandardErrors, 'standard', platform, messages),
-      LIQUID: processErrors(rawLiquidErrors, 'liquid', platform, messages),
-    });
-
-    const androidErrors = createPlatformErrors(ANDROID);
-    const iosErrors = createPlatformErrors(IOS);
-    return (
-      <ErrorTypeRenderer
-        genericErrors={null}
-        androidErrors={androidErrors}
-        iosErrors={iosErrors}
-        ErrorSectionComponent={ErrorSection}
-      />
-    );
-  }
-
-  // For BEE Editor (useLegacyDisplay=true), use simple list display without tabs
-  if (useLegacyDisplay) {
-    const standardErrors = Array.isArray(rawStandardErrors) ? rawStandardErrors : [];
-    const liquidErrors = Array.isArray(rawLiquidErrors) ? rawLiquidErrors : [];
-    const hasStandardErrors = standardErrors.length > 0;
-    const hasLiquidErrors = liquidErrors.length > 0 && isLiquidEnabled;
-
-    if (!hasStandardErrors && !hasLiquidErrors) {
-      return null;
-    }
-
-    return (
-      <CapRow className="error-container error-container--legacy">
-        {hasStandardErrors && (
-          <ErrorSection
-            title={<FormattedMessage {...messages.standardErrorHeader} />}
-            errors={standardErrors}
-            liquidError={false}
-          />
-        )}
-        {hasLiquidErrors && (
-          <ErrorSection
-            title={<FormattedMessage {...messages.dynamicErrorHeader} />}
-            errors={liquidErrors}
-            liquidError
-          />
-        )}
-      </CapRow>
-    );
-  }
-
-  // Categorize errors for tabbed interface
-  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => categorizeErrorMessages(
-    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);
-      }
-    }
-  }, [htmlCount, labelCount, liquidCount, activeKey]);
-
-  // Handle close
-  const handleClose = () => {
-    setIsDismissed(true);
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  // Handle liquid documentation click
-  const handleLiquidDocClick = () => {
-    window.open(
-      LIQUID_DOC_URL,
-      '_blank',
-    );
-  };
-
-  // Don't render if no issues or dismissed
-  if (totalCount === 0 || isDismissed) {
-    return null;
-  }
-
-  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
-  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) {
-    tabPanes.push({
-      key: ERROR_TAB_KEYS.LABEL,
-      tab: (
-        <CapLabelInline type="label2" className="error-info-note__tab-label">
-          <FormattedMessage {...messages.labelIssues} />
-          <CapLabelInline type="label2" className="error-info-note__tab-count">
-            (
-            {labelCount}
-            )
-          </CapLabelInline>
-        </CapLabelInline>
-      ),
-      content: (
-        <TabContent
-          issues={labelIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  // 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: ERROR_TAB_KEYS.LIQUID,
-      tab: (
-        <CapLabelInline type="label2" className="error-info-note__tab-label">
-          <FormattedMessage {...messages.liquidIssues} />
-          <CapLabelInline type="label2" className="error-info-note__tab-count">
-            (
-            {liquidCount}
-            )
-          </CapLabelInline>
-        </CapLabelInline>
-      ),
-      content: (
-        <TabContent
-          issues={liquidIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  return (
-    <CapRow className="error-container error-container--tabs">
-      <CapRow className="error-info-note__header">
-        <CapTab
-          activeKey={activeKey || (tabPanes[0]?.key)}
-          onChange={setActiveKey}
-          panes={tabPanes}
-          className="error-info-note__tabs"
-        />
-        <CapRow className="error-info-note__actions">
-          {activeKey === ERROR_TAB_KEYS.LIQUID && isLiquidEnabled && (
-            <CapButton
-              type="flat"
-              className="error-info-note__liquid-doc"
-              onClick={handleLiquidDocClick}
-            >
-              <FormattedMessage {...messages.liquidDoc} />
-              <CapIcon size="s" type="launch" />
-            </CapButton>
-          )}
-          <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}>
-            <CapButton
-              type="flat"
-              className="error-info-note__close"
-              onClick={handleClose}
-              aria-label={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}
-            >
-              <CapIcon type="close" />
-            </CapButton>
-          </CapTooltip>
-        </CapRow>
-      </CapRow>
-    </CapRow>
-  );
-};
-
-// Legacy ErrorSection component for platform-specific errors (backwards compatibility)
 const ErrorSection = ({
   title,
   errors,
@@ -450,7 +26,7 @@ const ErrorSection = ({
     {title && (
       <CapRow
         className={`error-header ${
-          !liquidError ? 'standard-error-header' : ''
+          !liquidError ? "standard-error-header" : ""
         }`}
       >
         <>
@@ -462,7 +38,8 @@ const ErrorSection = ({
             <CapButton
               type="flat"
               className="add-btn"
-              onClick={() => window.open('https://docs.capillarytech.com/docs/liquid-language-in-messages', '_blank')}
+              onClick={() => window.open("https://docs.capillarytech.com/docs/liquid-language-in-messages", "_blank")
+              }
             >
               <FormattedMessage {...messages.liquidDoc} />
               <CapIcon size="s" type="launch" />
@@ -476,15 +53,21 @@ const ErrorSection = ({
         <CapLabel type="label2">{platformLabel}</CapLabel>
       </CapRow>
     )}
-    <CapRow className="error-list-legacy">
-      {(errors || []).map((error) => (
-        <CapRow key={`${error}`} className="error-list-legacy__item">
+    <CapList
+      className="error-list"
+      size="small"
+      dataSource={errors}
+      renderItem={(error, index) => (
+        <CapList.Item>
           <CapLabel type="label2" className="cap-list-v2-error-item">
+            <CapLabel type="label2">
+              <FormattedNumber value={index + 1} />.
+            </CapLabel>
             <CapLabel type="label2">{error}</CapLabel>
           </CapLabel>
-        </CapRow>
-      ))}
-    </CapRow>
+        </CapList.Item>
+      )}
+    />
   </>
 );
 
@@ -501,16 +84,54 @@ ErrorSection.defaultProps = {
   platformLabel: null,
 };
 
+export const ErrorInfoNote = (props) => {
+  const { errorMessages } = props;
+
+  const {
+    LIQUID_ERROR_MSG: rawLiquidErrors = [],
+    STANDARD_ERROR_MSG: rawStandardErrors = [],
+  } = errorMessages || {};
+
+  // Detect if platform-specific (ANDROID/IOS) or GENERIC
+  const isObject = typeof rawStandardErrors === 'object' && rawStandardErrors !== null;
+  const isNotArray = !Array.isArray(rawLiquidErrors);
+  const hasPlatformKeys = isObject && isNotArray && [ANDROID, IOS, GENERIC].some((key) => key in rawLiquidErrors);
+
+  if (hasPlatformKeys) {
+    // Platform-specific
+    const androidErrors = {
+      STANDARD: processErrors(rawStandardErrors, 'standard', ANDROID, messages),
+      LIQUID: processErrors(rawLiquidErrors, 'liquid', ANDROID, messages),
+    };
+    const iosErrors = {
+      STANDARD: processErrors(rawStandardErrors, 'standard', IOS, messages),
+      LIQUID: processErrors(rawLiquidErrors, 'liquid', IOS, messages),
+    };
+    return (
+      <ErrorTypeRenderer
+        genericErrors={null}
+        androidErrors={androidErrors}
+        iosErrors={iosErrors}
+        ErrorSectionComponent={ErrorSection}
+      />
+    );
+  }
+  // GENERIC (not platform-specific)
+  const genericStandard = processErrors(rawStandardErrors, 'standard', null, messages);
+  const genericLiquid = processErrors(rawLiquidErrors, 'liquid', null, messages);
+  return (
+    <ErrorTypeRenderer
+      genericErrors={{ standard: genericStandard, liquid: genericLiquid }}
+      ErrorSectionComponent={ErrorSection}
+    />
+  );
+};
+
 ErrorInfoNote.defaultProps = {
   errorMessages: {
     LIQUID_ERROR_MSG: [],
     STANDARD_ERROR_MSG: [],
   },
-  onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: true,
-  intl: null,
-  useLegacyDisplay: false, // Use simple list display for BEE Editor
 };
 
 ErrorInfoNote.propTypes = {
@@ -532,11 +153,5 @@ ErrorInfoNote.propTypes = {
       }),
     ]),
   }),
-  onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
-  intl: PropTypes.object,
-  useLegacyDisplay: PropTypes.bool, // Use simple list display for BEE Editor
 };
-
 export default injectIntl(ErrorInfoNote);

package/v2Components/ErrorInfoNote/messages.js

@@ -6,28 +6,6 @@
 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",
-  },
-  navigateToError: {
-    id: `${scope}.navigateToError`,
-    defaultMessage: "Go to error location",
-  },
-  closePanel: {
-    id: `${scope}.closePanel`,
-    defaultMessage: "Close validation panel",
-  },
-  // Legacy messages (kept for backwards compatibility)
   dynamicErrorHeader: {
     id: `${scope}.dynamicErrorHeader`,
     defaultMessage:
@@ -46,39 +24,31 @@ export default defineMessages({
   ariaFooter: {
     id: `${scope}.ariaFooter`,
     defaultMessage:
-      "Aira can make mistakes. Please verify the suggestions before applying them",
+      "Aira can make mistakes. Please verify the suggestions before applying them"
   },
   liquidDocLink: {
     id: `${scope}.liquidDocLink`,
     defaultMessage:
-      "https://docs.capillarytech.com/docs/liquid-language-in-messages",
+      "https://docs.capillarytech.com/docs/liquid-language-in-messages"
   },
   androidDynamicErrorHeader: {
     id: `${scope}.androidDynamicErrorHeader`,
     defaultMessage:
-      "Errors found in Android Dynamic Tags",
+      "Errors found in Android Dynamic Tags"
   },
   iosDynamicErrorHeader: {
     id: `${scope}.iosDynamicErrorHeader`,
     defaultMessage:
-      "Errors found in iOS Dynamic Tags",
+      "Errors found in iOS Dynamic Tags"
   },
   androidStandardErrorHeader: {
     id: `${scope}.androidStandardErrorHeader`,
     defaultMessage:
-      "Errors found in Android Standard Tags",
+      "Errors found in Android Standard Tags"
   },
   iosStandardErrorHeader: {
     id: `${scope}.iosStandardErrorHeader`,
     defaultMessage:
-      "Errors found in iOS Standard Tags",
-  },
-  line: {
-    id: `${scope}.line`,
-    defaultMessage: "Line",
-  },
-  char: {
-    id: `${scope}.char`,
-    defaultMessage: "Char",
+      "Errors found in iOS Standard Tags"
   },
 });