@capillarytech/creatives-library 8.0.345-alpha.1 → 8.0.345-alpha.11

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -705,8 +705,27 @@ export function SlideBoxContent(props) {
           // and getDetails?type=BEE_PLUGIN would never fire. Routing BEE
           // templates through the direct <Email> path — which is already
           // battle-tested for the CKEditor flow — sidesteps that entirely.
+          const vBase = templateData?.versions?.base;
+          const vBaseActiveTab = vBase?.activeTab || vBase?.selectedLanguages?.[0] || 'en';
           const isBEETemplate = templateData?.base?.is_drag_drop === true
-            || templateData?.base?.is_drag_drop === 1;
+            || templateData?.base?.is_drag_drop === 1
+            || vBase?.[vBaseActiveTab]?.is_drag_drop === true
+            || vBase?.[vBaseActiveTab]?.is_drag_drop === 1;
+          console.log('[SlideBoxContent] BEE routing debug', {
+            supportCKEditor,
+            'templateData._id': templateData?._id,
+            'templateData.type': templateData?.type,
+            'templateData.base': templateData?.base,
+            'templateData.base.is_drag_drop': templateData?.base?.is_drag_drop,
+            'templateData.base.drag_drop_id': templateData?.base?.drag_drop_id,
+            vBase,
+            vBaseActiveTab,
+            'vBase[vBaseActiveTab]': vBase?.[vBaseActiveTab],
+            'vBase[vBaseActiveTab].is_drag_drop': vBase?.[vBaseActiveTab]?.is_drag_drop,
+            'vBase[vBaseActiveTab].drag_drop_id': vBase?.[vBaseActiveTab]?.drag_drop_id,
+            isBEETemplate,
+            routingTo: (supportCKEditor || isBEETemplate) ? 'Email (direct)' : 'EmailWrapper',
+          });
           if (supportCKEditor || isBEETemplate) {
             return (
               <Email

package/v2Containers/CreativesContainer/index.js

@@ -966,10 +966,13 @@ export class Creatives extends React.Component {
       case constants.EMAIL:
         if (template?.value?.base) {
           let emailBase = template.value.base;
-          const { html_content } = emailBase || {};
+          const { html_content, drag_drop_id: formDragDropId } = emailBase || {};
           if (!html_content) {
             emailBase = templateRecords.base;
           }
+          if (!emailBase.drag_drop_id && formDragDropId) {
+            emailBase = { ...emailBase, drag_drop_id: formDragDropId };
+          }
           const newHtmlContent = await updateImagesInHtml(html_content);
           templateData = {
             ...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : '',

package/v2Containers/Email/index.js

@@ -32,7 +32,7 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT, LOYALTY } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
@@ -98,6 +98,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.edmEvent = undefined;
     // When schema is set after CmsSettings (e.g. library create BEE), allow BEE init to run once
     this.schemaJustFilledForBee = false;
+    // Guard: prevent startTemplateCreation being called twice (componentDidMount + componentWillReceiveProps)
+    this.templateCreationStarted = false;
     this.supportedLanguages = this.getSupportedLanguages(props);
     this.map = {
       "template-name": {
@@ -224,6 +226,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
           || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
           || this.props.Templates.BEETemplate?._id;
+          console.log('[Rafeeq manzoor] comes here 1');
         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)) {
         // Extract drag_drop_id - check multiple possible paths
@@ -234,6 +237,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
           || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
           || this.props.Templates.BEETemplate?._id;
+        console.log('[Rafeeq manzoor] comes here 2');
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
@@ -286,8 +290,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         
         if (this.props.params.id) {
           const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
+          console.log('[Rafeeq manzoor] comes here 3');
           this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
         } else {
+          console.log('[Rafeeq manzoor] comes here 4');
           this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
         }
       }
@@ -298,6 +304,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
       this.setState((prev) => ({ loadingStatus: Math.max(prev.loadingStatus, 2) }));
     }
+
+    // For loyalty library mode: componentWillReceiveProps may never fire if Redux state is
+    // already stable after mount (schema cached, BEETemplate already empty). Call
+    // startTemplateCreation directly here so the BEE editor always initialises.
+    if (
+      !this.templateCreationStarted
+      && this.state.isEdit
+      && this.props.moduleType === LOYALTY
+      && this.props.location.query.module === 'library'
+      && !_.isEmpty(this.props.templateData)
+      && !this.props.params.id
+      && !this.props.isGetFormData
+      && _.isEmpty(_.get(this, `state.formData['template-subject']`))
+    ) {
+      this.templateCreationStarted = true;
+      console.log('[componentDidMount] loyalty library - calling startTemplateCreation directly', this.props.templateData);
+      this.startTemplateCreation(this.props.templateData);
+    }
   }
 
 
@@ -331,6 +355,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.getFormData();
       }
     }
+    console.log('[Rafeeq manzoor] nextProps', nextProps, _.isEmpty(this.state.formData));
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
     }
