npm - @capillarytech/creatives-library - Versions diffs - 8.0.242-alpha.0 → 8.0.242-alpha.2 - Mend

@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (216) hide show

package/v2Components/ErrorInfoNote/index.js CHANGED Viewed

@@ -1,21 +1,402 @@
-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';
+// Label issue patterns - syntax errors related to tags
+const LABEL_ISSUE_PATTERNS = [
+  'tag must be paired',
+  'open tag match failed',
+  'closed tag match failed',
+  'unclosed',
+  'missing required',
+  'tag-pair',
+  'attr-value-not-empty',
+  'attr-no-duplication',
+  'tag-self-close',
+  'spec-char-escape',
+  '</html>',
+  '<html>',
+  '</div>',
+  '<div>',
+  '{{',
+  '}}',
+];
+/**
+ * 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 };
+};
+/**
+ * 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 (
+    <div 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)
+        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, '');
+        }
+        displayMessage = displayMessage.trim();
+        return (
+          <div
+            key={key}
+            className={`error-info-note__item error-info-note__item--${severity || 'error'}`}
+          >
+            <div className="error-info-note__item-icon">
+              {getSeverityIcon(severity)}
+            </div>
+            <div className="error-info-note__item-content">
+              <span className="error-info-note__item-message">
+                {displayMessage}
+              </span>
+              {line && (
+                <span className="error-info-note__item-location">
+                  Line
+                  {' '}
+                  {line}
+                  {char ? `, Char ${char}` : ''}
+                  .
+                </span>
+              )}
+              {rule && (
+                <span className="error-info-note__item-rule">
+                  •
+                  {' '}
+                  {rule}
+                </span>
+              )}
+            </div>
+            {onErrorClick && (
+              <CapTooltip title={intl?.formatMessage ? intl.formatMessage({ id: 'errorInfoNote.navigateToError', defaultMessage: 'Go to error location' }) : 'Go to error location'}>
+                <button
+                  type="button"
+                  className="error-info-note__item-navigate"
+                  onClick={(e) => handleNavigateClick({ ...issue, line, column: char }, e)}
+                  aria-label="Go to error location"
+                >
+                  <CapIcon type="redirection" />
+                </button>
+              </CapTooltip>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+TabContent.propTypes = {
+  issues: PropTypes.array,
+  onErrorClick: PropTypes.func,
+  intl: PropTypes.object,
+};
+TabContent.defaultProps = {
+  issues: [],
+  onErrorClick: null,
+  intl: null,
+};
+/**
+ * ErrorInfoNote Component with Tabbed Interface
+ */
+export const ErrorInfoNote = (props) => {
+  const {
+    errorMessages,
+    onErrorClick,
+    onClose,
+    isLiquidEnabled = true,
+    intl,
+  } = 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, use the legacy renderer
+  if (hasPlatformKeys) {
+    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}
+      />
+    );
+  }
+  // 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;
+  const totalCount = htmlCount + labelCount + (isLiquidEnabled ? liquidCount : 0);
+  // Set default active key
+  useMemo(() => {
+    if (!activeKey) {
+      if (htmlCount > 0) {
+        setActiveKey('html');
+      } else if (labelCount > 0) {
+        setActiveKey('label');
+      } else if (liquidCount > 0 && isLiquidEnabled) {
+        setActiveKey('liquid');
+      }
+    }
+  }, [htmlCount, labelCount, liquidCount, isLiquidEnabled, 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: 'html',
+      tab: (
+        <span className="error-info-note__tab-label">
+          <FormattedMessage {...messages.htmlIssues} />
+          <span className="error-info-note__tab-count">
+            (
+            {htmlCount}
+            )
+          </span>
+        </span>
+      ),
+      content: (
+        <TabContent
+          issues={htmlIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+  if (labelCount > 0) {
+    tabPanes.push({
+      key: 'label',
+      tab: (
+        <span className="error-info-note__tab-label">
+          <FormattedMessage {...messages.labelIssues} />
+          <span className="error-info-note__tab-count">
+            (
+            {labelCount}
+            )
+          </span>
+        </span>
+      ),
+      content: (
+        <TabContent
+          issues={labelIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+  if (isLiquidEnabled && liquidCount > 0) {
+    tabPanes.push({
+      key: 'liquid',
+      tab: (
+        <span className="error-info-note__tab-label">
+          <FormattedMessage {...messages.liquidIssues} />
+          <span className="error-info-note__tab-count">
+            (
+            {liquidCount}
+            )
+          </span>
+        </span>
+      ),
+      content: (
+        <TabContent
+          issues={liquidIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+  return (
+    <div 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 === '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({ id: 'errorInfoNote.closePanel', defaultMessage: 'Close validation panel' }) : 'Close validation panel'}>
+            <button
+              type="button"
+              className="error-info-note__close"
+              onClick={handleClose}
+              aria-label="Close validation panel"
+            >
+              <CapIcon type="close" />
+            </button>
+          </CapTooltip>
+        </CapRow>
+      </CapRow>
+    </div>
+  );
+};
+// Legacy ErrorSection component for platform-specific errors (backwards compatibility)
 const ErrorSection = ({
   title,
   errors,
@@ -26,7 +407,7 @@ const ErrorSection = ({
     {title && (
       <CapRow
         className={`error-header ${
-          !liquidError ? "standard-error-header" : ""
+          !liquidError ? 'standard-error-header' : ''
         }`}
       >
         <>
@@ -38,8 +419,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 +433,15 @@ const ErrorSection = ({
         <CapLabel type="label2">{platformLabel}</CapLabel>
       </CapRow>
     )}
-    <CapList
-      className="error-list"
-      size="small"
-      dataSource={errors}
-      renderItem={(error, index) => (
-        <CapList.Item>
+    <div className="error-list-legacy">
+      {(errors || []).map((error) => (
+        <div 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>
-      )}
-    />
+        </div>
+      ))}
+    </div>
   </>
 );
@@ -84,54 +458,15 @@ 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,
 };
 ErrorInfoNote.propTypes = {
@@ -153,5 +488,10 @@ ErrorInfoNote.propTypes = {
       }),
     ]),
   }),
+  onErrorClick: PropTypes.func,
+  onClose: PropTypes.func,
+  isLiquidEnabled: PropTypes.bool,
+  intl: PropTypes.object,
 };
 export default injectIntl(ErrorInfoNote);

package/v2Components/ErrorInfoNote/messages.js CHANGED Viewed

@@ -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: