@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -7,72 +7,91 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
 import ValidationErrorDisplay from '../index';
 
-// Test wrapper with IntlProvider
-const TestWrapper = ({ children }) => (
-  <IntlProvider locale="en" messages={{}}>
-    {children}
-  </IntlProvider>
-);
-
-// Note: ValidationErrorDisplay uses ValidationTabs, not ErrorInfoNote
-// The tests should check for the actual rendered structure
+// Mock ErrorInfoNote component
+jest.mock('../../../../ErrorInfoNote', () => {
+  return function MockErrorInfoNote({ errorMessages }) {
+    const liquidErrors = errorMessages?.LIQUID_ERROR_MSG || [];
+    const standardErrors = errorMessages?.STANDARD_ERROR_MSG || [];
+    const hasErrors = liquidErrors.length > 0 || standardErrors.length > 0;
+
+    if (!hasErrors) return null;
+
+    return (
+      <div data-testid="error-info-note">
+        {liquidErrors.map((msg, index) => (
+          <div key={`liquid-${index}`} data-testid="error-message">
+            {msg}
+          </div>
+        ))}
+        {standardErrors.map((msg, index) => (
+          <div key={`standard-${index}`} data-testid="error-message">
+            {msg}
+          </div>
+        ))}
+      </div>
+    );
+  };
+});
 
 describe('ValidationErrorDisplay', () => {
   it('renders standard errors when validation has issues', () => {
     const mockValidation = {
       getAllIssues: () => [
-        {
-          message: 'Missing closing tag', severity: 'error', line: 5, column: 10,
-        },
-        { message: 'Invalid attribute', severity: 'error', line: 7 },
+        { message: 'Missing closing tag', severity: 'error', line: 5, column: 10 },
+        { message: 'Invalid attribute', severity: 'error', line: 7 }
       ],
       isClean: () => false,
-      isValidating: false,
+      isValidating: false
     };
 
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
+    render(<ValidationErrorDisplay validation={mockValidation} />);
 
-    // Check for validation-error-display wrapper
-    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
-    // Check for validation-tabs component
-    expect(container.querySelector('.validation-tabs')).toBeInTheDocument();
-    // Check that error messages are rendered
-    expect(screen.getByText('Missing closing tag')).toBeInTheDocument();
-    expect(screen.getByText('Invalid attribute')).toBeInTheDocument();
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    const errorMessages = screen.getAllByTestId('error-message');
+    expect(errorMessages).toHaveLength(2);
+    expect(errorMessages[0]).toHaveTextContent('Missing closing tag Line 5, Char 10.');
+    expect(errorMessages[1]).toHaveTextContent('Invalid attribute Line 7.');
+  });
+
+  it('renders liquid errors separately', () => {
+    const mockValidation = {
+      getAllIssues: () => [
+        { message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3 },
+        { message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10 }
+      ],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    const errorMessages = screen.getAllByTestId('error-message');
+    expect(errorMessages).toHaveLength(2);
+    // First should be liquid error, second should be standard error
+    expect(errorMessages[0]).toHaveTextContent('Invalid liquid syntax Line 3.');
+    expect(errorMessages[1]).toHaveTextContent('HTML error Line 10.');
   });
 
   it('does not render when validation has no errors', () => {
     const mockValidation = {
       getAllIssues: () => [],
       isClean: () => true,
-      isValidating: false,
+      isValidating: false
     };
 
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
+    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
 
-    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
   it('does not render when validation is null', () => {
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={null} />
-      </TestWrapper>
-    );
+    const { container } = render(<ValidationErrorDisplay validation={null} />);
 
-    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
@@ -80,16 +99,12 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [],
       isClean: () => false,
-      isValidating: true,
+      isValidating: true
     };
 
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
+    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
 
-    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
@@ -97,13 +112,11 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [{ message: 'Error', severity: 'error' }],
       isClean: () => false,
-      isValidating: false,
+      isValidating: false
     };
 
     const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
-      </TestWrapper>
+      <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
     );
 
     const wrapper = container.querySelector('.validation-error-display');
@@ -114,37 +127,26 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [{ message: 'Mobile error', severity: 'error' }],
       isClean: () => false,
-      isValidating: false,
+      isValidating: false
     };
 
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} variant="inapp" />
-      </TestWrapper>
-    );
+    render(<ValidationErrorDisplay validation={mockValidation} variant="inapp" />);
 
-    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
-    expect(screen.getByText('Mobile error')).toBeInTheDocument();
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Mobile error');
   });
 
   it('includes rule information in error messages when available', () => {
     const mockValidation = {
       getAllIssues: () => [
-        {
-          message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5,
-        },
+        { message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5 }
       ],
       isClean: () => false,
-      isValidating: false,
+      isValidating: false
     };
 
-    render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
+    render(<ValidationErrorDisplay validation={mockValidation} />);
 
-    // Check that the error message is rendered (rule info may be in tooltip or separate element)
-    expect(screen.getByText('Alt attribute required')).toBeInTheDocument();
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Alt attribute required Line 5. • alt-require');
   });
 });

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/index.js

