@capillarytech/creatives-library 9.0.70 → 9.0.72

package/constants/unified.js

@@ -59,7 +59,6 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
-export const ENABLE_CREATIVES_ARCHIVAL = 'ENABLE_CREATIVES_ARCHIVAL';
 export const ENABLE_WEBPUSH = 'ENABLE_WEBPUSH';
 export const ENABLE_CUSTOMER_BARCODE_TAG = 'ENABLE_CUSTOMER_BARCODE_TAG';
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = 'EMAIL_UNSUBSCRIBE_TAG_MANDATORY';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.70",
+  "version": "9.0.72",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -29,7 +29,6 @@ import {
   ENABLE_NEW_FORMBUILDER_SMS,
   ENABLE_NEW_FORMBUILDER_MPUSH,
   SUPPORT_ENGAGEMENT_MODULE,
-  ENABLE_CREATIVES_ARCHIVAL,
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -121,11 +120,6 @@ export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_WECHAT,
 );
 
-export const hasCreativesArchivalEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  ENABLE_CREATIVES_ARCHIVAL,
-);
-
 export const hasWebPushFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_WEBPUSH,

package/v2Containers/Cap/tests/index.test.js

@@ -8,6 +8,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 const { match, location, capGlobal, language } = mockData;
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
+  getEnvVariable: jest.fn(),
   GA: {
     initialize: jest.fn(),
     timeTracker: {

package/v2Containers/CreativesContainer/index.js

@@ -320,7 +320,7 @@ export class Creatives extends React.Component {
   };
 
   onEditTemplate = () => {
-    if (commonUtil.hasCreativesArchivalEnabled() && this.props.templateData?.isArchived) {
+    if (this.props.templateData?.isArchived) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
       return;
     }
@@ -2472,7 +2472,7 @@ export class Creatives extends React.Component {
               onSave={this.saveMessage}
               onDiscard={this.discardMessage}
               onEditTemplate={this.onEditTemplate}
-              isTemplateArchived={!!(commonUtil.hasCreativesArchivalEnabled() && this.props.templateData && this.props.templateData.isArchived)}
+              isTemplateArchived={!!(this.props.templateData && this.props.templateData.isArchived)}
               slidBoxContent={slidBoxContent}
               onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}

package/v2Containers/Templates/_templates.scss

@@ -1601,13 +1601,6 @@
   padding: $CAP_SPACE_08 $CAP_SPACE_12 0;
 }
 
-.template-listing-header-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: $CAP_SPACE_08;
-}
-
 .template-listing-more-btn {
   padding-inline: $CAP_SPACE_20;
   min-width: auto;

package/v2Containers/Templates/constants.js

@@ -95,6 +95,7 @@ export const noApprovedRcsTemplatesTitle='noApprovedRcsTemplatesTitle'
 export const noApprovedRcsTemplatesDesc='noApprovedRcsTemplatesDesc'
 
 // Archive feature
+export const DEFAULT_ARCHIVAL_LIMIT = 25;
 export const ARCHIVE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_REQUEST';
 export const ARCHIVE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_SUCCESS';
 export const ARCHIVE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_FAILURE';

package/v2Containers/Templates/index.js

@@ -117,7 +117,7 @@ import {
   URL,
   SITE_URL,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE, DEFAULT_ARCHIVAL_LIMIT} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
 import { sanitizeFileName, exportEmailTemplateHtml } from '../../utils/downloadFile';
 import {
@@ -152,7 +152,7 @@ import {
   CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12, CAP_YELLOW01,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { SMS_CATEGORY_TAG_STYLES, SMS_CATEGORY_LABELS } from '../../v2Components/SmsFallback/constants';
-import { GA } from '@capillarytech/cap-ui-utils';
+import { GA, getEnvVariable } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
 import injectReducer from '../../utils/injectReducer';
 import v2TemplateReducer from './reducer';
@@ -186,6 +186,7 @@ const AccountScrollDiv = styled.div`
   overflow: scroll;
   height: calc(100vh - 18.75rem);
 `;
+const ARCHIVAL_LIMIT = parseInt(getEnvVariable('ARCHIVAL_LIMIT'), 10) || DEFAULT_ARCHIVAL_LIMIT;
 const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
 const ACCOUNT_CHANGE_MODE = 'accountChangeMode';
 const TEMPLATES_MODE = "templatesMode";
@@ -2159,10 +2160,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       // Archive eligibility per template: Zalo never; WhatsApp/RCS not when pending/awaiting
       const cardWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
       const cardRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-      const isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
-      const isCardArchiveEligible = isArchivalEnabled && this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
-      const isArchivedMode = isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
-      const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
+      const isCardArchiveEligible = this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
+      const isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
+      const isAnyArchiveInProgress = !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
@@ -2307,7 +2307,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   </CapMenu.Item>
                 )}
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
-                {commonUtil.hasCreativesArchivalEnabled() && (() => {
+                {(() => {
                   const channelUp = this.state.channel.toUpperCase();
                   if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
                   const canArchive = this.canPerform(PERMISSIONS.CREATIVE_DELETE);
@@ -2928,12 +2928,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    const isArchivalEnabledLocal = commonUtil.hasCreativesArchivalEnabled();
-    const isArchivedModeLocal = isArchivalEnabledLocal && get(this.props, 'Templates.isArchivedMode', false);
+    const isArchivedModeLocal = get(this.props, 'Templates.isArchivedMode', false);
     const selectedIdsLocal = get(this.props, 'Templates.selectedTemplateIds', []);
     const selectedIdsArrayLocal = selectedIdsLocal && typeof selectedIdsLocal.toJS === 'function' ? selectedIdsLocal.toJS() : (Array.isArray(selectedIdsLocal) ? selectedIdsLocal : []);
     const selectedCountLocal = selectedIdsArrayLocal.length;
-    const hasSelectionLocal = isArchivalEnabledLocal && this.props.isFullMode && selectedCountLocal > 0;
+    const hasSelectionLocal = this.props.isFullMode && selectedCountLocal > 0;
+    const isArchiveLimitExceeded = selectedCountLocal > ARCHIVAL_LIMIT;
 
     return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
@@ -2945,16 +2945,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
             </CapLabel>
             <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-              <CapButton
-                type="primary"
-                className="archive-template-button"
-                prefix={<CapIcon type="archive" size="s" />}
-                onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
-              >
-                <span className="archive-btn-label">
-                  <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
+              <CapTooltip title={isArchiveLimitExceeded ? this.props.intl.formatMessage(messages.archiveLimitExceeded, { limit: ARCHIVAL_LIMIT }) : ''}>
+                <span>
+                  <CapButton
+                    type="primary"
+                    className="archive-template-button"
+                    disabled={isArchiveLimitExceeded}
+                    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>
                 </span>
-              </CapButton>
+              </CapTooltip>
             </NoPermissionWrapper>
             <CapButton type="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
               <FormattedMessage {...messages.archiveConfirmCancel} />
@@ -4195,7 +4200,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <span className="template-name" style={{ fontWeight: `${this.state.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
                 { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.state.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
                 {template?.name}
-                {commonUtil.hasCreativesArchivalEnabled() && template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
+                {template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
               </span>
               {this.props.location.query.type !== EMBEDDED && <CapPopover
                 trigger="click"
@@ -4208,7 +4213,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         </CapButton>
                       </NoPermissionWrapper>
                     </div>}
-                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
+                    {this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
                       <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
                         <CapButton
                           type="link"
@@ -4220,7 +4225,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         </CapButton>
                       </NoPermissionWrapper>
                     </div>}
-                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
+                    {this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
                       <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
                         <CapButton
                           type="link"
@@ -4867,11 +4872,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
-    const _isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
-    const _isArchivedMode = _isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
+    const _isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
     const _renderSelectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
     const _renderSelectedIdsArray = _renderSelectedIds && typeof _renderSelectedIds.toJS === 'function' ? _renderSelectedIds.toJS() : (Array.isArray(_renderSelectedIds) ? _renderSelectedIds : []);
-    const _renderHasSelection = _isArchivalEnabled && this.props.isFullMode && _renderSelectedIdsArray.length > 0;
+    const _renderHasSelection = this.props.isFullMode && _renderSelectedIdsArray.length > 0;
 
     const useLocalTemplates = this.props.localTemplatesConfig?.useLocalTemplates;
     const builtFilterContent = ((isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && (
@@ -5031,34 +5035,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </div>
         )
       }
-      <div className="template-listing-header-actions">
-        {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
-        {commonUtil.hasCreativesArchivalEnabled() && !_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
-          <CapDropdown
-            trigger={['click']}
-            overlay={
-              <CapMenu>
-                <CapMenu.Item
-                  key="archived"
-                  onClick={() => this.setArchivedMode(true)}
-                >
-                  <FormattedMessage {...messages.archivedTemplates} />
-                </CapMenu.Item>
-              </CapMenu>
-            }
-            placement="bottomRight"
-          >
-            <CapButton type="flat" className="template-listing-more-btn">
-              <CapIcon type="more" />
-            </CapButton>
-          </CapDropdown>
-        )}
-      </div>
     </div>
         <div>
-          <div className="action-container__create-row">
+          <CapRow type="flex" align="middle" justify="space-between" gap={8} className="action-container__create-row">
             {
-              isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && (
+              isfilterContentVisisble && !_renderHasSelection && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && (
                 this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
                   <CapTooltip title={whatsappCountExceedText}>
                     <div className="button-disabled-tooltip-wrapper">
@@ -5068,7 +5049,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 ) : createButton
               )
             }
-          </div>
+            <CapRow type="flex" align="middle" gap={8} className="template-listing-header-actions">
+              {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
+              {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
+                <CapDropdown
+                  trigger={['click']}
+                  overlay={
+                    <CapMenu>
+                      <CapMenu.Item
+                        key="archived"
+                        onClick={() => this.setArchivedMode(true)}
+                      >
+                        <FormattedMessage {...messages.archivedTemplates} />
+                      </CapMenu.Item>
+                    </CapMenu>
+                  }
+                  placement="bottomRight"
+                >
+                  <CapButton type="flat" className="template-listing-more-btn">
+                    <CapIcon type="more" />
+                  </CapButton>
+                </CapDropdown>
+              )}
+            </CapRow>
+          </CapRow>
         </div>
       </div>
     ));
@@ -5129,7 +5133,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           />
 
           {/* Archived mode header with back arrow (full mode only, archive flag enabled) */}
-          {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
+          {this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
             <CapRow type="flex" align="middle" className="archived-mode-header">
               <CapIcon
                 type="back"

package/v2Containers/Templates/messages.js

@@ -714,6 +714,10 @@ export default defineMessages({
     id: `${scope}.unarchiveTemplateSuccess`,
     defaultMessage: 'Template unarchived successfully',
   },
+  "archiveLimitExceeded": {
+    id: `${scope}.archiveLimitExceeded`,
+    defaultMessage: 'Archive limit exceeded, it cannot be greater than {limit}.',
+  },
   "bulkArchiveSuccess": {
     id: `${scope}.bulkArchiveSuccess`,
     defaultMessage: '{count} {count, plural, one {template} other {templates}} archived successfully',

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -228,13 +228,14 @@ exports[`Test Templates container Should render sms illustration when no templat
                   />
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -248,7 +249,13 @@ exports[`Test Templates container Should render sms illustration when no templat
                         Create new
                       </CapButton>
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    />
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -500,13 +507,14 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -523,7 +531,13 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                         title="Create new template"
                       />
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    />
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -811,13 +825,14 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -831,7 +846,44 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                         Create new
                       </CapButton>
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    >
+                      <CapDropdownComponent
+                        overlay={
+                          <CapMenuComponent>
+                            <withItemHOC
+                              onClick={[Function]}
+                            >
+                              <FormattedMessage
+                                defaultMessage="Archived templates"
+                                id="creatives.containersV2.Templates.archivedTemplates"
+                                values={Object {}}
+                              />
+                            </withItemHOC>
+                          </CapMenuComponent>
+                        }
+                        placement="bottomRight"
+                        trigger={
+                          Array [
+                            "click",
+                          ]
+                        }
+                      >
+                        <CapButton
+                          className="template-listing-more-btn"
+                          type="flat"
+                        >
+                          <CapIcon
+                            type="more"
+                          />
+                        </CapButton>
+                      </CapDropdownComponent>
+                    </CapRow>
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -1225,13 +1277,14 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -1245,7 +1298,44 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                         Create new
                       </CapButton>
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    >
+                      <CapDropdownComponent
+                        overlay={
+                          <CapMenuComponent>
+                            <withItemHOC
+                              onClick={[Function]}
+                            >
+                              <FormattedMessage
+                                defaultMessage="Archived templates"
+                                id="creatives.containersV2.Templates.archivedTemplates"
+                                values={Object {}}
+                              />
+                            </withItemHOC>
+                          </CapMenuComponent>
+                        }
+                        placement="bottomRight"
+                        trigger={
+                          Array [
+                            "click",
+                          ]
+                        }
+                      >
+                        <CapButton
+                          className="template-listing-more-btn"
+                          type="flat"
+                        >
+                          <CapIcon
+                            type="more"
+                          />
+                        </CapButton>
+                      </CapDropdownComponent>
+                    </CapRow>
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -1712,13 +1802,14 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -1732,7 +1823,44 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                         Create new
                       </CapButton>
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    >
+                      <CapDropdownComponent
+                        overlay={
+                          <CapMenuComponent>
+                            <withItemHOC
+                              onClick={[Function]}
+                            >
+                              <FormattedMessage
+                                defaultMessage="Archived templates"
+                                id="creatives.containersV2.Templates.archivedTemplates"
+                                values={Object {}}
+                              />
+                            </withItemHOC>
+                          </CapMenuComponent>
+                        }
+                        placement="bottomRight"
+                        trigger={
+                          Array [
+                            "click",
+                          ]
+                        }
+                      >
+                        <CapButton
+                          className="template-listing-more-btn"
+                          type="flat"
+                        >
+                          <CapIcon
+                            type="more"
+                          />
+                        </CapButton>
+                      </CapDropdownComponent>
+                    </CapRow>
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -2199,13 +2327,14 @@ exports[`Test Templates container Test max templates warning 1`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -2219,7 +2348,44 @@ exports[`Test Templates container Test max templates warning 1`] = `
                         Create new
                       </CapButton>
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    >
+                      <CapDropdownComponent
+                        overlay={
+                          <CapMenuComponent>
+                            <withItemHOC
+                              onClick={[Function]}
+                            >
+                              <FormattedMessage
+                                defaultMessage="Archived templates"
+                                id="creatives.containersV2.Templates.archivedTemplates"
+                                values={Object {}}
+                              />
+                            </withItemHOC>
+                          </CapMenuComponent>
+                        }
+                        placement="bottomRight"
+                        trigger={
+                          Array [
+                            "click",
+                          ]
+                        }
+                      >
+                        <CapButton
+                          className="template-listing-more-btn"
+                          type="flat"
+                        >
+                          <CapIcon
+                            type="more"
+                          />
+                        </CapButton>
+                      </CapDropdownComponent>
+                    </CapRow>
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -2629,13 +2795,14 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -2652,7 +2819,13 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
                         title="Create new template"
                       />
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    />
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -2908,13 +3081,14 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -2931,7 +3105,13 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
                         title="Create new template"
                       />
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    />
+                  </CapRow>
                 </div>
               </div>
             </div>
@@ -3162,13 +3342,14 @@ exports[`Test Templates container Test removing single filter 1`] = `
                   </CapRow>
                   <Component />
                   <Component />
-                  <div
-                    className="template-listing-header-actions"
-                  />
                 </div>
                 <div>
-                  <div
+                  <CapRow
+                    align="middle"
                     className="action-container__create-row"
+                    gap={8}
+                    justify="space-between"
+                    type="flex"
                   >
                     <NoPermissionWrapper
                       allowed={false}
@@ -3185,7 +3366,13 @@ exports[`Test Templates container Test removing single filter 1`] = `
                         title="Create new template"
                       />
                     </NoPermissionWrapper>
-                  </div>
+                    <CapRow
+                      align="middle"
+                      className="template-listing-header-actions"
+                      gap={8}
+                      type="flex"
+                    />
+                  </CapRow>
                 </div>
               </div>
             </div>

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

@@ -0,0 +1,242 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Templates } from '../index';
+import mockdata from '../../mockdata';
+import { DEFAULT_ARCHIVAL_LIMIT } from '../constants';
+import { CREATIVE_CREATE, CREATIVE_DELETE, CREATIVE_EDIT } from '../../App/constants';
+
+const { whatsappTemplates: TemplatesProp } = mockdata;
+
+jest.mock('@capillarytech/cap-ui-library', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-library'),
+  CapNotification: { error: jest.fn(), success: jest.fn(), warning: jest.fn() },
+}));
+
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+const buildTemplateIds = count => Array.from({ length: count }, (_, index) => `template_${index}`);
+
+// Walks a rendered element/plain-object tree (cards are never mounted) for a node by className.
+const findByClassName = (node, className, seen = new Set()) => {
+  if (!node || typeof node !== 'object' || seen.has(node)) return null;
+  seen.add(node);
+  if (Array.isArray(node)) {
+    return node.reduce((found, child) => found || findByClassName(child, className, seen), null);
+  }
+  if (node.props && typeof node.props.className === 'string' && node.props.className.includes(className)) {
+    return node;
+  }
+  return Object.values(node.props || node).reduce(
+    (found, value) => found || findByClassName(value, className, seen),
+    null,
+  );
+};
+
+describe('Templates archival (enabled by default)', () => {
+  const actions = {
+    getWeCrmAccounts: jest.fn(),
+    setChannelAccount: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getUserList: jest.fn(),
+    getSenderDetails: jest.fn(),
+    resetTemplate: jest.fn(),
+    setArchivedMode: jest.fn(),
+    clearTemplateSelection: jest.fn(),
+    toggleTemplateSelection: jest.fn(),
+    bulkArchiveTemplates: jest.fn(),
+    bulkUnarchiveTemplates: jest.fn(),
+    archiveTemplate: jest.fn(),
+    unarchiveTemplate: jest.fn(),
+  };
+  let renderedComponent;
+
+  const renderTemplates = ({ channel = 'email', isFullMode = true, templatesProps = {} } = {}) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{ name: channel }}
+        cap={{ user: { accessiblePermissions: [CREATIVE_CREATE, CREATIVE_EDIT, CREATIVE_DELETE] } }}
+        Templates={{ ...TemplatesProp, ...templatesProps }}
+        actions={actions}
+        location={{ pathname: `/${channel}`, query: {}, search: '' }}
+        EmailCreate={{ duplicateTemplateInProgress: false }}
+        isFullMode={isFullMode}
+        intl={{ formatMessage: ({ defaultMessage }) => defaultMessage }}
+      />,
+    );
+    return renderedComponent;
+  };
+
+  const getCardList = (templates, channel = 'email') =>
+    renderedComponent.instance().getTemplateDataForGrid({
+      templates,
+      handlers: { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() },
+      filterContent: null,
+      channel,
+      isLoading: false,
+      isInitialLoading: false,
+      loadingTip: '',
+      previewTemplateId: null,
+    });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('bulk selection bar', () => {
+    const getBulkArchiveButton = () =>
+      renderedComponent
+        .find('.bulk-selection-bar')
+        .find('.archive-template-button');
+
+    it('renders without any feature flag once templates are selected', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(1);
+      expect(getBulkArchiveButton().prop('disabled')).toBe(false);
+    });
+
+    it('is not rendered when nothing is selected', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: [] } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(0);
+    });
+
+    it('is not rendered outside full mode', () => {
+      renderTemplates({ isFullMode: false, templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(0);
+    });
+
+    it('keeps the action enabled at exactly the archival limit', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(DEFAULT_ARCHIVAL_LIMIT) } });
+      expect(getBulkArchiveButton().prop('disabled')).toBe(false);
+    });
+
+    it('disables the action and shows the limit message above the archival limit', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(DEFAULT_ARCHIVAL_LIMIT + 1) } });
+      expect(getBulkArchiveButton().prop('disabled')).toBe(true);
+      const tooltip = renderedComponent.find('.bulk-selection-bar').find('CapTooltip').first();
+      expect(tooltip.prop('title')).toContain('Archive limit exceeded');
+      expect(tooltip.prop('title')).toContain(String(DEFAULT_ARCHIVAL_LIMIT));
+    });
+
+    it('triggers bulk unarchive for the selection in archived mode', () => {
+      const selectedIds = buildTemplateIds(2);
+      renderTemplates({ templatesProps: { selectedTemplateIds: selectedIds, isArchivedMode: true } });
+      const handleBulkArchiveAction = jest
+        .spyOn(renderedComponent.instance(), 'handleBulkArchiveAction')
+        .mockImplementation(() => {});
+      getBulkArchiveButton().prop('onClick')();
+      expect(handleBulkArchiveAction).toHaveBeenCalledWith({ ids: selectedIds, count: 2, isUnarchive: true });
+    });
+  });
+
+  describe('listing toolbar', () => {
+    it('shows the create button, followed by the archived-templates kebab, when nothing is selected', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: [] } });
+      const createRow = renderedComponent.find('.action-container__create-row');
+      expect(createRow.find('.create-new-email')).toHaveLength(1);
+      expect(createRow.find('.template-listing-more-btn')).toHaveLength(1);
+      expect(renderedComponent.find('.action-container__toolbar-row .template-listing-more-btn')).toHaveLength(0);
+    });
+
+    it('hides the create button and the kebab while templates are selected for archival', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
+      expect(renderedComponent.find('.create-new-email')).toHaveLength(0);
+      expect(renderedComponent.find('.template-listing-more-btn')).toHaveLength(0);
+    });
+
+    it('hides the create button while templates are selected for unarchival', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2), isArchivedMode: true } });
+      expect(renderedComponent.find('.create-new-email')).toHaveLength(0);
+    });
+  });
+
+  describe('handleBulkArchiveAction', () => {
+    it('opens the confirm modal and bulk archives the selected ids on confirm', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleBulkArchiveAction({ ids: ['a', 'b'], count: 2 });
+      expect(showArchiveConfirm).toHaveBeenCalledWith(expect.objectContaining({ count: 2, isUnarchive: false }));
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.bulkArchiveTemplates).toHaveBeenCalledWith('Email', ['a', 'b'], expect.any(Function));
+      expect(actions.bulkUnarchiveTemplates).not.toHaveBeenCalled();
+    });
+
+    it('bulk unarchives when isUnarchive is set', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleBulkArchiveAction({ ids: ['a'], count: 1, isUnarchive: true });
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.bulkUnarchiveTemplates).toHaveBeenCalledWith('Email', ['a'], expect.any(Function));
+      expect(actions.bulkArchiveTemplates).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('single template card', () => {
+    const activeTemplate = { _id: 'tpl_1', name: 'Active template', versions: { base: {} } };
+    const archivedTemplate = { _id: 'tpl_2', name: 'Archived template', isArchived: true, versions: { base: {} } };
+
+    it('shows the archive menu action for an active template without any feature flag', () => {
+      renderTemplates();
+      const cardList = getCardList([activeTemplate]);
+      expect(findByClassName(cardList, 'archive-email')).not.toBeNull();
+      expect(findByClassName(cardList, 'unarchive-email')).toBeNull();
+    });
+
+    it('shows the unarchive menu action for an archived template', () => {
+      renderTemplates();
+      const cardList = getCardList([archivedTemplate]);
+      expect(findByClassName(cardList, 'unarchive-email')).not.toBeNull();
+    });
+
+    it('shows the archived tag and unarchive popover action for an archived template', () => {
+      renderTemplates({ channel: 'sms' });
+      const cardList = renderedComponent.instance().populateTemplatesList([archivedTemplate], false, false);
+      expect(findByClassName(cardList, 'archived-tag')).not.toBeNull();
+      expect(findByClassName(cardList, 'popover-archive-action')).not.toBeNull();
+    });
+
+    it('shows no archived tag for an active template', () => {
+      renderTemplates({ channel: 'sms' });
+      const cardList = renderedComponent.instance().populateTemplatesList([activeTemplate], false, false);
+      expect(findByClassName(cardList, 'archived-tag')).toBeNull();
+      expect(findByClassName(cardList, 'popover-archive-action')).not.toBeNull();
+    });
+
+    it('hides the archive actions outside full mode', () => {
+      renderTemplates({ isFullMode: false });
+      const cardList = getCardList([activeTemplate]);
+      expect(findByClassName(cardList, 'archive-email')).toBeNull();
+    });
+
+    it('archives a single template through the confirm modal', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleTemplateArchiveAction({ templateId: 'tpl_1', templateName: 'Active template' });
+      expect(showArchiveConfirm).toHaveBeenCalledTimes(1);
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.archiveTemplate).toHaveBeenCalled();
+    });
+
+    it('unarchives a single template through the confirm modal', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleTemplateArchiveAction({ templateId: 'tpl_2', templateName: 'Archived template', isUnarchive: true });
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.unarchiveTemplate).toHaveBeenCalled();
+    });
+  });
+
+  describe('isChannelArchiveEligible', () => {
+    it('does not allow archiving Zalo templates', () => {
+      renderTemplates();
+      expect(renderedComponent.instance().isChannelArchiveEligible('ZALO')).toBe(false);
+      expect(renderedComponent.instance().isChannelArchiveEligible('SMS')).toBe(true);
+    });
+  });
+});