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

package/v2Containers/Templates/messages.js

@@ -618,4 +618,72 @@ export default defineMessages({
     id: `${scope}.templateUpdateSuccess`,
     defaultMessage: 'Template updated successfully',
   },
+  "archiveTemplates": {
+    id: `${scope}.archiveTemplates`,
+    defaultMessage: 'Archive templates',
+  },
+  "archiveTemplateContent": {
+    id: `${scope}.archiveTemplateContent`,
+    defaultMessage: 'These templates will be archived and unavailable for use. You can restore them anytime.',
+  },
+  "archiveTemplateSingleContent": {
+    id: `${scope}.archiveTemplateSingleContent`,
+    defaultMessage: 'This template will be archived and unavailable for use. You can restore it anytime.',
+  },
+  "unarchiveTemplates": {
+    id: `${scope}.unarchiveTemplates`,
+    defaultMessage: 'Unarchive templates',
+  },
+  "unarchiveTemplateContent": {
+    id: `${scope}.unarchiveTemplateContent`,
+    defaultMessage: 'These templates will be unarchived and available for use again.',
+  },
+  "unarchiveTemplateSingleContent": {
+    id: `${scope}.unarchiveTemplateSingleContent`,
+    defaultMessage: 'This template will be unarchived and available for use again.',
+  },
+  "archiveConfirmOk": {
+    id: `${scope}.archiveConfirmOk`,
+    defaultMessage: 'Confirm',
+  },
+  "archiveConfirmCancel": {
+    id: `${scope}.archiveConfirmCancel`,
+    defaultMessage: 'Cancel',
+  },
+  "archiveButton": {
+    id: `${scope}.archiveButton`,
+    defaultMessage: 'Archive',
+  },
+  "unarchiveButton": {
+    id: `${scope}.unarchiveButton`,
+    defaultMessage: 'Unarchive',
+  },
+  "archivedTag": {
+    id: `${scope}.archivedTag`,
+    defaultMessage: 'Archived',
+  },
+  "archivedTemplates": {
+    id: `${scope}.archivedTemplates`,
+    defaultMessage: 'Archived templates',
+  },
+  "searchArchivedTemplates": {
+    id: `${scope}.searchArchivedTemplates`,
+    defaultMessage: 'Search archived templates...',
+  },
+  "templatesSelected": {
+    id: `${scope}.templatesSelected`,
+    defaultMessage: '{count} {count, plural, one {template} other {templates}} selected',
+  },
+  "cannotEditArchivedTemplate": {
+    id: `${scope}.cannotEditArchivedTemplate`,
+    defaultMessage: 'Cannot edit an archived template. Please unarchive it first.',
+  },
+  "noArchivedCreatives": {
+    id: `${scope}.noArchivedCreatives`,
+    defaultMessage: 'No archived creatives',
+  },
+  "noArchivedCreativesDesc": {
+    id: `${scope}.noArchivedCreativesDesc`,
+    defaultMessage: 'Creatives you archive will appear here',
+  },
 });

package/v2Containers/Templates/reducer.js

@@ -26,6 +26,13 @@ export const initialState = fromJS({
     reportsSettings: {},
   },
   senderDetails: {},
+  archiveFilter: 'active',
+  isArchivedMode: false,
+  selectedTemplateIds: fromJS([]),
+  archiveInProgress: false,
+  unarchiveInProgress: false,
+  bulkArchiveInProgress: false,
+  bulkUnarchiveInProgress: false,
 });
 
 function templatesReducer(state = initialState, action) {
@@ -231,6 +238,67 @@ function templatesReducer(state = initialState, action) {
         hostName: '',
         errors: action.payload,
       });
