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

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -11,11 +11,16 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
+import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
 import { isEmailUnsubscribeTagOptional } from '../../../utils/common';
+import { downloadHtmlFile, sanitizeFileName, getExportHtmlDisabledTooltip } from '../../../utils/downloadFile';
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
@@ -25,6 +30,7 @@ import {
 } from '../../Whatsapp/constants';
 import { EMAIL } from '../../CreativesContainer/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
+import './_emailHTMLEditor.scss';
 
 /**
  * EmailHTMLEditor Component
@@ -96,6 +102,8 @@ const EmailHTMLEditor = (props) => {
   // State for content and subject
   const [htmlContent, setHtmlContent] = useState('');
   const [loadedHtmlContent, setLoadedHtmlContent] = useState(''); // Stable content for HTMLEditor initialization
+  const [hasContentChanged, setHasContentChanged] = useState(false);
+  const baselineContentRef = useRef(null);
   const [subject, setSubject] = useState('');
   const [subjectError, setSubjectError] = useState('');
   // State for template name (extracted from template data in Edit mode)
@@ -109,6 +117,13 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
+  // Baseline for detecting a genuine edit vs. a Redux resync (drives the Export HTML lock).
+  useEffect(() => {
+    if (baselineContentRef.current === null && loadedHtmlContent) {
+      baselineContentRef.current = loadedHtmlContent;
+    }
+  }, [loadedHtmlContent]);
+
   // Merge tag validation errors (missing) into apiValidationErrors so they show in ValidationErrorDisplay
   const mergedApiValidationErrors = useMemo(() => {
     const tagMessages = [];
@@ -277,6 +292,8 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent('');
       setSubject('');
       setExtractedTemplateName('');
+      baselineContentRef.current = null;
+      setHasContentChanged(false);
     }
 
     // Set last template ID on first load
@@ -483,6 +500,10 @@ const EmailHTMLEditor = (props) => {
   const handleContentChange = useCallback((content) => {
     setHtmlContent(content);
 
+    if (isEditMode && !hasContentChanged && baselineContentRef.current !== null && content !== baselineContentRef.current) {
+      setHasContentChanged(true);
+    }
+
     // Clear previous liquid/API validation errors so Done button can be enabled after user fixes content
     setApiValidationErrors({
       liquidErrors: [],
@@ -511,7 +532,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter, isEditMode, hasContentChanged]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -1078,6 +1099,20 @@ const EmailHTMLEditor = (props) => {
     }
   }, [showTemplateName, isFullMode, templateName, extractedTemplateName, isEditMode, handleFormDataChange]);
 
+  const exportHtmlTooltip = useMemo(
+    () => getExportHtmlDisabledTooltip(isEditMode, hasContentChanged, formatMessage),
+    [isEditMode, hasContentChanged, formatMessage]
+  );
+
+  // No backend call: this non-Bee editor's loaded content is already the full rendered HTML.
+  const handleExportHtml = useCallback(() => {
+    if (!isEditMode || hasContentChanged || !loadedHtmlContent) {
+      CapNotification.error({ message: formatMessage(emailMessages.exportHtmlError) });
+      return;
+    }
+    downloadHtmlFile(loadedHtmlContent, `${sanitizeFileName(extractedTemplateName)}.html`);
+  }, [isEditMode, hasContentChanged, loadedHtmlContent, extractedTemplateName, formatMessage]);
+
   return (
     <CapSpin spinning={isLoading} tip={spinTip}>
       <CapRow>
@@ -1113,6 +1148,25 @@ const EmailHTMLEditor = (props) => {
             />
           </CapColumn>
 
+          <CapColumn span={24} className="html-editor-options-column">
+            <CapDropdown
+              rootClassName="html-editor-options-dropdown"
+              overlay={
+                <CapMenu className="html-editor-options-menu">
+                  <CapTooltip title={exportHtmlTooltip} placement="topLeft">
+                    <span>
+                      <CapMenu.Item className="export-html-inhouse" disabled={!isEditMode || hasContentChanged} onClick={handleExportHtml}>
+                        <FormattedMessage {...emailMessages.exportHtmlButton} />
+                      </CapMenu.Item>
+                    </span>
+                  </CapTooltip>
+                </CapMenu>
+              }
+            >
+              <CapIcon type="more" rotate={90} className="html-editor-options-icon" />
+            </CapDropdown>
+          </CapColumn>
+
           <HTMLEditor
             ref={htmlEditorRef}
             variant="email"

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -14,6 +14,7 @@ import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
 import { validateTags } from '../../../../utils/tagValidations';
 import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
+import { downloadHtmlFile } from '../../../../utils/downloadFile';
 
 // Mock dependencies
 jest.mock('../../../../utils/commonUtils', () => ({
@@ -38,6 +39,39 @@ jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
   warning: jest.fn(),
 }));
 
+jest.mock('../../../../utils/downloadFile', () => ({
+  downloadHtmlFile: jest.fn(),
+  sanitizeFileName: jest.fn((name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'),
+  getExportHtmlDisabledTooltip: jest.fn((isEditMode, isContentLocked) => {
+    if (!isEditMode) return 'Export while creating not supported';
+    if (isContentLocked) return 'Email edited and Export HTML not supported in active session now';
+    return '';
+  }),
+}));
+
+// CapDropdown/CapMenu render lazily via antd's hover-trigger popup portal, which isn't
+// mounted in the DOM until opened. No existing test in this file exercises the Export
+// HTML dropdown, so mocking these to render their overlay/children unconditionally is
+// safe (matches the pattern already used in SmsFallback's tests) and lets these new
+// tests query/click the menu item directly.
+jest.mock('@capillarytech/cap-ui-library/CapDropdown', () => (props) => (
+  <div>
+    {props.children}
+    {props.overlay}
+  </div>
+));
+jest.mock('@capillarytech/cap-ui-library/CapMenu', () => {
+  const Menu = ({ children, className }) => <div className={className}>{children}</div>;
+  Menu.Item = ({
+    children, onClick, disabled, className,
+  }) => (
+    <button type="button" className={className} disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  );
+  return Menu;
+});
+
 // Create mutable mock functions that can be controlled in tests
 const mockGetAllIssues = jest.fn(() => []);
 const mockGetValidationState = jest.fn(() => ({
@@ -381,6 +415,12 @@ describe('EmailHTMLEditor', () => {
       hasErrors: false,
       issueCounts: { errors: 0, warnings: 0, total: 0 },
     });
+    // jest config sets resetMocks: true, which wipes the default implementation
+    // baked into the jest.mock(...) factory before every test - re-establish it here.
+    // eslint-disable-next-line global-require
+    require('../../../../utils/downloadFile').sanitizeFileName.mockImplementation(
+      (name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'
+    );
   });
 
   describe('Default Parameter Values (lines 60-63)', () => {
@@ -2670,4 +2710,105 @@ describe('EmailHTMLEditor', () => {
       expect(validateLiquidTemplateContent).not.toHaveBeenCalled();
     });
   });
+
+  describe('Export HTML (baseline capture, handleExportHtml, dropdown disabled state)', () => {
+    const editModeProps = (overrides = {}) => ({
+      params: { id: 'template-123' },
+      templateData: { name: 'My Email', 'template-content': '<p>Original</p>' },
+      ...overrides,
+    });
+
+    it('captures the baseline once loadedHtmlContent arrives, and only flags hasContentChanged once content actually diverges from it', async () => {
+      renderWithIntl(editModeProps());
+
+      // Baseline captured from templateData ('<p>Original</p>'); Export HTML enabled, not yet disabled.
+      const menuItemBefore = screen.getByText('Export HTML').closest('button');
+      expect(menuItemBefore).not.toBeDisabled();
+
+      // Mocked HTMLEditor's content-change button always fires '<p>New content</p>', which differs from baseline.
+      await act(async () => {
+        fireEvent.click(screen.getByTestId('trigger-content-change'));
+      });
+
+      const menuItemAfter = screen.getByText('Export HTML').closest('button');
+      expect(menuItemAfter).toBeDisabled();
+    });
+
+    it('downloads the loaded HTML when in edit mode with no content change', async () => {
+      renderWithIntl(editModeProps());
+
+      await act(async () => {
+        fireEvent.click(screen.getByText('Export HTML').closest('button'));
+      });
+
+      expect(downloadHtmlFile).toHaveBeenCalledWith('<p>Original</p>', 'My Email.html');
+    });
+
+    it('shows an error notification and does not download when loadedHtmlContent is empty', async () => {
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+      renderWithIntl(editModeProps({ templateData: { name: 'Empty Email' } }));
+
+      const menuItem = screen.getByText('Export HTML').closest('button');
+      // loadedHtmlContent emptiness isn't part of the disabled condition, so the item stays clickable.
+      expect(menuItem).not.toBeDisabled();
+
+      await act(async () => {
+        fireEvent.click(menuItem);
+      });
+
+      expect(downloadHtmlFile).not.toHaveBeenCalled();
+      expect(CapNotification.error).toHaveBeenCalled();
+    });
+
+    it('disables the Export HTML menu item (and cannot be clicked) when not in edit mode', async () => {
+      renderWithIntl({ params: {}, templateData: null, isEditEmail: false });
+
+      const menuItem = screen.getByText('Export HTML').closest('button');
+      expect(menuItem).toBeDisabled();
+
+      await act(async () => {
+        fireEvent.click(menuItem);
+      });
+
+      expect(downloadHtmlFile).not.toHaveBeenCalled();
+    });
+
+    it('resets hasContentChanged and re-baselines against the new template when switching templates mid-session', async () => {
+      const { rerender } = renderWithIntl(editModeProps({
+        params: { id: 'template-A' },
+        templateData: { name: 'Template A', 'template-content': '<p>Original A</p>' },
+      }));
+
+      // Mark template A as edited (locks Export HTML).
+      await act(async () => {
+        fireEvent.click(screen.getByTestId('trigger-content-change'));
+      });
+      expect(screen.getByText('Export HTML').closest('button')).toBeDisabled();
+
+      // Switch to a different template (new params.id + new templateData) without unmounting.
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor
+              {...defaultProps}
+              {...editModeProps({
+                params: { id: 'template-B' },
+                templateData: { name: 'Template B', 'template-content': '<p>Original B</p>' },
+              })}
+            />
+          </IntlProvider>
+        );
+      });
+
+      // hasContentChanged must reset - template B hasn't been edited yet.
+      const menuItemAfterSwitch = screen.getByText('Export HTML').closest('button');
+      expect(menuItemAfterSwitch).not.toBeDisabled();
+
+      // Exporting now must use template B's freshly re-baselined content, not template A's stale one.
+      await act(async () => {
+        fireEvent.click(menuItemAfterSwitch);
+      });
+      expect(downloadHtmlFile).toHaveBeenCalledWith('<p>Original B</p>', 'Template B.html');
+    });
+  });
 });

package/v2Containers/EmailWrapper/components/_emailHTMLEditor.scss

@@ -0,0 +1,11 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.html-editor-options-column {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: $CAP_SPACE_04;
+}
+
+.html-editor-options-icon {
+  cursor: pointer;
+}

package/v2Containers/Templates/index.js

@@ -119,6 +119,7 @@ import {
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
+import { sanitizeFileName, exportEmailTemplateHtml } from '../../utils/downloadFile';
 import {
   STATUS_OPTIONS,
   CATEGORY,
@@ -306,6 +307,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       testAndPreviewContent: null,
       // Phase 18: EMAIL API call flag
       isWaitingForEmailTemplateDetails: false,
+      // Export HTML from listing
+      isWaitingForEmailTemplateExport: false,
+      selectedTemplateForExport: null,
     };
     // Timeout IDs for cleanup
     this._clearEditTimeout = null;
@@ -973,6 +977,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
+    // Handle EMAIL template details API response for Export HTML
+    if (this.state.isWaitingForEmailTemplateExport && this.state.selectedTemplateForExport) {
+      const wasInProgress = this.props.Templates.getTemplateDetailsInProgress;
+      const isNowInProgress = nextProps.Templates.getTemplateDetailsInProgress;
+
+      if (wasInProgress && !isNowInProgress) {
+        if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
+          this.processEmailHtmlExport(nextProps.Templates.templateDetails, this.state.selectedTemplateForExport);
+        } else {
+          CapNotification.error({
+            message: this.props.intl.formatMessage(messages.exportHtmlError),
+          });
+        }
+        this.setState({
+          isWaitingForEmailTemplateExport: false,
+          selectedTemplateForExport: null,
+        });
+      }
+    }
+
     if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
       this.setState({ previewTemplate: nextProps.Templates.templateDetails });
     }
@@ -1644,6 +1668,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
   }
 
+  // Fetches full template details (like Preview/Test) to know if the base language is Bee or CKEditor.
+  handleExportHtmlFromListing = (template) => {
+    if (!template._id) return;
+    this.setState({
+      selectedTemplateForExport: template,
+      isWaitingForEmailTemplateExport: true,
+    });
+    this.props.actions.getTemplateDetails(template._id, EMAIL);
+  }
+
+  // Downloads the base language's HTML directly (CKEditor) or converts Bee design JSON via backend first.
+  processEmailHtmlExport = (templateDetails, template) => {
+    const filename = `${sanitizeFileName(template?.name)}.html`;
+    const baseLanguage = this.props.Global?.currentOrgDetails?.basic_details?.base_language || 'en';
+    exportEmailTemplateHtml(templateDetails, filename, baseLanguage).catch((error) => {
+      console.error('Error exporting EMAIL template HTML:', error);
+      CapNotification.error({ message: this.props.intl.formatMessage(messages.exportHtmlError) });
+    });
+  }
+
   /**
    * Phase 18: Extract EMAIL content from templateDetails API response
    * This function extracts content from the full template details response
@@ -2246,6 +2290,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     onClick: () => this.duplicateTemplate(template),
                     label: <FormattedMessage {...messages.duplicateButton} />,
                   })}
+                {/* Export HTML menu item - EMAIL only */}
+                {this.state.channel.toUpperCase() === EMAIL && (
+                  <CapMenu.Item
+                    className="export-html-email template-action-menu-item"
+                    onClick={() => this.handleExportHtmlFromListing(template)}
+                  >
+                    <FormattedMessage {...messages.exportHtmlButton} />
+                  </CapMenu.Item>
+                )}
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
                 {commonUtil.hasCreativesArchivalEnabled() && (() => {
                   const channelUp = this.state.channel.toUpperCase();

package/v2Containers/Templates/messages.js

@@ -110,6 +110,14 @@ export default defineMessages({
     id: `${scope}.deleteButton`,
     defaultMessage: "Delete",
   },
+  "exportHtmlButton": {
+    id: `${scope}.exportHtmlButton`,
+    defaultMessage: "Export HTML",
+  },
+  "exportHtmlError": {
+    id: `${scope}.exportHtmlError`,
+    defaultMessage: "Failed to export template HTML. Please try again.",
+  },
   "mostRecentOption": {
     id: `${scope}.mostRecentOption`,
     defaultMessage: "Most recent",

package/v2Containers/Templates/tests/index.test.js

@@ -4,9 +4,20 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { Templates } from '../index';
 import mockdata from '../../mockdata';
 import { rcsTemplates, senderDetailsRcs } from './mockData';
+import { exportEmailTemplateHtml } from '../../../utils/downloadFile';
 
 const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput, zaloTemplates: ZaloTemplateProp } = mockdata;
 
+jest.mock('../../../utils/downloadFile', () => ({
+  sanitizeFileName: jest.fn((name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'),
+  exportEmailTemplateHtml: jest.fn(),
+}));
+
+jest.mock('@capillarytech/cap-ui-library', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-library'),
+  CapNotification: { error: jest.fn(), success: jest.fn(), warning: jest.fn() },
+}));
+
 jest.mock('../../CreativesContainer', () => ({
   __esModule: true,
   default: (props) => (
@@ -256,4 +267,163 @@ describe('Test Templates container', () => {
       getCreativesParamsOutputRcs,
     );
   });
+
+  describe('Export HTML (EMAIL channel)', () => {
+    const emailTemplate = { _id: 'email_1', name: 'My Email Template', versions: { base: {} } };
+
+    // Recursively walks a plain-object/array/React-element tree (as returned by
+    // getTemplateDataForGrid, which is never mounted here) looking for a node whose
+    // className includes the given substring - robust against the exact nesting of
+    // CapDropdown > CapMenu > CapMenu.Item without hardcoding array indices.
+    function findByClassName(node, className, seen = new Set()) {
+      if (!node || typeof node !== 'object') return null;
+      if (seen.has(node)) return null;
+      seen.add(node);
+      if (Array.isArray(node)) {
+        for (let i = 0; i < node.length; i += 1) {
+          const found = findByClassName(node[i], className, seen);
+          if (found) return found;
+        }
+        return null;
+      }
+      // React element (has .props) - check its className, then search its own prop values.
+      if (node.props) {
+        if (typeof node.props.className === 'string' && node.props.className.includes(className)) {
+          return node;
+        }
+        return findByClassName(node.props, className, seen);
+      }
+      // Plain object (e.g. a getTemplateDataForGrid card-data entry: {key, title, extra, hoverOption, ...})
+      // or a React element's .props object - search every own value.
+      const values = Object.values(node);
+      for (let i = 0; i < values.length; i += 1) {
+        const value = values[i];
+        if (value && typeof value === 'object') {
+          const found = findByClassName(value, className, seen);
+          if (found) return found;
+        }
+      }
+      return null;
+    }
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      // jest config sets resetMocks: true, wiping the default implementation baked into
+      // the jest.mock(...) factory before every test - re-establish it here.
+      // eslint-disable-next-line global-require
+      require('../../../utils/downloadFile').sanitizeFileName.mockImplementation(
+        (name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'
+      );
+      RenderFunctionFor('email', true);
+      renderedComponent.setProps({
+        isFullMode: true,
+        isDltFromRcs: false,
+        Global: { currentOrgDetails: { basic_details: { base_language: 'en' } } },
+        actions: { ...renderedComponent.props().actions, getTemplateDetails: jest.fn() },
+        Templates: { ...TemplatesProp, getTemplateDetailsInProgress: true, templateDetails: {} },
+      });
+    });
+
+    it('handleExportHtmlFromListing stores the selected template and fetches its full details', () => {
+      renderedComponent.instance().handleExportHtmlFromListing(emailTemplate);
+
+      expect(renderedComponent.state('isWaitingForEmailTemplateExport')).toBe(true);
+      expect(renderedComponent.state('selectedTemplateForExport')).toEqual(emailTemplate);
+    });
+
+    it('handleExportHtmlFromListing does nothing when the template has no _id', () => {
+      renderedComponent.instance().handleExportHtmlFromListing({ name: 'no id' });
+
+      expect(renderedComponent.state('isWaitingForEmailTemplateExport')).toBeFalsy();
+    });
+
+    it('componentWillReceiveProps calls processEmailHtmlExport once template details finish loading', () => {
+      renderedComponent.instance().handleExportHtmlFromListing(emailTemplate);
+      const processSpy = jest.spyOn(renderedComponent.instance(), 'processEmailHtmlExport').mockImplementation(() => {});
+
+      const templateDetails = { _id: 'email_1', versions: { base: { en: { 'template-content': '<p>hi</p>' } } } };
+      renderedComponent.setProps({
+        Templates: { ...TemplatesProp, getTemplateDetailsInProgress: false, templateDetails },
+      });
+
+      expect(processSpy).toHaveBeenCalledWith(templateDetails, emailTemplate);
+      expect(renderedComponent.state('isWaitingForEmailTemplateExport')).toBe(false);
+      expect(renderedComponent.state('selectedTemplateForExport')).toBeNull();
+    });
+
+    it('componentWillReceiveProps shows an error notification when template details come back empty', () => {
+      const CapNotification = require('@capillarytech/cap-ui-library').CapNotification;
+      renderedComponent.instance().handleExportHtmlFromListing(emailTemplate);
+      const processSpy = jest.spyOn(renderedComponent.instance(), 'processEmailHtmlExport').mockImplementation(() => {});
+
+      renderedComponent.setProps({
+        Templates: { ...TemplatesProp, getTemplateDetailsInProgress: false, templateDetails: {} },
+      });
+
+      expect(processSpy).not.toHaveBeenCalled();
+      expect(CapNotification.error).toHaveBeenCalled();
+    });
+
+    it('processEmailHtmlExport delegates to the shared exportEmailTemplateHtml helper', () => {
+      exportEmailTemplateHtml.mockResolvedValue();
+      const templateDetails = { versions: { base: { en: { 'template-content': '<p>hi</p>' } } } };
+
+      renderedComponent.instance().processEmailHtmlExport(templateDetails, emailTemplate);
+
+      expect(exportEmailTemplateHtml).toHaveBeenCalledWith(templateDetails, 'My Email Template.html', 'en');
+    });
+
+    it('processEmailHtmlExport shows an error notification when the shared helper rejects', async () => {
+      const CapNotification = require('@capillarytech/cap-ui-library').CapNotification;
+      const error = new Error('export failed');
+      exportEmailTemplateHtml.mockRejectedValue(error);
+
+      renderedComponent.instance().processEmailHtmlExport({}, emailTemplate);
+      // Let the promise rejection's .catch() microtask run.
+      await Promise.resolve().then(() => {}).then(() => {});
+
+      expect(CapNotification.error).toHaveBeenCalled();
+    });
+
+    it('renders an "Export HTML" menu item (EMAIL channel only) wired to handleExportHtmlFromListing', () => {
+      const instance = renderedComponent.instance();
+      const spy = jest.spyOn(instance, 'handleExportHtmlFromListing').mockImplementation(() => {});
+
+      const cardDataList = instance.getTemplateDataForGrid({
+        templates: [emailTemplate],
+        handlers: { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() },
+        filterContent: null,
+        channel: 'email',
+        isLoading: false,
+        isInitialLoading: false,
+        loadingTip: '',
+        previewTemplateId: null,
+      });
+
+      const exportMenuItem = findByClassName(cardDataList, 'export-html-email');
+      expect(exportMenuItem).not.toBeNull();
+
+      exportMenuItem.props.onClick();
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining({ _id: 'email_1' }));
+    });
+
+    it('does not render the "Export HTML" menu item for a non-EMAIL channel', () => {
+      RenderFunctionFor('whatsapp', true);
+      renderedComponent.setProps({ isFullMode: true, isDltFromRcs: false });
+      const instance = renderedComponent.instance();
+
+      const cardDataList = instance.getTemplateDataForGrid({
+        templates: [{ _id: 'wa_1', name: 'WA Template' }],
+        handlers: { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() },
+        filterContent: null,
+        channel: 'whatsapp',
+        isLoading: false,
+        isInitialLoading: false,
+        loadingTip: '',
+        previewTemplateId: null,
+      });
+
+      expect(findByClassName(cardDataList, 'export-html-email')).toBeNull();
+    });
+  });
 });

package/v2Containers/Viber/constants.js

@@ -19,9 +19,6 @@ export const EMPTY_INJECTED_TAGS = {};
 export const EMPTY_TAGS = [];
 export const EMPTY_TEMPLATE_DATA = {};
 
-// Cap + Viber each inject v2ViberSagas; module counter lets only the first task start takeLatest watchers (avoids duplicate API calls).
-export let viberSagasActive = 0;
-
 export const UPLOAD_VIBER_ASSET_REQUEST = 'app/v2Containers/Viber/UPLOAD_ASSET_REQUEST';
 export const UPLOAD_VIBER_ASSET_SUCCESS = 'app/v2Containers/Viber/UPLOAD_ASSET_SUCCESS';
 export const UPLOAD_VIBER_ASSET_FAILURE = 'app/v2Containers/Viber/UPLOAD_ASSET_FAILURE';

package/v2Containers/Viber/sagas.js

@@ -6,7 +6,6 @@ import { pollAssetStatus } from '../../sagas/assetPolling';
 import { createPollingConfig } from '../../utils/asyncAssetUpload';
 import { ASSET_STATUS } from '../../utils/assetStatusConstants';
 import * as types from './constants';
-import { viberSagasActive } from './constants';
 import messages from './messages';
 
 export function* uploadViberAsset(params) {
@@ -149,6 +148,9 @@ export default [
   watchEditTemplate,
 ];
 
+// Cap + Viber each inject v2ViberSagas; module counter lets only the first task start takeLatest watchers (avoids duplicate API calls).
+let viberSagasActive = 0;
+
 export function* v2ViberSagas() {
   if (viberSagasActive > 0) {
     return;

package/v2Containers/Viber/tests/saga.test.js

@@ -555,5 +555,26 @@ describe('Viber Sagas', () => {
 
   describe('v2ViberSagas Combined', () => {
     it('should initialize all Viber-related watcher sagas without error', () => expectSaga(sagas.v2ViberSagas).run());
+
+    // Double inject (Cap + Viber): only the first task registers watchers.
+    it('does not start the watchers again while another task already holds them', () => {
+      const first = sagas.v2ViberSagas();
+      expect(first.next().done).toBe(false);
+
+      const second = sagas.v2ViberSagas();
+      expect(second.next()).toEqual({ value: undefined, done: true });
+
+      first.return();
+    });
+
+    it('releases the guard when the running task is cancelled, so a remount re-arms', () => {
+      const first = sagas.v2ViberSagas();
+      expect(first.next().done).toBe(false);
+      first.return();
+
+      const afterCancel = sagas.v2ViberSagas();
+      expect(afterCancel.next().done).toBe(false);
+      afterCancel.return();
+    });
   });
 });