@@ -359,6 +384,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }, 0);
     }
     if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details && !_.isEmpty(nextProps.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
+      console.log('[Rafeeq manzoor] if condition');
       const formData = this.initFormData(nextProps);
       formData['template-version-options'] = [
         {
@@ -452,8 +478,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           // Extract langId from active tab
           const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
           if (hasParamsId) {
+            console.log('[Rafeeq manzoor] comes here 5');
             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)) {
+            console.log('[Rafeeq manzoor] comes here 6');
             this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
           }
         }
@@ -470,7 +498,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
         });
       }
-      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']`))) {
+      console.log('[Rafeeq manzoor] here we have data 1', this.state.isEdit, nextProps.location.query.module);
+      console.log('[Rafeeq manzoor] here we have data 2', nextProps.templateData, !_.isEmpty(nextProps.templateData), this.props.params.id, nextProps.isGetFormData);
+      console.log('[Rafeeq manzoor] here we have data 3', _.isEmpty(_.get(this, `state.formData['template-subject']`)));
+
+      if (!this.templateCreationStarted && this.state.isEdit && nextProps.moduleType === LOYALTY && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
+        this.templateCreationStarted = true;
         this.startTemplateCreation(nextProps.templateData);
       }
       if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData !== nextProps.isGetFormData)) {
@@ -1238,6 +1271,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         //   formData.base.activeTab = language;
         // }
         if (language && editData.versions.base[language].is_drag_drop && isBEEAppEnable) {
+          console.log('[Rafeeq manzoor] comes here 7');
           this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport, isBEEAppEnable);
         }
       });
@@ -1461,6 +1495,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const currentTab = this.state.currentTab - 1;
       const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
       if (formData[currentTab][baseLanguage].is_drag_drop && isBEEAppEnable) {
+        console.log('[Rafeeq manzoor] comes here 8');
         this.props.actions.getCmsSetting(BEE_PLUGIN, formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport, isBEEAppEnable);
       }
     });
@@ -1639,6 +1674,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (content.id) {
         tmpData.id = content.id;
       }
+      if (content.drag_drop_id) {
+        tmpData.drag_drop_id = content.drag_drop_id;
+      }
     }
     newFormData.base = _.cloneDeep(tmpData);
     newFormData.secondary_templates.push({template_data: tmpData});
@@ -2515,6 +2553,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
           if (templates.drag_drop_id && isBEEAppEnable) {
             tempData.drag_drop_id = templates.drag_drop_id;
+            console.log('[Rafeeq manzoor] comes here 9');
             this.props.actions.getCmsSetting(BEE_PLUGIN, tempData._id, 'open', tempData.iso_code, isEdmSupport, isBEEAppEnable);
           }
           // formData.usingTabContainer = true;
@@ -2535,13 +2574,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
         this.addLanguage(false, formData, false, additionalLanguages);
       }
+      console.log("[Rafeeq manzoor] comes here lib 1", formData[0])
       formData.base = _.cloneDeep(formData[0]);
       if (formData?.['template-subject'] !== '') {
+        console.log("[Rafeeq manzoor] comes here lib 1 if", formData)
         this.setState({formData, loading: false, injectedTags: data.tags, tabKey, isDragDrop: (data.base.is_drag_drop !== 0 )}, () => {
           // this.setState({tabKey: ''});
           const isBEEEnable = this.checkBeeEditorAllowedForLibrary();
+          console.log("[Rafeeq manzoor] comes here lib 1 isBEEEnable", isBEEEnable)
           _.forEach(formData[0].selectedLanguages, (language) => {
             if (formData[0][language].is_drag_drop && isBEEEnable) {
+              console.log('[Rafeeq manzoor] comes here 10');
               this.props.actions.getCmsSetting(BEE_PLUGIN, formData[0][language].drag_drop_id, 'open', language, isEdmSupport, isBEEEnable);
             }
           });
@@ -2884,6 +2927,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // let getQuery = '';
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
       const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      console.log('[Rafeeq manzoor] comes here 11');
       this.props.actions.getCmsSetting(BEE_PLUGIN, data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport, isBEEAppEnable);
       // this.props.templatesActions.setEdmTemplate(data);
       this.toggleEdmEmailTemplateSelection();

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -727,7 +727,6 @@ const useEmailWrapper = ({
       route: { name: 'email' },
       params: emailParams,
       isGetFormData,
-      ...(!isFullMode && { templateData }),
       getFormdata,
       getFormSubscriptionData: getFormdata,
       getDefaultTags: type,