npm - @capillarytech/creatives-library - Versions diffs - 9.0.61-alpha.3 → 9.0.62 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/constants/unified.js CHANGED Viewed

@@ -35,6 +35,9 @@ export const DEFAULT = 'default';
 export const DEFAULT_MODULE = 'creatives';
 export const DEFAULT_LOCALE = 'en';
+export const EXPORT_HTML_LABEL_ID = 'export-html-label';
+export const DISPLAY_NONE = 'none';
 // --- Feature Flags & Validation ---
 export const STORE2DOOR_PLUS_ENABLED = 'STORE2DOOR_PLUS_ENABLED';
 export const TRAI_DLT = 'TRAI_DLT';
@@ -45,9 +48,10 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const ENABLE_NEW_EDITOR_FLOW_INAPP = 'ENABLE_NEW_EDITOR_FLOW_INAPP';
-// Per-channel flag for the FormBuilder V3 migration. Routes SMS templates to the
-// new functional FormBuilder; later channels get their own flags (…_MPUSH, …_EMAIL).
+// Per-channel flags for the FormBuilder V3 migration. Each routes its channel to
+// the new functional FormBuilder; later channels get their own flags (…_EMAIL).
 export const ENABLE_NEW_FORMBUILDER_SMS = 'ENABLE_NEW_FORMBUILDER_SMS';
+export const ENABLE_NEW_FORMBUILDER_MPUSH = 'ENABLE_NEW_FORMBUILDER_MPUSH';
 export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
@@ -159,6 +163,8 @@ export const UNSUBSCRIBE_TAG_REGEX = new RegExp(`\\{\\{\\s*${UNSUBSCRIBE_TAG}\\s
 /** Matches {{ ... }} and captures the inner tag content (for scanning content for tags). */
 export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
+/** Strips characters not allowed in a downloaded file name, keeping alphanumerics, `-`, `_` and spaces. */
+export const SAFE_FILE_NAME_REGEX = /[^a-zA-Z0-9-_ ]/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-Z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)", "referral_unique_(code|url).*userid"];
 // --- Template variable tokens (`{{var}}`, DLT `{#var#}`) ---

package/package.json CHANGED Viewed

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

package/services/api.js CHANGED Viewed

@@ -505,6 +505,11 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
+export const exportBeeTemplateHtml = (jsonContent) => {
+  const url = `${API_ENDPOINT}/cms/v2/exportHtml`;
+  return request(url, getAPICallObject('POST', { jsonContent }));
+};
 export const getCmsAccounts = (cmsType) => {
   const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
   return API.get(url);

package/services/tests/api.test.js CHANGED Viewed

@@ -33,6 +33,7 @@ import {
   createTestCustomer,
   getCommDefinition,
   getCommDefinitionVersion,
+  exportBeeTemplateHtml,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1298,3 +1299,46 @@ describe('getCommDefinitionVersion', () => {
     expect(lastCall[1].method).toBe('GET');
   });
 });
+describe('exportBeeTemplateHtml', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  it('POSTs the given jsonContent to the exportHtml endpoint and resolves the parsed response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ response: { html: '<html>ok</html>' } }),
+    }));
+    const result = await exportBeeTemplateHtml({ page: { rows: [] } });
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    const [calledUrl, calledOptions] = global.fetch.mock.calls[0];
+    expect(calledUrl).toContain('/cms/v2/exportHtml');
+    expect(calledOptions.method).toBe('POST');
+    expect(JSON.parse(calledOptions.body)).toEqual({ jsonContent: { page: { rows: [] } } });
+    expect(result).toEqual({ response: { html: '<html>ok</html>' } });
+  });
+  it('wraps a jsonContent string as-is (no parsing) in the request body', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ response: { html: '<html>ok</html>' } }),
+    }));
+    await exportBeeTemplateHtml('{"page":{"rows":[]}}');
+    const [, calledOptions] = global.fetch.mock.calls[0];
+    expect(JSON.parse(calledOptions.body)).toEqual({ jsonContent: '{"page":{"rows":[]}}' });
+  });
+  it('resolves (rather than rejects) when the underlying request fails', () => {
+    global.fetch.mockReturnValue(Promise.reject(new Error('network error')));
+    return expect(exportBeeTemplateHtml({})).toEqual(Promise.resolve());
+  });
+});

package/utils/common.js CHANGED Viewed

