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

package/v2Containers/Templates/index.js

@@ -50,7 +50,9 @@ import {
   CapStatus,
   CapColoredTag,
   CapSpin,
-  CapCheckbox,
+  CapCard,
+  CapColumn,
+  CapCarousel
 } from "@capillarytech/cap-ui-library";
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms } from '../Sms/Create/selectors';
@@ -114,15 +116,23 @@ import {
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
   HOST_GUPSHUP,
+  HOST_HAPTIC,
   CATEGORY_OPTIONS_MAP,
+  HOST_TWILIO,
+  TWILIO_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
+  ICS_CATEGORY_OPTIONS,
+  HAPTIC_CATEGORY_OPTIONS,
+  HOST_ICS,
   IMAGE,
   VIDEO,
+  GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } from '../InApp/constants';
+import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BIG_HTML, ANDROID, IOS } from '../InApp/constants';
 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';
@@ -135,7 +145,7 @@ import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
-import { CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
 import injectReducer from '../../utils/injectReducer';
@@ -144,6 +154,7 @@ import { compose } from 'redux';
 import { v2TemplateSaga } from './sagas';
 import injectSaga from '../../utils/injectSaga';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import { Rcs } from '../Rcs';
 import { makeSelectRcs } from '../Rcs/selectors';
 import { getRcsStatusType } from '../Rcs/utils';
 import { makeSelectWebPush } from '../WebPush/selectors';
@@ -426,9 +437,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           channel = '';
       }
       this.setState({ channel, activeMode });
-      // Always reset archive mode and selection when mounting a new channel
-      this.props.actions.setArchivedMode(false);
-      this.props.actions.clearTemplateSelection();
       // Clear templates when entering account selection mode to prevent showing old channel templates
       if (activeMode === ACCOUNT_SELECTION_MODE) {
         this.props.actions.resetTemplate();
@@ -460,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,
@@ -973,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);
@@ -1587,11 +1609,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let queryParams = params || {};
     let page = this.state.page;
     const { activeMode } = this.state;
-    // Archive filter — use explicit param if provided (props may not have updated yet due to async dispatch)
-    if (!queryParams.archiveStatus) {
-      const archiveFilter = get(this.props, 'Templates.archiveFilter', 'active');
-      queryParams.archiveStatus = archiveFilter;
-    }
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
     }
@@ -1764,12 +1781,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) => {
@@ -1858,9 +1883,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
-    const _selectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
-    const _selectedIdsArray = _selectedIds && typeof _selectedIds.toJS === 'function' ? _selectedIds.toJS() : (Array.isArray(_selectedIds) ? _selectedIds : []);
-    const hasSelection = this.props.isFullMode && _selectedIdsArray.length > 0;
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
     switch (currentChannel) {
@@ -1900,26 +1922,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
       const inappBodyType = androidBodyType || iosBodyType;
       const isZaloPreviewLoading = previewTemplateId === template?._id;
-      const selectedIdsForCard = get(this.props, 'Templates.selectedTemplateIds', []);
-      const selectedIdsArrayForCard = selectedIdsForCard.toJS ? selectedIdsForCard.toJS() : selectedIdsForCard;
-      // Archive eligibility per template: Zalo never; WhatsApp/RCS not when pending/awaiting
-      const cardWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
-      const cardRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-      const isCardArchiveEligible = currentChannel !== ZALO &&
-        !(currentChannel === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(cardWhatsappStatus)) &&
-        !(currentChannel === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(cardRcsStatus));
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
-          <span title={template?.name} style={{ display: 'flex', alignItems: 'center' }}>
-            {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
-              <CapCheckbox
-                checked={selectedIdsArrayForCard.includes(template._id)}
-                onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
-                onClick={(e) => e.stopPropagation()}
-                style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
-              />
-            )}
+          <span title={template?.name}>
             {template?.name}
             {currentChannel === INAPP && (
               <CapRow>
@@ -1963,7 +1969,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 });
                     }
