@capillarytech/creatives-library 8.0.126 → 8.0.127-alpha.1

package/v2Containers/CreativesContainer/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Bugsnag from "@bugsnag/js";
+import { CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64 } from '@capillarytech/cap-ui-library/styled/variables';
+
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -14,18 +15,18 @@ import {
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import styled from 'styled-components';
 import { GA } from '@capillarytech/cap-ui-utils';
+import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 
 import * as actions from './actions';
 import {
   selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates,
 } from '../Templates/selectors';
-import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
-import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
+import SlideBoxContent from './SlideBoxContent';
 import * as constants from './constants';
 import * as commonUtil from '../../utils/common';
 import { gtmPush } from '../../utils/gtmTrackers';
@@ -44,20 +45,16 @@ import {
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
-import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL } from '../Whatsapp/constants';
-
+import {
+  WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL,
+} from '../Whatsapp/constants';
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
-import { IOS } from '../InApp/constants';
+
 import injectReducer from '../../utils/injectReducer';
 import injectSaga from '../../utils/injectSaga';
 import creativesContainerReducer from './reducer';
-import { compose } from 'redux';
-import { capSagaForFetchSchemaForEntity,capSagaLiquidEntity } from '../Cap/sagas';
+import { capSagaForFetchSchemaForEntity, capSagaLiquidEntity } from '../Cap/sagas';
 import { v2TemplateSagaWatchGetDefaultBeeTemplates } from '../Templates/sagas';
-import {
-  CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 
@@ -83,11 +80,14 @@ const SlideBoxWrapper = styled.div`
 export class Creatives extends React.Component {
   constructor(props) {
     super(props);
+    
+    const initialSlidBoxContent = this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode });
+
     this.state = {
       isLoadingContent: true,
       templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
       showSlideBox: true,
-      slidBoxContent: this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode }),
+      slidBoxContent: initialSlidBoxContent,
       templateData: this.getTemplateData(props.templateData),
       templateNameExists: props.creativesMode === 'edit', // if edit mode templateNameExists will be true, and false in create flow.
       currentChannel: this.props.channel || 'sms',
@@ -154,28 +154,26 @@ export class Creatives extends React.Component {
       const userId = parseInt(template.updatedBy, 10);
       templateData.updatedByName = commonUtil.getUserNameById(userId, usersList);
       this.setState({ slidBoxContent: constants.PREVIEW, templateData });
+    } else if (get(template, 'versions.base.content.zalo.previewUrl')) {
+      commonUtil.handlePreviewInNewTab(
+        template.versions.base.content.zalo.previewUrl
+      );
     } else {
-      if (get(template, 'versions.base.content.zalo.previewUrl')) {
-        commonUtil.handlePreviewInNewTab(
-          template.versions.base.content.zalo.previewUrl
-        );
-      } else {
-        const {
-          name = "",
-          sourceAccountIdentifier = "",
-          configs: { token = "" } = {},
-          hostName = ""
-        } = get(this.props, "Templates.selectedZaloAccount", {});
-        this.props.zaloActions.getTemplateInfoById({
-          username: name,
-          oa_id: sourceAccountIdentifier,
-          token,
-          host: hostName || this.props?.hostName || this.props.Templates?.senderDetails?.hostName,
-          id: template?._id,
-          preview: true,
-          actionCallback: this.actionCallback,
-        });
-      }
+      const {
+        name = "",
+        sourceAccountIdentifier = "",
+        configs: { token = "" } = {},
+        hostName = "",
+      } = get(this.props, "Templates.selectedZaloAccount", {});
+      this.props.zaloActions.getTemplateInfoById({
+        username: name,
+        oa_id: sourceAccountIdentifier,
+        token,
+        host: hostName || this.props?.hostName || this.props.Templates?.senderDetails?.hostName,
+        id: template?._id,
+        preview: true,
+        actionCallback: this.actionCallback,
+      });
     }
   };
 
@@ -244,38 +242,40 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
-  mapCarouselDataToCreatives = (cards) => {
-    return cards.map((card) => {
-      const { cardVarMapped, bodyTemplate, media, buttons, mediaType } = card || {};
-      const buttonData = buttons?.map((button) => {
-        const { type, text, phoneNumber, url, dynamicUrlPayload } = button || {};
-        const buttonObj = { type, text };
-        if (type === PHONE_NUMBER) {
-          buttonObj.phone_number = phoneNumber;
-        }
-        if (type === URL) {
-          buttonObj.url = url;
-          if (dynamicUrlPayload) {
-            buttonObj.urlType = DYNAMIC_URL;
-          }
+  mapCarouselDataToCreatives = (cards) => cards.map((card) => {
+    const {
+      cardVarMapped, bodyTemplate, media, buttons, mediaType,
+    } = card || {};
+    const buttonData = buttons?.map((button) => {
+      const {
+        type, text, phoneNumber, url, dynamicUrlPayload,
+      } = button || {};
+      const buttonObj = { type, text };
+      if (type === PHONE_NUMBER) {
+        buttonObj.phone_number = phoneNumber;
+      }
+      if (type === URL) {
+        buttonObj.url = url;
+        if (dynamicUrlPayload) {
+          buttonObj.urlType = DYNAMIC_URL;
         }
-        return buttonObj;
-      });
-      return {
-        bodyText: bodyTemplate,
-        varMap: cardVarMapped,
-        ...(mediaType === IMAGE && {
-          imageUrl: media?.url,
-        }),
-        ...(mediaType === VIDEO && {
-          videoUrl: media?.url,
-          videoPreviewImg: media?.previewUrl,
-        }),
-        buttons: buttonData,
-        mediaType: mediaType?.toLowerCase(),
-      };
+      }
+      return buttonObj;
     });
-  }
+    return {
+      bodyText: bodyTemplate,
+      varMap: cardVarMapped,
+      ...(mediaType === IMAGE && {
+        imageUrl: media?.url,
+      }),
+      ...(mediaType === VIDEO && {
+        videoUrl: media?.url,
+        videoPreviewImg: media?.previewUrl,
+      }),
+      buttons: buttonData,
+      mediaType: mediaType?.toLowerCase(),
+    };
+  })
 
   getTemplateData = (templateData) => { //from consumers to creatives
     const { isFullMode, messageDetails = {}, smsRegister } = this.props;
@@ -355,13 +355,33 @@ export class Creatives extends React.Component {
         }
         case constants.MOBILE_PUSH: {
           const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
+          const androidCarouselMedia = get(templateData, 'androidContent.expandableDetails.media', []);
+          const iosCarouselMedia = get(templateData, 'iosContent.expandableDetails.media', []);
+          const androidContent = { ...(templateData?.androidContent || {}) };
+          const iosContent = { ...(templateData?.iosContent || {}) };
+          if (androidCarouselMedia?.length) {
+            androidContent.expandableDetails.carouselData = androidCarouselMedia.map((media) => ({
+              mediaType: media.type,
+              imageUrl: media.url,
+              buttons: [],
+              videoSrc: '',
+            }));
+          }
+          if (iosCarouselMedia?.length) {
+            iosContent.expandableDetails.carouselData = iosCarouselMedia.map((media) => ({
+              mediaType: media.type,
+              imageUrl: media.url,
+              buttons: [],
+              videoSrc: '',
+            }));
+          }
           creativesTemplateData = {
             type: channel,
             name: templateData.messageSubject,
             versions: {
               base: {
-                ANDROID: templateData.androidContent,
-                IOS: templateData.iosContent,
+                ANDROID: androidContent,
+                IOS: iosContent,
               },
             },
             definition: { accountId: templateData.accountId, mode: mode.toLowerCase() },
@@ -523,7 +543,9 @@ export class Creatives extends React.Component {
             } = {},
           } = templateData;
           const mediaParams = {};
-          const { url = '', previewUrl = '', docParams = {}, footer = '', headerVarMapped = {}, headerTemplate = '' } = whatsappMedia || {};
+          const {
+            url = '', previewUrl = '', docParams = {}, footer = '', headerVarMapped = {}, headerTemplate = '',
+          } = whatsappMedia || {};
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               mediaParams.imageUrl = url;
@@ -543,7 +565,7 @@ export class Creatives extends React.Component {
               break;
           }
           const modifiedButtons = cloneDeep(buttons)?.map((btn) => {
-            if (btn.type === 'PHONE_NUMBER') {
+            if (btn.type === PHONE_NUMBER) {
               btn.phone_number = btn.phoneNumber;
               delete btn.phoneNumber;
               return btn;
@@ -636,46 +658,61 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
-  getCarouselMappedData = (carouselData = []) => {
-    return carouselData.map((carousel) => {
-      const { bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate } = carousel || {};
-      const buttonData = buttons.map((button, index) => {
-        const { type, text, phone_number, urlType, url } = button || {};
-        const buttonObj = {
-          type,
-          text,
-          index,
-        };
-        if (type === PHONE_NUMBER) {
-          buttonObj.phoneNumber = phone_number;
-        }
-        if (type === URL) {
-          buttonObj.url = url;
-          if (urlType === DYNAMIC_URL) {
-            const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
-            buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
-          }
-        }
-        return buttonObj;
-      });
-      return {
-        body: bodyText,
-        cardVarMapped,
-        bodyTemplate,
-        media: {
-          ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
-            url: imageUrl,
-          }),
-          ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
-            url: videoUrl,
-            previewUrl: videoPreviewImg,
-          }),
-        },
-        buttons: buttonData,
-        mediaType: mediaType?.toUpperCase(),
+  getCarouselMappedData = (carouselData = []) => carouselData.map((carousel) => {
+    const {
+      bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+    } = carousel || {};
+    const buttonData = buttons.map((button, index) => {
+      const {
+        type, text, phone_number, urlType, url,
+      } = button || {};
+      const buttonObj = {
+        type,
+        text,
+        index,
       };
+      if (type === PHONE_NUMBER) {
+        buttonObj.phoneNumber = phone_number;
+      }
+      if (type === URL) {
+        buttonObj.url = url;
+        if (urlType === DYNAMIC_URL) {
+          const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+          buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+        }
+      }
+      return buttonObj;
     });
-  };
+    return {
+      body: bodyText,
+      cardVarMapped,
+      bodyTemplate,
+      media: {
+        ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+          url: imageUrl,
+        }),
+        ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+          url: videoUrl,
+          previewUrl: videoPreviewImg,
+        }),
+      },
+      buttons: buttonData,
+      mediaType: mediaType?.toUpperCase(),
+    };
+  });
+
+  getMobilePushCarouselData = (expandableDetails = []) => {
+    const newExpandableDetails = {...expandableDetails};
+    newExpandableDetails.style = expandableDetails.style || 'MANUAL_CAROUSEL';
+    newExpandableDetails.message = expandableDetails.message || '';
+    newExpandableDetails.ctas = expandableDetails.ctas || [];
+    newExpandableDetails.media = expandableDetails.carouselData.map((carousel) => ({
+      url: carousel.imageUrl,
+      type: carousel?.mediaType?.toUpperCase(),
+      text: '',
+    }));
+    return newExpandableDetails;
+  }
 
   getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
@@ -759,6 +796,9 @@ export class Creatives extends React.Component {
             if (channel !== constants.MOBILE_PUSH) {
               androidContent.custom = custom;
             }
+            if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
+              androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
+            }
             templateData.androidContent = androidContent;
             templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = constants.ANDROID;
@@ -778,6 +818,9 @@ export class Creatives extends React.Component {
             if (channel !== constants.MOBILE_PUSH) {
               iosContent.custom = custom;
             }
+            if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
+              iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
+            }
             templateData.iosContent = iosContent;
             templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = constants.IOS;
@@ -947,7 +990,7 @@ export class Creatives extends React.Component {
           fBContent.forEach((obj) => {
             const data = cloneDeep(obj);
             const {
-              subType, linkDesc, imgSrc, webSiteLink, video
+              subType, linkDesc, imgSrc, webSiteLink, video,
             } = obj;
             delete data.type;
             delete data.linkDesc;
@@ -985,7 +1028,7 @@ export class Creatives extends React.Component {
         break;
       case constants.RCS: {
         if (template.value) {
-          const { name = "", versions = {}, type = "" } = {
+          const { name = "", versions = {} } = {
           } = template.value || {};
           const {
             cardContent = [],
@@ -1113,7 +1156,6 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
-
     if (template.validity) {
       this.setState(
         {
@@ -1131,7 +1173,7 @@ export class Creatives extends React.Component {
       );
     }
   }
-  
+
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
@@ -1222,13 +1264,16 @@ export class Creatives extends React.Component {
 
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
-    const { slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, inAppCreateMode, weChatTemplateType, templateData } = this.state;
+    const {
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
+    } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showFooter = false;
     showFooter = isFullMode && slidBoxContent === "preview";
     const isMobilepush = channel === constants.MOBILE_PUSH;
-    const isInApp = channel === constants.INAPP;
+
+
     if (!isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
@@ -1250,15 +1295,15 @@ export class Creatives extends React.Component {
     if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection'))) {
       showFooter = true;
     }
-    if (channel === constants.MOBILE_PUSH &&
-      ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
-        || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
+    if (channel === constants.MOBILE_PUSH
+      && ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
+        || (slidBoxContent === 'editTemplate' && (currentStep === 'modeSelection' || isFullMode))) &&
       templateNameExists) {
       showFooter = true;
     }
 
-    if (channel === constants.WECHAT &&
-      ((slidBoxContent === 'createTemplate' && !isEmpty(weChatTemplateType))
+    if (channel === constants.WECHAT
+      && ((slidBoxContent === 'createTemplate' && !isEmpty(weChatTemplateType))
         || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection'))) {
       showFooter = true;
     }
@@ -1267,9 +1312,9 @@ export class Creatives extends React.Component {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
         ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
-      } else if (slidBoxContent === "editTemplate" &&
-        ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel) &&
-          currentStep === 'modeSelection')) {
+      } else if (slidBoxContent === "editTemplate"
+        && ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel)
+          && currentStep === 'modeSelection')) {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }
@@ -1278,6 +1323,8 @@ export class Creatives extends React.Component {
     if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
+
+
     return showFooter;
   }
 
@@ -1290,13 +1337,21 @@ export class Creatives extends React.Component {
     let showDone = false;
     const channelName = !isFullMode && templateData ? templateData.type : currentChannel;
     const channel = channelName?.toUpperCase();
+
+
     if (channel === constants.EMAIL || channel === constants.SMS) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
     } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
+
+      // Additional condition for MobilePush edit in full mode
+      if (channel === constants.MOBILE_PUSH && slidBoxContent === "editTemplate" && isFullMode) {
+        showDone = true;
+      }
     }
 
+
     return showDone;
   }
 
@@ -1356,7 +1411,9 @@ export class Creatives extends React.Component {
   }
 
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
-    const { slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType } = this.state;
+    const {
+      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType,
+    } = this.state;
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
     const channel = currentChannel.toUpperCase();
@@ -1439,17 +1496,16 @@ export class Creatives extends React.Component {
       loyaltyMetaData = {},
     } = this.props;
     const mapTemplateCreate =
-      slidBoxContent === "createTemplate" &&
-      weChatTemplateType === MAP_TEMPLATE &&
-      templateStep !== "modeSelection";
-    const slideBoxWrapperMargin =
-      (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
-        ? CAP_SPACE_64
-        : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
-          ? CAP_SPACE_56
-          : get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
-            ? CAP_SPACE_32
-            : 0;
+      slidBoxContent === "createTemplate"
+      && weChatTemplateType === MAP_TEMPLATE
+      && templateStep !== "modeSelection";
+    const slideBoxWrapperMargin = (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
+      ? CAP_SPACE_64
+      : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
+        ? CAP_SPACE_56
+        : get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
+          ? CAP_SPACE_32
+          : 0;
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
       <SlideBoxWrapper slideBoxWrapperMargin={slideBoxWrapperMargin} className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
@@ -1577,7 +1633,6 @@ export class Creatives extends React.Component {
           ) : isLiquidValidationError && (
             <CapRow className="template-footer-width">
               {(() => {
-
                 const errorsToShow = get(liquidErrorMessage, constants.LIQUID_ERROR_MSG, []);
                 const standardErrorsToShow = get(liquidErrorMessage, constants.STANDARD_ERROR_MSG, []);
                 return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow}} />;
@@ -1647,7 +1702,7 @@ function mapDispatchToProps(dispatch) {
 const withConnect = connect(mapStatesToProps, mapDispatchToProps);
 const withReducer = injectReducer({ key: 'creativesContainer', reducer: creativesContainerReducer });
 const withSaga = injectSaga({ key: 'cap', saga: capSagaForFetchSchemaForEntity });
-const withLiquidSaga = injectSaga({ key: 'liquid', saga: capSagaLiquidEntity , mode: DAEMON });
+const withLiquidSaga = injectSaga({ key: 'liquid', saga: capSagaLiquidEntity, mode: DAEMON });
 const withDefaultTempSaga = injectSaga({ key: 'creativesContainer', saga: v2TemplateSagaWatchGetDefaultBeeTemplates });
 
-export default compose(withSaga,withLiquidSaga, withDefaultTempSaga, withReducer, withConnect)(injectIntl(Creatives));
+export default compose(withSaga, withLiquidSaga, withDefaultTempSaga, withReducer, withConnect)(injectIntl(Creatives));

package/v2Containers/Email/index.js

@@ -820,6 +820,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // return response;
   }
 
+  getTemplateContent = () => {
+    const { formData, currentTab } = this.state;
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    
+    if (currentTabData && activeTab && currentTabData[activeTab]) {
+      return currentTabData[activeTab]['template-content'] || '';
+    }
+    
+    return '';
+  }
+
   setFormValidity = (isFormValid) => {
     this.setState({isFormValid});
   }
@@ -2661,7 +2673,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         formData,
       };
     }, () => {
-      this.setState({
+      !this.props.showTestAndPreviewSlidebox && this.setState({
         startValidation: true,
       });
     });
@@ -2774,7 +2786,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           show={showTestAndPreviewSlidebox}
           onClose={handleCloseTestAndPreview}
           formData={this.state.formData}
-          content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab] ? this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab][`template-content`] : ''}
+          beeInstance={this.beeInstance}
+          content={this.getTemplateContent()}
           currentChannel={EMAIL}
         />
       </div>

package/v2Containers/InApp/constants.js

@@ -49,6 +49,7 @@ export const INAPP_BUTTON_TYPES = {
 };
 
 export const DEEP_LINK = 'DEEP_LINK';
+export const EXTERNAL_LINK = 'EXTERNAL_LINK';
 
 export const INITIAL_CTA_DATA = [
   {

package/v2Containers/InApp/index.js

@@ -46,10 +46,12 @@ import {
   INITIAL_CTA_DATA,
   IOS,
   LAYOUT_RADIO_OPTIONS,
-  AI_CONTENT_BOT_DISABLED
+  AI_CONTENT_BOT_DISABLED,
 } from "./constants";
 import { INAPP, SMS } from "../CreativesContainer/constants";
-import { ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY } from "../Whatsapp/constants";
+import {
+  ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
+} from "../Whatsapp/constants";
 import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
@@ -297,14 +299,13 @@ export const InApp = (props) => {
 
   const templateDescErrorHandler = (value) => {
     let errorMessage = false;
-    const { unsupportedTags, isBraceError } =
-      validateTags({
-        content: value,
-        tagsParam: tags,
-        injectedTagsParams: injectedTags,
-        location,
-        tagModule: getDefaultTags,
-      }) || {};
+    const { unsupportedTags, isBraceError } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+    }) || {};
     if (value === '' && INAPP_MEDIA_TYPES.NONE) {
       errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
     } else if (unsupportedTags?.length > 0) {
@@ -472,7 +473,7 @@ export const InApp = (props) => {
         placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
         value={templateName}
         size="default"
-          />
+      />
     </CapRow>
   );
   //create methods end
@@ -582,8 +583,7 @@ export const InApp = (props) => {
     return false;
   };
 
-  const getCtaPayload = (type) =>
-  (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
+  const getCtaPayload = (type) => (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
     const { text, urlType, url } = cta;
     return {
       type: urlType,

package/v2Containers/MobilePush/Create/index.js

@@ -239,6 +239,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onLinkTypeChange = (eventTriggered, formData, field) => {
     let schema = cloneDeep(this.state.schema);
     const inputFields = get(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
+    
     forEach(inputFields, (inputField, fieldIndex) => {
       if (inputField) {
         forEach(inputField.cols, (col) => {