@capillarytech/creatives-library 8.0.345-alpha.11 → 8.0.345-alpha.13

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -705,27 +705,8 @@ export function SlideBoxContent(props) {
           // and getDetails?type=BEE_PLUGIN would never fire. Routing BEE
           // templates through the direct <Email> path — which is already
           // battle-tested for the CKEditor flow — sidesteps that entirely.
-          const vBase = templateData?.versions?.base;
-          const vBaseActiveTab = vBase?.activeTab || vBase?.selectedLanguages?.[0] || 'en';
           const isBEETemplate = templateData?.base?.is_drag_drop === true
-            || templateData?.base?.is_drag_drop === 1
-            || vBase?.[vBaseActiveTab]?.is_drag_drop === true
-            || vBase?.[vBaseActiveTab]?.is_drag_drop === 1;
-          console.log('[SlideBoxContent] BEE routing debug', {
-            supportCKEditor,
-            'templateData._id': templateData?._id,
-            'templateData.type': templateData?.type,
-            'templateData.base': templateData?.base,
-            'templateData.base.is_drag_drop': templateData?.base?.is_drag_drop,
-            'templateData.base.drag_drop_id': templateData?.base?.drag_drop_id,
-            vBase,
-            vBaseActiveTab,
-            'vBase[vBaseActiveTab]': vBase?.[vBaseActiveTab],
-            'vBase[vBaseActiveTab].is_drag_drop': vBase?.[vBaseActiveTab]?.is_drag_drop,
-            'vBase[vBaseActiveTab].drag_drop_id': vBase?.[vBaseActiveTab]?.drag_drop_id,
-            isBEETemplate,
-            routingTo: (supportCKEditor || isBEETemplate) ? 'Email (direct)' : 'EmailWrapper',
-          });
+            || templateData?.base?.is_drag_drop === 1;
           if (supportCKEditor || isBEETemplate) {
             return (
               <Email

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -24,6 +24,7 @@ function SlideBoxFooter(props) {
     slidBoxContent,
     onSave,
     onEditTemplate,
+    isTemplateArchived,
     onCreateNextStep,
     isFullMode,
     fetchingCmsData,
@@ -214,7 +215,7 @@ function SlideBoxFooter(props) {
             <FormattedMessage {...(continueButtonLabel || messages.continue)} />
           </CapButton>
         )}
-        {slidBoxContent === PREVIEW && (
+        {slidBoxContent === PREVIEW && !isTemplateArchived && (
           <CapButton onClick={onEditTemplate} type="secondary">
             <FormattedMessage {...messages.creativesTemplatesEdit} />
           </CapButton>
@@ -227,6 +228,7 @@ SlideBoxFooter.propTypes = {
   slidBoxContent: PropTypes.node,
   onSave: PropTypes.func,
   onEditTemplate: PropTypes.func,
+  isTemplateArchived: PropTypes.bool,
   onCreateNextStep: PropTypes.func,
   shouldShowContinueFooter: PropTypes.func,
   shouldShowDoneFooter: PropTypes.func,

package/v2Containers/CreativesContainer/index.js

@@ -260,6 +260,10 @@ export class Creatives extends React.Component {
   };
 
   onEditTemplate = () => {
+    if (this.props.templateData && this.props.templateData.isArchived) {
+      CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
+      return;
+    }
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
   };
 
@@ -966,13 +970,10 @@ export class Creatives extends React.Component {
       case constants.EMAIL:
         if (template?.value?.base) {
           let emailBase = template.value.base;
-          const { html_content, drag_drop_id: formDragDropId } = emailBase || {};
+          const { html_content } = emailBase || {};
           if (!html_content) {
             emailBase = templateRecords.base;
           }
-          if (!emailBase.drag_drop_id && formDragDropId) {
-            emailBase = { ...emailBase, drag_drop_id: formDragDropId };
-          }
           const newHtmlContent = await updateImagesInHtml(html_content);
           templateData = {
             ...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : '',
@@ -2139,6 +2140,7 @@ export class Creatives extends React.Component {
               onSave={this.saveMessage}
               onDiscard={this.discardMessage}
               onEditTemplate={this.onEditTemplate}
+              isTemplateArchived={!!(this.props.templateData && this.props.templateData.isArchived)}
               slidBoxContent={slidBoxContent}
               onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}

package/v2Containers/CreativesContainer/messages.js

@@ -390,4 +390,8 @@ export default defineMessages({
     id: `${scope}.personalizationTokensErrorMessage`,
     defaultMessage: `Personalization tags are not supported for anonymous customers, please remove the tags.`,
   },
+  "cannotEditArchivedTemplate": {
+    id: `${scope}.cannotEditArchivedTemplate`,
+    defaultMessage: 'Cannot edit an archived template. Please unarchive it first.',
+  },
 });

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

@@ -295,6 +295,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         isEmptyContent={false}
         isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateArchived={false}
         isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}
@@ -434,6 +435,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         isEmptyContent={false}
         isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateArchived={false}
         isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}
@@ -573,6 +575,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         isEmptyContent={false}
         isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateArchived={false}
         isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}

package/v2Containers/Email/index.js

@@ -32,7 +32,7 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT, LOYALTY } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
@@ -98,8 +98,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.edmEvent = undefined;
     // When schema is set after CmsSettings (e.g. library create BEE), allow BEE init to run once
     this.schemaJustFilledForBee = false;
-    // Guard: prevent startTemplateCreation being called twice (componentDidMount + componentWillReceiveProps)
-    this.templateCreationStarted = false;
     this.supportedLanguages = this.getSupportedLanguages(props);
     this.map = {
       "template-name": {
@@ -226,7 +224,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
           || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
           || this.props.Templates.BEETemplate?._id;
-          console.log('[Rafeeq manzoor] comes here 1');
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', undefined, isBEESupport, isBEEAppEnable);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
         // Extract drag_drop_id - check multiple possible paths
@@ -237,7 +234,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
           || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
           || this.props.Templates.BEETemplate?._id;
-        console.log('[Rafeeq manzoor] comes here 2');
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
@@ -290,10 +286,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         
         if (this.props.params.id) {
           const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
-          console.log('[Rafeeq manzoor] comes here 3');
           this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
         } else {
-          console.log('[Rafeeq manzoor] comes here 4');
           this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
         }
       }
@@ -304,24 +298,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
       this.setState((prev) => ({ loadingStatus: Math.max(prev.loadingStatus, 2) }));
     }
-
-    // For loyalty library mode: componentWillReceiveProps may never fire if Redux state is
-    // already stable after mount (schema cached, BEETemplate already empty). Call
-    // startTemplateCreation directly here so the BEE editor always initialises.
-    if (
-      !this.templateCreationStarted
-      && this.state.isEdit
-      && this.props.moduleType === LOYALTY
-      && this.props.location.query.module === 'library'
-      && !_.isEmpty(this.props.templateData)
-      && !this.props.params.id
-      && !this.props.isGetFormData
-      && _.isEmpty(_.get(this, `state.formData['template-subject']`))
-    ) {
-      this.templateCreationStarted = true;
-      console.log('[componentDidMount] loyalty library - calling startTemplateCreation directly', this.props.templateData);
-      this.startTemplateCreation(this.props.templateData);
-    }
   }
 
 
@@ -355,7 +331,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.getFormData();
       }
     }
-    console.log('[Rafeeq manzoor] nextProps', nextProps, _.isEmpty(this.state.formData));
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
     }
@@ -384,7 +359,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }, 0);
     }
     if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details && !_.isEmpty(nextProps.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
-      console.log('[Rafeeq manzoor] if condition');
       const formData = this.initFormData(nextProps);
       formData['template-version-options'] = [
         {
@@ -478,10 +452,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           // Extract langId from active tab
           const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
           if (hasParamsId) {
-            console.log('[Rafeeq manzoor] comes here 5');
             this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
           } else if (nextProps.location.query.module !== "library" || (nextProps.location.query.module === "library" && !nextProps.templateData)) {
-            console.log('[Rafeeq manzoor] comes here 6');
             this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
           }
         }
@@ -498,12 +470,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
         });
       }
