@capillarytech/creatives-library 9.0.35 → 9.0.36-alpha.1

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js

@@ -200,6 +200,370 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
+
+    it('should not render button when buttonText has only whitespace', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            messageContent: 'Message',
+            buttonText: '   ',
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-button-base')).toBeFalsy();
+    });
+  });
+
+  describe('Carousel Content', () => {
+    it('should render no content when carousel is selected but cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [
+                  { title: '', action: '' },
+                ],
+              },
+              {
+                text: '   ',
+                mediaUrl: '   ',
+                buttons: [
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
+
+    it('should render carousel cards when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: 'Button 1', action: 'https://example.com/1' },
+                ],
+              },
+              {
+                text: 'Card 2 text',
+                mediaUrl: 'https://image.url/card2.jpg',
+                buttons: [
+                  { title: 'Button 2', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Card 1 text')).toBeTruthy();
+      expect(screen.getByText('Card 2 text')).toBeTruthy();
+      expect(screen.getByText('Button 1')).toBeTruthy();
+      expect(screen.getByText('Button 2')).toBeTruthy();
+    });
+
+    it('should not render empty carousel button placeholder', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: '', action: 'https://example.com/1' },
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview-button')).toBeNull();
+    });
+
+    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByText('No content available')).toBeNull();
+      expect(container.querySelector('.viber-carousel-preview-scroll')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
+    });
+
+    it('should render carousel message text in message box when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            messageContent: 'Carousel intro copy',
+            cards: [
+              {
+                text: 'Card text',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [{ title: 'Go', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
+      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
+    });
+
+    it('should hide account icon when carousel is shown', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Carousel card line',
+                mediaUrl: '',
+                buttons: [{ title: 'Open link', action: 'https://x.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-account-icon')).toBeNull();
+    });
+
+    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Only text',
+                mediaUrl: '   ',
+                buttons: [{ title: 'Btn', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview-image-placeholder')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-preview-image')).toBeNull();
+    });
+
+    it('should render at most two carousel buttons per card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'One', action: 'https://a.com' },
+                  { title: 'Two', action: 'https://b.com' },
+                  { title: 'Three', action: 'https://c.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview-button')).toHaveLength(2);
+      expect(screen.getByText('One')).toBeTruthy();
+      expect(screen.getByText('Two')).toBeTruthy();
+      expect(screen.queryByText('Three')).toBeNull();
+    });
+
+    it('should apply secondary class to second carousel button', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'Primary', action: 'https://a.com' },
+                  { title: 'Secondary', action: 'https://b.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = container.querySelectorAll('.viber-carousel-preview-button');
+      expect(buttons[0].className).toContain('viber-carousel-preview-button');
+      expect(buttons[0].className).not.toContain('viber-carousel-preview-button-secondary');
+      expect(buttons[1].className).toContain('viber-carousel-preview-button-secondary');
+    });
+
+    it('should show carousel when only a button title is present on a card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Tap me')).toBeTruthy();
+      expect(screen.queryByText('No content available')).toBeNull();
+    });
+
+    it('should show one placeholder card when editor preview and cards array is empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview-card')).toHaveLength(1);
+    });
+
+    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
   });
 
   describe('Account and Brand Name', () => {

package/v2Components/NoPermissionWrapper/_noPermissionWrapper.scss

@@ -0,0 +1,12 @@
+// Dim + block interaction for a control the user lacks permission for.
+// The wrapper keeps pointer events (so the CapTooltip still shows on hover) while the
+// inner control is dimmed and non-interactive.
+.rbac-no-permission {
+  display: inline-block;
+  cursor: not-allowed;
+
+  > * {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/v2Components/NoPermissionWrapper/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import globalMessages from '../../v2Containers/Cap/messages';
+import './_noPermissionWrapper.scss';
+
+// Wraps a single control and, when the user is not `allowed`, dims it + blocks
+// interaction (via CSS) and shows a permission tooltip on hover. Uses CapTooltip
+// instead of hand-rolled positioning/portals.
+const NoPermissionWrapper = ({ allowed, children, message }) => {
+  const child = React.Children.only(children);
+
+  if (allowed || child.props.disabled) {
+    return child;
+  }
+
+  return (
+    <CapTooltip
+      title={message || <FormattedMessage {...globalMessages.noPermissionAction} />}
+    >
+      <span className="rbac-no-permission">{child}</span>
+    </CapTooltip>
+  );
+};
+
+export default NoPermissionWrapper;

package/v2Containers/App/constants.js

@@ -97,6 +97,11 @@ export const BEE_PLUGIN = 'BEE_PLUGIN';
 export const NO_COMMUNICATION = 'NO_COMMUNICATION';
 export const FTP = 'FTP';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';
+// VAPT RBAC granular Creatives permissions (module creatives/ui)
+export const CREATIVE_VIEW = 'CREATIVE_VIEW';
+export const CREATIVE_CREATE = 'CREATIVE_CREATE';
+export const CREATIVE_EDIT = 'CREATIVE_EDIT';
+export const CREATIVE_DELETE = 'CREATIVE_DELETE';
 
 export const APPLY_NOW = <FormattedMessage {...globalMessages.applyNow} />;
 export const NO_CALL_TO_ACTION = <FormattedMessage {...globalMessages.noCallToAction} />;

package/v2Containers/Assets/Gallery/_gallery.scss

@@ -5,3 +5,9 @@
     margin-bottom: -$CAP_SPACE_16;
   }
 }
+
+// RBAC: dim + block a control the user lacks permission for (used with CapTooltip).
+.rbac-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/v2Containers/Assets/Gallery/index.js

@@ -13,10 +13,12 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration, CapNotification,} from '@capillarytech/cap-ui-library';
+import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration, CapNotification, CapTooltip,} from '@capillarytech/cap-ui-library';
+import NoPermissionWrapper from '../../../v2Components/NoPermissionWrapper';
 import { Popover } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';
