@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/Templates/index.js

@@ -79,6 +79,7 @@ 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';
@@ -125,18 +126,17 @@ import {
   VIDEO,
   GIF,
 } from '../Whatsapp/constants';
-import { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES, INAPP_MEDIA_TYPES, BIG_HTML, ANDROID, IOS } from '../InApp/constants';
+import { INAPP_LAYOUT_DETAILS } 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 } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -154,10 +154,13 @@ 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;
@@ -199,29 +202,6 @@ 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();
@@ -234,6 +214,7 @@ 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",
@@ -272,7 +253,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
       selectedZaloStatus: '',
-      selectedInAppLayout: '',
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
@@ -287,6 +267,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       // Add flag to prevent duplicate API calls
       isProcessingEditResponse: 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);
@@ -409,10 +392,19 @@ 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();
       }
@@ -510,6 +502,10 @@ 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');
       }
 
       this.setState({ channel }, () => {
@@ -655,6 +651,50 @@ 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)) {
@@ -662,7 +702,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 } = this.props;
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, inAppActions, rcsActions, webpushActions } = this.props;
       switch (selectedChannel) {
         case SMS_LOWERCASE:
           smsActions.clearCreateResponse();
@@ -691,6 +731,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case inAppActions:
           inAppActions.clearCreateResponse();
           break;
+        case WEBPUSH_LOWERCASE:
+          webpushActions.clearCreateResponse();
+          break;
         default:
           break;
       }
@@ -703,6 +746,10 @@ 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});
     }
 
@@ -765,7 +812,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];
+    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE, WEBPUSH_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)) {
@@ -792,9 +839,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)) {
+       if (!isEmpty(hostName) || selectedChannel === WEBPUSH_LOWERCASE) {
         const paramsDefault = {};
-        const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
+        const {name, sourceAccountIdentifier, configs, id } = weCrmAccountsList?.[0] || {};
         if (isSingleAccount) {
           weCrmAccountsList[0].hostName = hostName;
           this.setState({ selectedAccount: name });
@@ -819,6 +866,9 @@ 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.
@@ -841,12 +891,23 @@ 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});
   }
 
-  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) {
@@ -874,7 +935,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].includes(selectedChannel)) {
+      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE, WHATSAPP_LOWERCASE, WEBPUSH_LOWERCASE].includes(selectedChannel)) {
         const setAcc = this.props?.Templates?.weCrmAccounts?.find((item) => item?.name === this.state.selectedAccount);
         const { domainProperties = [] } = this.props?.Templates?.senderDetails || {};
         let hostName = '';
@@ -901,6 +962,9 @@ 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;
@@ -942,37 +1006,41 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let creativesParams = {mode: ''};
     if (!isEmpty(routeParams)) {
       const { pathname } = routeParams;
-      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() === EMAIL_LOWERCASE) {
-            const emailSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-            const activeTab = get(emailSelectedTemplateData, 'versions.base.activeTab', 'en');
-            const isDragDrop = get(emailSelectedTemplateData, `versions.base.${activeTab}.is_drag_drop`, false);
-            creativesParams.is_drag_drop = isDragDrop;
+      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;
+            }
           }
+          creativesParams.type = this.state.channel.toUpperCase();
         }
-        creativesParams.type = this.state.channel.toUpperCase();
       }
     }
     if (this.state.previewOpen) {
@@ -1006,6 +1074,13 @@ 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;
@@ -1037,6 +1112,9 @@ 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) {
@@ -1101,6 +1179,9 @@ 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) {
@@ -1193,19 +1274,6 @@ 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) {
@@ -1292,9 +1360,6 @@ 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;
     }
@@ -1514,12 +1579,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
           }
           break;
-        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
+        case INAPP:
           templateData.content = template;
           break;
-        }
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
@@ -1796,6 +1858,70 @@ 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 = "";
       }
@@ -1831,9 +1957,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
 return (<div>
-      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO,RCS].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO,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"}>
@@ -1905,6 +2031,11 @@ 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>
@@ -2043,9 +2174,6 @@ 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);
@@ -2301,6 +2429,10 @@ 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);
       });
@@ -2464,6 +2596,32 @@ 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") {
@@ -2596,6 +2754,10 @@ return (<div>
         pathName = `/inapp/edit/${id}/`;
         break;
       }
+      case WEBPUSH: {
+        pathName = `/webpush/edit/${id}`;
+        break;
+      }
       default:
         break;
     }
@@ -2943,6 +3105,14 @@ 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);
@@ -2965,6 +3135,10 @@ 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 ||
@@ -2979,6 +3153,7 @@ 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) ||
@@ -3049,9 +3224,9 @@ return (<div>
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, WEBPUSH, RCS].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, WEBPUSH, 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(
@@ -3130,6 +3305,11 @@ 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;
@@ -3186,10 +3366,12 @@ return (<div>
   };
 
   setAccountSelectionMode = () => {
+    this.props.actions.resetTemplate();
     this.setState({activeMode: ACCOUNT_SELECTION_MODE});
   }
 
   setAccountChangeMode = () => {
+    this.props.actions.resetTemplate();
     this.setState({activeMode: ACCOUNT_CHANGE_MODE});
   }
 
@@ -3206,6 +3388,7 @@ return (<div>
 
     const channelObj = {
       [MOBILE_PUSH]: 'mobilepushAccount',
+      [WEBPUSH]: 'webpushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
       [INAPP]: 'inappAccount',
@@ -3241,19 +3424,14 @@ return (<div>
   }
 
   removeZaloFilter = () => this.setState({ selectedZaloStatus: null });
-  removeInAppLayoutFilter = () => this.setState({ selectedInAppLayout: '' });
 
   selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus, selectedInAppLayout } = this.state;
+    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus } = 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">
         {
@@ -3288,23 +3466,6 @@ 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>
     );
   }
@@ -3315,7 +3476,6 @@ 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();
@@ -3568,21 +3728,6 @@ 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)? (
@@ -3803,6 +3948,8 @@ Templates.propTypes = {
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
   inAppActions: PropTypes.object,
+  webpushActions: PropTypes.object,
+  WebPush: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -3822,6 +3969,7 @@ const mapStateToProps = createStructuredSelector({
   Rcs: makeSelectRcs(),
   Zalo: makeSelectZalo(),
   InApp: makeSelectInApp(),
+  WebPush: makeSelectWebPush(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -3841,6 +3989,7 @@ function mapDispatchToProps(dispatch) {
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
     rcsActions: bindActionCreators(rcsActions, dispatch),
     zaloActions: bindActionCreators(zaloActions, dispatch),
+    webpushActions: bindActionCreators(webpushActions, dispatch),
   };
 }
 
@@ -3854,6 +4003,7 @@ export default compose(
   UserIsAuthenticated,
   withSaga,
   withMobilePushNewSaga,
+  withWebPushSaga,
   withReducer,
   withConnect,
 )(injectIntl(Templates));