@capillarytech/creatives-library 8.0.263 → 8.0.264

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

@@ -21,15 +21,13 @@ import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
 import BugOutlined from '@ant-design/icons/BugOutlined';
 import CodeOutlined from '@ant-design/icons/CodeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
 
 import messages from './messages';
-import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
 import './_validationPanel.scss';
-import { SEVERITY } from './constants';
-import { ISSUE_SOURCES } from '../../utils/validationConstants';
 
 const { Panel } = Collapse;
+
 /**
  * ValidationPanel Component
  */
@@ -39,6 +37,7 @@ const ValidationPanel = ({
   onErrorClick,
   showLineNumbers = true,
   groupBySource = false,
+  variant = 'email'
 }) => {
   const [activeKeys, setActiveKeys] = useState(['errors', 'warnings']);
 
@@ -57,35 +56,33 @@ const ValidationPanel = ({
         groups[source].push(issue);
         return groups;
       }, {});
+    } else {
+      return {
+        errors: allIssues.filter(issue => issue.severity === 'error'),
+        warnings: allIssues.filter(issue => issue.severity === 'warning'),
+        info: allIssues.filter(issue => issue.severity === 'info')
+      };
     }
-    return {
-      errors: allIssues.filter((issue) => issue.severity === SEVERITY.ERROR),
-      warnings: allIssues.filter((issue) => issue.severity === SEVERITY.WARNING),
-      info: allIssues.filter((issue) => issue.severity === SEVERITY.INFO),
-    };
   }, [validation, groupBySource]);
 
