@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Containers/CreativesContainer/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64 } from '@capillarytech/cap-ui-library/styled/variables';
-
+import Bugsnag from "@bugsnag/js";
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -15,15 +14,18 @@ import {
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import { bindActionCreators, compose } from 'redux';
+import { bindActionCreators } 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 * as constants from './constants';
 import * as commonUtil from '../../utils/common';
 import { gtmPush } from '../../utils/gtmTrackers';
@@ -42,19 +44,20 @@ 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 SlideBoxHeader from './SlideBoxHeader';
-import SlideBoxFooter from './SlideBoxFooter';
-import SlideBoxContent from './SlideBoxContent';
-import { updateImagesInHtml } from '../../utils/cdnTransformation';
+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 { capSagaForFetchSchemaForEntity, capSagaLiquidEntity } from '../Cap/sagas';
+import { compose } from 'redux';
+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';
 
@@ -80,14 +83,11 @@ 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: initialSlidBoxContent,
+      slidBoxContent: this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode }),
       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',
@@ -100,6 +100,8 @@ export class Creatives extends React.Component {
         LIQUID_ERROR_MSG: [],
       },
       activeFormBuilderTab: constants.ANDROID,
+      // NEW: Test and Preview feature state
+      showTestAndPreviewSlidebox: false,
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -152,26 +154,28 @@ 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 {
-      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,
-      });
+      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,
+        });
+      }
     }
   };
 
@@ -240,40 +244,38 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
-  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;
+  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;
         }
-      }
-      return buttonObj;
+        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 {
-      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;
@@ -353,33 +355,13 @@ 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: androidContent,
-                IOS: iosContent,
+                ANDROID: templateData.androidContent,
+                IOS: templateData.iosContent,
               },
             },
             definition: { accountId: templateData.accountId, mode: mode.toLowerCase() },
@@ -541,9 +523,7 @@ 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;
@@ -563,7 +543,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;
@@ -656,61 +636,46 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
-  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] : '';
+  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;
         }
-      }
-      return buttonObj;
+        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(),
+      };
     });
-    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 };
@@ -794,9 +759,6 @@ 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;
@@ -816,9 +778,6 @@ 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;
@@ -988,7 +947,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;
@@ -1026,7 +985,7 @@ export class Creatives extends React.Component {
         break;
       case constants.RCS: {
         if (template.value) {
-          const { name = "", versions = {} } = {
+          const { name = "", versions = {}, type = "" } = {
           } = template.value || {};
           const {
             cardContent = [],
@@ -1154,6 +1113,7 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
+
     if (template.validity) {
       this.setState(
         {
@@ -1171,7 +1131,7 @@ export class Creatives extends React.Component {
       );
     }
   }
-
+  
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
@@ -1250,18 +1210,25 @@ export class Creatives extends React.Component {
     this.setState({ isDiscardMessage: true });
   }
 
+  // NEW: Handler for Test and Preview button
+  handleTestAndPreview = () => {
+    this.setState({ showTestAndPreviewSlidebox: true });
+  }
+
+  // NEW: Handler to close Test and Preview slidebox
+  handleCloseTestAndPreview = () => {
+    this.setState({ showTestAndPreviewSlidebox: false });
+  }
+
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
-    const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
-    } = this.state;
+    const { slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, inAppCreateMode, 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;
@@ -1283,15 +1250,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' || isFullMode))) &&
+    if (channel === constants.MOBILE_PUSH &&
+      ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
+        || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
       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;
     }
@@ -1300,9 +1267,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;
       }
     }
@@ -1311,8 +1278,6 @@ export class Creatives extends React.Component {
     if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
-
-
     return showFooter;
   }
 
@@ -1324,22 +1289,14 @@ export class Creatives extends React.Component {
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showDone = false;
     const channelName = !isFullMode && templateData ? templateData.type : currentChannel;
-    const channel = channelName && channelName.toUpperCase();
-
-
+    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;
   }
 
@@ -1399,9 +1356,7 @@ 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();
@@ -1460,6 +1415,7 @@ export class Creatives extends React.Component {
       isLiquidValidationError,
       liquidErrorMessage,
       activeFormBuilderTab,
+      showTestAndPreviewSlidebox,
     } = this.state;
     const {
       isFullMode,
@@ -1483,16 +1439,17 @@ 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' : ''}`)}>
@@ -1587,6 +1544,9 @@ export class Creatives extends React.Component {
               eventContextTags={eventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               loyaltyMetaData={loyaltyMetaData}
+              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+              handleTestAndPreview={this.handleTestAndPreview}
+              handleCloseTestAndPreview={this.handleCloseTestAndPreview}
             />
           )}
           footer={this.shouldShowFooter() ? (
@@ -1608,10 +1568,16 @@ export class Creatives extends React.Component {
               isLiquidValidationError={isLiquidValidationError}
               errorMessages={liquidErrorMessage}
               currentTab={activeFormBuilderTab}
+              onTestAndPreview={this.handleTestAndPreview}
+              showTestAndPreviewButton={(() => {
+                const showButton = currentChannel.toUpperCase() === constants.EMAIL && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate');
+                return showButton;
+              })()}
             />
           ) : 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}} />;
@@ -1622,7 +1588,6 @@ export class Creatives extends React.Component {
           show={showSlideBox}
           size="size-xl"
         />
-
       </SlideBoxWrapper>
     );
   }
@@ -1682,7 +1647,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/CreativesContainer/messages.js

@@ -362,4 +362,8 @@ export default defineMessages({
     id: `${scope}.noCommunication`,
     defaultMessage: `NO_COMMUNICATION`,
   },
+  "testAndPreview": {
+    id: `${scope}.testAndPreview`,
+    defaultMessage: `Preview and Test`,
+  },
 });