@capillarytech/creatives-library 8.0.330-alpha.0 → 8.0.330-alpha.2

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -170,6 +170,7 @@ export function SlideBoxContent(props) {
       creativesMode,
       hostName = '',
       eventContextTags,
+      waitEventContextTags = {},
       isLoyaltyModule,
       loyaltyMetaData = {},
       showTestAndPreviewSlidebox,
@@ -453,6 +454,7 @@ export function SlideBoxContent(props) {
     selectedOfferDetails,
     getFormData,
     eventContextTags,
+    waitEventContextTags,
   };
 
   return (
@@ -487,6 +489,7 @@ export function SlideBoxContent(props) {
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
         localTemplatesConfig={localTemplatesConfig}
@@ -591,6 +594,7 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           getLiquidTags={getLiquidTags}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -634,6 +638,7 @@ export function SlideBoxContent(props) {
           }}
           hostName={hostName}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -675,6 +680,7 @@ export function SlideBoxContent(props) {
         eventContextTags={eventContextTags}
         restrictPersonalization={restrictPersonalization}
         isAnonymousType={isAnonymousType}
+        waitEventContextTags={waitEventContextTags}
       />
         )}
 
@@ -708,6 +714,7 @@ export function SlideBoxContent(props) {
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         isLoyaltyModule={isLoyaltyModule}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
@@ -752,6 +759,7 @@ export function SlideBoxContent(props) {
                 moduleType={moduleType}
                 showLiquidErrorInFooter={showLiquidErrorInFooter}
                 eventContextTags={eventContextTags}
+                waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -791,6 +799,7 @@ export function SlideBoxContent(props) {
               moduleType={moduleType}
               showLiquidErrorInFooter={showLiquidErrorInFooter}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -834,6 +843,7 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
@@ -866,6 +876,7 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             handleClose={handleClose}
             restrictPersonalization={restrictPersonalization}
@@ -905,6 +916,7 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
@@ -943,6 +955,7 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             onCreateComplete={onCreateComplete}
             creativesMode={creativesMode}
@@ -968,6 +981,7 @@ export function SlideBoxContent(props) {
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -989,6 +1003,7 @@ export function SlideBoxContent(props) {
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -1012,6 +1027,7 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -1032,6 +1048,7 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -1048,6 +1065,7 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -1072,6 +1090,7 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         createNew/> }
 
@@ -1079,6 +1098,7 @@ export function SlideBoxContent(props) {
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         handleClose={handleClose}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -1096,6 +1116,7 @@ export function SlideBoxContent(props) {
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
@@ -1134,6 +1155,7 @@ export function SlideBoxContent(props) {
       onPreviewContentClicked={onPreviewContentClicked}
       onTestContentClicked={onTestContentClicked}
       eventContextTags={eventContextTags}
+      waitEventContextTags={waitEventContextTags}
       onCreateComplete={onCreateComplete}
       handleClose={handleClose}
       moduleType={moduleType}
@@ -1169,6 +1191,7 @@ export function SlideBoxContent(props) {
           moduleType={moduleType}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           onCreateComplete={onCreateComplete}
           handleClose={handleClose}
           getDefaultTags={type}
@@ -1192,6 +1215,7 @@ export function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         params={{
           id: templateData._id,
         }}
@@ -1230,6 +1254,7 @@ export function SlideBoxContent(props) {
           eventContextTags={eventContextTags}
           restrictPersonalization={restrictPersonalization}
           isAnonymousType={isAnonymousType}
+          waitEventContextTags={waitEventContextTags}
         />
       )}
       {isCreateRcs && (<Rcs
@@ -1324,6 +1349,8 @@ SlideBoxContent.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
-  isTestAndPreviewMode: PropTypes.bool
+  isTestAndPreviewMode: PropTypes.bool,
+  waitEventContextTags: PropTypes.object,
+  eventContextTags: PropTypes.array,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -64,6 +64,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
           }
         }
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -162,6 +163,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
           }
         }
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -255,6 +257,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -395,6 +398,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -535,6 +539,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />

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];
@@ -1345,6 +1379,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       saveObj: {},
       showEdmEmailTemplates: false,
       editDataSet: false,
+      isGetBeeData: false,
     }, () => {
 
     });
@@ -1957,7 +1992,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,47 +2826,13 @@ 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 = () => {
-    this.setState({ showConfirmationModal: false });
+    this.setState({ showConfirmationModal: false, editDataSet: false, isGetBeeData: false });
   }
 
   handleCancelModal = () => {
@@ -3034,6 +3035,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 +3082,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,8 +3170,11 @@ 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,
 }
 `;