@capillarytech/creatives-library 9.0.61-alpha.3 → 9.0.62

package/v2Containers/Email/index.js

@@ -21,6 +21,7 @@ import * as templatesActions from '../Templates/actions';
 import {makeSelectEmail} from './selectors';
 import { makeSelectTemplates } from '../Templates/selectors';
 import messages from './messages';
+import { sanitizeFileName, exportEmailTemplateHtml, getExportHtmlDisabledTooltip } from '../../utils/downloadFile';
 import * as globalActions from '../Cap/actions';
 // import PageHeader from '../../v2Components/PageHeader';
 import './_email.scss';
@@ -37,7 +38,7 @@ import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
 import {storeS3FileSizeDetails, CREATIVES_S3_ASSET_FILESIZES} from '../../utils/cdnTransformation';
-import { CUSTOMER_BARCODE_TAG } from '../../constants/unified';
+import { CUSTOMER_BARCODE_TAG, EXPORT_HTML_LABEL_ID, DEFAULT_LOCALE, DISPLAY_NONE } from '../../constants/unified';
 
 import { containsBase64Images } from '../../utils/content';
 import injectReducer from '../../utils/injectReducer';
@@ -49,6 +50,10 @@ import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    // Baseline content (set in componentWillReceiveProps) to detect a real edit vs. a resync and permanently lock Export HTML.
+    this.originalContentCaptured = false;
+    this.originalBaseTemplateContent = undefined;
+
     this.state = {
       loadingStatus: 0,
       formData: {},
@@ -85,6 +90,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       saveObj: {},
       showEdmEmailTemplates: false,
       editDataSet: false,
+      exportHtmlContentLocked: false,
       languageDataSet: false,
       addLanguageType: '',
       startValidation: false,
@@ -157,6 +163,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       "switch-editor-label": {
         switchEditor: this.switchEditor,
       },
+      [EXPORT_HTML_LABEL_ID]: {
+        exportHtml: this.exportHtml,
+      },
       "pane": {
         onTabChange: this.onTabChange,
       },
@@ -459,6 +468,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
 
+      if (this.state.isEdit && !this.originalContentCaptured && !_.isEmpty(nextProps.Email.templateDetails)) {
+        this.originalContentCaptured = true;
+        const baseLanguageForCapture = nextProps.currentOrgDetails?.basic_details?.base_language || DEFAULT_LOCALE;
+        const baseVersionForCapture = nextProps.Email.templateDetails.versions?.base?.[baseLanguageForCapture] || {};
+        this.originalBaseTemplateContent = baseVersionForCapture['template-content'];
+      }
+
       if (this.state.isEdit && !this.state.editDataSet && !_.isEmpty(nextProps.Email.templateDetails) && !_.isEmpty(this.state.schema)) {
         this.setState({editDataSet: true}, () => {
           this.setEditData(nextProps.Email.templateDetails);
@@ -523,17 +539,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                 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';
+                    tabPopoverSection.cols[0].style.display = (isDragDropForHide && hasSupportCKEditor()) ? '' : DISPLAY_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' };
+                        valueCol.colStyle = { ...valueCol.colStyle, display: 'flex' };
                       }
                     });
                   });
@@ -846,6 +861,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           showTemplateName({formData, onFormDataChange: this.onFormDataChange});
         }
       });
+
+      const baseLanguage = this.props.currentOrgDetails?.basic_details?.base_language || DEFAULT_LOCALE;
+      if (!this.state.exportHtmlContentLocked && activeTab === baseLanguage && newContent !== this.originalBaseTemplateContent) {
+        this.lockExportHtml();
+      }
     }
   }
 
@@ -1753,7 +1773,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
             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";
+            // One-way Bee -> CKEditor switch: hide permanently once switched (see getBEEData).
+            _.forEach(temp.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols, (col) => {
+              if (col.id === 'tab-options-popover') {
+                this.hideSwitchEditorLabel(col);
+              }
+            });
           }
         });
         schema = this.showInsertImageButton(schema);
