@capillarytech/creatives-library 8.0.250 → 8.0.252

package/v2Components/ErrorInfoNote/index.js

@@ -1,21 +1,443 @@
-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 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 {
   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";
+} 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';
 
+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: 'error',
+        index,
+        source: 'label',
+      });
+    } else {
+      htmlIssues.push({
+        message: error,
+        severity: 'error',
+        index,
+        source: 'html',
+      });
+    }
+  });
+
+  // Process liquid errors
+  (liquidErrors || []).forEach((error, index) => {
+    liquidIssues.push({
+      message: error,
+      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 === '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(
+      'https://docs.capillarytech.com/docs/liquid-language-in-messages',
+      '_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,
@@ -26,7 +448,7 @@ const ErrorSection = ({
     {title && (
       <CapRow
         className={`error-header ${
-          !liquidError ? "standard-error-header" : ""
+          !liquidError ? 'standard-error-header' : ''
         }`}
       >
         <>
@@ -38,8 +460,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('https://docs.capillarytech.com/docs/liquid-language-in-messages', '_blank')}
             >
               <FormattedMessage {...messages.liquidDoc} />
               <CapIcon size="s" type="launch" />
@@ -53,21 +474,15 @@ const ErrorSection = ({
         <CapLabel type="label2">{platformLabel}</CapLabel>
       </CapRow>
     )}
-    <CapList
-      className="error-list"
-      size="small"
-      dataSource={errors}
-      renderItem={(error, index) => (
-        <CapList.Item>
+    <CapRow className="error-list-legacy">
+      {(errors || []).map((error) => (
+        <CapRow key={`${error}`} className="error-list-legacy__item">
           <CapLabel type="label2" className="cap-list-v2-error-item">
-            <CapLabel type="label2">
-              <FormattedNumber value={index + 1} />.
-            </CapLabel>
             <CapLabel type="label2">{error}</CapLabel>
           </CapLabel>
-        </CapList.Item>
-      )}
-    />
+        </CapRow>
+      ))}
+    </CapRow>
   </>
 );
 
@@ -84,54 +499,16 @@ 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 = {
@@ -153,5 +530,11 @@ 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,6 +6,28 @@
 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:
@@ -24,31 +46,39 @@ 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"
+      "Errors found in iOS Standard Tags",
+  },
+  line: {
+    id: `${scope}.line`,
+    defaultMessage: "Line",
+  },
+  char: {
+    id: `${scope}.char`,
+    defaultMessage: "Char",
   },
 });