@capillarytech/creatives-library 7.17.92 → 7.17.93

package/v2Components/TemplatePreview/index.js

@@ -19,20 +19,11 @@ import {
   WECHAT,
   WHATSAPP,
   RCS,
-  ZALO,
-  INAPP,
+  ZALO
 } 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';
@@ -58,13 +49,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) => {
@@ -173,20 +164,17 @@ 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, inAppPreviewContent, messageContent: viberMessageContent } = content || {};
+    const { buttonText, imageURL, rcsPreviewContent, 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) {
@@ -392,316 +380,183 @@ 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}
-                  </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}
                 </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>
+          ) : ''
+        }
+            { 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="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 className="title">
+                        {content.header}
                       </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 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}
+                      </div>
+                      <div className="body-text">
+                        {content.bodyText}
+                      </div>
+                      {content.actions.filter((action) => action.label).length ? iosActions : ''}
+                    </div>
                   }
-                  alt={this.props.intl.formatMessage(messages.previewGenerated)}
-                />
+                </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',
+                }}
+              >
                 <div
-                  className="msg-container line-preview"
+                  className="sms-icon"
                   style={{
-                    maxHeight: 330,
-                    overflow: "auto",
-                    flexDirection: "column",
-                    marginLeft: 40,
-                    left: !this.props.showCount && "200px",
+                    left: 0,
+                    top: 8,
+                    borderRadius: '50%',
+                    width: 20,
+                    height: 20,
+                    background: CAP_COLOR_03,
+                    paddingRight: 5,
                   }}
                 >
-                  <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) => {
+                  {this.props.LineAccountName}
+                </div>
+                <>
+                  {
+                    content.map((item) => {
                       const {
                         type,
                         messageContent,
@@ -718,12 +573,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 (
@@ -731,22 +586,20 @@ 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
@@ -754,7 +607,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                               alt="brand-name"
                               rest={{
                                 style: {
-                                  maxWidth: "100%",
+                                  maxWidth: '100%',
                                   marginBottom: 5,
                                 },
                               }}
@@ -763,19 +616,11 @@ 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
@@ -783,19 +628,17 @@ 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,
                                 },
                               }}
@@ -809,311 +652,265 @@ 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>
-            ) : (
-              ""
-            )}
-            {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>
+              {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,
+                }}
+              >
                 <div
-                  className="msg-container viber-preview"
+                  className="sms-icon"
                   style={{
-                    maxHeight: 292,
-                    marginLeft: 28,
+                    "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,
                   }}
                 >
-                  <div
-                    className="sms-icon"
+                  {viberAccountName}
+                </div>
+                <div
+                  className="message-pop align-left"
+                  style={viberSectionStyle}>
+                  {/* Text Viber preview */}
+                  <p
                     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,
+                      '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,
+                      },
                     }}
-                  >
-                    {viberAccountName}
-                  </div>
-                  <div
-                    className="message-pop align-left"
-                    style={viberSectionStyle}
-                  >
-                    {/* Text Viber preview */}
+                    />
+                  }
+                  {/* 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",
+                    }}>
                     <p
-                      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",
-                        }}
+                      style={{ 'font-size': '12px',
+                        'font-weight': '500',
+                        "display": '-webkit-box',
+                        '-webkit-line-clamp': '1',
+                        '-webkit-box-orient': 'vertical',
+                        'overflow': 'hidden',
+                        "color": CAP_WHITE }}
                       >
-                        <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>
+                      {buttonText || ''}</p>
                   </div>
+                  }
+                  <div style={{ paddingBottom: 32}}></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">
-                              <CapImage
-                                src={content.whatsappVideoPreviewImg}
-                                className="whatsapp-image"
-                                alt={formatMessage(messages.previewGenerated)}
-                              />
-                              <div className="icon-position">
+            </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">
                                 <CapImage
-                                  className="video-icon"
-                                  src={videoPlay}
+                                  src={content.whatsappVideoPreviewImg}
+                                  className="whatsapp-image"
+                                  alt={formatMessage(messages.previewGenerated)}
                                 />
+                                <div className="icon-position">
+                                  <CapImage className="video-icon" src={videoPlay} />
+                                </div>
                               </div>
+                            </CapTooltip>
+                          )}
+                          {content?.docPreview && (
+                            <div className="whatsapp-image">
+                              {content?.docPreview}
                             </div>
-                          </CapTooltip>
-                        )}
-                        {content?.docPreview && (
-                          <div className="whatsapp-image">
-                            {content?.docPreview}
-                          </div>
-                        )}
-                        {content?.templateHeaderPreview || ""}
-                        {content?.templateMsg || ""}
-                        {content?.templateFooterPreview || ""}
-                        {renderWhatsappCtaPreview()}
-                        {renderQuickReplyPreview()}
+                          )}
+                          {content?.templateHeaderPreview || ''}
+                          {content?.templateMsg || ''}
+                          {content?.templateFooterPreview || ''}
+                          {renderWhatsappCtaPreview()}
+                          {renderQuickReplyPreview()}
+                        </div>
                       </div>
                     </div>
                   </div>
-                </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"
+                  <CapHeading
+                    type="h3"
+                    style={{ textAlign: 'center' }}
+                    className="margin-t-16"
                   >
-                    {formatMessage(zaloMessage.openPreview)}{" "}
-                    <CapIcon type="open-in-new-light"></CapIcon>
-                  </CapLabel>
+                    <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>
                 </CapRow>
-              </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" } }}
+              )
+            }
+            {
+              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)}
                         />
-                        {rcsButtonText}
-                      </CapLabel>
-                    )}
+                      )}
+                      {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>
                   </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}
@@ -1121,98 +918,16 @@ 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>
     );