cap-creatives-ui 8.0.280 → 8.0.321

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

@@ -13,7 +13,7 @@ import { IntlProvider } from 'react-intl';
 import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
 import { validateTags } from '../../../../utils/tagValidations';
-import { isEmailUnsubscribeTagMandatory } from '../../../../utils/common';
+import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
 
 // Mock dependencies
 jest.mock('../../../../utils/commonUtils', () => ({
@@ -24,11 +24,8 @@ jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
 }));
 
-// Create mutable mock for hasLiquidSupportFeature
-const mockHasLiquidSupportFeature = jest.fn(() => true);
 jest.mock('../../../../utils/common', () => ({
-  hasLiquidSupportFeature: (...args) => mockHasLiquidSupportFeature(...args),
-  isEmailUnsubscribeTagMandatory: jest.fn(() => false),
+  isEmailUnsubscribeTagOptional: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/history', () => ({
@@ -49,10 +46,16 @@ const mockGetValidationState = jest.fn(() => ({
   issueCounts: { errors: 0, warnings: 0, total: 0 },
 }));
 
+// Ref to capture apiValidationErrors passed to HTMLEditor (for mergedApiValidationErrors tests)
+const capturedApiValidationErrorsRef = { current: null };
+
 // Mock HtmlEditor - it exports a lazy-loaded component by default
 jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
   const React = require('react');
   const MockHTMLEditor = React.forwardRef((props, ref) => {
+    if (global.__captureApiValidationErrorsRef && props.apiValidationErrors) {
+      global.__captureApiValidationErrorsRef.current = props.apiValidationErrors;
+    }
     React.useImperativeHandle(ref, () => ({
       getAllIssues: () => mockGetAllIssues(),
       getValidationState: () => mockGetValidationState(),
@@ -68,7 +71,10 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
     }));
 
     return (
-      <div data-testid="html-editor">
+      <div
+        data-testid="html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
         <button
           onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
           data-testid="trigger-content-change"
@@ -109,6 +115,9 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
 jest.mock('../../../../v2Components/HtmlEditor', () => {
   const React = require('react');
   const MockHTMLEditor = React.forwardRef((props, ref) => {
+    if (global.__captureApiValidationErrorsRef && props.apiValidationErrors) {
+      global.__captureApiValidationErrorsRef.current = props.apiValidationErrors;
+    }
     React.useImperativeHandle(ref, () => ({
       getAllIssues: () => mockGetAllIssues(),
       getValidationState: () => mockGetValidationState(),
@@ -124,7 +133,10 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
     }));
 
     return (
-      <div data-testid="html-editor">
+      <div
+        data-testid="html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
         <button
           onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
           data-testid="trigger-content-change"
@@ -358,6 +370,7 @@ const defaultProps = {
   },
   loadingTags: false,
   eventContextTags: [],
+  waitEventContextTags: {},
   forwardedTags: {},
   selectedOfferDetails: [],
   currentOrgDetails: {
@@ -411,7 +424,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
-    isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+    isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
     mockGetValidationState.mockReturnValue({
@@ -419,8 +432,6 @@ describe('EmailHTMLEditor', () => {
       hasErrors: false,
       issueCounts: { errors: 0, warnings: 0, total: 0 },
     });
-    // Reset hasLiquidSupportFeature mock to return true by default
-    mockHasLiquidSupportFeature.mockReturnValue(true);
   });
 
   describe('Default Parameter Values (lines 60-63)', () => {
@@ -518,6 +529,17 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('waitEventContextTags', () => {
+    it('forwards waitEventContextTags to HTMLEditor', () => {
+      const waitMap = { b1: { eventName: 'E', blockName: 'B', tags: ['t'] } };
+      renderWithIntl({ waitEventContextTags: waitMap });
+      expect(screen.getByTestId('html-editor')).toHaveAttribute(
+        'data-wait-event-context-tags',
+        JSON.stringify(waitMap),
+      );
+    });
+  });
+
   describe('Content Initialization', () => {
     it('initializes with empty content in create mode', () => {
       renderWithIntl({ isGetFormData: false });
@@ -1016,38 +1038,8 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
-    it('blocks save when unsubscribe validation is on (flag false) and tag is missing', async () => {
-      // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false we validate and require unsubscribe
-      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
-      const onValidationFail = jest.fn();
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Set subject via input and content via HTMLEditor mock
-      const { rerender } = renderWithIntl({
-        onValidationFail,
-        isGetFormData: false,
-        moduleType: 'OUTBOUND',
-      });
-      const input = screen.getByTestId('subject-input');
-      fireEvent.change(input, { target: { value: 'Valid Subject' } });
-      // Trigger content change to set htmlContent
-      const changeButton = screen.getByTestId('trigger-content-change');
-      fireEvent.click(changeButton);
-      // Now trigger save
-      rerender(
-        <IntlProvider locale="en" messages={{}}>
-          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData moduleType="OUTBOUND" />
-        </IntlProvider>
-      );
-
-      await waitFor(() => {
-        expect(CapNotification.error).toHaveBeenCalled();
-        expect(onValidationFail).toHaveBeenCalled();
-      }, { timeout: 3000 });
-    });
-
     it('allows save when unsubscribe validation is on and tag is present', () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+      isEmailUnsubscribeTagOptional.mockReturnValue(false);
       renderWithIntl({
         isGetFormData: true,
         subject: 'Valid Subject',
@@ -1057,49 +1049,44 @@ describe('EmailHTMLEditor', () => {
       // Should proceed with save (validation passes)
     });
 
-    it('blocks save for non-liquid orgs when tag validation fails', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
-      validateTags.mockReturnValue({
-        valid: false,
-        unsupportedTags: ['tag1'],
-        missingTags: ['tag2'],
+    it('blocks save when liquid API validation fails for Email', async () => {
+      // Liquid validation runs in library mode (!isFullMode). Simulate API validation failure via mock onError.
+      validateLiquidTemplateContent.mockImplementation((content, options) => {
+        options.onError({ standardErrors: [], liquidErrors: ['Validation failed'] });
+        return Promise.resolve(false);
       });
       const onValidationFail = jest.fn();
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         onValidationFail,
         isGetFormData: false,
+        isFullMode: false,
         metaEntities: {
           tags: {
             standard: [{ name: 'customer.name' }],
           },
         },
-        getLiquidTags: null, // No liquid tags for non-liquid org
+        getLiquidTags: jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false })),
       });
       const input = screen.getByTestId('subject-input');
       fireEvent.change(input, { target: { value: 'Valid Subject' } });
       const changeButton = screen.getByTestId('trigger-content-change');
       fireEvent.click(changeButton);
-      // Now trigger save
       rerender(
         <IntlProvider locale="en" messages={{}}>
           <EmailHTMLEditor
             {...defaultProps}
             onValidationFail={onValidationFail}
             isGetFormData
+            isFullMode={false}
             metaEntities={{
               tags: {
                 standard: [{ name: 'customer.name' }],
               },
             }}
-            getLiquidTags={null} />
+            getLiquidTags={jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false }))} />
         </IntlProvider>
       );
-
       await waitFor(() => {
-        expect(CapNotification.error).toHaveBeenCalled();
         expect(onValidationFail).toHaveBeenCalled();
       }, { timeout: 3000 });
     });
@@ -1116,16 +1103,16 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Set subject and content via component interactions
+      // Liquid validation runs only in library mode
+      // 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' }],
           },
         },
-        isLiquidEnabled: true,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1147,7 +1134,7 @@ describe('EmailHTMLEditor', () => {
             <EmailHTMLEditor
               {...defaultProps}
               isGetFormData
-              isFullMode
+              isFullMode={false}
               metaEntities={{
                 tags: {
                   standard: [{ name: 'customer.name' }],
@@ -1171,11 +1158,11 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Set subject and content via component interactions
+      // Liquid validation runs only in library mode
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
-        isLiquidEnabled: true,
+        isFullMode: false,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1194,7 +1181,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>
         );
       });
@@ -1221,11 +1208,11 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Set subject and content via component interactions
+      // Liquid validation runs only in library mode
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
-        isLiquidEnabled: true,
+        isFullMode: false,
         getLiquidTags,
         showLiquidErrorInFooter,
         onValidationFail,
@@ -1246,7 +1233,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>
         );
       });
@@ -1266,27 +1253,22 @@ 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 });
       });
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Set subject and content via component interactions
+      // Liquid validation runs only in library mode; then performSave calls getFormdata
+      // Use isFullMode: false (library mode) to test liquid validation path
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: true,
-        isLiquidEnabled: true,
+        isFullMode: false,
+        isFullMode: false,
         getLiquidTags,
-        emailActions,
-        templateName: 'New Template',
+        getFormdata,
+        location: { query: { module: 'library' } },
       });
       const input = screen.getByTestId('subject-input');
       await act(async () => {
@@ -1304,7 +1286,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} location={{ query: { module: 'library' } }} />
           </IntlProvider>
         );
       });
@@ -1313,13 +1295,13 @@ 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 });
     });
 
     it('saves in full mode with create template', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1353,7 +1335,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in full mode with edit template', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1423,7 +1404,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template error response', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1458,7 +1438,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template success with getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1495,7 +1474,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template success without getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1531,7 +1509,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in library mode with getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const getFormdata = jest.fn();
 
       // Set subject and content via component interactions
@@ -1559,7 +1536,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in library mode without library module', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const getFormdata = jest.fn();
 
       // Set subject and content via component interactions
@@ -1699,7 +1675,6 @@ describe('EmailHTMLEditor', () => {
       renderWithIntl({
         getLiquidTags: null,
         globalActions,
-        isLiquidEnabled: true,
         isGetFormData: true,
         subject: 'Valid Subject',
         htmlContent: '<p>Content</p>',
@@ -2652,4 +2627,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();
+    });
+  });
 });

