@capillarytech/creatives-library 7.17.92 → 7.17.94

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.92",
+  "version": "7.17.94",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -237,11 +237,6 @@ export const createMobilePushTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
-export const createInAppTemplate = ({payload}) => {
-  const url = `${API_ENDPOINT}/templates/INAPP`;
-  return request(url, getAPICallObject('POST', payload));
-};
-
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));

package/v2Components/CapDeviceContent/index.js

@@ -23,6 +23,7 @@ import {
   INAPP_IMG_SIZE,
   INITIAL_CTA_DATA,
   MEDIA_RADIO_OPTIONS,
+  BUTTON_RADIO_OPTIONS,
 } from "../../v2Containers/InApp/constants";
 import { INAPP } from "../../v2Containers/CreativesContainer/constants";
 import CapImageUpload from "../CapImageUpload";
@@ -115,35 +116,6 @@ const CapDeviceContent = (props) => {
     });
   };
 
-  const buttonRadioOptions = [
-    {
-      value: INAPP_BUTTON_TYPES.NONE,
-      label: (
-        <CapHeading
-          type="h4"
-          className="inapp-button-none"
-        >
-          {formatMessage(messages.btnTypeNone)}
-        </CapHeading>
-      ),
-    },
-    {
-      value: INAPP_BUTTON_TYPES.CTA,
-      label: (
-        <>
-          <div
-            className="inapp-button-cta"
-          >
-            <CapHeading type="h4">
-              {formatMessage(messages.btnTypeCTA)}
-            </CapHeading>
-            <CapLabel>{formatMessage(messages.ctaDesc)}</CapLabel>
-          </div>
-        </>
-      ),
-    },
-  ];
-
   const onTitleChange = ({ target: { value } }) => {
     setTitle(value);
   };