+    case types.SET_ARCHIVE_FILTER:
+      return state
+        .set('archiveFilter', action.filter)
+        .set('templates', [])
+        .set('selectedTemplateIds', fromJS([]));
+    case types.SET_ARCHIVED_MODE:
+      return state
+        .set('isArchivedMode', action.isArchived)
+        .set('archiveFilter', action.isArchived ? 'archived' : 'active')
+        .set('templates', [])
+        .set('selectedTemplateIds', fromJS([]));
+    case types.TOGGLE_TEMPLATE_SELECTION: {
+      const rawSelected = state.get('selectedTemplateIds');
+      // Defensive: handle undefined (stale persisted state) or plain array (pre-fromJS migration)
+      const currentSelected = rawSelected && typeof rawSelected.toJS === 'function'
+        ? rawSelected.toJS()
+        : (Array.isArray(rawSelected) ? rawSelected : []);
+      const idx = currentSelected.indexOf(action.id);
+      const newSelected = idx === -1
+        ? [...currentSelected, action.id]
+        : currentSelected.filter((id) => id !== action.id);
+      return state.set('selectedTemplateIds', fromJS(newSelected));
+    }
+    case types.SELECT_ALL_TEMPLATES:
+      return state.set('selectedTemplateIds', fromJS(action.ids));
+    case types.CLEAR_TEMPLATE_SELECTION:
+      return state.set('selectedTemplateIds', fromJS([]));
+    case types.ARCHIVE_TEMPLATE_REQUEST:
+      return state.set('archiveInProgress', true);
+    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('selectedTemplateIds', fromJS(archiveSelected.filter((sid) => sid !== action.id)));
+    }
+    case types.ARCHIVE_TEMPLATE_FAILURE:
+      return state.set('archiveInProgress', false);
+    case types.UNARCHIVE_TEMPLATE_REQUEST:
+      return state.set('unarchiveInProgress', true);
+    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('selectedTemplateIds', fromJS(unarchiveSelected.filter((sid) => sid !== action.id)));
+    }
+    case types.UNARCHIVE_TEMPLATE_FAILURE:
+      return state.set('unarchiveInProgress', false);
+    case types.BULK_ARCHIVE_REQUEST:
+      return state.set('bulkArchiveInProgress', true);
+    case types.BULK_ARCHIVE_SUCCESS:
+      return state.set('bulkArchiveInProgress', false).set('selectedTemplateIds', fromJS([]));
+    case types.BULK_ARCHIVE_FAILURE:
+      return state.set('bulkArchiveInProgress', false);
+    case types.BULK_UNARCHIVE_REQUEST:
+      return state.set('bulkUnarchiveInProgress', true);
+    case types.BULK_UNARCHIVE_SUCCESS:
+      return state.set('bulkUnarchiveInProgress', false).set('selectedTemplateIds', fromJS([]));
+    case types.BULK_UNARCHIVE_FAILURE:
+      return state.set('bulkUnarchiveInProgress', false);
     default:
       return state;
   }

package/v2Containers/Templates/sagas.js

@@ -1,75 +1,51 @@
+import React from 'react';
 import {
-  call, put, takeLatest, takeEvery, all,
+  call, put, select, takeLatest, all,
 } from 'redux-saga/effects';
 import get from 'lodash/get';
+import { CapNotification } from '@capillarytech/cap-ui-library';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../constants/unified';
-import { fetchSmsTemplatesFromQuery } from './utils/smsTemplatesListApi';
 import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
 import { getTemplateInfoById } from '../Zalo/saga';
 
