@capillarytech/creatives-library 8.0.340-beta.0.4 → 8.0.340-beta.0.6

package/v2Containers/Email/tests/reducer.test.js

@@ -16,6 +16,53 @@ describe('emailReducer', () => {
     expect(emailReducer(undefined, action)).toMatchSnapshot();
   });
 
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets isBeeEnabled true and CmsSettings', () => {
+    const initialState = fromJS({ isBeeEnabled: null, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: true,
+      settings: { isDragDrop: true, editorType: 'bee' },
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('fetchingCmsSettings')).toBe(false);
+    expect(result.get('isBeeEnabled')).toBe(true);
+    expect(result.getIn(['CmsSettings', 'isDragDrop'])).toBe(true);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets isBeeEnabled false', () => {
+    const initialState = fromJS({ isBeeEnabled: true, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: false,
+      settings: {},
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('fetchingCmsSettings')).toBe(false);
+    expect(result.get('isBeeEnabled')).toBe(false);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — overwrites stale isBeeEnabled from CLEAR_ALL_VALUES (null)', () => {
+    const initialState = fromJS({ isBeeEnabled: null, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: true,
+      settings: { type: 'bee' },
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('isBeeEnabled')).toBe(true);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets CmsSettings to empty object when settings is {}', () => {
+    const initialState = fromJS({ CmsSettings: { old: 'data' } });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: false,
+      settings: {},
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('CmsSettings').toJS()).toEqual({});
+  });
+
   it.concurrent('it handles GET_CMS_ACCOUNTS_REQUEST action (line 111-113)', () => {
     const initialState = fromJS({
       isBeeEnabled: true, // Start with true to verify it gets set to false

package/v2Containers/Email/tests/sagas.test.js

@@ -3,6 +3,7 @@ import { expectSaga } from 'redux-saga-test-plan';
 import { takeLatest } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import { throwError } from 'redux-saga-test-plan/providers';
+import { fromJS } from 'immutable';
 import * as types from '../constants';
 import * as sagas from '../sagas';
 import { v2EmailDuplicateTemplateSaga, v2EmailSagas } from '../sagas';
@@ -709,10 +710,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: true });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: true })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails, isBeeEnabled: true })
       .run();
   });
 
@@ -727,10 +732,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: false });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: false })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails, isBeeEnabled: false })
       .run();
   });
 
@@ -743,10 +752,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: false });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: false })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: undefined })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: {}, isBeeEnabled: false })
       .run();
   });
 
@@ -755,11 +768,138 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: true });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), throwError(fakeError)],
       ])
       .put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error: fakeError })
       .run();
   });
+
+  it('should wait for accounts when fetchingCmsAccounts is true and cmsAccountsLoaded is false (accounts succeed)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+    let selectCallCount = 0;
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            selectCallCount += 1;
+            if (selectCallCount === 1) {
+              return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: true, isBeeEnabled: null });
+            }
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: true });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .dispatch({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: true })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should wait for accounts when fetchingCmsAccounts is true and cmsAccountsLoaded is false (accounts fail)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'ck', settings: {} } } },
+    };
+    let selectCallCount = 0;
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            selectCallCount += 1;
+            if (selectCallCount === 1) {
+              return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: true, isBeeEnabled: null });
+            }
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: false });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .dispatch({ type: types.GET_CMS_ACCOUNTS_FAILURE })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'ck', settings: {} }, isBeeEnabled: false })
+      .run();
+  });
+
+  it('should skip wait and use isBEEAppEnableFromAction as fallback when cmsAccountsLoaded is false but fetchingCmsAccounts is false', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: false, isBeeEnabled: null });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should use state isBeeEnabled (null) and fall back to isBEEAppEnableFromAction via ?? operator', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: null });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .call(Api.getCmsTemplateSettingsV2, basePayload.cmsType, basePayload.projectId, basePayload.cmsMode, basePayload.langId, basePayload.isEdmSupport, true)
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should use state isBeeEnabled false over isBEEAppEnableFromAction true via ?? operator (false is not null/undefined)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: false });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .call(Api.getCmsTemplateSettingsV2, basePayload.cmsType, basePayload.projectId, basePayload.cmsMode, basePayload.langId, basePayload.isEdmSupport, false)
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should derive isBeeEnabled false when cmsDetails type is undefined', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: true });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { settings: {} }, isBeeEnabled: false })
+      .run();
+  });
 });
 
 

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -102,6 +102,10 @@ const useEmailWrapper = ({
     }
   }, [onEnterTemplateName, onRemoveTemplateName]);
 
