@capillarytech/creatives-library 8.0.348 → 8.0.349

package/v2Containers/Templates/index.js

@@ -50,9 +50,7 @@ import {
   CapStatus,
   CapColoredTag,
   CapSpin,
-  CapCard,
-  CapColumn,
-  CapCarousel
+  CapCheckbox,
 } from "@capillarytech/cap-ui-library";
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms } from '../Sms/Create/selectors';
@@ -83,7 +81,7 @@ import * as webpushActions from '../WebPush/actions';
 import * as globalActions from '../Cap/actions';
 import { makeSelectAuthenticated } from '../Cap/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { getObjFromQueryParams } from '../../utils/v2common';
+import { getObjFromQueryParams, buildTemplateNameDescription } from '../../utils/v2common';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
 import { containsBase64Images } from '../../utils/content';
@@ -107,8 +105,8 @@ import {
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc} from './constants';
-import { COPY_OF } from '../../constants/unified';
+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 { COPY_OF, EMBEDDED } from '../../constants/unified';
 import {
   STATUS_OPTIONS,
   CATEGORY,
@@ -116,19 +114,11 @@ import {
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
   HOST_GUPSHUP,
-  HOST_HAPTIC,
   CATEGORY_OPTIONS_MAP,
-  HOST_TWILIO,
-  TWILIO_CATEGORY_OPTIONS,
-  KARIX_GUPSHUP_CATEGORY_OPTIONS,
-  ICS_CATEGORY_OPTIONS,
-  HAPTIC_CATEGORY_OPTIONS,
-  HOST_ICS,
   IMAGE,
   VIDEO,
-  GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BIG_HTML, ANDROID, IOS } from '../InApp/constants';
+import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill, getWhatsappCarouselButtonView } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
@@ -145,7 +135,7 @@ import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
 import injectReducer from '../../utils/injectReducer';
@@ -154,7 +144,6 @@ import { compose } from 'redux';
 import { v2TemplateSaga } from './sagas';
 import injectSaga from '../../utils/injectSaga';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-import { Rcs } from '../Rcs';
 import { makeSelectRcs } from '../Rcs/selectors';
 import { getRcsStatusType } from '../Rcs/utils';
 import { makeSelectWebPush } from '../WebPush/selectors';
@@ -437,6 +426,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           channel = '';
       }
       this.setState({ channel, activeMode });
+      // Always reset archive mode and selection when mounting a new channel
+      this.props.actions.setArchivedMode(false);
+      this.props.actions.clearTemplateSelection();
       // Clear templates when entering account selection mode to prevent showing old channel templates
       if (activeMode === ACCOUNT_SELECTION_MODE) {
         this.props.actions.resetTemplate();
@@ -827,6 +819,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.getAllTemplates({params, resetPage: true});
     }
 
