@capillarytech/creatives-library 7.17.92-alpha.0 → 7.17.92

package/v2Containers/Templates/index.js

@@ -53,6 +53,7 @@ import {
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
+import { makeSelectInApp } from '../InApp/selectors';
 import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
 import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
@@ -66,6 +67,7 @@ import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
 import * as smsActions from '../Sms/Create/actions';
 import * as mobilepushActions from '../MobilePush/Create/actions';
+import * as inAppActions from '../InApp/actions';
 import * as smsEditActions from '../Sms/Edit/actions';
 import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
@@ -113,7 +115,7 @@ import zaloMessages from '../Zalo/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 } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -123,9 +125,11 @@ import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
 import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
+import { MAPP_SDK } from '../InApp/constants';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
 const InlineDiv = styled.div`
@@ -166,6 +170,7 @@ const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
 const RCS_LOWERCASE = RCS.toLowerCase();
 const SMS_LOWERCASE = SMS.toLowerCase();
 const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
+const INAPP_LOWERCASE = INAPP.toLowerCase();
 const EBILL_LOWERCASE = EBILL.toLowerCase();
 const LINE_LOWERCASE = LINE.toLowerCase();
 const ZALO_LOWERCASE = ZALO.toLowerCase();
@@ -248,6 +253,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getWeCrmAccounts(channel);
           break;
+        case INAPP:
+          channel = INAPP
+          activeMode = ACCOUNT_SELECTION_MODE;
+          this.props.actions.getWeCrmAccounts(MAPP_SDK);
+          break;
         case WECHAT:
           channel = 'wechat';
           activeMode = ACCOUNT_SELECTION_MODE;
@@ -317,7 +327,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     // opening the create slidebox based on query params
     const queryItems = getObjFromQueryParams(location.search);
-    if (queryItems.channel === WHATSAPP_LOWERCASE && queryItems.mode === CREATE) {
+    if ([INAPP_LOWERCASE, WHATSAPP_LOWERCASE].includes(queryItems.channel) && queryItems.mode === CREATE) {
       this.createTemplate();
     }
 
@@ -368,6 +378,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.setState({defaultAccount: true});
         channel = "mobilepush";
         nextProps.actions.getWeCrmAccounts(channel);
+      } else if (nextProps.route.name === INAPP ) {
+        this.setState({defaultAccount: true});
+        channel = INAPP_LOWERCASE;
+        nextProps.actions.getWeCrmAccounts(channel);
       } else if (nextProps.route.name.toLowerCase() === 'ebill') {
         channel = 'Ebill';
       } else if (nextProps.route.name.toLowerCase() === 'line') {
@@ -393,7 +407,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
             params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
-          if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
+          if (this.state.channel.toLowerCase() === "mobilepush" || this.state.channel.toLowerCase() === INAPP_LOWERCASE && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
           }
           this.getAllTemplates({params}, true);
@@ -405,7 +419,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
       params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
     }
-    if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
+    if ((this.state.channel || '').toLowerCase() === "mobilepush" || (this.state.channel || '').toLowerCase() === INAPP_LOWERCASE && nextProps.Templates.selectedWeChatAccount) {
       params.accountId = nextProps.Templates.selectedWeChatAccount.id;
     }
     const selectedChannel = this.state.channel.toLowerCase();
@@ -451,7 +465,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
-    if ((selectedChannel === 'wechat' || selectedChannel === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
+    if (['wechat' , 'mobilepush', INAPP_LOWERCASE].includes(selectedChannel) && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
         return;
@@ -481,10 +495,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.accountId = Number(nextProps.location.query.account_id);
         this.getAllTemplates({params});
       }
-    }
-    if (selectedChannel === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
-
-    }
+      else if (selectedChannel === INAPP_LOWERCASE && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+        forEach(nextProps.Templates.weCrmAccounts, (account) => {
+          if ((nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) || (nextProps.location.query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === nextProps.location.query.source_account_id)) {
+            selectedAccount = account;
+          }
+        });
+        this.props.actions.setWeChatAccount(selectedAccount);
+        params.accountId = Number(nextProps.location.query.account_id);
+        this.getAllTemplates({params});
+      }
+    }  
+  
 
     if (selectedChannel === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
@@ -513,7 +535,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, rcsActions } = this.props;
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, inAppActions, rcsActions } = this.props;
       switch (selectedChannel) {
         case SMS_LOWERCASE:
           smsActions.clearCreateResponse();
@@ -539,6 +561,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case RCS_LOWERCASE:
           rcsActions.clearCreateResponse();
           break;
+        case inAppActions:
+          inAppActions.clearCreateResponse();
+          break;
         default:
           break;
       }
@@ -653,7 +678,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.wecrmToken = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_token;
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         params.originalId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].sourceAccountIdentifier;
-      } else if (selectedChannel === 'mobilepush') {
+      } else if (selectedChannel === 'mobilepush' || selectedChannel === INAPP_LOWERCASE) {
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         const account = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})];
         params.accountId = account.id;
@@ -816,6 +841,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             queryParams.mode = this.state.mode.toLowerCase();
           }
         }
+        if (this.state.channel.toLowerCase() === INAPP_LOWERCASE && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+          queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
+          if (this.state.mode) {
+            queryParams.mode = this.state.mode.toLowerCase();
+          }
+        }
       }
       if ((this.state.channel || '').toLowerCase() === SMS_LOWERCASE && isTraiDltFeature) {
         queryParams.traiEnable = true;
@@ -1066,6 +1097,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case MOBILE_PUSH:
           templateData.content = template;
           break;
+        case INAPP: 
+          templateData.content = template;
+          break;
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
@@ -1271,9 +1305,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const showWhatsappIllustration = !isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase);
     const showZaloIllustration = !isEmpty(this.props.Templates.selectedZaloAccount) && [ZALO_LOWERCASE].includes(channelLowerCase);
     const showRcsIllustration = channelLowerCase === RCS_LOWERCASE && isEmpty(templates);
+    const showInAppIllustration = channelLowerCase === INAPP_LOWERCASE && isEmpty(templates);
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
     return (<div>
-      {[WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
@@ -1291,13 +1326,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
           }
 
-          {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
+          {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush" || this.state.channel.toLowerCase() === INAPP_LOWERCASE) &&
           <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh' }}>
             <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
           </div>
           }
 
-          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush"].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
+          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush", INAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6" >
                 {this.props.intl.formatMessage(messages.accountConfigError)}
@@ -1331,6 +1366,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
+          {showInAppIllustration &&
+            (
+            noLoaderAndSearchText &&
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              </div>
+            )
+          }
         </div>
         }
       </CapSpin>
@@ -1363,7 +1406,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathname: `/mobilepush/edit/${e.template_id}`,
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
       };
-    } else if (this.state.channel.toLowerCase() === 'wechat') {
+    } else if (this.state.channel.toLowerCase() === INAPP_LOWERCASE) {
+      routeParams = {
+        pathname: `/inapp/edit/${e.template_id}`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
+      };
+    }
+    else if (this.state.channel.toLowerCase() === 'wechat') {
       if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
         this.props.router.push({
           pathname: `/wechat/richmedia/edit/${e.template_id}`,
@@ -1796,6 +1845,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.getAllTemplates({params: {}}, true);
         this.props.mobilepushActions.clearCreateResponse();
       });
+    } else if (this.state.channel.toLowerCase() === "inapp") {
+      duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
+      this.props.inAppActions.createInAppTemplate(duplicateObj, () => {
+        const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+        CapNotification.success({key: 'duplicateSuccess', message});
+        this.getAllTemplates({params: {}}, true);
+        this.props.inAppActions.clearCreateResponse();
+      });
     } else if (this.state.channel.toLowerCase() === "ebill") {
       this.props.ebillActions.createTemplate(duplicateObj);
     } else if (this.state.channel.toLowerCase() === "email") {
@@ -1918,6 +1975,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathName = `/zalo/edit/${id}/`;
         break;
       }
+      case INAPP: {
+        pathName = `/inapp/edit/${id}/`;
+        break;
+      }
       default:
         break;
     }
@@ -2206,7 +2267,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === "embedded" && this.props.location.query.module === "library") {
       switch (property) {
         case "showAccountSelection":
-          return (this.props.route && (['wechat', 'mobilepush', WHATSAPP_LOWERCASE].includes(this.props.route.name.toLowerCase())));
+          return (this.props.route && (['wechat', 'mobilepush', WHATSAPP_LOWERCASE, INAPP_LOWERCASE].includes(this.props.route.name.toLowerCase())));
         case "setLocale":
           return true;
         case "callCreateFromProps":
@@ -2346,6 +2407,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           descriptionClassName: 'illustration-desc zalo-illustration',
           buttonClassName: "zalo-illustration-button",
         };
+      case INAPP:
+        return {
+          illustrationImage: inAppIllustration,
+          title: <FormattedMessage {...messages.inAppTitleIllustration} />,
+          description: <FormattedMessage {...messages.inAppDescIllustration} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc inapp-illustration',
+          buttonClassName: "inapp-illustration-button",
+        }
       default:
         return {};
     }
@@ -2401,24 +2471,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {} } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
+    const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
 
-    if ([WECHAT, MOBILE_PUSH, LINE, ZALO].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE, ZALO].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO].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(
-                { key: isMobilePushChannel ? account.id : account.uuid,
+                { key: isMobilePushChannel || isInAppChannel ? account.id : account.uuid,
                   title: account.name,
                   value: account.name,
                   icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
                 }
               );
-            } else if (query.module && (isWechatChannel || isMobilePushChannel)) {
+            } else if (query.module && (isWechatChannel || isMobilePushChannel || isInAppChannel)) {
               accountOptions.push(
                 {
-                  key: isMobilePushChannel ? account.id : account.uuid,
+                  key: isMobilePushChannel || isInAppChannel ? account.id : account.uuid,
                   value: account.name,
                   title: account.name,
                   icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
@@ -2428,7 +2499,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           } else {
             accountOptions.push(
               {
-                key: isMobilePushChannel ? account.id : account.uuid,
+                key: isMobilePushChannel || isInAppChannel ? account.id : account.uuid,
                 value: account.name,
                 title: account.name,
                 icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
@@ -2451,6 +2522,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresent;
         break;
       }
+      case INAPP: {
+        accountHeader = formatMessage(messages.inappAccount);
+        noAccountHeader = messages.noAccountsPresentInApp;
+        break;
+      }
       case WECHAT: {
         accountHeader = formatMessage(messages.wechatAccount);
         noAccountHeader = messages.noAccountsPresentWeChat;
@@ -2548,6 +2624,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       [MOBILE_PUSH]: 'mobilepushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
+      [INAPP]: 'inappAccount',
       [ZALO]: 'zaloAccount',
     };
     return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
@@ -2733,7 +2810,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const showWhatsappCountWarning = templatesCount >= WARNING_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
 
-    const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
+    const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
         style={{width: '210px'}}
@@ -3025,6 +3102,7 @@ Templates.propTypes = {
   whatsappActions: PropTypes.object,
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
+  inAppActions: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -3041,6 +3119,7 @@ const mapStateToProps = createStructuredSelector({
   Line: makeSelectLine(),
   Viber: makeSelectViber(),
   Zalo: makeSelectZalo(),
+  InApp: makeSelectInApp(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -3048,6 +3127,7 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
     smsActions: bindActionCreators(smsActions, dispatch),
     mobilepushActions: bindActionCreators(mobilepushActions, dispatch),
+    inAppActions: bindActionCreators(inAppActions, dispatch),
     smsEditActions: bindActionCreators(smsEditActions, dispatch),
     ebillActions: bindActionCreators(ebillActions, dispatch),
     emailActions: bindActionCreators(emailActions, dispatch),

package/v2Containers/Templates/messages.js

@@ -126,6 +126,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresent`,
     defaultMessage: "Push notifications are not setup for your brand",
   },