-      console.log('[Rafeeq manzoor] here we have data 1', this.state.isEdit, nextProps.location.query.module);
-      console.log('[Rafeeq manzoor] here we have data 2', nextProps.templateData, !_.isEmpty(nextProps.templateData), this.props.params.id, nextProps.isGetFormData);
-      console.log('[Rafeeq manzoor] here we have data 3', _.isEmpty(_.get(this, `state.formData['template-subject']`)));
-
-      if (!this.templateCreationStarted && this.state.isEdit && nextProps.moduleType === LOYALTY && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
-        this.templateCreationStarted = true;
+      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
       if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData !== nextProps.isGetFormData)) {
@@ -1271,7 +1238,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         //   formData.base.activeTab = language;
         // }
         if (language && editData.versions.base[language].is_drag_drop && isBEEAppEnable) {
-          console.log('[Rafeeq manzoor] comes here 7');
           this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport, isBEEAppEnable);
         }
       });
@@ -1495,7 +1461,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const currentTab = this.state.currentTab - 1;
       const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
       if (formData[currentTab][baseLanguage].is_drag_drop && isBEEAppEnable) {
-        console.log('[Rafeeq manzoor] comes here 8');
         this.props.actions.getCmsSetting(BEE_PLUGIN, formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport, isBEEAppEnable);
       }
     });
