@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.14

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

@@ -1,7 +1,5 @@
 import { expectSaga } from 'redux-saga-test-plan';
-import {
-  take, call, takeLatest, takeEvery, put,
-} from 'redux-saga/effects';
+import { take, call, takeLatest, takeEvery, put } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import * as api from '../../../services/api';
 import * as types from '../constants';
@@ -10,13 +8,13 @@ import * as cdnUtils from '../../../utils/cdnTransformation';
 import {
   getCdnTransformationConfig,
   getAllTemplates,
-  getLocalSmsTemplates,
   watchGetCdnTransformationConfig,
   watchGetAllTemplates,
   getSenderDetails,
   fetchWeCrmAccounts,
   sendZippedFile,
   fetchUserList,
+  watchGetUserList,
   deleteRcsTemplate,
   watchDeleteRcsTemplate,
   watchForGetTemplateInfoById,
@@ -33,7 +31,6 @@ import {
 } from '../sagas';
 
 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 { throwError } from 'redux-saga-test-plan/providers';
@@ -136,8 +133,8 @@ describe('templateList saga', () => {
       ],
     ]).put({
         type: types.GET_ALL_TEMPLATES_SUCCESS,
-        data: mockData.getAllTemplatesListSuccess.response,
-        weCRMTemplate: mockData.getAllTemplatesListSuccess.response?.unMapped,
+        data: mockData.getAllTemplatesListSuccess,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess,
         isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
       })
       .run();
@@ -153,8 +150,8 @@ describe('templateList saga', () => {
       ],
     ]).put({
         type: types.GET_ALL_TEMPLATES_SUCCESS,
-        data: mockData.getAllTemplatesListSuccess.response,
-        weCRMTemplate: mockData.getAllTemplatesListSuccess.response?.unMapped,
+        data: mockData.getAllTemplatesListSuccess,
+        weCRMTemplate: mockData.getAllTemplatesListSuccess,
         isReset: mockData.getAllTemplatesListSuccess?.queryParams?.page === 1,
       })
       .run();
