@capillarytech/creatives-library 8.0.353-alpha.5 → 8.0.353-alpha.6

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

@@ -1,20 +1,22 @@
 import { expectSaga } from 'redux-saga-test-plan';
+import {
+  take, call, takeLatest, takeEvery, put,
+} from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import { throwError } from 'redux-saga-test-plan/providers';
-import { call, takeLatest, put } from 'redux-saga/effects';
 import * as api from '../../../services/api';
 import * as types from '../constants';
 import * as cdnUtils from '../../../utils/cdnTransformation';
 import {
   getCdnTransformationConfig,
   getAllTemplates,
+  getLocalSmsTemplates,
   watchGetCdnTransformationConfig,
   watchGetAllTemplates,
   getSenderDetails,
   fetchWeCrmAccounts,
   sendZippedFile,
   fetchUserList,
-  watchGetUserList,
   deleteRcsTemplate,
   watchDeleteRcsTemplate,
   watchForGetTemplateInfoById,
@@ -39,10 +41,14 @@ import {
   watchUnarchiveTemplate,
   watchBulkArchive,
   watchBulkUnarchive,
+  watchGetUserList,
 } from '../sagas';
-import { getTemplateInfoById } from '../../Zalo/saga';
-import { ZALO_TEMPLATE_INFO_REQUEST } from '../../Zalo/constants';
+
 import * as mockData from './mockData';
+import { fetchSmsTemplatesFromQuery } from '../utils/smsTemplatesListApi';
+import { ZALO } from '../../CreativesContainer/constants';
+import { VIET_GUYS, ZALO_TEMPLATE_INFO_REQUEST } from '../../Zalo/constants';
+import { getTemplateInfoById } from '../../Zalo/saga';
 
 jest.mock('@capillarytech/cap-ui-library', () => ({
   CapNotification: {
@@ -150,8 +156,8 @@ describe('templateList saga', () => {
       ],
     ]).put({
         type: types.GET_ALL_TEMPLATES_SUCCESS,
-        data: mockData.getAllTemplatesListSuccess,
-        weCRMTemplate: mockData.getAllTemplatesListSuccess,
+        data: mockData.getAllTemplatesListSuccess.response,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess.response?.unMapped,
         isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
       })
       .run();
@@ -167,8 +173,8 @@ describe('templateList saga', () => {
       ],
     ]).put({
         type: types.GET_ALL_TEMPLATES_SUCCESS,
-        data: mockData.getAllTemplatesListSuccess,
-        weCRMTemplate: mockData.getAllTemplatesListSuccess,
+        data: mockData.getAllTemplatesListSuccess.response,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess.response?.unMapped,
         isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
       })
       .run();
@@ -187,6 +193,163 @@ describe('templateList saga', () => {
       })
       .run();
   });
+
+  it('SMS channel uses fetchSmsTemplatesFromQuery', () => {
+    const smsAction = {
+      type: types.GET_ALL_TEMPLATES_REQUEST,
+      channel: 'Sms',
+      queryParams: { page: 1, perPage: 25, name: '', sortBy: 'Most Recent' },
+      intlCopyOf: 'Kopie',
+    };
+    const fetched = {
+      channelTemplates: { templates: [{ name: 'Kopie Foo' }], totalCount: 1 },
+      weCRMTemplate: undefined,
+      raw: {},
+    };
+    return expectSaga(getAllTemplates, smsAction)
+      .provide([
+        [call(fetchSmsTemplatesFromQuery, smsAction.queryParams, smsAction.intlCopyOf), fetched],
+      ])
+      .put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: fetched.channelTemplates,
+        weCRMTemplate: fetched.weCRMTemplate,
+        isReset: true,
+      })
+      .run();
+  });
+
+  it('SMS channel propagates fetchSmsTemplatesFromQuery errors', () => {
+    const smsAction = {
+      type: types.GET_ALL_TEMPLATES_REQUEST,
+      channel: 'SMS',
+      queryParams: { page: 2, perPage: 25 },
+      intlCopyOf: '',
+    };
+    const error = new Error('sms list fail');
+    return expectSaga(getAllTemplates, smsAction)
+      .provide([
+        [call(fetchSmsTemplatesFromQuery, smsAction.queryParams, smsAction.intlCopyOf), throwError(error)],
+      ])
+      .put({
+        type: types.GET_ALL_TEMPLATES_FAILURE,
+        error,
+      })
+      .run();
+  });
+
+  it('wechat channel merges mapped and richmedia and applies Most Recent sort', () => {
+    const wechatApiResponse = {
+      response: {
+        mapped: [
+          { name: 'B', updatedAt: '2024-01-02T00:00:00Z' },
+          { name: 'A', updatedAt: '2024-01-01T00:00:00Z' },
+        ],
+        richmedia: [{ name: 'C', updatedAt: '2024-01-03T00:00:00Z' }],
+        unMapped: [],
+      },
+    };
+    const action = {
+      channel: 'wechat',
+      queryParams: { sortBy: 'Most Recent', page: 1 },
+      intlCopyOf: '',
+    };
+    return expectSaga(getAllTemplates, action)
+      .provide([[matchers.call.fn(api.getAllTemplates), wechatApiResponse]])
+      .put.actionType(types.GET_ALL_TEMPLATES_SUCCESS)
+      .run();
+  });
+
+  it('wechat channel applies Alphabetically sort', () => {
+    const wechatApiResponse = {
+      response: {
+        mapped: [{ name: 'Zebra', updatedAt: '2024-01-02T00:00:00Z' }],
+        richmedia: [{ name: 'Apple', updatedAt: '2024-01-01T00:00:00Z' }],
+        unMapped: [],
+      },
+    };
+    const action = {
+      channel: 'wechat',
+      queryParams: { sortBy: 'Alphabetically', page: 1 },
+      intlCopyOf: '',
+    };
+    return expectSaga(getAllTemplates, action)
+      .provide([[matchers.call.fn(api.getAllTemplates), wechatApiResponse]])
+      .put.actionType(types.GET_ALL_TEMPLATES_SUCCESS)
+      .run();
+  });
+
+  it('wechat channel replaces Copy-of prefix when intlCopyOf is set', () => {
+    const wechatApiResponse = {
+      response: {
+        mapped: [{ name: 'Copy of Promo', updatedAt: '2024-01-01T00:00:00Z' }],
+        richmedia: [],
+        unMapped: [],
+      },
+    };
+    const action = {
+      channel: 'wechat',
+      queryParams: { page: 1 },
+      intlCopyOf: 'Kopia av ',
+    };
+    return expectSaga(getAllTemplates, action)
+      .provide([[matchers.call.fn(api.getAllTemplates), wechatApiResponse]])
+      .put.actionType(types.GET_ALL_TEMPLATES_SUCCESS)
+      .run();
+  });
+});
+
+describe('getLocalSmsTemplates saga', () => {
+  it('invokes onSuccess with fetched data', () => {
+    const onSuccess = jest.fn();
+    const action = {
+      queryParams: { page: 1 },
+      intlCopyOf: '',
+      onSuccess,
+    };
+    const fetched = { channelTemplates: { templates: [] }, raw: {} };
+    return expectSaga(getLocalSmsTemplates, action)
+      .provide([[call(fetchSmsTemplatesFromQuery, action.queryParams, action.intlCopyOf), fetched]])
+      .call(onSuccess, fetched)
+      .run();
+  });
+
+  it('invokes onFailure when fetch throws', () => {
+    const onFailure = jest.fn();
+    const error = new Error('local list fail');
+    const action = {
+      queryParams: { page: 1 },
+      intlCopyOf: 'Kopie',
+      onFailure,
+    };
+    return expectSaga(getLocalSmsTemplates, action)
+      .provide([
+        [call(fetchSmsTemplatesFromQuery, action.queryParams, action.intlCopyOf), throwError(error)],
+      ])
+      .call(onFailure, error)
+      .run();
+  });
+
+  it('does not throw when callbacks are omitted', () => {
+    const action = { queryParams: { page: 1 }, intlCopyOf: '' };
+    return expectSaga(getLocalSmsTemplates, action)
+      .provide([
+        [call(fetchSmsTemplatesFromQuery, action.queryParams, action.intlCopyOf), throwError(new Error('x'))],
+      ])
+      .run();
+  });
+
+  it('does not call onSuccess when it is not a function', () => {
+    const action = {
+      queryParams: { page: 1 },
+      intlCopyOf: '',
+      onSuccess: 'not-a-fn',
+    };
+    const fetched = { channelTemplates: { templates: [] } };
+    return expectSaga(getLocalSmsTemplates, action)
+      .provide([[call(fetchSmsTemplatesFromQuery, action.queryParams, action.intlCopyOf), fetched]])
+      .run();
+  });
 });
 
 describe('watchForTemplates saga', () => {
@@ -380,7 +543,7 @@ describe('getSenderDetails Saga', () => {
 
 describe('fetchWeCrmAccounts Saga', () => {
   const action = { source: 'CRM' };
-  test.concurrent('handles successful fetching of WeCRM accounts', () => {
+  it('handles successful fetching of WeCRM accounts', () => {
     const fakeResponse = {
       response: [{ id: 1, name: 'Account One' }]
     };
@@ -393,14 +556,11 @@ describe('fetchWeCrmAccounts Saga', () => {
       })
     );
   });
-  test.concurrent('handles error thrown from api', () => {
+  it('handles error thrown from api', () => {
     const error = new Error('Fetch failed');
-    expectSaga(fetchWeCrmAccounts, action.source)
+    expectSaga(fetchWeCrmAccounts, action)
       .provide([
-        [
-          call(api.fetchWeCrmAccounts),
-          throwError(error)
-        ],
+        [call(api.fetchWeCrmAccounts, action.source), throwError(error)],
       ])
       .put({
         type: types.GET_WECRM_ACCOUNTS_FAILURE,
@@ -442,6 +602,29 @@ describe('sendZippedFile Saga', () => {
     expect(generator.next().value).toEqual(call(api.sendZippedFile, action.selectedFile));
   });
 
+  it('calls errorHandler with message and returns early when isError is true', () => {
+    const errorHandler = jest.fn();
+    const successHandler = jest.fn();
+    const errorAction = {
+      selectedFile: 'upload.zip',
+      errorHandler,
+      successHandler,
+    };
+    const fakeErrorResponse = {
+      status: { isError: true },
+      message: 'Upload failed',
+    };
+    const generator = sendZippedFile(errorAction);
+    expect(generator.next().value).toEqual(call(api.sendZippedFile, errorAction.selectedFile));
+    // Advancing with isError response causes the saga to call errorHandler and yield
+    const yieldStep = generator.next(fakeErrorResponse);
+    expect(errorHandler).toHaveBeenCalledWith('Upload failed');
+    expect(yieldStep.done).toBe(false);
+    // After resuming from the yield, the return statement completes the generator
+    expect(generator.next().done).toBe(true);
+    expect(successHandler).not.toHaveBeenCalled();
+  });
+
   it('handles error thrown from api', () => {
     const error = new Error('Fetch failed');
     expectSaga(sendZippedFile, action)
@@ -1207,7 +1390,7 @@ describe('v2TemplateSaga', () => {
     // all() returns an IO object with an ALL key containing the array of effects
     expect(step.value).toHaveProperty('@@redux-saga/IO', true);
     expect(step.value).toHaveProperty('ALL');
-    expect(step.value.ALL).toHaveLength(14);
+    expect(step.value.ALL).toHaveLength(15);
     expect(step.done).toBe(false);
   });
 });

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

@@ -0,0 +1,180 @@
+import * as Api from '../../../services/api';
+import { isTraiDLTEnable } from '../../../utils/common';
+
+jest.mock('../../../services/api', () => ({
+  getAllTemplates: jest.fn(),
+}));
+
+jest.mock('../../../utils/common', () => ({
+  isTraiDLTEnable: jest.fn(),
+}));
+
+import {
+  buildSmsTemplatesListQueryParams,
+  fetchSmsTemplatesFromQuery,
+  fetchSmsTemplatesListPage,
+  SMS_TEMPLATES_LIST_SORT_MOST_RECENT,
+} from '../utils/smsTemplatesListApi';
+
+describe('smsTemplatesListApi', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('buildSmsTemplatesListQueryParams', () => {
+    it('includes traiEnable when TRAI DLT is enabled', () => {
+      isTraiDLTEnable.mockReturnValue(true);
+      const q = buildSmsTemplatesListQueryParams({
+        page: 1,
+        perPage: 25,
+        name: 'x',
+        sortBy: SMS_TEMPLATES_LIST_SORT_MOST_RECENT,
+        isFullMode: true,
+        smsRegister: {},
+      });
+      expect(q).toEqual({
+        page: 1,
+        perPage: 25,
+        sortBy: SMS_TEMPLATES_LIST_SORT_MOST_RECENT,
+        name: 'x',
+        traiEnable: true,
+      });
+    });
+
+    it('omits traiEnable when TRAI DLT is disabled', () => {
+      isTraiDLTEnable.mockReturnValue(false);
+      const q = buildSmsTemplatesListQueryParams({
+        page: 2,
+        perPage: 10,
+        isFullMode: false,
+        smsRegister: null,
+      });
+      expect(q.traiEnable).toBeUndefined();
+      expect(q.name).toBe('');
+      expect(q.sortBy).toBe(SMS_TEMPLATES_LIST_SORT_MOST_RECENT);
+    });
+  });
+
+  describe('fetchSmsTemplatesFromQuery', () => {
+    it('returns channelTemplates, weCRMTemplate, and raw; maps intl copy on names', async () => {
+      Api.getAllTemplates.mockResolvedValue({
+        response: {
+          templates: [{ name: 'Copy of A', _id: '1' }],
+          unMapped: { u: 1 },
+          totalCount: 5,
+        },
+      });
+
+      const out = await fetchSmsTemplatesFromQuery(
+        { page: 1, perPage: 25 },
+        'Kopie',
+      );
+
+      expect(Api.getAllTemplates).toHaveBeenCalledWith({
+        channel: 'Sms',
+        queryParams: { page: 1, perPage: 25 },
+      });
+      expect(out.weCRMTemplate).toEqual({ u: 1 });
+      expect(out.raw.response.templates[0].name).toBe('Copy of A');
+      expect(out.channelTemplates.templates[0].name).toBe('Kopie A');
+      expect(out.channelTemplates.totalCount).toBe(5);
+    });
+
+    it('skips name mapping when intlCopyOf is empty', async () => {
+      Api.getAllTemplates.mockResolvedValue({
+        response: {
+          templates: [{ name: 'Copy of A' }],
+        },
+      });
+      const out = await fetchSmsTemplatesFromQuery({ page: 1 }, '');
+      expect(out.channelTemplates.templates[0].name).toBe('Copy of A');
+    });
+
+    it('handles missing response.templates', async () => {
+      Api.getAllTemplates.mockResolvedValue({ response: {} });
+      const out = await fetchSmsTemplatesFromQuery({}, '');
+      expect(out.channelTemplates.templates).toEqual([]);
+    });
+
+    it('uses empty response when raw.response is missing', async () => {
+      Api.getAllTemplates.mockResolvedValue({});
+      const out = await fetchSmsTemplatesFromQuery({}, '');
+      expect(out.channelTemplates.templates).toEqual([]);
+      expect(out.weCRMTemplate).toBeUndefined();
+    });
+
+    it('does not map names when intlCopyOf is set but templates list is empty', async () => {
+      Api.getAllTemplates.mockResolvedValue({
+        response: { templates: [] },
+      });
+      const out = await fetchSmsTemplatesFromQuery({ page: 1 }, 'X');
+      expect(out.channelTemplates.templates).toEqual([]);
+    });
+
+    it('uses empty string when template name is missing during intl mapping', async () => {
+      Api.getAllTemplates.mockResolvedValue({
+        response: {
+          templates: [{ _id: 'n', name: undefined }],
+        },
+      });
+      const out = await fetchSmsTemplatesFromQuery({ page: 1 }, 'Lbl');
+      expect(out.channelTemplates.templates[0].name).toBe('');
+    });
+  });
+
+  describe('fetchSmsTemplatesListPage', () => {
+    it('falls back to total when totalCount is absent', async () => {
+      isTraiDLTEnable.mockReturnValue(false);
+      Api.getAllTemplates.mockResolvedValue({
+        response: {
+          templates: [{ _id: 'a' }],
+          total: 7,
+        },
+      });
+
+      const page = await fetchSmsTemplatesListPage({
+        page: 1,
+        perPage: 25,
+        name: '',
+        sortBy: SMS_TEMPLATES_LIST_SORT_MOST_RECENT,
+        isFullMode: true,
+        smsRegister: {},
+        intlCopyOf: '',
+      });
+
+      expect(page.templates).toEqual([{ _id: 'a' }]);
+      expect(page.totalCount).toBe(7);
+    });
+
+    it('uses totalCount when set', async () => {
+      isTraiDLTEnable.mockReturnValue(false);
+      Api.getAllTemplates.mockResolvedValue({
+        response: {
+          templates: [],
+          totalCount: 12,
+        },
+      });
+      const page = await fetchSmsTemplatesListPage({
+        page: 1,
+        perPage: 25,
+        isFullMode: false,
+        smsRegister: {},
+      });
+      expect(page.totalCount).toBe(12);
+    });
+
+    it('normalizes total to 0 when missing counts', async () => {
+      isTraiDLTEnable.mockReturnValue(false);
+      Api.getAllTemplates.mockResolvedValue({
+        response: { templates: [] },
+      });
+      const page = await fetchSmsTemplatesListPage({
+        page: 1,
+        perPage: 25,
+        isFullMode: false,
+        smsRegister: {},
+      });
+      expect(page.totalCount).toBe(0);
+    });
+  });
+});

package/v2Containers/Templates/utils/smsTemplatesListApi.js

@@ -0,0 +1,79 @@
+import get from 'lodash/get';
+import * as Api from '../../../services/api';
+import { COPY_OF } from '../../../constants/unified';
+import { isTraiDLTEnable } from '../../../utils/common';
+
+/** Matches Templates `getAllTemplates` default for SMS. */
+export const SMS_TEMPLATES_LIST_SORT_MOST_RECENT = 'Most Recent';
+
+/**
+ * Same query shape as Redux `GET_ALL_TEMPLATES` for channel Sms (DLT vs non-DLT via traiEnable).
+ */
+export function buildSmsTemplatesListQueryParams({
+  page,
+  perPage,
+  name = '',
+  sortBy = SMS_TEMPLATES_LIST_SORT_MOST_RECENT,
+  isFullMode,
+  smsRegister,
+}) {
+  const traiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  return {
+    page,
+    perPage,
+    sortBy,
+    name: name || '',
+    ...(traiDlt ? { traiEnable: true } : {}),
+  };
+}
+
+/**
+ * SMS list for Redux saga: uses queryParams already built by Templates (incl. traiEnable).
+ * Applies the same "Copy of" → intl label as the former inline saga logic.
+ */
+export async function fetchSmsTemplatesFromQuery(queryParams, intlCopyOf = '') {
+  const raw = await Api.getAllTemplates({ channel: 'Sms', queryParams });
+  const response = raw.response || {};
+  let templates = get(response, 'templates', []) || [];
+  if (intlCopyOf && templates.length) {
+    templates = templates.map((template) => ({
+      ...template,
+      name: (template.name || '').replace(new RegExp(COPY_OF, 'g'), intlCopyOf),
+    }));
+  }
+  const channelTemplates = { ...response, templates };
+  return {
+    channelTemplates,
+    weCRMTemplate: response.unMapped,
+    raw,
+  };
+}
+
+/**
+ * SMS list for the RCS SMS fallback picker only.
+ * Called from `useLocalTemplateList` in SmsFallback — keeps data in component state and pairs with
+ * `localTemplatesConfig` / `useLocalTemplates` in TemplatesV2. Does **not** use GET_ALL_TEMPLATES saga.
+ * Same HTTP call shape as `fetchSmsTemplatesFromQuery` (used by the main SMS GET_ALL_TEMPLATES saga).
+ */
+export async function fetchSmsTemplatesListPage({
+  page,
+  perPage,
+  name,
+  sortBy,
+  isFullMode,
+  smsRegister,
+  intlCopyOf = '',
+}) {
+  const queryParams = buildSmsTemplatesListQueryParams({
+    page,
+    perPage,
+    name,
+    sortBy,
+    isFullMode,
+    smsRegister,
+  });
+  const { channelTemplates } = await fetchSmsTemplatesFromQuery(queryParams, intlCopyOf);
+  const templates = channelTemplates.templates || [];
+  const totalCount = get(channelTemplates, 'totalCount', get(channelTemplates, 'total', 0)) || 0;
+  return { templates, totalCount };
+}

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,7 +10,7 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 1140px;
+      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
       padding: 0.714rem 0;
@@ -23,6 +23,77 @@ export default css`
       height: calc(100vh - 11.25rem);
     } `}
   }
+
+  /* SMS fallback / local list: single pane skips .cap-tab-v2, so flex-fill the grid instead of viewport-fixed pagination height */
+  .creatives-templates-container--local-sms.library-mode {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+
+    .component-wrapper {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      height: 100%;
+    }
+
+    .templates-v2-local-sms-pane {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    .templates-v2-local-sms-pane .creatives-templates-list.library-mode {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    .templates-v2-local-sms-pane .creatives-templates-list.library-mode > .cap-row:first-of-type {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .templates-v2-local-sms-pane .creatives-templates-list.library-mode > .cap-row:first-of-type > div {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .templates-v2-local-sms-pane .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .templates-v2-local-sms-pane .v2-pagination-container,
+    .templates-v2-local-sms-pane .v2-pagination-container-half {
+      /* Match _templates local-SMS: bounded height so overflow-y scroll works (flex+100% alone often doesn’t) */
+      flex: 0 1 auto;
+      min-height: 0;
+      height: calc(100vh - 12rem);
+      max-height: calc(100vh - 12rem);
+      overflow-y: auto;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
 `;
 
 export const CapTabStyle = css`