@@ -27,6 +27,7 @@ import {
   ENABLE_NEW_MPUSH,
   ENABLE_NEW_EDITOR_FLOW_INAPP,
   ENABLE_NEW_FORMBUILDER_SMS,
+  ENABLE_NEW_FORMBUILDER_MPUSH,
   SUPPORT_ENGAGEMENT_MODULE,
   ENABLE_CREATIVES_ARCHIVAL,
 } from '../constants/unified';
@@ -166,6 +167,13 @@ export const hasNewFormBuilderEnabledForSms = Auth.hasFeatureAccess.bind(
   ENABLE_NEW_FORMBUILDER_SMS,
 );
+// FormBuilder V3 — per-org flag that routes the MOBILEPUSH channel to the new
+// functional FormBuilder. Off => the legacy class implementation (Classic).
+export const hasNewFormBuilderEnabledForMpush = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_NEW_FORMBUILDER_MPUSH,
+);
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/downloadFile.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { exportBeeTemplateHtml } from '../services/api';
+import { SAFE_FILE_NAME_REGEX } from 'constants/unified';
+import emailMessages from '../v2Containers/Email/messages';
+export function downloadHtmlFile(html, filename) {
+  const blob = new Blob([html], { type: 'text/html' });
+  const blobUrl = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = blobUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(blobUrl);
+}
+export function sanitizeFileName(name) {
+  return (name || 'template').replace(SAFE_FILE_NAME_REGEX, '').trim() || 'template';
+}
+// Shared by the schema-driven FormBuilder popover (Email/index.js) and the in-house HTML editor
+export function getExportHtmlDisabledTooltip(isEditMode, isContentLocked, formatMessage) {
+  if (!isEditMode) return formatMessage(emailMessages.exportHtmlDisabledCreateTooltip);
+  if (isContentLocked) return formatMessage(emailMessages.exportHtmlDisabledEditedTooltip);
+  return '';
+}
+// Resolves an EMAIL template's base-language content and downloads it as HTML - either directly
+// (CKEditor) or by converting the Bee design JSON via the backend first. Callers own error
+// notification (via .catch) so each keeps its own module-scoped i18n message.
+export function exportEmailTemplateHtml(templateDetails, filename, baseLanguage) {
+  try {
+    const baseVersion = templateDetails?.versions?.base || {};
+    const languageContent = baseVersion[baseLanguage] || baseVersion['en'] || {};
+    if (languageContent.is_drag_drop) {
+      const jsonContent = languageContent['json-content'];
+      return exportBeeTemplateHtml(jsonContent).then((result) => {
+        const html = result?.response?.html;
+        if (!html) {
+          return Promise.reject(new Error('exportBeeTemplateHtml returned no html'));
+        }
+        downloadHtmlFile(html, filename);
+        return { html, filename };
+      });
+    }
+    const html = languageContent['template-content'];
+    if (!html) {
+      return Promise.reject(new Error('No template-content found for the selected language'));
+    }
+    downloadHtmlFile(html, filename);
+    return Promise.resolve({ html, filename });
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}

package/utils/tests/downloadFile.test.js ADDED Viewed

@@ -0,0 +1,219 @@
+import { exportBeeTemplateHtml } from '../../services/api';
+import { downloadHtmlFile, sanitizeFileName, exportEmailTemplateHtml } from '../downloadFile';
+jest.mock('../../services/api', () => ({
+  exportBeeTemplateHtml: jest.fn(),
+}));
+describe('downloadHtmlFile', () => {
+  let createObjectURLMock;
+  let revokeObjectURLMock;
+  let clickMock;
+  let capturedLink;
+  beforeEach(() => {
+    createObjectURLMock = jest.fn(() => 'blob:mock-url');
+    revokeObjectURLMock = jest.fn();
+    global.URL.createObjectURL = createObjectURLMock;
+    global.URL.revokeObjectURL = revokeObjectURLMock;
+    clickMock = jest.fn();
+    capturedLink = null;
+    const originalCreateElement = document.createElement.bind(document);
+    jest.spyOn(document, 'createElement').mockImplementation((tagName) => {
+      const el = originalCreateElement(tagName);
+      if (tagName === 'a') {
+        el.click = clickMock;
+        capturedLink = el;
+      }
+      return el;
+    });
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  it('creates a Blob, triggers a click on a temporary link, and revokes the object URL', () => {
+    downloadHtmlFile('<html>hi</html>', 'my-template.html');
+    expect(createObjectURLMock).toHaveBeenCalledTimes(1);
+    const [blobArg] = createObjectURLMock.mock.calls[0];
+    expect(blobArg.type).toBe('text/html');
+    expect(clickMock).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURLMock).toHaveBeenCalledWith('blob:mock-url');
+  });
+  it('sets the download filename and href on the temporary link before clicking', () => {
+    downloadHtmlFile('<html>hi</html>', 'export.html');
+    expect(capturedLink.download).toBe('export.html');
+    expect(capturedLink.href).toContain('blob:mock-url');
+  });
+});
+describe('sanitizeFileName', () => {
+  it('strips characters outside the allowed set (alphanumeric, dash, underscore, space)', () => {
+    expect(sanitizeFileName('My Template! @#2024')).toBe('My Template 2024');
+  });
+  it('trims leading/trailing whitespace left after stripping', () => {
+    expect(sanitizeFileName('  Weekly Promo!!  ')).toBe('Weekly Promo');
+  });
+  it('falls back to "template" when name is empty', () => {
+    expect(sanitizeFileName('')).toBe('template');
+  });
+  it('falls back to "template" when name is null/undefined', () => {
+    expect(sanitizeFileName(null)).toBe('template');
+    expect(sanitizeFileName(undefined)).toBe('template');
+  });
+  it('falls back to "template" when name contains only disallowed characters', () => {
+    expect(sanitizeFileName('!!!///???')).toBe('template');
+  });
+  it('keeps dashes, underscores, and spaces', () => {
+    expect(sanitizeFileName('my-file_name here')).toBe('my-file_name here');
+  });
+});
+describe('exportEmailTemplateHtml', () => {
+  let createObjectURLMock;
+  let revokeObjectURLMock;
+  let clickMock;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    createObjectURLMock = jest.fn(() => 'blob:mock-url');
+    revokeObjectURLMock = jest.fn();
+    global.URL.createObjectURL = createObjectURLMock;
+    global.URL.revokeObjectURL = revokeObjectURLMock;
+    clickMock = jest.fn();
+    const originalCreateElement = document.createElement.bind(document);
+    jest.spyOn(document, 'createElement').mockImplementation((tagName) => {
+      const el = originalCreateElement(tagName);
+      if (tagName === 'a') {
+        el.click = clickMock;
+      }
+      return el;
+    });
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  it('downloads the CKEditor (non drag-drop) content directly for the resolved base language', async () => {
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: false, 'template-content': '<p>Hello</p>' },
+        },
+      },
+    };
+    await exportEmailTemplateHtml(templateDetails, 'file.html', 'en');
+    expect(exportBeeTemplateHtml).not.toHaveBeenCalled();
+    expect(clickMock).toHaveBeenCalledTimes(1);
+  });
+  it('falls back to the "en" language content when baseLanguage is not present in the base version', async () => {
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: false, 'template-content': '<p>English fallback</p>' },
+        },
+      },
+    };
+    await exportEmailTemplateHtml(templateDetails, 'file.html', 'fr');
+    expect(clickMock).toHaveBeenCalledTimes(1);
+  });
+  it('rejects instead of downloading an empty file when neither baseLanguage nor "en" content exists', async () => {
+    const templateDetails = { versions: { base: {} } };
+    await expect(exportEmailTemplateHtml(templateDetails, 'file.html', 'fr')).rejects.toThrow(
+      'No template-content found for the selected language'
+    );
+    expect(clickMock).not.toHaveBeenCalled();
+    expect(exportBeeTemplateHtml).not.toHaveBeenCalled();
+  });
+  it('converts Bee design JSON to HTML via the backend and downloads the result when is_drag_drop is true', async () => {
+    const jsonContent = { page: { rows: [] } };
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: true, 'json-content': jsonContent },
+        },
+      },
+    };
+    exportBeeTemplateHtml.mockResolvedValue({ response: { html: '<html>bee</html>' } });
+    await exportEmailTemplateHtml(templateDetails, 'file.html', 'en');
+    expect(exportBeeTemplateHtml).toHaveBeenCalledWith(jsonContent);
+    expect(clickMock).toHaveBeenCalledTimes(1);
+  });
+  it('rejects when the Bee export API resolves without an html field', async () => {
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: true, 'json-content': {} },
+        },
+      },
+    };
+    exportBeeTemplateHtml.mockResolvedValue({ response: {} });
+    await expect(exportEmailTemplateHtml(templateDetails, 'file.html', 'en')).rejects.toThrow(
+      'exportBeeTemplateHtml returned no html'
+    );
+    expect(clickMock).not.toHaveBeenCalled();
+  });
+  it('propagates a rejection from the Bee export API without downloading', async () => {
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: true, 'json-content': {} },
+        },
+      },
+    };
+    const apiError = new Error('network down');
+    exportBeeTemplateHtml.mockRejectedValue(apiError);
+    await expect(exportEmailTemplateHtml(templateDetails, 'file.html', 'en')).rejects.toBe(apiError);
+    expect(clickMock).not.toHaveBeenCalled();
+  });
+  it('rejects (via the optional chaining fallback to {}) when templateDetails is missing entirely', async () => {
+    await expect(exportEmailTemplateHtml(undefined, 'file.html', 'en')).rejects.toThrow(
+      'No template-content found for the selected language'
+    );
+    expect(clickMock).not.toHaveBeenCalled();
+    expect(exportBeeTemplateHtml).not.toHaveBeenCalled();
+  });
+  it('rejects (instead of throwing) when the synchronous download itself throws', async () => {
+    const templateDetails = {
+      versions: {
+        base: {
+          en: { is_drag_drop: false, 'template-content': '<p>content</p>' },
+        },
+      },
+    };
+    const downloadError = new Error('createObjectURL exploded');
+    createObjectURLMock.mockImplementation(() => {
+      throw downloadError;
+    });
+    await expect(exportEmailTemplateHtml(templateDetails, 'file.html', 'en')).rejects.toBe(downloadError);
+  });
+});

