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

package/package.json

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

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/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/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/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/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -14,25 +14,14 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import {
-  ANDROID,
-  IOS,
-  ANDROID_DEVICE_NAME,
-  IOS_DEVICE_NAME,
-  VIBER_ACCOUNT_NAME,
-  MEDIA_TYPE_CAROUSEL,
-} from '../constants';
+import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
-import ViberCarouselPreviewCards from './ViberCarouselPreviewCards';
 
 // Import device mockup images (same as SMS)
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
-const getTrimmedText = (value = '') => (value ?? '').trim();
-const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
-
 const ViberPreviewContent = ({
   content,
   device,
@@ -54,35 +43,7 @@ const ViberPreviewContent = ({
     imageURL = '',
     videoParams = {},
     buttonText = '',
-    type = '',
-    cards = [],
-    showCarouselEditorPreview = false,
   } = viberContent;
-  const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
-
-  const cardHasMeaningfulContent = (card) => {
-    if (!card || typeof card !== 'object') return false;
-    return (
-      hasTrimmedText(card?.text) ||
-      hasTrimmedText(card?.mediaUrl) ||
-      (card.buttons ?? []).some(button => hasTrimmedText(button?.title))
-    );
-  };
-
-  const hasMeaningfulCarousel =
-    hasCarouselContent &&
-    Array.isArray(cards) &&
-    cards.length > 0 &&
-    cards.some(cardHasMeaningfulContent);
-
-  const showCarouselInPreview =
-    hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
-
-  const previewCarouselCards =
-    hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
-
-  const trimmedMessageContent = getTrimmedText(messageContent);
-  const trimmedButtonText = getTrimmedText(buttonText);
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -138,15 +99,8 @@ const ViberPreviewContent = ({
     );
   }
 
-  // Check if there's any content to display (whitespace-only strings do not count)
-  const hasContent = Boolean(
-    trimmedMessageContent
-    || hasTrimmedText(imageURL)
-    || videoParams?.viberVideoSrc
-    || trimmedButtonText
-    || hasMeaningfulCarousel
-    || (hasCarouselContent && showCarouselEditorPreview)
-  );
+  // Check if there's any content to display
+  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
 
   // Render normal Viber preview
   return (
@@ -171,34 +125,23 @@ const ViberPreviewContent = ({
 
         {/* Viber Message Container */}
         {hasContent && (
-          <CapRow className={`viber-message-container ${showCarouselInPreview ? 'viber-message-container-carousel' : ''} ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
+          <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
-            <CapRow
-              type="flex"
-              align="middle"
-              fullWidth={showCarouselInPreview}
-              className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}
-            >
+            <CapRow type="flex" align="middle" className="msg-container viber-preview">
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
-              {!hasCarouselContent && (
-                <CapRow type="flex" className="viber-account-icon">
-                  {accountIcon}
-                </CapRow>
-              )}
+              <CapRow type='flex' className="viber-account-icon">
+                {accountIcon}
+              </CapRow>
 
               {/* Message Bubble (from TemplatePreview line 1161-1223) */}
-              <CapRow
-                useLegacy
-                fullWidth={showCarouselInPreview}
-                className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}
-              >
+              <CapRow useLegacy className="message-pop align-left viber-message-pop">
                 {/* Text Viber preview */}
-                {trimmedMessageContent && !hasCarouselContent && (
+                {messageContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {hasTrimmedText(imageURL) && (
+                {imageURL && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -228,42 +171,16 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {trimmedButtonText && (
+                {buttonText && (
                   <CapLabel className="viber-button-base">
                     <p className="viber-button-card-text">
                       {buttonText}
                     </p>
                   </CapLabel>
                 )}
-                {/* Carousel Viber preview */}
-                {showCarouselInPreview && (
-                  <CapRow type="flex-column" fullWidth className="viber-carousel-preview">
-                    <CapRow type="flex-column" className="viber-carousel-message-pop">
-                      {trimmedMessageContent ? (
-                        <CapLabel
-                          type="label15"
-                          className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
-                        >
-                          {messageContent}
-                        </CapLabel>
-                      ) : (
-                        <CapRow className="viber-carousel-message-box-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-message-timestamp">
-                        {timestamp}
-                      </CapLabel>
-                    </CapRow>
-
-                    <CapRow type="flex-column" fullWidth className="viber-carousel-cards-pop">
-                      <ViberCarouselPreviewCards cards={previewCarouselCards} />
-                    </CapRow>
-                  </CapRow>
-                )}
-                {!showCarouselInPreview && (
-                  <CapLabel type="label1" className="viber-timestamp">
-                    {timestamp}
-                  </CapLabel>
-                )}
+                <CapLabel type="label1" className="viber-timestamp">
+                  {timestamp}
+                </CapLabel>
                 <CapRow useLegacy className="empty-placeholder" />
               </CapRow>
 
@@ -297,16 +214,6 @@ ViberPreviewContent.propTypes = {
         viberVideoPreviewImg: PropTypes.string,
       }),
       buttonText: PropTypes.string,
-      type: PropTypes.string,
-      cards: PropTypes.arrayOf(PropTypes.shape({
-        text: PropTypes.string,
-        mediaUrl: PropTypes.string,
-        buttons: PropTypes.arrayOf(PropTypes.shape({
-          title: PropTypes.string,
-          action: PropTypes.string,
-        })),
-      })),
-      showCarouselEditorPreview: PropTypes.bool,
     }),
   }),
   device: PropTypes.oneOf([ANDROID, IOS]),

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -1,5 +1,4 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
-@import './_viberCarouselPreviewCards.scss';
 
 /**
  * UnifiedPreview Styles
@@ -783,13 +782,9 @@
 
     .viber-content-overlay {
       top: 3.2rem;
-      overflow: hidden;
-
-      .sms-navigation-bar.viber-navigation-bar {
-        width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
+      .viber-navigation-bar {
         margin-left: $CAP_SPACE_06;
         margin-right: $CAP_SPACE_08;
-        box-sizing: border-box;
       }
     }
 
@@ -2412,21 +2407,12 @@
   // Body content follows TemplatePreview Viber structure
   .sms-content-overlay {
     &.viber-preview {
-      overflow: hidden;
-
       // Viber message container
       .viber-message-container {
         position: relative;
         flex: 1;
         display: flex;
         flex-direction: column;
-        overflow-x: hidden;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        min-width: 0;
-        max-width: 100%;
-        box-sizing: border-box;
-        width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
         padding: 0 $CAP_SPACE_16;
         background-color: #ffffff;
         margin-left: $CAP_SPACE_06;
@@ -2434,20 +2420,6 @@
         border-bottom-left-radius: 2.6rem;
         border-bottom-right-radius: 2.6rem;
 
-        &.viber-message-container-carousel {
-          padding-left: $CAP_SPACE_08;
-          padding-right: $CAP_SPACE_08;
-          width: calc(100% - #{$CAP_SPACE_04} - #{$CAP_SPACE_04});
-          margin-left: $CAP_SPACE_04;
-          margin-right: $CAP_SPACE_04;
-
-          > .ant-row,
-          .ant-row.msg-container.viber-preview-carousel {
-            margin-left: 0;
-            margin-right: 0;
-          }
-        }
-
         // Brand name display (from TemplatePreview line 1136)
         .viber-brand-name {
           position: absolute;
@@ -2469,16 +2441,6 @@
           flex-direction: row;
           align-items: start;
 
-          &.viber-preview-carousel {
-            width: 100%;
-            max-width: 100%;
-            margin-left: 0;
-            margin-right: 0;
-            max-height: 100%;
-            min-width: 0;
-            box-sizing: border-box;
-          }
-
           // Account icon (from TemplatePreview line 1146-1160)
           .viber-account-icon {
             width: $CAP_SPACE_20;
@@ -2503,22 +2465,6 @@
             border-radius: $CAP_SPACE_04;
             padding: $CAP_SPACE_04;
 
-            &.viber-message-pop-carousel {
-              width: 100%;
-              max-width: 100%;
-              min-width: 0;
-              left: 0;
-              margin-top: 0;
-              padding: 0;
-              background: transparent;
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              gap: $CAP_SPACE_06;
-              overflow: hidden;
-              box-sizing: border-box;
-            }
-
             // Text Viber preview (from TemplatePreview line 1166-1174)
             .viber-message-text {
               margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
@@ -2590,85 +2536,6 @@
               }
             }
 
-            .viber-carousel-preview {
-              width: 100%;
-              max-width: 100%;
-              min-width: 0;
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              gap: $CAP_SPACE_06;
-              overflow: hidden;
-              box-sizing: border-box;
-            }
-
-            .viber-carousel-message-pop,
-            .viber-carousel-cards-pop {
-              width: 100%;
-              max-width: 100%;
-              min-width: 0;
-              background: $CAP_G08;
-              border-radius: $CAP_SPACE_06;
-              padding: $CAP_SPACE_08;
-              box-sizing: border-box;
-            }
-
-            .viber-carousel-message-pop {
-              margin-top: 0;
-              width: 85%;
-              border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
-              display: flex;
-              flex-direction: column;
-              overflow: hidden;
-            }
-
-            .viber-carousel-cards-pop {
-              margin-top: 0;
-              width: 100%;
-              background: transparent;
-              border: none;
-              border-radius: 0;
-              padding: 0;
-              overflow: hidden;
-            }
-
-            .viber-carousel-message-box {
-              width: 100%;
-              min-height: 2.25rem;
-              height: auto;
-              border-radius: $CAP_SPACE_04;
-              background: transparent;
-              padding: 0 $CAP_SPACE_08;
-              display: flex;
-              align-items: center;
-            }
-
-            .viber-carousel-message-box-text {
-              color: $CAP_G01;
-              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
-              white-space: normal;
-              word-break: break-word;
-              overflow-wrap: break-word;
-              overflow: hidden;
-              max-width: 100%;
-              box-sizing: border-box;
-            }
-
-            .viber-carousel-message-box-placeholder {
-              width: 100%;
-              height: 0.875rem;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_G07;
-            }
-
-            .viber-carousel-message-timestamp,
-            .viber-carousel-cards-timestamp {
-              display: block;
-              text-align: right;
-              margin-top: $CAP_SPACE_06;
-              color: $CAP_G04;
-            }
-
             .empty-placeholder {
               height: $CAP_SPACE_08;
             }
@@ -2682,11 +2549,6 @@
       .viber-message-container-ios {
         margin-left: 1rem;
         margin-right: 1rem;
-
-        &.viber-message-container-carousel {
-          margin-left: $CAP_SPACE_04;
-          margin-right: $CAP_SPACE_04;
-        }
       }
     }
   }