@capillarytech/creatives-library 7.17.91 → 7.17.92

package/v2Components/TemplatePreview/index.js

@@ -19,11 +19,20 @@ import {
   WECHAT,
   WHATSAPP,
   RCS,
-  ZALO
+  ZALO,
+  INAPP,
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
+import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
+import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';
+import inAppMobileAndroidBottom from './assets/images/inapp_mobile_android_bottom.svg';
+import inAppMobileAndroidFull from './assets/images/inapp_mobile_android_full.svg';
+import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
+import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
+import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
+import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
 import videoPlay from '../../assets/videoPlay.svg';
 import zaloMessage from '../../v2Containers/Zalo/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
@@ -49,13 +58,13 @@ import {
   CAP_PURPLE01,
   CAP_G16,
   CAP_SPACE_08,
-  CAP_SPACE_16,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
 import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY } from '../../v2Containers/Whatsapp/constants';
+import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -164,17 +173,20 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       viberAccountName,
       whatsappAccountName,
       whatsappContentLen,
+      inAppAccountName,
       intl,
       templateData,
       rcsIosPreview,
       hideTestAndPreviewBtn,
       hasJPLocaleHideFeatureEnabled,
+      templateLayoutType,
+      device,
     } = this.props;
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-
     const { formatMessage } = intl;
-    const { buttonText, imageURL, rcsPreviewContent, messageContent: viberMessageContent } = content || {};
+    const { buttonText, imageURL, rcsPreviewContent, inAppPreviewContent, messageContent: viberMessageContent } = content || {};
     const { rcsImageSrc, rcsTitle, rcsDesc, buttonText: rcsButtonText } = rcsPreviewContent || {};
+    const {mediaPreview = {}, templateTitle = "", templateMsg = "", ctaData} = inAppPreviewContent || {};
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -380,183 +392,316 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       handlePreviewInNewTab(templatePreviewUrl);
     };
 
+    const getPreviewImage = () => {
+      if (this.props.device === ANDROID) {
+        switch (templateLayoutType) {
+          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+            return inAppMobileAndroidModal;
+          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+            return inAppMobileAndroidTop;
+          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+            return inAppMobileAndroidBottom;
+          default:
+            return inAppMobileAndroidFull;
+        }
+      } else {
+        switch (templateLayoutType) {
+          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+            return inAppMobileIOSModal;
+          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+            return inAppMobileIOSTop;
+          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+            return inAppMobileIOSBottom;
+          default:
+            return inAppMobileIOSFull;
+        }
+      }
+    };
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
-
     return (
       <CapRow>
-        {this.props.showCount && (channel && channel.toLowerCase() !== FACEBOOK) && <CapColumn span={16}>
-          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-            {smsDetails.unicode &&
-              <FormattedMessage {...messages.smsFormatType}/>
-            }
-          </CapHeading>}
-          {smsDetails.optoutUrlPresent && <CapHeading type="h6">
-            <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-          </CapHeading>}
-          {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
-            <>
-              <WhatsappStatusContainer template={templateData} />
-              <CapHeading type="h3" className="margin-t-12">
-                <FormattedMessage
-                  {...messages.whatsappMessageLength}
-                  values={{ length: whatsappUpdatedLen }}
-                />
-              </CapHeading>
-            </>
-          ) : null}
-        </CapColumn>}
+        {this.props.showCount &&
+          channel &&
+          channel.toLowerCase() !== FACEBOOK && (
+            <CapColumn span={16}>
+              {channel && channel.toLowerCase() === "sms" && (
+                <CapHeading type="h3">
+                  <FormattedMessage
+                    {...messages.charactersTotal}
+                    values={{
+                      smsCount: smsDetails.parts,
+                      charCount: smsDetails.chars_used,
+                    }}
+                  />
+                  {smsDetails.unicode && (
+                    <FormattedMessage {...messages.smsFormatType} />
+                  )}
+                </CapHeading>
+              )}
+              {smsDetails.optoutUrlPresent && (
+                <CapHeading type="h6">
+                  <FormattedMessage
+                    {...messages.optoutCharactersTotal}
+                    values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                  />
+                </CapHeading>
+              )}
+              {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
+                <>
+                  <WhatsappStatusContainer template={templateData} />
+                  <CapHeading type="h3" className="margin-t-12">
+                    <FormattedMessage
+                      {...messages.whatsappMessageLength}
+                      values={{ length: whatsappUpdatedLen }}
+                    />
+                  </CapHeading>
+                </>
+              ) : null}
+            </CapColumn>
+          )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
             <div className="test-and-preview-container">
               <CapButton
                 style={{
-                  color: '#2466ea',
-                  display: 'inline-block',
-                  padding: '0 6px',
-                  marginTop: '12px',
+                  color: "#2466ea",
+                  display: "inline-block",
+                  padding: "0 6px",
+                  marginTop: "12px",
                 }}
                 type="flat"
                 onClick={() => this.onPreviewContentClicked(this.props.channel)}
                 disabled={disablePreviewAndTest}
               >