package/v2Components/FormBuilder/Classic.js CHANGED Viewed

@@ -37,6 +37,7 @@ import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLab
 import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import UnifiedPreview from '../CommonTestAndPreview/UnifiedPreview';
+import { EXPORT_HTML_LABEL_ID } from '../../constants/unified';
 import TemplatePreview from '../TemplatePreview';
 import { ANDROID } from '../CommonTestAndPreview/constants';
 import TagList from '../../v2Containers/TagList';
@@ -3308,20 +3309,36 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     switch (type) {
       case "span":
         return <span id={`${val.id}${childIndex > 1 ? childIndex : ''}`}>{val.dynamicTab ? tabName : val.value}</span>;
-      case "div":
+      case "div": {
         let children = _.get(this.state, `formData[${this.state.currentTab - 1}][${val.id}]`) || value;
         if (_.isEmpty(value) && !_.isEmpty(val.value)) {
           children = val.value;
         }
         const ref = _.get(this, `props.refs[${val.id}]`);
-        return (<div
-          ref={ref}
-          className={val.className ? val.className : ''}
-          id={`${val.id}${childIndex > 1 ? childIndex : ''}`}
-          onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
-          style={val.style ? val.style : {}}
-          onInput={(e) => { e.stopPropagation(); this.callChildEvent(e.target.textContent, val, 'onChange'); }}
-        >{children}</div>);
+        // Disabled state comes from exportHtmlLocked prop, not schema mutation, so Bee editors elsewhere don't see a schema diff and reinitialize (see Email/index.js).
+        let computedStyle = val.style ?? {};
+        if (val.id === EXPORT_HTML_LABEL_ID && this.props?.exportHtmlLocked) {
+          computedStyle = { ...computedStyle, opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' };
+        }
+        const divElement = (
+          <div
+            ref={ref}
+            className={val.className ? val.className : ''}
+            id={`${val.id}${childIndex > 1 ? childIndex : ''}`}
+            onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
+            style={computedStyle}
+            onInput={(e) => { e.stopPropagation(); this.callChildEvent(e.target.textContent, val, 'onChange'); }}
+          >{children}</div>
+        );
+        if (val.id === EXPORT_HTML_LABEL_ID && this.props?.exportHtmlTooltip) {
+          return (
+            <CapTooltip title={this.props.exportHtmlTooltip} placement="topLeft">
+              {divElement}
+            </CapTooltip>
+          );
+        }
+        return divElement;
+      }
       default:
         return '';
     }
@@ -4000,6 +4017,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               </CapColumn>
             );
             break;
+          case "cap-icon":
+            columns.push(
+              <CapColumn
+                key={`icon-${val.id}`}
+                id={val.id}
+                offset={val.offset}
+                width={val.width ? val.width : 1}
+                onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
+                className={val.className ? val.className : ''}
+                style={val.colStyle ? val.colStyle : {}}
+              >
+                <CapIcon type={val.value} rotate={val.rotate} style={val.style ? val.style : {}} />
+              </CapColumn>
+            );
+            break;
           case "select": {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
@@ -4118,6 +4151,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   waitEventContextTags={this.props?.waitEventContextTags}
                   isGetBeeData={this.props?.isGetBeeData}
                   getBEEData={this.props?.getBEEData}
+                  onContentChange={this.props?.onContentChange}
                 />
               </CapColumn>
             );