@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

package/v2Containers/Templates/index.js

@@ -79,7 +79,6 @@ import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
 import * as zaloActions from '../Zalo/actions';
 import * as inAppActions from '../InApp/actions';
-import * as webpushActions from '../WebPush/actions';
 import * as globalActions from '../Cap/actions';
 import { makeSelectAuthenticated } from '../Cap/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -128,17 +127,18 @@ import {
   VIDEO,
   GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS } 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 zaloMessages from '../Zalo/messages';
 import rcsMessages from '../Rcs/messages';
+import inAppMessages from '../InApp/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
 
-import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -156,13 +156,10 @@ 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';
 import { v2MobilePushSagas } from '../MobilePushNew/sagas';
 import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
 import CapPageSpinner from '../../v2Components/CapPageSpinner';
-import webPushSagas from '../WebPush/sagas';
 const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
-const withWebPushSaga = injectSaga({ key: 'webPush', saga: webPushSagas, mode: DAEMON });
 
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -204,6 +201,29 @@ const SMS_FILTERS = {
   SERVICE_IMPLICIT: 'implicit',
 };
 
+const INAPP_LAYOUT_OPTIONS = [
+  {
+    key: 'popup',
+    value: INAPP_MESSAGE_LAYOUT_TYPES.MODAL,
+    label: <FormattedMessage {...inAppMessages.layoutModal} />,
+  },
+  {
+    key: 'topBanner',
+    value: INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER,
+    label: <FormattedMessage {...inAppMessages.layoutTopBanner} />,
+  },
+  {
+    key: 'bottomBanner',
+    value: INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER,
+    label: <FormattedMessage {...inAppMessages.layoutBottomBanner} />,
+  },
+  {
+    key: 'fullScreen',
+    value: INAPP_MESSAGE_LAYOUT_TYPES.FULLSCREEN,
+    label: <FormattedMessage {...inAppMessages.layoutFullScreen} />,
+  },
+];
+
 const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
 const RCS_LOWERCASE = RCS.toLowerCase();
 const SMS_LOWERCASE = SMS.toLowerCase();
@@ -216,7 +236,6 @@ const EBILL_LOWERCASE = EBILL.toLowerCase();
 const LINE_LOWERCASE = LINE.toLowerCase();
 const ZALO_LOWERCASE = ZALO.toLowerCase();
 const WECHAT_LOWERCASE = WECHAT.toLowerCase();
-const WEBPUSH_LOWERCASE = WEBPUSH.toLowerCase();
 const duplicateEnum = {
   sms: "smsActions",
   line: "lineActions",
@@ -255,6 +274,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
       selectedZaloStatus: '',
+      selectedInAppLayout: '',
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
@@ -275,9 +295,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       // Phase 18: EMAIL API call flag
       isWaitingForEmailTemplateDetails: false,
     };
-    // Timeout IDs for cleanup
-    this._clearEditTimeout = null;
-    this._clearCreateTimeout = null;
     this.getAllTemplates = this.getAllTemplates.bind(this);
     this.createTemplate = this.createTemplate.bind(this);
     this.searchTemplate = this.searchTemplate.bind(this);
@@ -403,19 +420,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             orgUnitId: -1,
           });
           break;
-        case WEBPUSH:
-          channel = 'Webpush';
-          activeMode = ACCOUNT_SELECTION_MODE;
-          this.props.actions.getWeCrmAccounts('WebPush');
-          break;
         default:
           channel = '';
       }
       this.setState({ channel, activeMode });
-      // Clear templates when entering account selection mode to prevent showing old channel templates
-      if (activeMode === ACCOUNT_SELECTION_MODE) {
-        this.props.actions.resetTemplate();
-      }
       if (isEmpty(this.props.Templates?.userList)) {
         this.props.actions.getUserList();
       }
@@ -513,10 +521,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel = 'Facebook';
         this.setState({defaultAccount: true});
         nextProps.actions.getAccountsSettings();
-      } else if (nextProps.route.name.toLowerCase() === WEBPUSH_LOWERCASE) {
-        this.setState({defaultAccount: true});
-        channel = 'Webpush';
-        nextProps.actions.getWeCrmAccounts('WebPush');
       }
 
       // Phase 14: Reset Test and Preview state on channel change
