@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.359-alpha.1

package/v2Containers/Templates/sagas.js

@@ -1,39 +1,76 @@
 import {
-  call, put, 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 { saveCdnConfigs, removeAllCdnLocalStorageItems, initCdnConfigFromEnv } 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';
 
-// 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 });
   }
@@ -107,6 +144,11 @@ export function* getOrgLevelCampaignSettings() {
 
 export function* getCdnTransformationConfig() {
   try {
+    // VAPT CAP-183204: prefer env vars injected via window.APP_ENV — avoids the
+    // API response that leaked CDN/S3 infrastructure details. Fallback to API
+    // keeps clusters that haven't received the env vars yet working during rollout.
+    if (initCdnConfigFromEnv()) return;
+
     const res = yield call(Api.getCdnTransformationConfig);
     if (res?.success && res?.status?.code === 200) {
       const cdnConfigs = res?.response;
@@ -265,6 +307,11 @@ 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() {
   yield takeLatest(types.DELETE_TEMPLATE_REQUEST, deleteTemplate);
 }
@@ -318,6 +365,7 @@ export function* watchForGetTemplateInfoById() {
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
+  watchGetLocalSmsTemplates,
   watchDeleteTemplate,
   watchDeleteRcsTemplate,
   watchGetUserList,
@@ -334,6 +382,7 @@ export default [
 export function* v2TemplateSaga() {
   yield all([
     watchGetAllTemplates(),
+    watchGetLocalSmsTemplates(),
     watchDeleteTemplate(),
     watchDeleteRcsTemplate(),
     watchGetUserList(),

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();
+  });
+});