-  // Check if an issue is a blocking error (API error, Rule Group #1, or client-side Liquid validation errors)
-  const isBlockingError = (issue) => {
-    const { rule, source, severity } = issue || {};
-    // API errors are blocking
-    if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') {
-      return true;
-    }
-    // Client-side Liquid validation errors are blocking (genuine syntax errors)
-    if (source === ISSUE_SOURCES.LIQUID && severity === SEVERITY.ERROR) {
-      return true;
+  // Get icon for issue type
+  const getIssueIcon = (severity, source) => {
+    if (source === 'security') {
+      return <ShieldOutlined style={{ color: '#ff4d4f' }} />;
     }
-    // Rule Group #1 errors are blocking
-    if (BLOCKING_ERROR_RULE_IDS.includes(rule)) {
-      return true;
+
+    switch (severity) {
+      case 'error':
+        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
+      case 'warning':
+        return <WarningOutlined style={{ color: '#faad14' }} />;
+      case 'info':
+        return <InfoCircleOutlined style={{ color: '#1890ff' }} />;
+      default:
+        return <BugOutlined style={{ color: '#666' }} />;
     }
-    return false;
   };
 
-  // Get icon for issue type
-  // Blocking errors use error-icon, warnings use warning
-
   // Get source icon
   const getSourceIcon = (source) => {
     switch (source) {
@@ -109,7 +106,7 @@ const ValidationPanel = ({
         line: issue.line,
         column: issue.column || 1,
         message: issue.message,
-        severity: issue.severity,
+        severity: issue.severity
       });
     }
   };
@@ -128,6 +125,9 @@ const ValidationPanel = ({
         }
       }}
     >
+      <div className="validation-issue__icon">
+        {getIssueIcon(issue.severity, issue.source)}
+      </div>
 
       <div className="validation-issue__content">
         <div className="validation-issue__message">
@@ -137,12 +137,10 @@ const ValidationPanel = ({
         <div className="validation-issue__meta">
           {showLineNumbers && issue.line && (
             <span className="validation-issue__location">
-              <FormattedMessage
-                {...messages.lineColumn}
-                values={{
-                  line: issue.line,
-                  column: issue.column || 1,
-                }} />
+              <FormattedMessage {...messages.lineColumn} values={{
+                line: issue.line,
+                column: issue.column || 1
+              }} />
             </span>
           )}
 
@@ -164,21 +162,17 @@ const ValidationPanel = ({
   );
 
   // Render panel header with count
-  const renderPanelHeader = (title, count, severity, issues = []) =>
-  // Check if any issue in this group is a blocking error
-  // Use blocking error icon only if there are blocking errors, otherwise use warning icon
-
-    (
-      <div className="validation-panel__header">
-        <span className="validation-panel__title">
-          <FormattedMessage {...title} />
-        </span>
-        {count > 0 && (
-          <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
-        )}
-      </div>
-    )
-  ;
+  const renderPanelHeader = (title, count, severity) => (
+    <div className="validation-panel__header">
+      <span className="validation-panel__title">
+        {getIssueIcon(severity)}
+        <FormattedMessage {...title} />
+      </span>
+      {count > 0 && (
+        <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
+      )}
+    </div>
+  );
 
   // Get severity color
   const getSeverityColor = (severity) => {
@@ -247,14 +241,14 @@ const ValidationPanel = ({
             : messages[key] || { id: `htmlEditor.validation.${key}`, defaultMessage: key };
 
           const severity = isSourceGroup
-            ? (issues.find((i) => i.severity === SEVERITY.ERROR) ? SEVERITY.ERROR
-              : issues.find((i) => i.severity === SEVERITY.WARNING) ? SEVERITY.WARNING : SEVERITY.INFO)
+            ? (issues.find(i => i.severity === 'error') ? 'error' :
+               issues.find(i => i.severity === 'warning') ? 'warning' : 'info')
             : key;
 
           return (
             <Panel
               key={key}
-              header={renderPanelHeader(title, issues.length, severity, issues)}
+              header={renderPanelHeader(title, issues.length, severity)}
               className={`validation-panel__panel validation-panel__panel--${severity}`}
             >
               <div className="validation-panel__issues">
@@ -297,7 +291,7 @@ ValidationPanel.propTypes = {
   onErrorClick: PropTypes.func,
   showLineNumbers: PropTypes.bool,
   groupBySource: PropTypes.bool,
-  variant: PropTypes.oneOf(['email', 'inapp']),
+  variant: PropTypes.oneOf(['email', 'inapp'])
 };
 
 export default ValidationPanel;

package/v2Components/HtmlEditor/constants.js

@@ -4,32 +4,29 @@
  * Centralized constants for the HTML Editor component
  */
 
-// Documentation URL for Liquid / HTML editor
-export const LIQUID_DOC_URL = 'https://docs.capillarytech.com/docs/liquid-language-in-messages';
-
 // 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
@@ -41,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',
@@ -50,43 +47,30 @@ 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'
 };
 
-/**
- * Rule Group #1: Input & Sanitization Errors.
- * ONLY these rules are treated as BLOCKING ERROR for Save/Update/Preview/Test.
- * All other rule groups (HTML/CSS/Liquid, compatibility, security, etc.) are WARNING only.
- * Backward compatibility: CKEditor legacy templates (unclosed CSS, indentation, etc.) must never block.
- */
-export const BLOCKING_ERROR_RULE_IDS = [
-  'sanitizer.invalidInput',
-  'sanitizer.invalidInputNonEmpty',
-  'sanitizer.sanitizationFailed',
-  'sanitizer.dangerousProtocolDetected',
-];
-
 // Validation types
 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
@@ -95,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
@@ -105,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
 };
 
 
@@ -121,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)
@@ -142,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
@@ -153,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)
@@ -164,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
@@ -179,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
@@ -192,7 +176,7 @@ export const FEATURES = {
   KEYBOARD_SHORTCUTS: true,
   ERROR_RECOVERY: true,
   PERFORMANCE_MONITORING: true,
-  ACCESSIBILITY_FEATURES: true,
+  ACCESSIBILITY_FEATURES: true
 };
 
 // Animation durations (ms)
@@ -202,7 +186,7 @@ export const ANIMATIONS = {
   SLOW: 500,
   PANEL_RESIZE: 200,
   FADE_IN: 300,
-  SLIDE_IN: 250,
+  SLIDE_IN: 250
 };
 
 // Z-index layers
@@ -211,7 +195,7 @@ export const Z_INDEX = {
   OVERLAY: 1000,
   MODAL: 1050,
   FULLSCREEN: 9999,
-  TOOLTIP: 10000,
+  TOOLTIP: 10000
 };
 
 // Default HTML content template
@@ -255,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';