@capillarytech/creatives-library 8.0.268 → 8.0.270

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';
@@ -137,7 +138,7 @@ import rcsMessages from '../Rcs/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';
@@ -155,10 +156,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;
@@ -212,6 +216,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",
@@ -270,6 +275,9 @@ 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);
@@ -395,10 +403,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();
       }
@@ -496,6 +513,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');
       }
 
       // Phase 14: Reset Test and Preview state on channel change
@@ -647,6 +668,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)) {
@@ -654,7 +719,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();
@@ -683,6 +748,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;
       }
@@ -695,6 +763,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});
     }
 
@@ -807,7 +879,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)) {
@@ -834,9 +906,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 });
@@ -861,6 +933,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.
@@ -883,6 +958,15 @@ 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
@@ -893,8 +977,10 @@ 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) {
@@ -922,7 +1008,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 = '';
@@ -949,6 +1035,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;
@@ -1402,32 +1491,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
+      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) {
@@ -1461,6 +1559,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;
@@ -1492,6 +1597,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) {
@@ -1556,6 +1664,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) {
@@ -2302,6 +2413,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 = "";
       }
@@ -2337,7 +2512,7 @@ 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,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
@@ -2411,6 +2586,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>
@@ -2804,6 +2984,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);
       });
@@ -2967,6 +3151,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") {
@@ -3101,6 +3311,10 @@ return (<div>
         pathName = `/inapp/edit/${id}/`;
         break;
       }
+      case WEBPUSH: {
+        pathName = `/webpush/edit/${id}`;
+        break;
+      }
       default:
         break;
     }
@@ -3448,6 +3662,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);
@@ -3470,6 +3692,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 ||
@@ -3484,6 +3710,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) ||
@@ -3554,9 +3781,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(
@@ -3635,6 +3862,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;
@@ -3691,10 +3923,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});
   }
 
@@ -3711,6 +3945,7 @@ return (<div>
 
     const channelObj = {
       [MOBILE_PUSH]: 'mobilepushAccount',
+      [WEBPUSH]: 'webpushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
       [INAPP]: 'inappAccount',
@@ -4329,6 +4564,8 @@ Templates.propTypes = {
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
   inAppActions: PropTypes.object,
+  webpushActions: PropTypes.object,
+  WebPush: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -4348,6 +4585,7 @@ const mapStateToProps = createStructuredSelector({
   Rcs: makeSelectRcs(),
   Zalo: makeSelectZalo(),
   InApp: makeSelectInApp(),
+  WebPush: makeSelectWebPush(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -4367,6 +4605,7 @@ function mapDispatchToProps(dispatch) {
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
     rcsActions: bindActionCreators(rcsActions, dispatch),
     zaloActions: bindActionCreators(zaloActions, dispatch),
+    webpushActions: bindActionCreators(webpushActions, dispatch),
   };
 }
 
@@ -4380,6 +4619,7 @@ export default compose(
   UserIsAuthenticated,
   withSaga,
   withMobilePushNewSaga,
+  withWebPushSaga,
   withReducer,
   withConnect,
 )(injectIntl(Templates));

package/v2Containers/Templates/messages.js

@@ -46,6 +46,10 @@ export default defineMessages({
     id: `${scope}.mobilepushHeader`,
     defaultMessage: `Mobile Push`,
   },
+  "webpushHeader": {
+    id: `${scope}.webpushHeader`,
+    defaultMessage: `Web Push`,
+  },
   "ebillHeader": {
     id: `${scope}.ebillHeader`,
     defaultMessage: `Ebill`,
@@ -342,6 +346,10 @@ export default defineMessages({
     id: `${scope}.newWhatsappTemplate`,
     defaultMessage: 'Add new Whatsapp {template}',
   },
+  "newWebPushTemplate": {
+    id: `${scope}.newWebPushTemplate`,
+    defaultMessage: 'Add new Web push {template}',
+  },
   "newInAppMessageTemplate": {
     id: `${scope}.newInAppMessageTemplate`,
     defaultMessage: 'Add new In app message {template}',
@@ -378,6 +386,14 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "webPushTitleIllustration": {
+    id: `${scope}.webPushTitleIllustration`,
+    defaultMessage: 'Add a new Web push creative {template}',
+  },
+  "webPushDescIllustration": {
+    id: `${scope}.webPushDescIllustration`,
+    defaultMessage: 'These templates can be reused when creating a new message content.',
+  },
   "whatsappAccountNotConfiguredTitle": {
     id: `${scope}.whatsappAccountNotConfiguredTitle`,
     defaultMessage: 'Whatsapp account is not configured',
@@ -462,6 +478,10 @@ export default defineMessages({
     id: `${scope}.zaloAccount`,
     defaultMessage: 'Zalo account',
   },
+  "webpushAccount": {
+    id: `${scope}.webpushAccount`,
+    defaultMessage: 'Web push account',
+  },
   "rcsAccount": {
     id: `${scope}.rcsAccount`,
     defaultMessage: 'RCS account',
@@ -498,6 +518,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentZalo`,
     defaultMessage: "Zalo accounts are not setup for your brand",
   },
+  "noAccountsPresentWebpush": {
+    id: `${scope}.noAccountsPresentWebpush`,
+    defaultMessage: "Web push accounts are not setup for your brand",
+  },
   "noAccountsPresentRcs": {
     id: `${scope}.noAccountsPresentRcs`,
     defaultMessage: "RCS accounts are not setup for your brand",

package/v2Containers/Templates/reducer.js

@@ -124,6 +124,8 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('selectedFacebookAccount', fromJS(action.faceBookAccount))
         .set('templates', []);
+    case types.SET_WEBPUSH_ACCOUNT:
+      return state.set('selectedWebPushAccount', fromJS(action.account));
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')