@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/AppRoot.js

@@ -0,0 +1,80 @@
+import React, { useMemo, useEffect, useRef } from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { createBrowserHistory } from 'history';
+import ConfigProvider from 'antd/lib/config-provider';
+import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/utils';
+
+import LanguageProvider from 'v2Containers/LanguageProvider';
+import App from './containers/App';
+import './styles/main.scss';
+import { initialReducer } from './initialReducer';
+import { translationMessages } from './i18n';
+import initialState from './initialState';
+import pathConfig from './config/path';
+import { isMFEMode } from './utils/mfeDetect';
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import appConfig from '../app-config';
+
+// Module-scope SDK init — MUST run before configureStore.
+loadCapUI();
+
+const AppRoot = ({ basename: _basename = '/creatives/ui', history: hostHistory }) => {
+  const { store, history } = useMemo(() => {
+    const hist =
+      hostHistory ||
+      createBrowserHistory({ basename: pathConfig.publicPath });
+    const st = configureStore(initialState, initialReducer, hist);
+    return { store: st, history: hist };
+  }, [hostHistory]);
+
+  const fcpReported = useRef(false);
+  useEffect(() => {
+    if (isMFEMode() && !fcpReported.current) {
+      fcpReported.current = true;
+      requestAnimationFrame(() => {
+        MFEEventBus.emit('mfe:segment', {
+          action: 'stop',
+          appId: appConfig.appName,
+          type: 'fcp',
+          timestamp: performance.now(),
+        });
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isMFEMode()) {
+      const { startStandalone } = require('locize');
+      startStandalone();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isMFEMode()) {
+      MFEEventBus.emit('gtm:init', {
+        appId: appConfig.appName,
+        containerId: appConfig.gtm.trackingId,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const unsub = MFEEventBus.on('creatives:navigate', ({ path }) => {
+      if (path) history.push(path);
+    });
+    return unsub;
+  }, [history]);
+
+  return (
+    <Provider store={store}>
+      <LanguageProvider messages={translationMessages}>
+        <ConfigProvider theme={getCapThemeConfig()}>
+          <App history={history} />
+        </ConfigProvider>
+      </LanguageProvider>
+    </Provider>
+  );
+};
+
+export default AppRoot;

package/app.js

@@ -33,9 +33,11 @@ import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/util
 loadCapUI();
 
 try {
-  const { setupNewrelicWebVitals } = require('./newRelic/utils'); 
-  // Setup New Relic WebVitals tracking
-  setupNewrelicWebVitals();
+  if (!window.MFE_HOST) {
+    const { setupNewrelicWebVitals } = require('./newRelic/utils');
+    // Setup New Relic WebVitals tracking
+    setupNewrelicWebVitals();
+  }
 } catch (error) {
   Bugsnag.notify(error);
 }

package/constants/unified.js

@@ -162,24 +162,6 @@ export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/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#}`) ---
-/** Global: all `{{…}}` placeholders in a string. */
-export const DEFAULT_MUSTACHE_VAR_REGEX = /\{\{[^}]+\}\}/g;
-/** Global: `{{…}}` or DLT `{#…#}` tokens (SMS combined mode). */
-export const COMBINED_SMS_TEMPLATE_VAR_REGEX = /\{\{[^}]+\}\}|\{\#[^#]*\#\}/g;
-/** Full-string check: one mustache token. */
-export const MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX = /^\{\{[^}]+\}\}$/;
-/** Full-string check: one DLT hash token. */
-export const DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX = /^\{\#[^#]*\#\}$/;
-/** Full-string with capture group: inner name for `{{ name }}`-style tokens (whitespace-tolerant). */
-export const MUSTACHE_TOKEN_INNER_NAME_REGEX = /^\{\{\s*([^}]+?)\s*\}\}$/;
-/** Full-string with capture group: inner name/body for `{# name #}` DLT tokens (whitespace-tolerant). */
-export const DLT_HASH_TOKEN_INNER_NAME_REGEX = /^\{#\s*(.*?)\s*#\}$/;
-/** Global with capture group: inner name inside `{{name}}`. */
-export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
-/** Global with capture group: inner body inside `{#body#}`. */
-export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
-
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',
   'zh-cn': 'zh',
@@ -217,14 +199,3 @@ export const LOGOUT_FAILURE = 'cap/LOGOUT_FAILURE';
 export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
 
 export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
-
-// --- RCS SMS fallback API contract (shared across modules: campaigns, journey, etc.) ---
-
-/** Keys on `messageContent.*.smsFallBackContent` sent to the API: only `message` + `templateConfigs`.
- *  `rcsSmsFallbackVarMapped` is editor-only — merged into `message` at normalize, not sent on the wire. */
-export const RCS_API_SMS_FALLBACK_KEYS = Object.freeze({
-  MESSAGE: 'message',
-  TEMPLATE_CONFIGS: 'templateConfigs',
-  RCS_SMS_FALLBACK_VAR_MAPPED: 'rcsSmsFallbackVarMapped',
-});
-

package/entry.js

@@ -1,2 +1,68 @@
 import { publicPath } from './config/path';
-__webpack_public_path__ = ((new URL(((document || {}).currentScript || {}).src || window.location)).origin) + `${publicPath}/`;
+
+function normalizeTrailingSlash(url) {
+  if (!url) return url;
+  return url.endsWith('/') ? url : `${url}/`;
+}
+
+function getCreativesRemoteEntryScript() {
+  if (typeof document === 'undefined') return null;
+  const all = Array.from(
+    document.querySelectorAll('script[src*="remoteEntry"]'),
+  );
+  const match =
+    all.find(s => /cap-creatives-ui/i.test(s.src)) || all[all.length - 1];
+  return match;
+}
+
+function getRemoteEntryOrigin() {
+  const el = getCreativesRemoteEntryScript();
+  if (!el || !el.src) return '';
+  try {
+    return new URL(el.src, window.location.href).origin;
+  } catch (e) {
+    return '';
+  }
+}
+
+function getRemoteEntryBaseUrl() {
+  const el = getCreativesRemoteEntryScript();
+  if (!el || !el.src) return '';
+  try {
+    const u = new URL(el.src, window.location.href);
+    const dir = u.pathname.replace(/\/[^/]+\.js(\?.*)?$/, '/');
+    return normalizeTrailingSlash(`${u.origin}${dir}`);
+  } catch (e) {
+    return '';
+  }
+}
+
+function resolveWebpackPublicPath() {
+  const envPath = process.env.MFE_PUBLIC_PATH;
+
+  if (envPath && envPath.length > 0) {
+    if (/^https?:\/\//i.test(envPath)) {
+      return normalizeTrailingSlash(envPath);
+    }
+    const origin = getRemoteEntryOrigin();
+    if (origin) {
+      const p = envPath.startsWith('/') ? envPath : `/${envPath}`;
+      return normalizeTrailingSlash(new URL(p, origin).href);
+    }
+    return normalizeTrailingSlash(
+      `${window.location.origin}${envPath.startsWith('/') ? '' : '/'}${envPath}`,
+    );
+  }
+
+  const fromRemote = getRemoteEntryBaseUrl();
+  if (fromRemote) {
+    return fromRemote;
+  }
+
+  const origin = new URL(
+    ((document || {}).currentScript || {}).src || window.location,
+  ).origin;
+  return `${origin}${publicPath}/`;
+}
+
+__webpack_public_path__ = resolveWebpackPublicPath();

package/global-styles.js

@@ -51,7 +51,7 @@ export default createGlobalStyle`
     }
 
     .slidebox-header-icon-right {
-      .title-desc-container:not(:has(.whatsapp-rcs-slidebox-template-name)):not(:has(.cap-header-v2-description)) {
+      .title-desc-container:not(:has(.whatsapp-rcs-slidebox-template-name)) {
         display: flex;
         align-items: center;
       }

package/mfe-exposed-components.js

@@ -2,7 +2,5 @@
 // Contents of this file are used in webpack config's ModuleFederationPlugin.
 //
 module.exports = {
-    // which exposes
-    // ADD MFE COMPONENT YOU WANT TO EXPORT example:
-    // './Home': './app/components/pages/Home',
-  };
+  './AppRoot': './app/AppRoot',
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.15-alpha.3",
+  "version": "9.0.16-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,7 +16,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "7.2.1",
-    "@capillarytech/cap-ui-utils": "3.0.4",
+    "@capillarytech/cap-ui-utils": "3.0.20",
     "@capillarytech/vulcan-react-sdk": "3.0.1",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/lang-css": "^6.3.1",

package/services/api.js

@@ -679,7 +679,7 @@ export const getSupportVideosConfig = () => {
 };
 
 export const getNavigationConfigApi = async () => {
-  const url = `${ARYA_ENDPOINT}/navigations`;
+  const url = `${ARYA_ENDPOINT}/mfe_navigations`;
   return request(url, getAPICallObject('GET'));
 };
 

package/services/tests/api.test.js

@@ -89,26 +89,21 @@ describe('uploadFile -- whatsapp image upload', () => {
 
   it('Uploads the file with the original filename when encodeURIComponent fails', async () => {
     // Mocking the encodeURIComponent function to throw an error
-    const originalEncodeURIComponent = global.encodeURIComponent;
     global.encodeURIComponent = jest.fn(() => { throw new Error('encodeURIComponent error'); });
     const blob = new Blob([''], { type: 'image/jpeg' });
     const file = new File([blob], '@%test.jpeg', { type: 'image/jpeg' });
-    try {
-      expect(
-          uploadFile({
-            file,
-            assetType: 'image',
-            fileParams: {
-              width: 275,
-              height: 183,
-              error: false,
-            },
-            whatsappParams: {},
-          }),
-        ).toEqual(Promise.resolve());
-    } finally {
-      global.encodeURIComponent = originalEncodeURIComponent;
-    }
+    expect(
+        uploadFile({
+          file,
+          assetType: 'image',
+          fileParams: {
+            width: 275,
+            height: 183,
+            error: false,
+          },
+          whatsappParams: {},
+        }),
+      ).toEqual(Promise.resolve());
   });
 });
 
@@ -1042,26 +1037,16 @@ describe('getMembersLookup', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 
-  it('should call fetch with correct URL encoding and GET method', async () => {
+  it('should call fetch with correct URL encoding and GET method', () => {
     global.fetch.mockClear();
-    await getMembersLookup('email', 'user+test@example.com');
+    getMembersLookup('email', 'user+test@example.com');
     expect(global.fetch).toHaveBeenCalled();
-
-    // Find the first call that uses both the members endpoint and proper encoding
-    const call = global.fetch.mock.calls.find(
-      ([url]) =>
-        url &&
-        url.includes('members') &&
-        url.includes('identifierType=email') &&
-        url.includes('identifierValue=user%2Btest%40example.com')
-    );
-    expect(call).toBeDefined();
-
-    // Check URL structure
-    const [url, options] = call;
-    expect(url).toContain('identifierType=email');
-    expect(url).toContain('identifierValue=user%2Btest%40example.com');
-    expect((options && options.method) || 'GET').toBe('GET');
+    const calls = global.fetch.mock.calls;
+    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
+    expect(anyMembersCall).toBeDefined();
+    expect(anyMembersCall[0]).toContain('identifierType=');
+    expect(anyMembersCall[0]).toContain('identifierValue=');
+    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
   });
 });
 

package/styles/containers/layout/_layoutPage.scss

@@ -79,7 +79,6 @@
     flex: 1;
     height: calc(100vh - 50px);
     overflow: auto;
-    padding: 8px 16px 0;
     color: #333333;
 }
 
@@ -154,16 +153,19 @@
 }
 
 .cap-loader-box {
-  position: fixed;
+  position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-  background: rgb(255,255,255);
-  text-align: center;
+  min-height: calc(100vh - 48px);
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .loader-image {
     width: 80px;
-    margin-top: 20%;
+    height: auto;
   }
 }
 

package/utils/commonUtils.js

@@ -539,22 +539,4 @@ export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
 export const formatPhoneNumber = (phone) => {
   if (!phone) return '';
   return String(phone).replace(/[^\d]/g, '');
-};
-
-/**
- * TRAI sender IDs on persisted RCS SMS fallback: may live on the merged object, under
- * `templateConfigs`, or (legacy) `templateConfigs.header`. Same resolution order as
- * `createPayload` in `Rcs/index.js`.
- */
-export function extractRegisteredSenderIdsFromSmsFallbackRecord(record) {
-  if (!record || typeof record !== 'object') return null;
-  const tc = record.templateConfigs && typeof record.templateConfigs === 'object'
-    ? record.templateConfigs
-    : {};
-  const candidates = [record.registeredSenderIds, tc.registeredSenderIds, tc.header];
-  for (let i = 0; i < candidates.length; i += 1) {
-    const a = candidates[i];
-    if (Array.isArray(a) && a.length > 0) return a;
-  }
-  return null;
-}
+};

package/utils/getDataLayer.js

@@ -0,0 +1,15 @@
+import { isMFEMode } from './mfeDetect';
+import appConfig from '../../app-config';
+
+const getDataLayerName = () => {
+  if (isMFEMode()) {
+    return `dataLayer_${appConfig.appName.replace(/-/g, '_')}`;
+  }
+  return 'dataLayer';
+};
+
+export const getDataLayer = () => {
+  const name = getDataLayerName();
+  window[name] = window[name] || [];
+  return window[name];
+};

package/utils/gtmTrackers/gtmEvents/creativeDetails.js

@@ -1,4 +1,5 @@
 import { CREATIVES } from "../../../v2Containers/App/constants";
+import { getDataLayer } from '../../getDataLayer';
 
 const creativeDetails = ({
   name,
@@ -23,7 +24,7 @@ const creativeDetails = ({
     videoAdded,
     stickersAdded
   };
-  window.dataLayer.push({
+  getDataLayer().push({
     creativeDetails: parsedObj,
     event: 'creativeDetails',
   });

package/utils/mfeDetect.js

@@ -0,0 +1 @@
+export const isMFEMode = () => Boolean(window.MFE_HOST);

package/v2Components/CapActionButton/constants.js

@@ -32,13 +32,6 @@ export const CTA_OPTIONS = [
 ];
 
 export const invalidVarRegex = /{{(.*?)}}/g;
-
-/** URL CTA subtype (Figma: URL type dropdown). */
-export const RCS_CTA_URL_TYPE = {
-  STATIC: 'STATIC',
-  DYNAMIC: 'DYNAMIC',
-};
-
-export const BTN_MAX_LENGTH = 20;
+export const BTN_MAX_LENGTH = 25;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;