@capillarytech/creatives-library 9.0.24 → 9.0.26

package/package.json

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

package/v2Containers/Email/index.js

@@ -194,10 +194,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // const formData = _.cloneDeep(this.state.formData);
     if (this.props.params.id || (this.props.location.query.module === "library" && this.props.templateData && !_.isEmpty(this.props.templateData))) {
       this.setState({isEdit: true}, () => {
-        // Embedded campaign content is authoritative via the inline templateData
-        // prop; fetching by id would pull reusable-template data and drop the
-        // inline BEE json_content. Only fetch for real reusable-template edits.
+        if (this.props.params.id) {
           this.props.actions.getTemplateDetails(this.props.params.id, 'email');
+        }
       });
     }
     // formData[0] = {
@@ -238,6 +237,39 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
+    // The <Email> direct path (SlideBoxContent routes here when
+    // templateData.base.is_drag_drop is true) bypasses EmailWrapper/useEmailWrapper,
+    // so Templates.BEETemplate is never seeded and a created/edited drag-drop would
+    // open as the HTML editor. Seed isDragDrop + the BEE plugin from the inline
+    // templateData so it opens as BEE.
+    if (_.isEmpty(this.props.Templates.BEETemplate) && !_.isEmpty(this.props.templateData)) {
+      const td = this.props.templateData;
+      const activeTab = _.get(td, 'versions.base.activeTab', 'en');
+      // This path bypasses setEditData, so seed the subject from the inline
+      // templateData too (otherwise the title is empty for a created drag-drop).
+      const inlineSubject = _.get(td, 'base.subject')
+        || _.get(td, `versions.base.${activeTab}.subject`)
+        || _.get(td, 'versions.base.subject')
+        || _.get(td, 'emailSubject')
+        || _.get(td, 'subject');
+      if (inlineSubject) {
+        formData['template-subject'] = inlineSubject;
+      }
+      const inlineIsDragDrop = _.get(td, 'base.is_drag_drop')
+        || _.get(td, `versions.base.${activeTab}.is_drag_drop`)
+        || _.get(td, 'versions.base.is_drag_drop')
+        || _.get(td, 'is_drag_drop');
+      if ((inlineIsDragDrop === true || inlineIsDragDrop === 1) && isBEEAppEnable) {
+        this.setState({ isDragDrop: true });
+        const inlineDragDropId = _.get(td, 'base.drag_drop_id')
+          || _.get(td, 'base.id')
+          || _.get(td, `versions.base.${activeTab}.drag_drop_id`)
+          || _.get(td, `versions.base.${activeTab}.id`)
+          || _.get(td, 'drag_drop_id')
+          || _.get(td, 'id');
+        this.props.actions.getCmsSetting(BEE_PLUGIN, inlineDragDropId, this.props.params.id ? 'open' : 'create', undefined, isBEESupport, isBEEAppEnable);
+      }
+    }
     const hasUploadedContent = !this.props.params?.id && this.props.Templates?.selectedEmailLayout && !_.isEmpty(formData);
     this.setState({
       content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
@@ -471,7 +503,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
         });
       }
-      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && (!nextProps.params.id || nextProps.location.query.type === "embedded") && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
+      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']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
       if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData !== nextProps.isGetFormData)) {
@@ -554,10 +586,21 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
           let beeJsonValue = '';
           const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
-          
+
+          // Embedded journey content: the inline templateData carries the user's
+          // edited BEE json (base.json_content), which is more current than the
+          // reusable template fetched via getTemplateDetails. Prefer it so a
+          // re-edit shows the saved edit instead of the original template. For
+          // the create/gallery flow this key is absent, so we fall through to the
+          // existing sources (template details / BEETemplate) unchanged.
+          beeJsonValue = _.get(nextProps, 'templateData.base.json_content', '')
+            || _.get(nextProps, 'templateData.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`, '');
+          if (!beeJsonValue) {
+            beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+          }
           
           // Also check formData.base
           if (!beeJsonValue) {
@@ -615,14 +658,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             'json-content': finalBeeJsonValue,
           };
           
-          // Ensure template-subject is preserved at the top level. For embedded
-          // content templateDetails isn't fetched, so also read the subject from
-          // the inline templateData prop (base.subject / subject / emailSubject).
+          // 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', '')
-              || _.get(nextProps, 'templateData.base.subject', '')
-              || _.get(nextProps, 'templateData.subject', '')
-              || _.get(nextProps, 'templateData.emailSubject', '');
+            const subjectFromEditData = _.get(nextProps, 'Email.templateDetails.versions.base.subject', '');
             if (subjectFromEditData) {
               formData['template-subject'] = subjectFromEditData;
             }
@@ -1145,7 +1183,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const type = this.props.location.query.type;
 
     formData['template-name'] = editData.name;
-    const subject = _.get(editData, 'versions.base.subject', '');
+    // Prefer the inline edited subject (embedded journey content: base.subject /
+    // emailSubject) over the fetched template's subject, so subject edits persist
+    // on re-open. setEditData runs once (guarded by editDataSet), so this is a
+    // one-time load-time override and won't fight typing in the subject field.
+    const inlineSubject = _.get(this.props, 'templateData.base.subject', '')
+      || _.get(this.props, 'templateData.emailSubject', '')
+      || _.get(this.props, 'templateData.subject', '');
+    const subject = inlineSubject || _.get(editData, 'versions.base.subject', '');
     formData['template-subject'] = subject;
     formData.base = editData.versions.base;
 
@@ -2476,11 +2521,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[0].selectedLanguages = [];
       let tabKey;
       if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
-        // Prefer the saved subject from the inline templateData (base.subject);
-        // fall back to any existing value. The previous `=== '' ? '' :` guard kept
-        // an empty subject on open for embedded content (which routes through
-        // startTemplateCreation), dropping data.base.subject.
-        formData['template-subject'] = data?.base?.subject || formData?.['template-subject'] || '';
+        // If formData['template-subject'] is empty, assign an empty string; otherwise, retain its current value or use data.base.subject.
+        formData['template-subject'] = formData?.['template-subject'] === '' ? '' : (data?.base?.subject || '');
         const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
         let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
 

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -234,10 +234,10 @@ const useEmailWrapper = ({
     // New flow: When template details are loaded and it's a BEE template, set it in Templates.BEETemplate
     // This allows Email component to properly initialize and call getCmsSetting
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-    // An inline templateData prop (e.g. library add-creative -> select template)
-    // is authoritative when template details weren't fetched (the by-id fetch is
-    // skipped whenever a templateData prop is present). Without seeding from it,
-    // setBEETemplate never fires for that flow and a BEE template opens as HTML.
+    // Inline templateData (e.g. a freshly-created drag-drop content, or a
+    // library add-creative -> select-template) is authoritative when no template
+    // details were fetched. Without seeding BEETemplate from it, setBEETemplate
+    // never fires for that flow and a BEE template opens as the HTML editor.
     const hasTemplateDataProp = templateData && !isEmpty(templateData);
     // 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
@@ -300,7 +300,7 @@ const useEmailWrapper = ({
       }
     }
 
-    // Reset ref when template changes (template details cleared and no inline prop)
+    // Reset ref when template changes (template details cleared)
     if (!hasTemplateDetails && !hasTemplateDataProp && beeTemplateSetRef.current) {
       beeTemplateSetRef.current = false;
     }