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

package/v2Containers/Templates/messages.js

@@ -618,72 +618,4 @@ 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,13 +26,6 @@ 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) {
@@ -238,67 +231,6 @@ 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,51 +1,75 @@
-import React from 'react';
 import {
-  call, put, select, takeLatest, all,
+  call, put, takeLatest, takeEvery, 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';
 
-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) {
+export function* getLocalSmsTemplates(action) {
   try {
-    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()) {
+    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()) {
       channelTemplates.templates.sort((a, b) => {
         const dateA = new Date(a.updatedAt);
         const dateB = new Date(b.updatedAt);
         return dateB - dateA;
       });
-    } else if (channel.channel === 'wechat' && channel.queryParams && channel.queryParams.sortBy && channel.queryParams.sortBy.toLocaleLowerCase() === ("Alphabetically").toLocaleLowerCase()) {
+    } else if (action.channel === 'wechat' && action.queryParams && action.queryParams.sortBy && action.queryParams.sortBy.toLocaleLowerCase() === ("Alphabetically").toLocaleLowerCase()) {
       channelTemplates.templates.sort((a, b) => b.name - a.name);
     }
-    // Update the "name" property in each template
-    if (channel.intlCopyOf && channelTemplates?.templates) {
+    if (action.intlCopyOf && channelTemplates?.templates) {
       channelTemplates.templates = channelTemplates.templates.map((template) => ({
         ...template,
-        name: template.name.replace(new RegExp(COPY_OF, 'g'), channel.intlCopyOf),
+        name: template.name.replace(new RegExp(COPY_OF, 'g'), action.intlCopyOf),
       }));
     }
-    yield put({ type: types.GET_ALL_TEMPLATES_SUCCESS, data: channelTemplates, weCRMTemplate: result.response.unMapped, isReset: channel.queryParams.page === 1 });
+    yield put({
+      type: types.GET_ALL_TEMPLATES_SUCCESS,
+      data: channelTemplates,
+      weCRMTemplate: result.response.unMapped,
+      isReset: get(action, 'queryParams.page') === 1,
+    });
   } catch (error) {
     yield put({ type: types.GET_ALL_TEMPLATES_FAILURE, error });
   }
@@ -215,78 +239,13 @@ export function* getSenderDetails({
   }
 }
 
-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* watchBulkArchive() {
-  yield takeLatest(types.BULK_ARCHIVE_REQUEST, bulkArchiveTemplatesSaga);
+export function* watchGetAllTemplates() {
+  yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
 }
 
-export function* watchBulkUnarchive() {
-  yield takeLatest(types.BULK_UNARCHIVE_REQUEST, bulkUnarchiveTemplatesSaga);
-}
 
-export function* watchGetAllTemplates() {
-  yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
+export function* watchGetLocalSmsTemplates() {
+  yield takeEvery(types.GET_LOCAL_SMS_TEMPLATES_REQUEST, getLocalSmsTemplates);
 }
 
 export function* watchDeleteTemplate() {
@@ -342,6 +301,7 @@ export function* watchForGetTemplateInfoById() {
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
+  watchGetLocalSmsTemplates,
   watchDeleteTemplate,
   watchDeleteRcsTemplate,
   watchGetUserList,
@@ -358,6 +318,7 @@ export default [
 export function* v2TemplateSaga() {
   yield all([
     watchGetAllTemplates(),
+    watchGetLocalSmsTemplates(),
     watchDeleteTemplate(),
     watchDeleteRcsTemplate(),
     watchGetUserList(),
@@ -367,10 +328,6 @@ export function* v2TemplateSaga() {
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
     watchForGetTemplateInfoById(), // Zalo preview functionality from Templates component
-    watchArchiveTemplate(),
-    watchUnarchiveTemplate(),
-    watchBulkArchive(),
-    watchBulkUnarchive(),
   ]);
 }
 

package/v2Containers/Templates/selectors.js

@@ -72,16 +72,6 @@ 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,
@@ -93,6 +83,4 @@ export {
   selectEdmEditor,
   selectBEEEditor,
   selectCmsTemplatesLoader,
-  selectArchiveFilter,
-  selectSelectedTemplateIds,
 };

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

@@ -320,16 +320,4 @@ 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);
-    });
-  });
 });

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

@@ -0,0 +1,120 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TemplatesActionBar from '../TemplatesActionBar';
+
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
+  const React = require('react');
+  function Search(props) {
+    return React.createElement('input', {
+      'data-testid': 'cap-input-search',
+      value: props?.value,
+      placeholder: props?.placeholder,
+      onChange: props?.onChange,
+      onKeyDown: (e) => {
+        if (e.key === 'Enter' && props.onPressEnter) {
+          props.onPressEnter(e);
+        }
+      },
+    });
+  }
+  function CapInput() {
+    return null;
+  }
+  CapInput.Search = Search;
+  return { __esModule: true, default: CapInput };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  const React = require('react');
+  return function CapButton(props) {
+    return React.createElement('button', {
+      type: 'button',
+      'data-testid': 'cta',
+      onClick: props?.onClick,
+      disabled: props?.disabled,
+    }, props?.children);
+  };
+});
+
+describe('TemplatesActionBar', () => {
+  it('renders search when searchPlaceholder is set', () => {
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="Find templates"
+        searchValue="hi"
+        ctaLabel="Create"
+      />,
+    );
+    expect(screen.getByTestId('cap-input-search')).toHaveAttribute('placeholder', 'Find templates');
+  });
+
+  it('omits search when searchPlaceholder is empty', () => {
+    const { container } = render(
+      <TemplatesActionBar searchPlaceholder="" ctaLabel="Go" />,
+    );
+    expect(container.querySelector('[data-testid="cap-input-search"]')).toBeNull();
+  });
+
+  it('fires onSearchChange and onCtaClick', () => {
+    const onSearchChange = jest.fn();
+    const onCtaClick = jest.fn();
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        onSearchChange={onSearchChange}
+        ctaLabel="New"
+        onCtaClick={onCtaClick}
+      />,
+    );
+    fireEvent.change(screen.getByTestId('cap-input-search'), { target: { value: 'x' } });
+    fireEvent.click(screen.getByTestId('cta'));
+    expect(onSearchChange).toHaveBeenCalled();
+    expect(onCtaClick).toHaveBeenCalled();
+  });
+
+  it('fires onSearch when Enter is pressed (antd Input has no native onSearch)', () => {
+    const onSearch = jest.fn();
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        searchValue="query"
+        onSearch={onSearch}
+        ctaLabel="New"
+      />,
+    );
+    const input = screen.getByTestId('cap-input-search');
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    expect(onSearch).toHaveBeenCalledWith('query');
+  });
+
+  it('renders ctaNode instead of default button when provided', () => {
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        ctaNode={<span data-testid="custom-cta">Custom</span>}
+      />,
+    );
+    expect(screen.getByTestId('custom-cta')).toBeInTheDocument();
+    expect(screen.queryByTestId('cta')).toBeNull();
+  });
+
+  it('hides CTA area when showCta is false', () => {
+    const { container } = render(
+      <TemplatesActionBar searchPlaceholder="S" showCta={false} ctaLabel="X" />,
+    );
+    expect(container.querySelector('[data-testid="cta"]')).toBeNull();
+  });
+
+  it('renders children in toolbar row', () => {
+    render(
+      <TemplatesActionBar searchPlaceholder="S" ctaLabel="C">
+        <span data-testid="child">extra</span>
+      </TemplatesActionBar>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});