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

package/v2Containers/Templates/index.js

@@ -125,7 +125,7 @@ import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } from '../InApp/const
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill, getWhatsappCarouselButtonView } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
-import {RCS_STATUSES} from '../Rcs/constants';
+import { RCS_STATUSES, HOST_INFOBIP } from '../Rcs/constants';
 import zaloMessages from '../Zalo/messages';
 import rcsMessages from '../Rcs/messages';
 import inAppMessages from '../InApp/messages';
@@ -463,7 +463,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) {
+    // When using local templates (e.g. SMS fallback selector), do not fetch from API or we overwrite global store and break background RCS list
+    const useLocalTemplates = get(
+      this.props,
+      'localTemplatesConfig.useLocalTemplates',
+      get(this.props, 'useLocalTemplates', false),
+    );
+    if (!useLocalTemplates && [LINE_LOWERCASE, VIBER_CHANNEL, FACEBOOK_CHANNEL, SMS_LOWERCASE, EMAIL_LOWERCASE, EBILL_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -546,7 +552,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         selectedTemplateForPreview: null,
         testAndPreviewContent: null,
       }, () => {
-        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if ([LINE_LOWERCASE, VIBER_CHANNEL, FACEBOOK_CHANNEL, SMS_LOWERCASE, EMAIL_LOWERCASE, EBILL_LOWERCASE, RCS_LOWERCASE].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
@@ -1009,8 +1015,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   componentWillUnmount() {
     window.removeEventListener("message", this.handleFrameTasks);
-    this.props.actions.resetTemplateStoreData();
-    this.props.globalActions.clearMetaEntities();
+    // When using local templates (e.g. SMS fallback selector), do not clear global store or background RCS list is wiped
+    const useLocalTemplates = get(
+      this.props,
+      'localTemplatesConfig.useLocalTemplates',
+      get(this.props, 'useLocalTemplates', false),
+    );
+    if (!useLocalTemplates) {
+      this.props.actions.resetTemplateStoreData();
+      this.props.globalActions.clearMetaEntities();
+    }
     // Clear any pending timeouts to prevent memory leaks
     if (this._clearEditTimeout) {
       clearTimeout(this._clearEditTimeout);
@@ -1867,12 +1881,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   filterRcsTemplates = (templates) => {
-    let { selectedRcsStatus } = this.state;
-    selectedRcsStatus = !this.props.isFullMode ? RCS_STATUSES.approved : '';
-    if (selectedRcsStatus) {
-      return templates?.filter((template) => template?.versions?.base?.content?.RCS?.rcsContent?.cardContent?.[0]?.Status === selectedRcsStatus);
+    const selectedRcsAccountName = this.props?.Templates?.selectedRcsAccount?.name || '';
+    const hostName = this.state?.hostName;
+    let nextTemplates = templates || [];
+    if (selectedRcsAccountName) {
+      nextTemplates = nextTemplates.filter(
+        (t) => get(t, 'versions.base.content.RCS.rcsContent.accountName', '') === selectedRcsAccountName
+      );
     }
-    return templates;
+    if (!this.props.isFullMode && hostName !== HOST_INFOBIP) {
+      return nextTemplates.filter(
+        (t) => get(t, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', 'unavailable') === RCS_STATUSES.approved
+      );
+    }
+    return nextTemplates;
   }
 
   filterZaloTemplates = (templates) => {
@@ -2062,7 +2084,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 style={{ marginRight: "16px" }}
                 type="eye"
                 onClick={() => {
-                  if (!this.props.isFullMode || this.props.isDltFromRcs) {
+                  if (!this.props.isFullMode || this.props.isDltFromRcs || this.props.isSmsFallbackFromRcs) {
                     if (!get(template, "versions.base.content.zalo.previewUrl", "")) {
                       this.setState({ zaloPreviewItemId: template?._id });
                     }
@@ -2544,13 +2566,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRow type="flex" align="middle">
               {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
-              <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
+              {this.state.hostName !== HOST_INFOBIP && <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
                   type={statusDisplay}
-                  text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
-                  labelType="label3"
-                />
-              </CapRow>
+                    text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
+                    labelType="label3"
+                  />
+                </CapRow>
+              }
             </CapRow>
           );
         
@@ -3126,6 +3149,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let routeParams = {};
     const {fbAdManager} = this.props;
     const isLibraryMode = this.isEnabledInLibraryModule("callCreateFromProps");
+
     if (!isLibraryMode) {
       timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
     }
@@ -3475,6 +3499,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({modeType});
     }
     const { _id: id } = template;
+    const {
+      localTemplatesConfig,
+      fbAdManager,
+      isDltFromRcs,
+      isSmsFallbackFromRcs,
+      onSelectTemplate,
+    } = this.props;
     const type = this.props.location.query.type;
     const module = this.props.location.query.module;
     const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
@@ -3560,10 +3591,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       let data = id;
-      if (this.props.fbAdManager || this.props.isDltFromRcs) {
+      if (localTemplatesConfig?.useLocalTemplates) {
+        data = template;
+      } else if (fbAdManager || isDltFromRcs || isSmsFallbackFromRcs) {
         data = this.selectTemplate(id);
       }
-      this.props.onSelectTemplate(data, this.props.fbAdManager);
+      onSelectTemplate(data, fbAdManager);
     } else {
       timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -4522,9 +4555,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
-
     const createButton =
-      ( (channelLowerCase === WHATSAPP_LOWERCASE || channelLowerCase === RCS_LOWERCASE) && !this.props.isFullMode )
+      (
+        (
+          channelLowerCase === WHATSAPP_LOWERCASE
+          || channelLowerCase === RCS_LOWERCASE
+        )
+        && !this.props.isFullMode
+      )
       ? (
         <CapLink
           onClick={this.openCreativesFullMode}
@@ -4556,17 +4594,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const _renderSelectedIdsArray = _renderSelectedIds && typeof _renderSelectedIds.toJS === 'function' ? _renderSelectedIds.toJS() : (Array.isArray(_renderSelectedIds) ? _renderSelectedIds : []);
     const _renderHasSelection = _isArchivalEnabled && this.props.isFullMode && _renderSelectedIdsArray.length > 0;
 
-    const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">
-      {isfilterContentVisisble && <CapInput.Search
-        className="search-text"
-        style={{width: '210px'}}
-        placeholder={_isArchivedMode ? this.props.intl.formatMessage(messages.searchArchivedTemplates) : this.props.intl.formatMessage(messages.searchText)}
-        value={this.state.searchText}
-        onChange={(e) => this.searchTemplate(e.target.value, this.state.channel)}
-        disabled={this.checkSearchDisabled()}
-        onClear={() => this.searchTemplate('', this.state.channel)}
-        onScroll={(e) => e.stopPropagation()}
-      />}
+    const useLocalTemplates = this.props.localTemplatesConfig?.useLocalTemplates;
+    const builtFilterContent = ((isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && (
+      <div className="action-container">
+        <div className="action-container__toolbar-row">
+          {isfilterContentVisisble ? (
+            <CapInput.Search
+              className="search-text"
+              placeholder={this.props.intl.formatMessage(messages.searchText)}
+              value={this.state.searchText}
+              onChange={(e) => this.searchTemplate(e.target.value, this.state.channel)}
+              onSearch={() => this.searchTemplate(this.state.searchText, this.state.channel)}
+              onClear={() => this.searchTemplate('', this.state.channel)}
+              onScroll={(e) => e.stopPropagation()}
+              disabled={this.checkSearchDisabled()}
+            />
+          ) : null}
       {
         channel.toUpperCase() === WECHAT && <CapRadio.CapRadioGroup className="wechat-filters" defaultValue={wechatFilter} onChange={this.setWechatFilter}>
           <CapRadio.Button value={WECHAT_FILTERS.ALL}><CapLabel type="label2">
@@ -4713,16 +4756,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         )
       }
       <div className="template-listing-header-actions">
-        {!_isArchivedMode && !_renderHasSelection && (
-          this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded) ? (
-            <CapTooltip title={whatsappCountExceedText}>
-              <div className="button-disabled-tooltip-wrapper">
-                {createButton}
-              </div>
-            </CapTooltip>
-          )
-            : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && createButton
-        )}
         {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
         {commonUtil.hasCreativesArchivalEnabled() && !_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
           <CapDropdown
@@ -4745,7 +4778,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapDropdown>
         )}
       </div>
-    </div>);
+    </div>
+        <div>
+          <div className="action-container__create-row">
+            {
+              isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && (
+                this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
+                  <CapTooltip title={whatsappCountExceedText}>
+                    <div className="button-disabled-tooltip-wrapper">
+                      {createButton}
+                    </div>
+                  </CapTooltip>
+                ) : createButton
+              )
+            }
+          </div>
+        </div>
+      </div>
+    ));
+    const localTemplatesFilterContent = get(this.props, 'localTemplatesConfig.localTemplatesFilterContent', null);
+    const filterContent = (useLocalTemplates && localTemplatesFilterContent) != null
+      ? localTemplatesFilterContent
+      : builtFilterContent;
     let htmlPreviewContent = "";
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
@@ -4755,7 +4809,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
     const creativesParams = this.getCreativesParams();
-    const templates = this.props.TemplatesList || [];
+    const templates = useLocalTemplates
+      ? (this.props.localTemplatesConfig?.localTemplates || [])
+      : (this.props.TemplatesList || []);
+    const isLoadingWhenLocal = useLocalTemplates && !!this.props.localTemplatesConfig?.localTemplatesLoading;
     const {route} = this.props;
     const loadingTipMap = {
       sendingFile: 'uploadingFile',
@@ -4770,9 +4827,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         (deleteRcsTemplateInProgress && 'deletingTemplate') ||
         (this.props.EmailCreate.duplicateTemplateInProgress && 'duplicatingTemplate');
 
-    const loadingTip = messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+    const loadingTip = useLocalTemplates && this.props.localTemplatesConfig?.localTemplatesLoadingTip
+      ? this.props.localTemplatesConfig.localTemplatesLoadingTip
+      : (messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates));
     const showNoTemplatesFoundZalo = this.state.channel.toUpperCase() === ZALO && isEmpty(this.state.searchedZaloTemplates) && this.state.searchingZaloTemplate;
-    const showNoTemplatesFoundOther = ![ZALO].includes(this.state.channel.toUpperCase()) && isEmpty(this.props.TemplatesList) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText);
+    const showNoTemplatesFoundOther = ![ZALO].includes(this.state.channel.toUpperCase()) && isEmpty(templates) && (useLocalTemplates ? !isLoadingWhenLocal : !this.props.Templates.getAllTemplatesInProgress) && (useLocalTemplates || !isEmpty(this.state.searchText));
     const showNoTemplatesFound = showNoTemplatesFoundZalo || showNoTemplatesFoundOther;
 
     return (
@@ -4816,7 +4875,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             />
           ) : null}
           
-          {channel.toLowerCase() === RCS_LOWERCASE && !isFullMode ? (
+          {channel.toLowerCase() === RCS_LOWERCASE && !isFullMode && this.state?.hostName !== HOST_INFOBIP ? (
             <CapInfoNote
               message={formatMessage(messages.rcsOnlyApprovedTemplates)}
             />
@@ -4829,22 +4888,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           ) : null}
           <CapRow>
             <Pagination
-              templateInProgress={
-                this.props.Templates.getAllTemplatesInProgress
-              }
+              templateInProgress={useLocalTemplates ? isLoadingWhenLocal : this.props.Templates.getAllTemplatesInProgress}
               onPageChange={
-                templates.length ? this.onPaginationChange : () => {}
+                templates.length
+                  ? (useLocalTemplates ? (this.props.localTemplatesConfig?.localTemplatesOnPageChange || (() => {})) : this.onPaginationChange)
+                  : () => {}
               }
             >
               {this.getTemplateDataForGrid({
                 previewTemplateId: this.state.zaloPreviewItemId,
-                isLoading,
-                isInitialLoading,
+                isLoading: useLocalTemplates ? isLoadingWhenLocal : isLoading,
+                isInitialLoading: useLocalTemplates ? isLoadingWhenLocal && templates.length === 0 : isInitialLoading,
                 loadingTip,
                 channel: this.state.channel,
                 templates: this.state.searchingZaloTemplate
                   ? this.state.searchedZaloTemplates
-                  : this.props.TemplatesList,
+                  : templates,
                 filterContent,
                 handlers: {
                   handlePreviewClick: this.handlePreviewClick,
@@ -5027,6 +5086,15 @@ Templates.propTypes = {
   WebPush: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
+  isSmsFallbackFromRcs: PropTypes.bool,
+  localTemplatesConfig: PropTypes.shape({
+    useLocalTemplates: PropTypes.bool,
+    localTemplates: PropTypes.arrayOf(PropTypes.object),
+    localTemplatesLoading: PropTypes.bool,
+    localTemplatesLoadingTip: PropTypes.string,
+    localTemplatesFilterContent: PropTypes.node,
+    localTemplatesOnPageChange: PropTypes.func,
+  }),
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/sagas.js

@@ -1,5 +1,5 @@
 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';
@@ -8,32 +8,69 @@ import * as Api from '../../services/api';
 import * as types from './constants';
 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 });
   }
@@ -270,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);
 }
@@ -323,6 +365,7 @@ export function* watchForGetTemplateInfoById() {
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
+  watchGetLocalSmsTemplates,
   watchDeleteTemplate,
   watchDeleteRcsTemplate,
   watchGetUserList,
@@ -339,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();
+  });
+});