@capillarytech/creatives-library 8.0.334 → 8.0.336

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -59,7 +59,6 @@ const CodeEditorPaneComponent = ({
   injectedTags = {},
   location,
   eventContextTags = [],
-  waitEventContextTags = {},
   selectedOfferDetails = [],
   channel,
   userLocale = 'en',
@@ -290,7 +289,6 @@ const CodeEditorPaneComponent = ({
               location={location}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
-              waitEventContextTags={waitEventContextTags}
               popoverPlacement="rightTop"
             />
           </CapRow>
@@ -329,7 +327,6 @@ CodeEditorPane.propTypes = {
   injectedTags: PropTypes.object,
   location: PropTypes.object,
   eventContextTags: PropTypes.array,
-  waitEventContextTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   channel: PropTypes.string,
   userLocale: PropTypes.string,

package/v2Containers/BeeEditor/index.js

@@ -53,12 +53,14 @@ function BeeEditor(props) {
     BEESelect,
     currentOrgDetails,
     eventContextTags,
-    waitEventContextTags,
+    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)},
@@ -112,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;
@@ -221,7 +227,13 @@ function BeeEditor(props) {
         },
       },
       onSave: (jsonFile, htmlFile) => {
-        saveBeeData(jsonFile, htmlFile);
+        if (isGetBeeDataRef.current && typeof getBEEData === 'function') {
+          getBEEData(jsonFile, htmlFile);
+          return;
+        }
+        if (typeof saveBeeData === 'function') {
+          saveBeeData(jsonFile, htmlFile);
+        }
       },
       onSaveRow: (rowJSON) => {
         actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
@@ -369,7 +381,6 @@ function BeeEditor(props) {
         }}
         onContextChange={onContextChange}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
       />
       <CapModal
         className="custom-row-modal"
@@ -416,7 +427,8 @@ BeeEditor.propTypes = {
   onContextChange: PropTypes.func,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
-  waitEventContextTags: PropTypes.object,
+  isGetBeeData: PropTypes.bool,
+  getBEEData: PropTypes.func,
 };
 
 const mapStateToProps = () => createStructuredSelector({

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -168,7 +168,6 @@ export function SlideBoxContent(props) {
       creativesMode,
       hostName = '',
       eventContextTags,
-      waitEventContextTags = {},
       isLoyaltyModule,
       loyaltyMetaData = {},
       showTestAndPreviewSlidebox,
@@ -425,7 +424,6 @@ export function SlideBoxContent(props) {
     selectedOfferDetails,
     getFormData,
     eventContextTags,
-    waitEventContextTags,
   };
 
   return (
@@ -460,7 +458,6 @@ export function SlideBoxContent(props) {
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
         />
@@ -564,7 +561,6 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
-          waitEventContextTags={waitEventContextTags}
           getLiquidTags={getLiquidTags}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -608,7 +604,6 @@ export function SlideBoxContent(props) {
           }}
           hostName={hostName}
           eventContextTags={eventContextTags}
-          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -649,7 +644,6 @@ export function SlideBoxContent(props) {
         eventContextTags={eventContextTags}
         restrictPersonalization={restrictPersonalization}
         isAnonymousType={isAnonymousType}
-        waitEventContextTags={waitEventContextTags}
       />
         )}
 
@@ -683,7 +677,6 @@ export function SlideBoxContent(props) {
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         isLoyaltyModule={isLoyaltyModule}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
@@ -728,7 +721,6 @@ export function SlideBoxContent(props) {
                 moduleType={moduleType}
                 showLiquidErrorInFooter={showLiquidErrorInFooter}
                 eventContextTags={eventContextTags}
-                waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -768,7 +760,6 @@ export function SlideBoxContent(props) {
               moduleType={moduleType}
               showLiquidErrorInFooter={showLiquidErrorInFooter}
               eventContextTags={eventContextTags}
-              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -812,7 +803,6 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
@@ -845,7 +835,6 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             handleClose={handleClose}
             restrictPersonalization={restrictPersonalization}
@@ -885,7 +874,6 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
@@ -924,7 +912,6 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             onCreateComplete={onCreateComplete}
             creativesMode={creativesMode}
@@ -950,7 +937,6 @@ export function SlideBoxContent(props) {
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -972,7 +958,6 @@ export function SlideBoxContent(props) {
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -996,7 +981,6 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -1017,7 +1001,6 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -1034,7 +1017,6 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
-          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -1059,7 +1041,6 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         createNew/> }
 
@@ -1067,7 +1048,6 @@ export function SlideBoxContent(props) {
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         handleClose={handleClose}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -1085,7 +1065,6 @@ export function SlideBoxContent(props) {
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
@@ -1124,7 +1103,6 @@ export function SlideBoxContent(props) {
       onPreviewContentClicked={onPreviewContentClicked}
       onTestContentClicked={onTestContentClicked}
       eventContextTags={eventContextTags}
-      waitEventContextTags={waitEventContextTags}
       onCreateComplete={onCreateComplete}
       handleClose={handleClose}
       moduleType={moduleType}
@@ -1160,7 +1138,6 @@ export function SlideBoxContent(props) {
           moduleType={moduleType}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           eventContextTags={eventContextTags}
-          waitEventContextTags={waitEventContextTags}
           onCreateComplete={onCreateComplete}
           handleClose={handleClose}
           getDefaultTags={type}
@@ -1184,7 +1161,6 @@ export function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
-        waitEventContextTags={waitEventContextTags}
         params={{
           id: templateData._id,
         }}
@@ -1223,7 +1199,6 @@ export function SlideBoxContent(props) {
           eventContextTags={eventContextTags}
           restrictPersonalization={restrictPersonalization}
           isAnonymousType={isAnonymousType}
-          waitEventContextTags={waitEventContextTags}
         />
       )}
       {isCreateRcs && (<Rcs
@@ -1317,8 +1292,6 @@ SlideBoxContent.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
-  isTestAndPreviewMode: PropTypes.bool,
-  waitEventContextTags: PropTypes.object,
-  eventContextTags: PropTypes.array,
+  isTestAndPreviewMode: PropTypes.bool
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -1949,7 +1949,6 @@ export class Creatives extends React.Component {
       smsRegister,
       enableNewChannels,
       eventContextTags,
-      waitEventContextTags = {},
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
@@ -2117,7 +2116,6 @@ export class Creatives extends React.Component {
               creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
-              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               loyaltyMetaData={loyaltyMetaData}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -2210,7 +2208,6 @@ Creatives.propTypes = {
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
-  waitEventContextTags: PropTypes.object,
   loyaltyTagFetchingDependencies: PropTypes.object,
   customerType: PropTypes.string,
   intl: PropTypes.shape({

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, isGetBeeData: false }, () => {
+        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,
@@ -3134,9 +3169,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   moduleType={moduleType}
                   showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
                   eventContextTags={this.props?.eventContextTags}
-                  waitEventContextTags={this.props?.waitEventContextTags}
                   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,9 @@ 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;
+    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/Email/tests/__snapshots__/reducer.test.js.snap

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