@@ -308,7 +280,7 @@ const CapDeviceContent = (props) => {
           description={<CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>}
           />
         <CapRadioGroup
-          options={buttonRadioOptions}
+          options={BUTTON_RADIO_OPTIONS}
           value={buttonType}
           onChange={onChangeButtonType}
           className="inapp-btn-radio-group"

package/v2Components/CapDeviceContent/messages.js

@@ -55,19 +55,6 @@ export default defineMessages({
     id: `${prefix}.mediaImage`,
     defaultMessage: "Image",
   },
-  btnTypeNone: {
-    id: `${prefix}.btnTypeNone`,
-    defaultMessage: "None",
-  },
-  btnTypeCTA: {
-    id: `${prefix}.btnTypeCTA`,
-    defaultMessage: "Call to action",
-  },
-  ctaDesc: {
-    id: `${prefix}.ctaDesc`,
-    defaultMessage:
-      "Create a button that lets customers take an action",
-  },
   emptyTemplateMessageErrorMessage: {
     id: `${prefix}.emptyTemplateMessageErrorMessage`,
     defaultMessage: "Template message cannot be empty",

package/v2Components/CapImageUpload/index.js

@@ -245,7 +245,7 @@ function CapImageUpload(props) {
         {channel === WHATSAPP && (
           <>
             <CapHeadingSpan type="label2">
-              <FormattedMessage {...messages.whatsappImageSize} />
+              <FormattedMessage {...messages.maxImageSize} />
             </CapHeadingSpan>
             <CapHeadingSpan type="label2">
               <FormattedMessage {...messages.whatsappAspectRatio} />
@@ -270,7 +270,7 @@ function CapImageUpload(props) {
         {
           channel === INAPP && (
             <CapHeadingSpan type="label2" className="image-size">
-              <FormattedMessage {...messages.whatsappImageSize} />
+              <FormattedMessage {...messages.maxImageSize} />
             </CapHeadingSpan>
           )
         }

package/v2Components/CapImageUpload/messages.js

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl';
 const scope = `creatives.componentsV2.CapImageUpload`;
 
 export default defineMessages({
-  whatsappImageSize: {
-    id: `${scope}.whatsappImageSize`,
+  maxImageSize: {
+    id: `${scope}.maxImageSize`,
     defaultMessage: 'Size upto: 5MB',
   },
   whatsappAspectRatio: {

package/v2Components/MobilePushPreviewV2/index.js

@@ -46,7 +46,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const androidPreviewContent = {
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,
-        mediaPreview: { inAppImageSrcAndroid: androidContent?.expandableDetails?.imageUrl },
+        mediaPreview: { inAppImageSrcAndroid: androidContent?.expandableDetails?.image },
         ctaData: androidContent?.expandableDetails?.buttons?.map((cta) => {
           const { index, type, text, url = "", label } = cta;
           const ctaObject = {
@@ -63,7 +63,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const iosPreviewContent = {
         templateTitle: iosContent?.title,
         templateMsg: iosContent?.message,
-        mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.imageUrl },
+        mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.image },
         ctaData: iosContent?.expandableDetails?.buttons?.map((cta) => {
           const { index, type, text, url = "", label } = cta;
           const ctaObject = {
@@ -131,17 +131,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     const {templateData} = this.props;
     let hasAndroid;
     let hasIos;
-    let hasBothAndroidAndIos;
     if (this.props.channel === MOBILE_PUSH) {
       hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
       hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
-      hasBothAndroidAndIos = hasAndroid && hasIos;
     } else if (this.props.channel === INAPP.toUpperCase()) {
       hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent.title');
       hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent.title');
-      hasBothAndroidAndIos = hasAndroid && hasIos;
     }
-
+    const hasBothAndroidAndIos = hasAndroid && hasIos;
     return (
       <div>
         <div className="devices">

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -42,7 +42,7 @@
                 margin-right: $CAP_SPACE_08;
                 margin-left: $CAP_SPACE_08;
                 width: 178px;
-                max-height: 3rem;
+                max-height: $CAP_SPACE_44;
                 text-overflow: ellipsis;
                 overflow: hidden;
                 text-align: left;
@@ -58,7 +58,7 @@
             .inapp-message-container-HEADER-ANDROID {
               position: absolute;
               display: flex;
-              bottom: 19.4rem;
+              // bottom: 19.4rem;
               width: 200px;
               left: 28%;
               top: 20px;
@@ -81,6 +81,7 @@
                 left: 26%;
                 bottom: -21px;
                 text-align: center;
+                top: 22%;
               }
       
               .inapp-image-HEADER-ANDROID {
@@ -98,7 +99,7 @@
                 height: 46px;
                 left: 35%;
                 bottom: 30px;
-                max-height: 2.85rem;
+                max-height: $CAP_SPACE_40;
                 font-size: 8px;
                 text-overflow: ellipsis;
                 text-align: left;
@@ -171,7 +172,7 @@
                 width: 120px;
                 height: 46px;
                 bottom: 30px;
-                max-height: 3rem;
+                max-height: $CAP_SPACE_44;
                 overflow: hidden;
                 font-size: 8px;
                 text-overflow: ellipsis;
@@ -220,7 +221,7 @@
       
               .inapp-content-FULLSCREEN-ANDROID {
                 width: 186px;
-                height: 9rem;
+                height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;
@@ -262,7 +263,7 @@
                 margin-right: $CAP_SPACE_08;
                 margin-left: $CAP_SPACE_08;
                 width: 178px;
-                max-height: 3rem;
+                max-height: $CAP_SPACE_44;
                 text-overflow: ellipsis;
                 overflow: hidden;
                 text-align: left;
@@ -317,7 +318,7 @@
                 height: 46px;
                 left: 35%;
                 top: -31px;
-                max-height: 2.85rem;
+                max-height: $CAP_SPACE_40;
                 overflow: hidden;
                 font-size: 8px;
                 text-overflow: ellipsis;
@@ -389,7 +390,7 @@
                 width: 60%;
                 height: 46px;
                 bottom: 30px;
-                max-height: 3rem;
+                max-height: $CAP_SPACE_44;
                 overflow: hidden;
                 font-size: 8px;
                 text-overflow: ellipsis;
@@ -439,7 +440,7 @@
       
               .inapp-content-FULLSCREEN-iOS {
                 width: 186px;
-                height: 9rem;
+                height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;

package/v2Components/TemplatePreview/index.js

@@ -504,7 +504,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   <CapImage
                     className="preview-image sms"
                     src={smsMobileAndroid}
-                    alt="Preview is being generated"
+                    alt={this.props.intl.formatMessage(messages.previewGenerated)}
                   />
                   <div className="msg-container sms">
                     <div className={"message-pop sms"}>
@@ -563,7 +563,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       ? wechatBodyNew
                       : smsMobileAndroid
                   }
-                  alt="Preview is being generated"
+                  alt={this.props.intl.formatMessage(messages.previewGenerated)}
                 />
                 <div className="msg-container wechat">
                   <div

package/v2Containers/CreativesContainer/index.js

@@ -84,7 +84,7 @@ export class Creatives extends React.Component {
 
   componentDidMount() {
     GA.timeTracker.startTimer(CREATIVES_CONTAINER);
-    if (!this.props?.isFullMode) {
+    if(!this.props?.isFullMode){
       this.props?.templateActions.getCdnTransformationConfig();
     }
   }
@@ -156,7 +156,7 @@ export class Creatives extends React.Component {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
       const {emailCreateMode, currentChannel} = prevState;
-      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH || currentChannel.toUpperCase() === constants.WECHAT || constants.INAPP) {
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
       return {
@@ -195,7 +195,6 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
   getTemplateData = (templateData) => { //from consumers to creatives
-    console.log('in getTemplateData', templateData, this.props);
     const { isFullMode, messageDetails = {}, smsRegister } = this.props;
     const { additionalProperties = {} } = messageDetails;
     if (!isFullMode && templateData) { // for component mode
@@ -271,23 +270,36 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.MOBILE_PUSH:
-        case constants.INAPP:
-          {
-            const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
-            creativesTemplateData = {
-              type: channel,
-              name: templateData.messageSubject,
-              versions: {
-                base: {
-                  ANDROID: templateData.androidContent,
-                  IOS: templateData.iosContent,
-                },
+        case constants.MOBILE_PUSH: {
+          const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
+          creativesTemplateData = {
+            type: channel,
+            name: templateData.messageSubject,
+            versions: {
+              base: {
+                ANDROID: templateData.androidContent,
+                IOS: templateData.iosContent,
               },
-              definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
-            };
-            break;
-          }
+            },
+            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+          };
+          break;
+        }
+        case constants.INAPP: {
+          const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
+          creativesTemplateData = {
+            type: channel,
+            name: templateData.messageSubject,
+            versions: {
+              content: {
+                ANDROID: templateData.androidContent,
+                IOS: templateData.iosContent,
+              },
+            },
+            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+          };
+          break;
+        }
         case constants.WECHAT: {
           const messageBody = JSON.parse(templateData.messageBody);
           creativesTemplateData = {
@@ -533,7 +545,6 @@ export class Creatives extends React.Component {
 
   getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
-    console.log('in getCreativesData', channel, template);
     switch (channel) {
       case constants.SMS:
         if (template?.value?.base) {
@@ -622,7 +633,7 @@ export class Creatives extends React.Component {
         }
         break;
       case constants.INAPP:
-        if (get(template, "value.versions.base")) {
+        if (get(template, "value.versions.base.content")) {
           const inAppTemplate = template.value;
           templateData.accountId = get(inAppTemplate, 'definition.accountId');
           const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
@@ -630,7 +641,7 @@ export class Creatives extends React.Component {
             templateData.licenseCode = get(inAppTemplate, 'definition.licenseCode');
             templateData.templateId = get(inAppTemplate, '_id');
           }
-          const androidContent = get(inAppTemplate, 'versions.base.ANDROID');
+          const androidContent = get(inAppTemplate, 'versions.base.content.ANDROID');
           if (!isEmpty(androidContent)) {
             if (type !== LOYALTY) {
               delete androidContent.cuid;
@@ -646,7 +657,7 @@ export class Creatives extends React.Component {
             templateData.androidContent.type = get(inAppTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
           }
-          const iosContent = get(inAppTemplate, 'versions.base.IOS');
+          const iosContent = get(inAppTemplate, 'versions.base.content.IOS');
           if (!isEmpty(iosContent)) {
             if (type !== LOYALTY) {
               delete iosContent.cuid;
@@ -761,10 +772,10 @@ export class Creatives extends React.Component {
             header,
             footer,
             headerVarMapped,
-            headerTemplate,
+            headerTemplate
           };
           const {
-            whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = '',
+            whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = ''
           } = whatsappDocParams;
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
@@ -894,7 +905,6 @@ export class Creatives extends React.Component {
       default:
         break;
     }
-    console.log('in getCreativesData templateData', templateData);
     return templateData;
   };
   getSlideBoxContent({mode, templateData, isFullMode}) {
@@ -997,10 +1007,10 @@ export class Creatives extends React.Component {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
           const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
-          creativesData.then((data) => {
+          creativesData.then(data=>{
             this.logGTMEvent(channel, data);
             this.props.getCreativesData(data);// send data to consumer
-          });
+          })
         },
       );
     }
@@ -1056,9 +1066,6 @@ export class Creatives extends React.Component {
       if (isMobilepush) {
         showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(mobilePushCreateMode));
       }
-      if (isInApp) {
-        showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(inAppCreateMode));
-      }
     } else if (channel === constants.EMAIL && isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showFooter = isEmailCreate && emailCreateMode;
@@ -1100,7 +1107,6 @@ export class Creatives extends React.Component {
     if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
-
     return showFooter;
   }
   shouldShowDoneFooter = () => {
@@ -1113,7 +1119,7 @@ export class Creatives extends React.Component {
     if (channel === constants.EMAIL || channel === constants.SMS) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-    } else if ([constants.WECHAT, constants.MOBILE_PUSH, constants.INAPP].includes(channel)) {
+    } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
     }
 
@@ -1136,7 +1142,7 @@ export class Creatives extends React.Component {
     onChange={(ev) => {
       const value = ev.currentTarget.value;
       const isEmptyTemplateName = value.trim() ? false : true;
-      this.setState({isTemplateNameEmpty: isEmptyTemplateName});
+      this.setState({isTemplateNameEmpty : isEmptyTemplateName});
       const newFormData = {...formData, 'template-name': value};
       onFormDataChange(newFormData);
     }}
@@ -1147,7 +1153,7 @@ export class Creatives extends React.Component {
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
-        this.setState({isTemplateNameEmpty: true});
+        this.setState({isTemplateNameEmpty:true});
       }
       this.templateContainerDetails = {formData, onFormDataChange};
       if (name && !isEditName) {
@@ -1216,7 +1222,6 @@ export class Creatives extends React.Component {
       smsRegister,
       enableNewChannels,
     } = this.props;
-    console.log('this.props', this.props);
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (

package/v2Containers/InApp/constants.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import { WEBSITE } from "../../v2Components/CapInAppCTA/constants";
 import messages from "./messages";
 
@@ -26,7 +28,8 @@ export const INAPP_MEDIA_TYPES = {
   TEXT: "TEXT",
   IMAGE: "IMAGE",
 };
-
+export const BIG_TEXT = 'BIG_TEXT';
+export const BIG_PICTURE = 'BIG_PICTURE';
 export const NONE = "NONE";
 export const CTA = "CTA";
 export const MAPP_SDK = "MAPP_SDK";
@@ -93,3 +96,31 @@ export const MEDIA_RADIO_OPTIONS = [
     label: <FormattedMessage {...messages.mediaImage} />,
   },
 ];
+export const BUTTON_RADIO_OPTIONS = [
+  {
+    value: INAPP_BUTTON_TYPES.NONE,
+    label: (
+      <CapHeading
+        type="h4"
+        className="inapp-button-none"
+      >
+        <FormattedMessage {...messages.btnTypeNone} />
+      </CapHeading>
+    ),
+  },
+  {
+    value: INAPP_BUTTON_TYPES.CTA,
+    label: (
+      <>
+        <div
+          className="inapp-button-cta"
+        >
+          <CapHeading type="h4">
+            <FormattedMessage {...messages.btnTypeCTA} />
+          </CapHeading>
+          <CapLabel><FormattedMessage {...messages.ctaDesc} /></CapLabel>
+        </div>
+      </>
+    ),
+  },
+];

package/v2Containers/InApp/index.js

@@ -29,6 +29,8 @@ import { validateTags } from "../../utils/tagValidations";
 
 import {
   ANDROID,
+  BIG_PICTURE,
+  BIG_TEXT,
   DEEP_LINK,
   INAPP_BUTTON_TYPES,
   INAPP_MEDIA_TYPES,
@@ -155,16 +157,28 @@ export const InApp = (props) => {
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
       const androidContent = editContent?.ANDROID;
-      setTitleAndroid(androidContent?.title);
-      setTemplateMessageAndroid(androidContent?.message);
-      setTemplateMediaTypeAndroid(androidContent?.expandableDetails?.mediaType);
-      setInAppImageSrcAndroid(androidContent?.expandableDetails?.imageUrl);
-      setDeepLinkValueAndroid(androidContent?.cta?.actionLink);
-      setAddActionLinkAndroid(!isEmpty(androidContent?.cta) && true);
-      setButtonTypeAndroid(androidContent?.expandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE);
-      if (androidContent?.expandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && androidContent?.expandableDetails?.buttons.length > 0) {
+      const {
+        title: androidTitle,
+        message: androidMessage,
+        cta: androidCta,
+        expandableDetails: androidExpandableDetails,
+      } = androidContent;
+      setTitleAndroid(androidTitle);
+      setTemplateMessageAndroid(androidMessage);
+      setTemplateMediaTypeAndroid(
+        androidExpandableDetails?.style === BIG_TEXT
+          ? INAPP_MEDIA_TYPES.TEXT
+          : INAPP_MEDIA_TYPES.IMAGE
+      );
+      setInAppImageSrcAndroid(androidExpandableDetails?.image);
+      setDeepLinkValueAndroid(androidCta.actionLink);
+      setAddActionLinkAndroid(!isEmpty(androidCta) && true);
+      setButtonTypeAndroid(
+        androidExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE
+      );
+      if (androidExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && androidExpandableDetails?.buttons.length > 0) {
         setCtaDataAndroid(
-          androidContent?.expandableDetails?.buttons?.map((cta) => {
+          androidExpandableDetails?.buttons?.map((cta) => {
             const { index, type, text, url = "", label } = cta;
             const obj = {
               index,
@@ -179,16 +193,22 @@ export const InApp = (props) => {
         );
       }
       const iosContent = editContent?.IOS;
-      setTitleIos(iosContent?.title);
-      setTemplateMessageIos(iosContent?.message);
-      setTemplateMediaTypeIos(iosContent?.expandableDetails?.mediaType);
-      setInAppImageSrcIos(iosContent?.expandableDetails?.imageUrl);
-      setButtonTypeIos(iosContent?.expandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE);
-      setAddActionLinkIos(!isEmpty(iosContent?.cta) && true);
-      setDeepLinkValueIos(iosContent?.cta?.actionLink);
-      if (iosContent?.expandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && iosContent?.expandableDetails?.buttons.length > 0) {
+      const {
+        title: iosTitle,
+        message: iosMessage,
+        cta: iosCta,
+        expandableDetails: iosExpandableDetails,
+      } = iosContent;
+      setTitleIos(iosTitle);
+      setTemplateMessageIos(iosMessage);
+      setTemplateMediaTypeIos(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+      setInAppImageSrcIos(iosExpandableDetails?.image);
+      setButtonTypeIos(iosExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE);
+      setAddActionLinkIos(!isEmpty(iosCta) && true);
+      setDeepLinkValueIos(iosCta?.actionLink);
+      if (iosExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && iosExpandableDetails?.buttons.length > 0) {
         setCtaDataIos(
-          iosContent?.expandableDetails?.buttons?.map((cta) => {
+          iosExpandableDetails?.buttons?.map((cta) => {
             const { index, type, text, url = "", label } = cta;
             const obj = {
               index,
@@ -405,50 +425,38 @@ export const InApp = (props) => {
   ];
 
   const createModeContent = (
-    <>
+    <CapRow>
+      {/* template name */}
       <CapRow>
-        {/* template name */}
-        <CapRow>
-          <CapHeading type="h4">
-            <FormattedMessage {...messages.creativeName} />
-          </CapHeading>
-          <CapInput
-            id="inapp-template-name-input"
-            className="inapp-template-name-input"
-            onChange={onTemplateNameChange}
-            placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
-            value={templateName}
-            size="default"
+        <CapHeading type="h4">
+          <FormattedMessage {...messages.creativeName} />
+        </CapHeading>
+        <CapInput
+          id="inapp-template-name-input"
+          className="inapp-template-name-input"
+          onChange={onTemplateNameChange}
+          placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
+          value={templateName}
+          size="default"
           />
-        </CapRow>
-        {/* Creative layout type*/}
-        <CapRow className="inapp-creative-layout">
-          <CapHeading type="h4">
-            <FormattedMessage {...messages.creativeLayout} />
-          </CapHeading>
-          <CapHeading type="h6" className="inapp-creative-layout-desc">
-            <FormattedMessage {...messages.creativeLayoutDesc} />
-          </CapHeading>
-        </CapRow>
-        <CapRadioGroup
-          id="inapp-layout-radio"
-          options={LAYOUT_RADIO_OPTIONS}
-          value={templateLayoutType}
-          onChange={onTemplateLayoutTypeChange}
-          className="inapp-layout-radio"
-        />
       </CapRow>
-      {/* device tab */}
-      <CapTab
-        panes={PANES}
-        onChange={(value) => {
-          setPanes(value);
-        }}
-        activeKey={panes}
-        defaultActiveKey={panes}
-        className="inapp-template-device-tab"
-      />
-    </>
+      {/* Creative layout type*/}
+      <CapRow className="inapp-creative-layout">
+        <CapHeading type="h4">
+          <FormattedMessage {...messages.creativeLayout} />
+        </CapHeading>
+        <CapHeading type="h6" className="inapp-creative-layout-desc">
+          <FormattedMessage {...messages.creativeLayoutDesc} />
+        </CapHeading>
+      </CapRow>
+      <CapRadioGroup
+        id="inapp-layout-radio"
+        options={LAYOUT_RADIO_OPTIONS}
+        value={templateLayoutType}
+        onChange={onTemplateLayoutTypeChange}
+        className="inapp-layout-radio"
+        />
+    </CapRow>
   );
   //create methods end
 
@@ -548,13 +556,17 @@ export const InApp = (props) => {
   const createPayload = () => {
     let androidMediaParams = {};
     let iosMediaParams = {};
-    const templateMediaType = panes === ANDROID ? templateMediaTypeAndroid : templateMediaTypeIos;
     const buttonType = panes === ANDROID ? buttonTypeAndroid : buttonTypeIos;
+    const commonDevicePayload = {
+      luid: "{{luid}}",
+      cuid: "{{cuid}}",
+      communicationId: "{{communicationId}}",
+    };
     switch (templateMediaTypeAndroid) {
       case INAPP_MEDIA_TYPES.IMAGE:
         androidMediaParams = {
-          imageUrl: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
-          style: "BIG_PICTURE",
+          image: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
+          style: BIG_PICTURE,
         };
         break;
       default:
@@ -563,8 +575,8 @@ export const InApp = (props) => {
     switch (templateMediaTypeIos) {
       case INAPP_MEDIA_TYPES.IMAGE:
         iosMediaParams = {
-          imageUrl: getCdnUrl({url: inAppImageSrcIos, channelName: INAPP }),
-          style: "BIG_PICTURE",
+          image: getCdnUrl({url: inAppImageSrcIos, channelName: INAPP }),
+          style: BIG_PICTURE,
         };
         break;
       default:
@@ -581,16 +593,13 @@ export const InApp = (props) => {
         base: {
           content: {
             ANDROID: {
-              luid: "{{luid}}",
-              cuid: "{{cuid}}",
-              communicationId: "{{communicationId}}",
+              ...commonDevicePayload,
               title: titleAndroid,
               message: templateMessageAndroid,
               bodyType: templateLayoutType,
               expandableDetails: {
-                style: "BIG_TEXT",
+                style: BIG_TEXT,
                 message: templateMessageAndroid,
-                mediaType: templateMediaType,
                 ...androidMediaParams,
                 ...(isBtnTypeCta && {
                   buttonType,
@@ -601,16 +610,13 @@ export const InApp = (props) => {
               cta: deepLinkValueAndroid ? {type: DEEP_LINK, actionLink: deepLinkValueAndroid} : {},
             },
             IOS: {
-              luid: "{{luid}}",
-              cuid: "{{cuid}}",
-              communicationId: "{{communicationId}}",
+              ...commonDevicePayload,
               title: titleIos,
               message: templateMessageIos,
               bodyType: templateLayoutType,
               expandableDetails: {
-                style: "BIG_TEXT",
+                style: BIG_TEXT,
                 message: templateMessageIos,
-                mediaType: templateMediaType,
                 ...iosMediaParams,
                 ...(isBtnTypeCta && {
                   buttonType,
@@ -701,7 +707,17 @@ export const InApp = (props) => {
     <CapSpin spinning={spin}>
       <CapRow className="cap-inapp-creatives">
         <CapColumn span={14}>
-          {createModeContent}
+          {isFullMode && createModeContent}
+          {/* device tab */}
+          <CapTab
+            panes={PANES}
+            onChange={(value) => {
+              setPanes(value);
+            }}
+            activeKey={panes}
+            defaultActiveKey={panes}
+            className="inapp-template-device-tab"
+          />
           <div className="inapp-scroll-div" />
         </CapColumn>
         <CapColumn span={10} className="inapp-preview-container">
@@ -709,17 +725,25 @@ export const InApp = (props) => {
         </CapColumn>
       </CapRow>
       <div className="inapp-footer">
-        {(
+        {
           <>
             <CapButton
               onClick={onDoneCallback()}
               disabled={isDisableDone()}
               className="inapp-create-btn"
             >
-              {isEditFlow ? <FormattedMessage {...messages.update} /> : <FormattedMessage {...messages.create} />}
+              {isEditFlow ? (
+                isFullMode ? (
+                  <FormattedMessage {...messages.update} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
+              ) : (
+                <FormattedMessage {...messages.create} />
+              )}
             </CapButton>
           </>
-        )}
+        }
       </div>
     </CapSpin>
   );

package/v2Containers/InApp/index.scss

@@ -37,6 +37,7 @@
 .inapp-footer {
   background-color: $CAP_WHITE;
   bottom: 0;
+  position: fixed;
   width: 100%;
   padding: $CAP_SPACE_20 0;
   z-index: 1;
@@ -44,4 +45,4 @@
   .ant-btn {
     margin-right: $CAP_SPACE_16;
   }
-}
+}

package/v2Containers/InApp/messages.js

@@ -83,4 +83,17 @@ export default defineMessages({
     id: `${prefix}.templateNameRegexErrorMessage`,
     defaultMessage: 'Template name can only contain lowercase alphanumeric characters and underscores',
   },
+  btnTypeNone: {
+    id: `${prefix}.btnTypeNone`,
+    defaultMessage: "None",
+  },
+  btnTypeCTA: {
+    id: `${prefix}.btnTypeCTA`,
+    defaultMessage: "Call to action",
+  },
+  ctaDesc: {
+    id: `${prefix}.ctaDesc`,
+    defaultMessage:
+      "Create a button that lets customers take an action",
+  },
 });

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

@@ -87,11 +87,6 @@ describe('Test activity inApp container', () => {
       params: { id: 'test'},
       getFormData: jest.fn(),
     });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Enter template name',
-    );
-    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
-    inputBox[0].focus();
     const iosTab = screen.getByRole('tab', {
       name: /ios/i,
     });
@@ -100,18 +95,13 @@ describe('Test activity inApp container', () => {
       name: /android/i,
     });
     fireEvent.click(within(androidTab).getByText(/android/i));
-    const inputNameBox = await screen.findAllByPlaceholderText(
-      'Enter template name',
-    );
-    inputNameBox[0].focus();
-    fireEvent.change(inputNameBox[0], { target: { value: 'Hello, welcome' } });
     const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
     msgBox[0].focus();
     fireEvent.change(msgBox[0], { target: { value: 'val' }});
-    const updateBtn = screen.getByRole('button', {
-      name: /update/i,
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
     });
-    expect(updateBtn).toBeEnabled();
+    expect(doneBtn).toBeEnabled();
   });
   it('test case for inApp template copy content flow', async () => {
     renderComponent({

package/v2Containers/InApp/tests/mockData.js

@@ -764,6 +764,7 @@ export const editData1 = {
         },
       },
     },
+    name: 'temp',
     isActive: true,
     orgId: 50146,
     createdBy: "50685415",

package/v2Containers/Templates/_templates.scss

@@ -684,4 +684,8 @@
   position: absolute;
   right: -17px;
   bottom: -17px;
+}
+.inapp-illustration-parent {
+  height: "calc(100vh - 325px)";
+  overflow: 'auto';
 }

package/v2Containers/Templates/index.js

@@ -374,13 +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";
-        nextProps.actions.getWeCrmAccounts(channel);
-      } else if (nextProps.route.name === INAPP ) {
-        this.setState({defaultAccount: true});
-        channel = INAPP_LOWERCASE;
+        channel = nextProps.route.name.toLowerCase();
         nextProps.actions.getWeCrmAccounts(channel);
       } else if (nextProps.route.name.toLowerCase() === 'ebill') {
         channel = 'Ebill';
@@ -407,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" || this.state.channel.toLowerCase() === INAPP_LOWERCASE && !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);
@@ -419,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" || (this.state.channel || '').toLowerCase() === INAPP_LOWERCASE && 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();
@@ -485,24 +481,15 @@ 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)) {
-        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});
-      }
-      else if (selectedChannel === INAPP_LOWERCASE && (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});
       }
     }  
@@ -678,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' || 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})];
+      } 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';
@@ -835,13 +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)) {
-          queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
-          if (this.state.mode) {
-            queryParams.mode = this.state.mode.toLowerCase();
-          }
-        }
-        if (this.state.channel.toLowerCase() === INAPP_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();
@@ -1095,8 +1077,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
-          templateData.content = template;
-          break;
         case INAPP: 
           templateData.content = template;
           break;
@@ -1326,7 +1306,7 @@ 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.channel.toLowerCase() === INAPP_LOWERCASE) &&
+          {(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>
@@ -1369,7 +1349,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           {showInAppIllustration &&
             (
             noLoaderAndSearchText &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+              <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
                 <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
@@ -1401,18 +1381,12 @@ 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() === 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') {
+    } 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}`,

package/v2Containers/TemplatesV2/index.js

@@ -282,12 +282,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     argsPanes.map((pane) => {
       let content = null;
       if (pane.key === selectedChannel) {
-        let channel;
-        if ( selectedChannel === "mpush") {
-          channel = "mobilepush";
-        } else {
-          channel = selectedChannel;
-        }
+        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
         content = this.getTemplatesComponent(channel);
       }
       return {