@capillarytech/creatives-library 9.0.36 → 9.0.37-alpha.0

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/translations/en.json

@@ -63,8 +63,8 @@
   "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
   "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
   "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+  "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
   "creatives.components.CapTagList.Cancel": "Cancel",
   "creatives.components.CapTagList.Ok": "Ok",

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/utils/mfeFirstPaintReady.js

@@ -0,0 +1,29 @@
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import appConfig from '../app-config';
+import { isMFEMode } from './mfeDetect';
+
+// Routes whose containers emit the data-settled 'lcp' themselves —
+// the first-paint emit must NOT fire for these.
+// TemplatesV2 renders at relative '/v2' and '/v2/loyalty' (routes.js); in MFE mode
+// the shared history is rebased on publicPath, so the real browser pathname carries
+// the '/creatives/ui' prefix. Match the prefixed paths — this util reads
+// window.location.pathname, not the rebased router location. (v1 standalone is
+// non-MFE and irrelevant here.)
+const DATA_LANDING_MATCHERS = ['/creatives/ui/v2', '/creatives/ui/v2/loyalty'];
+
+export const isDataLandingPath = (pathname) => {
+  const p = (pathname || '').replace(/\/+$/, '') || '/';
+  return DATA_LANDING_MATCHERS.some((m) => (m instanceof RegExp ? m.test(p) : m === p));
+};
+
+export const emitFirstPaintReadyIfNotDataLanding = () => {
+  if (!isMFEMode() || isDataLandingPath(window.location.pathname)) return;
+  requestAnimationFrame(() => {
+    MFEEventBus.emit('mfe:segment', {
+      action: 'stop',
+      appId: appConfig.appName,
+      type: 'lcp',
+      timestamp: performance.now(),
+    });
+  });
+};

package/utils/mfeHistory.js

@@ -0,0 +1,62 @@
+/**
+ * Re-base the host's shared root history for this MFE remote.
+ *
+ * The MFE host owns ONE root history instance and hands it to every remote, so host + all
+ * remotes stay perfectly in sync: a push on the shared instance notifies every mounted
+ * router directly (no popstate hack, no drift on fast remote switching).
+ *
+ * This remote's routes / <Link>s / history.push calls are written RELATIVE to its serving
+ * prefix. This adapter presents a basename'd VIEW of the shared history — stripping the
+ * prefix when the router reads the location, and prepending it when the router navigates —
+ * while delegating all actual navigation to the shared instance. Net effect: relative
+ * routing keeps working unchanged, and navigation still flows through the single shared
+ * history. Standalone (no host history) is unaffected; the remote keeps creating its own.
+ */
+const addBase = (base, to) => {
+  if (typeof to === 'string') {
+    if (!to.startsWith('/')) return to; // already relative to current location
+    return to === '/' ? base : `${base}${to}`;
+  }
+  if (to && typeof to === 'object') {
+    return { ...to, pathname: addBase(base, to.pathname || '/') };
+  }
+  return to;
+};
+
+const stripBase = (base, pathname) => {
+  if (!pathname) return pathname;
+  if (pathname === base) return '/';
+  if (pathname.startsWith(`${base}/`)) return pathname.slice(base.length);
+  return pathname;
+};
+
+export default function rebaseHistory(history, rawBase) {
+  const base = String(rawBase || '').replace(/\/+$/, ''); // normalise: no trailing slash
+  if (!base) return history;
+  const view = loc => ({ ...loc, pathname: stripBase(base, loc.pathname) });
+  return {
+    get length() {
+      return history.length;
+    },
+    get action() {
+      return history.action;
+    },
+    get location() {
+      return view(history.location);
+    },
+    push: (to, state) => history.push(addBase(base, to), state),
+    replace: (to, state) => history.replace(addBase(base, to), state),
+    go: n => history.go(n),
+    goBack: () => history.goBack(),
+    goForward: () => history.goForward(),
+    block: (...args) => history.block(...args),
+    listen: listener =>
+      history.listen((loc, action) => listener(view(loc), action)),
+    createHref: to =>
+      history.createHref(
+        typeof to === 'string'
+          ? addBase(base, to)
+          : { ...to, pathname: addBase(base, (to && to.pathname) || '/') },
+      ),
+  };
+}

package/utils/permissions.js