@@ -668,50 +672,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }, 1000);
     }
 
-    // Check for WebPush edit response - prevent duplicate calls
-    if (selectedChannel === WEBPUSH_LOWERCASE && nextProps.WebPush?.editResponse && (nextProps.WebPush.editResponse.templateId || nextProps.WebPush.editResponse._id) && !isEqual(nextProps.WebPush.editResponse, this.props.WebPush?.editResponse)) {
-      const channelLabel = this.props.intl.formatMessage(messages.webpushHeader);
-      const message = `${channelLabel} ${this.props.intl.formatMessage(messages.templateUpdateSuccess)}`;
-      CapNotification.success({
-        key: 'webpushEditSuccess', 
-        message
-      });
-      // Clear previous state before loading newer templates
-      this.props.actions.resetTemplate();
-      this.getAllTemplates({params, resetPage: true});
-      // Delay clearing to allow drawer to close first
-      // Clear any existing timeout before setting a new one
-      if (this._clearEditTimeout) {
-        clearTimeout(this._clearEditTimeout);
-      }
-      this._clearEditTimeout = setTimeout(() => {
-        this.props.webpushActions.clearEditResponse();
-        this._clearEditTimeout = null;
-      }, 200);
-    }
-
-    // Check for WebPush create response (for new template creation)
-    if (selectedChannel === WEBPUSH_LOWERCASE && nextProps.WebPush?.response && (nextProps.WebPush.response?.templateId || nextProps.WebPush.response?._id) && !isEqual(nextProps.WebPush.response, this.props.WebPush?.response)) {
-      // Skip showing generic "created" toast when this is a duplicate operation
-      if (!nextProps.WebPush.response.meta?.isDuplicate) {
-        const channelLabel = this.props.intl.formatMessage(messages.webpushHeader);
-        const message = `${channelLabel} ${this.props.intl.formatMessage(messages.templateCreateSuccess)}`;
-        CapNotification.success({key: 'webpushCreateSuccess', message});
-        // Clear previous state before loading newer templates
-        this.props.actions.resetTemplate();
-        this.getAllTemplates({params, resetPage: true});
-        // Delay clearing to allow drawer to close first
-        // Clear any existing timeout before setting a new one
-        if (this._clearCreateTimeout) {
-          clearTimeout(this._clearCreateTimeout);
-        }
-        this._clearCreateTimeout = setTimeout(() => {
-          this.props.webpushActions.clearCreateResponse();
-          this._clearCreateTimeout = null;
-        }, 200);
-      }
-    }
-
 
 
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
@@ -719,7 +679,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if ((this.state.channel || '').toLowerCase() !== "sms") {
         CapNotification.error({key: 'somethingWrong', message});
       }
-      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, inAppActions, rcsActions, webpushActions } = this.props;
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, inAppActions, rcsActions } = this.props;
       switch (selectedChannel) {
         case SMS_LOWERCASE:
           smsActions.clearCreateResponse();
@@ -748,9 +708,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case inAppActions:
           inAppActions.clearCreateResponse();
           break;
-        case WEBPUSH_LOWERCASE:
-          webpushActions.clearCreateResponse();
-          break;
         default:
           break;
       }