+import globalMessages from '../../Cap/messages';
 import * as actions from './actions';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as globalActions from '../../Cap/actions';
@@ -307,9 +309,18 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             <div className="more-icon-wrapper">
               <Popover
                 placement="leftTop"
-                content={<div style={{ cursor: 'pointer'}}><p onClick={() => this.deleteAsset(asset)}>
-                  <FormattedMessage {...messages.delete} />
-                </p></div>} trigger="click">
+                content={<div>
+                  <p
+                    className={this.props.canDelete === false ? 'rbac-disabled' : ''}
+                    onClick={() => { if (this.props.canDelete !== false) this.deleteAsset(asset); }}
+                  >
+                    {this.props.canDelete === false ? (
+                      <CapTooltip title={<FormattedMessage {...globalMessages.noPermissionAction} />}><span><FormattedMessage {...messages.delete} /></span></CapTooltip>
+                    ) : (
+                      <FormattedMessage {...messages.delete} />
+                    )}
+                  </p>
+                </div>} trigger="click">
                 <i className="material-icons creative-icons">more_vert</i>
               </Popover>
             </div>
@@ -345,8 +356,15 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           <CapDropdown
             overlay={
               <CapMenu>
-                <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
-                  <FormattedMessage {...messages.delete} />
+                <CapMenu.Item
+                  className={`delete-gallery ${this.props.canDelete === false ? 'rbac-disabled' : ''}`.trim()}
+                  onClick={() => { if (this.props.canDelete !== false) this.deleteAsset(template); }}
+                >
+                  {this.props.canDelete === false ? (
+                    <CapTooltip title={<FormattedMessage {...globalMessages.noPermissionAction} />}><span><FormattedMessage {...messages.delete} /></span></CapTooltip>
+                  ) : (
+                    <FormattedMessage {...messages.delete} />
+                  )}
                 </CapMenu.Item>
               </CapMenu>
         }
@@ -382,7 +400,11 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             _.isEmpty(templates) &&
             _.isEmpty(searchText) &&
             !searchLoader &&
-            <CapIllustration {...this.getIllustrationProps} />
+            <CapIllustration
+              {...this.getIllustrationProps}
+              disabled={this.props.canCreate === false}
+              buttonTooltip={this.props.canCreate === false ? this.props.intl.formatMessage(globalMessages.noPermissionAction) : undefined}
+            />
           )}
         </div>
         }
@@ -458,9 +480,11 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
               <form encType="multipart/form-data" id="myForm">
                 <input style={{ display: 'none'}} id="fileName" type="file" onClick={(e) => {e.target.value=null}} onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
-                <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
-                  <FormattedMessage {...messages.upload} />
-                </CapButton>
+                <NoPermissionWrapper allowed={this.props.canCreate !== false}>
+                  <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+                    <FormattedMessage {...messages.upload} />
+                  </CapButton>
+                </NoPermissionWrapper>
               </form>
             </div>
           )

package/v2Containers/Cap/index.js

@@ -19,7 +19,7 @@ import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath, publicPath } from '../../config/path';
-import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
+import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, CREATIVE_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
 import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
@@ -115,7 +115,10 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
     this.props.actions.getUserData((userData, currentOrgDetails = {}) => { //taking currentOrgDetails as we are not getting this data in this.props.Global props.
       const { accessibleFeatures = [] } = currentOrgDetails;
-      if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+      if (
+        !userData.accessiblePermissions.includes(CREATIVES_UI_VIEW) &&
+        !userData.accessiblePermissions.includes(CREATIVE_VIEW)
+      ) {
         this.setState({ isCreativesAccessible: false });
       }
       const userGtmData = this.getUserGtmData();

package/v2Containers/Cap/messages.js

@@ -209,5 +209,9 @@ export default defineMessages({
     id: 'creatives.componentsV2.autofill',
     defaultMessage: 'Autofill',
   },
+  noPermissionAction: {
+    id: 'creatives.componentsV2.noPermissionAction',
+    defaultMessage: "You don't have permission to perform this action.",
+  },
 });
 

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -141,8 +141,8 @@ exports[`<Cap /> should render correct component 1`] = `
         "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/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -87,8 +87,8 @@ exports[`Creatives line image carousel test/> should render 1`] = `
         "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",
@@ -4228,8 +4228,8 @@ exports[`Creatives line image carousel test/> should render 2`] = `
         "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",
@@ -8508,8 +8508,8 @@ exports[`Creatives line image carousel test/> should render 3`] = `
         "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/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap

@@ -87,8 +87,8 @@ exports[`line wrapper test/> should render line component new 1`] = `
         "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",
@@ -15138,8 +15138,8 @@ exports[`line wrapper test/> should render line component old 1`] = `
         "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",