+    // Archive / Unarchive / Bulk Archive / Bulk Unarchive — detect completion and refresh listing
+    const wasArchiving = this.props.Templates.archiveInProgress;
+    const isArchiveDone = !nextProps.Templates.archiveInProgress && wasArchiving;
+    if (isArchiveDone && !nextProps.Templates.archiveError) {
+      const { successMessage, description } = nextProps.Templates.archiveSuccessPayload || {};
+      if (successMessage) CapNotification.success({ message: successMessage, description });
+      this.getAllTemplates({ params, resetPage: true });
+    }
+
+    const wasUnarchiving = this.props.Templates.unarchiveInProgress;
+    const isUnarchiveDone = !nextProps.Templates.unarchiveInProgress && wasUnarchiving;
+    if (isUnarchiveDone && !nextProps.Templates.unarchiveError) {
+      const { successMessage, description } = nextProps.Templates.unarchiveSuccessPayload || {};
+      if (successMessage) CapNotification.success({ message: successMessage, description });
+      this.getAllTemplates({ params, resetPage: true });
+    }
+
+    const wasBulkArchiving = this.props.Templates.bulkArchiveInProgress;
+    const isBulkArchiveDone = !nextProps.Templates.bulkArchiveInProgress && wasBulkArchiving;
+    if (isBulkArchiveDone && !nextProps.Templates.bulkArchiveError) {
+      const { count } = nextProps.Templates.bulkArchiveSuccessPayload || {};
+      CapNotification.success({ message: this.props.intl.formatMessage(messages.bulkArchiveSuccess, { count }) });
+      this.getAllTemplates({ params, resetPage: true });
+    }
+
+    const wasBulkUnarchiving = this.props.Templates.bulkUnarchiveInProgress;
+    const isBulkUnarchiveDone = !nextProps.Templates.bulkUnarchiveInProgress && wasBulkUnarchiving;
+    if (isBulkUnarchiveDone && !nextProps.Templates.bulkUnarchiveError) {
+      const { count } = nextProps.Templates.bulkUnarchiveSuccessPayload || {};
+      CapNotification.success({ message: this.props.intl.formatMessage(messages.bulkUnarchiveSuccess, { count }) });
+      this.getAllTemplates({ params, resetPage: true });
+    }
+
     if (!nextProps.Templates.sendingFile && !isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && !nextProps.Templates.errorSendingFile) {
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
@@ -1595,6 +1620,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let queryParams = params || {};
     let page = this.state.page;
     const { activeMode } = this.state;
+    // Archive filter — use explicit param if provided (props may not have updated yet due to async dispatch)
+    if (!queryParams.archiveStatus) {
+      const archiveFilter = get(this.props, 'Templates.archiveFilter', 'active');
+      queryParams.archiveStatus = archiveFilter;
+    }
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
     }