@@ -763,10 +720,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     nextProps.Templates.deleteResponse) {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`;
       CapNotification.success({key: 'deleteSucess', message});
-      // Clear previous state before loading newer templates for web push channel
-      if (selectedChannel === WEBPUSH_LOWERCASE) {
-        this.props.actions.resetTemplate();
-      }
       this.getAllTemplates({params, resetPage: true});
     }
 
@@ -879,7 +832,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({ previewTemplate: nextProps.Templates.templateDetails });
     }
     const { weCrmAccounts: weCrmAccountsList = [], senderDetails = {} } = get(nextProps, 'Templates', {});
-    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE, WEBPUSH_LOWERCASE];
+    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE];
 
     // Keeping the wechat flow separate as it has different logic for setting the account. Currently we don't support wechat but still keeping the flow.
     if (weCrmAccountsList?.length === 1 && this.state?.defaultAccount && selectedChannel === WECHAT_LOWERCASE && !isEmpty(senderDetails?.hostName)) {
@@ -906,9 +859,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const isSingleAccount = weCrmAccountsList?.length === 1;
       const selectedAccount = this.props.Templates[ACCOUNT_MAPPING_ON_CHANNEL[selectedChannel]] || {};
       const hostName = this.getHostName(isSingleAccount ? weCrmAccountsList[0]?.sourceAccountIdentifier : selectedAccount?.sourceAccountIdentifier, senderDetails?.domainProperties);
-       if (!isEmpty(hostName) || selectedChannel === WEBPUSH_LOWERCASE) {
+       if (!isEmpty(hostName)) {
         const paramsDefault = {};
-        const {name, sourceAccountIdentifier, configs, id } = weCrmAccountsList?.[0] || {};
+        const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
         if (isSingleAccount) {
           weCrmAccountsList[0].hostName = hostName;
           this.setState({ selectedAccount: name });
@@ -933,9 +886,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           paramsDefault.accessToken = configs?.accessToken;
           paramsDefault.host = hostName || this.props.Templates?.selectedRcsAccount?.hostName;
         }
-        if (selectedChannel === WEBPUSH_LOWERCASE) {
-          paramsDefault.accountId = id;
-        }
         this.setState({ defaultAccount: false });
         /**
          * Incase of multiple accounts, getAllTemplates is called on selecting the account. It's handled in onAccountSelect function.
@@ -958,15 +908,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.resetTemplateStoreData();
     this.props.globalActions.clearMetaEntities();
-    // Clear any pending timeouts to prevent memory leaks
-    if (this._clearEditTimeout) {
-      clearTimeout(this._clearEditTimeout);
-      this._clearEditTimeout = null;
-    }
-    if (this._clearCreateTimeout) {
-      clearTimeout(this._clearCreateTimeout);
-      this._clearCreateTimeout = null;
-    }
     // this.props.actions.resetAccount();
     // this.setState({defaultAccount: false});
     // Phase 14: Cleanup Test and Preview state
@@ -977,10 +918,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
   }
 
-  onAccountSelect(e) { 
+  onAccountSelect(e) {
     const value = e.target.value;
-    // Clear templates immediately when account is selected to prevent showing old channel templates
-    this.props.actions.resetTemplate();
     this.setState({selectedAccount: value}, () => {
       const params = {};
       if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
@@ -1008,7 +947,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({ selectedAccountError: false });
         }
-      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE, WHATSAPP_LOWERCASE, WEBPUSH_LOWERCASE].includes(selectedChannel)) {
+      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE, WHATSAPP_LOWERCASE].includes(selectedChannel)) {
         const setAcc = this.props?.Templates?.weCrmAccounts?.find((item) => item?.name === this.state.selectedAccount);
         const { domainProperties = [] } = this.props?.Templates?.senderDetails || {};
         let hostName = '';
@@ -1035,9 +974,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           params.accountId = sourceAccountIdentifier;
           params.host = hostName;
         }
-        if (selectedChannel === WEBPUSH_LOWERCASE && setAcc) {
-          params.accountId = setAcc.accountId || setAcc.id;
-        }
         if (selectedChannel === RCS_LOWERCASE && hostName) {
           const { configs: { accessToken = "" } = {} } = setAcc || {};
           params.accountId = sourceAccountIdentifier;
@@ -1491,41 +1427,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let creativesParams = {mode: ''};
     if (!isEmpty(routeParams)) {
       const { pathname } = routeParams;
-      if (pathname) {
-        if (pathname.includes('create')) {
-          creativesParams.mode = 'create';
-        } else if (pathname.includes('edit') || pathname.includes('overview')) {
-          creativesParams.mode = 'edit';
-          if (pathname.includes('richmedia')) {
-            creativesParams._id = pathname.split('/')[4];
-            creativesParams.definition = {
-              msgcontent: "RICH_MEDIA_WECHAT",
-            };
-          } else {
-            creativesParams._id = pathname.split('/')[3];
-            creativesParams.modeType = pathname.split('/')[4];
-            creativesParams.account = pathname.split('/')[5];
-            if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-              const whatsappSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-              const { name = '', versions = {} } = whatsappSelectedTemplateData;
-              creativesParams.whatsappTemplateName = name;
-              creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
-              creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
-            } else if (this.state.channel.toLocaleLowerCase() === ZALO_LOWERCASE) {
-              const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
-              const { name = '' } = zaloSelectedTemplateData;
-              creativesParams.name = name
-            } else if (this.state.channel.toLowerCase() === WEBPUSH_LOWERCASE) {
-              // For WebPush, extract only the fields the component uses
-              const webpushSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-              const { name = '', definition = {}, versions = {} } = webpushSelectedTemplateData;
-              creativesParams.name = name;
-              creativesParams.definition = definition;
-              creativesParams.versions = versions;
-            }
+      if (pathname.includes('create')) {
+        creativesParams.mode = 'create';
+      } else if (pathname.includes('edit') || pathname.includes('overview')) {
+        creativesParams.mode = 'edit';
+        if (pathname.includes('richmedia')) {
+          creativesParams._id = pathname.split('/')[4];
+          creativesParams.definition = {
+            msgcontent: "RICH_MEDIA_WECHAT",
+          };
+        } else {
+          creativesParams._id = pathname.split('/')[3];
+          creativesParams.modeType = pathname.split('/')[4];
+          creativesParams.account = pathname.split('/')[5];
+          if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
+            const whatsappSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
+            const { name = '', versions = {} } = whatsappSelectedTemplateData;
+            creativesParams.whatsappTemplateName = name;
+            creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
+            creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
+          } else if (this.state.channel.toLocaleLowerCase() === ZALO_LOWERCASE) {
+            const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
+            const { name = '' } = zaloSelectedTemplateData;
+            creativesParams.name = name
           }
-          creativesParams.type = this.state.channel.toUpperCase();
         }
+        creativesParams.type = this.state.channel.toUpperCase();
       }
     }
     if (this.state.previewOpen) {
@@ -1559,13 +1486,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     queryParams.host =  params?.host || this.state?.hostName;
   };
 
-  setWebpushQueryParams = (queryParams, params) => {
-    const selectedAccount = this.props.Templates?.selectedWebPushAccount;
-    queryParams.accountId = params?.accountId 
-      || selectedAccount?.accountId 
-      || selectedAccount?.id;
-  };
-
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params || {};
     let page = this.state.page;
@@ -1597,9 +1517,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
         this.setWhatsappQueryParams(queryParams, params);
       }
-      if (this.state?.channel?.toLowerCase() === WEBPUSH_LOWERCASE) {
-        this.setWebpushQueryParams(queryParams, params);
-      }
       if (this.state?.channel?.toLowerCase() === RCS_LOWERCASE && !isEmpty(this.props.Templates?.selectedRcsAccount)) {
         const { sourceAccountIdentifier = '', configs: { accessToken = '' } = {}, hostName = '' } = this.props.Templates.selectedRcsAccount;
         if (sourceAccountIdentifier) {
@@ -1664,9 +1581,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
         this.setWhatsappQueryParams(queryParams, params);
       }
-      if (this.state?.channel?.toLowerCase() === WEBPUSH_LOWERCASE) {
-        this.setWebpushQueryParams(queryParams, params);
-      }
       if (this.state?.channel?.toLowerCase() === RCS_LOWERCASE && !isEmpty(this.props.Templates?.selectedRcsAccount)) {
         const { sourceAccountIdentifier = '', configs: { accessToken = '' } = {}, hostName = '' } = this.props.Templates.selectedRcsAccount;
         if (sourceAccountIdentifier) {
@@ -1759,6 +1673,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return templates;
   }
 
+  filterInAppTemplates = (templates) => {
+    const { selectedInAppLayout } = this.state;
+    if (!selectedInAppLayout) {
+      return templates;
+    }
+    return templates.filter((template) => {
+      const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
+      const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
+      const inappBodyType = androidBodyType || iosBodyType;
+      return inappBodyType === selectedInAppLayout;
+    });
+  }
+
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -1845,6 +1772,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       case ZALO:
         filteredTemplates = this.filterZaloTemplates(templates);
         break;
+      case INAPP:
+        filteredTemplates = this.filterInAppTemplates(templates);
+        break;
       default:
         break;
     }
@@ -2134,9 +2064,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
           }
           break;
-        case INAPP:
+        case INAPP: {
+          // Pass the full template object to CapCustomCard so getInAppContent can extract the data
+          // Similar to how MOBILE_PUSH passes the full template when new feature is enabled
           templateData.content = template;
           break;
+        }
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
@@ -2413,70 +2346,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           templateData.content = <CapLabel type="label19" className="zalo-listing-content desc">{template.name}</CapLabel>;
           break;
         }
-        case WEBPUSH: {
-          const webpushContent = get(template, 'versions.base.content.webpush', {});
-          const notificationTitle = webpushContent?.title || '';
-          const notificationMessage = webpushContent?.message || '';
-          const brandIcon = webpushContent?.brandIcon || '';
-          const mediaImage = webpushContent?.image || '';
-          const ctaButtons = Array.isArray(webpushContent?.ctas)
-            ? webpushContent.ctas.filter(
-                (cta) => typeof cta?.actionText === 'string' && cta.actionText.trim()
-              )
-            : [];
-          const visibleCtas = ctaButtons.slice(0, 2);
-          templateData.content = (
-            <div className="sms-template-content webpush-template-content">
-              <div className="webpush-template-card">
-                <div className="webpush-template-meta">
-                  {brandIcon ? (
-                    <img 
-                      src={brandIcon} 
-                      alt="Brand Icon" 
-                      className="webpush-brand-icon"
-                    />
-                  ) : (
-                    <span className="webpush-brand-icon-placeholder" />
-                  )}
-                  <div className="webpush-template-text">
-                    <div className="webpush-template-header">
-                      <div className="webpush-template-title">
-                        {notificationTitle}
-                      </div>
-                      <div className="webpush-template-time">2:29 PM</div>
-                    </div>
-                    {notificationMessage ? (
-                      <div className="webpush-template-message">
-                        {notificationMessage}
-                      </div>
-                    ) : null}
-                    {mediaImage ? (
-                      <img 
-                        src={mediaImage} 
-                        alt="Media" 
-                        className="webpush-media-image"
-                      />
-                    ) : null}
-                  </div>
-                </div>
-                {visibleCtas.length ? (
-                  <div
-                    className={`webpush-template-cta-section${
-                      visibleCtas.length === 1 ? ' single-cta' : ''
-                    }`}
-                  >
-                    {visibleCtas.map((cta, index) => (
-                      <div className="webpush-template-cta-item" key={`webpush-cta-${index}`}>
-                        <span className="webpush-template-cta-text">{cta.actionText}</span>
-                      </div>
-                    ))}
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          );
-          break;
-        }
         default:
           templateData.content = "";
       }
@@ -2512,9 +2381,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
 return (<div>
-      {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO,RCS].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP, ZALO,RCS].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
@@ -2586,11 +2455,6 @@ return (<div>
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
-          {showIllustrationForChannel(WEBPUSH_LOWERCASE) &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 20.3125rem)", overflow: 'auto' } : {}}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
-              </div>
-          }
           {<CapCustomSkeleton loader={isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
           {<CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
         </div>
@@ -2729,6 +2593,9 @@ return (<div>
 
   prepareWeChatMappedPreviewData(content, templateTags, tagData) {
     let formattedContent = cloneDeep(content);
+    if (!formattedContent || typeof formattedContent !== 'string') {
+      return formattedContent || '';
+    }
     forEach(templateTags, (tag) => {
       if (tagData[tag].value !== undefined) {
         formattedContent = formattedContent.replace(`{{${tag}.DATA}}`, tagData[tag].value);
@@ -2984,10 +2851,6 @@ return (<div>
           params.host = this.state?.hostName;
         }
         this.delay(() => {
-          // Clear previous state before loading newer templates for web push channel
-          if (this.state.channel.toLowerCase() === WEBPUSH_LOWERCASE) {
-            this.props.actions.resetTemplate();
-          }
           this.getAllTemplates({params, resetPage: true});
         }, 500);
       });
@@ -3151,32 +3014,6 @@ return (<div>
         this.getAllTemplates({params: {}}, true);
         this.props.inAppActions.clearCreateResponse();
       });
-    } else if (this.state.channel.toLowerCase() === "webpush") {
-      const params = {
-        name: this.state.searchText,
-        sortBy: this.state.sortBy,
-      };
-      
-      // Get the selected WebPush account
-      const selectedAccount = this.props.Templates?.selectedWebPushAccount;
-      
-      // Set the accountId in the duplicate object
-      if (duplicateObj.definition) {
-        duplicateObj.definition.accountId = selectedAccount?.accountId || selectedAccount?.id;
-      }
-      
-      const channelLabel = this.props.intl.formatMessage(messages.webpushHeader);
-      this.props.webpushActions.createTemplate(duplicateObj, (response) => {
-        if (response && (response.templateId || response._id)) {
-          // Clear response immediately to prevent componentWillReceiveProps from showing "created" notification
-          this.props.webpushActions.clearCreateResponse();
-          // Clear previous state before loading newer templates
-          this.props.actions.resetTemplate();
-          const message = `${channelLabel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
-          CapNotification.success({key: 'duplicateSuccess', message});
-          this.getAllTemplates({params, resetPage: true});
-        }
-      }, { isDuplicate: true });
     } else if (this.state.channel.toLowerCase() === "ebill") {
       this.props.ebillActions.createTemplate(duplicateObj);
     } else if (this.state.channel.toLowerCase() === "email") {
@@ -3311,10 +3148,6 @@ return (<div>
         pathName = `/inapp/edit/${id}/`;
         break;
       }
-      case WEBPUSH: {
-        pathName = `/webpush/edit/${id}`;
-        break;
-      }
       default:
         break;
     }
