@capillarytech/creatives-library 8.0.333 → 8.0.334-alpha.1

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -3998,6 +3998,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
+                  isGetBeeData={this.props?.isGetBeeData}
+                  getBEEData={this.props?.getBEEData}
                 />
               </CapColumn>
             );

package/v2Containers/BeeEditor/index.js

@@ -53,11 +53,14 @@ function BeeEditor(props) {
     BEESelect,
     currentOrgDetails,
     eventContextTags,
+    isGetBeeData,
+    getBEEData,
   } = props;
   const { saveRowRequest } = BEESelect;
   const {formatMessage} = intl;
   const UNSUBSCRIBE = 'unsubscribe';
   let beePluginInstance = null;
+  const isGetBeeDataRef = useRef(isGetBeeData);
   const categoryOptions = [{key: 'cta', value: 'cta', label: formatMessage(messages.cta)},
     {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
     {key: 'header', value: 'header', label: formatMessage(messages.header)},
@@ -111,6 +114,10 @@ function BeeEditor(props) {
     tokenDataRef.current = tokenData;
   }, [tokenData]);
 
+  useEffect(() => {
+    isGetBeeDataRef.current = isGetBeeData;
+  }, [isGetBeeData]);
+
   useEffect(() => {
     // Only initialize if we have both tokenData and beeJson
     const currentTokenData = tokenDataRef.current;
@@ -220,7 +227,11 @@ function BeeEditor(props) {
         },
       },
       onSave: (jsonFile, htmlFile) => {
-        saveBeeData(jsonFile, htmlFile);
+        if (isGetBeeDataRef.current) {
+          getBEEData(jsonFile, htmlFile);
+        } else {
+          saveBeeData(jsonFile, htmlFile);
+        }
       },
       onSaveRow: (rowJSON) => {
         actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
@@ -414,6 +425,7 @@ BeeEditor.propTypes = {
   onContextChange: PropTypes.func,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
+  isGetBeeData: PropTypes.bool,
 };
 
 const mapStateToProps = () => createStructuredSelector({

package/v2Containers/Email/index.js

@@ -91,6 +91,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       saveForm: false,
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Add flag to prevent validation during Test & Preview
+      isGetBeeData: false,
     };
 
     this.isTagLoaded = false;
@@ -509,6 +510,39 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const formData = _.cloneDeep(this.state.formData);
 
         const schema = _.cloneDeep(this.state.schema);
+
+        // Apply BEE/CK visibility synchronously into the schema before setState so that
+        // the committed state already has the correct display values — this prevents the
+        // race condition where hideEdmOptions (setTimeout) could be overwritten by a
+        // concurrent prop-triggered setState that clones the schema before it commits.
+        const isDragDropForHide = nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary();
+        _.forEach(schema.containers, (container) => {
+          if (container.isActive) {
+            _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (col) => {
+              if (col.id === 'insert-image') {
+                col.style.display = isDragDropForHide ? 'none' : '';
+              }
+              if (col.id === 'tab-options-popover') {
+                col.colStyle.display = isDragDropForHide ? 'flex' : 'none';
+                _.forEach(col.content.sections[0].inputFields, (tabPopoverSection) => {
+                  if (tabPopoverSection.cols[0].id === 'switch-editor-label') {
+                    tabPopoverSection.cols[0].style.display = isDragDropForHide ? '' : 'none';
+                  }
+                });
+                if (col.value && col.value.sections) {
+                  _.forEach(col.value.sections[0].inputFields, (valueInputField) => {
+                    _.forEach(valueInputField.cols, (valueCol) => {
+                      if (valueCol.id === 'tab-option-icon') {
+                        valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                      }
+                    });
+                  });
+                }
+              }
+            });
+          }
+        });
+
         const langIndex = formData[this.state.currentTab - 1]?.selectedLanguages?.indexOf(langId);
 
         const temp = (schema.containers || {})[this.state.currentTab - 1];
@@ -1957,7 +1991,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   switchEditor = () => {
-    this.setState({showConfirmationModal: true});
+    this.setState({showConfirmationModal: true, isGetBeeData: true});
   }
 
   renameVersion = () => {
@@ -2791,43 +2825,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // }
   }
   handleOk = () => {
-    const formData = _.cloneDeep(this.state.formData);
-    const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
-    const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
-    
-    // Store current content before switching
-    const currentContent = formData[`${this.state.currentTab - 1}`][activeLangTab]['template-content'];
-    
-    // Update formData to mark as not drag-drop
-    formData[`${this.state.currentTab - 1}`][activeLangTab].is_drag_drop = false;
-    if (formData[`${this.state.currentTab - 1}`].base) {
-      formData.base[activeLangTab].is_drag_drop = false;
+    if (this.beeInstance) {
+      this.beeInstance.save()
     }
-    
-    this.setState({
-      mode: "switchEditor",
-      formData
-    }, () => {
-      // No need to call handleEdmSave as we're switching to CKEditor
-      let schema = _.cloneDeep(this.state.schema);
-      _.forEach(schema.containers, (container, index) => {
-        if (parseInt(index, 10) === (this.state.currentTab - 1)) {
-          const temp = container;
-          const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
-
-          temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-          temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-          temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].colStyle.display = "none";
-        }
-      });
-      schema = this.showInsertImageButton(schema);
-
-      this.setState({ 
-        schema, 
-        showConfirmationModal: false, 
-        isSchemaChanged: true 
-      });
-    });
   }
 
   handleCancel = () => {
@@ -3034,6 +3034,42 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   saveBeeInstance = (instance) => {
     this.beeInstance = instance;
   }
+
+  getBEEData = (json, html) => {
+    this.setState((prevState) => {
+      const formData = _.cloneDeep(prevState.formData);
+      const activeLangTab = formData[`${prevState.currentTab - 1}`].activeTab;
+
+      // Mark as not drag-drop and capture BEE content in one pass
+      formData[`${prevState.currentTab - 1}`][activeLangTab].is_drag_drop = false;
+      formData[`${prevState.currentTab - 1}`][activeLangTab]['template-content'] = html;
+      formData[`${prevState.currentTab - 1}`][activeLangTab]['json-content'] = json;
+      formData.base[activeLangTab].is_drag_drop = false;
+      formData.base[activeLangTab]['template-content'] = html;
+      formData.base[activeLangTab]['json-content'] = json;
+
+      return { mode: "switchEditor", formData };
+    }, () => {
+      const { formData, currentTab } = this.state;
+      const activeLangTab = formData[`${currentTab - 1}`].activeTab;
+      let schema = _.cloneDeep(this.state.schema);
+
+      _.forEach(schema.containers, (container, index) => {
+        if (parseInt(index, 10) === (currentTab - 1)) {
+          const langTab = formData[`${currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+          container.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = { display: "" };
+          container.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = { display: "none" };
+          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].colStyle.display = "none";
+        }
+      });
+
+      schema = this.showInsertImageButton(schema);
+      this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
+        this.injectEvents(schema);
+      });
+    });
+  }
+
   saveBeeData = (json, html) => {
     // Update state with new content
     this.setState((prevState) => {
@@ -3045,7 +3081,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[currentTab - 1][activeTab]['json-content'] = json;
       formData.base[activeTab]['template-content'] = html;
       formData.base[activeTab]['json-content'] = json;
-
       return {
         ...prevState,
         formData,
@@ -3136,6 +3171,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
+                  isGetBeeData={this.state.isGetBeeData}
+                  getBEEData={this.getBEEData}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
               /> : ''}
             </Col>

package/v2Containers/Email/reducer.js

@@ -11,7 +11,7 @@ import * as types from './constants';
 const initialState = fromJS({
   createTemplateInProgress: false,
   createResponse: {},
-  isBeeEnabled: false,
+  isBeeEnabled: null,
 });
 
 function emailReducer(state = initialState, action) {
@@ -150,7 +150,7 @@ function emailReducer(state = initialState, action) {
         .set('fetchingCmsData', false)
         .set('duplicateResponse', fromJS({}))
         .set('cmsData', '')
-        .set('isBeeEnabled', false);
+        .set('isBeeEnabled', null);
     case types.TRANSFORM_EMAIL_TEMPLATE_REQUEST:
       return state.set("createTemplateInProgress", true);
     default:

package/v2Containers/Email/sagas.js

@@ -107,7 +107,10 @@ export function* getCmsSetting({
 }) {
   try {
     const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable);
-
+    const cmsAccountDetail = result.data?.response.cmsDetails || {};
+    const isBeeEnabled = cmsAccountDetail?.type === cmsType;
+        console.log(isBeeEnabled, "isBeeEnabled");
+    yield put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled });
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error });

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -231,6 +231,7 @@ const useEmailWrapper = ({
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
     // 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
+    console.log(Email, "fkjhsgfgdkl");
     const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
 
     if (hasTemplateDetails && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
@@ -251,7 +252,7 @@ const useEmailWrapper = ({
       };
 
       const isDragDrop = getIsDragDrop(editTemplateData);
-
+      console.log(isDragDrop, "isDragDrop");
       // If it's a BEE template, set it in Templates.BEETemplate
       if (isDragDrop) {
         beeTemplateSetRef.current = true;