@@ -1799,20 +1824,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             newContainerInputFieldCol.style.display = isDragDrop ? "none" : '';
           }
           if (containerInputFieldCol.id === 'tab-options-popover') {
-            // eslint-disable-next-line no-param-reassign
-            containerInputFieldCol.colStyle.display = isDragDrop ? "flex" : "none";
             _.forEach(containerInputFieldCol.content.sections[0].inputFields, (tabPopoverSection) => {
               if (tabPopoverSection.cols[0].id === 'switch-editor-label') {
                 const newTabPopoverSection = tabPopoverSection;
-                newTabPopoverSection.cols[0].style.display = isDragDrop ? "" : "none";
+                newTabPopoverSection.cols[0].style.display = (isDragDrop && hasSupportCKEditor()) ? "" : DISPLAY_NONE;
               }
             });
-            // Hide tab-option-icon (switch editor trigger) when SUPPORT_CK_EDITOR is disabled
+            // tab-option-icon (popover trigger) is always visible regardless of editor type
             if (containerInputFieldCol.value && containerInputFieldCol.value.sections) {
               _.forEach(containerInputFieldCol.value.sections[0].inputFields, (valueInputField) => {
                 _.forEach(valueInputField.cols, (valueCol) => {
                   if (valueCol.id === 'tab-option-icon') {
-                    valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                    valueCol.colStyle = { ...valueCol.colStyle, display: 'flex' };
                   }
                 });
               });
@@ -1826,8 +1849,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   /**
-   * Hides the tab-option-icon (switch editor trigger) in schema when SUPPORT_CK_EDITOR is disabled,
-   * so users cannot switch editor if the feature is not enabled.
+   * Ensures the tab-option-icon (popover trigger) is visible in schema, regardless of editor type.
    */
   applyTabOptionIconVisibility = (schema) => {
     if (!schema || !schema.containers) return;
@@ -1838,7 +1860,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           _.forEach(col.value.sections[0].inputFields, (inputField) => {
             _.forEach(inputField.cols, (c) => {
               if (c.id === 'tab-option-icon') {
-                c.colStyle = { ...(c.colStyle || {}), display: hasSupportCKEditor() ? 'flex' : 'none' };
+                c.colStyle = { ...(c.colStyle || {}), display: 'flex' };
               }
             });
           });
@@ -1995,6 +2017,67 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({showConfirmationModal: true, isGetBeeData: true});
   }
 
+  // Finds a tab-options-popover menu item (e.g. switch-editor-label, EXPORT_HTML_LABEL_ID) by id.
+  findTabPopoverLabelCol = (tabOptionsPopoverCol, targetId) => (
+    _.find(tabOptionsPopoverCol?.content?.sections?.[0]?.inputFields, (field) => field.cols[0].id === targetId)?.cols[0]
+  )
+
+  // One-way Bee -> CKEditor switch: hide the switch-editor-label permanently within a tab-options-popover col.
+  hideSwitchEditorLabel = (tabOptionsPopoverCol) => {
+    const switchEditorCol = this.findTabPopoverLabelCol(tabOptionsPopoverCol, 'switch-editor-label');
+    if (switchEditorCol) {
+      switchEditorCol.style.display = DISPLAY_NONE;
+    }
+  }
+
+  setExportHtmlLabelStyle = (tabOptionsPopoverCol, styleOverrides) => {
+    const exportCol = this.findTabPopoverLabelCol(tabOptionsPopoverCol, EXPORT_HTML_LABEL_ID);
+    if (exportCol) {
+      exportCol.style = { ...exportCol.style, ...styleOverrides };
+    }
+  }
+
+  // Targeted schema mutation to permanently disable Export HTML, skipping injectEvents() to avoid its unrelated schema-rebuild work.
+  // Only the active container is cloned (others are reused by reference) since it's the only one being mutated.
+  lockExportHtml = () => {
+    this.setState((prevState) => {
+      const containers = _.map(prevState.schema.containers, (container) => {
+        if (!container.isActive) return container;
+        const activeContainer = _.cloneDeep(container);
+        const tabOptionsPopoverCol = _.find(activeContainer?.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols, { id: 'tab-options-popover' });
+        if (tabOptionsPopoverCol) {
+          this.setExportHtmlLabelStyle(tabOptionsPopoverCol, { opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' });
+        }
+        return activeContainer;
+      });
+      return { exportHtmlContentLocked: true, schema: { ...prevState.schema, containers } };
+    });
+  }
+
+  // Bee's per-edit signal: deliberately never touches `schema` (unlike lockExportHtml) so it can't trigger Classic.js's formData rebuild and reinitialize the live Bee editor mid-edit.
+  handleBeeContentChange = () => {
+    if (this.state.exportHtmlContentLocked) return;
+    const { formData, currentTab } = this.state;
+    const activeTab = formData[currentTab - 1]?.activeTab;
+    const baseLanguage = this.props.currentOrgDetails?.basic_details?.base_language || DEFAULT_LOCALE;
+    if (activeTab !== baseLanguage) return;
+    this.setState({ exportHtmlContentLocked: true });
+  }
+
+  exportHtml = () => {
+    const templateDetails = this.props.Email.templateDetails;
+    if (_.isEmpty(templateDetails) || this.state.exportHtmlContentLocked) {
+      CapNotification.error({ message: this.props.intl.formatMessage(messages.exportHtmlError) });
+      return;
+    }
+    const filename = `${sanitizeFileName(templateDetails.name)}.html`;
+    const baseLanguage = this.props.currentOrgDetails?.basic_details?.base_language || DEFAULT_LOCALE;
+    exportEmailTemplateHtml(templateDetails, filename, baseLanguage).catch((error) => {
+      console.error('Error exporting EMAIL template HTML:', error);
+      CapNotification.error({ message: this.props.intl.formatMessage(messages.exportHtmlError) });
+    });
+  }
+
   renameVersion = () => {
 
   }
@@ -2376,6 +2459,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               newContainerInputFieldCol.colStyle.display = "none";
             }
           }
+          if (containerInputFieldCol.id === "tab-options-popover") {
+            const canExportHtml = this.state.isEdit && !this.state.exportHtmlContentLocked;
+            this.setExportHtmlLabelStyle(containerInputFieldCol, {
+              opacity: canExportHtml ? 1 : 0.5,
+              cursor: canExportHtml ? 'pointer' : 'not-allowed',
+              pointerEvents: canExportHtml ? 'auto' : 'none',
+            });
+          }
           // if (containerInputFieldCol.id === "tab-options-popover") {
           //   const newContainerInputFieldCol = containerInputFieldCol;
           //   newContainerInputFieldCol.colStyle.display = "none";
@@ -2443,10 +2534,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           _.forEach(section.inputFields, (inputFields) => {
             if (section.type === "multicols") {
               _.forEach(inputFields.cols, (col) => {
-                if ((col.id === "tab-options-popover" || col.id === "add-language-button") && !this.props.isFullMode) {
+                if (col.id === "add-language-button" && !this.props.isFullMode) {
                   const colStyle = col.colStyle;
                   colStyle.display = "none";
                 }
+                if (col.id === "tab-options-popover" && !this.props.isFullMode) {
+                  this.hideSwitchEditorLabel(col);
+                }
               });
             }
           });
@@ -3060,7 +3154,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           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";
+          // One-way Bee -> CKEditor switch: hide permanently, since isDragDrop isn't re-fetched to drive the usual toggle.
+          _.forEach(container.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols, (col) => {
+            if (col.id === 'tab-options-popover') {
+              this.hideSwitchEditorLabel(col);
+            }
+          });
         }
       });
 