@@ -3662,14 +3495,6 @@ return (<div>
       fetchingWeCrmAccounts,
       sendingFile,
     } = Templates;
-
-    // Show loading when in account selection or account change mode
-    const isAccountSelectionMode = this.state.activeMode === ACCOUNT_SELECTION_MODE || 
-                                   this.state.activeMode === ACCOUNT_CHANGE_MODE;
-    if (isAccountSelectionMode) {
-      return false;
-    }
-    
     const lineLoader = this.checkLoader('line');
     const smsLoader = this.checkLoader('sms');
     const viberLoader = this.checkLoader(VIBER_CHANNEL);
@@ -3692,10 +3517,6 @@ return (<div>
       fetchingWeCrmAccounts ) &&
     this.state.channel.toLowerCase() === ZALO_LOWERCASE;
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
-    const webpushLoader = (
-      (getAllTemplatesInProgress && this.state.channel.toLowerCase() === WEBPUSH_LOWERCASE) ||
-      (fetchingWeCrmAccounts && this.state.channel.toLowerCase() === WEBPUSH_LOWERCASE)
-    );
     const inAppLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === INAPP_LOWERCASE);
     const emailLoader = (
       (getAllTemplatesInProgress ||
@@ -3710,7 +3531,6 @@ return (<div>
       (emailLoader !== undefined ? emailLoader : false) ||
       (ebillLoader !== undefined ? ebillLoader : false) ||
       (mobilePushLoader !== undefined ? mobilePushLoader : false) ||
-      (webpushLoader !== undefined ? webpushLoader : false) ||
       (lineLoader !== undefined ? lineLoader : false) ||
       (facebookLoader !== undefined ? facebookLoader : false) ||
       (viberLoader !== undefined ? viberLoader : false) ||
@@ -3781,9 +3601,9 @@ return (<div>
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, WEBPUSH, RCS].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, WEBPUSH, RCS].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel)) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -3862,11 +3682,6 @@ return (<div>
         noAccountHeader = messages.noAccountsPresentZalo;
         break;
       }
