@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Components/TemplatePreview/messages.js

@@ -90,4 +90,8 @@ export default defineMessages({
     id: `creatives.componentsV2.TemplatePreview.addToCart`,
     defaultMessage: 'Add to cart',
   },
+  videoNotSupported: {
+    id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
+    defaultMessage: 'Your browser does not support the video tag.',
+  },
 });

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -7,17 +7,14 @@ import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsWrapper from '../SmsWrapper';
-// import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
-import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
 import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
-import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
 import FTP from '../FTP';
@@ -28,6 +25,7 @@ import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
+import MobilePushNew from '../MobilePushNew';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -476,9 +474,6 @@ export function SlideBoxContent(props) {
           forwardedTags={forwardedTags}
         />
       )}
-      {isMpushPreview &&
-        <MobilePushPreview templateData={templateData} channel={channel}/>
-      }
       {
         (currentChannel === constants.WECHAT && !!slidBoxContent) && <WechatWrapper
           mode={slidBoxContent}
@@ -657,7 +652,7 @@ export function SlideBoxContent(props) {
       />
         )}
       {isEditMPush &&
-        <MobliPushEdit
+        <MobilePushNew
           getFormLibraryData={getFormData}
           setIsLoadingContent={setIsLoadingContent}
           location={{
@@ -684,7 +679,7 @@ export function SlideBoxContent(props) {
         />
         }
       {isCreateMPush &&
-        <MobilepushWrapper
+        <MobilePushNew
           key="creatives-mobilepush-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
@@ -692,8 +687,11 @@ export function SlideBoxContent(props) {
           mobilePushCreateMode={mobilePushCreateMode}
           isGetFormData={isGetFormData}
           getFormData={getFormData}
+          location={location}
+          getDefaultTags={type}
           templateData={templateData}
           type={type}
+          handleClose={handleClose}
           step={templateStep}
           showNextStep={onCreateNextStep}
           isFullMode={isFullMode}
@@ -711,6 +709,7 @@ export function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
           eventContextTags={eventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
+          onCreateComplete={onCreateComplete}
         />
       }
       {

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,17 +15,15 @@ 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 * as constants from './constants';
 import * as commonUtil from '../../utils/common';
 import { gtmPush } from '../../utils/gtmTrackers';
@@ -43,20 +42,19 @@ 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 SlideBoxHeader from './SlideBoxHeader';
+import SlideBoxFooter from './SlideBoxFooter';
+import SlideBoxContent from './SlideBoxContent';
 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';
 
@@ -82,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',
@@ -151,28 +152,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,
+      });
     }
   };
 
@@ -241,38 +240,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;
@@ -352,13 +353,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() },
@@ -520,7 +541,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;
@@ -540,7 +563,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;
@@ -633,46 +656,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 };
@@ -756,6 +794,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;
@@ -775,6 +816,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;
@@ -944,7 +988,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;
@@ -982,7 +1026,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 = [],
@@ -1110,7 +1154,6 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
-
     if (template.validity) {
       this.setState(
         {
@@ -1128,7 +1171,7 @@ export class Creatives extends React.Component {
       );
     }
   }
-  
+
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
@@ -1209,13 +1252,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;
@@ -1237,15 +1283,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;
     }
@@ -1254,9 +1300,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;
       }
     }
@@ -1265,6 +1311,8 @@ export class Creatives extends React.Component {
     if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
+
+
     return showFooter;
   }
 
@@ -1277,13 +1325,21 @@ export class Creatives extends React.Component {
     let showDone = false;
     const channelName = !isFullMode && templateData ? templateData.type : currentChannel;
     const channel = channelName && 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;
   }
 
@@ -1343,7 +1399,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();
@@ -1425,17 +1483,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' : ''}`)}>
@@ -1555,7 +1612,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}} />;
@@ -1566,7 +1622,7 @@ export class Creatives extends React.Component {
           show={showSlideBox}
           size="size-xl"
         />
-        
+
       </SlideBoxWrapper>
     );
   }
@@ -1626,7 +1682,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/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 = [
   {
@@ -131,7 +132,6 @@ export const BUTTON_RADIO_OPTIONS = [
         </div>
       </>
     ),
-    disabled: true,
   },
 ];