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

package/v2Containers/Templates/index.js

@@ -73,7 +73,6 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
-import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -98,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 {
@@ -1397,11 +1399,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
-        const messageType = viberContent.type || '';
-        const cardsRaw = viberContent.cards;
-        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
-        const isCarousel =
-          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1419,39 +1416,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
-        if (isCarousel) {
-          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
-          viberPreview.cards = cards.map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((btn) => ({
-              title: btn?.title || '',
-              action: btn?.action || '',
-            })),
-          }));
-          viberPreview.showCarouselEditorPreview = true;
-        }
-
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName || '',
-          brandName: accountName || '',
-          messageContent: text,
-          ...(isCarousel && {
-            type: VIBER_MEDIA_TYPES.CAROUSEL,
-            cards: viberPreview.cards,
-          }),
-          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
-            button: {
-              text: button.text,
-              url: button.url || viberContent.buttonURL || '',
-            },
-          }),
-          buttonURL: button.url || viberContent.buttonURL || '',
+          accountName: accountName ? [accountName] : [],
+          brandName: accountName ? [accountName] : [],
         };
       }
 
@@ -2002,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}/>
     );
   }
 
@@ -2136,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
@@ -2200,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>
             }
           >
@@ -2472,52 +2435,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
-                type = '',
-                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
-          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
-          if (isViberCarousel) {
-            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
-            templateData.className = 'viber-carousel-static';
-            templateData.content = (
-              <CapRow className="viber-carousel-static-content">
-                <CapRow className="viber-carousel-static-message-box">
-                  <CapLabel type="label1" className="viber-carousel-static-message">
-                    {text}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="viber-carousel-static-cards">
-                  {previewCards.map((card, cardIdx) => (
-                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
-                      {card?.mediaUrl ? (
-                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
-                      ) : (
-                        <CapRow className="viber-carousel-static-image-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-static-text">
-                        {card?.text}
-                      </CapLabel>
-                      <CapRow 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}`}
-                            type="label1"
-                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
-                          >
-                            {(carouselButton?.title || '').trim()}
-                          </CapLabel>
-                        ))}
-                      </CapRow>
-                    </CapRow>
-                  ))}
-                </CapRow>
-              </CapRow>
-            );
-            break;
-          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;
@@ -2820,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>
@@ -2868,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>
@@ -2883,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
               />
@@ -3226,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();
@@ -3470,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;
@@ -3576,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;
@@ -3751,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});
     });
@@ -3784,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
@@ -3803,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
@@ -4035,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>
                 }
@@ -4665,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;
@@ -5138,22 +5106,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
+              // Pass formData for EMAIL and SMS channels for tag extraction
               formData={
-                (() => {
-                  const previewContent = this.state.testAndPreviewContent;
-                  const channelUpper = this.state.channel?.toUpperCase();
-                  if (!previewContent || typeof previewContent !== 'object') {
-                    return null;
-                  }
-                  if ([EMAIL, SMS].includes(channelUpper)) {
-                    return previewContent.formData || null;
-                  }
-                  if (channelUpper === VIBER) {
-                    return previewContent;
-                  }
-                  return null;
-                })()
+                this.state.testAndPreviewContent &&
+                (this.state.channel?.toUpperCase() === EMAIL || 
+                 this.state.channel?.toUpperCase() === SMS) &&
+                typeof this.state.testAndPreviewContent === 'object' &&
+                this.state.testAndPreviewContent?.formData
+                  ? this.state.testAndPreviewContent.formData
+                  : null
               }
             />
           )}

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

@@ -3,6 +3,13 @@ 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');