@@ -2040,7 +2046,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {![WECHAT, WHATSAPP, ZALO].includes(
                   this.state.channel.toUpperCase()
                 ) &&
-                  !isTraiDltFeature && !template.isArchived && (
+                  !isTraiDltFeature && (
                     <CapMenu.Item
                       className={`duplicate-${channelLowerCase}`}
                       onClick={() => this.duplicateTemplate(template)}
@@ -2048,42 +2054,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <FormattedMessage {...messages.duplicateButton} />
                     </CapMenu.Item>
                   )}
-                {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
-                {(() => {
-                  const channelUp = this.state.channel.toUpperCase();
-                  const isArchiveEligible = channelUp !== ZALO &&
-                    !(channelUp === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(status)) &&
-                    !(channelUp === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(rcsStatus));
-                  if (!isArchiveEligible) return null;
-                  return !template.isArchived ? (
-                    <CapMenu.Item
-                      className={`archive-${channelLowerCase}`}
-                      onClick={() => {
-                        this.showArchiveConfirm({
-                          title: this.props.intl.formatMessage(messages.archiveTemplates),
-                          onConfirm: () => this.props.actions.archiveTemplate(this.state.channel, template._id, template.name),
-                          count: 1,
-                        });
-                      }}
-                    >
-                      <FormattedMessage {...messages.archiveButton} />
-                    </CapMenu.Item>
-                  ) : (
-                    <CapMenu.Item
-                      className={`unarchive-${channelLowerCase}`}
-                      onClick={() => {
-                        this.showArchiveConfirm({
-                          title: this.props.intl.formatMessage(messages.unarchiveTemplates),
-                          onConfirm: () => this.props.actions.unarchiveTemplate(this.state.channel, template._id, template.name),
-                          count: 1,
-                          isUnarchive: true,
-                        });
-                      }}
-                    >
-                      <FormattedMessage {...messages.unarchiveButton} />
-                    </CapMenu.Item>
-                  );
-                })()}
                 {/* Delete/Unmap menu item */}
                 {(!(
                   this.state.channel.toUpperCase() === WHATSAPP &&
@@ -2364,15 +2334,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP: {
           const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
-            <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
-                <CapCheckbox
-                  checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
-                  onClick={(e) => e.stopPropagation()}
-                  style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
-                />
-              )}
+            <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
             </CapRow>
@@ -2465,23 +2427,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const name = get(template, "name", "");
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
-            <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== 'embedded' && isCardArchiveEligible && (
-                <CapCheckbox
-                  checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
-                  onClick={(e) => e.stopPropagation()}
-                  style={{ marginRight: CAP_SPACE_08, flexShrink: 0 }}
-                />
-              )}
+            <CapRow>
               <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>
           );
         
@@ -2597,7 +2552,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     //no templates available
     const showIllustrationForChannel = (forChannel) => {
-      return forChannel === channelLowerCase && isEmpty(templates) && isEmpty(this.state.searchText) && !isLoading && !get(this.props, 'Templates.isArchivedMode', false);
+      return forChannel === channelLowerCase && isEmpty(templates) && isEmpty(this.state.searchText) && !isLoading;
     }
     //when filters applied not matching templates
     const filteredEmptyAndFullModeAs = (fullModeValue) => {
@@ -2623,49 +2578,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    const isArchivedModeLocal = get(this.props, 'Templates.isArchivedMode', false);
-    const selectedIdsLocal = get(this.props, 'Templates.selectedTemplateIds', []);
-    const selectedIdsArrayLocal = selectedIdsLocal && typeof selectedIdsLocal.toJS === 'function' ? selectedIdsLocal.toJS() : (Array.isArray(selectedIdsLocal) ? selectedIdsLocal : []);
-    const selectedCountLocal = selectedIdsArrayLocal.length;
-    const hasSelectionLocal = this.props.isFullMode && selectedCountLocal > 0;
-
-    return (<div>
+return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
-      <CapRow type="flex" align="middle" justify="space-between" className="filter-row">
-        <div className="filter-row-content">{filterContent}</div>
-        {hasSelectionLocal && (
-          <CapRow type="flex" align="middle" className="bulk-selection-bar">
-            <CapLabel type="label2">
-              {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
-            </CapLabel>
-            <CapButton
-              type="primary"
-              prefix={<CapIcon type="archive" size="l" />}
-              onClick={() => {
-                this.showArchiveConfirm({
-                  title: this.props.intl.formatMessage(isArchivedModeLocal ? messages.unarchiveTemplates : messages.archiveTemplates),
-                  onConfirm: () => {
-                    if (isArchivedModeLocal) {
-                      this.props.actions.bulkUnarchiveTemplates(this.state.channel, selectedIdsArrayLocal);
-                    } else {
-                      this.props.actions.bulkArchiveTemplates(this.state.channel, selectedIdsArrayLocal);
-                    }
-                  },
-                  count: selectedCountLocal,
-                  isUnarchive: isArchivedModeLocal,
-                });
-              }}
-            >
-              <span className="archive-btn-label">
-                <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
-              </span>
-            </CapButton>
-            <CapButton type="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
-              <FormattedMessage {...messages.archiveConfirmCancel} />
-            </CapButton>
-          </CapRow>
-        )}
-      </CapRow>
+      {filterContent}
       {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
@@ -2678,7 +2593,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 fbType={"list"}
                 />
             </div>)
-            : [SMS_LOWERCASE, EMAIL_LOWERCASE].includes(this.state.channel.toLowerCase()) && !isLoading && !get(this.props, 'Templates.isArchivedMode', false) && this.getSmsEmailIllustration()
+            : [SMS_LOWERCASE, EMAIL_LOWERCASE].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && ([WECHAT_LOWERCASE, MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) &&
@@ -2702,7 +2617,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
-          {(showWhatsappIllustration || showZaloIllustration) && !get(this.props, 'Templates.isArchivedMode', false) && (
+          {(showWhatsappIllustration || showZaloIllustration) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
                 {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
@@ -2743,16 +2658,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
               </div>
           }
-          {get(this.props, 'Templates.isArchivedMode', false) && isEmpty(templates) && !isLoading && !getAllTemplatesInProgress && isEmpty(this.state.searchText) && (
-            <div className={this.isFullMode() ? 'illustration-scroll-wrapper' : ''}>
-              <ChannelTypeIllustration
-                isFullMode={this.props.isFullMode}
-                createTemplate={this.createTemplate}
-                currentChannel={currentChannel}
-                isArchivedMode
-              />
-            </div>
-          )}
           {<CapCustomSkeleton loader={isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
           {<CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
         </div>
@@ -3055,6 +2960,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]);
     }
@@ -3396,14 +3302,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleEditClick(e, template, modeType, path, options) {
-    if (template && template.isArchived) {
-      CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
-      return;
-    }
     if (modeType && modeType !== undefined) {
       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;
@@ -3489,10 +3398,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') {
@@ -3581,33 +3492,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({showModal: false});
   }
 
-  // Shared helper for archive/unarchive confirm modals:
-  // - no icon, lighter overlay, Confirm button on left (primary), Cancel on right
-  showArchiveConfirm = ({ title, content, onConfirm, count = 1, isUnarchive = false }) => {
-    const { intl } = this.props;
-    const confirmText = intl.formatMessage(messages.archiveConfirmOk);
-    const cancelText = intl.formatMessage(messages.archiveConfirmCancel);
-    // Derive content from count if not explicitly provided
-    const resolvedContent = content || (isUnarchive
-      ? intl.formatMessage(count > 1 ? messages.unarchiveTemplateContent : messages.unarchiveTemplateSingleContent)
-      : intl.formatMessage(count > 1 ? messages.archiveTemplateContent : messages.archiveTemplateSingleContent));
-    // AntD v3 footer order is [cancelButton][okButton]. Swap text+handler so
-    // "Confirm" (primary) appears on the left and "Cancel" (default) on the right.
-    CapModal.confirm({
-      title,
-      content: resolvedContent,
-      icon: ' ',
-      className: 'archive-confirm-modal',
-      maskStyle: { backgroundColor: 'rgba(0, 0, 0, 0.25)' },
-      cancelText: confirmText,
-      okText: cancelText,
-      cancelButtonProps: { type: 'primary' },
-      okButtonProps: { type: 'default' },
-      onCancel: (close) => { onConfirm(); close(); },
-      // onOk (the right "Cancel" button) just closes the modal — default behaviour
-    });
-  }
-
   populateTemplatesList = (data, blankTemplateRequired, layoutSelection) => {
     if (!data) {
       return [];
@@ -3757,78 +3641,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         deleteOption = this.props.intl.formatMessage(messages.unMapButton);
       }
       if (!layoutSelection) {
-        // Determine archive eligibility for this template:
-        // - Zalo: never eligible
-        // - WhatsApp: not eligible when status is awaitingApproval / pending / unsubmitted
-        // - RCS: not eligible when status is awaitingApproval / pending
-        const templateWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
-        const templateRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-        const channelUpCase = this.state.channel.toUpperCase();
-        const isTemplateArchiveEligible = channelUpCase !== ZALO &&
-          !(channelUpCase === WHATSAPP && [WHATSAPP_STATUSES.awaitingApproval, WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(templateWhatsappStatus)) &&
-          !(channelUpCase === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(templateRcsStatus));
-
-        // Checkbox on card header (full mode only, only for archive-eligible templates)
-        if (this.props.isFullMode && this.props.location.query.type !== 'embedded' && isTemplateArchiveEligible) {
-          const selectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
-          const selectedIdsArray = selectedIds.toJS ? selectedIds.toJS() : selectedIds;
-          temp.cardTop = (
-            <div className="template-card-top-bar">
-              <CapCheckbox
-                checked={selectedIdsArray.includes(template._id)}
-                onChange={() => this.props.actions.toggleTemplateSelection(template._id)}
-                onClick={(e) => e.stopPropagation()}
-              />
-            </div>
-          );
-        }
-
         temp.footer = (
           <div className="footer-container">
             <div className="card-title">
               <span className="template-name" style={{ fontWeight: `${this.state.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
                 { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.state.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
                 {template?.name}
-                {template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
               </span>
               {this.props.location.query.type !== 'embedded' && <CapPopover
                 trigger="click"
                 content={
                   <div className="popover-content">
-                    {this.state.channel !== 'wechat' && !template.isArchived && <div className="popover-action-container">
+                    {this.state.channel !== 'wechat' && <div className="popover-action-container">
                       <span onClick={() => this.duplicateTemplate(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{this.props.intl.formatMessage(messages.duplicateButton)}</span>
                     </div>}
-                    {this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
-                      <span
-                        onClick={() => {
-                          this.showArchiveConfirm({
-                            title: this.props.intl.formatMessage(messages.archiveTemplates),
-                            onConfirm: () => this.props.actions.archiveTemplate(this.state.channel, template._id, template.name),
-                            count: 1,
-                          });
-                        }}
-                        className="popover-action popover-archive-action"
-                      >
-                        <CapIcon type="archive" size="l" />
-                        {this.props.intl.formatMessage(messages.archiveButton)}
-                      </span>
-                    </div>}
-                    {this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
-                      <span
-                        onClick={() => {
-                          this.showArchiveConfirm({
-                            title: this.props.intl.formatMessage(messages.unarchiveTemplates),
-                            onConfirm: () => this.props.actions.unarchiveTemplate(this.state.channel, template._id, template.name),
-                            count: 1,
-                            isUnarchive: true,
-                          });
-                        }}
-                        className="popover-action popover-archive-action"
-                      >
-                        <CapIcon type="archive" size="l" />
-                        {this.props.intl.formatMessage(messages.unarchiveButton)}
-                      </span>
-                    </div>}
                     <div className="popover-action-container">
                       <span onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{deleteOption}</span>
                     </div>
@@ -4393,9 +4219,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}
@@ -4421,22 +4252,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
-    const _isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
-    const _renderSelectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
-    const _renderSelectedIdsArray = _renderSelectedIds && typeof _renderSelectedIds.toJS === 'function' ? _renderSelectedIds.toJS() : (Array.isArray(_renderSelectedIds) ? _renderSelectedIds : []);
-    const _renderHasSelection = 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">
@@ -4582,46 +4414,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </div>
         )
       }
-      <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 */}
-        {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== 'embedded' && channelLowerCase !== ZALO_LOWERCASE && (
-          <CapDropdown
-            trigger={['click']}
-            overlay={
-              <CapMenu>
-                <CapMenu.Item
-                  key="archived"
-                  onClick={() => {
-                    this.props.actions.setArchivedMode(true);
-                    this.setState({ searchText: '', page: 1 }, () => {
-                      const params = { name: '', sortBy: this.state.sortBy, archiveStatus: 'archived' };
-                      this.getAllTemplates({ params, resetPage: true }, true);
-                    });
-                  }}
-                >
-                  <FormattedMessage {...messages.archivedTemplates} />
-                </CapMenu.Item>
-              </CapMenu>
+        </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
             }
-            placement="bottomRight"
-          >
-            <CapButton type="flat" className="template-listing-more-btn">
-              <CapIcon type="more" />
-            </CapButton>
-          </CapDropdown>
-        )}
+          </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'];
@@ -4631,7 +4444,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',
@@ -4646,9 +4462,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 (
@@ -4669,24 +4487,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           />
 
-          {/* Archived mode header with back arrow (full mode only) */}
-          {this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
-            <CapRow type="flex" align="middle" className="archived-mode-header">
-              <CapIcon
-                type="back"
-                className="archived-mode-back-icon"
-                onClick={() => {
-                  this.props.actions.setArchivedMode(false);
-                  this.setState({ searchText: '', page: 1 }, () => {
-                    const params = { name: '', sortBy: this.state.sortBy, archiveStatus: 'active' };
-                    this.getAllTemplates({ params, resetPage: true }, true);
-                  });
-                }}
-              />
-              <CapHeading type="h3"><FormattedMessage {...messages.archivedTemplates} /></CapHeading>
-            </CapRow>
-          )}
-
           {channel.toLowerCase() === WHATSAPP_LOWERCASE &&
           showWhatsappCountWarning ? (
             <CapAlert message={whatsappCountExceedText} type="info" />
@@ -4698,7 +4498,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)}
             />
@@ -4711,22 +4511,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,
@@ -4909,6 +4709,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({