@@ -1674,9 +1639,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (content.id) {
         tmpData.id = content.id;
       }
-      if (content.drag_drop_id) {
-        tmpData.drag_drop_id = content.drag_drop_id;
-      }
     }
     newFormData.base = _.cloneDeep(tmpData);
     newFormData.secondary_templates.push({template_data: tmpData});
@@ -2553,7 +2515,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
           if (templates.drag_drop_id && isBEEAppEnable) {
             tempData.drag_drop_id = templates.drag_drop_id;
-            console.log('[Rafeeq manzoor] comes here 9');
             this.props.actions.getCmsSetting(BEE_PLUGIN, tempData._id, 'open', tempData.iso_code, isEdmSupport, isBEEAppEnable);
           }
           // formData.usingTabContainer = true;
@@ -2574,17 +2535,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
         this.addLanguage(false, formData, false, additionalLanguages);
       }
-      console.log("[Rafeeq manzoor] comes here lib 1", formData[0])
       formData.base = _.cloneDeep(formData[0]);
       if (formData?.['template-subject'] !== '') {
-        console.log("[Rafeeq manzoor] comes here lib 1 if", formData)
         this.setState({formData, loading: false, injectedTags: data.tags, tabKey, isDragDrop: (data.base.is_drag_drop !== 0 )}, () => {
           // this.setState({tabKey: ''});
           const isBEEEnable = this.checkBeeEditorAllowedForLibrary();
-          console.log("[Rafeeq manzoor] comes here lib 1 isBEEEnable", isBEEEnable)
           _.forEach(formData[0].selectedLanguages, (language) => {
             if (formData[0][language].is_drag_drop && isBEEEnable) {
-              console.log('[Rafeeq manzoor] comes here 10');
               this.props.actions.getCmsSetting(BEE_PLUGIN, formData[0][language].drag_drop_id, 'open', language, isEdmSupport, isBEEEnable);
             }
           });
@@ -2927,7 +2884,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // let getQuery = '';
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
       const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
-      console.log('[Rafeeq manzoor] comes here 11');
       this.props.actions.getCmsSetting(BEE_PLUGIN, data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport, isBEEAppEnable);
       // this.props.templatesActions.setEdmTemplate(data);
       this.toggleEdmEmailTemplateSelection();

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -1,5 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import { FormattedMessage } from 'react-intl';
+import { CapIllustration } from "@capillarytech/cap-ui-library";
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -8,13 +12,12 @@ import lineIllustration from '../Assets/images/lineIllustration.svg';
 import facebookIllustration from '../Assets/images/facebookIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
+import archiveEmptyStateIllustration from '../Assets/images/archive_Empty_Illustration.svg';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
-import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import messages from './messages';
-import { FormattedMessage } from 'react-intl';
-import { CapIllustration } from "@capillarytech/cap-ui-library";
-import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
+import {
+  MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH,
+} from '../CreativesContainer/constants';
 
 
 // Configuration object for channel types
@@ -80,7 +83,8 @@ function ChannelTypeIllustration(props) {
     isFullMode,
     createTemplate,
     currentChannel,
-    hostName
+    hostName,
+    isArchivedMode,
   } = props;
 
   const templateText = useMemo(() => {
@@ -88,6 +92,18 @@ function ChannelTypeIllustration(props) {
     return isFullMode ? templateIntlMsg : '';
   }, [isFullMode]);
 
+  if (isArchivedMode) {
+    return (
+      <CapIllustration
+        illustrationImage={archiveEmptyStateIllustration}
+        title={<FormattedMessage {...messages.noArchivedCreatives} />}
+        description={<FormattedMessage {...messages.noArchivedCreativesDesc} />}
+        descriptionPosition="bottom"
+        descriptionClassName="illustration-desc archive-illustration"
+      />
+    );
+  }
+
   const getChannelTypeIllustrationInfo = (type, hostName) => {
     // Handle special cases with hostName dependency
     if (type === WHATSAPP) {
@@ -196,5 +212,6 @@ ChannelTypeIllustration.propTypes = {
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
+  isArchivedMode: PropTypes.bool,
 };
 export default ChannelTypeIllustration;

package/v2Containers/Templates/_templates.scss

@@ -1,34 +1,22 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: 16px;
+    margin-top: $CAP_SPACE_16;
     .ant-tabs-tabpane-active{
       padding: unset;
     }
   }
 
-@media screen and (max-width: 1172px) {
-  .creatives-templates-list.full-mode{
-    .v2-pagination-container {
-      .cap-custom-card-list-row {
-        .cap-custom-card-list-col{
-          &:nth-child(3n+3) { //every 4th child
-            margin-right: unset;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1172px) {
-  .creatives-templates-list.full-mode{
-    .v2-pagination-container {
-      .cap-custom-card-list-row {
-        .cap-custom-card-list-col{
-          &:nth-child(4n+4) { //every 4th child
-            margin-right: unset;
-          }
+// 3 cards per row across all breakpoints
+.creatives-templates-list {
+  .v2-pagination-container,
+  .v2-pagination-container-half {
+    .cap-custom-card-list-row {
+      .cap-custom-card-list-col {
+        width: calc(33.33% - #{$CAP_SPACE_08});
+        margin-right: $CAP_SPACE_12;
+        &:nth-child(3n) {
+          margin-right: 0;
         }
       }
     }
@@ -674,6 +662,32 @@
   font-size: 14px;
 }
 
+// Archive/Unarchive confirm modal overrides — scoped to avoid affecting other modals
+.archive-confirm-modal {
+  // Remove the left margin added when an icon is present
+  .ant-modal-confirm-body {
+    > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+      margin-left: 0;
+    }
+  }
+
+  // Left-align buttons, remove float
+  .ant-modal-confirm-btns {
+    float: none;
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_08;
+    margin-top: $CAP_SPACE_16;
+
+    // Cancel button styling
+    .ant-btn:not(.ant-btn-primary) {
+      background-color: $CAP_G08;
+      border-color: $CAP_G08;
+      color: $CAP_G01;
+    }
+  }
+}
+
 .popover-action-container {
   line-height: 24px;
 }
@@ -1101,4 +1115,96 @@
 .inapp-illustration-parent {
   height: "calc(100vh - 325px)";
   overflow: 'auto';
-}
+}
+
+// Archive feature layout classes
+.illustration-scroll-wrapper {
+  height: calc(100vh - 20.3125rem);
+  overflow: auto;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.filter-row-content {
+  flex: 1;
+}
+
+.bulk-selection-bar {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_12;
+  flex-shrink: 0;
+}
+
+.archived-mode-header {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_12;
+  margin-bottom: $CAP_SPACE_16;
+
+  .archived-mode-back-icon {
+    cursor: pointer;
+    font-size: 1.428rem;
+  }
+}
+
+.archived-tag {
+  margin-left: $CAP_SPACE_08;
+  font-size: 0.786rem;
+}
+
+.popover-archive-action {
+  cursor: pointer;
+  padding: $CAP_SPACE_08 0;
+}
+
+.archive-menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: $CAP_SPACE_08;
+  margin-top: 1rem;
+}
+
+.archive-btn-label {
+  margin-right: 0.714rem;
+}
+
+.bulk-selection-bar .cap-button-v2-prefix {
+  margin-top: 1rem;
+}
+
+.bulk-selection-bar .ant-btn.cap-button-v2 > .cap-button-v2-prefix + span {
+  margin-left: -$CAP_SPACE_06;
+}
+
+.template-card-top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  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: 0 $CAP_SPACE_08;
+  min-width: auto;
+}
+
+.notification-template-label {
+  color: #5E6C84;
+}
+
+.notification-template-name {
+  color: #091E42;
+}

package/v2Containers/Templates/actions.js

@@ -167,3 +167,39 @@ export function getCdnTransformationConfig() {
     type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
   };
 }
+
+export function archiveTemplate(channel, id, templateName) {
+  return { type: types.ARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
+}
+
+export function unarchiveTemplate(channel, id, templateName) {
+  return { type: types.UNARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
+}
+
+export function bulkArchiveTemplates(channel, ids) {
+  return { type: types.BULK_ARCHIVE_REQUEST, channel, ids };
+}
+
+export function bulkUnarchiveTemplates(channel, ids) {
+  return { type: types.BULK_UNARCHIVE_REQUEST, channel, ids };
+}
+
+export function setArchiveFilter(filter) {
+  return { type: types.SET_ARCHIVE_FILTER, filter };
+}
+
+export function toggleTemplateSelection(id) {
+  return { type: types.TOGGLE_TEMPLATE_SELECTION, id };
+}
+
+export function selectAllTemplates(ids) {
+  return { type: types.SELECT_ALL_TEMPLATES, ids };
+}
+
+export function clearTemplateSelection() {
+  return { type: types.CLEAR_TEMPLATE_SELECTION };
+}
+
+export function setArchivedMode(isArchived) {
+  return { type: types.SET_ARCHIVED_MODE, isArchived };
+}

package/v2Containers/Templates/constants.js

@@ -91,3 +91,26 @@ export const noApprovedWhatsappTemplatesDesc ='noApprovedWhatsappTemplatesDesc'
 export const zaloDescIllustration='zaloDescIllustration'
 export const noApprovedRcsTemplatesTitle='noApprovedRcsTemplatesTitle'
 export const noApprovedRcsTemplatesDesc='noApprovedRcsTemplatesDesc'
+
+// Archive feature
+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';
+
+export const UNARCHIVE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_REQUEST';
+export const UNARCHIVE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_SUCCESS';
+export const UNARCHIVE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_FAILURE';
+
+export const BULK_ARCHIVE_REQUEST = 'app/v2Containers/Templates/BULK_ARCHIVE_REQUEST';
+export const BULK_ARCHIVE_SUCCESS = 'app/v2Containers/Templates/BULK_ARCHIVE_SUCCESS';
+export const BULK_ARCHIVE_FAILURE = 'app/v2Containers/Templates/BULK_ARCHIVE_FAILURE';
+
+export const BULK_UNARCHIVE_REQUEST = 'app/v2Containers/Templates/BULK_UNARCHIVE_REQUEST';
+export const BULK_UNARCHIVE_SUCCESS = 'app/v2Containers/Templates/BULK_UNARCHIVE_SUCCESS';
+export const BULK_UNARCHIVE_FAILURE = 'app/v2Containers/Templates/BULK_UNARCHIVE_FAILURE';
+
+export const SET_ARCHIVE_FILTER = 'app/v2Containers/Templates/SET_ARCHIVE_FILTER';
+export const TOGGLE_TEMPLATE_SELECTION = 'app/v2Containers/Templates/TOGGLE_TEMPLATE_SELECTION';
+export const SELECT_ALL_TEMPLATES = 'app/v2Containers/Templates/SELECT_ALL_TEMPLATES';
+export const CLEAR_TEMPLATE_SELECTION = 'app/v2Containers/Templates/CLEAR_TEMPLATE_SELECTION';
+export const SET_ARCHIVED_MODE = 'app/v2Containers/Templates/SET_ARCHIVED_MODE';