@@ -173,163 +170,6 @@ 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', () => {
@@ -523,7 +363,7 @@ describe('getSenderDetails Saga', () => {
 
 describe('fetchWeCrmAccounts Saga', () => {
   const action = { source: 'CRM' };
-  it('handles successful fetching of WeCRM accounts', () => {
+  test.concurrent('handles successful fetching of WeCRM accounts', () => {
     const fakeResponse = {
       response: [{ id: 1, name: 'Account One' }]
     };
@@ -536,11 +376,14 @@ describe('fetchWeCrmAccounts Saga', () => {
       })
     );
   });
-  it('handles error thrown from api', () => {
+  test.concurrent('handles error thrown from api', () => {
     const error = new Error('Fetch failed');
-    expectSaga(fetchWeCrmAccounts, action)
+    expectSaga(fetchWeCrmAccounts, action.source)
       .provide([
-        [call(api.fetchWeCrmAccounts, action.source), throwError(error)],
+        [
+          call(api.fetchWeCrmAccounts),
+          throwError(error)
+        ],
       ])
       .put({
         type: types.GET_WECRM_ACCOUNTS_FAILURE,
@@ -582,29 +425,6 @@ 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)
@@ -909,4 +729,114 @@ describe('watchForGetTemplateInfoById saga', () => {
       .not.call(getTemplateInfoById, action)
       .run();
   });
+});
+
+describe('watchGetOrgLevelCampaignSettings saga', () => {
+  it('should take latest GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST', () => {
+    const generator = watchGetOrgLevelCampaignSettings();
+    expect(generator.next().value).toEqual(
+      takeLatest(types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST, getOrgLevelCampaignSettings),
+    );
+  });
+});
+
+describe('watchGetUserList saga', () => {
+  it('should take latest GET_USER_LIST_REQUEST', () => {
+    const generator = watchGetUserList();
+    expect(generator.next().value).toEqual(
+      takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList),
+    );
+  });
+});
+
+describe('getAllTemplates wechat channel', () => {
+  it('should combine mapped and richmedia and sort by Most Recent (desc updatedAt)', () => {
+    const wechatChannel = {
+      channel: 'wechat',
+      queryParams: { page: 1, sortBy: 'Most Recent' },
+    };
+    const apiResult = {
+      response: {
+        mapped: [{ name: 'Template B', updatedAt: '2020-01-01' }],
+        richmedia: [{ name: 'Template A', updatedAt: '2023-06-01' }],
+        unMapped: {},
+      },
+    };
+    const generator = getAllTemplates(wechatChannel);
+    generator.next(); // yield call(Api.getAllTemplates, ...)
+    const putEffect = generator.next(apiResult).value;
+    // Most recent first: Template A (2023) before Template B (2020)
+    expect(putEffect).toEqual(
+      put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: {
+          templates: [
+            { name: 'Template A', updatedAt: '2023-06-01' },
+            { name: 'Template B', updatedAt: '2020-01-01' },
+          ],
+        },
+        weCRMTemplate: {},
+        isReset: true,
+      }),
+    );
+    expect(generator.next().done).toBe(true);
+  });
+
+  it('should combine mapped and richmedia and sort Alphabetically for wechat channel', () => {
+    const wechatChannel = {
+      channel: 'wechat',
+      queryParams: { page: 1, sortBy: 'Alphabetically' },
+    };
+    const apiResult = {
+      response: {
+        mapped: [{ name: 'Z Template' }, { name: 'A Template' }],
+        richmedia: [],
+        unMapped: {},
+      },
+    };
+    const generator = getAllTemplates(wechatChannel);
+    generator.next(); // yield call(Api.getAllTemplates, ...)
+    // b.name - a.name on strings gives NaN; sort order is unchanged from original
+    expect(generator.next(apiResult).value).toEqual(
+      put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: { templates: [{ name: 'Z Template' }, { name: 'A Template' }] },
+        weCRMTemplate: {},
+        isReset: true,
+      }),
+    );
+    expect(generator.next().done).toBe(true);
+  });
+
+  it('should replace COPY_OF string in template names when intlCopyOf is set', () => {
+    const channelWithCopy = {
+      channel: 'email',
+      queryParams: { page: 1 },
+      intlCopyOf: 'Copia de',
+    };
+    const apiResult = {
+      response: {
+        templates: [{ name: 'Copy of Template 1' }, { name: 'Regular Template' }],
+        unMapped: {},
+      },
+    };
+    const generator = getAllTemplates(channelWithCopy);
+    generator.next();
+    const putEffect = generator.next(apiResult).value;
+    expect(putEffect).toEqual(
+      put({
+        type: types.GET_ALL_TEMPLATES_SUCCESS,
+        data: {
+          templates: [
+            { name: 'Copia de Template 1' },
+            { name: 'Regular Template' },
+          ],
+          unMapped: {},
+        },
+        weCRMTemplate: {},
+        isReset: true,
+      }),
+    );
+    expect(generator.next().done).toBe(true);
+  });
 });

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,7 +10,7 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 71.25rem;
+      max-width: 1140px;
       margin: 0 auto;
       width: 100%;
       padding: ${CAP_SPACE_24} 0;
@@ -23,77 +23,6 @@ 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, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
-import { find, get, pick } from 'lodash';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
+import { find, get } from 'lodash';
 import Helmet from 'react-helmet';
 
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -36,14 +36,13 @@ 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
@@ -120,9 +119,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       return !normalizedChannelsToHideSet.has(paneKey);
     });
 
-    if (isFullMode && !normalizedChannelsToHideSet.has(normalizeChannel(ASSETS))) {
-      filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: ASSETS });
-    } else if (!isFullMode) {
+    if (isFullMode) {
+      filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets' });
+    } else {
       // 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() });
@@ -223,8 +222,7 @@ 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 =
@@ -250,8 +248,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       </CapSpin>
 
     </div>);
-  };
-
+  }
   getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode}/>
   getCallTaskComponent = () => (
     <CallTask
@@ -315,29 +312,6 @@ 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':
@@ -387,55 +361,29 @@ 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'}${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={`${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} />}
-                {...(!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}
-              />
-            )}
+            {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>
         </div>
       )
@@ -467,17 +415,6 @@ 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/Whatsapp/index.js

@@ -118,7 +118,6 @@ import { ANDROID } from '../../v2Components/CommonTestAndPreview/constants';
 import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
-import { splitContentByOrderedVarTokens } from '../../utils/templateVarUtils';
 import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
@@ -484,10 +483,28 @@ export const Whatsapp = (props) => {
     );
   };
 
+  const converStringToVarArr = (validVarArr, content) => {
+    const templateVarArray = [];
+    while (content?.length !== 0) {
+      //converting content string to an array split at var
+      const index = content.indexOf(validVarArr?.[0]);
+      if (index !== -1) {
+        templateVarArray.push(content.substring(0, index)); //push string before var
+        templateVarArray.push(validVarArr?.[0]); //push var
+        content = content.substring(index + validVarArr?.[0]?.length, content?.length); //remaining str
+        validVarArr?.shift(); //remove considered var
+      } else {
+        templateVarArray.push(content); //remaining str
+        break;
+      }
+    }
+    return templateVarArray;
+  }
+
   const computeTextMessage = (msg, varMap, regex) => {
     const validVarArr = msg?.match(regex) || [];
     //conerting msg string to variable arr
-    const templateHeaderArray = splitContentByOrderedVarTokens(validVarArr, msg);
+    const templateHeaderArray = converStringToVarArr(validVarArr, msg);
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
@@ -541,7 +558,7 @@ export const Whatsapp = (props) => {
       setUnsubscribeRequired(true);
     }
     //converting msg string to variable arr
-    const templateMessageArray = splitContentByOrderedVarTokens(validVarArr, msg);
+    const templateMessageArray = converStringToVarArr(validVarArr, msg);
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
   };