@capillarytech/creatives-library 8.0.280 → 8.0.282

package/package.json

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

package/utils/tagValidations.js

@@ -201,6 +201,7 @@ export const validateTags = ({
     unsupportedTags: [],
     isBraceError: false,
   };
+  // Mandatory-tags check: only when we have a tags list and are in library mode
   if (tags && tags.length && !isFullMode) {
     lodashForEach(tags, ({
       definition: {
@@ -217,6 +218,9 @@ export const validateTags = ({
         }
       });
     });
+  }
+  // In library mode, always scan content for {{...}} and flag unsupported tags (even when tags list is empty)
+  if (!isFullMode && content) {
     const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
     let match = regex.exec(content);
     while (match !== null) {
@@ -224,8 +228,8 @@ export const validateTags = ({
       const tagIndex = match?.index;
       match = regex.exec(content);
       let ifSupported = false;
-      lodashForEach(tags, (tag) => {
-        if (tag.definition.value === tagValue) {
+      lodashForEach(tags || [], (tag) => {
+        if (tag?.definition?.value === tagValue) {
           ifSupported = true;
         }
       });

package/utils/tests/tagValidations.test.js

@@ -104,7 +104,7 @@ describe("validateTags", () => {
     });
 
     expect(result.valid).toEqual(true);
-    expect(result.unsupportedTags).toEqual([]);
+    expect(result.unsupportedTags).toEqual(["tag1", "tag2", "tag3"]);
     expect(result.isBraceError).toEqual(false);
   });
 

package/v2Components/FormBuilder/index.js

@@ -1247,10 +1247,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   },
                 }),
                 () => {
-                  // Callback after the state is updated
                   this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
                 }
               );
+              // Show toast for liquid flow too so user sees error (scenario 3)
+              this.openNotificationWithIcon('error', errorString, "email-validation-error");
             } else {
               this.openNotificationWithIcon('error', errorString, "email-validation-error");
             }
@@ -1518,7 +1519,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.isBraceError = false;
     response.isContentEmpty = false;
     const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
-    if(tags && tags.length && !isFullMode) {
+    const isModuleTypeOutbound = (this.props?.moduleType || '').toUpperCase() === OUTBOUND;
+    // Run tag validation (missing + unsupported): library mode, or full mode with liquid support, or
+    // legacy Email (CK Editor) when unsubscribe is required (EMAIL_UNSUBSCRIBE_TAG_MANDATORY false) so missing-unsubscribe error shows
+    const shouldRunTagValidation = !isFullMode
+      || (isEmail && hasLiquidSupportFeature())
+      || (isEmail && !isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound);
+    if (tags && tags.length && !isFullMode) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
           if (module.mandatory && (currentModule === module.context)) {
@@ -1529,6 +1536,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         });
       });
