@capillarytech/creatives-library 8.0.298 → 8.0.299-alpha.0

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

@@ -644,6 +644,326 @@ describe('useValidation', () => {
     // The functionality is verified through integration tests and the hasErrors test above
   });
 
+  describe('getLineAndColumnFromPosition utility (lines 36-46)', () => {
+    it('computes correct line and column from position in security issue', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      // position 12 in "line1\nline2\nX" → line 3, column 1
+      const content = 'line1\nline2\njavascript:alert(1)';
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol', position: 12 }]);
+
+      render(
+        <TestComponent
+          content={content}
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        expect(secIssue.line).toBe(3);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+
+    it('defaults line/column to 1 when security issue has no position', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol' }]); // no position
+
+      render(
+        <TestComponent
+          content="<a href='javascript:x'>x</a>"
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        expect(secIssue.line).toBe(1);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+
+    it('handles negative or undefined position in getLineAndColumnFromPosition', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol', position: -5 }]);
+
+      render(
+        <TestComponent
+          content="<a href='javascript:x'>x</a>"
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        // negative position falls back to line 1, column 1
+        expect(secIssue.line).toBe(1);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+  });
+
+  describe('getAllIssues spread — all six arrays included (lines 401-411)', () => {
+    it('includes items from htmlErrors, htmlWarnings, htmlInfo, cssErrors, cssWarnings, cssInfo', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'html error', line: 1, column: 1, rule: 'r1', severity: 'error', source: 'htmlhint' }],
+        warnings: [{ type: 'warning', message: 'html warning', line: 2, column: 1, rule: 'r2', severity: 'warning', source: 'htmlhint' }],
+        info: [{ type: 'info', message: 'html info', line: 3, column: 1, rule: 'r3', severity: 'info', source: 'htmlhint' }],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'css error', line: 4, column: 1, rule: 'r4', severity: 'error', source: 'css-validator' }],
+        warnings: [{ type: 'warning', message: 'css warning', line: 5, column: 1, rule: 'r5', severity: 'warning', source: 'css-validator' }],
+        info: [{ type: 'info', message: 'css info', line: 6, column: 1, rule: 'r6', severity: 'info', source: 'css-validator' }],
+      }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const rules = issues.map((i) => i.rule);
+        expect(rules).toContain('r1'); // htmlErrors
+        expect(rules).toContain('r2'); // htmlWarnings
+        expect(rules).toContain('r3'); // htmlInfo
+        expect(rules).toContain('r4'); // cssErrors
+        expect(rules).toContain('r5'); // cssWarnings
+        expect(rules).toContain('r6'); // cssInfo
+        expect(issues.length).toBeGreaterThanOrEqual(6);
+      });
+    });
+
+    it('sorts issues: errors before warnings before info', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'html error', line: 10, column: 1, rule: 're', severity: 'error', source: 'htmlhint' }],
+        warnings: [{ type: 'warning', message: 'html warning', line: 1, column: 1, rule: 'rw', severity: 'warning', source: 'htmlhint' }],
+        info: [{ type: 'info', message: 'html info', line: 1, column: 1, rule: 'ri', severity: 'info', source: 'htmlhint' }],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const severities = issues.map((i) => i.severity);
+        // Errors should come before warnings, warnings before info
+        const firstError = severities.indexOf('error');
+        const firstWarning = severities.indexOf('warning');
+        const firstInfo = severities.indexOf('info');
+        if (firstError !== -1 && firstWarning !== -1) expect(firstError).toBeLessThan(firstWarning);
+        if (firstWarning !== -1 && firstInfo !== -1) expect(firstWarning).toBeLessThan(firstInfo);
+      });
+    });
+  });
+
+  describe('hasClientSideLiquidErrors and hasBlockingErrors (lines 455-456)', () => {
+    it('sets hasBlockingErrors=true when htmlErrors has a liquid-validator error', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{
+          type: 'error',
+          message: 'Liquid syntax error',
+          line: 1,
+          column: 1,
+          rule: 'liquid-syntax',
+          severity: 'error',
+          source: 'liquid-validator', // ISSUE_SOURCES.LIQUID
+        }],
+        warnings: [],
+        info: [],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="{{ invalid liquid }}"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasClientSideLiquidErrors → true because htmlErrors has liquid-validator+error item
+        // therefore hasBlockingErrors → true
+        expect(validationState.hasBlockingErrors).toBe(true);
+      });
+    });
+
+    it('does NOT set hasBlockingErrors from liquid-validator warning (non-error severity)', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [{
+          type: 'warning',
+          message: 'Liquid warning',
+          line: 1,
+          column: 1,
+          rule: 'liquid-warning',
+          severity: 'warning',
+          source: 'liquid-validator',
+        }],
+        info: [],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasClientSideLiquidErrors → false (severity is warning, not error)
+        // No other blocking conditions → hasBlockingErrors → false
+        expect(validationState.hasBlockingErrors).toBe(false);
+      });
+    });
+
+    it('sets hasBlockingErrors=true via API liquid errors', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{
+            enableRealTime: false,
+            enableSanitization: false,
+            apiValidationErrors: { liquidErrors: ['API liquid error'], standardErrors: [] },
+          }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasApiErrors → true → hasBlockingErrors → true
+        expect(validationState.hasBlockingErrors).toBe(true);
+      });
+    });
+
+    it('hasBlockingErrors=false when no blocking conditions are present', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>clean</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        expect(validationState.hasBlockingErrors).toBe(false);
+      });
+    });
+  });
+
   describe('Blocking errors', () => {
     it('treats protocol security issues as blocking errors', async () => {
       const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');

package/v2Components/HtmlEditor/utils/__tests__/htmlValidator.enhanced.test.js

@@ -1076,6 +1076,138 @@ line4`;
       expect(result).toBeDefined();
       expect(Array.isArray(result.warnings)).toBe(true);
     });
+
+    it('routes warning-severity issues to warnings array — exact item check (line 112-113)', () => {
+      // Mock HTMLHint to return an issue with a warningRule ruleId
+      // getSeverityLevel('error', 'tag-pair') → 'warning' (warningRules match)
+      const htmlhint = require('htmlhint');
+      const original = htmlhint.HTMLHint.verify;
+      htmlhint.HTMLHint.verify = jest.fn(() => ([
+        {
+          type: 'error',
+          message: 'Tag must be paired',
+          line: 1,
+          col: 5,
+          rule: { id: 'tag-pair' },
+        },
+      ]));
+
+      const result = validateHTML('<p>unclosed');
+
+      expect(result.warnings.length).toBeGreaterThanOrEqual(1);
+      const item = result.warnings.find((w) => w.rule === 'tag-pair');
+      expect(item).toBeDefined();
+      expect(item.severity).toBe('warning');
+
+      htmlhint.HTMLHint.verify = original;
+    });
+
+    it('routes info-severity issues to info array — exact item check (line 114-115)', () => {
+      // getSeverityLevel('warning', 'space-tab-mixed-disabled') → 'info'
+      // (not in warningRules, type !== 'error')
+      const htmlhint = require('htmlhint');
+      const original = htmlhint.HTMLHint.verify;
+      htmlhint.HTMLHint.verify = jest.fn(() => ([
+        {
+          type: 'warning',
+          message: 'Mixed spaces and tabs',
+          line: 1,
+          col: 1,
+          rule: { id: 'space-tab-mixed-disabled' },
+        },
+      ]));
+
+      const result = validateHTML('<div>test</div>');
+
+      expect(result.info.length).toBeGreaterThanOrEqual(1);
+      const item = result.info.find((i) => i.rule === 'space-tab-mixed-disabled');
+      expect(item).toBeDefined();
+      expect(item.severity).toBe('info');
+
+      htmlhint.HTMLHint.verify = original;
+    });
+
+    it('downgrades HTMLHint error type to warning for non-warningRule (line 163-164) — exact item check', () => {
+      // getSeverityLevel('error', 'src-not-empty') → 'warning' (not in warningRules, but type === 'error')
+      const htmlhint = require('htmlhint');
+      const original = htmlhint.HTMLHint.verify;
+      htmlhint.HTMLHint.verify = jest.fn(() => ([
+        {
+          type: 'error',
+          message: 'The src attribute cannot be empty',
+          line: 1,
+          col: 1,
+          rule: { id: 'src-not-empty' },
+        },
+      ]));
+
+      const result = validateHTML('<img src="">');
+
+      // Should be downgraded to warning (not error)
+      expect(result.warnings.length).toBeGreaterThanOrEqual(1);
+      const item = result.warnings.find((w) => w.rule === 'src-not-empty');
+      expect(item).toBeDefined();
+      expect(item.severity).toBe('warning');
+      // Should NOT be in errors
+      expect(result.errors.find((e) => e.rule === 'src-not-empty')).toBeUndefined();
+
+      htmlhint.HTMLHint.verify = original;
+    });
+
+    it('returns info for HTMLHint warning type with unknown ruleId (line 165-166)', () => {
+      // getSeverityLevel('warning', 'unknown-rule') → 'info' (no warningRules match, type !== 'error')
+      const htmlhint = require('htmlhint');
+      const original = htmlhint.HTMLHint.verify;
+      htmlhint.HTMLHint.verify = jest.fn(() => ([
+        {
+          type: 'warning',
+          message: 'Some custom warning',
+          line: 2,
+          col: 3,
+          rule: { id: 'unknown-custom-rule' },
+        },
+      ]));
+
+      const result = validateHTML('<div>test</div>');
+
+      expect(result.info.length).toBeGreaterThanOrEqual(1);
+      const item = result.info.find((i) => i.rule === 'unknown-custom-rule');
+      expect(item).toBeDefined();
+      expect(item.severity).toBe('info');
+      expect(item.line).toBe(2);
+      expect(item.column).toBe(3);
+      // Should NOT be in errors or warnings
+      expect(result.errors.find((e) => e.rule === 'unknown-custom-rule')).toBeUndefined();
+      expect(result.warnings.find((w) => w.rule === 'unknown-custom-rule')).toBeUndefined();
+
+      htmlhint.HTMLHint.verify = original;
+    });
+
+    it('processes multiple HTMLHint issues with mixed severity correctly (lines 101-118)', () => {
+      const htmlhint = require('htmlhint');
+      const original = htmlhint.HTMLHint.verify;
+      htmlhint.HTMLHint.verify = jest.fn(() => ([
+        { type: 'error', message: 'Tag pair', line: 1, col: 1, rule: { id: 'tag-pair' } },           // → warning
+        { type: 'error', message: 'Src empty', line: 2, col: 1, rule: { id: 'src-not-empty' } },     // → warning (downgrade)
+        { type: 'warning', message: 'Mixed tabs', line: 3, col: 1, rule: { id: 'space-tab-mixed-disabled' } }, // → info
+      ]));
+
+      const result = validateHTML('<div>test</div>');
+
+      const tagPair = result.warnings.find((w) => w.rule === 'tag-pair');
+      expect(tagPair).toBeDefined();
+      expect(tagPair.severity).toBe('warning');
+
+      const srcEmpty = result.warnings.find((w) => w.rule === 'src-not-empty');
+      expect(srcEmpty).toBeDefined();
+      expect(srcEmpty.severity).toBe('warning');
+
+      const mixedTabs = result.info.find((i) => i.rule === 'space-tab-mixed-disabled');
+      expect(mixedTabs).toBeDefined();
+      expect(mixedTabs.severity).toBe('info');
+
+      htmlhint.HTMLHint.verify = original;
+    });
   });
 
   describe('extractAndValidateCSS Advanced Tests', () => {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -1078,8 +1078,38 @@ export function SlideBoxContent(props) {
       )}
 
       {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
+  (isFullMode && !commonUtil.hasNewEditorFlowInAppEnabled()) ||
+  (!isFullMode && isLoyaltyModule) ||
+  (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewEditorFlowInAppEnabled()) ? (
+    <InApp
+      key="creatives-inapp-create"
+      location={{ pathname: '/inapp/create', query, search: '' }}
+      setIsLoadingContent={setIsLoadingContent}
+      isGetFormData={isGetFormData}
+      getFormData={getFormData}
+      getDefaultTags={type}
+      isFullMode={isFullMode}
+      templateData={templateData}
+      cap={cap}
+      showTemplateName={showTemplateName}
+      showLiquidErrorInFooter={showLiquidErrorInFooter}
+      onValidationFail={onValidationFail}
+      forwardedTags={forwardedTags}
+      selectedOfferDetails={selectedOfferDetails}
+      onPreviewContentClicked={onPreviewContentClicked}
+      onTestContentClicked={onTestContentClicked}
+      eventContextTags={eventContextTags}
+      onCreateComplete={onCreateComplete}
+      handleClose={handleClose}
+      moduleType={moduleType}
+      showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+      handleTestAndPreview={handleTestAndPreview}
+      handleCloseTestAndPreview={handleCloseTestAndPreview}
+      isTestAndPreviewMode={isTestAndPreviewMode}
+    />
+  ) : (
+    <InAppWrapper
+      key="creatives-inapp-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onInAppEditorTypeChange={onInAppEditorTypeChange}
@@ -1114,10 +1144,12 @@ export function SlideBoxContent(props) {
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
       />
+      )
       )}
-
+  
       {isEditInApp && (<InApp
         isFullMode={isFullMode}
+        isLoyaltyModule={isLoyaltyModule}
         templateData={templateData}
         getFormData={getFormData}
         getDefaultTags={type}