package/app/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js

@@ -37,7 +37,14 @@ jest.mock('../EmailHTMLEditor', () => {
       getContentForPreview: jest.fn(() => '<p>Test</p>'),
     }));
 
-    return <div data-testid="email-html-editor">HTML Editor</div>;
+    return (
+      <div
+        data-testid="email-html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
+        HTML Editor
+      </div>
+    );
   });
 });
 
@@ -137,6 +144,7 @@ const defaultProps = {
   forwardedTags: {},
   selectedOfferDetails: [],
   eventContextTags: [],
+  waitEventContextTags: {},
   getFormdata: jest.fn(),
   isGetFormData: false,
   getLiquidTags: jest.fn(),
@@ -171,6 +179,13 @@ describe('EmailWrapperView', () => {
     jest.clearAllMocks();
   });
 
+  it('passes waitEventContextTags to EmailHTMLEditor when HTML editor is shown', () => {
+    const waitMap = { b1: { eventName: 'E', blockName: 'B', tags: [] } };
+    renderWithIntl({ waitEventContextTags: waitMap });
+    const el = screen.getByTestId('email-html-editor');
+    expect(el).toHaveAttribute('data-wait-event-context-tags', JSON.stringify(waitMap));
+  });
+
   describe('Mode Selection UI', () => {
     it('renders mode selection when step is MODE_SELECTION', () => {
       renderWithIntl({ step: STEPS.MODE_SELECTION });

package/app/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -51,6 +51,7 @@ const useEmailWrapper = ({
   editor,
   moduleType,
   eventContextTags,
+  waitEventContextTags,
   isLoyaltyModule,
   // Props for CmsTemplates component
   cmsTemplatesLoader,
@@ -206,7 +207,11 @@ const useEmailWrapper = ({
 
     // Only fetch if we have an ID, don't have template data yet, and not already loading
     if (hasParamsId && !hasTemplateDetails && !hasTemplateDataProp && !isTemplateLoading && emailActions?.getTemplateDetails) {
-      const templateId = params?.id || location?.query?.id || location?.params?.id;
+      let templateId = params?.id || location?.query?.id || location?.params?.id;
+      if (!templateId && location?.pathname?.includes('/edit/')) {
+        const [, extractedId] = location.pathname.match(/\/edit\/([^/]+)/) || [];
+        if (extractedId) templateId = extractedId;
+      }
       if (templateId) {
         emailActions.getTemplateDetails(templateId, 'email');
       }
@@ -581,8 +586,6 @@ const useEmailWrapper = ({
         // CRITICAL: Only treat as edit mode if we have params.id (actual edit URL) or templateData prop
         // Don't use templateDetails existence alone, as it might persist from previous template
         const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-        const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-        const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
         const hasTemplateDataProp = templateData && !isEmpty(templateData);
         // CRITICAL: Consider it edit mode if we have params.id OR templateData prop (library mode)
         // This allows editor type determination even when template data is still loading
@@ -590,13 +593,14 @@ const useEmailWrapper = ({
 
         if (isEditMode) {
           // Edit mode: Determine editor based on template data
-          // Check if template was created in BEE editor
           // Priority: Email.templateDetails > Email.BEETemplate > templateData prop
-          const editTemplateData = Email?.templateDetails || Email?.BEETemplate || templateData;
-
+          // Use first non-empty source (empty array/object can appear while template is loading)
+          const editTemplateData = [Email?.templateDetails, Email?.BEETemplate, templateData].find(
+            (d) => d && !isEmpty(d)
+          ) || null;
           // Helper function to safely get is_drag_drop from various possible paths
           const getIsDragDrop = (data) => {
-            if (!data) return false;
+            if (!data || isEmpty(data)) return false;
 
             // Check common paths for is_drag_drop
             // Path 1: versions.base.is_drag_drop (most common)
@@ -630,8 +634,10 @@ const useEmailWrapper = ({
             return false;
           };
 
-          const isDragDrop = getIsDragDrop(editTemplateData);
-
+          // When template data is still loading (editTemplateData empty), trust editor prop so BEE templates open in BEE
+          const hasMeaningfulTemplateData = editTemplateData && !isEmpty(editTemplateData);
+          const isDragDrop = getIsDragDrop(editTemplateData)
+            || (!hasMeaningfulTemplateData && editor === 'BEE');
           // Check if BEE is enabled for org (equivalent to checkBeeEditorAllowedForLibrary)
           // For editor selection:
           // - In full mode: BEE is always enabled
@@ -643,7 +649,6 @@ const useEmailWrapper = ({
             || (editor === "BEE" && !isFullMode)
             || beeEnabledFromAPI
             || (isAPIResponsePending && isDragDrop && !isFullMode); // Optimistic: if template is BEE and API pending, allow BEE
-
           // If template was created in BEE AND BEE is enabled → open in BEE editor
           // Otherwise → open in HTML editor (fallback)
           // IMPORTANT: When supportCKEditor is false, default to HTML editor unless explicitly BEE
@@ -733,6 +738,7 @@ const useEmailWrapper = ({
       selectedEditorMode, // Pass selected mode to Email component (only for HTML_EDITOR)
       moduleType,
       eventContextTags,
+      waitEventContextTags,
       isLoyaltyModule,
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
@@ -762,6 +768,7 @@ const useEmailWrapper = ({
     editor,
     moduleType,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
@@ -790,8 +797,6 @@ const useEmailWrapper = ({
     // In edit mode (when supportCKEditor is false), always show editor
     if (!supportCKEditorFlag && isEditMode) {
       // Check if it's explicitly BEE editor
-      const isExplicitlyBEE = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
-        || (emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null);
       // Show editor for both BEE and HTML in edit mode
       return true;
     }

package/app/v2Containers/EmailWrapper/index.js

@@ -63,6 +63,7 @@ const EmailWrapper = (props) => {
     onEnterTemplateName,
     onRemoveTemplateName,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     cmsTemplatesLoader,
     onPreviewContentClicked,
@@ -130,6 +131,7 @@ const EmailWrapper = (props) => {
     onEnterTemplateName,
     onRemoveTemplateName,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     cmsTemplatesLoader,
     onPreviewContentClicked,
@@ -184,6 +186,7 @@ const EmailWrapper = (props) => {
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         getFormdata={getFormdata}
         isGetFormData={isGetFormData}
         getLiquidTags={globalActionsProp?.getLiquidTags}
@@ -241,6 +244,7 @@ EmailWrapper.propTypes = {
   onEnterTemplateName: PropTypes.func,
   onRemoveTemplateName: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   isLoyaltyModule: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,

package/app/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js

@@ -112,6 +112,7 @@ describe('useEmailWrapper - Edge Cases', () => {
       editor: 'HTML',
       moduleType: null,
       eventContextTags: [],
+      waitEventContextTags: {},
       isLoyaltyModule: false,
       cmsTemplatesLoader: jest.fn(),
       currentOrgDetails: {},