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

package/v2Containers/Templates/index.js

@@ -98,6 +98,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 {
@@ -2002,7 +2005,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}/>
     );
   }
 
@@ -2136,7 +2139,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
@@ -2200,56 +2203,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>
             }
           >
@@ -2481,9 +2475,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           templateData.content = text;
           if (isViberCarousel) {
             const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
-            templateData.className = 'viber-carousel-static';
+            // Bypass CapCustomCard Viber Meta + line-clamp (clips title/buttons for tall images).
+            // Keep VIBER in className for listing styles; cardType hits the default content path.
+            templateData.cardType = 'VIBER_CAROUSEL_PREVIEW';
+            templateData.className = 'viber-carousel-static VIBER';
+            templateData.style = {
+              height: 'auto',
+              minHeight: '21.125rem',
+              overflow: 'visible',
+            };
+            templateData.bodyStyle = {
+              height: 'auto',
+              overflow: 'visible',
+              paddingBottom: '12px',
+            };
             templateData.content = (
-              <CapRow className="viber-carousel-static-content">
+              <CapRow vertical className="viber-carousel-static-content">
                 <CapRow className="viber-carousel-static-message-box">
                   <CapLabel type="label1" className="viber-carousel-static-message">
                     {text}
@@ -2491,7 +2498,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 </CapRow>
                 <CapRow className="viber-carousel-static-cards">
                   {previewCards.map((card, cardIdx) => (
-                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
+                    <CapRow vertical className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
                       {card?.mediaUrl ? (
                         <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
                       ) : (
@@ -2500,7 +2507,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapLabel type="label1" className="viber-carousel-static-text">
                         {card?.text}
                       </CapLabel>
-                      <CapRow className="viber-carousel-static-buttons">
+                      <CapRow vertical className="viber-carousel-static-buttons">
                         {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
                           <CapLabel
                             key={`viber-static-btn-${cardIdx}-${btnIdx}`}
@@ -2820,16 +2827,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>
@@ -2868,14 +2877,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>
@@ -2883,41 +2892,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
               />
@@ -3226,7 +3235,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();
@@ -3470,6 +3508,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;
@@ -3576,6 +3615,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;
@@ -3751,6 +3791,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});
     });
@@ -3784,6 +3825,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
@@ -3803,6 +3845,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
@@ -4035,35 +4078,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>
                 }
@@ -4665,23 +4716,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() });