@capillarytech/creatives-library 8.0.250 → 8.0.252

package/v2Containers/Email/index.js

@@ -62,6 +62,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       isEdit: false,
       schema: {},
       loading: false,
+      isFormValid: true,
       injectedTags: {},
       checkValidation: false,
       saveEdmDataMode: 'save',
@@ -207,13 +208,31 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
     const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
     if (!_.isEmpty(this.props.Templates.BEETemplate)) {
-      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop && isBEEAppEnable ) {
+      const isDragDrop = this.props.Templates.BEETemplate.versions?.base?.is_drag_drop;
+      
+      if (isDragDrop && isBEEAppEnable ) {
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'open', undefined, isBEESupport, isBEEAppEnable);
+        // Extract drag_drop_id - check multiple possible paths
+        const activeTab = this.props.Templates.BEETemplate.versions?.base?.activeTab || 'en';
+        const activeTabData = this.props.Templates.BEETemplate.versions?.base?.[activeTab] || {};
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
+          || this.props.Templates.BEETemplate?._id;
+        this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', undefined, isBEESupport, isBEEAppEnable);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'create', undefined, isBEESupport, isBEEAppEnable);
+        // Extract drag_drop_id - check multiple possible paths
+        const activeTab = this.props.Templates.BEETemplate.versions?.base?.activeTab || 'en';
+        const activeTabData = this.props.Templates.BEETemplate.versions?.base?.[activeTab] || {};
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
+          || this.props.Templates.BEETemplate?._id;
+        this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
     this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
@@ -236,11 +255,52 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.location.query.type === 'embedded') {
       this.showNext();
     }
+    
+    // Check if BEETemplate was set after componentWillMount but before componentDidMount
+    // This can happen if BEETemplate is set asynchronously
+    if (!_.isEmpty(this.props.Templates.BEETemplate) && !this.state.isDragDrop) {
+      const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      const beeTemplate = this.props.Templates.BEETemplate;
+      const activeTab = beeTemplate.versions?.base?.activeTab || 'en';
+      const activeTabData = beeTemplate.versions?.base?.[activeTab] || {};
+      const isDragDrop = activeTabData.is_drag_drop 
+        || beeTemplate.versions?.base?.is_drag_drop
+        || beeTemplate.base?.is_drag_drop
+        || beeTemplate.is_drag_drop;
+      
+      if (isDragDrop && isBEEAppEnable) {
+        this.setState({isDragDrop: true});
+        
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(beeTemplate, 'versions.base.drag_drop_id')
+          || _.get(beeTemplate, 'versions.base.id')
+          || beeTemplate._id;
+        
+        if (this.props.params.id) {
+          const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
+          this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
+        } else {
+          this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
+        }
+      }
+    }
   }
 
 
-  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;
     }
@@ -341,9 +401,61 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       //   this.props.globalActions.fetchSchemaForEntity(query);
       // }
 
+      // Check if BEETemplate was just set (for new flow when template details load)
+      // 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(nextProps);
+      const isBEESupport = (nextProps.location.query.isBEESupport !== "false") || false;
+
+      if (wasBEETemplateEmpty && isBEETemplateNowSet && isBEEAppEnable) {
+        const beeTemplate = nextProps.Templates.BEETemplate;
+        const isDragDrop = beeTemplate.versions?.base?.is_drag_drop 
+          || beeTemplate.versions?.base?.[beeTemplate.versions?.base?.activeTab || 'en']?.is_drag_drop
+          || beeTemplate.base?.is_drag_drop
+          || beeTemplate.is_drag_drop;
+
+        // Check if we're in edit mode - check multiple sources for id
+        const hasParamsId = nextProps.params?.id 
+          || nextProps.location?.query?.id 
+          || nextProps.location?.params?.id
+          || (nextProps.location?.pathname && nextProps.location.pathname.includes('/edit/'));
+
+        if (isDragDrop) {
+          this.setState({isDragDrop: true});
+          
+          // Extract drag_drop_id - check multiple possible paths
+          // Priority: versions.base[activeTab].drag_drop_id > versions.base[activeTab].id > versions.base.drag_drop_id > _id
+          const activeTab = beeTemplate.versions?.base?.activeTab || 'en';
+          const activeTabData = beeTemplate.versions?.base?.[activeTab] || {};
+          let dragDropId = activeTabData.drag_drop_id 
+            || activeTabData.id 
+            || beeTemplate.versions?.base?.drag_drop_id
+            || beeTemplate.versions?.base?.id
+            || beeTemplate.base?.drag_drop_id
+            || beeTemplate.base?.id
+            || beeTemplate._id;
+          
+          // Call getCmsSetting for BEE template - use 'open' mode if in edit mode
+          // Extract langId from active tab
+          const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
+          if (hasParamsId) {
+            this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
+          } else if (nextProps.location.query.module !== "library" || (nextProps.location.query.module === "library" && !nextProps.templateData)) {
+            this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
+          }
+        }
+      }
+
       if (this.state.isEdit && !this.state.editDataSet && !_.isEmpty(nextProps.Email.templateDetails) && !_.isEmpty(this.state.schema)) {
         this.setState({editDataSet: true}, () => {
           this.setEditData(nextProps.Email.templateDetails);
+          // Update template name in parent if available
+          if (this.props.isFullMode && this.props.showTemplateName && nextProps.Email.templateDetails.name) {
+            const formData = this.state.formData;
+            formData['template-name'] = nextProps.Email.templateDetails.name;
+            this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+          }
         });
       }
       if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
