@capillarytech/creatives-library 8.0.245 → 8.0.246-alpha.0

package/package.json

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

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -9,7 +9,7 @@
   width: 100%;
   background-color: $CAP_COLOR_05; // Light pink background
   border-radius: 0.25rem;
-  padding: 0.5rem 0.75rem;
+  padding: 1rem 1rem;
   box-sizing: border-box;
 
   &__header {

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -102,13 +102,11 @@ function SlideBoxFooter(props) {
   // 2. htmlEditorValidationState exists but has no actual errors (meaning errors are from FormBuilder/BEE editor)
   // IMPORTANT: Only check for BEE editor errors when NOT in HTML Editor mode (upload or html_editor)
   // Upload mode uses HTML Editor, so BEE editor errors don't apply
+  // IMPORTANT: BEE editor doesn't have real-time content updates,
+  // so we should NOT disable buttons based on validation errors
   const isBEEEditorMode = !isHTMLEditorMode;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
 
-  // Also disable buttons if there are BEE editor errors (only when using BEE Editor, not HTML Editor/upload)
-  if (hasBEEEditorErrors) {
-    shouldDisableButtons = true;
-  }
 
   const shouldShowErrorInfoNote = hasBEEEditorErrors;
   return (

package/v2Containers/Email/index.js

@@ -289,8 +289,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
 
-  checkBeeEditorAllowedForLibrary = () => {
-    const { isFullMode = false, editor } = this.props || {};
+  checkBeeEditorAllowedForLibrary = (props = null) => {
+    // Allow passing props for use in componentWillReceiveProps (to use nextProps)
+    const componentProps = props || this.props;
+    const { isFullMode = false, editor, Email } = componentProps || {};
+    // IMPORTANT: For isBEEAppEnable API parameter, use API response if available
+    // This ensures consistent behavior across full mode and library mode
+    // The API response (Email.isBeeEnabled) represents the actual org setting
+    if (Email?.isBeeEnabled !== undefined && Email?.isBeeEnabled !== null) {
+      return Email.isBeeEnabled;
+    }
+    // Fallback to mode-based logic for UI purposes (editor selection, etc.)
+    // But for API calls, this should ideally use the API response
     if ((editor === "BEE" && !isFullMode) || isFullMode) {
       return true;
     }
@@ -395,7 +405,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // This handles the case where BEETemplate is set after componentWillMount
       const wasBEETemplateEmpty = _.isEmpty(this.props.Templates.BEETemplate);
       const isBEETemplateNowSet = !_.isEmpty(nextProps.Templates.BEETemplate);
-      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary(nextProps);
       const isBEESupport = (nextProps.location.query.isBEESupport !== "false") || false;
 
       if (wasBEETemplateEmpty && isBEETemplateNowSet && isBEEAppEnable) {

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -104,17 +104,17 @@ const useEmailWrapper = ({
   // BEE is enabled if isDragDrop is true in the API response
   // This should work for both full mode and library mode
   const checkBeeEditorEnabled = useCallback(() => {
-    // In full mode, BEE is always enabled (similar to Email component's checkBeeEditorAllowedForLibrary)
-    if (isFullMode) {
-      return true;
-    }
-    // If we have checked the API and got a response, use that
+    // IMPORTANT: Always use API response when available, regardless of mode
+    // This ensures consistent behavior across full mode and library mode
+    // The API response represents whether BEE is enabled for the organization
     if (isBeeEditorEnabled !== null) {
       return isBeeEditorEnabled;
     }
     // If we haven't checked yet, return false (disabled) until API responds
+    // Note: In full mode, BEE might still be allowed for UI purposes (editor selection),
+    // but for API calls (isBEEAppEnable), we should use the actual org setting
     return false;
-  }, [isBeeEditorEnabled, isFullMode]);
+  }, [isBeeEditorEnabled]);
 
   // Helper function to convert numeric templateStep to string step
   const getStepFromTemplateStep = useCallback((templateStepValue) => {
@@ -138,7 +138,7 @@ const useEmailWrapper = ({
   // Convert step to string format if it's numeric
   const currentStep = useMemo(() => getStepFromTemplateStep(step), [step, getStepFromTemplateStep]);
 
-  // Effect to check BEE enabled status via new API when entering MODE_SELECTION step
+  // Effect to check BEE enabled status via new API when entering MODE_SELECTION step or edit mode
   useEffect(() => {
     const supportCKEditor = hasSupportCKEditor();
     // Only check BEE enabled status for new flow (when supportCKEditor is false)
@@ -147,10 +147,16 @@ const useEmailWrapper = ({
       beeStatusCheckRef.current = false;
     }
 
+    // Check if we're in edit mode (need to check BEE status for editor selection)
+    const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
+    console.log('***hasParamsId', hasParamsId, location, params);
+    const isEditMode = hasParamsId;
+
     // Only check BEE enabled status for new flow (when supportCKEditor is false)
+    // Call API in MODE_SELECTION step OR in edit mode (if not already called)
     // Check all conditions
     const shouldMakeCall = !supportCKEditor
-      && currentStep === STEPS.MODE_SELECTION
+      && (currentStep === STEPS.MODE_SELECTION || isEditMode)
       && !beeStatusCheckRef.current
       && emailActions;
 
@@ -161,16 +167,16 @@ const useEmailWrapper = ({
       // Make API call to check BEE enabled status using new endpoint
       emailActions.getCmsAccounts('BEE_PLUGIN');
     }
-  }, [currentStep, emailActions]);
+  }, [currentStep, emailActions, params?.id, location?.query?.id, location?.params?.id, location?.pathname]);
 
   // Effect to update isBeeEditorEnabled based on new API response
   // This effect watches for isBeeEnabled from the new API response
   useEffect(() => {
-    // Only process if we're in MODE_SELECTION step (when we're checking BEE status)
+    // Process API response regardless of step (needed for edit mode editor selection)
     // Also check if we've made the API call (beeStatusCheckRef.current === true)
-    if (currentStep === STEPS.MODE_SELECTION && beeStatusCheckRef.current) {
+    if (beeStatusCheckRef.current) {
       // Use isBeeEnabled from the new API response
-      if (Email?.isBeeEnabled !== undefined) {
+      if (Email?.isBeeEnabled !== undefined && Email?.isBeeEnabled !== null) {
         setIsBeeEditorEnabled(Email.isBeeEnabled);
       }
     }
@@ -178,7 +184,7 @@ const useEmailWrapper = ({
     if (Email?.fetchingCmsAccountsError && beeStatusCheckRef.current) {
       setIsBeeEditorEnabled(false);
     }
-  }, [Email?.isBeeEnabled, Email?.fetchingCmsAccountsError, currentStep]);
+  }, [Email?.isBeeEnabled, Email?.fetchingCmsAccountsError]);
 
   // Effect to fetch template details when in edit mode
   // This ensures template data is loaded so editor type can be determined correctly
@@ -255,8 +261,10 @@ const useEmailWrapper = ({
           || editTemplateData._id;
 
         const isBEESupport = (location?.query?.isBEESupport !== "false") || false;
-        // In full mode, BEE is always enabled; otherwise check the API response
-        const isBEEAppEnable = isFullMode || checkBeeEditorEnabled();
+        // 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
+        const isBEEAppEnable = checkBeeEditorEnabled();
         // Check if we're in edit mode - check multiple sources for id
         const hasParamsId = params?.id
           || location?.query?.id
@@ -624,9 +632,17 @@ const useEmailWrapper = ({
           const isDragDrop = getIsDragDrop(editTemplateData);
 
           // Check if BEE is enabled for org (equivalent to checkBeeEditorAllowedForLibrary)
-          // For library mode: BEE is enabled if editor prop is "BEE"
-          // For full mode: BEE is always enabled
-          const isBeeEnabled = isFullMode || (editor === "BEE" && !isFullMode) || checkBeeEditorEnabled();
+          // For editor selection:
+          // - In full mode: BEE is always enabled
+          // - In library mode: Check API response, but if API hasn't responded yet and template is BEE, allow BEE (optimistic)
+          // - Also check if editor prop is explicitly "BEE"
+          const beeEnabledFromAPI = checkBeeEditorEnabled();
+          const isAPIResponsePending = isBeeEditorEnabled === null;
+          console.log('***isAPIResponsePending', isAPIResponsePending, 'isDragDrop', isDragDrop, 'isFullMode', isFullMode, 'editor', editor, 'beeEnabledFromAPI', beeEnabledFromAPI, 'isAPIResponsePending && isDragDrop && !isFullMode', isAPIResponsePending && isDragDrop && !isFullMode);
+          const isBeeEnabled = isFullMode
+            || (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)
@@ -754,6 +770,7 @@ const useEmailWrapper = ({
     selectedCreateMode,
     supportCKEditorFlag,
     checkBeeEditorEnabled,
+    isBeeEditorEnabled, // Include to recalculate when API response arrives
     Email,
     location,
     params,