+  "noAccountsPresentInApp": {
+    id: `${scope}.noAccountsPresentInApp`,
+    defaultMessage: "In app message are not setup for your brand",
+  },
   "noAccountsPresentWeChat": {
     id: `${scope}.noAccountsPresentWeChat`,
     defaultMessage: "Wechat accounts are not setup for your brand",
@@ -326,6 +330,10 @@ export default defineMessages({
     id: `${scope}.newWhatsappTemplate`,
     defaultMessage: 'Add new Whatsapp {template}',
   },
+  "newInAppMessageTemplate": {
+    id: `${scope}.newInAppMessageTemplate`,
+    defaultMessage: 'Add new In app message {template}',
+  },
   "newNotificationTemplate": {
     id: `${scope}.newNotificationTemplate`,
     defaultMessage: 'New notification {template}',
@@ -370,6 +378,14 @@ export default defineMessages({
     id: `${scope}.noApprovedWhatsappTemplatesDesc`,
     defaultMessage: 'Please try creating a new template, once it is approved by Whatsapp it will be available here',
   },
+  "inAppTitleIllustration": {
+    id: `${scope}.inAppTitleIllustration`,
+    defaultMessage: 'There are no templates available',
+  },
+  "inAppDescIllustration": {
+    id: `${scope}.inAppDescIllustration`,
+    defaultMessage: 'You can create new templates on the In app message platform and once they’re created successfully, you can view them here',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',
@@ -394,6 +410,10 @@ export default defineMessages({
     id: `${scope}.mobilepushAccount`,
     defaultMessage: 'Mobilepush account',
   },
+  "inappAccount": {
+    id: `${scope}.inappAccount`,
+    defaultMessage: 'In app message account',
+  },
   "lineAccount": {
     id: `${scope}.lineAccount`,
     defaultMessage: 'Line account',

package/v2Containers/TemplatesV2/index.js

@@ -29,7 +29,7 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
@@ -63,6 +63,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       weChat: {content: <></>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      inApp: { content: <div></div>, tab: intl.formatMessage(messages.inapp), key: INAPP },
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
@@ -281,7 +282,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     argsPanes.map((pane) => {
       let content = null;
       if (pane.key === selectedChannel) {
-        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
+        let channel;
+        if ( selectedChannel === "mpush") {
+          channel = "mobilepush";
+        } else {
+          channel = selectedChannel;
+        }
         content = this.getTemplatesComponent(channel);
       }
       return {

package/v2Containers/TemplatesV2/messages.js

@@ -82,4 +82,8 @@ export default defineMessages({
     id: `creatives.containersV2.TemplatesV2.zalo`,
     defaultMessage: 'Zalo',
   },
+  inapp: {
+    id: `creatives.containersV2.TemplatesV2.inapp`,
+    defaultMessage: 'In app message',
+  },
 });