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

package/v2Containers/Templates/index.js

@@ -73,6 +73,7 @@ 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';
@@ -97,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 {
@@ -1396,6 +1400,11 @@ 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,
@@ -1413,14 +1422,39 @@ 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 ? [accountName] : [],
-          brandName: accountName ? [accountName] : [],
+          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 || '',
         };
       }
 
@@ -1971,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}/>
     );
   }
 
@@ -2105,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
@@ -2169,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>
             }
           >
@@ -2441,10 +2466,65 @@ 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) : [];
+            // 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 vertical 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 vertical 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 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}`}
+                            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;
@@ -2747,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>
@@ -2795,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>
@@ -2810,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
               />
@@ -3153,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();
@@ -3397,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;
@@ -3503,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;
@@ -3678,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});
     });
@@ -3711,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
@@ -3730,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
@@ -3962,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>
                 }
@@ -4592,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;
@@ -5065,15 +5192,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for EMAIL and SMS channels for tag extraction
+              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
               formData={
-                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
+                (() => {
+                  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;
+                })()
               }
             />
           )}

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() });