@capillarytech/creatives-library 8.0.302 → 8.0.303

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.302",
+  "version": "8.0.303",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/index.js

@@ -1331,7 +1331,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
   onSubmitWrapper = (args) => {
     const {singleTab = null} = args || {};
-    if (this.liquidFlow()) {
+    if (this.liquidFlow() && !this.props?.isFullMode) {
       // For MPUSH, we need to validate both Android and iOS content separately
       if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
         this.validateFormBuilderMPush(this.state.formData, singleTab);

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -294,6 +294,7 @@ const HTMLEditor = forwardRef(({
     enableSanitization: true,
     securityLevel: 'standard',
     apiValidationErrors, // Pass API validation errors to merge with client-side validation
+    isFullMode, // Skip liquid validation in standalone/full mode
   }, formatSanitizerMessage, formatValidatorMessage);
 
   // Expose validation and content state via ref

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -1375,6 +1375,7 @@ describe('HTMLEditor', () => {
           debounceMs: 500,
           enableSanitization: true,
           securityLevel: 'standard',
+          isFullMode: true,
         },
         expect.any(Function),
         expect.any(Function)

package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js

@@ -155,7 +155,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: false });
     });
 
     it('updates validation when content changes', async () => {
@@ -472,7 +472,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'inapp', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'inapp', null, { skipLiquidValidation: false });
     });
 
     it('defaults to email variant', async () => {
@@ -487,7 +487,7 @@ describe('useValidation', () => {
         await Promise.resolve();
       });
 
-      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null);
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: false });
     });
   });
 
@@ -1242,4 +1242,133 @@ describe('useValidation', () => {
       });
     });
   });
+
+  describe('isFullMode - skip liquid validation', () => {
+    it('passes skipLiquidValidation: true to validateHTML when isFullMode is true', async () => {
+      const { validateHTML } = require('../../utils/htmlValidator');
+
+      render(<TestComponent content="<p>Test</p>" options={{ isFullMode: true }} />);
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(validateHTML).toHaveBeenCalledWith('<p>Test</p>', 'email', null, { skipLiquidValidation: true });
+    });
+
+    it('excludes API liquid errors from getAllIssues when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Test</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      const issues = validationState.getAllIssues();
+      const liquidIssues = issues.filter((i) => i.source === 'liquid-validator');
+      expect(liquidIssues).toHaveLength(0);
+    });
+
+    it('returns isClean true when only liquid errors exist and isFullMode is true', () => {
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content=""
+          options={{ apiValidationErrors, isFullMode: true }}
+        />
+      );
+
+      // Before validation runs, isClean should be true because liquid errors are ignored in full mode
+      expect(screen.getByTestId('is-clean')).toHaveTextContent('true');
+    });
+
+    it('does not treat liquid errors as blocking when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Unsupported tag: points_balance'],
+        standardErrors: [],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Valid</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      expect(validationState.hasBlockingErrors).toBe(false);
+    });
+
+    it('still treats standard API errors as blocking when isFullMode is true', async () => {
+      let validationState;
+      const onStateChange = (state) => { validationState = state; };
+
+      const apiValidationErrors = {
+        liquidErrors: ['Liquid error'],
+        standardErrors: ['Standard error'],
+      };
+
+      render(
+        <TestComponent
+          content="<p>Valid</p>"
+          options={{ apiValidationErrors, isFullMode: true }}
+          onStateChange={onStateChange}
+        />
+      );
+
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      expect(validationState.hasBlockingErrors).toBe(true);
+    });
+  });
 });

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -77,6 +77,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     enableSanitization = true,
     securityLevel = 'standard',
     apiValidationErrors = null, // API validation errors from validateLiquidTemplateContent
+    isFullMode = false, // When true, skip liquid validation (standalone/full mode)
   } = options;
 
   // Validation state
@@ -137,7 +138,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
     try {
       // 1. HTML Validation
-      const htmlValidation = validateHTML(htmlContent, variant, formatValidatorMessage);
+      const htmlValidation = validateHTML(htmlContent, variant, formatValidatorMessage, { skipLiquidValidation: isFullMode });
 
       // 2. CSS Validation (extract from HTML)
       const cssValidation = extractAndValidateCSS(htmlContent, formatValidatorMessage);
@@ -206,7 +207,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         },
       }));
     }