@@ -0,0 +1,59 @@
+import {
+  CREATIVE_VIEW,
+  CREATIVE_CREATE,
+  CREATIVE_EDIT,
+  CREATIVE_DELETE,
+  CREATIVES_UI_VIEW,
+} from '../v2Containers/App/constants';
+
+export const PERMISSIONS = {
+  CREATIVE_VIEW,
+  CREATIVE_CREATE,
+  CREATIVE_EDIT,
+  CREATIVE_DELETE,
+};
+
+export const PERMISSION_IDS = {
+  [CREATIVE_VIEW]: 1508,
+  [CREATIVE_CREATE]: 1509,
+  [CREATIVE_EDIT]: 1510,
+  [CREATIVE_DELETE]: 1511,
+};
+
+/**
+ * Mode-aware access resolver for the tri-modal Creatives app.
+ * Standalone: the `cap` slice is passed as a prop by the connected container.
+ * Library / MFE: the host passes a `cap` (or legacy `Global`) prop.
+ * Reads the prop first, then falls back — mirrors TemplatesV2's existing
+ * `cap.user || Global.user` resolution.
+ */
+export const getUserAccess = (props = {}) => {
+  const { cap = {}, Global = {} } = props;
+  const user = (cap && cap.user) || (Global && Global.user) || {};
+  const isLoaded = !!(
+    user &&
+    typeof user === 'object' &&
+    Object.keys(user).length > 0
+  );
+  return {
+    accessiblePermissions: (isLoaded && user.accessiblePermissions) || [],
+    isLoaded,
+  };
+};
+
+export const hasPermission = (userAccess, code) => {
+  if (!userAccess) return false;
+  const granted = userAccess.accessiblePermissions || [];
+  const id = PERMISSION_IDS[code];
+  return (
+    granted.includes(code) ||
+    granted.includes(id) ||
+    granted.includes(String(id))
+  );
+};
+
+// Zero-impact view gate: honour the new CREATIVE_VIEW OR the legacy CREATIVES_UI_VIEW.
+export const canViewCreatives = userAccess =>
+  hasPermission(userAccess, CREATIVE_VIEW) ||
+  (userAccess &&
+    (userAccess.accessiblePermissions || []).includes(CREATIVES_UI_VIEW));

package/utils/rcsPayloadUtils.js

