npm - @capillarytech/creatives-library - Versions diffs - 8.0.249 → 8.0.250-alpha.0 - Mend

@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

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 (136) hide show

package/v2Components/CapTagListWithInput/index.js CHANGED Viewed

@@ -48,13 +48,14 @@ export const CapTagListWithInput = (props) => {
     showTagList = true,
     showInput = true,
     inputProps = {},
+    popoverPlacement,
   } = props;
   const { formatMessage } = intl;
   return (
     <CapColumn style={containerStyle}>
-      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+      <CapRow align="middle" type="flex">
         {showHeading && headingText && (
           <CapHeading type={headingType} style={headingStyle}>
             {headingText}
@@ -76,6 +77,7 @@ export const CapTagListWithInput = (props) => {
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
             style={tagListStyle}
+            popoverPlacement={popoverPlacement}
           />
         )}
       </CapRow>
@@ -136,6 +138,7 @@ CapTagListWithInput.propTypes = {
   showHeading: PropTypes.bool,
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 CapTagListWithInput.defaultProps = {
@@ -164,6 +167,7 @@ CapTagListWithInput.defaultProps = {
   showTagList: true,
   showInput: true,
   inputProps: {},
+  popoverPlacement: undefined,
 };
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js CHANGED Viewed

@@ -5,6 +5,6 @@ const prefix = 'creatives.componentsV2.CapTagListWithInput';
 export default defineMessages({
   addLabels: {
     id: `${prefix}.addLabels`,
-    defaultMessage: 'Add labels',
+    defaultMessage: 'Add label',
   },
 });

package/v2Components/CapWhatsappCTA/tests/index.test.js CHANGED Viewed

@@ -4,6 +4,11 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapWhatsappCTA } from '../index';
+// Mock the missing reducer
+jest.mock('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer', () => {
+  return (state = {}) => state;
+}, { virtual: true });
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
 const initializeComponent = (

package/v2Components/ErrorInfoNote/index.js CHANGED Viewed

@@ -1,21 +1,440 @@
-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
+ * @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) {
+    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}
+      />
+    );
+  }
+  // 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 (
+      <div 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
+          />
+        )}
+      </div>
+    );
+  }
+  // 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('html');
+      } else if (labelCount > 0) {
+        setActiveKey('label');
+      } else if (liquidCount > 0) {
+        // Show liquid tab even when liquid is disabled if liquid content is detected
+        setActiveKey('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: '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}
+        />
+      ),
+    });
+  }
+  // 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: (
+        <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 +445,7 @@ const ErrorSection = ({
     {title && (
       <CapRow
         className={`error-header ${
-          !liquidError ? "standard-error-header" : ""
+          !liquidError ? 'standard-error-header' : ''
         }`}
       >
         <>
@@ -38,8 +457,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 +471,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 +496,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 +527,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 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: