@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Containers/SmsWrapper/index.js

@@ -10,12 +10,14 @@ import { isTraiDLTEnable } from '../../utils/common';
 import SmsEdit from '../Sms/Edit';
 import SmsTraiCreate from '../SmsTrai/Create';
 import SmsTraiEdit from '../SmsTrai/Edit';
+
 const SmsWrapper = (props) => {
   const {
     isCreateSms,
     isEditSms,
     setIsLoadingContent,
     location,
+    route: routeFromProps,
     isGetFormData,
     getFormSubscriptionData,
     isFullMode,
@@ -37,15 +39,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    embeddedSmsFallback = false,
+    onEmbeddedSmsFooterValidity,
+    forceFullTagContext = false,
     } = props;
 
+  /** FormBuilder / SMS Create assume `location.query`; connected-router shapes may omit it. */
+  const smsLocation = (() => {
+    const loc = location || {};
+    const q = loc.query;
+    if (q && typeof q === 'object') {
+      return { ...loc, query: { ...q } };
+    }
+    return {
+      pathname: loc.pathname || '/sms/create',
+      search: loc.search || '',
+      query: { type: 'embedded', module: 'library' },
+    };
+  })();
+
   const smsProps = {
     onCreateComplete,
     setIsLoadingContent,
-    location,
-    route: { name: 'sms' },
+    location: smsLocation,
+    route: routeFromProps || { name: 'sms' },
     isGetFormData,
     getFormSubscriptionData,
+    templateData,
     getDefaultTags,
     isFullMode,
     forwardedTags,
@@ -60,24 +80,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    forceFullTagContext,
+    embeddedSmsFallback,
+    onEmbeddedSmsFooterValidity,
+    ...(embeddedSmsFallback
+      ? {
+        tagListGetPopupContainer: () => document.body,
+        tagListPopoverOverlayStyle: { zIndex: 10020 },
+        tagListPopoverOverlayClassName: 'sms-fallback-taglist-popover rcs-sms-fallback-taglist-popover',
+      }
+      : {}),
   };
-  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  const useTraiSmsFlow = isTraiDLTEnable(isFullMode, smsRegister);
   return <>
     {
-      isCreateSms && (isTraiDlt ?
+      isCreateSms && (useTraiSmsFlow ?
         <SmsTraiCreate
           isComponent
           {...smsProps}
           onShowTemplates={onShowTemplates}
           /> :
           <SmsCreate
-            isComponent {
-              ...smsProps
-            }
+            isComponent
+            {...smsProps}
           />
       )
     }
-    {isEditSms && (isTraiDlt ?
+    {isEditSms && (useTraiSmsFlow ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}

package/v2Containers/TagList/index.js

@@ -427,6 +427,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           disableTooltipMsg={tooltipMsg}
           fetchingSchemaError={this?.state?.tagsError}
           popoverPlacement={this.props.popoverPlacement}
+          overlayStyle={this.props.popoverOverlayStyle}
+          overlayClassName={this.props.popoverOverlayClassName}
+          getPopupContainer={this.props.getPopupContainer}
         />
       </div>
     );
@@ -461,6 +464,9 @@ TagList.propTypes = {
   // message to show when Add Label button is disabled (e.g. personalization restriction)
   disableTooltipMsg: PropTypes.string,
   restrictPersonalization: PropTypes.bool,
+  popoverOverlayStyle: PropTypes.object,
+  popoverOverlayClassName: PropTypes.string,
+  getPopupContainer: PropTypes.func,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/TemplatesActionBar.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+
+/**
+ * Reusable action bar for template pickers.
+ * Layout and spacing live in `_templates.scss` (`.action-container`, `.action-container__toolbar-row`).
+ * Default search field width: `.action-container__toolbar-row .search-text` (13.125rem).
+ * Pass `searchInputClassName` / `searchInputStyle` to override (defaults match Templates list: 210px per master).
+ */
+const TemplatesActionBar = ({
+  searchValue,
+  onSearchChange,
+  onSearch,
+  onClear,
+  searchPlaceholder,
+  searchInputClassName,
+  searchInputStyle,
+  ctaLabel,
+  onCtaClick,
+  ctaDisabled,
+  ctaClassName,
+  ctaNode,
+  children,
+  showCta = true,
+}) => (
+  <div className="action-container">
+    <div className="action-container__toolbar-row">
+      {searchPlaceholder && (
+        <CapInput.Search
+          className={['search-text', searchInputClassName].filter(Boolean).join(' ')}
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onChange={onSearchChange}
+          /* antd `Input` (used by CapInput.Search) has no `onSearch`; only `Input.Search` does. */
+          onPressEnter={(e) => {
+            if (onSearch) {
+              const v = e?.target && 'value' in e.target ? e.target.value : searchValue;
+              onSearch(v);
+            }
+          }}
+          onSearch={onSearch}
+          onClear={onClear}
+          onScroll={(e) => e.stopPropagation()}
+        />
+      )}
+      {children}
+    </div>
+    {showCta && (
+      <div>
+        {ctaNode || (
+          <CapButton
+            className={ctaClassName}
+            type="primary"
+            disabled={ctaDisabled}
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+          </CapButton>
+        )}
+      </div>
+    )}
+  </div>
+);
+
+TemplatesActionBar.propTypes = {
+  searchValue: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  onClear: PropTypes.func,
+  searchPlaceholder: PropTypes.string,
+  searchInputClassName: PropTypes.string,
+  searchInputStyle: PropTypes.object,
+  ctaLabel: PropTypes.node,
+  onCtaClick: PropTypes.func,
+  ctaDisabled: PropTypes.bool,
+  ctaClassName: PropTypes.string,
+  ctaNode: PropTypes.node,
+  children: PropTypes.node,
+  showCta: PropTypes.bool,
+};
+
+TemplatesActionBar.defaultProps = {
+  searchValue: '',
+  onSearchChange: () => {},
+  onSearch: () => {},
+  onClear: () => {},
+  searchPlaceholder: '',
+  searchInputClassName: '',
+  searchInputStyle: { width: '210px' },
+  ctaLabel: null,
+  onCtaClick: () => {},
+  ctaDisabled: false,
+  ctaClassName: '',
+  ctaNode: null,
+  children: null,
+};
+
+export default TemplatesActionBar;
+

package/v2Containers/Templates/_templates.scss

@@ -659,11 +659,27 @@
 }
 
 .action-container{
-  margin-top: 8px;
-  margin-bottom: 16px;
+  margin-top: $CAP_SPACE_08;
+  margin-bottom: $CAP_SPACE_16;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  &__toolbar-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &__toolbar-row .search-text {
+    width: 13.125rem;
+  }
+
+  &__create-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .popover-action-container:hover{
@@ -1101,4 +1117,47 @@
 .inapp-illustration-parent {
   height: "calc(100vh - 325px)";
   overflow: 'auto';
+}
+
+/* Local SMS / slidebox: viewport-based .v2-pagination-container-half height leaves empty space below and clips cards */
+.creatives-templates-container--local-sms.library-mode {
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Block below search/filter: grid + skeletons — must grow to use space above footer */
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child > div:nth-child(2) {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /*
+   * Scroll needs a definite height. Pure flex + height:auto + max-height:100% often won’t bound (no % base), so no scrollbar.
+   * Use a taller slice than global 100vh-20rem so the grid uses space under search; still overflow-y:auto for long lists.
+   */
+  .v2-pagination-container,
+  .v2-pagination-container-half {
+    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;
+  }
 }

package/v2Containers/Templates/actions.js

@@ -15,6 +15,17 @@ export function getAllTemplates(channel, queryParams, intlCopyOf = '') {
   };
 }
 
+
+export function getLocalSmsTemplates(queryParams, intlCopyOf = '', onSuccess, onFailure) {
+  return {
+    type: types.GET_LOCAL_SMS_TEMPLATES_REQUEST,
+    queryParams,
+    intlCopyOf,
+    onSuccess,
+    onFailure,
+  };
+}
+
 export function resetTemplate() {
   return {
     type: types.RESET_TEMPLATE,

package/v2Containers/Templates/constants.js

@@ -10,6 +10,8 @@ export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEM
 export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_SUCCESS';
 export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_FAILURE';
 
+export const GET_LOCAL_SMS_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_LOCAL_SMS_TEMPLATES_REQUEST';
+
 export const DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
 export const DELETE_RCS_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_RCS_TEMPLATE_REQUEST';
 export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';

package/v2Containers/Templates/index.js

@@ -468,7 +468,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', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -981,8 +987,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);
@@ -1947,7 +1961,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 });
                     }
@@ -3282,6 +3296,13 @@ return (<div>
       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;
@@ -3367,10 +3388,12 @@ return (<div>
     }
     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') {
@@ -4214,17 +4237,23 @@ return (<div>
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
-    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={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">
@@ -4370,20 +4399,27 @@ return (<div>
           </div>
         )
       }
-      <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {
-          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
-        }
+        </div>
+        <div>
+          <div className="action-container__create-row">
+            {
+              this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded) ? (
+                <CapTooltip title={whatsappCountExceedText}>
+                  <div className="button-disabled-tooltip-wrapper">
+                    {createButton}
+                  </div>
+                </CapTooltip>
+              )
+                : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && createButton
+            }
+          </div>
+        </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'];
@@ -4393,7 +4429,10 @@ return (<div>
 
 
     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',
@@ -4408,9 +4447,11 @@ return (<div>
         (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 (
@@ -4455,22 +4496,22 @@ return (<div>
           ) : 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,
@@ -4653,6 +4694,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 { schema, normalize } from 'normalizr';
@@ -7,31 +7,69 @@ import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } 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 });
   }
@@ -205,6 +243,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);
 }
@@ -258,6 +301,7 @@ export function* watchForGetTemplateInfoById() {
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
+  watchGetLocalSmsTemplates,
   watchDeleteTemplate,
   watchDeleteRcsTemplate,
   watchGetUserList,
@@ -274,6 +318,7 @@ export default [
 export function* v2TemplateSaga() {
   yield all([
     watchGetAllTemplates(),
+    watchGetLocalSmsTemplates(),
     watchDeleteTemplate(),
     watchDeleteRcsTemplate(),
     watchGetUserList(),