@@ -382,7 +494,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const formData = _.cloneDeep(this.state.formData);
 
         const schema = _.cloneDeep(this.state.schema);
-        const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+        const langIndex = formData[this.state.currentTab - 1]?.selectedLanguages?.indexOf(langId);
 
         const temp = (schema.containers || {})[this.state.currentTab - 1];
 
@@ -390,32 +502,91 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary()) {
           const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
           const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
-          let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
+          let beeJsonValue = '';
           const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
-          if (this.state.isEdit) {
-            if (this.props.location.query.module === "library") {
-              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
-            } else {
-              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+          
+          // Get beeJsonValue from template data - check multiple sources
+          // First check if it's already in formData (from setEditData)
+          beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+          
+          // Also check formData.base
+          if (!beeJsonValue) {
+            beeJsonValue = _.get(this.state, `formData.base[${langId}].json-content`, '');
+          }
+          
+          // Always check templateDetails and BEETemplate regardless of mode
+          if (!beeJsonValue) {
+            // Check Email.templateDetails first
+            const templateDetails = nextProps.Email.templateDetails;
+            if (templateDetails && templateDetails.versions && templateDetails.versions.base) {
+              const baseVersion = templateDetails.versions.base;
+              // Try language-specific path first (e.g., base.en.json-content)
+              if (baseVersion[langId] && baseVersion[langId]['json-content']) {
+                beeJsonValue = baseVersion[langId]['json-content'];
+              } else if (baseVersion['json-content']) {
+                // Fallback to base-level json-content
+                beeJsonValue = baseVersion['json-content'];
+              }
+            }
+            
+            // If still not found, check BEETemplate
+            if (!beeJsonValue) {
+              const beeTemplate = nextProps.Templates.BEETemplate;
+              if (beeTemplate && beeTemplate.versions && beeTemplate.versions.base) {
+                const beeBase = beeTemplate.versions.base;
+                if (beeBase[langId] && beeBase[langId]['json-content']) {
+                  beeJsonValue = beeBase[langId]['json-content'];
+                } else if (beeBase['json-content']) {
+                  beeJsonValue = beeBase['json-content'];
+                }
+              }
+            }
+          }
+          // Ensure we have a valid beeJsonValue - if it's a string, try to parse it to verify it's valid JSON
+          let finalBeeJsonValue = beeJsonValue;
+          if (beeJsonValue && typeof beeJsonValue === 'string') {
+            try {
+              // Try to parse to verify it's valid JSON
+              JSON.parse(beeJsonValue);
+            } catch (e) {
+              console.warn('[Email] componentWillReceiveProps - beeJsonValue is not valid JSON, using as-is:', e);
             }
           }
+          
+          // Preserve existing formData values, especially template-subject
+          const existingFormData = formData[`${currentTab - 1}`][langId] || {};
           formData[`${currentTab - 1}`][langId] = {
-            ...formData[`${currentTab - 1}`][langId],
+            ...existingFormData,
             is_drag_drop: true,
-            [beeJson]: beeJsonValue,
+            [beeJson]: finalBeeJsonValue,
             [beeToken]: nextProps.Email.CmsSettings.tokenData,
             id: selectedId,
+            // Also store json-content for reference
+            'json-content': finalBeeJsonValue,
           };
-          _.forEach(temp.panes, (pane, index) => {
-            const tempPane = pane;
-            //
-            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
-              //
-              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
-              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+          
+          // Ensure template-subject is preserved at the top level
+          if (formData['template-subject'] === undefined || formData['template-subject'] === '') {
+            const subjectFromEditData = _.get(nextProps, 'Email.templateDetails.versions.base.subject', '');
+            if (subjectFromEditData) {
+              formData['template-subject'] = subjectFromEditData;
             }
-          });
-          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+          }
+          
+          if (langIndex !== undefined && langIndex !== -1 && temp && temp.panes) {
+            _.forEach(temp.panes, (pane, index) => {
+              const tempPane = pane;
+              //
+              if (parseInt(index, 10) === parseInt(langIndex, 10)) {
+                //
+                if (tempPane.sections && tempPane.sections[0] && tempPane.sections[0].inputFields && tempPane.sections[0].inputFields[0] && tempPane.sections[0].inputFields[0].cols) {
+                  tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
+                  tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+                }
+              }
+            });
+          }
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1, formData});
         } else {
           _.forEach(temp.panes, (pane, index) => {
             const tempPane = pane;
@@ -712,8 +883,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const msgString = JSON.stringify(msg);
       const langId = formData[this.state.currentTab - 1].activeTab;
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage(msgString, '*');
+      const elementToSelect = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+      if (elementToSelect) {
+        try {
+          const win = elementToSelect.contentWindow;
+          if (win) {
+            win.postMessage(msgString, '*');
+          }
+        } catch (error) {
+          // Handle cross-origin frame access errors
+          console.warn('Failed to access iframe contentWindow (cross-origin restriction):', error);
+        }
+      }
     } else if (data === "unsubscribe" && this.state.editorInstanse) {
       const anchor = `<a href='{{${data}}}'>${data}</a>`;
       this.state.editorInstanse.insertHtml(`${anchor}`);
@@ -888,12 +1069,19 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     return '';
   }
 
-  setFormValidity = () => {}
+  setFormValidity = (isFormValid) => {
+    this.setState({isFormValid});
+  }
 
   setEditData(editData) {
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
     const formData = _.cloneDeep(this.state.formData);
 
+    // Set template name from editData if available
+    if (editData.name) {
+      formData['template-name'] = editData.name;
+    }
+
     const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
     const containers = _.cloneDeep(schema.containers.slice());
     let tabKey = "";
@@ -902,7 +1090,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const type = this.props.location.query.type;
 
     formData['template-name'] = editData.name;
-    formData['template-subject'] = _.get(editData, 'versions.base.subject');
+    const subject = _.get(editData, 'versions.base.subject', '');
+    formData['template-subject'] = subject;
     formData.base = editData.versions.base;
 
     _.forEach(editData.versions.history, (data1, index) => {
@@ -983,8 +1172,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
 
     this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
-      if (this.props.isFullMode) {
-        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode && this.props.showTemplateName) {
+        // Ensure template name is set before showing it
+        const updatedFormData = _.cloneDeep(formData);
+        if (editData.name && !updatedFormData['template-name']) {
+          updatedFormData['template-name'] = editData.name;
+        }
+        this.props.showTemplateName({formData: updatedFormData, onFormDataChange: this.onFormDataChange});
       }
       const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
@@ -1115,6 +1309,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       isEdit: false,
       schema: {},
       loading: false,
+      isFormValid: true,
       injectedTags: {},
       checkValidation: false,
       tabKey: '',
@@ -2456,14 +2651,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   saveFormData = (passedData) => {
+    //saveFormData gets called only when validation result is true
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
         action: "getFormData",
         postAction: this.state.getFormDataValue || 'next',
         id: _.get(this.props, 'Email.templateDetails._id', ''),
         value: this.transformFormData(passedData),
-        //saveFormData gets called only when validation result is true
-        validity: true,
+        validity: this.state.isFormValid,
         type: 'EMAIL',
       };
 
@@ -2659,6 +2854,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       getTemplateDetailsInProgress,
       assetUploading,
       createTemplateInProgress,
+      fetchingCmsSettings,
     } = this.props.Email;
     let isLoading =
       isLoadingMetaEntities ||
@@ -2667,7 +2863,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       ) || (
         assetUploading !== undefined && assetUploading
       ) || (
-        Email && (fetchingCmsData || getTemplateDetailsInProgress)
+        Email && (fetchingCmsData || getTemplateDetailsInProgress || fetchingCmsSettings)
       );
 
     if (!isLoading) {
@@ -2989,6 +3185,19 @@ function mapDispatchToProps(dispatch) {
 const withReducer = injectReducer({ key: 'email', reducer: v2EmailReducer });
 const withEmailSaga = injectSaga({ key: 'email', saga: v2EmailSagas });
 
+// Base Email component without saga registration (for use from EmailWrapper)
+// EmailWrapper already registers the saga, so we don't need to register it here
+export const EmailWithoutSaga = withCreatives({
+  WrappedComponent: Email,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+  sagas: [], // No saga - EmailWrapper registers it
+  reducers: [withReducer],
+});
+
+// Email component with saga registration (for direct use from SlideBoxContent in Edit mode)
+// When Email is used directly (not as child of EmailWrapper), it needs to register the saga
 export default withCreatives({
   WrappedComponent: Email,
   mapStateToProps,

package/v2Containers/Email/messages.js

@@ -302,4 +302,36 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.base64ImageError',
     defaultMessage: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
   },
+  "editorTypeTitle": {
+    id: 'creatives.containersV2.Email.editorTypeTitle',
+    defaultMessage: 'Editor type',
+  },
+  "htmlEditorTitle": {
+    id: 'creatives.containersV2.Email.htmlEditorTitle',
+    defaultMessage: 'HTML editor',
+  },
+  "htmlEditorDescription": {
+    id: 'creatives.containersV2.Email.htmlEditorDescription',
+    defaultMessage: 'Use a basic HTML editor to write and format your content. Suitable if you are familiar with HTML.',
+  },
+  "dragDropEditorTitle": {
+    id: 'creatives.containersV2.Email.dragDropEditorTitle',
+    defaultMessage: 'Drag & drop editor',
+  },
+  "dragDropEditorDescription": {
+    id: 'creatives.containersV2.Email.dragDropEditorDescription',
+    defaultMessage: 'Create your content visually by dragging blocks — no coding needed. Great for quick, easy designs.',
+  },
+  "uploadZipTitle": {
+    id: 'creatives.containersV2.Email.uploadZipTitle',
+    defaultMessage: 'Upload zip file',
+  },
+  "uploadZipDescription": {
+    id: 'creatives.containersV2.Email.uploadZipDescription',
+    defaultMessage: 'Upload a ZIP containing your custom HTML, images, and assets. Ideal if your content is already built.',
+  },
+  "nextButton": {
+    id: 'creatives.containersV2.Email.nextButton',
+    defaultMessage: 'Next',
+  },
 });

package/v2Containers/Email/reducer.js

@@ -11,6 +11,7 @@ import * as types from './constants';
 const initialState = fromJS({
   createTemplateInProgress: false,
   createResponse: {},
+  isBeeEnabled: false,
 });
 
 function emailReducer(state = initialState, action) {
@@ -107,6 +108,15 @@ function emailReducer(state = initialState, action) {
       return state
         .set('fetchingCmsData', false)
         .set('fetchingCmsDataFailed', true);
+    case types.GET_CMS_ACCOUNTS_REQUEST:
+      return state
+        .set('isBeeEnabled', false); // default to false
+    case types.GET_CMS_ACCOUNTS_SUCCESS:
+      return state
+        .set('isBeeEnabled', action.isBeeEnabled);
+    case types.GET_CMS_ACCOUNTS_FAILURE:
+      return state
+        .set('isBeeEnabled', false);
     case types.CLEAR_EMAIL_CRUD_RESPONSE_REQUEST:
       return state
         .set('createResponse', fromJS({}));
@@ -139,7 +149,8 @@ function emailReducer(state = initialState, action) {
         .set('CmsSettings', fromJS({}))
         .set('fetchingCmsData', false)
         .set('duplicateResponse', fromJS({}))
-        .set('cmsData', '');
+        .set('cmsData', '')
+        .set('isBeeEnabled', false);
     case types.TRANSFORM_EMAIL_TEMPLATE_REQUEST:
       return state.set("createTemplateInProgress", true);
     default:

package/v2Containers/Email/sagas.js

@@ -1,6 +1,7 @@
 import {
   call, put, takeLatest, takeEvery, all,
 } from 'redux-saga/effects';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import * as Api from '../../services/api';
 import * as types from './constants';
 import { transformEmailTemplates, storeS3FileSizeDetails } from '../../utils/cdnTransformation';
@@ -9,15 +10,47 @@ export function* createTemplate(template) {
   let errorMsg;
   try {
     const result = yield call(Api.createEmailTemplate, template);
-    if (!result.success || result.status.code === 500) {
-      errorMsg = result.message;
+    // Check if the API call failed (non-2xx status codes or explicit failure)
+    const statusCode = result.status?.code || result.status;
+    const isError = !result.success || statusCode >= 400;
+
+    if (isError) {
+      // Extract error message from various possible locations in the response
+      errorMsg = result.message
+                 || result.errorMessage
+                 || result.error?.message
+                 || (result.response && result.response.message)
+                 || (result.status && result.status.message)
+                 || (result.data && result.data.message)
+                 || `API Error: ${statusCode || 'Unknown error'}`;
+      // Show error notification directly from saga
+      CapNotification.error({
+        key: 'createTemplateError',
+        message: errorMsg,
+      });
       yield put({ type: types.CREATE_TEMPLATE_FAILURE, errorMsg });
+      // Call callback with error so component can handle it (if needed)
+      if (template.onCreateTemplateComplete) {
+        try {
+          // Call the callback directly (it's a regular function, not a generator)
+          template.onCreateTemplateComplete({ error: true, message: errorMsg, statusCode });
+        } catch (callbackError) {
+          console.error('[Email Saga] Error executing callback:', callbackError);
+        }
+      }
     } else {
-      yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+      yield put({
+        type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg,
+      });
       yield template.onCreateTemplateComplete(result.response);
     }
   } catch (error) {
+    errorMsg = error.message || error.toString() || 'An unexpected error occurred';
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
+    // Call callback with error so component can handle it
+    if (template.onCreateTemplateComplete) {
+      yield template.onCreateTemplateComplete({ error: true, message: errorMsg });
+    }
   }
 }
 
@@ -26,14 +59,14 @@ export function* transformEmailTemplate({template, callback}) {
     const result = yield call(transformEmailTemplates, template);
     yield callback(result);
   } catch (error) {
-    yield callback(template);    
+    yield callback(template);
   }
 }
 
 export function* duplicateTemplate(payload) {
   let errorMsg;
   let result;
-  let { id, channel, callback } = payload;
+  const { id, channel, callback } = payload;
   try {
     result = yield call(Api.duplicateTemplate, {id, channel} );
     if (result.status.code === 500) {
@@ -42,7 +75,9 @@ export function* duplicateTemplate(payload) {
     if (callback) {
       callback(result?.response);
     }
-    yield put({ type: types.DUPLICATE_TEMPLATE_SUCCESS, data: result?.response, statusCode: result?.status?.code, errorMsg });
+    yield put({
+      type: types.DUPLICATE_TEMPLATE_SUCCESS, data: result?.response, statusCode: result?.status?.code, errorMsg,
+    });
   } catch (error) {
     yield put({ type: types.DUPLICATE_TEMPLATE_FAILURE, error, errorMsg });
   }
@@ -67,7 +102,9 @@ export function* getAllAssets(assetType, queryParams) {
   }
 }
 
-export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable}) {
+export function* getCmsSetting({
+  cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable,
+}) {
   try {
     const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable);
 
@@ -87,6 +124,17 @@ export function* getCmsData({cmsType, projectId, langId}) {
   }
 }
 
+export function* getCmsAccounts({cmsType}) {
+  try {
+    const result = yield call(Api.getCmsAccounts, cmsType);
+    const { cmsAccounts } = result.data?.response || {};
+    const isBeeEnabled = cmsAccounts?.type === cmsType;
+    yield put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled });
+  } catch (error) {
+    yield put({ type: types.GET_CMS_ACCOUNTS_FAILURE, error });
+  }
+}
+
 export function* uploadAsset(file, assetType, fileParams) {
   try {
     const result = yield call(Api.uploadFile, file, assetType, fileParams);
@@ -123,6 +171,10 @@ function* watchGetCmsData() {
   yield takeEvery(types.GET_CMS_EDITOR_DATA_REQUEST, getCmsData);
 }
 
+function* watchGetCmsAccounts() {
+  yield takeEvery(types.GET_CMS_ACCOUNTS_REQUEST, getCmsAccounts);
+}
+
 function* watchUploadAsset() {
   yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
 }
@@ -139,6 +191,7 @@ export default [
   watchGetAllAssets,
   watchGetCmsSetting,
   watchGetCmsData,
+  watchGetCmsAccounts,
   watchUploadAsset,
   watchDuplicateTemplate,
 ];
@@ -151,6 +204,7 @@ export function* v2EmailSagas() {
     watchGetAllAssets(),
     watchGetCmsSetting(),
     watchGetCmsData(),
+    watchGetCmsAccounts(),
     watchUploadAsset(),
   ]);
 }

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

@@ -4,6 +4,7 @@ exports[` 1`] = `
 Immutable.Map {
   "createTemplateInProgress": false,
   "createResponse": Immutable.Map {},
+  "isBeeEnabled": false,
 }
 `;
 
@@ -11,5 +12,6 @@ exports[` 2`] = `
 Immutable.Map {
   "createTemplateInProgress": true,
   "createResponse": Immutable.Map {},
+  "isBeeEnabled": false,
 }
 `;