-  }, [variant, enableSanitization, securityLevel, formatSanitizerMessage, formatValidatorMessage]);
+  }, [variant, enableSanitization, securityLevel, formatSanitizerMessage, formatValidatorMessage, isFullMode]);
 
   /**
    * Validates content with debouncing
@@ -339,7 +340,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
    */
   const getAllIssues = useCallback(() => {
     // API errors (liquid + standard) are blocking – they block Save/Update/Preview/Test
-    const apiLiquidErrors = (apiValidationErrors?.liquidErrors || []).map((errorMessage) => {
+    const apiLiquidErrors = (isFullMode ? [] : (apiValidationErrors?.liquidErrors || [])).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
         type: VALIDATION_SEVERITY.ERROR,
@@ -420,19 +421,20 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
     // Ensure we always return an array
     return Array.isArray(allIssues) ? allIssues : [];
-  }, [validationState, apiValidationErrors, extractLineNumberFromMessage, content]);
+  }, [validationState, apiValidationErrors, extractLineNumberFromMessage, content, isFullMode]);
 
   /**
    * Check if validation is clean (no errors or warnings)
    * Includes API validation errors in the check
    */
   const isClean = useCallback(() => {
-    const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
+    const liquidErrorCount = isFullMode ? 0 : (apiValidationErrors?.liquidErrors?.length || 0);
+    const hasApiErrors = liquidErrorCount + (apiValidationErrors?.standardErrors?.length || 0) > 0;
     return validationState.summary.totalErrors === 0
            && validationState.summary.totalWarnings === 0
            && !validationState.summary.hasSecurityIssues
            && !hasApiErrors;
-  }, [validationState.summary, apiValidationErrors]);
+  }, [validationState.summary, apiValidationErrors, isFullMode]);
 
   // Effect to validate content when it changes
   useEffect(() => {
@@ -448,11 +450,12 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     }
   }, []);
 
-  const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
+  const hasApiLiquidErrors = isFullMode ? false : (apiValidationErrors?.liquidErrors?.length || 0) > 0;
+  const hasApiErrors = hasApiLiquidErrors || (apiValidationErrors?.standardErrors?.length || 0) > 0;
 
   const protocolTypes = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
