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

package/v2Containers/SmsTrai/Create/tests/__snapshots__/index.test.js.snap

@@ -112,8 +112,8 @@ exports[`Creatives SmsTraiCreate test/> done button should be disabled if blank
         "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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -3273,8 +3273,8 @@ exports[`Creatives SmsTraiCreate test/> invalid file drop 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -6417,8 +6417,8 @@ exports[`Creatives SmsTraiCreate test/> renders UI 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -9578,8 +9578,8 @@ exports[`Creatives SmsTraiCreate test/> valid file drop 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -87,8 +87,8 @@ exports[`Creatives SmsTraiEdit 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -7411,8 +7411,8 @@ FREE GIFTS-
                                 "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": "Please contact your organisation administrator to request access.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -9749,8 +9749,8 @@ FREE GIFTS-
                                   "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": "Please contact your organisation administrator to request access.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",
@@ -12238,8 +12238,8 @@ exports[`Creatives SmsTraiEdit 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -20936,8 +20936,8 @@ FREE GIFTS-
                                 "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": "Please contact your organisation administrator to request access.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -23274,8 +23274,8 @@ FREE GIFTS-
                                   "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": "Please contact your organisation administrator to request access.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",
@@ -25763,8 +25763,8 @@ exports[`Creatives SmsTraiEdit test/> should save 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": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -33087,8 +33087,8 @@ FREE GIFTS-
                                 "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": "Please contact your organisation administrator to request access.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -35425,8 +35425,8 @@ FREE GIFTS-
                                   "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": "Please contact your organisation administrator to request access.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -2,9 +2,8 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { CapIllustration } from "@capillarytech/cap-ui-library";
-import globalMessages from '../Cap/messages';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -80,14 +79,12 @@ const CHANNEL_CONFIG = {
 };
 
 function ChannelTypeIllustration(props) {
-  const intl = useIntl();
   const {
     isFullMode,
     createTemplate,
     currentChannel,
     hostName,
     isArchivedMode,
-    canCreate = true,
   } = props;
 
   const templateText = useMemo(() => {
@@ -186,11 +183,6 @@ function ChannelTypeIllustration(props) {
     if (config.hasButton) {
       result.buttonLabel = <FormattedMessage {...config.buttonMessage} values={{ template: templateText }} />;
       result.onClick = createTemplate;
-      // RBAC: gray out + disable the create button for users without create permission.
-      if (!canCreate) {
-        result.disabled = true;
-        result.buttonTooltip = intl.formatMessage(globalMessages.noPermissionAction);
-      }
     }
 
     if (config.descriptionMessage) {
@@ -221,6 +213,5 @@ ChannelTypeIllustration.propTypes = {
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
   isArchivedMode: PropTypes.bool,
-  canCreate: PropTypes.bool,
 };
 export default ChannelTypeIllustration;

package/v2Containers/Templates/_templates.scss

@@ -1473,9 +1473,3 @@
     min-width: 0;
   }
 }
-
-// RBAC: dim + block a control the user lacks permission for (used with CapTooltip).
-.rbac-disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}

package/v2Containers/Templates/index.js

@@ -97,9 +97,6 @@ import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer'
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import CapCustomSkeleton from '../../v2Components/CapCustomSkeleton';
 import ChannelTypeIllustration from './ChannelTypeIllustration';
-import NoPermissionWrapper from '../../v2Components/NoPermissionWrapper';
-import { getUserAccess, hasPermission, PERMISSIONS } from '../../utils/permissions';
-
 import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
 import creativesMessages from '../CreativesContainer/messages';
 import {
@@ -1974,7 +1971,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       />
     ) : (
-      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={this.state?.channel?.toUpperCase()} hostName={this.state?.hostName}/>
+      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={this.state?.channel?.toUpperCase()} hostName={this.state?.hostName}/>
     );
   }
 
@@ -2108,7 +2105,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             );
           })()
         ],
-        hoverOption: isArchivedMode || !this.canPerform(PERMISSIONS.CREATIVE_EDIT) ? null : (
+        hoverOption: isArchivedMode ? null : (
           <CapButton
             className={
               this.props.isFullMode
@@ -2172,47 +2169,56 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {![WECHAT, WHATSAPP, ZALO].includes(
                   this.state.channel.toUpperCase()
                 ) &&
-                  !isTraiDltFeature && !template.isArchived && this.gatedMenuItem({
-                    allowed: this.canPerform(PERMISSIONS.CREATIVE_CREATE),
-                    className: `duplicate-${channelLowerCase}`,
-                    onClick: () => this.duplicateTemplate(template),
-                    label: <FormattedMessage {...messages.duplicateButton} />,
-                  })}
+                  !isTraiDltFeature && !template.isArchived && (
+                    <CapMenu.Item
+                      className={`duplicate-${channelLowerCase}`}
+                      onClick={() => this.duplicateTemplate(template)}
+                    >
+                      <FormattedMessage {...messages.duplicateButton} />
+                    </CapMenu.Item>
+                  )}
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
                 {commonUtil.hasCreativesArchivalEnabled() && (() => {
                   const channelUp = this.state.channel.toUpperCase();
                   if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
-                  const canArchive = this.canPerform(PERMISSIONS.CREATIVE_DELETE);
-                  return !template?.isArchived
-                    ? this.gatedMenuItem({
-                        allowed: canArchive,
-                        className: `archive-${channelLowerCase}`,
-                        onClick: () => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name }),
-                        label: <FormattedMessage {...messages.archiveButton} />,
-                      })
-                    : this.gatedMenuItem({
-                        allowed: canArchive,
-                        className: `unarchive-${channelLowerCase}`,
-                        onClick: () => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true }),
-                        label: <FormattedMessage {...messages.unarchiveButton} />,
-                      });
+                  return !template?.isArchived ? (
+                    <CapMenu.Item
+                      className={`archive-${channelLowerCase}`}
+                      onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
+                    >
+                      <FormattedMessage {...messages.archiveButton} />
+                    </CapMenu.Item>
+                  ) : (
+                    <CapMenu.Item
+                      className={`unarchive-${channelLowerCase}`}
+                      onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
+                    >
+                      <FormattedMessage {...messages.unarchiveButton} />
+                    </CapMenu.Item>
+                  );
                 })()}
                 {/* Delete/Unmap menu item */}
                 {(!(
                   this.state.channel.toUpperCase() === WHATSAPP &&
                   status === WHATSAPP_STATUSES.approved
-                ) && ![ZALO].includes(this.state.channel.toUpperCase())) && this.gatedMenuItem({
-                  allowed: this.canPerform(PERMISSIONS.CREATIVE_DELETE),
-                  className:
-                    this.state.channel.toUpperCase() === WECHAT && !template.definition
-                      ? `unmap-${channelLowerCase}`
-                      : `delete-${channelLowerCase}`,
-                  onClick: () => this.toggleDeleteTemplateModal(template),
-                  label:
-                    this.state.channel.toUpperCase() === WECHAT && !template.definition
-                      ? <FormattedMessage {...messages.unMapButton} />
-                      : <FormattedMessage {...messages.deleteButton} />,
-                })}
+                ) && ![ZALO].includes(this.state.channel.toUpperCase())) && (
+                  <CapMenu.Item
+                    className={
+                      this.state.channel.toUpperCase() === WECHAT &&
+                      !template.definition
+                        ? `unmap-${channelLowerCase}`
+                        : `delete-${channelLowerCase}`
+                    }
+                    onClick={() => this.toggleDeleteTemplateModal(template)}
+                  >
+                    {this.state.channel.toUpperCase() === WECHAT &&
+                    !template.definition ? (
+                      <FormattedMessage {...messages.unMapButton} />
+                    ) : (
+                      <FormattedMessage {...messages.deleteButton} />
+                    )}
+                  </CapMenu.Item>
+                )}
               </CapMenu>
             }
           >
@@ -2741,18 +2747,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapLabel type="label2">
               {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
             </CapLabel>
-            <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-              <CapButton
-                type="primary"
-                className="archive-template-button"
-                prefix={<CapIcon type="archive" size="s" />}
-                onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
-              >
-                <span className="archive-btn-label">
-                  <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
-                </span>
-              </CapButton>
-            </NoPermissionWrapper>
+            <CapButton
+              type="primary"
+              className="archive-template-button"
+              prefix={<CapIcon type="archive" size="s" />}
+              onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
+            >
+              <span className="archive-btn-label">
+                <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
+              </span>
+            </CapButton>
             <CapButton type="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
               <FormattedMessage {...messages.archiveConfirmCancel} />
             </CapButton>
@@ -2791,14 +2795,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </div> : (
               showIllustrationForChannel(MOBILE_PUSH_LOWERCASE) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel} hostName={this.state?.hostName}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
               </div>
             )
           }
           {(showWhatsappIllustration || showZaloIllustration) && !get(this.props, 'Templates.isArchivedMode', false) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
+                {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
                 {filteredEmptyAndFullModeAs(true) && !isEmpty(templates) && this.state?.hostName && this.whatsappZaloIllustrationText(noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc)}
                 {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText(noApprovedWhatsappZaloTemplatesTitle, showWhatsappIllustration ? noApprovedWhatsappTemplatesDesc : zaloDescIllustration)}
               </div>
@@ -2806,41 +2810,41 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
           {showIllustrationForChannel(RCS_LOWERCASE) && 
             <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               {filteredEmptyAndFullModeAs(false) && this.whatsappZaloIllustrationText(noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc)}
             </div>
           }
           {showIllustrationForChannel(INAPP_LOWERCASE) && 
             <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
-              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel} />
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} />
             </div>
           }
           
           {showIllustrationForChannel(VIBER_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'viber-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
           {showIllustrationForChannel(FB_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'fb-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
           {showIllustrationForChannel(LINE_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'line-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
           {showIllustrationForChannel(WEBPUSH_LOWERCASE) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 20.3125rem)", overflow: 'auto' } : {}}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel} hostName={this.state?.hostName}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
               </div>
           }
           {get(this.props, 'Templates.isArchivedMode', false) && isEmpty(templates) && !isLoading && !getAllTemplatesInProgress && isEmpty(this.state.searchText) && (
             <CapRow className={this.isFullMode() ? 'illustration-scroll-wrapper' : ''}>
               <ChannelTypeIllustration
                 isFullMode={this.props.isFullMode}
-                createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)}
+                createTemplate={this.createTemplate}
                 currentChannel={currentChannel}
                 isArchivedMode
               />
@@ -3149,36 +3153,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  canPerform(code) {
-    return hasPermission(getUserAccess(this.props), code);
-  }
-
-  // RBAC: render a dropdown menu item that stays visible but is grayed out,
-  // unclickable, and shows a permission tooltip when the user lacks access
-  // (instead of hiding it, which leaves an empty/no-op 3-dots menu).
-  gatedMenuItem = ({ allowed, className, onClick, label }) => (
-    <CapMenu.Item
-      className={`${className || ''} ${allowed ? '' : 'rbac-disabled'}`.trim()}
-      onClick={() => { if (allowed) onClick(); }}
-    >
-      {allowed ? label : (
-        <CapTooltip title={<FormattedMessage {...globalMessages.noPermissionAction} />}>
-          <span>{label}</span>
-        </CapTooltip>
-      )}
-    </CapMenu.Item>
-  );
-
-  guardWrite(code) {
-    if (this.canPerform(code)) return true;
-    CapNotification.error({
-      message: this.props.intl.formatMessage(globalMessages.noPermissionAction),
-    });
-    return false;
-  }
-
   createTemplate(ev) {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_CREATE)) return;
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     const channel = this.state.channel.toLowerCase();
@@ -3422,7 +3397,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   duplicateTemplate(template) {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_CREATE)) return;
     const duplicateObj = cloneDeep(template);
     duplicateObj.name = `${COPY_OF} ${template?.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
     delete duplicateObj._id;
@@ -3529,7 +3503,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleEditClick(e, template, modeType, path, options) {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_EDIT)) return;
     if (template && template.isArchived) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
       return;
@@ -3705,7 +3678,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   toggleDeleteTemplateModal = (template) => {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_DELETE)) return;
     this.setState({actionTemplate: template}, () => {
       this.setState({showModal: true});
     });
@@ -3739,7 +3711,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleBulkArchiveAction = ({ ids, count, isUnarchive = false }) => {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_DELETE)) return;
     const { intl, actions } = this.props;
     const { channel } = this.state;
     const title = isUnarchive
@@ -3759,7 +3730,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleTemplateArchiveAction = ({ templateId, templateName, isUnarchive = false }) => {
-    if (!this.guardWrite(PERMISSIONS.CREATIVE_DELETE)) return;
     const { intl, actions } = this.props;
     const { channel } = this.state;
     const title = isUnarchive
@@ -3992,43 +3962,35 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 trigger="click"
                 content={
                   <div className="popover-content">
-    {this.state.channel !== 'wechat' && !template.isArchived && <div className="popover-action-container">
-                      <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_CREATE)}>
-                        <CapButton type="link" onClick={() => this.duplicateTemplate(template)} className="popover-action">
-                          {this.props.intl.formatMessage(messages.duplicateButton)}
-                        </CapButton>
-                      </NoPermissionWrapper>
+                    {this.state.channel !== 'wechat' && !template.isArchived && <div className="popover-action-container">
+                      <CapButton type="link" onClick={() => this.duplicateTemplate(template)} className="popover-action">
+                        {this.props.intl.formatMessage(messages.duplicateButton)}
+                      </CapButton>
                     </div>}
                     {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
-                      <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-                        <CapButton
-                          type="link"
-                          onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
-                          className="popover-action popover-archive-action"
-                        >
-                          <CapIcon type="archive" size="s" />
-                          <CapLabel.CapLabelInline type="label1">{this.props.intl.formatMessage(messages.archiveButton)}</CapLabel.CapLabelInline>
-                        </CapButton>
-                      </NoPermissionWrapper>
+                      <CapButton
+                        type="link"
+                        onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
+                        className="popover-action popover-archive-action"
+                      >
+                        <CapIcon type="archive" size="s" />
+                        <CapLabel.CapLabelInline type="label1">{this.props.intl.formatMessage(messages.archiveButton)}</CapLabel.CapLabelInline>
+                      </CapButton>
                     </div>}
                     {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
-                      <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-                        <CapButton
-                          type="link"
-                          onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
-                          className="popover-action popover-archive-action"
-                        >
-                          <CapIcon type="archive" size="s" />
-                          <CapLabel.CapLabelInline type="label1">{this.props.intl.formatMessage(messages.unarchiveButton)}</CapLabel.CapLabelInline>
-                        </CapButton>
-                      </NoPermissionWrapper>
+                      <CapButton
+                        type="link"
+                        onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
+                        className="popover-action popover-archive-action"
+                      >
+                        <CapIcon type="archive" size="s" />
+                        <CapLabel.CapLabelInline type="label1">{this.props.intl.formatMessage(messages.unarchiveButton)}</CapLabel.CapLabelInline>
+                      </CapButton>
                     </div>}
                     <div className="popover-action-container">
-                      <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-                        <CapButton type="link" onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action">
-                          {deleteOption}
-                        </CapButton>
-                      </NoPermissionWrapper>
+                      <CapButton type="link" onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action">
+                        {deleteOption}
+                      </CapButton>
                     </div>
                   </div>
                 }
@@ -4630,26 +4592,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         && !this.props.isFullMode
       )
       ? (
-        <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_CREATE)}>
-          <CapLink
-            onClick={this.openCreativesFullMode}
-            title={formatMessage(messages.createNewTemplateLink)}
-            suffix={<CapIcon type="open-in-new" size="s" />}
-            className="create-new-link"
-          />
-        </NoPermissionWrapper>
+        <CapLink
+          onClick={this.openCreativesFullMode}
+          title={formatMessage(messages.createNewTemplateLink)}
+          suffix={<CapIcon type="open-in-new" size="s" />}
+          className="create-new-link"
+        />
       )
         : this.state?.channel?.toLowerCase() === ZALO_LOWERCASE || (channelLowerCase === WHATSAPP_LOWERCASE && isEmpty(this.state?.hostName)) ? <></> : (
-        <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_CREATE)}>
-          <CapButton
-            className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
-            type={"primary"}
-            disabled={this.isCreateDisabled()}
-            onClick={this.createTemplate}
-          >
-            { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
-          </CapButton>
-        </NoPermissionWrapper>
+        <CapButton
+          className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
+          type={"primary"}
+          isAddBtn
+          disabled={this.isCreateDisabled()}
+          onClick={this.createTemplate}
+        >
+          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
+        </CapButton>
       );
 
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;

package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js

@@ -3,13 +3,6 @@ jest.mock('@capillarytech/cap-ui-library', () => ({
   CapIllustration: ({ children, ...props }) => <div data-testid="cap-illustration" {...props}>{children}</div>
 }));
 
-// The component uses useIntl() (context); this shallow test supplies intl via props, so
-// stub useIntl. FormattedMessage stays real.
-jest.mock('react-intl', () => ({
-  ...jest.requireActual('react-intl'),
-  useIntl: () => ({ formatMessage: m => (m && m.defaultMessage) || '' }),
-}));
-
 // Mock all image imports
 jest.mock('../../Assets/images/emailIllustration.svg', () => 'test-file-stub');
 jest.mock('../../Assets/images/smsIllustration.svg', () => 'test-file-stub');