@capillarytech/creatives-library 7.17.93 → 7.17.95

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();
     }
 
@@ -364,9 +374,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         nextProps.actions.getWeCrmAccounts();
       } else if (nextProps.route.name.toLowerCase() === 'email') {
         channel = 'Email';
-      } else if (nextProps.route.name.toLowerCase() === "mobilepush") {
+      } else if (nextProps.route.name.toLowerCase() === "mobilepush" || nextProps.route.name === INAPP) {
         this.setState({defaultAccount: true});
-        channel = "mobilepush";
+        channel = nextProps.route.name.toLowerCase();
         nextProps.actions.getWeCrmAccounts(channel);
       } else if (nextProps.route.name.toLowerCase() === 'ebill') {
         channel = 'Ebill';
@@ -393,7 +403,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 (['mobilepush', INAPP_LOWERCASE].includes((this.state.channel).toLowerCase())  && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
           }
           this.getAllTemplates({params}, true);
@@ -405,7 +415,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 ((['mobilepush', INAPP_LOWERCASE].includes((this.state.channel || '').toLowerCase())) && nextProps.Templates.selectedWeChatAccount) {
       params.accountId = nextProps.Templates.selectedWeChatAccount.id;
     }
     const selectedChannel = this.state.channel.toLowerCase();
@@ -451,7 +461,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;
@@ -471,20 +481,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           nextProps.actions.setWeChatAccount(selectedAccount);
           this.getAllTemplates({params});
         });
-      } else if (selectedChannel === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+      } else if ([INAPP_LOWERCASE, 'mobilepush'].includes(selectedChannel) && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+        const { location: { query } } = nextProps || {};
         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)) {
+          if ((query.account_id && account.id === Number(query.account_id)) || (query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === query.source_account_id)) {
             selectedAccount = account;
           }
         });
         this.props.actions.setWeChatAccount(selectedAccount);
-        params.accountId = Number(nextProps.location.query.account_id);
+        params.accountId = Number(query.account_id);
         this.getAllTemplates({params});
       }
-    }
-    if (selectedChannel === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
-
-    }
+    }  
+  
 
     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 +522,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 +548,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,9 +665,10 @@ 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') {
-        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})];
+      } else if (['mobilepush', INAPP_LOWERCASE].includes(selectedChannel)) {
+        const selectedAccount = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})];
+        this.props.actions.setWeChatAccount(selectedAccount);
+        const account = selectedAccount;
         params.accountId = account.id;
         const isAndroidSupported = get(account, "configs.android") === '1';
         const isIosSupported = get(account, "configs.ios") === '1';
@@ -810,7 +823,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
           queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
-        if (this.state.channel.toLowerCase() === MOBILE_PUSH_LOWERCASE && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE.includes](this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
@@ -1064,6 +1077,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
+        case INAPP: 
           templateData.content = template;
           break;
         case WECHAT:
@@ -1271,9 +1285,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 +1306,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)) && (['wechat', 'mobilepush', INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) &&
           <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 +1346,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
+          {showInAppIllustration &&
+            (
+            noLoaderAndSearchText &&
+              <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              </div>
+            )
+          }
         </div>
         }
       </CapSpin>
@@ -1358,9 +1381,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathname: `/sms/view`,
         query: type === 'embedded' ? {type: 'embedded', module} : {},
       };
-    } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+    } else if (['mobilepush', INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) {
       routeParams = {
-        pathname: `/mobilepush/edit/${e.template_id}`,
+        pathname: `/${this.state.channel.toLowerCase()}/edit/${e.template_id}`,
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
       };
     } else if (this.state.channel.toLowerCase() === 'wechat') {
@@ -1796,6 +1819,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 +1949,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 +2241,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 +2381,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 +2445,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 +2473,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 +2496,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 +2598,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 +2784,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 +3076,7 @@ Templates.propTypes = {
   whatsappActions: PropTypes.object,
   rcsActions: PropTypes.object,
   zaloActions: PropTypes.object,
+  inAppActions: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -3041,6 +3093,7 @@ const mapStateToProps = createStructuredSelector({
   Line: makeSelectLine(),
   Viber: makeSelectViber(),
   Zalo: makeSelectZalo(),
+  InApp: makeSelectInApp(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -3048,6 +3101,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'},

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',
+  },
 });