@capillarytech/creatives-library 8.0.262-alpha.1 → 8.0.263

package/v2Components/HtmlEditor/utils/liquidTemplateSupport.js

@@ -7,6 +7,8 @@ import { html } from '@codemirror/lang-html';
 import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { EditorView } from '@codemirror/view';
+import { VALIDATION_SEVERITY } from '../constants';
+import { ISSUE_SOURCES } from './validationConstants';
 
 /**
  * Liquid Template Syntax Patterns
@@ -145,13 +147,13 @@ export class LiquidValidator {
         } else {
           // Stray closing brace - no matching opening brace
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: 'Stray closing }} without matching opening {{',
             line: this.getLineNumber(html, position),
             column: 1,
             rule: 'liquid-stray-closing-output',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         }
       }
@@ -162,13 +164,13 @@ export class LiquidValidator {
       // Report each unclosed opening brace
       stack.forEach((position) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: 'unclosed Liquid output tag - missing }}',
           line: this.getLineNumber(html, position),
           column: 1,
           rule: 'liquid-unclosed-output',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -197,13 +199,13 @@ export class LiquidValidator {
     if (openTags.length > closeTags.length) {
       const unmatchedCount = openTags.length - closeTags.length;
       this.errors.push({
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: `${unmatchedCount} unclosed Liquid logic tag(s) - missing %}`,
         line: this.getLineNumber(html, openTags[openTags.length - 1]),
         column: 1,
         rule: 'liquid-unclosed-logic',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       });
     }
   }
@@ -218,13 +220,13 @@ export class LiquidValidator {
     if (nestedOutput) {
       nestedOutput.forEach((match) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Nested braces in Liquid output tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -235,13 +237,13 @@ export class LiquidValidator {
     if (nestedLogic) {
       nestedLogic.forEach((match) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Nested braces in Liquid logic tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -302,23 +304,23 @@ export class LiquidValidator {
 
         if (!lastOpening) {
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: `Unexpected closing tag: {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-unexpected-closing',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         } else if (lastOpening.keyword !== expectedOpening) {
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: `Mismatched Liquid tags: {% ${lastOpening.keyword} %} ... {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-mismatched-tags',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         }
       }
@@ -329,13 +331,13 @@ export class LiquidValidator {
       stack.forEach(({ keyword, tag }) => {
         const expectedClosing = pairs[keyword];
         const error = {
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Unclosed Liquid tag: {% ${keyword} %} - missing {% ${expectedClosing} %}`,
           line: tag.line,
           column: 1,
           rule: 'liquid-unclosed-tag',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         };
         this.errors.push(error);
       });
@@ -344,13 +346,13 @@ export class LiquidValidator {
     // Check for unclosed opening tags
     stack.forEach((unclosed) => {
       this.errors.push({
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: `Unclosed Liquid tag: {% ${unclosed.keyword} %}`,
         line: unclosed.tag.line,
         column: 1,
         rule: 'liquid-unclosed-tag',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       });
     });
   }
@@ -364,13 +366,13 @@ export class LiquidValidator {
     if (malformedFilters) {
       malformedFilters.forEach((match) => {
         this.warnings.push({
-          type: 'warning',
+          type: VALIDATION_SEVERITY.WARNING,
           message: `Malformed Liquid filter: ${match.trim()}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-malformed-filter',
-          severity: 'warning',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.WARNING,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -401,13 +403,13 @@ export class LiquidValidator {
         // Only show info for truly custom/unknown filters
         // Standard Liquid filters are now included in commonFilters list
         this.info.push({
-          type: 'info',
+          type: VALIDATION_SEVERITY.INFO,
           message: `Using filter: ${filterName}`,
           line: this.getLineNumber(html, filterMatch.index),
           column: 1,
           rule: 'liquid-filter-usage',
-          severity: 'info',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.INFO,
+          source: ISSUE_SOURCES.LIQUID,
         });
       }
     }
@@ -422,13 +424,13 @@ export class LiquidValidator {
     if (suspiciousVariables) {
       suspiciousVariables.forEach((match) => {
         this.warnings.push({
-          type: 'warning',
+          type: VALIDATION_SEVERITY.WARNING,
           message: `Potentially undefined variable: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-undefined-variable',
-          severity: 'warning',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.WARNING,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -31,9 +31,8 @@ export const LABEL_ISSUE_PATTERNS = [
   'alt-require',
 ];
 
-// Tab keys for error categorization
+// Tab keys: Errors = blocking, Warnings = non-blocking
 export const ERROR_TAB_KEYS = {
-  HTML: 'html',
-  LABEL: 'label',
-  LIQUID: 'liquid',
+  ERRORS: 'errors',
+  WARNINGS: 'warnings',
 };

package/v2Components/MobilePushPreviewV2/constants.js

@@ -0,0 +1,6 @@
+export const DEVICE_TYPES = {
+  ANDROID: 'android',
+  IOS: 'ios',
+};
+
+export const IPHONE = 'iphone';

package/v2Components/MobilePushPreviewV2/index.js

@@ -16,6 +16,7 @@ import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
 import { CAROUSEL, VIDEO } from '../../v2Containers/MobilePushNew/constants';
+import { DEVICE_TYPES, IPHONE } from './constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -57,7 +58,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const isBeeFreeTemplate = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
       if (isBeeFreeTemplate) {
         // Normalize device to 'android' or 'ios' for comparison
-        const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+        const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
         const isAndroid = normalizedDevice === ANDROID.toLowerCase();
         content = {
           inAppPreviewContent: isAndroid ? androidContent?.beeHtml : iosContent?.beeHtml,
@@ -78,7 +79,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         ctaData: getCtaObject(iosContent?.expandableDetails?.ctas),
       };
       // Normalize device to 'android' or 'ios' for comparison
-      const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+      const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
       const isAndroid = normalizedDevice === ANDROID.toLowerCase();
       content = {
         inAppPreviewContent: isAndroid ? androidPreviewContent : iosPreviewContent,
@@ -149,7 +150,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
 
   getPreview(device) {
     // Normalize device to 'android' or 'ios' for comparison
-    const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+    const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
     const deviceParam = normalizedDevice === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview

package/v2Containers/CreativesContainer/index.js

@@ -126,9 +126,7 @@ export class Creatives extends React.Component {
       // HTML Editor validation state (for email channel)
       htmlEditorValidationState: {
         isContentEmpty: true,
-        issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 0,
-        },
+        issueCounts: { errors: 0, warnings: 0, total: 0 },
         validationComplete: false, // Flag to track if validation has completed
         errorsAcknowledged: false, // Flag to track if user has acknowledged errors by clicking redirection icon
       },

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -262,10 +262,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }
@@ -392,10 +391,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }
@@ -522,10 +520,9 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
             "errorsAcknowledged": false,
             "isContentEmpty": true,
             "issueCounts": Object {
-              "html": 0,
-              "label": 0,
-              "liquid": 0,
+              "errors": 0,
               "total": 0,
+              "warnings": 0,
             },
             "validationComplete": false,
           }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -651,55 +651,11 @@ const EmailHTMLEditor = (props) => {
       setSubjectError('');
     }
 
-    // 1.5. Check for HTML/Label/Liquid validation errors (excluding API errors which we just cleared)
-    // If errors exist, block save and reset acknowledgment
-    // Try to get issue counts from ref first, fallback to stored state
-    let issueCounts = {
-      html: 0, label: 0, liquid: 0, total: 0,
-    };
-    let allIssues = [];
-    if (htmlEditorRef.current && typeof htmlEditorRef.current.getAllIssues === 'function') {
-      allIssues = htmlEditorRef.current.getAllIssues();
-      // Filter out API validation errors - they're validated separately via API call
-      const clientSideIssues = allIssues.filter((issue) => issue.rule !== 'liquid-api-validation' && issue.rule !== 'standard-api-validation');
-
-      // Count only client-side errors
-      issueCounts = {
-        html: 0,
-        label: 0,
-        liquid: 0,
-        total: clientSideIssues.length,
-      };
-
-      clientSideIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        // Check if it's a liquid error (client-side only, not API)
-        if (source === 'liquid-validator' && rule !== 'liquid-api-validation') {
-          issueCounts.liquid++;
-        } else if (
-          messageLower.includes('tag must be paired')
-          || messageLower.includes('open tag match failed')
-          || messageLower.includes('closed tag match failed')
-          || messageLower.includes('unclosed')
-          || messageLower.includes('missing required')
-          || ruleLower.includes('tag-pair')
-          || ruleLower.includes('attr-value-not-empty')
-          || ruleLower.includes('attr-no-duplication')
-          || ruleLower.includes('tag-self-close')
-          || ruleLower.includes('spec-char-escape')
-          || ruleLower.includes('tagname-lowercase')
-          || ruleLower.includes('attr-lowercase')
-          || ruleLower.includes('src-not-empty')
-          || ruleLower.includes('alt-require')
-        ) {
-          issueCounts.label++;
-        } else {
-          issueCounts.html++;
-        }
-      });
+    // 1.5. Check for validation errors (Errors = blocking, Warnings = non-blocking)
+    // Get issue counts from ref or stored state
+    let issueCounts = { errors: 0, warnings: 0, total: 0 };
+    if (htmlEditorRef.current && typeof htmlEditorRef.current.getIssueCounts === 'function') {
+      issueCounts = htmlEditorRef.current.getIssueCounts();
     } else if (lastValidationStateRef.current?.issueCounts) {
       issueCounts = lastValidationStateRef.current.issueCounts;
     }

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -46,9 +46,7 @@ const mockGetAllIssues = jest.fn(() => []);
 const mockGetValidationState = jest.fn(() => ({
   isValidating: false,
   hasErrors: false,
-  issueCounts: {
-    html: 0, label: 0, liquid: 0, total: 0,
-  },
+  issueCounts: { errors: 0, warnings: 0, total: 0 },
 }));
 
 // Mock HtmlEditor - it exports a lazy-loaded component by default
@@ -62,12 +60,10 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
       isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
       getIssueCounts: () => {
         const issues = mockGetAllIssues();
-        return {
-          html: issues.filter((i) => i.source === 'htmlhint' || i.source === 'css-validator').length,
-          label: issues.filter((i) => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
-          liquid: issues.filter((i) => i.source === 'liquid-validator').length,
-          total: issues.length,
-        };
+        const total = issues.length;
+        const errors = issues.filter((i) => (i.source === 'liquid-validator' && i.severity === 'error')
+          || ['liquid-api-validation', 'standard-api-validation'].includes(i.rule)).length;
+        return { errors, warnings: total - errors, total };
       },
     }));
 
@@ -94,9 +90,7 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
         <button
           onClick={() => props.onValidationChange && props.onValidationChange({
             isContentEmpty: false,
-            issueCounts: {
-              html: 0, label: 0, liquid: 0, total: 0,
-            },
+            issueCounts: { errors: 0, warnings: 0, total: 0 },
             validationComplete: true,
             hasErrors: false,
           })}
@@ -122,12 +116,10 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
       isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
       getIssueCounts: () => {
         const issues = mockGetAllIssues();
-        return {
-          html: issues.filter((i) => i.source === 'htmlhint' || i.source === 'css-validator').length,
-          label: issues.filter((i) => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
-          liquid: issues.filter((i) => i.source === 'liquid-validator').length,
-          total: issues.length,
-        };
+        const total = issues.length;
+        const errors = issues.filter((i) => (i.source === 'liquid-validator' && i.severity === 'error')
+          || ['liquid-api-validation', 'standard-api-validation'].includes(i.rule)).length;
+        return { errors, warnings: total - errors, total };
       },
     }));
 
@@ -154,9 +146,7 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
         <button
           onClick={() => props.onValidationChange && props.onValidationChange({
             isContentEmpty: false,
-            issueCounts: {
-              html: 0, label: 0, liquid: 0, total: 0,
-            },
+            issueCounts: { errors: 0, warnings: 0, total: 0 },
             validationComplete: true,
             hasErrors: false,
           })}
@@ -426,9 +416,7 @@ describe('EmailHTMLEditor', () => {
     mockGetValidationState.mockReturnValue({
       isValidating: false,
       hasErrors: false,
-      issueCounts: {
-        html: 0, label: 0, liquid: 0, total: 0,
-      },
+      issueCounts: { errors: 0, warnings: 0, total: 0 },
     });
     // Reset hasLiquidSupportFeature mock to return true by default
     mockHasLiquidSupportFeature.mockReturnValue(true);
@@ -878,7 +866,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 1,
+          errors: 0, warnings: 1, total: 1,
         },
       });
 
@@ -921,7 +909,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 1,
+          errors: 0, warnings: 1, total: 1,
         },
       });
 
@@ -963,7 +951,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 1, total: 1,
+          errors: 1, warnings: 0, total: 1,
         },
       });
 
@@ -2149,9 +2137,8 @@ describe('EmailHTMLEditor', () => {
 
       const issueCounts = ref.current.getIssueCounts();
       expect(issueCounts).toEqual({
-        html: expect.any(Number),
-        label: expect.any(Number),
-        liquid: expect.any(Number),
+        errors: expect.any(Number),
+        warnings: expect.any(Number),
         total: expect.any(Number),
       });
     });
@@ -2201,7 +2188,7 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('getIssueCounts returns default object with zeros (lines 168-170)', async () => {
-      // This covers lines 168-170: return { html: 0, label: 0, liquid: 0, total: 0 };
+      // This covers default return: { errors: 0, warnings: 0, total: 0 };
       const ref = React.createRef();
 
       render(
@@ -2218,18 +2205,16 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
 
       // When htmlEditorRef.current?.getIssueCounts is not available,
-      // the default return value should be { html: 0, label: 0, liquid: 0, total: 0 }
+      // the default return value should be { errors: 0, warnings: 0, total: 0 }
       const issueCounts = ref.current.getIssueCounts();
       expect(issueCounts).toEqual({
-        html: expect.any(Number),
-        label: expect.any(Number),
-        liquid: expect.any(Number),
+        errors: expect.any(Number),
+        warnings: expect.any(Number),
         total: expect.any(Number),
       });
       // Verify all keys exist
-      expect(issueCounts.html).toBeDefined();
-      expect(issueCounts.label).toBeDefined();
-      expect(issueCounts.liquid).toBeDefined();
+      expect(issueCounts.errors).toBeDefined();
+      expect(issueCounts.warnings).toBeDefined();
       expect(issueCounts.total).toBeDefined();
     });
 

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -14,8 +14,10 @@ export default css`
       margin: 0 auto;
       width: 100%;
       padding: ${CAP_SPACE_24} 0;
-      .ant-tabs-content{
-        margin-top: ${CAP_SPACE_16}
+      /* Only main channel tabs content, not HTML Editor validation panel tabs */
+      > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
+      > .cap-tab-v2 > .ant-tabs-content {
+        margin-top: ${CAP_SPACE_16};
       }
     ` : `.cap-tab-v2 {
       height: calc(100vh - 11.25rem);