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

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

@@ -1,6 +1,5 @@
 import { fromJS } from "immutable";
 import { makeSelectTemplatesResponse } from "../selectors";
-import { selectArchiveFilter, selectSelectedTemplateIds } from "../selectors";
 
 describe("Template selectors", () => {
   const mockState = fromJS({
@@ -16,34 +15,3 @@ describe("Template selectors", () => {
     });
   });
 });
-
-describe("selectArchiveFilter selector", () => {
-  it("should return archiveFilter from state", () => {
-    const state = fromJS({
-      templates: { archiveFilter: 'archived' },
-    });
-    const result = selectArchiveFilter().resultFunc(state.get('templates').toJS());
-    expect(result).toBe('archived');
-  });
-
-  it("should default to 'active' when archiveFilter is not set", () => {
-    const result = selectArchiveFilter().resultFunc({});
-    expect(result).toBe('active');
-  });
-});
-
-describe("selectSelectedTemplateIds selector", () => {
-  it("should return selectedTemplateIds from state", () => {
-    const ids = ['id1', 'id2'];
-    const state = fromJS({
-      templates: { selectedTemplateIds: ids },
-    });
-    const result = selectSelectedTemplateIds().resultFunc(state.get('templates').toJS());
-    expect(result).toEqual(ids);
-  });
-
-  it("should default to [] when selectedTemplateIds is not set", () => {
-    const result = selectSelectedTemplateIds().resultFunc({});
-    expect(result).toEqual([]);
-  });
-});

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: ${CAP_SPACE_24} 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`

package/v2Containers/TemplatesV2/index.js

@@ -10,8 +10,8 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
-import { find, get } from 'lodash';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
+import { find, get, pick } from 'lodash';
 import Helmet from 'react-helmet';
 
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -36,13 +36,14 @@ import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Contai
 import {
   CALL_TASK,
   COMMON_CHANNELS,
+  LOCAL_TEMPLATE_CONFIG_KEYS_FOR_PICK,
   LOYALTY_SUPPORTED_ACTION,
   MOBILE_PUSH,
   NORMALIZED_CHANNEL_ALIASES,
   SMS,
 } from "../CreativesContainer/constants";
 
-const {CapCustomCardList} = CapCustomCard;
+const { CapCustomCardList } = CapCustomCard;
 
 const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -119,9 +120,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       return !normalizedChannelsToHideSet.has(paneKey);
     });
 
-    if (isFullMode) {
-      filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets' });
-    } else {
+    if (isFullMode && !normalizedChannelsToHideSet.has(normalizeChannel(ASSETS))) {
+      filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: ASSETS });
+    } else if (!isFullMode) {
       // Add special-mode panes only when not hidden (use normalized checks)
       if (!normalizedChannelsToHideSet.has(CALL_TASK.toLowerCase())) {
         filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.callTask), key: CALL_TASK.toLowerCase() });
@@ -222,7 +223,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       this.setState({selectedChannel: nextProps.channel, panes });
     }
   }
-  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
+
+  getTemplateDataForGrid = ({ templates, handlers, filterContent, channel, isLoading, loadingTip }) => {
     const currentChannel = channel.toUpperCase();
     const cardDataList = templates.map((template) => {
       const templateData =
@@ -248,7 +250,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       </CapSpin>
 
     </div>);
-  }
+  };
+
   getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode}/>
   getCallTaskComponent = () => (
     <CallTask
@@ -312,6 +315,29 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     if (messageStrategy !== "X_ENGAGE" && channel === 'facebook' && !isFullMode) {
       return this.getFacebookComponent();
     }
+    const localConfig = this.props.localTemplatesConfig || pick(this.props, LOCAL_TEMPLATE_CONFIG_KEYS_FOR_PICK);
+    const useLocalTemplates = localConfig.useLocalTemplates;
+    if (useLocalTemplates && channel === (this.props.channel || 'sms')) {
+      // Reuse full Templates component (same UI as Redux flow) with local data only
+      const location = { pathname: `/${channel}`, search: '', query: !this.props.isFullMode ? { type: 'embedded', module: 'library' } : {} };
+      return (
+        <Templates
+          key={`${channel}-local`}
+          location={location}
+          route={{ name: channel }}
+          router={this.props.router}
+          isFullMode={this.props.isFullMode}
+          createNew={this.props.createNew}
+          onSelectTemplate={this.props.onSelectTemplate}
+          handlePeviewTemplate={this.props.handlePeviewTemplate}
+          messageStrategy={this.props.messageStrategy}
+          smsRegister={this.props.smsRegister}
+          hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
+          localTemplatesConfig={localConfig}
+        />
+      );
+    }
+
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {
       case 'call_task':
@@ -361,29 +387,55 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   }
   render() {
     const { isFullMode, className, cap = {}, Global = {}} = this.props;
+    const useLocalTemplates = get(this.props, 'localTemplatesConfig.useLocalTemplates', false);
     const { accessiblePermissions = []} = cap.user || Global.user || {};
     let isCreativeAccessible = true;
     if (!accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
       isCreativeAccessible = false;
     }
+    // Recompute active pane content every render so local-list mode updates
+    // (templates/loading/search UI) are not stuck with the initial cached pane.
+    const panes = this.setChannelContent(this.state.selectedChannel, this.state.panes);
+    const hideChannelTabsForLocalSms = useLocalTemplates && panes.length === 1;
+    const activeLocalPane = hideChannelTabsForLocalSms
+      ? (panes.find(
+        (p) => String(p.key).toLowerCase() === String(this.state.selectedChannel).toLowerCase(),
+      ) || panes[0])
+      : null;
     return (
       !isCreativeAccessible ? <AccessForbidden /> : (
-        <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`} data-testid="cap-wrapper">
-          {isFullMode && <Helmet
-            title={this.props.intl.formatMessage(messages.creatives)}
-            meta={[
-              { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
-            ]}
-          />}
-          <div className="component-wrapper">
-            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-            <StyledCapTab
-              panes={this.state.panes}
-              onChange={this.channelChange}
-              activeKey={this.state.selectedChannel}
-              defaultActiveKey={this.state.selectedChannel}
-              isFullMode={isFullMode}
+        <div
+          className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}${useLocalTemplates ? ' creatives-templates-container--local-sms' : ''}`}
+          data-testid="cap-wrapper"
+        >
+          {isFullMode && !useLocalTemplates && (
+            <Helmet
+              title={this.props.intl.formatMessage(messages.creatives)}
+              meta={[
+                { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
+              ]}
             />
+          )}
+          <div className="component-wrapper">
+            {isFullMode && (
+              <CapHeader
+                title={<FormattedMessage {...messages.creatives} />}
+                {...(!useLocalTemplates && {
+                  description: <FormattedMessage {...messages.creativesDesc} />,
+                })}
+              />
+            )}
+            {hideChannelTabsForLocalSms ? (
+              <div className="templates-v2-local-sms-pane">{activeLocalPane?.content}</div>
+            ) : (
+              <StyledCapTab
+                panes={panes}
+                onChange={this.channelChange}
+                activeKey={this.state.selectedChannel}
+                defaultActiveKey={this.state.selectedChannel}
+                isFullMode={isFullMode}
+              />
+            )}
           </div>
         </div>
       )
@@ -415,6 +467,17 @@ TemplatesV2.propTypes = {
   currentOrgDetails: PropTypes.object,
   restrictPersonalization: PropTypes.bool,
   isAnonymousType: PropTypes.bool,
+  // Optional: reuse grid UI with local template list (e.g. SMS fallback). Pass object or same keys as individual props.
+  localTemplatesConfig: PropTypes.shape({
+    useLocalTemplates: PropTypes.bool,
+    localTemplates: PropTypes.arrayOf(PropTypes.object),
+    localTemplatesLoading: PropTypes.bool,
+    localTemplatesLoadingTip: PropTypes.string,
+    localTemplatesFilterContent: PropTypes.node,
+    localTemplatesFooterContent: PropTypes.node,
+    localTemplatesOnPageChange: PropTypes.func,
+    localTemplatesUseSkeleton: PropTypes.bool,
+  }),
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/tests/TemplatesV2.localTemplates.test.js

@@ -0,0 +1,131 @@
+/**
+ * Embedded SMS template list: localTemplatesConfig + SMS-only channel visibility (RCS SMS fallback).
+ */
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import cloneDeep from 'lodash/cloneDeep';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { render, screen } from '../../../utils/test-utils';
+import { TemplatesV2 } from '../index';
+import { Templates, authData, currentOrgDetails as currentOrgDetailsMock } from './mockData';
+import { CHANNELS_TO_HIDE_FOR_SMS_ONLY } from '../../../v2Components/SmsFallback/constants';
+
+const mockTemplates = jest.fn(() => <div data-testid="templates-mock">Templates</div>);
+jest.mock('v2Containers/Templates', () => ({
+  __esModule: true,
+  default: (props) => mockTemplates(props),
+}));
+
+jest.mock('../../../utils/authWrapper', () => ({
+  UserIsAuthenticated: jest.fn((config) => config),
+}));
+
+const ComponentToRender = injectIntl(TemplatesV2);
+const renderComponent = (p) => {
+  const store = configureStore({}, initialReducer, history);
+  return render(
+    <Provider store={store}>
+      <ComponentToRender {...p} />
+    </Provider>,
+  );
+};
+
+describe('TemplatesV2 local SMS templates (embedded)', () => {
+  const templateActions = {
+    templateActions: jest.fn(),
+    deleteTemplate: jest.fn(),
+    getAccountsSettings: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getCdnTransformationConfig: jest.fn(),
+    getDefaultBeeTemplates: jest.fn(),
+    getSenderDetails: jest.fn(),
+    getTemplateDetails: jest.fn(),
+    getUserList: jest.fn(),
+    getWeCrmAccounts: jest.fn(),
+    handleHtmlUpload: jest.fn(),
+    handleZipUpload: jest.fn(),
+    resetAccount: jest.fn(),
+    resetTemplate: jest.fn(),
+    resetTemplateData: jest.fn(),
+    resetTemplateStoreData: jest.fn(),
+    resetUploadData: jest.fn(),
+    setBEETemplate: jest.fn(),
+    setChannelAccount: jest.fn(),
+    setEdmTemplate: jest.fn(),
+    setFacebookAccount: jest.fn(),
+    setViberAccount: jest.fn(),
+    setWeChatAccount: jest.fn(),
+  };
+
+  const baseProps = {
+    cap: {
+      user: { accessiblePermissions: ['CREATIVES_UI_VIEW'] },
+    },
+    actions: { defaultAction: jest.fn(), getTemplates: jest.fn() },
+    Templates,
+    TemplatesList: Templates?.templates,
+    authData,
+    templateActions,
+    isFullMode: false,
+    className: 'embed-test',
+    channel: 'sms',
+    channelsToHide: CHANNELS_TO_HIDE_FOR_SMS_ONLY,
+    channelsToDisable: [],
+    onChannelChange: jest.fn(),
+    enableNewChannels: [],
+    /** Without JP_LOCALE_HIDE_FEATURE so SMS panes are not stripped to Email/Line/Gallery only */
+    currentOrgDetails: {
+      ...currentOrgDetailsMock,
+      accessibleFeatures: (currentOrgDetailsMock.accessibleFeatures || []).filter(
+        (f) => f !== 'JP_LOCALE_HIDE_FEATURE',
+      ),
+    },
+    location: {
+      pathname: 'v2',
+      basename: '/creatives/ui/',
+      query: {},
+    },
+    router: { push: jest.fn() },
+  };
+
+  beforeEach(() => {
+    mockTemplates.mockClear();
+  });
+
+  it('adds local-sms container class and single-pane layout when only SMS is visible', () => {
+    const p = cloneDeep(baseProps);
+    p.localTemplatesConfig = {
+      useLocalTemplates: true,
+      localTemplates: [],
+      localTemplatesLoading: false,
+    };
+    renderComponent(p);
+
+    const wrapper = screen.getByTestId('cap-wrapper');
+    expect(wrapper).toHaveClass('creatives-templates-container--local-sms');
+    expect(document.querySelector('.templates-v2-local-sms-pane')).toBeTruthy();
+    expect(mockTemplates).toHaveBeenCalled();
+  });
+
+  it('passes localTemplatesConfig into Templates for the SMS pane', () => {
+    const localConfig = {
+      useLocalTemplates: true,
+      localTemplates: [{ _id: '1', name: 'A' }],
+      localTemplatesLoading: false,
+    };
+    const p = cloneDeep(baseProps);
+    p.localTemplatesConfig = localConfig;
+    renderComponent(p);
+
+    expect(mockTemplates).toHaveBeenCalled();
+    const passed = mockTemplates.mock.calls.find(
+      (call) => call[0] && call[0].localTemplatesConfig && call[0].localTemplatesConfig.useLocalTemplates,
+    );
+    expect(passed).toBeTruthy();
+    expect(passed[0].localTemplatesConfig).toMatchObject(localConfig);
+  });
+});