@@ -1,15 +1,18 @@
 /**
- * ValidationErrorDisplay - HTML Editor validation display
+ * ValidationErrorDisplay - HTML Editor validation using ErrorInfoNote
  *
- * This component displays validation errors using the new ValidationTabs component
- * with tabbed interface for HTML, Label, and Liquid issues.
+ * This component integrates the existing ErrorInfoNote component with the HTML Editor's
+ * validation system, providing a consistent error display that matches the Figma design.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { hasValidationErrors } from '../../utils/validationAdapter';
-import ValidationTabs from '../ValidationTabs';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import ErrorInfoNote from '../../../ErrorInfoNote';
+
+import { transformValidationToErrorInfo, hasValidationErrors } from '../../utils/validationAdapter';
+import { HTML_EDITOR_VARIANTS } from '../../constants';
 
 // Styles
 import './_validationErrorDisplay.scss';
@@ -17,72 +20,51 @@ import './_validationErrorDisplay.scss';
 /**
  * ValidationErrorDisplay Component
  *
- * Displays validation errors using the ValidationTabs component
+ * Displays validation errors using the existing ErrorInfoNote component
  */
 const ValidationErrorDisplay = ({
   validation,
+  variant = HTML_EDITOR_VARIANTS.EMAIL,
   onErrorClick,
-  onClose,
-  isLiquidEnabled = false,
-  className = '',
+  className = ''
 }) => {
-  // Track if panel is dismissed
-  const [isDismissed, setIsDismissed] = useState(false);
-
-  // Handle close - dismiss temporarily
-  const handleClose = () => {
-    setIsDismissed(true);
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  // Reset dismissed state when validation changes (new errors appear)
-  React.useEffect(() => {
-    if (hasValidationErrors(validation)) {
-      setIsDismissed(false);
-    }
-  }, [validation]);
-
-  // Don't render if no validation, no errors, or dismissed
-  if (!hasValidationErrors(validation) || isDismissed) {
+  // Don't render if no validation or no errors
+  if (!hasValidationErrors(validation)) {
     return null;
   }
 
+  // Transform validation data to ErrorInfoNote format
+  const errorData = transformValidationToErrorInfo(validation, variant);
+  const { errorMessages } = errorData || {};
+
+  // Handle error click if provided
+  const handleErrorClick = (error) => {
+    onErrorClick?.(error);
+  };
+
   return (
-    <div
+    <CapRow
       className={`validation-error-display ${className}`}
       role="alert"
       aria-live="polite"
       aria-label="Validation errors"
     >
-      <ValidationTabs
-        validation={validation}
-        onErrorClick={onErrorClick}
-        onClose={handleClose}
-        isLiquidEnabled={isLiquidEnabled}
+      <ErrorInfoNote
+        errorMessages={errorMessages}
+        onErrorClick={handleErrorClick}
       />
-    </div>
+    </CapRow>
   );
 };
 
 ValidationErrorDisplay.propTypes = {
   validation: PropTypes.shape({
     isValidating: PropTypes.bool,
-    getAllIssues: PropTypes.func,
+    getAllIssues: PropTypes.func
   }),
+  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
   onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-ValidationErrorDisplay.defaultProps = {
-  validation: null,
-  onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: false,
-  className: '',
+  className: PropTypes.string
 };
 
 export default ValidationErrorDisplay;

package/v2Components/HtmlEditor/constants.js

@@ -7,26 +7,26 @@
 // HTML Editor Variants
 export const HTML_EDITOR_VARIANTS = {
   EMAIL: 'email',
-  INAPP: 'inapp',
+  INAPP: 'inapp'
 };
 
 // Device Types (for InApp variant)
 export const DEVICE_TYPES = {
   ANDROID: 'android',
-  IOS: 'ios',
+  IOS: 'ios'
 };
 
 // Editor languages
 export const EDITOR_LANGUAGES = {
   HTML: 'html',
   CSS: 'css',
-  JAVASCRIPT: 'javascript',
+  JAVASCRIPT: 'javascript'
 };
 
 // Preview modes
 export const PREVIEW_MODES = {
   DESKTOP: 'desktop',
-  MOBILE: 'mobile',
+  MOBILE: 'mobile'
 };
 
 // Device specifications for mobile preview
@@ -38,7 +38,7 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 2.75,
     userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36',
     platform: 'android',
-    model: 'Pixel 7',
+    model: 'Pixel 7'
   },
   IPHONE: {
     key: 'iphone',
@@ -47,15 +47,15 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 3,
     userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
     platform: 'ios',
-    model: 'iPhone 15',
-  },
+    model: 'iPhone 15'
+  }
 };
 
 // Validation severity levels
 export const VALIDATION_SEVERITY = {
   ERROR: 'error',
   WARNING: 'warning',
-  INFO: 'info',
+  INFO: 'info'
 };
 
 // Validation types