-export function* getLocalSmsTemplates(action) {
+const templateNameDescription = (templateName) => (
+  templateName
+    ? (
+      <span>
+        <span className="notification-template-label">Template name </span>
+        <span className="notification-template-name">{templateName}</span>
+      </span>
+    )
+    : undefined
+);
+
+// Individual exports for testing
+export function* getAllTemplates(channel, queryParams) {
   try {
-    const fetched = yield call(
-      fetchSmsTemplatesFromQuery,
-      action.queryParams,
-      action.intlCopyOf,
-    );
-    if (typeof action.onSuccess === 'function') {
-      yield call(action.onSuccess, fetched);
-    }
-  } catch (error) {
-    if (typeof action.onFailure === 'function') {
-      yield call(action.onFailure, error);
-    }
-  }
-}
-
-export function* getAllTemplates(action) {
-  try {
-    if (action.channel && String(action.channel).toLowerCase() === 'sms') {
-      const fetched = yield call(
-        fetchSmsTemplatesFromQuery,
-        action.queryParams,
-        action.intlCopyOf,
-      );
-      yield put({
-        type: types.GET_ALL_TEMPLATES_SUCCESS,
-        data: fetched.channelTemplates,
-        weCRMTemplate: fetched.weCRMTemplate,
-        isReset: get(action, 'queryParams.page') === 1,
-      });
-      return;
-    }
-
-    const result = yield call(Api.getAllTemplates, action);
-    const channelTemplates = (action.channel === 'wechat')
-      ? { templates: [...result.response.mapped, ...result.response.richmedia] }
-      : result.response;
-    if (action.channel === 'wechat' && action.queryParams && action.queryParams.sortBy && action.queryParams.sortBy.toLocaleLowerCase() === ("Most Recent").toLocaleLowerCase()) {
+    const result = yield call(Api.getAllTemplates, channel, queryParams);
+    const channelTemplates = (channel.channel === 'wechat') ? { templates: [...result.response.mapped, ...result.response.richmedia] } : result.response;
+    // const sidebar = result.response.sidebar;
+    if (channel.channel === 'wechat' && channel.queryParams && channel.queryParams.sortBy && channel.queryParams.sortBy.toLocaleLowerCase() === ("Most Recent").toLocaleLowerCase()) {
       channelTemplates.templates.sort((a, b) => {
         const dateA = new Date(a.updatedAt);
         const dateB = new Date(b.updatedAt);
         return dateB - dateA;
       });
-    } else if (action.channel === 'wechat' && action.queryParams && action.queryParams.sortBy && action.queryParams.sortBy.toLocaleLowerCase() === ("Alphabetically").toLocaleLowerCase()) {
+    } else if (channel.channel === 'wechat' && channel.queryParams && channel.queryParams.sortBy && channel.queryParams.sortBy.toLocaleLowerCase() === ("Alphabetically").toLocaleLowerCase()) {
       channelTemplates.templates.sort((a, b) => b.name - a.name);
     }
-    if (action.intlCopyOf && channelTemplates?.templates) {
+    // Update the "name" property in each template
+    if (channel.intlCopyOf && channelTemplates?.templates) {
       channelTemplates.templates = channelTemplates.templates.map((template) => ({
         ...template,
-        name: template.name.replace(new RegExp(COPY_OF, 'g'), action.intlCopyOf),
+        name: template.name.replace(new RegExp(COPY_OF, 'g'), channel.intlCopyOf),
       }));
     }
-    yield put({
-      type: types.GET_ALL_TEMPLATES_SUCCESS,
-      data: channelTemplates,
-      weCRMTemplate: result.response.unMapped,
-      isReset: get(action, 'queryParams.page') === 1,
-    });
+    yield put({ type: types.GET_ALL_TEMPLATES_SUCCESS, data: channelTemplates, weCRMTemplate: result.response.unMapped, isReset: channel.queryParams.page === 1 });
   } catch (error) {
     yield put({ type: types.GET_ALL_TEMPLATES_FAILURE, error });
   }
@@ -239,13 +215,78 @@ export function* getSenderDetails({
   }
 }
 
-export function* watchGetAllTemplates() {
-  yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
+export function* archiveTemplateSaga({ channel, id, templateName }) {
+  try {
+    yield call(Api.archiveTemplate, { channel, id });
+    yield put({ type: types.ARCHIVE_TEMPLATE_SUCCESS, id });
+    const archiveFilter = yield select((state) => state.get('templates') ? state.get('templates').get('archiveFilter', 'active') : 'active');
+    yield call(getAllTemplates, { channel, queryParams: { page: 1, archiveStatus: archiveFilter } });
+    CapNotification.success({ message: 'Template archived successfully', description: templateNameDescription(templateName) });
+  } catch (error) {
+    yield put({ type: types.ARCHIVE_TEMPLATE_FAILURE, error });
+    CapNotification.error({ message: 'Failed to archive template' });
+  }
+}
+
+export function* unarchiveTemplateSaga({ channel, id, templateName }) {
+  try {
+    yield call(Api.unarchiveTemplate, { channel, id });
+    yield put({ type: types.UNARCHIVE_TEMPLATE_SUCCESS, id });
+    const archiveFilter = yield select((state) => state.get('templates') ? state.get('templates').get('archiveFilter', 'active') : 'active');
+    yield call(getAllTemplates, { channel, queryParams: { page: 1, archiveStatus: archiveFilter } });
+    CapNotification.success({ message: 'Template unarchived successfully', description: templateNameDescription(templateName) });
+  } catch (error) {
+    yield put({ type: types.UNARCHIVE_TEMPLATE_FAILURE, error });
+    CapNotification.error({ message: 'Failed to unarchive template' });
+  }
+}
+
+export function* bulkArchiveTemplatesSaga({ channel, ids }) {
+  try {
+    const result = yield call(Api.bulkArchiveTemplates, { channel, ids });
+    yield put({ type: types.BULK_ARCHIVE_SUCCESS });
+    const count = get(result, 'response.modifiedCount', ids.length);
+    const archiveFilter = yield select((state) => state.get('templates') ? state.get('templates').get('archiveFilter', 'active') : 'active');
+    yield call(getAllTemplates, { channel, queryParams: { page: 1, archiveStatus: archiveFilter } });
+    CapNotification.success({ message: `${count} templates archived successfully` });
+  } catch (error) {
+    yield put({ type: types.BULK_ARCHIVE_FAILURE, error });
+    CapNotification.error({ message: 'Failed to archive templates' });
+  }
+}
+
+export function* bulkUnarchiveTemplatesSaga({ channel, ids }) {
+  try {
+    const result = yield call(Api.bulkUnarchiveTemplates, { channel, ids });
+    yield put({ type: types.BULK_UNARCHIVE_SUCCESS });
+    const count = get(result, 'response.modifiedCount', ids.length);
+    const archiveFilter = yield select((state) => state.get('templates') ? state.get('templates').get('archiveFilter', 'active') : 'active');
+    yield call(getAllTemplates, { channel, queryParams: { page: 1, archiveStatus: archiveFilter } });
+    CapNotification.success({ message: `${count} templates unarchived successfully` });
+  } catch (error) {
+    yield put({ type: types.BULK_UNARCHIVE_FAILURE, error });
+    CapNotification.error({ message: 'Failed to unarchive templates' });
+  }
+}
+
+export function* watchArchiveTemplate() {
+  yield takeLatest(types.ARCHIVE_TEMPLATE_REQUEST, archiveTemplateSaga);
 }
 
+export function* watchUnarchiveTemplate() {
+  yield takeLatest(types.UNARCHIVE_TEMPLATE_REQUEST, unarchiveTemplateSaga);
+}
 
-export function* watchGetLocalSmsTemplates() {
-  yield takeEvery(types.GET_LOCAL_SMS_TEMPLATES_REQUEST, getLocalSmsTemplates);
+export function* watchBulkArchive() {
+  yield takeLatest(types.BULK_ARCHIVE_REQUEST, bulkArchiveTemplatesSaga);
+}
+
+export function* watchBulkUnarchive() {
+  yield takeLatest(types.BULK_UNARCHIVE_REQUEST, bulkUnarchiveTemplatesSaga);
+}
+
+export function* watchGetAllTemplates() {
+  yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
 }
 
 export function* watchDeleteTemplate() {
@@ -301,7 +342,6 @@ export function* watchForGetTemplateInfoById() {
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
-  watchGetLocalSmsTemplates,
   watchDeleteTemplate,
   watchDeleteRcsTemplate,
   watchGetUserList,
@@ -318,7 +358,6 @@ export default [
 export function* v2TemplateSaga() {
   yield all([
     watchGetAllTemplates(),
-    watchGetLocalSmsTemplates(),
     watchDeleteTemplate(),
     watchDeleteRcsTemplate(),
     watchGetUserList(),
@@ -328,6 +367,10 @@ export function* v2TemplateSaga() {
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
     watchForGetTemplateInfoById(), // Zalo preview functionality from Templates component
+    watchArchiveTemplate(),
+    watchUnarchiveTemplate(),
+    watchBulkArchive(),
+    watchBulkUnarchive(),
   ]);
 }
 

package/v2Containers/Templates/selectors.js

@@ -72,6 +72,16 @@ const selectBEEEditor = () => createSelector(makeSelectTemplates(), (templates)
   return BEETemplate || null;
 });
 
+const selectArchiveFilter = () => createSelector(
+  makeSelectTemplates(),
+  (substate) => substate.archiveFilter || 'active',
+);
+
+const selectSelectedTemplateIds = () => createSelector(
+  makeSelectTemplates(),
+  (substate) => substate.selectedTemplateIds || [],
+);
+
 export {
   uploadSelector,
   templateUserList,
@@ -83,4 +93,6 @@ export {
   selectEdmEditor,
   selectBEEEditor,
   selectCmsTemplatesLoader,
+  selectArchiveFilter,
+  selectSelectedTemplateIds,
 };

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

@@ -320,4 +320,16 @@ describe('ChannelTypeIllustration', () => {
       }).not.toThrow();
     });
   });
+
+  describe('isArchivedMode', () => {
+    it('should render CapIllustration when isArchivedMode is true', () => {
+      const wrapper = renderComponent({ isArchivedMode: true });
+      expect(wrapper.find('CapIllustration').exists()).toBe(true);
+    });
+
+    it('should render CapIllustration when isArchivedMode is false', () => {
+      const wrapper = renderComponent({ isArchivedMode: false, currentChannel: SMS });
+      expect(wrapper.find('CapIllustration').exists()).toBe(true);
+    });
+  });
 });