-      case WEBPUSH: {
-        accountHeader = formatMessage(messages.webpushAccount);
-        noAccountHeader = messages.noAccountsPresentWebpush;
-        break;
-      }
       case RCS: {
         accountHeader = formatMessage(messages.rcsAccount);
         noAccountHeader = messages.noAccountsPresentRcs;
@@ -3923,12 +3738,10 @@ return (<div>
   };
 
   setAccountSelectionMode = () => {
-    this.props.actions.resetTemplate();
     this.setState({activeMode: ACCOUNT_SELECTION_MODE});
   }
 
   setAccountChangeMode = () => {
-    this.props.actions.resetTemplate();
     this.setState({activeMode: ACCOUNT_CHANGE_MODE});
   }
 
@@ -3945,7 +3758,6 @@ return (<div>
 
     const channelObj = {
       [MOBILE_PUSH]: 'mobilepushAccount',
-      [WEBPUSH]: 'webpushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
       [INAPP]: 'inappAccount',
@@ -3981,14 +3793,19 @@ return (<div>
   }
 
   removeZaloFilter = () => this.setState({ selectedZaloStatus: null });
+  removeInAppLayoutFilter = () => this.setState({ selectedInAppLayout: '' });
 
   selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus } = this.state;
+    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus, selectedInAppLayout } = this.state;
     const {
       intl: {
         formatMessage,
       },
     } = this.props;
+    const getInAppLayoutLabel = (layoutValue) => {
+      const layoutOption = INAPP_LAYOUT_OPTIONS.find(opt => opt.value === layoutValue);
+      return layoutOption ? layoutOption.label : layoutValue;
+    };
     return (
       <CapRow type="flex" align="middle" className="selected-whatsapp-filters">
         {
@@ -4023,6 +3840,23 @@ return (<div>
             </CapTag>
           ) : null
         }
+        {
+          selectedInAppLayout ? (
+            <CapTag closable onClose={this.removeInAppLayoutFilter}>
+              {formatMessage(messages.layout)}: {getInAppLayoutLabel(selectedInAppLayout)}
+            </CapTag>
+          ) : null
+        }
+        {
+          selectedInAppLayout ? (
+            <CapLink
+              onClick={() => {
+                this.removeInAppLayoutFilter();
+              }}
+              title={this.props.intl.formatMessage(messages.clearAll)}
+            />
+          ) : null
+        }
       </CapRow>
     );
   }