@@ -63,14 +63,14 @@ export const VALIDATION_TYPES = {
   HTML: 'html',
   CSS: 'css',
   JAVASCRIPT: 'javascript',
-  SECURITY: 'security',
+  SECURITY: 'security'
 };
 
 // Error types for preview
 export const PREVIEW_ERROR_TYPES = {
   RUNTIME: 'runtime',
   RENDER: 'render',
-  SECURITY: 'security',
+  SECURITY: 'security'
 };
 
 // Performance thresholds
@@ -79,7 +79,7 @@ export const PERFORMANCE = {
   VALIDATION_DEBOUNCE: 500, // ms
   AUTO_SAVE_INTERVAL: 30000, // ms
   MAX_CONTENT_LENGTH: 100000, // characters
-  PERFORMANCE_WARNING_THRESHOLD: 50000, // characters
+  PERFORMANCE_WARNING_THRESHOLD: 50000 // characters
 };
 
 // Layout constraints
@@ -89,7 +89,7 @@ export const LAYOUT = {
   DEFAULT_SPLIT_SIZES: [50, 50], // [left, right] percentages
   GUTTER_SIZE: 8, // pixels
   MOBILE_BREAKPOINT: 768, // pixels
-  MOBILE_WIDTH_DEFAULT: 375, // pixels
+  MOBILE_WIDTH_DEFAULT: 375 // pixels
 };
 
 
@@ -105,7 +105,7 @@ export const CODEMIRROR_CONFIG = {
   FOLD_GUTTER: true,
   SEARCH_ENABLED: true,
   AUTOCOMPLETE_ENABLED: true,
-  LINT_ENABLED: true,
+  LINT_ENABLED: true
 };
 
 // HTML validation rules (HTMLHint)
@@ -126,7 +126,7 @@ export const HTML_VALIDATION_RULES = {
   'inline-style-disabled': false,
   'inline-script-disabled': false,
   'space-tab-mixed-disabled': 'space',
-  'spec-char-escape': true,
+  'spec-char-escape': true
 };
 
 // CSS validation rules
@@ -137,7 +137,7 @@ export const CSS_VALIDATION_RULES = {
   'declaration-colon-space-after': 'always',
   'declaration-colon-space-before': 'never',
   'block-closing-brace-newline-after': 'always',
-  'block-opening-brace-space-before': 'always',
+  'block-opening-brace-space-before': 'always'
 };
 
 // JavaScript validation rules (ESLint-style)
@@ -148,7 +148,7 @@ export const JS_VALIDATION_RULES = {
   'no-console': 'warn',
   'semi': ['error', 'always'],
   'quotes': ['error', 'single'],
-  'indent': ['error', 2],
+  'indent': ['error', 2]
 };
 
 // Keyboard shortcuts
@@ -163,7 +163,7 @@ export const KEYBOARD_SHORTCUTS = {
   FIND: 'Ctrl+F',
   FIND_MAC: 'Cmd+F',
   REPLACE: 'Ctrl+H',
-  REPLACE_MAC: 'Cmd+Option+F',
+  REPLACE_MAC: 'Cmd+Option+F'
 };
 
 // Feature flags
@@ -176,7 +176,7 @@ export const FEATURES = {
   KEYBOARD_SHORTCUTS: true,
   ERROR_RECOVERY: true,
   PERFORMANCE_MONITORING: true,
-  ACCESSIBILITY_FEATURES: true,
+  ACCESSIBILITY_FEATURES: true
 };
 
 // Animation durations (ms)
@@ -186,7 +186,7 @@ export const ANIMATIONS = {
   SLOW: 500,
   PANEL_RESIZE: 200,
   FADE_IN: 300,
-  SLIDE_IN: 250,
+  SLIDE_IN: 250
 };
 
 // Z-index layers
@@ -195,7 +195,7 @@ export const Z_INDEX = {
   OVERLAY: 1000,
   MODAL: 1050,
   FULLSCREEN: 9999,
-  TOOLTIP: 10000,
+  TOOLTIP: 10000
 };
 
 // Default HTML content template
@@ -239,12 +239,3 @@ export const DEFAULT_HTML_CONTENT = `<!DOCTYPE html>
     </script>
 </body>
 </html>`;
-
-// Constants for tag API calls
-export const TAG = 'TAG';
-export const EMBEDDED = 'embedded';
-export const DEFAULT = 'default';
-export const FULL = 'full';
-export const ALL = 'all';
-export const SMS = 'SMS';
-export const EMAIL = 'EMAIL';