@capillarytech/creatives-library 8.0.345 → 8.0.347

package/v2Containers/Templates/index.js

@@ -81,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';
@@ -106,7 +106,7 @@ import {
   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 { COPY_OF, EMBEDDED } from '../../constants/unified';
 import {
   STATUS_OPTIONS,
   CATEGORY,
@@ -819,6 +819,41 @@ 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 { successMessage, count } = nextProps.Templates.bulkArchiveSuccessPayload || {};
+      const msg = successMessage ? successMessage(count) : `${count} templates archived successfully`;
+      CapNotification.success({ message: msg });
+      this.getAllTemplates({ params, resetPage: true });
+    }
+
+    const wasBulkUnarchiving = this.props.Templates.bulkUnarchiveInProgress;
+    const isBulkUnarchiveDone = !nextProps.Templates.bulkUnarchiveInProgress && wasBulkUnarchiving;
+    if (isBulkUnarchiveDone && !nextProps.Templates.bulkUnarchiveError) {
+      const { successMessage, count } = nextProps.Templates.bulkUnarchiveSuccessPayload || {};
+      const msg = successMessage ? successMessage(count) : `${count} templates unarchived successfully`;
+      CapNotification.success({ message: msg });
+      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;
@@ -1905,58 +1940,60 @@ 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 isCardArchiveEligible = currentChannel !== ZALO &&
-        !(currentChannel === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(cardWhatsappStatus)) &&
-        !(currentChannel === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(cardRcsStatus));
+      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} style={{ display: 'flex', alignItems: 'center' }}>
-            {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
+          <span className="template-card-title">
+            {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
               <CapCheckbox
                 checked={selectedIdsArrayForCard.includes(template._id)}
-                onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
+                onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
                 onClick={(e) => e.stopPropagation()}
-                style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
+                disabled={isAnyArchiveInProgress}
               />
             )}
-            {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>
-            )}
+            <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="12px"
+                  >
+                    {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}`}
@@ -1976,7 +2013,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             );
           })()
         ],
-        hoverOption: (
+        hoverOption: isArchivedMode ? null : (
           <CapButton
             className={
               this.props.isFullMode
@@ -2016,8 +2053,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)) && (
@@ -2051,34 +2088,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
                 {(() => {
                   const channelUp = this.state.channel.toUpperCase();
-                  const isArchiveEligible = channelUp !== ZALO &&
-                    !(channelUp === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(status)) &&
-                    !(channelUp === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(rcsStatus));
-                  if (!isArchiveEligible) return null;
+                  if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
                   return !template.isArchived ? (
                     <CapMenu.Item
                       className={`archive-${channelLowerCase}`}
-                      onClick={() => {
-                        this.showArchiveConfirm({
-                          title: this.props.intl.formatMessage(messages.archiveTemplates),
-                          onConfirm: () => this.props.actions.archiveTemplate(this.state.channel, template._id, template.name),
-                          count: 1,
-                        });
-                      }}
+                      onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
                     >
                       <FormattedMessage {...messages.archiveButton} />
                     </CapMenu.Item>
                   ) : (
                     <CapMenu.Item
                       className={`unarchive-${channelLowerCase}`}
-                      onClick={() => {
-                        this.showArchiveConfirm({
-                          title: this.props.intl.formatMessage(messages.unarchiveTemplates),
-                          onConfirm: () => this.props.actions.unarchiveTemplate(this.state.channel, template._id, template.name),
-                          count: 1,
-                          isUnarchive: true,
-                        });
-                      }}
+                      onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
                     >
                       <FormattedMessage {...messages.unarchiveButton} />
                     </CapMenu.Item>
@@ -2365,13 +2386,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
             <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
+              {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
                 <CapCheckbox
                   checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
+                  onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
                   onClick={(e) => e.stopPropagation()}
-                  style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
-                />
+                  disabled={isAnyArchiveInProgress}
+                  />
               )}
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
@@ -2466,13 +2487,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
             <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
+              {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
                 <CapCheckbox
                   checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
+                  onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
                   onClick={(e) => e.stopPropagation()}
-                  style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
-                />
+                  disabled={isAnyArchiveInProgress}
+                  />
               )}
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
               <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
@@ -2615,6 +2636,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);
@@ -2641,20 +2667,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapButton
               type="primary"
               prefix={<CapIcon type="archive" size="l" />}
-              onClick={() => {
-                this.showArchiveConfirm({
-                  title: this.props.intl.formatMessage(isArchivedModeLocal ? messages.unarchiveTemplates : messages.archiveTemplates),
-                  onConfirm: () => {
-                    if (isArchivedModeLocal) {
-                      this.props.actions.bulkUnarchiveTemplates(this.state.channel, selectedIdsArrayLocal);
-                    } else {
-                      this.props.actions.bulkArchiveTemplates(this.state.channel, selectedIdsArrayLocal);
-                    }
-                  },
-                  count: selectedCountLocal,
-                  isUnarchive: isArchivedModeLocal,
-                });
-              }}
+              onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
             >
               <span className="archive-btn-label">
                 <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
@@ -2744,17 +2757,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
           }
           {get(this.props, 'Templates.isArchivedMode', false) && isEmpty(templates) && !isLoading && !getAllTemplatesInProgress && isEmpty(this.state.searchText) && (
-            <div className={this.isFullMode() ? 'illustration-scroll-wrapper' : ''}>
+            <CapRow className={this.isFullMode() ? 'illustration-scroll-wrapper' : ''}>
               <ChannelTypeIllustration
                 isFullMode={this.props.isFullMode}
                 createTemplate={this.createTemplate}
                 currentChannel={currentChannel}
                 isArchivedMode
               />
-            </div>
+            </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' ? 'Archival in progress' : 'Unarchival in progress'}
+              </CapLabel.CapLabelInline>
+            </div>
+          ) : (
+            <CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />
+          )}
         </div>
         }
     </div>);
@@ -3581,6 +3603,48 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({showModal: false});
   }
 
+  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 }) => {
@@ -3764,22 +3828,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         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 = channelUpCase !== ZALO &&
-          !(channelUpCase === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(templateWhatsappStatus)) &&
-          !(channelUpCase === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(templateRcsStatus));
+        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) {
+        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 = (
-            <div className="template-card-top-bar">
+            <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()}
               />
-            </div>
+            </CapRow>
           );
         }
 
@@ -3791,46 +3853,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {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' && !template.isArchived && <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>
+                      <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">
-                      <span
-                        onClick={() => {
-                          this.showArchiveConfirm({
-                            title: this.props.intl.formatMessage(messages.archiveTemplates),
-                            onConfirm: () => this.props.actions.archiveTemplate(this.state.channel, template._id, template.name),
-                            count: 1,
-                          });
-                        }}
+                      <CapButton
+                        type="link"
+                        onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
                         className="popover-action popover-archive-action"
                       >
-                        <CapIcon type="archive" size="l" />
-                        {this.props.intl.formatMessage(messages.archiveButton)}
-                      </span>
+                        <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">
-                      <span
-                        onClick={() => {
-                          this.showArchiveConfirm({
-                            title: this.props.intl.formatMessage(messages.unarchiveTemplates),
-                            onConfirm: () => this.props.actions.unarchiveTemplate(this.state.channel, template._id, template.name),
-                            count: 1,
-                            isUnarchive: true,
-                          });
-                        }}
+                      <CapButton
+                        type="link"
+                        onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true })}
                         className="popover-action popover-archive-action"
                       >
-                        <CapIcon type="archive" size="l" />
-                        {this.props.intl.formatMessage(messages.unarchiveButton)}
-                      </span>
+                        <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>
                 }
@@ -3883,7 +3938,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       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))
+  )
+
+  enterArchivedMode = () => {
+    this.props.actions.setArchivedMode(true);
+    this.setState({ searchText: '', page: 1 }, () => {
+      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: 'archived' }, resetPage: true }, true);
+    });
+  }
+
+  exitArchivedMode = () => {
+    this.props.actions.setArchivedMode(false);
+    this.setState({ searchText: '', page: 1 }, () => {
+      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: 'active' }, resetPage: true }, true);
+    });
+  }
   isCreateDisabled = () => {
     let isDisabled = this.isLoading();
     const channel = this.state.channel.toUpperCase();
@@ -4594,20 +4669,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             : 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 && (
+        {!_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.props.actions.setArchivedMode(true);
-                    this.setState({ searchText: '', page: 1 }, () => {
-                      const params = { name: '', sortBy: this.state.sortBy, archiveStatus: 'archived' };
-                      this.getAllTemplates({ params, resetPage: true }, true);
-                    });
-                  }}
+                  onClick={this.enterArchivedMode}
                 >
                   <FormattedMessage {...messages.archivedTemplates} />
                 </CapMenu.Item>
@@ -4658,6 +4727,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className={`creatives-templates-list ${
             this.props.isFullMode ? "full-mode" : "library-mode"
           }`}
+          style={{ position: 'relative' }}
         >
           <input
             type="file"
@@ -4675,13 +4745,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <CapIcon
                 type="back"
                 className="archived-mode-back-icon"
-                onClick={() => {
-                  this.props.actions.setArchivedMode(false);
-                  this.setState({ searchText: '', page: 1 }, () => {
-                    const params = { name: '', sortBy: this.state.sortBy, archiveStatus: 'active' };
-                    this.getAllTemplates({ params, resetPage: true }, true);
-                  });
-                }}
+                onClick={this.exitArchivedMode}
               />
               <CapHeading type="h3"><FormattedMessage {...messages.archivedTemplates} /></CapHeading>
             </CapRow>

package/v2Containers/Templates/messages.js

@@ -686,4 +686,24 @@ export default defineMessages({
     id: `${scope}.noArchivedCreativesDesc`,
     defaultMessage: 'Creatives you archive will appear here',
   },
+  "templateNameLabel": {
+    id: `${scope}.templateNameLabel`,
+    defaultMessage: 'Template name ',
+  },
+  "archiveTemplateSuccess": {
+    id: `${scope}.archiveTemplateSuccess`,
+    defaultMessage: 'Template archived successfully',
+  },
+  "unarchiveTemplateSuccess": {
+    id: `${scope}.unarchiveTemplateSuccess`,
+    defaultMessage: 'Template unarchived successfully',
+  },
+  "bulkArchiveSuccess": {
+    id: `${scope}.bulkArchiveSuccess`,
+    defaultMessage: '{count} {count, plural, one {template} other {templates}} archived successfully',
+  },
+  "bulkUnarchiveSuccess": {
+    id: `${scope}.bulkUnarchiveSuccess`,
+    defaultMessage: '{count} {count, plural, one {template} other {templates}} unarchived successfully',
+  },
 });

package/v2Containers/Templates/reducer.js

@@ -33,6 +33,7 @@ export const initialState = fromJS({
   unarchiveInProgress: false,
   bulkArchiveInProgress: false,
   bulkUnarchiveInProgress: false,
+  archiveListingRefreshType: null,
 });
 
 function templatesReducer(state = initialState, action) {
@@ -44,16 +45,18 @@ function templatesReducer(state = initialState, action) {
     case types.GET_ALL_TEMPLATES_SUCCESS:
       if (action.isReset) {
         return state.set('getAllTemplatesInProgress', false)
+          .set('archiveListingRefreshType', null)
           .set('templates', action.data ? action.data.templates : [])
           .set('isSearch', action.data ? action.data.search : false)
           .set('weCRMtemplates', action.weCRMTemplate ? action.weCRMTemplate : []).set('templateError', {});
       }
       return state.set('getAllTemplatesInProgress', false)
+        .set('archiveListingRefreshType', null)
         .set('templates', action.data ? state.get('templates').concat(action.data.templates) : [])
         .set('isSearch', action.data ? action.data.search : false)
         .set('weCRMtemplates', action.weCRMTemplate ? state.get('weCRMtemplates').concat(action.weCRMTemplate) : []);
     case types.GET_ALL_TEMPLATES_FAILURE:
-      return state.set('getAllTemplatesInProgress', false).set('templateError', action.error);
+      return state.set('getAllTemplatesInProgress', false).set('archiveListingRefreshType', null).set('templateError', action.error);
     case types.DELETE_TEMPLATE_REQUEST:
       return state.set('deleteTemplateInProgress', true)
         .set('deleteTemplateError', null);
@@ -266,39 +269,51 @@ function templatesReducer(state = initialState, action) {
     case types.CLEAR_TEMPLATE_SELECTION:
       return state.set('selectedTemplateIds', fromJS([]));
     case types.ARCHIVE_TEMPLATE_REQUEST:
-      return state.set('archiveInProgress', true);
+      return state.set('archiveInProgress', true).set('archiveError', null);
     case types.ARCHIVE_TEMPLATE_SUCCESS: {
       const afterArchive = state.get('selectedTemplateIds');
       const archiveSelected = afterArchive && typeof afterArchive.toJS === 'function' ? afterArchive.toJS() : [];
       return state
         .set('archiveInProgress', false)
+        .set('archiveError', null)
+        .set('archiveSuccessPayload', { successMessage: action.successMessage, description: action.description })
         .set('selectedTemplateIds', fromJS(archiveSelected.filter((sid) => sid !== action.id)));
     }
     case types.ARCHIVE_TEMPLATE_FAILURE:
-      return state.set('archiveInProgress', false);
+      return state.set('archiveInProgress', false).set('archiveError', action.error);
     case types.UNARCHIVE_TEMPLATE_REQUEST:
-      return state.set('unarchiveInProgress', true);
+      return state.set('unarchiveInProgress', true).set('unarchiveError', null);
     case types.UNARCHIVE_TEMPLATE_SUCCESS: {
       const afterUnarchive = state.get('selectedTemplateIds');
       const unarchiveSelected = afterUnarchive && typeof afterUnarchive.toJS === 'function' ? afterUnarchive.toJS() : [];
       return state
         .set('unarchiveInProgress', false)
+        .set('unarchiveError', null)
+        .set('unarchiveSuccessPayload', { successMessage: action.successMessage, description: action.description })
         .set('selectedTemplateIds', fromJS(unarchiveSelected.filter((sid) => sid !== action.id)));
     }
     case types.UNARCHIVE_TEMPLATE_FAILURE:
-      return state.set('unarchiveInProgress', false);
+      return state.set('unarchiveInProgress', false).set('unarchiveError', action.error);
     case types.BULK_ARCHIVE_REQUEST:
-      return state.set('bulkArchiveInProgress', true);
+      return state.set('bulkArchiveInProgress', true).set('bulkArchiveError', null);
     case types.BULK_ARCHIVE_SUCCESS:
-      return state.set('bulkArchiveInProgress', false).set('selectedTemplateIds', fromJS([]));
+      return state
+        .set('bulkArchiveInProgress', false)
+        .set('bulkArchiveError', null)
+        .set('bulkArchiveSuccessPayload', { successMessage: action.successMessage, count: action.count })
+        .set('selectedTemplateIds', fromJS([]));
     case types.BULK_ARCHIVE_FAILURE:
-      return state.set('bulkArchiveInProgress', false);
+      return state.set('bulkArchiveInProgress', false).set('bulkArchiveError', action.error);
     case types.BULK_UNARCHIVE_REQUEST:
-      return state.set('bulkUnarchiveInProgress', true);
+      return state.set('bulkUnarchiveInProgress', true).set('bulkUnarchiveError', null);
     case types.BULK_UNARCHIVE_SUCCESS:
-      return state.set('bulkUnarchiveInProgress', false).set('selectedTemplateIds', fromJS([]));
+      return state
+        .set('bulkUnarchiveInProgress', false)
+        .set('bulkUnarchiveError', null)
+        .set('bulkUnarchiveSuccessPayload', { successMessage: action.successMessage, count: action.count })
+        .set('selectedTemplateIds', fromJS([]));
     case types.BULK_UNARCHIVE_FAILURE:
-      return state.set('bulkUnarchiveInProgress', false);
+      return state.set('bulkUnarchiveInProgress', false).set('bulkUnarchiveError', action.error);
     default:
       return state;
   }