@capillarytech/creatives-library 9.0.37 → 9.0.39

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -2,8 +2,9 @@ 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 } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } 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,11 +81,13 @@ const CHANNEL_CONFIG = {
 
 function ChannelTypeIllustration(props) {
   const {
+    intl,
     isFullMode,
     createTemplate,
     currentChannel,
     hostName,
     isArchivedMode,
+    canCreate = true,
   } = props;
 
   const templateText = useMemo(() => {
@@ -183,6 +186,11 @@ 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) {
@@ -208,10 +216,13 @@ function ChannelTypeIllustration(props) {
   );
 }
 ChannelTypeIllustration.propTypes = {
+  intl: intlShape.isRequired,
   isFullMode: PropTypes.bool,
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
   isArchivedMode: PropTypes.bool,
+  canCreate: PropTypes.bool,
 };
-export default ChannelTypeIllustration;
+export { ChannelTypeIllustration };
+export default injectIntl(ChannelTypeIllustration);

package/v2Containers/Templates/_templates.scss

@@ -1473,3 +1473,9 @@
     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,6 +97,9 @@ 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 {
@@ -1971,7 +1974,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       />
     ) : (
-      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={this.state?.channel?.toUpperCase()} hostName={this.state?.hostName}/>
+      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={this.state?.channel?.toUpperCase()} hostName={this.state?.hostName}/>
     );
   }
 
@@ -2105,7 +2108,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             );
           })()
         ],
-        hoverOption: isArchivedMode ? null : (
+        hoverOption: isArchivedMode || !this.canPerform(PERMISSIONS.CREATIVE_EDIT) ? null : (
           <CapButton
             className={
               this.props.isFullMode
@@ -2169,56 +2172,47 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {![WECHAT, WHATSAPP, ZALO].includes(
                   this.state.channel.toUpperCase()
                 ) &&
-                  !isTraiDltFeature && !template.isArchived && (
-                    <CapMenu.Item
-                      className={`duplicate-${channelLowerCase}`}
-                      onClick={() => this.duplicateTemplate(template)}
-                    >
-                      <FormattedMessage {...messages.duplicateButton} />
-                    </CapMenu.Item>
-                  )}
+                  !isTraiDltFeature && !template.isArchived && this.gatedMenuItem({
+                    allowed: this.canPerform(PERMISSIONS.CREATIVE_CREATE),
+                    className: `duplicate-${channelLowerCase}`,
+                    onClick: () => this.duplicateTemplate(template),
+                    label: <FormattedMessage {...messages.duplicateButton} />,
+                  })}
                 {/* 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;
-                  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>
-                  );
+                  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} />,
+                      });
                 })()}
                 {/* Delete/Unmap menu item */}
                 {(!(
                   this.state.channel.toUpperCase() === WHATSAPP &&
                   status === WHATSAPP_STATUSES.approved
-                ) && ![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>
-                )}
+                ) && ![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} />,
+                })}
               </CapMenu>
             }
           >
@@ -2747,16 +2741,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapLabel type="label2">
               {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
             </CapLabel>
-            <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 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="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
               <FormattedMessage {...messages.archiveConfirmCancel} />
             </CapButton>
@@ -2795,14 +2791,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} currentChannel={currentChannel} hostName={this.state?.hostName}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} 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} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
+                {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} 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>
@@ -2810,41 +2806,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} currentChannel={currentChannel}/>
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} 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} currentChannel={currentChannel} />
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel} />
             </div>
           }
           
           {showIllustrationForChannel(VIBER_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'viber-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
               </div>
           }
           {showIllustrationForChannel(FB_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'fb-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} currentChannel={currentChannel}/>
               </div>
           }
           {showIllustrationForChannel(LINE_LOWERCASE) &&
               <div className={`${this.isFullMode() ? 'line-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} 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} currentChannel={currentChannel} hostName={this.state?.hostName}/>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)} 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}
+                createTemplate={this.createTemplate} canCreate={this.canPerform(PERMISSIONS.CREATIVE_CREATE)}
                 currentChannel={currentChannel}
                 isArchivedMode
               />
@@ -3153,7 +3149,36 @@ 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();
@@ -3397,6 +3422,7 @@ 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;
@@ -3503,6 +3529,7 @@ 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;
@@ -3678,6 +3705,7 @@ 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});
     });
@@ -3711,6 +3739,7 @@ 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
@@ -3730,6 +3759,7 @@ 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
@@ -3962,35 +3992,43 @@ 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">
-                      <CapButton type="link" onClick={() => this.duplicateTemplate(template)} className="popover-action">
-                        {this.props.intl.formatMessage(messages.duplicateButton)}
-                      </CapButton>
+    {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>
                     </div>}
                     {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
-                      <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 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>
                     </div>}
                     {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
-                      <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 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>
                     </div>}
                     <div className="popover-action-container">
-                      <CapButton type="link" onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action">
-                        {deleteOption}
-                      </CapButton>
+                      <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
+                        <CapButton type="link" onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action">
+                          {deleteOption}
+                        </CapButton>
+                      </NoPermissionWrapper>
                     </div>
                   </div>
                 }
@@ -4592,23 +4630,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         && !this.props.isFullMode
       )
       ? (
-        <CapLink
-          onClick={this.openCreativesFullMode}
-          title={formatMessage(messages.createNewTemplateLink)}
-          suffix={<CapIcon type="open-in-new" size="s" />}
-          className="create-new-link"
-        />
+        <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>
       )
         : this.state?.channel?.toLowerCase() === ZALO_LOWERCASE || (channelLowerCase === WHATSAPP_LOWERCASE && isEmpty(this.state?.hostName)) ? <></> : (
-        <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>
+        <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>
       );
 
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;

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

@@ -16,7 +16,7 @@ jest.mock('@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllust
 import React from 'react';
 import { shallow, configure } from 'enzyme';
 import Adapter from '@cfaester/enzyme-adapter-react-18';
-import ChannelTypeIllustration from '../ChannelTypeIllustration';
+import { ChannelTypeIllustration } from '../ChannelTypeIllustration';
 import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../../CreativesContainer/constants';
 
 configure({ adapter: new Adapter() });