+      // Legacy Email (CK Editor): when unsubscribe is required, ensure we validate it even if tag schema didn't mark it mandatory for this module
+      if (isEmail && !isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound) {
+        const hasUnsubscribeInContent = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g.test(content);
+        if (!hasUnsubscribeInContent && response.missingTags.indexOf('unsubscribe') === -1) {
+          response.valid = false;
+          response.missingTags.push('unsubscribe');
+        }
+      }
       const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
       let match = regex.exec(content);
       const regexImgSrc=/<img[^>]*\bsrc\s*=\s*"[^"]*{{customer_barcode}}[^"]*"/;
@@ -1537,7 +1552,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let matchCustomerBarcode = regexCustomerBarcode.exec(content);
       // \S matches anything other than a space, a tab, a newline, or a carriage return.
       const validString= /\S/.test(contentForValidation);
-      if (isEmailUnsubscribeTagMandatory() && isEmail && this.props?.moduleType === OUTBOUND) {
+      if (isEmailUnsubscribeTagMandatory() && isEmail && isModuleTypeOutbound) {
         const missingTagIndex = response?.missingTags?.indexOf("unsubscribe");
         if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
           response?.missingTags?.splice(missingTagIndex, 1); 
@@ -1581,9 +1596,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         });
 
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        // Only add to unsupportedTags if not inside a {% ... %} block and not in liquid flow
-        // Tags inside {% %} blocks can contain any dynamic tags and should not be validated
-        if (!ifSupported && !this.liquidFlow() && !isInsideLiquidBlock(content, tagIndex)) {
+        // Only add to unsupportedTags if not inside a {% ... %} block (scenario 3: liquid orgs also get unsupported-tag errors)
+        if (!ifSupported && !isInsideLiquidBlock(content, tagIndex)) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -682,8 +682,9 @@ export function SlideBoxContent(props) {
       {(isEditEmailWithId || isEmailEditWithContent) && (
         (() => {
           const supportCKEditor = commonUtil.hasSupportCKEditor();
-          // When supportCKEditor is true: Always use Email component (legacy flow)
-          if (supportCKEditor || templateData?.is_drag_drop) {
+          // When supportCKEditor is true: Use Email component (legacy flow with CKEditor).
+          // When supportCKEditor is false: Always use EmailWrapper (BEE or HTML editor, never CKEditor).
+          if (supportCKEditor) {
             return (
               <Email
                 key="cretives-container-email-edit"

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -108,6 +108,24 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
+  // Merge tag validation errors (unsupported/missing) into apiValidationErrors so they show in ValidationErrorDisplay
+  const mergedApiValidationErrors = useMemo(() => {
+    const tagMessages = [];
+    if (tagValidationError?.unsupportedTags?.length) {
+      tagMessages.push(`Unsupported tags are: ${tagValidationError.unsupportedTags.join(', ')}`);
+    }
+    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagMandatory()) {
+      tagMessages.push(`Missing tags are: ${tagValidationError.missingTags.join(', ')}`);
+    }
+    if (tagMessages.length === 0) {
+      return apiValidationErrors;
+    }
+    return {
+      liquidErrors: apiValidationErrors?.liquidErrors || [],
+      standardErrors: [...(apiValidationErrors?.standardErrors || []), ...tagMessages],
+    };
+  }, [apiValidationErrors, tagValidationError]);
+
   // Refs for tracking initialization and previous values
   const contentInitializedRef = useRef(false);
   const subjectInitializedRef = useRef(false);
@@ -479,6 +497,7 @@ const EmailHTMLEditor = (props) => {
         location,
         tagModule: getDefaultTags,
         eventContextTags,
+        isFullMode,
       });
 
       if (!validationResult.valid) {
@@ -691,26 +710,27 @@ const EmailHTMLEditor = (props) => {
     // 2. Validate Unsubscribe Tag when feature is OFF (when flag is false we require unsubscribe)
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is true: do NOT validate for unsubscribe (aligned with FormBuilder).
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
-    if (!isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
-      // Check if content contains unsubscribe tag (either {{unsubscribe}} or {{unsubscribe(#...)})
+    // Run for both library and full mode so liquid-enabled orgs also get the error (notification + ValidationErrorDisplay).
+    const isModuleTypeOutbound = (moduleType || '').toUpperCase() === OUTBOUND;
+    if (!isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound) {
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
 
       if (!hasUnsubscribeTag) {
-        // Show error notification
+        setTagValidationError({ valid: false, missingTags: ['unsubscribe'] });
         const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
         const errorMessage = `${missingTagsMsg} unsubscribe`;
-        CapNotification.error({
-          message: 'ERROR ! ! !',
-          description: errorMessage,
-          duration: 5,
-        });
+        setTimeout(() => {
+          CapNotification.error({
+            message: 'ERROR ! ! !',
+            description: errorMessage,
+            duration: 5,
+          });
+        }, 0);
 
-        // Reset parent state so next click is detected as a change
         if (onValidationFail) {
           onValidationFail();
         }
-        // Block save - unsubscribe tag is required when validation is enabled
         return;
       }
     }
@@ -718,7 +738,9 @@ const EmailHTMLEditor = (props) => {
     // 3. Validate Content Tags
     // For NON-liquid orgs: BLOCKING validation (matches CK/BEE behavior)
     // For liquid orgs: Non-blocking (extractTags API will validate)
-    if (tags.length > 0 || !isEmpty(injectedTags)) {
+    // In library mode, always validate when there is content (even if tags list is empty)
+    const shouldValidateTags = (tags.length > 0 || !isEmpty(injectedTags)) || (!isFullMode && !!htmlContent);
+    if (shouldValidateTags) {
       const validationResult = validateTags({
         content: htmlContent,
         tagsParam: tags,
@@ -726,12 +748,12 @@ const EmailHTMLEditor = (props) => {
         location,
         tagModule: getDefaultTags,
         eventContextTags,
+        isFullMode,
       });
 
       const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
-      if (!validationResult?.valid || hasUnsupportedTags) {
+      if (!validationResult?.valid || (hasUnsupportedTags && !isFullMode)) {
         setTagValidationError(validationResult);
-
         // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
         // For liquid orgs, continue (extractTags API will validate)
         if (!isLiquidEnabled) {
@@ -1157,7 +1179,7 @@ const EmailHTMLEditor = (props) => {
             isFullMode={isFullMode}
             onErrorAcknowledged={handleErrorAcknowledged}
             onValidationChange={handleValidationChange}
-            apiValidationErrors={apiValidationErrors}
+            apiValidationErrors={mergedApiValidationErrors}
           />
         </CapColumn>
       </CapRow>

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

@@ -49,10 +49,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(),
@@ -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(),
@@ -421,6 +430,86 @@ describe('EmailHTMLEditor', () => {
     });
     // Reset hasLiquidSupportFeature mock to return true by default
     mockHasLiquidSupportFeature.mockReturnValue(true);
+    capturedApiValidationErrorsRef.current = null;
+  });
+
+  describe('mergedApiValidationErrors (lines 124-125)', () => {
+    beforeEach(() => {
+      global.__captureApiValidationErrorsRef = capturedApiValidationErrorsRef;
+    });
+
+    afterEach(() => {
+      delete global.__captureApiValidationErrorsRef;
+    });
+
+    it('merges tag unsupported errors into standardErrors when tagValidationError has unsupportedTags', async () => {
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['tagA', 'tagB'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+        supportedTags: [],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        expect(capturedApiValidationErrorsRef.current.liquidErrors).toEqual([]);
+        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
+          'Unsupported tags are: tagA, tagB',
+        );
+      });
+    });
+
+    it('merges tag missing errors into standardErrors when tagValidationError has missingTags and unsubscribe not mandatory', async () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+      validateTags.mockReturnValue({
+        valid: false,
+        missingTags: ['unsubscribe'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+        supportedTags: [],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
+          'Missing tags are: unsubscribe',
+        );
+      });
+    });
+
+    it('uses apiValidationErrors.liquidErrors and concatenates apiValidationErrors.standardErrors with tag messages (merge shape)', async () => {
+      // When tag messages exist, mergedApiValidationErrors returns liquidErrors from apiValidationErrors
+      // and standardErrors = [...(apiValidationErrors?.standardErrors || []), ...tagMessages] (lines 124-125)
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['customTag'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        const { liquidErrors, standardErrors } = capturedApiValidationErrorsRef.current;
+        expect(liquidErrors).toEqual([]);
+        expect(standardErrors).toContain('Unsupported tags are: customTag');
+      });
+    });
   });
 
   describe('Default Parameter Values (lines 60-63)', () => {
@@ -1016,36 +1105,6 @@ 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);
       renderWithIntl({

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -206,7 +206,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 +585,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 +592,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 +633,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 +648,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
@@ -790,8 +794,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/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -768,6 +768,130 @@ describe('useEmailWrapper', () => {
       });
     });
 
+    describe('templateId resolution (lines 209-213)', () => {
+      it('should call getTemplateDetails with templateId from params.id', async () => {
+        const templateId = 'from-params-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: { id: templateId },
+          location: { pathname: '/email/edit/other', query: {} },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId from location.query.id when params.id is missing', async () => {
+        const templateId = 'from-query-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/something',
+            query: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId from location.params.id when params and query id are missing', async () => {
+        const templateId = 'from-location-params-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/fallback',
+            query: {},
+            params: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId extracted from pathname /edit/ID when no params or query id', async () => {
+        const templateId = 'extracted-from-pathname';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: `/email/edit/${templateId}`,
+            query: {},
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should not call getTemplateDetails when pathname includes /edit/ but has no id segment', async () => {
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/',
+            query: {},
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
+        }, { timeout: 500 });
+      });
+    });
+
     describe('Edit Flow - BEE Editor Template', () => {
       it('should call getTemplateDetails and set BEE editor for BEE template', async () => {
         const templateId = 'bee-template-123';

package/v2Containers/InApp/index.js

@@ -1155,6 +1155,7 @@ export const InApp = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {
@@ -1182,6 +1183,7 @@ export const InApp = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {

package/v2Containers/InappAdvance/index.js

@@ -878,6 +878,7 @@ export const InappAdvanced = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {
@@ -905,6 +906,7 @@ export const InappAdvanced = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {

package/v2Containers/MobilePush/Create/index.js

@@ -63,6 +63,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         injectedTags: {},
       };
     }
+    this.hasFetchedInitialTagsRef = false;
+    this.lastFetchedTagContextRef = null;
   }
   componentWillMount = () => {
     if (this.props.route.name === 'view') {
@@ -132,16 +134,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
       schema.standalone.sections.splice(1, 1);
       this.injectEvents(schema);
-      const query = {
-        layout: 'mobilepush',
-        type: 'TAG',
-        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-      };
-      if (this.props.getDefaultTags) {
-        query.context = this.props.getDefaultTags;
+      if (!this.hasFetchedInitialTagsRef) {
+        this.hasFetchedInitialTagsRef = true;
+        const context = this.props.getDefaultTags
+          || (this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default');
+        this.lastFetchedTagContextRef = typeof context === 'string' ? context.toLowerCase() : context;
+        const query = {
+          layout: 'mobilepush',
+          type: 'TAG',
+          context: this.lastFetchedTagContextRef,
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+        };
+        this.props.globalActions.fetchSchemaForEntity(query);
       }
-      this.props.globalActions.fetchSchemaForEntity(query);
     }
   };
   componentWillUnmount = () => {
@@ -1771,10 +1776,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
   handleOnTagsContextChange = (data) => {
+    const context = (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase();
+    if (this.lastFetchedTagContextRef === context) {
+      return;
+    }
+    this.lastFetchedTagContextRef = context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
+      context,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
     this.props.globalActions.fetchSchemaForEntity(query);

package/v2Containers/MobilePush/Edit/index.js

@@ -68,6 +68,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.getPrimaryCtaFields = getPrimaryCtaFields.bind(this);
     this.getSecondaryCtaFields = getSecondaryCtaFields.bind(this);
     this.getLinkTypeFields = getLinkTypeFields.bind(this);
+    // Guard: only one initial meta/TAG fetch (getTags can be invoked from multiple code paths)
+    this.hasFetchedInitialTagsRef = false;
+    // Guard: avoid duplicate fetch when multiple TagList instances trigger same context
+    this.lastFetchedTagContextRef = null;
   }
   componentWillMount() {
     this.props.actions.getWeCrmAccounts("mobilepush");
@@ -109,6 +113,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   }
   componentWillReceiveProps(nextProps) {
+    if (nextProps.params?.id !== this.props.params?.id) {
+      this.hasFetchedInitialTagsRef = false;
+      this.lastFetchedTagContextRef = null;
+    }
     if (nextProps.isGetFormData && !this.props.isFullMode) {
       nextProps.getFormLibraryData(this.getFormData());
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
@@ -167,11 +175,13 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema) && _.isEmpty(this.state.formData)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
       this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
-        this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
+        // Use this.props (latest) in callback to avoid race: templateDetails may have arrived by now
+        const latestSelectedAccount = this.getSelectedWeChatAccountFromProps(this.props);
+        this.handleEditSchemaOnPropsChange(this.props, latestSelectedAccount);
         const templateId = get(this, "props.params.id");
-        if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
+        if (this.props.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
           this.props.actions.getTemplateDetails(templateId);
         }
         if (queryType === EMBEDDED && templateId === 'temp' && _.isEmpty(this.state.formData)) { // when his.props.params.id is temp that means mobile push template content will be passed from post message from parent with startTemplateCreation action
@@ -719,6 +729,27 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     parent.postMessage(JSON.stringify(response), '*');
   };
 
+  /**
+   * Compute selectedWeChatAccount from props (used so we can call with latest props
+   * in setState callback to avoid stale closure and intermittent empty form).
+   */
+  getSelectedWeChatAccountFromProps = (props) => {
+    const queryType = String(get(props, 'location.query.type', ''))?.toLowerCase();
+    const creativesMode = String(get(props, 'creativesMode', ''))?.toLowerCase();
+    const { Edit: EditProps, Templates } = props || {};
+    const { selectedWeChatAccount: editSelectedWeChatAccount } = EditProps || {};
+    const { Templates: nextTemplates } = props || {};
+    if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
+      return !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : nextTemplates?.selectedWeChatAccount;
+    }
+    if (!_.isEmpty(Templates?.selectedWeChatAccount)) {
+      return Templates?.selectedWeChatAccount;
+    }
+    return undefined;
+  };
+
   getFormData = (e) => {
     const response = {
       action: "getFormData",
@@ -741,6 +772,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       formData["mobilepush-accounts"] = this.state.formData["mobilepush-accounts"];
       formData['mobilepush-template'] = this.state.formData['mobilepush-template'];
     }
+    if (data.definition?.accountId) {
+      formData['mobilepush-accounts'] = data.definition.accountId;
+    }
     formData['template-name'] = data.name;
     const androidData = data.versions.base.ANDROID;
     const iosData = data.versions.base.IOS;
@@ -968,15 +1002,19 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     });
   };
   getTags = () => {
+    if (this.hasFetchedInitialTagsRef) {
+      return;
+    }
+    this.hasFetchedInitialTagsRef = true;
+    const context = this.props.getDefaultTags
+      || (this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default');
+    this.lastFetchedTagContextRef = typeof context === 'string' ? context.toLowerCase() : context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+      context: this.lastFetchedTagContextRef,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
-    if (this.props.getDefaultTags) {
-      query.context = this.props.getDefaultTags;
-    }
     this.props.globalActions.fetchSchemaForEntity(query);
   }
   setModalContent = (type) => {
@@ -1967,10 +2005,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({ schema });
   };
   handleOnTagsContextChange = (data) => {
+    const context = (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase();
+    if (this.lastFetchedTagContextRef === context) {
+      return;
+    }
+    this.lastFetchedTagContextRef = context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
+      context,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
@@ -1987,8 +2030,23 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleEditSchemaOnPropsChange = (nextProps, selectedWeChatAccount) => {
-    if (!_.isEmpty(nextProps.templateDetails) && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.fullSchema) && selectedWeChatAccount && (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false)) {
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const isEmbeddedLibrary = queryType === EMBEDDED && !nextProps.isFullMode;
+    const canSetAccountFromTemplate =
+      !selectedWeChatAccount &&
+      nextProps.templateDetails?.definition?.accountId &&
+      nextProps.Edit?.weCrmAccounts?.length > 0;
+    const canPopulateForm =
+      !_.isEmpty(nextProps.templateDetails) &&
+      _.isEmpty(this.state.editData) &&
+      !_.isEmpty(this.state.fullSchema) &&
+      (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false) &&
+      (selectedWeChatAccount || isEmbeddedLibrary || canSetAccountFromTemplate);
+    if (canPopulateForm) {
       this.props = nextProps;
+      if (canSetAccountFromTemplate) {
+        this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, nextProps.templateDetails.definition.accountId);
+      }
       const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
       const schema = mode === "text" ? this.state.fullSchema?.textSchema : this.state.fullSchema?.imageSchema;
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
@@ -2023,8 +2081,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              <FormBuilder
-                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
+              {!this.props.isLoadingMetaEntities && <FormBuilder
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2059,7 +2116,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />
+              />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox