@capillarytech/creatives-library 8.0.241 → 8.0.242-alpha.0

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';
@@ -135,7 +136,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';
@@ -153,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;
@@ -210,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",
@@ -262,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);
@@ -384,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();
       }
@@ -485,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 }, () => {
@@ -630,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)) {
@@ -637,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();
@@ -666,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;
       }
@@ -678,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});
     }
 
@@ -816,12 +888,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) {
@@ -849,7 +932,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 = '';
@@ -876,6 +959,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;
@@ -917,32 +1003,44 @@ 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, include the full template data for edit mode
+              const webpushSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
+              if (webpushSelectedTemplateData && !isEmpty(webpushSelectedTemplateData)) {
+                // Merge the full template data into creativesParams
+                creativesParams = {
+                  ...creativesParams,
+                  ...webpushSelectedTemplateData,
+                };
+              }
+            }
           }
+          creativesParams.type = this.state.channel.toUpperCase();
         }
-        creativesParams.type = this.state.channel.toUpperCase();
       }
     }
     if (this.state.previewOpen) {
@@ -976,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;
@@ -1007,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) {
@@ -1071,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) {
@@ -1747,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 = "";
       }
@@ -1856,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>
@@ -2249,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);
       });
@@ -2412,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") {
@@ -2499,6 +2709,10 @@ return (<div>
         pathName = `/ebill/edit/${id}`;
         break;
       }
+      case WEBPUSH_LOWERCASE: {
+        pathName = `/webpush/edit/${id}`;
+        break;
+      }
       case 'line': {
         const { messages } = template.versions.base.content;
         const type = messages && messages[0] && messages[0].type;
@@ -2544,6 +2758,10 @@ return (<div>
         pathName = `/inapp/edit/${id}/`;
         break;
       }
+      case WEBPUSH: {
+        pathName = `/webpush/edit/${id}`;
+        break;
+      }
       default:
         break;
     }
@@ -2891,6 +3109,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 true;
+    }
+    
     const lineLoader = this.checkLoader('line');
     const smsLoader = this.checkLoader('sms');
     const viberLoader = this.checkLoader(VIBER_CHANNEL);
@@ -2913,6 +3139,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 ||
@@ -2927,6 +3157,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) ||
@@ -2997,9 +3228,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(
@@ -3078,6 +3309,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;
@@ -3134,10 +3370,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});
   }
 
@@ -3713,6 +3951,8 @@ Templates.propTypes = {
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
   inAppActions: PropTypes.object,
+  webpushActions: PropTypes.object,
+  WebPush: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -3732,6 +3972,7 @@ const mapStateToProps = createStructuredSelector({
   Rcs: makeSelectRcs(),
   Zalo: makeSelectZalo(),
   InApp: makeSelectInApp(),
+  WebPush: makeSelectWebPush(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -3751,6 +3992,7 @@ function mapDispatchToProps(dispatch) {
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
     rcsActions: bindActionCreators(rcsActions, dispatch),
     zaloActions: bindActionCreators(zaloActions, dispatch),
+    webpushActions: bindActionCreators(webpushActions, dispatch),
   };
 }
 
@@ -3764,6 +4006,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')

package/v2Containers/Templates/tests/index.test.js

@@ -22,6 +22,7 @@ describe('Test Templates container', () => {
   const getAllTemplates = jest.fn();
   const getUserList = jest.fn();
   const getSenderDetails = jest.fn();
+  const resetTemplate = jest.fn();
   let renderedComponent;
 
   beforeEach(() => {
@@ -54,6 +55,7 @@ describe('Test Templates container', () => {
           getAllTemplates,
           getUserList,
           getSenderDetails,
+          resetTemplate,
         }}
         location={{
           pathname: `/${channel}`,
@@ -79,6 +81,8 @@ describe('Test Templates container', () => {
       channel: 'WHATSAPP',
       orgUnitId: -1,
     });
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
 
   it('Should render temlates when whatsapp templates are passed', () => {
@@ -103,6 +107,8 @@ describe('Test Templates container', () => {
       Templates: {},
     });
     expect(renderedComponent).toMatchSnapshot();
+    // SMS doesn't enter account selection mode, so resetTemplate shouldn't be called on mount
+    expect(resetTemplate).not.toHaveBeenCalled();
   });
 
   it('Should render temlates when whatsapp templates are passed in full mode', () => {
@@ -123,6 +129,8 @@ describe('Test Templates container', () => {
   it('Should render correct component for zalo channel', () => {
     RenderFunctionFor('zalo');
     expect(renderedComponent).toMatchSnapshot();
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
   it('Should render temlates when zalo templates are passed', () => {
     RenderFunctionFor('zalo');
@@ -201,6 +209,8 @@ describe('Test Templates container', () => {
       channel: 'RCS',
       orgUnitId: -1,
     });
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
 
   it('Should render templates when RCS templates are passed', () => {