@capillarytech/creatives-library 8.0.343-alpha.0 → 8.0.343-alpha.3

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -698,9 +698,16 @@ export function SlideBoxContent(props) {
       {(isEditEmailWithId || isEmailEditWithContent) && (
         (() => {
           const supportCKEditor = commonUtil.hasSupportCKEditor();
-          // 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) {
+          // BEE templates always use the <Email> component directly (the same
+          // path the SUPPORT_CK_EDITOR=true branch uses). EmailWrapper's
+          // useEmailWrapper strips templateData from props, so library-mode
+          // pencil-edit on a BEE template would never reach startTemplateCreation
+          // and getDetails?type=BEE_PLUGIN would never fire. Routing BEE
+          // templates through the direct <Email> path — which is already
+          // battle-tested for the CKEditor flow — sidesteps that entirely.
+          const isBEETemplate = templateData?.base?.is_drag_drop === true
+            || templateData?.base?.is_drag_drop === 1;
+          if (supportCKEditor || isBEETemplate) {
             return (
               <Email
                 key="cretives-container-email-edit"
@@ -776,8 +783,12 @@ export function SlideBoxContent(props) {
               isTestAndPreviewMode={isTestAndPreviewMode}
               onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
               location={{
-                pathname: `/email/edit/${templateData._id}`,
-                query: { type: 'embedded', module: 'library', id: templateData._id },
+                pathname: `/email/edit/${templateData._id || ''}`,
+                query: {
+                  type: 'embedded',
+                  module: 'library',
+                  ...(templateData._id ? { id: templateData._id } : {}),
+                },
               }}
               params={{ id: templateData._id }}
             />

package/v2Containers/Email/reducer.js

@@ -109,7 +109,8 @@ function emailReducer(state = initialState, action) {
         .set('fetchingCmsData', false)
         .set('fetchingCmsDataFailed', true);
     case types.GET_CMS_ACCOUNTS_REQUEST:
-      return state; // preserve null — "still pending", only update on SUCCESS/FAILURE
+      return state
+        .set('isBeeEnabled', false); // default to false
     case types.GET_CMS_ACCOUNTS_SUCCESS:
       return state
         .set('isBeeEnabled', action.isBeeEnabled);

package/v2Containers/Email/tests/reducer.test.js

@@ -16,15 +16,15 @@ describe('emailReducer', () => {
     expect(emailReducer(undefined, action)).toMatchSnapshot();
   });
 
-  it.concurrent('it handles GET_CMS_ACCOUNTS_REQUEST action (does not change isBeeEnabled)', () => {
+  it.concurrent('it handles GET_CMS_ACCOUNTS_REQUEST action (line 111-113)', () => {
     const initialState = fromJS({
-      isBeeEnabled: true, // preserved during request — "still pending"
+      isBeeEnabled: true, // Start with true to verify it gets set to false
     });
     const action = {
       type: types.GET_CMS_ACCOUNTS_REQUEST,
     };
     const result = emailReducer(initialState, action);
-    expect(result.get('isBeeEnabled')).toBe(true);
+    expect(result.get('isBeeEnabled')).toBe(false);
   });
 
   it.concurrent('it handles GET_CMS_ACCOUNTS_SUCCESS action (line 114-116)', () => {

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -200,9 +200,7 @@ const useEmailWrapper = ({
     if (!isEditEmail) {
       return;
     }
-    const explicitId = params?.id || location?.query?.id || location?.params?.id;
-    const pathnameId = !explicitId && location?.pathname?.match(/\/edit\/([^/]+)/)?.[1];
-    const hasParamsId = explicitId || (pathnameId && pathnameId !== 'undefined');
+    const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
     const hasTemplateDataProp = templateData && !isEmpty(templateData);
     const isTemplateLoading = Email?.getTemplateDetailsInProgress;
@@ -232,18 +230,13 @@ const useEmailWrapper = ({
     // New flow: When template details are loaded and it's a BEE template, set it in Templates.BEETemplate
     // This allows Email component to properly initialize and call getCmsSetting
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-    const hasTemplateProp = templateData && !isEmpty(templateData);
     // Note: We check Email?.BEETemplate as a proxy, but the actual BEETemplate is in Templates reducer
     // The Email component will detect it via this.props.Templates.BEETemplate
     const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
 
-    // Use Email.templateDetails when available (edit-by-ID flow), otherwise fall back to
-    // the templateData prop (BEE free template flow — template passed directly by consumer)
-    const editTemplateSource = hasTemplateDetails ? Email.templateDetails : (hasTemplateProp ? templateData : null);
-
-    if (editTemplateSource && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
+    if (hasTemplateDetails && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
       // Check if it's a BEE template
-      const editTemplateData = editTemplateSource;
+      const editTemplateData = Email.templateDetails;
       const getIsDragDrop = (data) => {
         if (!data) return false;
         const baseDragDrop = get(data, 'versions.base.is_drag_drop', false);
@@ -272,17 +265,13 @@ const useEmailWrapper = ({
           || activeTabData.id
           || get(editTemplateData, 'versions.base.drag_drop_id')
           || get(editTemplateData, 'versions.base.id')
-          || get(editTemplateData, 'base.drag_drop_id')
-          || get(editTemplateData, 'base.id')
           || editTemplateData._id;
 
         const isBEESupport = (location?.query?.isBEESupport !== "false") || false;
         // IMPORTANT: isBEEAppEnable should be consistent across full mode and library mode
         // It represents whether BEE is enabled for the organization, not the mode
         // This ensures the same template behaves the same way in both modes
-        // isDragDrop is always true here — pass true directly rather than relying on
-        // checkBeeEditorEnabled() which may return false while getCmsAccounts is pending
-        const isBEEAppEnable = isDragDrop || checkBeeEditorEnabled();
+        const isBEEAppEnable = checkBeeEditorEnabled();
         // Check if we're in edit mode - check multiple sources for id
         const hasParamsId = params?.id
           || location?.query?.id
@@ -302,11 +291,11 @@ const useEmailWrapper = ({
       }
     }
 
-    // Reset ref when all template sources are gone (prevents duplicate calls on re-render)
-    if (!hasTemplateDetails && !hasTemplateProp && beeTemplateSetRef.current) {
+    // Reset ref when template changes (template details cleared)
+    if (!hasTemplateDetails && beeTemplateSetRef.current) {
       beeTemplateSetRef.current = false;
     }
-  }, [Email?.templateDetails, Email?.BEETemplate, Email?.getTemplateDetailsInProgress, Email?.fetchingCmsSettings, templatesActions, emailActions, params?.id, location?.query, checkBeeEditorEnabled, isFullMode, templateData]);
+  }, [Email?.templateDetails, Email?.BEETemplate, Email?.getTemplateDetailsInProgress, Email?.fetchingCmsSettings, templatesActions, emailActions, params?.id, location?.query, checkBeeEditorEnabled, isFullMode]);
 
   const onChange = useCallback((e) => {
     const { target: { value } } = e;
@@ -719,7 +708,10 @@ const useEmailWrapper = ({
     } else if (location?.pathname?.includes('/edit/')) {
       // Extract id from pathname if it's in the format /edit/:id
       const match = location.pathname.match(/\/edit\/([^/]+)/);
-      if (match) {
+      // Reject sentinel strings that come from unguarded template literals
+      // (e.g. `/edit/${maybeUndefined}` → "/edit/undefined"), so they don't
+      // get treated as real template ids downstream.
+      if (match && match[1] && match[1] !== 'undefined' && match[1] !== 'null') {
         emailParams.id = match[1];
       }
     }