@@ -3076,7 +3175,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState((prevState) => {
       const { currentTab, formData } = _.cloneDeep(prevState);
       const activeTab = formData[currentTab - 1].activeTab;
-      
+
       // Update content in both formData and base
       formData[currentTab - 1][activeTab]['template-content'] = html;
       formData[currentTab - 1][activeTab]['json-content'] = json;
@@ -3175,6 +3274,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   isLoyaltyModule={this.props?.isLoyaltyModule}
                   isGetBeeData={this.state.isGetBeeData}
                   getBEEData={this.getBEEData}
+                  onContentChange={this.handleBeeContentChange}
+                  exportHtmlLocked={this.state.exportHtmlContentLocked}
+                  exportHtmlTooltip={getExportHtmlDisabledTooltip(this.state.isEdit, this.state.exportHtmlContentLocked, this.props.intl.formatMessage)}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
               /> : ''}
             </CapColumn>

package/v2Containers/Email/initialSchema.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {CapButton} from '@capillarytech/cap-ui-library';
 import {FormattedMessage} from 'react-intl';
 import messages from './messages';
+import { EXPORT_HTML_LABEL_ID } from '../../constants/unified';
 export const response = {
   metaEntities: [
     {
@@ -285,6 +286,7 @@ export const response = {
                             fontStyle: "normal",
                             fontWeight: "600",
                             justifyContent: "flex-end",
+                            marginLeft: "31.25rem",
                           },
                           width: 3,
                           offset: 10,
@@ -358,7 +360,7 @@ export const response = {
                           colStyle: {
                             textAlign: "right",
                             flex: 0,
-                            display: "none",
+                            display: "flex",
                             alignItems: "center",
                           },
                           type: "popover",
@@ -395,6 +397,25 @@ export const response = {
                                       },
                                     ],
                                   },
+                                  {
+                                    cols: [
+                                      {
+                                        id: EXPORT_HTML_LABEL_ID,
+                                        metaType: "label",
+                                        type: "div",
+                                        primitive: true,
+                                        value: "Export HTML",
+                                        onlyDisplay: true,
+                                        customComponent: false,
+                                        order: 5,
+                                        fluid: false,
+                                        className: "version-popover",
+                                        submitAction: "exportHtml",
+                                        supportedEvents: ["exportHtml"],
+                                        style: { display: '' },
+                                      },
+                                    ],
+                                  },
                                 ],
                                 actionFields: [],
                               },
@@ -410,10 +431,11 @@ export const response = {
                                       {
                                         id: "tab-option-icon",
                                         metaType: "display",
-                                        type: "icon",
+                                        type: "cap-icon",
                                         onlyDisplay: true,
                                         primitive: false,
-                                        value: "more_vert",
+                                        value: "more",
+                                        rotate: 90,
                                         customComponent: false,
                                         order: 3,
                                         fluid: false,

package/v2Containers/Email/messages.js

@@ -18,6 +18,22 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.mostRecentOption',
     defaultMessage: "Most recent",
   },
+  "exportHtmlError": {
+    id: 'creatives.containersV2.Email.exportHtmlError',
+    defaultMessage: "Failed to export template HTML. Please try again.",
+  },
+  "exportHtmlButton": {
+    id: 'creatives.containersV2.Email.exportHtmlButton',
+    defaultMessage: "Export HTML",
+  },
+  "exportHtmlDisabledCreateTooltip": {
+    id: 'creatives.containersV2.Email.exportHtmlDisabledCreateTooltip',
+    defaultMessage: "HTML export isn’t available while creating a template.",
+  },
+  "exportHtmlDisabledEditedTooltip": {
+    id: 'creatives.containersV2.Email.exportHtmlDisabledEditedTooltip',
+    defaultMessage: "HTML export is unavailable because the template has been edited in this session.",
+  },
   "alphabeticallyOption": {
     id: 'creatives.containersV2.Email.alphabeticallyOption',
     defaultMessage: "Alphabetically",