+  useEffect(() => () => {
+    emailActions.clearStoreValues();
+  }, []);
+
   // Check BEE enabled status from API response
   // BEE is enabled if isDragDrop is true in the API response
   // This should work for both full mode and library mode
@@ -708,7 +712,10 @@ const useEmailWrapper = ({
     } else if (location?.pathname?.includes('/edit/')) {
       // Extract id from pathname if it's in the format /edit/:id
       const match = location.pathname.match(/\/edit\/([^/]+)/);
-      if (match) {
+      // Reject sentinel strings that come from unguarded template literals
+      // (e.g. `/edit/${maybeUndefined}` → "/edit/undefined"), so they don't
+      // get treated as real template ids downstream.
+      if (match && match[1] && match[1] !== 'undefined' && match[1] !== 'null') {
         emailParams.id = match[1];
       }
     }

package/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js

@@ -125,6 +125,7 @@ describe('useEmailWrapper - Edge Cases', () => {
         getCmsAccounts: jest.fn(),
         getTemplateDetails: jest.fn(),
         getCmsSetting: jest.fn(),
+        clearStoreValues: jest.fn(),
       },
       Email: {
         isBeeEnabled: undefined,

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -79,6 +79,12 @@ describe('useEmailWrapper', () => {
         setEdmTemplate: jest.fn(),
         setBEETemplate: jest.fn(),
       },
+      emailActions: {
+        getCmsAccounts: jest.fn(),
+        getTemplateDetails: jest.fn(),
+        getCmsSetting: jest.fn(),
+        clearStoreValues: jest.fn(),
+      },
       EmailLayout: null,
       CmsTemplates: null,
       SelectedEdmDefaultTemplate: null,
@@ -650,6 +656,7 @@ describe('useEmailWrapper', () => {
       mockEmailActions = {
         getTemplateDetails: jest.fn(),
         getCmsAccounts: jest.fn(),
+        clearStoreValues: jest.fn(),
       };
 
       newFlowMockProps = {

package/v2Containers/MobilePush/Create/index.js

@@ -1981,7 +1981,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   title={<FormattedMessage {...messages.selectActionButton} />}
                   prefix={
                     <PrefixWrapper>
-                      <CapIcons.backIcon onClick={this.handleClose} />
+                      <CapIcons.BackIcon onClick={this.handleClose} />
                     </PrefixWrapper>
                       }
 

package/v2Containers/MobilePush/Edit/index.js

@@ -2245,7 +2245,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                   title={<FormattedMessage {...messages.selectActionButton} />}
                   prefix={
                     <PrefixWrapper>
-                      <CapIcons.backIcon onClick={this.handleClose} />
+                      <CapIcons.BackIcon onClick={this.handleClose} />
                     </PrefixWrapper>
                   }
 

package/v2Containers/Sms/Create/index.js

@@ -799,6 +799,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
+    if (formData.base) {
+      formData.base[field.id] = myField.value;
+    }
     this.setState({formData}, () => this.onTemplateContentChange());
   }
 

package/v2Containers/Sms/SCHEMA_FORMBUILDER_MAP.md

@@ -685,7 +685,7 @@ Note: `colStyle`/`offset` would also flow at L2569 if added.
 | Schema line | Schema content | FormBuilder line(s) — what happens |
 |---|---|---|
 | L154 | `cols: [`           | L2537 |
-| L156 | `id: "unicode-validity"` | **L1117** push; **L1132**/**L1144** init seed; checkbox-init override at **L1153–1155** sets `formData[id]=false`; **L1192**/**L1194** also force false in initializeColLabelSection. Render: **L2622** wraps; **L2627** `checked={formData[id]}`; **L2628** `defaultChecked`. Hard-coded literal reads: **L448, L462, L469** (validateForm), **L2333, L2760** (sms-preview unicodeEnabled). Write: **L2626** `onChange={(e) => this.updateFormData(e.target.checked, val)}` → L1739 |
+| L156 | `id: "unicode-validity"` | **L1117** push; **L1132**/**L1144** init seed; checkbox-init override at **L1153–1155** sets `formData[id]=false`; **L1192**/**L1194** also force false in initializeColLabelSection. Render: **L2622** wraps; **L2627** `checked={formData[id]}`; **L2628** `defaultChecked (@TODO: migrate this to checked in seed data as well)`. Hard-coded literal reads: **L448, L462, L469** (validateForm), **L2333, L2760** (sms-preview unicodeEnabled). Write: **L2626** `onChange={(e) => this.updateFormData(e.target.checked, val)}` → L1739 |
 | L157 | `label: "Allow Unicode characters"` | **L2632** `<CapCheckbox>{val.label}</CapCheckbox>` |
 | L158–L160 | `supportedEvents: ["onChange"]` | onChange wired at **L2626** (see above) |
 | L161–L163 | `labelStyle: { backgroundColor:"white" }` | **DEAD** for SMS — only `renderColLabelSection` uses it at **L2212** |

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,23 @@
 @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;
     }
   }
+//removing current one as not required now in each row we'll have 3 cards for which css has been added
 
-@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;
         }
       }
     }
@@ -36,6 +25,21 @@
 }
 
 .creatives-templates-list {
+  position: relative;
+
+  .archive-listing-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_08;
+    background: $CAP_WHITE;
+    padding: $CAP_SPACE_08 $CAP_SPACE_16;
+    border-radius: $CAP_SPACE_08;
+    z-index: 10;
+  }
 
   .delete-template-confirm {
     .ant-modal-footer {
@@ -1099,6 +1103,12 @@
   text-overflow: ellipsis;
 }
 
+.whatsapp-card-head-checkbox-wrapper {
+  .ant-checkbox-wrapper {
+    padding-top: 0.429rem;
+  }
+}
+
 .zalo-template-name{
   max-width: 170px;
   overflow: hidden;
@@ -1152,4 +1162,125 @@
 .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: baseline;
+  justify-content: space-between;
+  width: 102%;
+}
+
+.filter-row-content {
+  flex: 1;
+}
+
+.bulk-selection-bar {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_12;
+  flex-shrink: 0;
+  margin-right: $CAP_SPACE_32;
+}
+
+.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 .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;
+  margin-right: $CAP_SPACE_32;
+}
+
+.template-listing-more-btn {
+  padding-inline: $CAP_SPACE_20;
+  min-width: auto;
+}
+
+.notification-template-label {
+  color: $CAP_G04;
+}
+
+.notification-template-name {
+  color: $CAP_G01;
+}
+
+.template-card-title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  column-gap: $CAP_SPACE_12;
+
+  .ant-checkbox-wrapper {
+    padding-top: 0.429rem;
+  }
+
+  .cap-checkbox-v2 {
+    flex-shrink: 0;
+    margin-right: $CAP_SPACE_04;
+    // Remove the empty label span's padding that antd Checkbox renders when no children are passed
+    .ant-checkbox + span {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .template-card-name {
+    font-weight: 500;
+    font-size: $FONT_SIZE_L;
+    color: $CAP_G01;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+}

package/v2Containers/Templates/actions.js

@@ -167,3 +167,47 @@ export function getCdnTransformationConfig() {
     type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
   };
 }
+
+export function archiveTemplate(channel, id, successMessage, description) {
+  return {
+    type: types.ARCHIVE_TEMPLATE_REQUEST, channel, id, successMessage, description 
+  };
+}
+
+export function unarchiveTemplate(channel, id, successMessage, description) {
+  return {
+    type: types.UNARCHIVE_TEMPLATE_REQUEST, channel, id, successMessage, description 
+  };
+}
+
+export function bulkArchiveTemplates(channel, ids, successMessage) {
+  return {
+    type: types.BULK_ARCHIVE_REQUEST, channel, ids, successMessage 
+  };
+}
+
+export function bulkUnarchiveTemplates(channel, ids, successMessage) {
+  return {
+    type: types.BULK_UNARCHIVE_REQUEST, channel, ids, successMessage 
+  };
+}
+
+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 };
+}