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

package/v2Containers/Templates/index.js

@@ -72,7 +72,6 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
-import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -105,6 +104,9 @@ import {
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
@@ -123,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';
@@ -461,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,
@@ -544,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;
@@ -1007,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);
@@ -1372,11 +1388,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
-        const messageType = viberContent.type || '';
-        const cardsRaw = viberContent.cards;
-        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
-        const isCarousel =
-          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1394,39 +1405,81 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
-        if (isCarousel) {
-          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
-          viberPreview.cards = cards.map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((btn) => ({
-              title: btn?.title || '',
-              action: btn?.action || '',
-            })),
-          }));
-          viberPreview.showCarouselEditorPreview = true;
-        }
-
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName || '',
-          brandName: accountName || '',
-          messageContent: text,
-          ...(isCarousel && {
-            type: VIBER_MEDIA_TYPES.CAROUSEL,
-            cards: viberPreview.cards,
-          }),
-          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
-            button: {
-              text: button.text,
-              url: button.url || viberContent.buttonURL || '',
-            },
-          }),
-          buttonURL: button.url || viberContent.buttonURL || '',
+          accountName: accountName ? [accountName] : [],
+          brandName: accountName ? [accountName] : [],
+        };
+      }
+
+      case WEBPUSH: {
+        // WebPush content is stored in creatives format (brandIcon, onClickAction, ctas)
+        // Must be transformed to campaign/test-message format matching getTemplateContent() in WebPush/Create/index.js
+        const webpushContent = get(baseContent, 'content.webpush', {});
+        const {
+          title = '',
+          message = '',
+          brandIcon,
+          iconImageUrl: existingIconImageUrl,
+          onClickAction,
+          cta: existingCta,
+          image,
+          ctas: rawCtas,
+          expandableDetails: existingExpandable,
+        } = webpushContent;
+        const accountId = get(template, 'definition.accountId', null);
+        const templateName = template?.name || '';
+
+        // iconImageUrl stored as brandIcon in creatives format
+        const iconImageUrl = brandIcon || existingIconImageUrl || undefined;
+
+        // cta stored as onClickAction in creatives format (type: URL|SITE_URL, url)
+        // or already as cta in campaign format (type: EXTERNAL_URL|SITE_URL, actionLink)
+        let cta = null;
+        if (onClickAction) {
+          const ctaType = onClickAction.type === URL ? EXTERNAL_URL : (onClickAction.type || SITE_URL);
+          cta = { type: ctaType, actionLink: onClickAction.url || '' };
+        } else if (existingCta) {
+          cta = { type: existingCta.type || EXTERNAL_URL, actionLink: existingCta.actionLink || '' };
+        }
+
+        // expandableDetails: image → media[], ctas[] → mapped ctas
+        let expandableDetails = null;
+        const hasImage = !!image;
+        const hasCtas = Array.isArray(rawCtas) && rawCtas.length > 0;
+        if (hasImage || hasCtas) {
+          expandableDetails = {
+            media: hasImage ? [{ url: image, type: IMAGE }] : [],
+            ctas: hasCtas ? rawCtas.map((ctaItem) => ({
+              type: ctaItem?.type === URL ? EXTERNAL_URL : (ctaItem?.type || EXTERNAL_URL),
+              action: ctaItem?.action || '',
+              title: ctaItem?.actionText || ctaItem?.title || '',
+              actionLink: ctaItem?.actionLink || '',
+            })) : [],
+          };
+        } else if (existingExpandable) {
+          expandableDetails = {
+            media: existingExpandable?.media || [],
+            ctas: existingExpandable?.ctas || [],
+          };
+        }
+
+        return {
+          channel: WEBPUSH,
+          accountId,
+          content: {
+            title,
+            message,
+            ...(iconImageUrl ? { iconImageUrl } : {}),
+            ...(cta ? { cta } : {}),
+            ...(expandableDetails ? { expandableDetails } : {}),
+          },
+          messageSubject: templateName || title,
+          offers: [],
         };
       }
 
@@ -1442,7 +1495,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
    * @returns {Boolean} - True if channel supports Test and Preview
    */
   isTestAndPreviewSupported = () => {
-    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
     return supportedChannels.includes(this.state.channel.toUpperCase());
   }
 
@@ -1828,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) => {
@@ -2002,7 +2063,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           // Show preview icon only for channels that don't support Test and Preview
           (() => {
             // Channels that have Test and Preview integrated
-            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
 
             // Don't show preview icon if channel supports Test and Preview
@@ -2023,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 });
                     }
@@ -2372,52 +2433,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
-                type = '',
-                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
-          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
-          if (isViberCarousel) {
-            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
-            templateData.className = 'viber-carousel-static';
-            templateData.content = (
-              <CapRow className="viber-carousel-static-content">
-                <CapRow className="viber-carousel-static-message-box">
-                  <CapLabel type="label1" className="viber-carousel-static-message">
-                    {text}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="viber-carousel-static-cards">
-                  {previewCards.map((card, cardIdx) => (
-                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
-                      {card?.mediaUrl ? (
-                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
-                      ) : (
-                        <CapRow className="viber-carousel-static-image-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-static-text">
-                        {card?.text}
-                      </CapLabel>
-                      <CapRow className="viber-carousel-static-buttons">
-                        {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
-                          <CapLabel
-                            key={`viber-static-btn-${cardIdx}-${btnIdx}`}
-                            type="label1"
-                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
-                          >
-                            {(carouselButton?.title || '').trim()}
-                          </CapLabel>
-                        ))}
-                      </CapRow>
-                    </CapRow>
-                  ))}
-                </CapRow>
-              </CapRow>
-            );
-            break;
-          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;
@@ -2547,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>
           );
         
@@ -3129,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]);
     }
@@ -3478,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;
@@ -3563,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') {
@@ -4525,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}
@@ -4559,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">
@@ -4716,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
@@ -4748,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'];
@@ -4758,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',
@@ -4773,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 (
@@ -4819,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)}
             />
@@ -4832,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,
@@ -4979,22 +5035,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
+              // Pass formData for EMAIL and SMS channels for tag extraction
               formData={
-                (() => {
-                  const previewContent = this.state.testAndPreviewContent;
-                  const channelUpper = this.state.channel?.toUpperCase();
-                  if (!previewContent || typeof previewContent !== 'object') {
-                    return null;
-                  }
-                  if (channelUpper === EMAIL || channelUpper === SMS) {
-                    return previewContent.formData || null;
-                  }
-                  if (channelUpper === VIBER) {
-                    return previewContent;
-                  }
-                  return null;
-                })()
+                this.state.testAndPreviewContent &&
+                (this.state.channel?.toUpperCase() === EMAIL || 
+                 this.state.channel?.toUpperCase() === SMS) &&
+                typeof this.state.testAndPreviewContent === 'object' &&
+                this.state.testAndPreviewContent?.formData
+                  ? this.state.testAndPreviewContent.formData
+                  : null
               }
             />
           )}
@@ -5037,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({