-                <CapIcon type="eye"/><FormattedMessage {...messages.preview} />
+                <CapIcon type="eye" />
+                <FormattedMessage {...messages.preview} />
               </CapButton>
               <CapButton
                 style={{
-                  color: '#2466ea',
-                  display: 'inline-block',
-                  padding: '0 6px',
-                  marginTop: '12px',
+                  color: "#2466ea",
+                  display: "inline-block",
+                  padding: "0 6px",
+                  marginTop: "12px",
                 }}
                 type="flat"
                 onClick={() => this.onTestContentClicked(this.props.channel)}
                 disabled={disablePreviewAndTest}
               >
-                <CapIcon type="lab"/><FormattedMessage {...messages.testMessage} />
+                <CapIcon type="lab" />
+                <FormattedMessage {...messages.testMessage} />
               </CapButton>
             </div>
           )}
-          <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-            { channel && channel.toLowerCase() === 'sms' &&
+          <div
+            className={`preview-container ${
+              type === "embedded" ? "embedded-preview" : ""
+            }`}
+          >
+            {channel && channel.toLowerCase() === "sms" && (
               <div>
                 <div className="shell-v2 align-center" id="sms-preview">
-                  <CapImage className="preview-image sms" src={smsMobileAndroid} alt="Preview is being generated"/>
+                  <CapImage
+                    className="preview-image sms"
+                    src={smsMobileAndroid}
+                    alt="Preview is being generated"
+                  />
                   <div className="msg-container sms">
                     <div className={"message-pop sms"}>
-                      {content && content.length && content.map((msg, index) =>
-                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
-                          {msg}
-                        </CapColumn>)
-                  }
+                      {content &&
+                        content.length &&
+                        content.map((msg, index) => (
+                          <CapColumn
+                            key={`"message-pop-content-${index}`}
+                            className="message-pop-item align-left"
+                            style={{ background: "#FFFFFF", color: "#091e42" }}
+                          >
+                            {msg}
+                          </CapColumn>
+                        ))}
                     </div>
                   </div>
                 </div>
-                {!this.props.showCount && <div>
-                  <CapColumn className="character-count-col" span={22}>
-                    {(channel || '').toLowerCase() === 'sms' && <CapHeading type="h3">
-                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-                      {smsDetails.unicode &&
-                        <FormattedMessage {...messages.smsFormatType}/>
-                      }
-                    </CapHeading>}
-                    {smsDetails.optoutUrlPresent && <CapHeading type="h6" className="optout-tag-heading">
-                      <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-                    </CapHeading>}
-                  </CapColumn>
-                </div>}
+                {!this.props.showCount && (
+                  <div>
+                    <CapColumn className="character-count-col" span={22}>
+                      {(channel || "").toLowerCase() === "sms" && (
+                        <CapHeading type="h3">
+                          <FormattedMessage
+                            {...messages.charactersTotal}
+                            values={{
+                              smsCount: smsDetails.parts,
+                              charCount: smsDetails.chars_used,
+                            }}
+                          />
+                          {smsDetails.unicode && (
+                            <FormattedMessage {...messages.smsFormatType} />
+                          )}
+                        </CapHeading>
+                      )}
+                      {smsDetails.optoutUrlPresent && (
+                        <CapHeading type="h6" className="optout-tag-heading">
+                          <FormattedMessage
+                            {...messages.optoutCharactersTotal}
+                            values={{
+                              optoutUrlLength: smsDetails.optouturlLength,
+                            }}
+                          />
+                        </CapHeading>
+                      )}
+                    </CapColumn>
+                  </div>
+                )}
               </div>
-            }
-            {channel && channel.toLowerCase() === 'wechat' ?
-            ( <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={(channel || '').toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
-              <div className="msg-container wechat">
-                <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
+            )}
+            {channel && channel.toLowerCase() === "wechat" ? (
+              <div className="shell-v2 align-center" id="sms-preview">
+                <CapImage
+                  className="preview-image"
+                  src={
+                    (channel || "").toLowerCase() === "wechat"
+                      ? wechatBodyNew
+                      : smsMobileAndroid
+                  }
+                  alt="Preview is being generated"
+                />
+                <div className="msg-container wechat">
+                  <div
+                    className="message-pop align-left"
+                    style={{
+                      background: `${
+                        this.props.channel.toLowerCase() === "wechat"
+                          ? "#ffffff"
+                          : "#3F51B5"
+                      }`,
+                      color: `${
+                        this.props.channel.toLowerCase() === "wechat"
+                          ? "#333333"
+                          : "#ffffff"
+                      }`,
+                    }}
+                  >
+                    {content}
+                  </div>
                 </div>
               </div>
-            </div>
-          ) : ''
-        }
-            { channel && (channel.toLowerCase() === 'mobilepush') &&
-            (<div className="shell-v2 align-center" id="mobilepush-preview">
-              <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
-                <div className={`${this.props.device === 'ios' ? 'iphone' : this.props.device}-push-message-Container`}>
-                  {this.props.device === "android" ?
-                    <div className="message-pop align-left">
-                      <div className="app-name">
-                        <span className="app-icon"></span> {content.appName ? content.appName : "App name"}
-                      </div>
-                      <div className="title">
-                        {content.header}
-                      </div>
-                      <div className="body-text">
-                        {content.bodyText}
-                      </div>
-                      {content.bodyImage && <div className="body-image">
-                        <CapImage src={content.bodyImage} alt="" />
-                      </div>}
-                      {content.actions.filter((action) => action.label).length ?
-                        <div className="actions">
-                          {_.map(content.actions, (action) => !!action.label &&
-                            <span className="action" key={`action-${action.label}`}>{action.label && action.label.toUpperCase()}</span>)}
-                        </div> : ''
-                      }
-                    </div>
-                    :
-                    <div className="message-pop align-left">
-                      <div className="app-name">
-                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
-                      </div>
-                      {content.bodyImage && <div className="body-image">
-                        <CapImage src={content.bodyImage} alt=""/>
-                      </div>}
-                      <div className="title">
-                        {content.header}
+            ) : (
+              ""
+            )}
+            {channel && channel.toLowerCase() === "mobilepush" && (
+              <div className="shell-v2 align-center" id="mobilepush-preview">
+                <CapImage
+                  className="preview-image"
+                  src={
+                    this.props.device === "android"
+                      ? androidPushMessagePhone
+                      : iPhonePushMessagePhone
+                  }
+                  alt={this.props.intl.formatMessage(messages.previewGenerated)}
+                />
+                {(!!content.header ||
+                  !!content.bodyText ||
+                  !!content.bodyImage) && (
+                  <div
+                    className={`${
+                      this.props.device === "ios" ? "iphone" : this.props.device
+                    }-push-message-Container`}
+                  >
+                    {this.props.device === "android" ? (
+                      <div className="message-pop align-left">
+                        <div className="app-name">
+                          <span className="app-icon"></span>{" "}
+                          {content.appName ? content.appName : "App name"}
+                        </div>
+                        <div className="title">{content.header}</div>
+                        <div className="body-text">{content.bodyText}</div>
+                        {content.bodyImage && (
+                          <div className="body-image">
+                            <CapImage src={content.bodyImage} alt="" />
+                          </div>
+                        )}
+                        {content.actions.filter((action) => action.label)
+                          .length ? (
+                          <div className="actions">
+                            {_.map(
+                              content.actions,
+                              (action) =>
+                                !!action.label && (
+                                  <span
+                                    className="action"
+                                    key={`action-${action.label}`}
+                                  >
+                                    {action.label && action.label.toUpperCase()}
+                                  </span>
+                                )
+                            )}
+                          </div>
+                        ) : (
+                          ""
+                        )}
                       </div>
-                      <div className="body-text">
-                        {content.bodyText}
+                    ) : (
+                      <div className="message-pop align-left">
+                        <div className="app-name">
+                          <span className="app-icon"></span>
+                          {content.appName ? content.appName : "App name"}{" "}
+                          <i className="material-icons">
+                            {this.props.intl.formatMessage(messages.close)}
+                          </i>
+                        </div>
+                        {content.bodyImage && (
+                          <div className="body-image">
+                            <CapImage src={content.bodyImage} alt="" />
+                          </div>
+                        )}
+                        <div className="title">{content.header}</div>
+                        <div className="body-text">{content.bodyText}</div>
+                        {content.actions.filter((action) => action.label).length
+                          ? iosActions
+                          : ""}
                       </div>
-                      {content.actions.filter((action) => action.label).length ? iosActions : ''}
-                    </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {channel && channel.toLowerCase() === "line" ? (
+              <div className="shell-v2 align-center" id="sms-preview">
+                <CapImage
+                  className="preview-image"
+                  src={
+                    hasJPLocaleHideFeatureEnabled
+                      ? lineMobileAndroidJapaneseImg
+                      : lineMobileAndroidDefaultImg
                   }
-                </div>
-              }
-            </div>
-          )
-        }
-            {
-          channel && channel.toLowerCase() === 'line' ? (
-            <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={hasJPLocaleHideFeatureEnabled ? lineMobileAndroidJapaneseImg : lineMobileAndroidDefaultImg} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div
-                className="msg-container line-preview"
-                style={{
-                  maxHeight: 330,
-                  overflow: 'auto',
-                  flexDirection: 'column',
-                  marginLeft: 40,
-                  left: !this.props.showCount && '200px',
-                }}
-              >
+                  alt={this.props.intl.formatMessage(messages.previewGenerated)}
+                />
                 <div
-                  className="sms-icon"
+                  className="msg-container line-preview"
                   style={{
-                    left: 0,
-                    top: 8,
-                    borderRadius: '50%',
-                    width: 20,
-                    height: 20,
-                    background: CAP_COLOR_03,
-                    paddingRight: 5,
+                    maxHeight: 330,
+                    overflow: "auto",
+                    flexDirection: "column",
+                    marginLeft: 40,
+                    left: !this.props.showCount && "200px",
                   }}
                 >
-                  {this.props.LineAccountName}
-                </div>
-                <>
-                  {
-                    content.map((item) => {
+                  <div
+                    className="sms-icon"
+                    style={{
+                      left: 0,
+                      top: 8,
+                      borderRadius: "50%",
+                      width: 20,
+                      height: 20,
+                      background: CAP_COLOR_03,
+                      paddingRight: 5,
+                    }}
+                  >
+                    {this.props.LineAccountName}
+                  </div>
+                  <>
+                    {content.map((item) => {
                       const {
                         type,
                         messageContent,
@@ -573,12 +718,12 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         background: CAP_WHITE,
                         color: FONT_COLOR_01,
                         borderRadius: 8,
-                        position: 'static',
-                        margin: '6px 0 20px 28px',
-                        height: 'auto',
-                        minHeight: 'auto',
-                        overflow: 'initial',
-                        maxHeight: 'initial',
+                        position: "static",
+                        margin: "6px 0 20px 28px",
+                        height: "auto",
+                        minHeight: "auto",
+                        overflow: "initial",
+                        maxHeight: "initial",
                       };
                       if (type === TEXT) {
                         return (
@@ -586,20 +731,22 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                             className="message-pop align-left"
                             style={sectionStyle}
                           >
-                            <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
+                            <p style={{ marginBottom: 5 }}>
+                              {messageContent || ""}
+                            </p>
                           </div>
                         );
                       }
-                      if ((type === IMAGE && previewImageUrl)) {
+                      if (type === IMAGE && previewImageUrl) {
                         return (
                           <div
                             className="message-pop align-left"
                             style={{
                               ...sectionStyle,
                               minHeight: 184,
-                              display: 'flex',
-                              justifyContent: 'center',
-                              alignItems: 'center',
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
                             }}
                           >
                             <CapImage
@@ -607,7 +754,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                               alt="brand-name"
                               rest={{
                                 style: {
-                                  maxWidth: '100%',
+                                  maxWidth: "100%",
                                   marginBottom: 5,
                                 },
                               }}
@@ -616,11 +763,19 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         );
                       }
                       if (type === VIDEO) {
-                        return getVideoContent({ video, actionUrl, sectionStyle });
+                        return getVideoContent({
+                          video,
+                          actionUrl,
+                          sectionStyle,
+                        });
                       }
-                      if ((type === IMAGE_MAP && baseUrl)) {
+                      if (type === IMAGE_MAP && baseUrl) {
                         if (video) {
-                          return getVideoContent({ video, actionUrl, sectionStyle });
+                          return getVideoContent({
+                            video,
+                            actionUrl,
+                            sectionStyle,
+                          });
                         }
                         return (
                           <div
@@ -628,17 +783,19 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                             style={{
                               ...sectionStyle,
                               minHeight: 184,
-                              display: 'flex',
-                              justifyContent: 'center',
-                              alignItems: 'center',
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
                             }}
                           >
                             <CapImage
-                              src={baseUrl ? `${baseUrl}/1040` : lineImgPlaceholder}
+                              src={
+                                baseUrl ? `${baseUrl}/1040` : lineImgPlaceholder
+                              }
                               alt="brand-name"
                               rest={{
                                 style: {
-                                  maxWidth: '100%',
+                                  maxWidth: "100%",
                                   marginBottom: 5,
                                 },
                               }}
@@ -652,265 +809,311 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                             className="message-pop align-left"
                             style={{
                               ...sectionStyle,
-                              background: 'transparent',
-                              display: 'flex',
-                              justifyContent: 'center',
-                              alignItems: 'center',
+                              background: "transparent",
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
                             }}
                           >
                             <CapImage
                               src={selectedSticker.stickerUrl}
-                              style={{maxWidth: '100%', marginBottom: 5 }}
+                              style={{ maxWidth: "100%", marginBottom: 5 }}
                               rest={{
                                 style: {
-                                  maxWidth: '100%',
+                                  maxWidth: "100%",
                                   marginBottom: 5,
                                 },
                                 height: 70,
-                                onMouseOut: (e) => (e.currentTarget.src = selectedSticker.stickerUrl),
-                                onMouseOver: (e) => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
+                                onMouseOut: (e) =>
+                                  (e.currentTarget.src =
+                                    selectedSticker.stickerUrl),
+                                onMouseOver: (e) =>
+                                  (e.currentTarget.src =
+                                    selectedSticker.animatedStickerUrl ||
+                                    selectedSticker.stickerUrl),
                               }}
                             />
                           </div>
                         );
                       }
-                      if ((type === IMAGE_CAROUSEL || type === TEMPLATE || type === 'template') && imageCarousel) {
+                      if (
+                        (type === IMAGE_CAROUSEL ||
+                          type === TEMPLATE ||
+                          type === "template") &&
+                        imageCarousel
+                      ) {
                         return (
                           <div
                             style={{
-                              margin: '6px 0 20px 28px',
+                              margin: "6px 0 20px 28px",
                             }}
                           >
-                            <Carousel imageCarousel={imageCarousel}/>
+                            <Carousel imageCarousel={imageCarousel} />
                           </div>
                         );
                       }
                       return null;
-                    })
-                  }
-                </>
+                    })}
+                  </>
+                </div>
+                {renderLineMultiText(content)}
               </div>
-              {renderLineMultiText(content)}
-            </div>
-          ) : ''
-        }
-            {
-          channel && channel.toLowerCase() === VIBER ? (
-            <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
-              <div
-                className="msg-container viber-preview"
-                style={{
-                  maxHeight: 292,
-                  marginLeft: 28,
-                }}
-              >
+            ) : (
+              ""
+            )}
+            {channel && channel.toLowerCase() === VIBER ? (
+              <div className="shell-v2 align-center" id="sms-preview">
+                <CapImage
+                  className="preview-image"
+                  src={viberMobileAndroid}
+                  alt={this.props.intl.formatMessage(messages.previewGenerated)}
+                />
+                <div style={{ position: "absolute", top: "12%", left: "36%" }}>
+                  {viberBrandName}
+                </div>
                 <div
-                  className="sms-icon"
+                  className="msg-container viber-preview"
                   style={{
-                    "width": 20,
-                    "height": 20,
-                    "margin": '0 4px 277px 0',
-                    'border-radius': '4px',
-                    'background-color': CAP_PURPLE01,
-                    'font-size': '12px',
-                    'font-weight': 900,
-                    "color": CAP_WHITE,
+                    maxHeight: 292,
+                    marginLeft: 28,
                   }}
                 >
-                  {viberAccountName}
-                </div>
-                <div
-                  className="message-pop align-left"
-                  style={viberSectionStyle}>
-                  {/* Text Viber preview */}
-                  <p
+                  <div
+                    className="sms-icon"
                     style={{
-                      'font-size': '10px',
-                      "color": CAP_G16,
-                      "margin": '1.5px 6px 1px 7px',
-                    }}>{viberMessageContent || ''}
-                  </p>
-                  {/* Image Viber preview */}
-                  {imageURL && <CapImage
-                    src={imageURL}
-                    alt="brand-name"
-                    rest={{
-                      style: {
-                        maxWidth: '100%',
-                        marginBottom: 5,
-                      },
+                      width: 20,
+                      height: 20,
+                      margin: "0 4px 277px 0",
+                      "border-radius": "4px",
+                      "background-color": CAP_PURPLE01,
+                      "font-size": "12px",
+                      "font-weight": 900,
+                      color: CAP_WHITE,
                     }}
-                    />
-                  }
-                  {/* button viber preview */}
-                  {buttonText && <div
-                    style={{
-                      'border-radius': '16px',
-                      'background-color': CAP_PURPLE01,
-                      "margin-top": '14px',
-                      'text-align': 'center',
-                      "width": '140px',
-                      "height": '20px',
-                      "margin-left": "8px",
-                    }}>
+                  >
+                    {viberAccountName}
+                  </div>
+                  <div
+                    className="message-pop align-left"
+                    style={viberSectionStyle}
+                  >
+                    {/* Text Viber preview */}
                     <p
-                      style={{ 'font-size': '12px',
-                        'font-weight': '500',
-                        "display": '-webkit-box',
-                        '-webkit-line-clamp': '1',
-                        '-webkit-box-orient': 'vertical',
-                        'overflow': 'hidden',
-                        "color": CAP_WHITE }}
+                      style={{
+                        "font-size": "10px",
+                        color: CAP_G16,
+                        margin: "1.5px 6px 1px 7px",
+                      }}
+                    >
+                      {viberMessageContent || ""}
+                    </p>
+                    {/* Image Viber preview */}
+                    {imageURL && (
+                      <CapImage
+                        src={imageURL}
+                        alt="brand-name"
+                        rest={{
+                          style: {
+                            maxWidth: "100%",
+                            marginBottom: 5,
+                          },
+                        }}
+                      />
+                    )}
+                    {/* button viber preview */}
+                    {buttonText && (
+                      <div
+                        style={{
+                          "border-radius": "16px",
+                          "background-color": CAP_PURPLE01,
+                          "margin-top": "14px",
+                          "text-align": "center",
+                          width: "140px",
+                          height: "20px",
+                          "margin-left": "8px",
+                        }}
                       >
-                      {buttonText || ''}</p>
+                        <p
+                          style={{
+                            "font-size": "12px",
+                            "font-weight": "500",
+                            display: "-webkit-box",
+                            "-webkit-line-clamp": "1",
+                            "-webkit-box-orient": "vertical",
+                            overflow: "hidden",
+                            color: CAP_WHITE,
+                          }}
+                        >
+                          {buttonText || ""}
+                        </p>
+                      </div>
+                    )}
+                    <div style={{ paddingBottom: 32 }}></div>
                   </div>
-                  }
-                  <div style={{ paddingBottom: 32}}></div>
                 </div>
-
               </div>
-            </div>
-          ) : ''
-        }
-            {
-              channel?.toUpperCase() === WHATSAPP ? (
-                <>
-                  <div className="shell-v2 align-center">
-                    <CapImage
-                      className="preview-image"
-                      src={whatsappMobileAndroid}
-                      alt={formatMessage(messages.previewGenerated)}
-                    />
-                    <CapLabel className="whatsapp-brand-name">
-                      {whatsappUpdatedAccountName || ''}
-                    </CapLabel>
-                    <div className="msg-container whatsapp-message-container">
-                      <div className="message-pop align-left" style={whatsappSectionStyle}>
-                        <div className="whatsapp-content">
-                          {content?.showUrlPreview && (
-                            renderUrlPreview(content?.metaTagsDetails)
-                          )}
-                          {content?.whatsappImageSrc && (
-                            <CapImage
-                              src={content.whatsappImageSrc}
-                              className="whatsapp-image"
-                              alt={formatMessage(messages.previewGenerated)}
-                            />
-                          )}
-                          {content?.whatsappVideoPreviewImg && (
-                            <CapTooltip
-                              title={formatMessage(messages.videoPreviewTooltip)}
-                            >
-                              <div className="video-preview">
+            ) : (
+              ""
+            )}
+            {channel?.toUpperCase() === WHATSAPP ? (
+              <>
+                <div className="shell-v2 align-center">
+                  <CapImage
+                    className="preview-image"
+                    src={whatsappMobileAndroid}
+                    alt={formatMessage(messages.previewGenerated)}
+                  />
+                  <CapLabel className="whatsapp-brand-name">
+                    {whatsappUpdatedAccountName || ""}
+                  </CapLabel>
+                  <div className="msg-container whatsapp-message-container">
+                    <div
+                      className="message-pop align-left"
+                      style={whatsappSectionStyle}
+                    >
+                      <div className="whatsapp-content">
+                        {content?.showUrlPreview &&
+                          renderUrlPreview(content?.metaTagsDetails)}
+                        {content?.whatsappImageSrc && (
+                          <CapImage
+                            src={content.whatsappImageSrc}
+                            className="whatsapp-image"
+                            alt={formatMessage(messages.previewGenerated)}
+                          />
+                        )}
+                        {content?.whatsappVideoPreviewImg && (
+                          <CapTooltip
+                            title={formatMessage(messages.videoPreviewTooltip)}
+                          >
+                            <div className="video-preview">
+                              <CapImage
+                                src={content.whatsappVideoPreviewImg}
+                                className="whatsapp-image"
+                                alt={formatMessage(messages.previewGenerated)}
+                              />
+                              <div className="icon-position">
                                 <CapImage
-                                  src={content.whatsappVideoPreviewImg}
-                                  className="whatsapp-image"
-                                  alt={formatMessage(messages.previewGenerated)}
+                                  className="video-icon"
+                                  src={videoPlay}
                                 />
-                                <div className="icon-position">
-                                  <CapImage className="video-icon" src={videoPlay} />
-                                </div>
                               </div>
-                            </CapTooltip>
-                          )}
-                          {content?.docPreview && (
-                            <div className="whatsapp-image">
-                              {content?.docPreview}
                             </div>
-                          )}
-                          {content?.templateHeaderPreview || ''}
-                          {content?.templateMsg || ''}
-                          {content?.templateFooterPreview || ''}
-                          {renderWhatsappCtaPreview()}
-                          {renderQuickReplyPreview()}
-                        </div>
+                          </CapTooltip>
+                        )}
+                        {content?.docPreview && (
+                          <div className="whatsapp-image">
+                            {content?.docPreview}
+                          </div>
+                        )}
+                        {content?.templateHeaderPreview || ""}
+                        {content?.templateMsg || ""}
+                        {content?.templateFooterPreview || ""}
+                        {renderWhatsappCtaPreview()}
+                        {renderQuickReplyPreview()}
                       </div>
                     </div>
                   </div>
-                  <CapHeading
-                    type="h3"
-                    style={{ textAlign: 'center' }}
-                    className="margin-t-16"
+                </div>
+                <CapHeading
+                  type="h3"
+                  style={{ textAlign: "center" }}
+                  className="margin-t-16"
+                >
+                  <FormattedMessage
+                    {...messages.whatsappMessageLength}
+                    values={{ length: whatsappUpdatedLen }}
+                  />
+                </CapHeading>
+              </>
+            ) : (
+              ""
+            )}
+            {channel?.toUpperCase() === ZALO && (
+              <CapRow
+                className={`zalo-preview-container ${
+                  templateData?.fullMode
+                    ? "zalo-preview-container-creative"
+                    : "zalo-preview-container-campaign"
+                }`}
+              >
+                <CapRow>
+                  <CapLabel className="preview-head">
+                    {formatMessage(zaloMessage.previewHead)}
+                  </CapLabel>
+                </CapRow>
+                <CapRow>
+                  <CapLabel className="preview-text">
+                    {formatMessage(zaloMessage.previewText)}
+                  </CapLabel>
+                </CapRow>
+                <CapRow>
+                  <CapLabel
+                    data-testid="preview-link-button"
+                    onClick={handlePreview}
+                    className="preview-link"
                   >
-                    <FormattedMessage
-                      {...messages.whatsappMessageLength}
-                      values={{ length: whatsappUpdatedLen }}
-                    />
-                  </CapHeading>
-                </>
-              ) : (
-                ''
-              )
-            }
-            {
-              channel?.toUpperCase() === ZALO && (
-                <CapRow className={`zalo-preview-container ${templateData?.fullMode ? 'zalo-preview-container-creative' : 'zalo-preview-container-campaign'}`}>
-                  <CapRow>
-                    <CapLabel className="preview-head">
-                      {formatMessage(zaloMessage.previewHead)}
-                    </CapLabel>
-                  </CapRow>
-                  <CapRow>
-                    <CapLabel className="preview-text">
-                      {formatMessage(zaloMessage.previewText)}
-                    </CapLabel>
-                  </CapRow>
-                  <CapRow>
-                    <CapLabel
-                      data-testid="preview-link-button"
-                      onClick={handlePreview}
-                      className="preview-link"
-                    >
-                      {formatMessage(zaloMessage.openPreview)}{' '}
-                      <CapIcon type="open-in-new-light"></CapIcon>
-                    </CapLabel>
-                  </CapRow>
+                    {formatMessage(zaloMessage.openPreview)}{" "}
+                    <CapIcon type="open-in-new-light"></CapIcon>
+                  </CapLabel>
                 </CapRow>
-              )
-            }
-            {
-              channel?.toUpperCase() === RCS && (
-                <div className="shell-v2 align-center">
-                  <CapImage
-                    className="preview-image"
-                    src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
-                    alt={formatMessage(messages.previewGenerated)}
-                  />
-                  <div className="msg-container sms">
-                    <div className="message-pop sms">
-                      {rcsImageSrc && (
-                        <CapImage
-                          src={rcsImageSrc}
-                          className="rcs-image"
-                          alt={formatMessage(messages.previewGenerated)}
+              </CapRow>
+            )}
+            {channel?.toUpperCase() === RCS && (
+              <div className="shell-v2 align-center">
+                <CapImage
+                  className="preview-image"
+                  src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
+                  alt={formatMessage(messages.previewGenerated)}
+                />
+                <div className="msg-container sms">
+                  <div className="message-pop sms">
+                    {rcsImageSrc && (
+                      <CapImage
+                        src={rcsImageSrc}
+                        className="rcs-image"
+                        alt={formatMessage(messages.previewGenerated)}
+                      />
+                    )}
+                    {rcsTitle && (
+                      <CapLabel
+                        type="label5"
+                        className="message-pop-item align-left rcs-content"
+                        fontWeight="bold"
+                      >
+                        {rcsTitle}
+                      </CapLabel>
+                    )}
+                    {rcsDesc && (
+                      <CapLabel
+                        type="label5"
+                        className="message-pop-item align-left rcs-content rcs-desc"
+                      >
+                        {rcsDesc}
+                      </CapLabel>
+                    )}
+                    {rcsButtonText && (
+                      <CapLabel
+                        className="message-pop-item align-center rcs-content rcs-button-text"
+                        type="label21"
+                      >
+                        <CapIcon
+                          type="earth"
+                          size="xs"
+                          className="rcs-icon"
+                          svgProps={{ style: { marginRight: "4px" } }}
                         />
-                      )}
-                      {rcsTitle && (
-                        <CapLabel
-                          type="label5"
-                          className="message-pop-item align-left rcs-content"
-                          fontWeight="bold"
-                        >
-                          {rcsTitle}
-                        </CapLabel>
-                      )}
-                      {rcsDesc && (
-                        <CapLabel type="label5" className="message-pop-item align-left rcs-content rcs-desc">
-                          {rcsDesc}
-                        </CapLabel>
-                      )}
-                      {rcsButtonText && (<CapLabel className="message-pop-item align-center rcs-content rcs-button-text" type="label21">
-                        <CapIcon type="earth" size="xs" className="rcs-icon" svgProps={{style: {marginRight: "4px"}}}/>{rcsButtonText}
-                      </CapLabel>)}
-                    </div>
+                        {rcsButtonText}
+                      </CapLabel>
+                    )}
                   </div>
                 </div>
-              )
-            }
+              </div>
+            )}
             {channel && channel.toLowerCase() === FACEBOOK && (
-              <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
+              <div
+                style={{ position: "absolute", left: "80%" }}
+                id="facebook-preview"
+              >
                 <CapFacebookPreview
                   disablePreviewButton={false}
                   selectedAd={content.selectedAd}
@@ -918,16 +1121,98 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   primaryText={content.primaryText}
                   callToAction={content.callToAction}
                   displayLink={content.displayLink}
-                  orgUnitFacebookPageSettingsMap={{pageAccessToken: content.pageAccessToken,
-                    pageId: content.pageId}}
+                  orgUnitFacebookPageSettingsMap={{
+                    pageAccessToken: content.pageAccessToken,
+                    pageId: content.pageId,
+                  }}
                   accountId={content.accountId}
                   accessToken={content.accessToken}
                   defaultGeneratePreview
-              />
+                />
+              </div>
+            )}
+            {channel?.toUpperCase() === INAPP && (
+              <div className="shell-v2 align-center">
+                <CapImage
+                  className="preview-image"
+                  src={getPreviewImage()}
+                  alt={formatMessage(messages.previewGenerated)}
+                />
+                <div className="preview-image">
+                  <div
+                    className={`inapp-message-container-${templateLayoutType}-${device} sms`}
+                  >
+                    <div className="preview-inapp-screen">
+                      {
+                        <CapLabel
+                          type="label15"
+                          className={`align-center inapp-title-${templateLayoutType}-${device} ${
+                            mediaPreview?.inAppImageSrcAndroid
+                              ? ""
+                              : `without-image-title-${templateLayoutType}-android`
+                          } ${
+                            mediaPreview?.inAppImageSrcIos
+                              ? ""
+                              : `without-image-title-${templateLayoutType}-ios`
+                          }`}
+                        >
+                          {templateTitle ? templateTitle : " "}
+                          {/* this ternary is required here for preview */}
+                        </CapLabel>
+                      }
+                      {mediaPreview && (
+                        <CapImage
+                          src={
+                            device === ANDROID
+                              ? mediaPreview?.inAppImageSrcAndroid
+                              : mediaPreview?.inAppImageSrcIos
+                          }
+                          className={`inapp-image-${templateLayoutType}-${device}`}
+                          alt={formatMessage(messages.previewGenerated)}
+                          style={{ width: "100%", height: "100%" }}
+                        />
+                      )}
+                      {
+                        <CapLabel
+                          type="label5"
+                          className={`align-left inapp-content-${templateLayoutType}-${device} ${
+                            mediaPreview?.inAppImageSrcAndroid
+                              ? ""
+                              : `without-image-content-${templateLayoutType}-android`
+                          } ${
+                            mediaPreview?.inAppImageSrcIos
+                              ? ""
+                              : `without-image-content-${templateLayoutType}-ios`
+                          }`}
+                        >
+                          {templateMsg ? templateMsg : " "}
+                          {/* this ternary is required here for preview */}
+                        </CapLabel>
+                      }
+                      {ctaData &&
+                        !isEmpty(ctaData) &&
+                        ctaData[0]?.text !== "" && (
+                          <CapButton
+                            type="primary"
+                            className={`inapp-button-${templateLayoutType}-${device} ${
+                              mediaPreview?.inAppImageSrcAndroid
+                                ? ""
+                                : `without-image-button-${templateLayoutType}-android`
+                            } ${
+                              mediaPreview?.inAppImageSrcIos
+                                ? ""
+                                : `without-image-button-${templateLayoutType}-ios`
+                            }`}
+                          >
+                            {ctaData[0]?.text}
+                          </CapButton>
+                        )}
+                    </div>
+                  </div>
+                </div>
               </div>
-        )}
+            )}
           </div>
-
         </CapColumn>
       </CapRow>
     );