@@ -59,9 +59,12 @@ export const normalizeRcsMessageContentForApi = messageContentItem => {
     rcsCardPayloadOnly.cardContent.forEach(card => {
       if (Array.isArray(card?.suggestions)) {
         card.suggestions.forEach(suggestion => {
-          // isSaved is UI-only editor state: campaigns' send-for-approval API rejects it, and it
-          // isn't part of the persisted payload shape.
+          // isSaved and urlType are UI-only editor state: campaigns' send-for-approval API
+          // rejects them, and they aren't part of the persisted payload shape. The dynamic tag
+          // (if any) already lives inline in `url` (e.g. "https://x.com{{first_name}}") — no
+          // separate dynamicUrlPayload field is sent for RCS.
           delete suggestion?.isSaved;
+          delete suggestion?.urlType;
         });
       }
     });

package/utils/tests/permissions.test.js

@@ -0,0 +1,116 @@
+/**
+ * Test suite for RBAC permission helpers (app/utils/permissions.js).
+ * Covers getUserAccess (loaded/unloaded, cap vs Global, missing perms),
+ * hasPermission (null guard, code/id/string-id match, empty), and
+ * canViewCreatives (new perm, legacy perm, null guard).
+ */
+import {
+  PERMISSIONS,
+  PERMISSION_IDS,
+  getUserAccess,
+  hasPermission,
+  canViewCreatives,
+} from '../permissions';
+import {
+  CREATIVE_VIEW,
+  CREATIVE_CREATE,
+  CREATIVE_EDIT,
+  CREATIVE_DELETE,
+  CREATIVES_UI_VIEW,
+} from '../../v2Containers/App/constants';
+
+describe('permissions - exported maps', () => {
+  it('exposes the four creative permission codes', () => {
+    expect(PERMISSIONS).toEqual({
+      CREATIVE_VIEW,
+      CREATIVE_CREATE,
+      CREATIVE_EDIT,
+      CREATIVE_DELETE,
+    });
+  });
+
+  it('maps each permission code to its id', () => {
+    expect(PERMISSION_IDS[CREATIVE_VIEW]).toBe(1508);
+    expect(PERMISSION_IDS[CREATIVE_CREATE]).toBe(1509);
+    expect(PERMISSION_IDS[CREATIVE_EDIT]).toBe(1510);
+    expect(PERMISSION_IDS[CREATIVE_DELETE]).toBe(1511);
+  });
+});
+
+describe('getUserAccess', () => {
+  it('returns unloaded access with empty perms when no props are passed', () => {
+    expect(getUserAccess()).toEqual({ accessiblePermissions: [], isLoaded: false });
+  });
+
+  it('returns unloaded access for an empty props object', () => {
+    expect(getUserAccess({})).toEqual({ accessiblePermissions: [], isLoaded: false });
+  });
+
+  it('reads accessiblePermissions from cap.user when loaded', () => {
+    const result = getUserAccess({ cap: { user: { accessiblePermissions: [1508, 1509] } } });
+    expect(result).toEqual({ accessiblePermissions: [1508, 1509], isLoaded: true });
+  });
+
+  it('falls back to Global.user when cap.user is absent', () => {
+    const result = getUserAccess({ Global: { user: { accessiblePermissions: ['CREATIVE_VIEW'] } } });
+    expect(result).toEqual({ accessiblePermissions: ['CREATIVE_VIEW'], isLoaded: true });
+  });
+
+  it('is not loaded when the user object is empty', () => {
+    expect(getUserAccess({ cap: { user: {} } })).toEqual({ accessiblePermissions: [], isLoaded: false });
+  });
+
+  it('defaults accessiblePermissions to [] when a loaded user has none', () => {
+    const result = getUserAccess({ cap: { user: { id: 42 } } });
+    expect(result).toEqual({ accessiblePermissions: [], isLoaded: true });
+  });
+});
+
+describe('hasPermission', () => {
+  it('returns false when userAccess is null or undefined', () => {
+    expect(hasPermission(null, CREATIVE_VIEW)).toBe(false);
+    expect(hasPermission(undefined, CREATIVE_VIEW)).toBe(false);
+  });
+
+  it('returns false when accessiblePermissions is missing', () => {
+    expect(hasPermission({}, CREATIVE_VIEW)).toBe(false);
+  });
+
+  it('matches by permission code', () => {
+    expect(hasPermission({ accessiblePermissions: [CREATIVE_CREATE] }, CREATIVE_CREATE)).toBe(true);
+  });
+
+  it('matches by numeric permission id', () => {
+    expect(hasPermission({ accessiblePermissions: [1509] }, CREATIVE_CREATE)).toBe(true);
+  });
+
+  it('matches by string permission id', () => {
+    expect(hasPermission({ accessiblePermissions: ['1509'] }, CREATIVE_CREATE)).toBe(true);
+  });
+
+  it('returns false when the permission is not granted', () => {
+    expect(hasPermission({ accessiblePermissions: [CREATIVE_VIEW] }, CREATIVE_DELETE)).toBe(false);
+    expect(hasPermission({ accessiblePermissions: [] }, CREATIVE_VIEW)).toBe(false);
+  });
+});
+
+describe('canViewCreatives', () => {
+  it('allows when the new CREATIVE_VIEW permission is present', () => {
+    expect(canViewCreatives({ accessiblePermissions: [CREATIVE_VIEW] })).toBe(true);
+    expect(canViewCreatives({ accessiblePermissions: [1508] })).toBe(true);
+  });
+
+  it('allows via the legacy CREATIVES_UI_VIEW permission', () => {
+    expect(canViewCreatives({ accessiblePermissions: [CREATIVES_UI_VIEW] })).toBe(true);
+  });
+
+  it('returns a falsy value when userAccess is null', () => {
+    // short-circuits on `userAccess &&`, so returns null (falsy) rather than false
+    expect(canViewCreatives(null)).toBeFalsy();
+  });
+
+  it('returns false when neither view permission is present', () => {
+    expect(canViewCreatives({ accessiblePermissions: [CREATIVE_CREATE] })).toBe(false);
+    expect(canViewCreatives({})).toBe(false);
+  });
+});

package/utils/tests/rcsPayloadUtils.test.js

@@ -209,7 +209,7 @@ describe('normalizeRcsMessageContentForApi', () => {
     expect(item.rcsContent.cardContent).toEqual([{ title: 'Card' }]);
   });
 
-  it('strips isSaved from each suggestion in cardContent', () => {
+  it('strips isSaved and urlType from each suggestion in cardContent', () => {
     const item = {
       rcsContent: {
         cardContent: [
@@ -217,7 +217,9 @@ describe('normalizeRcsMessageContentForApi', () => {
             title: 'Card 1',
             suggestions: [
               { type: 'QUICK_REPLY', text: 'Yes', isSaved: true },
-              { type: 'CTA', text: 'Go', url: 'https://example.com', isSaved: false },
+              {
+                type: 'CTA', text: 'Go', url: 'https://example.com', urlType: 'STATIC', isSaved: false,
+              },
             ],
           },
         ],
@@ -230,6 +232,56 @@ describe('normalizeRcsMessageContentForApi', () => {
     ]);
   });
 
+  it('keeps type "CTA" and the inline tag in url, but drops urlType, for a dynamic-URL suggestion', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [
+          {
+            title: 'Card 1',
+            suggestions: [
+              {
+                type: 'CTA',
+                text: 'Visit here',
+                url: 'https://example.com/{{first_name}}',
+                urlType: 'DYNAMIC',
+                isSaved: true,
+              },
+            ],
+          },
+        ],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
+      {
+        type: 'CTA',
+        text: 'Visit here',
+        url: 'https://example.com/{{first_name}}',
+      },
+    ]);
+  });
+
+  it('leaves phone number and quick reply suggestions untouched by the urlType stripping', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [
+          {
+            title: 'Card 1',
+            suggestions: [
+              {
+                type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678', isSaved: true,
+              },
+            ],
+          },
+        ],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
+      { type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678' },
+    ]);
+  });
+
   it('handles cardContent with no suggestions gracefully', () => {
     const item = {
       rcsContent: {

package/v2Components/AccessForbidden/_accessForbidden.scss

@@ -0,0 +1,14 @@
+// Access-denied screen: rbac-lock icon + heading + subtext (matches the shared
+// "no access" screen used across Loyalty+ / Org Settings).
+.no-access-icon {
+  font-size: 48px;
+  color: #8c8c8c;
+}
+.no-access-title {
+  margin-top: 16px;
+}
+.no-access-text {
+  margin-top: 8px;
+  color: #6b778c;
+  max-width: 420px;
+}

package/v2Components/AccessForbidden/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { CapRow, CapHeading } from '@capillarytech/cap-ui-library';
+import { CapRow, CapHeading, CapIcon } from '@capillarytech/cap-ui-library';
 import messages from './messages';
+import './_accessForbidden.scss';
 
 const AccessForbidden = () => (
   <CapRow type='flex' vertical justify='center' align='middle' className="margin-t-32 text-align-center">
-    <CapHeading type="h2">
+    <CapIcon type="rbac-lock" className="no-access-icon" />
+    <CapHeading type="h3" className="no-access-title">
       <FormattedMessage {...messages.forbiddenHeader} />
     </CapHeading>
-    <CapHeading type="h3" className="margin-t-24">
+    <CapHeading type="h6" className="no-access-text">
       <FormattedMessage {...messages.forbiddenDesc} />
     </CapHeading>
   </CapRow>

package/v2Components/AccessForbidden/messages.js

@@ -5,10 +5,11 @@ const prefix = 'creatives.components.AccessForbidden';
 export default defineMessages({
   forbiddenHeader: {
     id: `${prefix}.forbiddenHeader`,
-    defaultMessage: 'Access Forbidden',
+    defaultMessage: "You don't have permission to view this page.",
   },
   forbiddenDesc: {
     id: `${prefix}.forbiddenDesc`,
-    defaultMessage: 'This page access has not been provided to you.',
+    defaultMessage:
+      'Please contact your organisation administrator to request access.',
   },
 });

package/v2Components/CapActionButton/constants.js

@@ -43,6 +43,7 @@ export const RCS_CTA_URL_TYPE = {
 export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;
+export const DYNAMIC_URL_SUFFIX = '{{1}}';
 
 export const CTA_TYPE_RADIO_OPTIONS = [
   { label: <FormattedMessage {...messages.ctaPhoneNo} />, value: RCS_BUTTON_TYPES.PHONE_NUMBER },