@@ -4033,6 +3867,7 @@ return (<div>
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
   setZaloStatus = (value) => this.setState({selectedZaloStatus: value?.item?.props?.value});
+  setInAppLayout = (value) => this.setState({selectedInAppLayout: value?.item?.props?.value});
 
   openCreativesFullMode = () => {
     const channelLowerCase = this.state.channel.toLowerCase();
@@ -4285,6 +4120,21 @@ return (<div>
           )
           : () => null
       }
+      {
+        channel.toUpperCase() === INAPP && (
+          <div className="inapp-filters">
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={INAPP_LAYOUT_OPTIONS}
+              onSelect={this.setInAppLayout}
+              selectedValue={this.state.selectedInAppLayout}
+              placeholder="Layout"
+              showBadge
+              width="120px"
+            />
+          </div>
+        )
+      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {
           this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded)? (
@@ -4564,8 +4414,6 @@ Templates.propTypes = {
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
   inAppActions: PropTypes.object,
-  webpushActions: PropTypes.object,
-  WebPush: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -4585,7 +4433,6 @@ const mapStateToProps = createStructuredSelector({
   Rcs: makeSelectRcs(),
   Zalo: makeSelectZalo(),
   InApp: makeSelectInApp(),
-  WebPush: makeSelectWebPush(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -4605,7 +4452,6 @@ function mapDispatchToProps(dispatch) {
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
     rcsActions: bindActionCreators(rcsActions, dispatch),
     zaloActions: bindActionCreators(zaloActions, dispatch),
-    webpushActions: bindActionCreators(webpushActions, dispatch),
   };
 }
 
@@ -4619,7 +4465,6 @@ export default compose(
   UserIsAuthenticated,
   withSaga,
   withMobilePushNewSaga,
-  withWebPushSaga,
   withReducer,
   withConnect,
 )(injectIntl(Templates));