-  // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
+  // Client-side Liquid validation errors are blocking (genuine syntax errors) - skip in full mode
+  const hasClientSideLiquidErrors = isFullMode ? false : (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
   const hasBlockingErrors = (validationState.sanitizationWarnings || []).some((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)) || (validationState.securityIssues || []).some((s) => protocolTypes.includes(s?.type)) || hasApiErrors || hasClientSideLiquidErrors;
 
   return {

package/v2Components/HtmlEditor/utils/htmlValidator.js

@@ -76,7 +76,7 @@ const CUSTOM_VALIDATIONS = {
  * @param {Function} formatMessage - Message formatter function for internationalization
  * @returns {Object} Validation result with errors and warnings
  */
-export const validateHTML = (html, variant = 'email', formatMessage = defaultMessageFormatter) => {
+export const validateHTML = (html, variant = 'email', formatMessage = defaultMessageFormatter, options = {}) => {
   if (!html || typeof html !== 'string') {
     return {
       isValid: true,
@@ -133,7 +133,9 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
   // Always run custom validations and Liquid validation, even if HTMLHint failed
   // This ensures unsafe protocol detection and other critical validations still run
   runCustomValidations(html, variant, results, formatMessage);
-  runLiquidValidation(html, variant, results, formatMessage);
+  if (!options.skipLiquidValidation) {
+    runLiquidValidation(html, variant, results, formatMessage);
+  }
 
   return results;
 };

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -956,8 +956,8 @@ const EmailHTMLEditor = (props) => {
       }
     };
 
-    // If liquid enabled, validate first using extractTags API
-    if (isLiquidEnabled && getLiquidTags) {
+    // If liquid enabled, validate first using extractTags API (skip in full/standalone mode)
+    if (isLiquidEnabled && getLiquidTags && !isFullMode) {
       // Note: API validation errors are already cleared at the start of handleSave
       // This ensures fresh validation on every save attempt
 

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

@@ -1176,9 +1176,10 @@ describe('EmailHTMLEditor', () => {
       mockGetAllIssues.mockReturnValue([]);
 
       // Set subject and content via component interactions
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
+        isFullMode: false,
         metaEntities: {
           tags: {
             standard: [{ name: 'customer.name' }],
@@ -1206,7 +1207,7 @@ describe('EmailHTMLEditor', () => {
             <EmailHTMLEditor
               {...defaultProps}
               isGetFormData
-              isFullMode
+              isFullMode={false}
               metaEntities={{
                 tags: {
                   standard: [{ name: 'customer.name' }],
@@ -1231,9 +1232,10 @@ describe('EmailHTMLEditor', () => {
       mockGetAllIssues.mockReturnValue([]);
 
       // Set subject and content via component interactions
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
+        isFullMode: false,
         isLiquidEnabled: true,
         getLiquidTags,
       });
@@ -1253,7 +1255,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} />
           </IntlProvider>
         );
       });
@@ -1281,9 +1283,10 @@ describe('EmailHTMLEditor', () => {
       mockGetAllIssues.mockReturnValue([]);
 
       // Set subject and content via component interactions
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
+        isFullMode: false,
         isLiquidEnabled: true,
         getLiquidTags,
         showLiquidErrorInFooter,
@@ -1305,7 +1308,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} showLiquidErrorInFooter={showLiquidErrorInFooter} onValidationFail={onValidationFail} />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} showLiquidErrorInFooter={showLiquidErrorInFooter} onValidationFail={onValidationFail} />
           </IntlProvider>
         );
       });
@@ -1325,13 +1328,7 @@ describe('EmailHTMLEditor', () => {
         return Promise.resolve(true);
       });
 
-      const emailActions = {
-        ...defaultProps.emailActions,
-        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
-        createTemplate: jest.fn((obj, callback) => {
-          callback({ templateId: { _id: '123', versions: {} } });
-        }),
-      };
+      const getFormdata = jest.fn();
       const getLiquidTags = jest.fn((content, callback) => {
         callback({ askAiraResponse: { data: [] }, isError: false });
       });
@@ -1339,12 +1336,12 @@ describe('EmailHTMLEditor', () => {
       mockGetAllIssues.mockReturnValue([]);
 
       // Set subject and content via component interactions
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
-        isLiquidEnabled: true,
+        isFullMode: false,
         getLiquidTags,
-        emailActions,
+        getFormdata,
         templateName: 'New Template',
       });
       const input = screen.getByTestId('subject-input');
@@ -1363,7 +1360,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} emailActions={emailActions} templateName="New Template" />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} getFormdata={getFormdata} templateName="New Template" />
           </IntlProvider>
         );
       });
@@ -1372,8 +1369,9 @@ describe('EmailHTMLEditor', () => {
         expect(validateLiquidTemplateContent).toHaveBeenCalled();
       }, { timeout: 5000 });
 
+      // In library mode (isFullMode=false), save proceeds via getFormdata
       await waitFor(() => {
-        expect(emailActions.createTemplate).toHaveBeenCalled();
+        expect(getFormdata).toHaveBeenCalled();
       }, { timeout: 5000 });
     });
 
@@ -2711,4 +2709,98 @@ describe('EmailHTMLEditor', () => {
       expect(screen.getByTestId('html-editor')).toBeInTheDocument();
     });
   });
+
+  describe('isFullMode - skip liquid validation on save', () => {
+    it('skips liquid validation when isFullMode is true', async () => {
+      validateLiquidTemplateContent.mockClear();
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { data: [] }, isError: false });
+      });
+      const getFormdata = jest.fn();
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
+        getLiquidTags,
+        getFormdata,
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      // Trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} getFormdata={getFormdata} />
+          </IntlProvider>
+        );
+      });
+
+      // In full mode, liquid validation should be skipped entirely
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+      });
+      expect(validateLiquidTemplateContent).not.toHaveBeenCalled();
+    });
+
+    it('proceeds directly to save without liquid validation in full mode', async () => {
+      validateLiquidTemplateContent.mockClear();
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { data: [] }, isError: false });
+      });
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        getLiquidTags,
+        emailActions,
+        templateName: 'New Template',
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      // Trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} emailActions={emailActions} templateName="New Template" />
+          </IntlProvider>
+        );
+      });
+
+      // Should skip liquid validation and proceed to save directly
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 5000 });
+      expect(validateLiquidTemplateContent).not.toHaveBeenCalled();
+    });
+  });
 });