@@ -1861,6 +1891,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
+    const _selectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
+    const _selectedIdsArray = _selectedIds && typeof _selectedIds.toJS === 'function' ? _selectedIds.toJS() : (Array.isArray(_selectedIds) ? _selectedIds : []);
+    const hasSelection = this.props.isFullMode && _selectedIdsArray.length > 0;
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
     switch (currentChannel) {
@@ -1900,47 +1933,58 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
       const inappBodyType = androidBodyType || iosBodyType;
       const isZaloPreviewLoading = previewTemplateId === template?._id;
+      const selectedIdsForCard = get(this.props, 'Templates.selectedTemplateIds', []);
+      const selectedIdsArrayForCard = selectedIdsForCard.toJS ? selectedIdsForCard.toJS() : selectedIdsForCard;
+      // 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 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: (
-          <span title={template?.name}>
-            {template?.name}
-            {currentChannel === INAPP && (
-              <CapRow>
-                <CapColoredTag
-                  tagColor={INAPP_LAYOUT_DETAILS[inappBodyType]?.tagColor}
-                  tagTextColor={
-                    INAPP_LAYOUT_DETAILS[inappBodyType]?.tagTextColor
-                  }
-                  tagHeight="1.25rem"
-                  tagFontSize="12px"
-                >
-                  {INAPP_LAYOUT_DETAILS[inappBodyType]?.text}
-                </CapColoredTag>
-              </CapRow>
-            )}
+          <span className="template-card-title">
+            {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
+            <CapLabel.CapLabelInline type="label1" title={template?.name} className="template-card-name">
+              {template?.name}
+              {currentChannel === INAPP && (
+                <CapRow>
+                  <CapColoredTag
+                    tagColor={INAPP_LAYOUT_DETAILS[inappBodyType]?.tagColor}
+                    tagTextColor={
+                      INAPP_LAYOUT_DETAILS[inappBodyType]?.tagTextColor
+                    }
+                    tagHeight="1.25rem"
+                    tagFontSize="0.857rem"
+                  >
+                    {INAPP_LAYOUT_DETAILS[inappBodyType]?.text}
+                  </CapColoredTag>
+                </CapRow>
+              )}
+            </CapLabel.CapLabelInline>
           </span>
         ),
-        extra: [
+        extra: isArchivedMode ? [] : [
           // Hide preview icon for channels that support Test and Preview
           // Show preview icon only for channels that don't support Test and Preview
           (() => {
             // Channels that have Test and Preview integrated
             const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
-            
+
             // Don't show preview icon if channel supports Test and Preview
             if (isTestAndPreviewSupported) {
               return null;
             }
-            
+
             // Show preview icon for other channels (e.g., WeChat, Line, Facebook, Ebill)
             if (currentChannel === ZALO && isZaloPreviewLoading) {
               return (
                 <CapSpin style={{ marginRight: "16px", position: "static", display: "inline" }} spinning />
               );
             }
-            
+
             return this.getHoverComponent(
               <CapIcon
                 className={`view-${channelLowerCase}`}
@@ -1960,7 +2004,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             );
           })()
         ],
-        hoverOption: (
+        hoverOption: isArchivedMode ? null : (
           <CapButton
             className={
               this.props.isFullMode
@@ -2000,8 +2044,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <CapDropdown
             overlay={
               <CapMenu>
-                {/* Phase 16: Test and Preview menu item - Show for supported channels */}
-                {(this.isTestAndPreviewSupported() ||
+                {/* Phase 16: Test and Preview menu item - Show for supported channels, hide in archived mode */}
+                {!isArchivedMode && (this.isTestAndPreviewSupported() ||
                   (this.state.channel.toUpperCase() === WHATSAPP &&
                     status === WHATSAPP_STATUSES.approved) || (this.state.channel.toUpperCase() === RCS &&
                     rcsStatus === RCS_STATUSES.approved)) && (
@@ -2024,7 +2068,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {![WECHAT, WHATSAPP, ZALO].includes(
                   this.state.channel.toUpperCase()
                 ) &&
-                  !isTraiDltFeature && (
+                  !isTraiDltFeature && !template.isArchived && (
                     <CapMenu.Item
                       className={`duplicate-${channelLowerCase}`}
                       onClick={() => this.duplicateTemplate(template)}
@@ -2032,6 +2076,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <FormattedMessage {...messages.duplicateButton} />
                     </CapMenu.Item>
                   )}
+                {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
+                {(() => {
+                  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>
+                  );
+                })()}
                 {/* Delete/Unmap menu item */}
                 {(!(
                   this.state.channel.toUpperCase() === WHATSAPP &&
@@ -2312,7 +2376,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP: {
           const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
-            <CapRow>
+            <CapRow type="flex" align="middle">
+              {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
             </CapRow>
@@ -2405,7 +2470,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const name = get(template, "name", "");
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
-            <CapRow>
+            <CapRow type="flex" align="middle">
+              {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
               <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
@@ -2529,7 +2595,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     //no templates available
     const showIllustrationForChannel = (forChannel) => {
-      return forChannel === channelLowerCase && isEmpty(templates) && isEmpty(this.state.searchText) && !isLoading;
+      return forChannel === channelLowerCase && isEmpty(templates) && isEmpty(this.state.searchText) && !isLoading && !get(this.props, 'Templates.isArchivedMode', false);
     }
     //when filters applied not matching templates
     const filteredEmptyAndFullModeAs = (fullModeValue) => {
@@ -2547,6 +2613,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
     const accounts = get(this.props, 'Templates.weCrmAccounts');
     const getAllTemplatesInProgress = get(this.props, 'Templates.getAllTemplatesInProgress');
+    const archiveListingRefreshType = get(this.props, 'Templates.archiveListingRefreshType', null);
+    const isArchiveOperationInProgress = get(this.props, 'Templates.archiveInProgress', false)
+      || get(this.props, 'Templates.unarchiveInProgress', false)
+      || get(this.props, 'Templates.bulkArchiveInProgress', false)
+      || get(this.props, 'Templates.bulkUnarchiveInProgress', false);
 
     const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates) || !this.state.hostName;
     const noApprovedWhatsappZaloTemplates = filteredEmptyAndFullModeAs(false) && !isEmpty(this.state?.hostName);
@@ -2555,9 +2626,36 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-return (<div>
+    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 = this.props.isFullMode && selectedCountLocal > 0;
+
+    return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
-      {filterContent}
+      <CapRow type="flex" align="middle" justify="space-between" className="filter-row">
+        <div className="filter-row-content">{filterContent}</div>
+        {hasSelectionLocal && (
+          <CapRow type="flex" align="middle" className="bulk-selection-bar">
+            <CapLabel type="label2">
+              {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
+            </CapLabel>
+            <CapButton
+              type="primary"
+              prefix={<CapIcon type="archive" size="l" />}
+              onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
+            >
+              <span className="archive-btn-label">
+                <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
+              </span>
+            </CapButton>
+            <CapButton type="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
+              <FormattedMessage {...messages.archiveConfirmCancel} />
+            </CapButton>
+          </CapRow>
+        )}
+      </CapRow>
       {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
@@ -2570,7 +2668,7 @@ return (<div>
                 fbType={"list"}
                 />
             </div>)
-            : [SMS_LOWERCASE, EMAIL_LOWERCASE].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
+            : [SMS_LOWERCASE, EMAIL_LOWERCASE].includes(this.state.channel.toLowerCase()) && !isLoading && !get(this.props, 'Templates.isArchivedMode', false) && this.getSmsEmailIllustration()
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && ([WECHAT_LOWERCASE, MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) &&
@@ -2594,7 +2692,7 @@ return (<div>
               </div>
             )
           }
-          {(showWhatsappIllustration || showZaloIllustration) && (
+          {(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}/>}
@@ -2635,8 +2733,27 @@ return (<div>
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} 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}
+                currentChannel={currentChannel}
+                isArchivedMode
+              />
+            </CapRow>
+          )}
           {<CapCustomSkeleton loader={isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
-          {<CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
+          {!isInitialLoading && getAllTemplatesInProgress && archiveListingRefreshType ? (
+            <div className="archive-listing-spinner">
+              <CapSpin spinning />
+              <CapLabel.CapLabelInline type="label1">
+                {archiveListingRefreshType === ARCHIVE_REFRESH_TYPE_ARCHIVE ? this.props.intl.formatMessage(messages.archivalInProgress) : this.props.intl.formatMessage(messages.unarchivalInProgress)}
+              </CapLabel.CapLabelInline>
+            </div>
+          ) : (
+            <CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />
+          )}
         </div>
         }
     </div>);
@@ -3278,6 +3395,10 @@ return (<div>
   };
 
   handleEditClick(e, template, modeType, path, options) {
+    if (template && template.isArchived) {
+      CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
+      return;
+    }
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
@@ -3459,6 +3580,87 @@ return (<div>
     this.setState({showModal: false});
   }
 
+  renderCardSelectionCheckbox = ({ templateId, selectedIds, isDisabled }) => {
+    if (!this.props.isFullMode || this.props.location.query.type === EMBEDDED) return null;
+    return (
+      <CapCheckbox
+        checked={selectedIds.includes(templateId)}
+        onChange={() => !isDisabled && this.props.actions.toggleTemplateSelection(templateId)}
+        onClick={(e) => e.stopPropagation()}
+        disabled={isDisabled}
+      />
+    );
+  }
+
+  handleBulkArchiveAction = ({ ids, count, isUnarchive = false }) => {
+    const { intl, actions } = this.props;
+    const { channel } = this.state;
+    const title = isUnarchive
+      ? intl.formatMessage(messages.unarchiveTemplates)
+      : intl.formatMessage(messages.archiveTemplates);
+    const action = isUnarchive ? actions.bulkUnarchiveTemplates : actions.bulkArchiveTemplates;
+    const successMessage = (c) => intl.formatMessage(
+      isUnarchive ? messages.bulkUnarchiveSuccess : messages.bulkArchiveSuccess,
+      { count: c }
+    );
+    this.showArchiveConfirm({
+      title,
+      count,
+      isUnarchive,
+      onConfirm: () => action(channel, ids, successMessage),
+    });
+  };
+
+  handleTemplateArchiveAction = ({ templateId, templateName, isUnarchive = false }) => {
+    const { intl, actions } = this.props;
+    const { channel } = this.state;
+    const title = isUnarchive
+      ? intl.formatMessage(messages.unarchiveTemplates)
+      : intl.formatMessage(messages.archiveTemplates);
+    const successMessage = isUnarchive
+      ? intl.formatMessage(messages.unarchiveTemplateSuccess)
+      : intl.formatMessage(messages.archiveTemplateSuccess);
+    const action = isUnarchive ? actions.unarchiveTemplate : actions.archiveTemplate;
+    this.showArchiveConfirm({
+      title,
+      count: 1,
+      isUnarchive,
+      onConfirm: () => action(
+        channel,
+        templateId,
+        successMessage,
+        buildTemplateNameDescription(intl.formatMessage(messages.templateNameLabel), templateName)
+      ),
+    });
+  };
+
+  // Shared helper for archive/unarchive confirm modals:
+  // - no icon, lighter overlay, Confirm button on left (primary), Cancel on right
+  showArchiveConfirm = ({ title, content, onConfirm, count = 1, isUnarchive = false }) => {
+    const { intl } = this.props;
+    const confirmText = intl.formatMessage(messages.archiveConfirmOk);
+    const cancelText = intl.formatMessage(messages.archiveConfirmCancel);
+    // Derive content from count if not explicitly provided
+    const resolvedContent = content || (isUnarchive
+      ? intl.formatMessage(count > 1 ? messages.unarchiveTemplateContent : messages.unarchiveTemplateSingleContent)
+      : intl.formatMessage(count > 1 ? messages.archiveTemplateContent : messages.archiveTemplateSingleContent));
+    // AntD v3 footer order is [cancelButton][okButton]. Swap text+handler so
+    // "Confirm" (primary) appears on the left and "Cancel" (default) on the right.
+    CapModal.confirm({
+      title,
+      content: resolvedContent,
+      icon: ' ',
+      className: 'archive-confirm-modal',
+      maskStyle: { backgroundColor: 'rgba(0, 0, 0, 0.25)' },
+      cancelText: confirmText,
+      okText: cancelText,
+      cancelButtonProps: { type: 'primary' },
+      okButtonProps: { type: 'default' },
+      onCancel: (close) => { onConfirm(); close(); },
+      // onOk (the right "Cancel" button) just closes the modal — default behaviour
+    });
+  }
+
   populateTemplatesList = (data, blankTemplateRequired, layoutSelection) => {
     if (!data) {
       return [];
@@ -3608,22 +3810,71 @@ return (<div>
         deleteOption = this.props.intl.formatMessage(messages.unMapButton);
       }
       if (!layoutSelection) {
+        // Determine archive eligibility for this template:
+        // - Zalo: never eligible
+        // - WhatsApp: not eligible when status is awaitingApproval / pending / unsubmitted
+        // - RCS: not eligible when status is awaitingApproval / pending
+        const templateWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
+        const templateRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
+        const channelUpCase = this.state.channel.toUpperCase();
+        const isTemplateArchiveEligible = this.isChannelArchiveEligible(channelUpCase, templateWhatsappStatus, templateRcsStatus);
+
+        // Checkbox on card header (full mode only, only for archive-eligible templates)
+        if (this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isTemplateArchiveEligible) {
+          const selectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
+          const selectedIdsArray = selectedIds.toJS ? selectedIds.toJS() : selectedIds;
+          temp.cardTop = (
+            <CapRow type="flex" align="middle" justify="space-between" className="template-card-top-bar">
+              <CapCheckbox
+                checked={selectedIdsArray.includes(template._id)}
+                onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
+                onClick={(e) => e.stopPropagation()}
+              />
+            </CapRow>
+          );
+        }
+
         temp.footer = (
           <div className="footer-container">
             <div className="card-title">
               <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}
+                {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
+              {this.props.location.query.type !== EMBEDDED && <CapPopover
                 trigger="click"
                 content={
                   <div className="popover-content">
-                    {this.state.channel !== 'wechat' && <div className="popover-action-container">
-                      <span onClick={() => this.duplicateTemplate(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{this.props.intl.formatMessage(messages.duplicateButton)}</span>
+                    {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>
+                    </div>}
+                    {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>
+                    </div>}
+                    {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>
                     </div>}
                     <div className="popover-action-container">
-                      <span onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{deleteOption}</span>
+                      <CapButton type="link" onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action">
+                        {deleteOption}
+                      </CapButton>
                     </div>
                   </div>
                 }
@@ -3676,7 +3927,20 @@ return (<div>
       return false;
     }
   }
-  isFullMode = () => this.props.location.query.type !== "embedded" || this.props.isFullMode
+  isFullMode = () => this.props.location.query.type !== EMBEDDED || this.props.isFullMode
+
+  isChannelArchiveEligible = (channel, whatsappStatus, rcsStatus) => (
+    channel !== ZALO &&
+    !(channel === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(whatsappStatus)) &&
+    !(channel === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(rcsStatus))
+  )
+
+  setArchivedMode = (isArchived) => {
+    this.props.actions.setArchivedMode(isArchived);
+    this.setState({ searchText: '', page: 1 }, () => {
+      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: isArchived ? ARCHIVE_STATUS_ARCHIVED : ARCHIVE_STATUS_ACTIVE }, resetPage: true }, true);
+    });
+  }
   isCreateDisabled = () => {
     let isDisabled = this.isLoading();
     const channel = this.state.channel.toUpperCase();
@@ -4214,11 +4478,16 @@ return (<div>
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = 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 = this.props.isFullMode && _renderSelectedIdsArray.length > 0;
+
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
         style={{width: '210px'}}
-        placeholder={this.props.intl.formatMessage(messages.searchText)}
+        placeholder={_isArchivedMode ? this.props.intl.formatMessage(messages.searchArchivedTemplates) : this.props.intl.formatMessage(messages.searchText)}
         value={this.state.searchText}
         onChange={(e) => this.searchTemplate(e.target.value, this.state.channel)}
         disabled={this.checkSearchDisabled()}
@@ -4370,9 +4639,9 @@ return (<div>
           </div>
         )
       }
-      <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {
-          this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded)? (
+      <div className="template-listing-header-actions">
+        {!_isArchivedMode && !_renderHasSelection && (
+          this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded) ? (
             <CapTooltip title={whatsappCountExceedText}>
               <div className="button-disabled-tooltip-wrapper">
                 {createButton}
@@ -4380,9 +4649,29 @@ return (<div>
             </CapTooltip>
           )
             : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && createButton
-        }
+        )}
+        {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active */}
+        {!_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>);
     let htmlPreviewContent = "";
     if (this.state.channel.toLowerCase() === 'ebill') {
@@ -4431,6 +4720,18 @@ return (<div>
             }
           />
 
+          {/* Archived mode header with back arrow (full mode only) */}
+          {this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
+            <CapRow type="flex" align="middle" className="archived-mode-header">
+              <CapIcon
+                type="back"
+                className="archived-mode-back-icon"
+                onClick={() => this.setArchivedMode(false)}
+              />
+              <CapHeading type="h3"><FormattedMessage {...messages.archivedTemplates} /></CapHeading>
+            </CapRow>
+          )}
+
           {channel.toLowerCase() === WHATSAPP_LOWERCASE &&
           showWhatsappCountWarning ? (
             <CapAlert message={whatsappCountExceedText} type="info" />