@capillarytech/creatives-library 7.17.93 → 7.17.94

package/v2Components/TemplatePreview/messages.js

@@ -86,4 +86,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.previewUrlMetaImage',
     defaultMessage: 'Preview url meta image',
   },
+  addToCart: {
+    id: `creatives.componentsV2.TemplatePreview.addToCart`,
+    defaultMessage: 'Add to cart',
+  },
 });

package/v2Containers/App/constants.js

@@ -54,6 +54,7 @@ export const LINE = 'line';
 export const EMAIL = 'email';
 export const ASSETS = 'assets';
 export const ZALO = 'zalo';
+export const INAPP = 'inapp';
 
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -22,6 +22,7 @@ import LineContainer from '../Line/Container';
 import FTP from '../FTP';
 import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
+import InApp from '../InApp';
 import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
@@ -182,6 +183,7 @@ export function SlideBoxContent(props) {
   const isCreateSms = isCreate && channel === constants.SMS;
   const isCreateFacebook = isCreate && channel === constants.FACEBOOK;
   const isCreateWhatsapp = isCreate && channel === constants.WHATSAPP;
+  const isCreateInApp = isCreate && channel === constants.INAPP;
   const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
@@ -191,11 +193,13 @@ export function SlideBoxContent(props) {
   let isPreview = false;
   let isEmailPreview = false;
   let isMpushPreview = false;
+  let isInappPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
+  let isEditInApp = false;
   let isEditRcs = false;
   let isEditZalo = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
@@ -212,8 +216,10 @@ export function SlideBoxContent(props) {
     isPreview = slidBoxContent === 'preview' && [constants.SMS, constants.LINE, constants.WHATSAPP, constants.FACEBOOK, constants.VIBER, constants.RCS].includes(channel);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
+    isInappPreview = slidBoxContent === 'preview' && channel === constants.INAPP;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
     isEditZalo = isEdit && channel?.toUpperCase() === constants.ZALO;
+    isEditInApp = isEdit && channel === constants.INAPP;
   }
   const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
   const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
@@ -438,6 +444,13 @@ export function SlideBoxContent(props) {
         />
       )
       }
+      {isInappPreview && (
+        <MobilePushPreview
+          templateData={templateData}
+          channel={channel}
+          forwardedTags={forwardedTags}
+      />
+      )}
       {isMpushPreview && (
         <MobilePushPreview
           templateData={templateData}
@@ -786,6 +799,36 @@ export function SlideBoxContent(props) {
         }}/>
       )}
 
+      {isCreateInApp && (<InApp
+        isFullMode={isFullMode}
+        onCreateComplete={onCreateComplete}
+        handleClose={handleClose}
+        location={{
+          pathname: `/inapp/create`,
+          query,
+          search: '',
+        }}
+      />
+      )}
+
+      {isEditInApp && (<InApp
+        isFullMode={isFullMode}
+        templateData={templateData}
+        getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
+        onCreateComplete={onCreateComplete}
+        selectedOfferDetails={selectedOfferDetails}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/inapp/edit`,
+          query,
+          search: '',
+        }} />
+      )}
+
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
         location={{

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -11,7 +11,7 @@ import whatsppMsg from '../Whatsapp/messages';
 import { LANGUAGE_OPTIONS } from '../Whatsapp/constants';
 import globalMessages from '../Cap/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
-import { NO_COMMUNICATION, FTP, WHATSAPP, RCS, ZALO } from '../App/constants';
+import { NO_COMMUNICATION, FTP, WHATSAPP, RCS, ZALO, INAPP } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
@@ -39,7 +39,9 @@ export function SlideBoxHeader(props) {
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
   const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
+  const isInAppEdit = channel.toLowerCase() === INAPP && slidBoxContent === 'editTemplate';
   const isWhatsappCreate = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'createTemplate';
+  const isInAppCreate = channel.toLowerCase() === INAPP && slidBoxContent === 'createTemplate';
   const isZaloEdit = channel.toLowerCase() === ZALO && slidBoxContent === 'editTemplate';
   const zaloOverview = isZaloEdit && isFullMode;
   const whatsappOverview = isWhatsappEdit && isFullMode;
@@ -60,6 +62,7 @@ export function SlideBoxHeader(props) {
       sms: <FormattedMessage {...messages.smsHeader} />,
       email: <FormattedMessage {...messages.emailHeader} />,
       mobilepush: <FormattedMessage {...messages.pushNotificationHeader} />,
+      inapp: <FormattedMessage {...messages.inAppHeader} />,
       wechat: <FormattedMessage {...messages.wechat} />,
       line: <FormattedMessage {...messages.lineHeader} />,
       no_communication: <FormattedMessage {...messages.noCommunication} />,

package/v2Containers/CreativesContainer/constants.js

@@ -19,6 +19,7 @@ export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
 export const RCS = "RCS";
 export const ZALO = "ZALO";
+export const INAPP = "INAPP";
 export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 

package/v2Containers/CreativesContainer/index.js

@@ -40,6 +40,7 @@ import { LOYALTY } from '../App/constants';
 import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
+import { IOS } from '../InApp/constants';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -155,7 +156,7 @@ export class Creatives extends React.Component {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
       const {emailCreateMode, currentChannel} = prevState;
-      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH || currentChannel.toUpperCase() === constants.WECHAT) {
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
       return {
@@ -168,6 +169,9 @@ export class Creatives extends React.Component {
     this.setState({ emailCreateMode: mode});
   }
 
+  onInAppModeChange = (mode) => {
+    this.setState({ inAppCreateMode: mode});
+  }
 
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode});
@@ -281,6 +285,21 @@ export class Creatives extends React.Component {
           };
           break;
         }
+        case constants.INAPP: {
+          const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
+          creativesTemplateData = {
+            type: channel,
+            name: templateData.messageSubject,
+            versions: {
+              content: {
+                ANDROID: templateData.androidContent,
+                IOS: templateData.iosContent,
+              },
+            },
+            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+          };
+          break;
+        }
         case constants.WECHAT: {
           const messageBody = JSON.parse(templateData.messageBody);
           creativesTemplateData = {
@@ -613,6 +632,50 @@ export class Creatives extends React.Component {
           templateData.messageSubject = mobilpushTemplate.name ? mobilpushTemplate.name : "messageSubject";
         }
         break;
+      case constants.INAPP:
+        if (get(template, "value.versions.base.content")) {
+          const inAppTemplate = template.value;
+          templateData.accountId = get(inAppTemplate, 'definition.accountId');
+          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
+          if (type === LOYALTY) {
+            templateData.licenseCode = get(inAppTemplate, 'definition.licenseCode');
+            templateData.templateId = get(inAppTemplate, '_id');
+          }
+          const androidContent = get(inAppTemplate, 'versions.base.content.ANDROID');
+          if (!isEmpty(androidContent)) {
+            if (type !== LOYALTY) {
+              delete androidContent.cuid;
+              delete androidContent.luid;
+              delete androidContent.communicationId;
+            }
+            const custom = {};
+            forEach(androidContent.custom, (customKeyValue) => {
+              custom[customKeyValue.key] = customKeyValue.value;
+            });
+            androidContent.custom = custom;
+            templateData.androidContent = androidContent;
+            templateData.androidContent.type = get(inAppTemplate, 'definition.mode', '').toUpperCase();
+            templateData.androidContent.deviceType = 'ANDROID';
+          }
+          const iosContent = get(inAppTemplate, 'versions.base.content.IOS');
+          if (!isEmpty(iosContent)) {
+            if (type !== LOYALTY) {
+              delete iosContent.cuid;
+              delete iosContent.luid;
+              delete iosContent.communicationId;
+            }
+            const custom = {};
+            forEach(iosContent.custom, (customKeyValue) => {
+              custom[customKeyValue.key] = customKeyValue.value;
+            });
+            iosContent.custom = custom;
+            templateData.iosContent = iosContent;
+            templateData.iosContent.type = get(inAppTemplate, 'definition.mode').toUpperCase();
+            templateData.iosContent.deviceType = IOS.toUpperCase();
+          }
+          templateData.messageSubject = inAppTemplate?.name ? inAppTemplate?.name : "messageSubject";
+        }
+        break;
       case constants.WECHAT:
         if (template.value) {
           const { accountId, previewContent, ...messageBody } = template.value;
@@ -904,6 +967,13 @@ export class Creatives extends React.Component {
           imageAdded: androidType === 'IMAGE' || iosType === 'IMAGE',
         };
         break;
+      case constants.INAPP:
+        gtmDetails = {
+          ...gtmDetails,
+          content: `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`,
+          imageAdded: androidType === IMAGE || iosType === IMAGE,
+        };
+        break;
       case constants.LINE:
         gtmDetails = Object.assign({
           ...gtmDetails,
@@ -981,12 +1051,13 @@ export class Creatives extends React.Component {
   }
   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;
@@ -1036,7 +1107,6 @@ export class Creatives extends React.Component {
     if ([constants.LINE, constants.VIBER, constants.FACEBOOK].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
-
     return showFooter;
   }
   shouldShowDoneFooter = () => {
@@ -1049,7 +1119,7 @@ export class Creatives extends React.Component {
     if (channel === constants.EMAIL || channel === constants.SMS) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-    } else if (channel === constants.MOBILE_PUSH || channel === constants.WECHAT) {
+    } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
     }
 
@@ -1080,7 +1150,7 @@ export class Creatives extends React.Component {
   showTemplateName = ({formData, onFormDataChange}) => { //gets called from email/index after template data is fetched
     const {slidBoxContent, currentChannel, isEditName} = this.state;
     const channel = currentChannel.toUpperCase();
-    if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
+    if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
         this.setState({isTemplateNameEmpty:true});
@@ -1094,7 +1164,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, 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();
@@ -1108,6 +1178,8 @@ export class Creatives extends React.Component {
       isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
+    } else if (currentChannel.toUpperCase() === constants.INAPP) {
+      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1117,7 +1189,7 @@ export class Creatives extends React.Component {
     const {templateContainerDetails} = this;
     const {formData, onFormDataChange} = templateContainerDetails;
     const channel = currentChannel.toUpperCase();
-    if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
+    if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
       return showTemplateNameComponentEdit ? this.templateNameComponentInput({formData, onFormDataChange, name}) : this.templateNameComponentHeader({formData, onFormDataChange, name});
     }

package/v2Containers/CreativesContainer/messages.js

@@ -338,6 +338,10 @@ export default defineMessages({
     id: `${scope}.pushNotificationHeader`,
     defaultMessage: `Push notification`,
   },
+  "inAppHeader": {
+    id: `${scope}.inAppHeader`,
+    defaultMessage: `In App Message`,
+  },
   "wechat": {
     id: `${scope}.wechat`,
     defaultMessage: `Wechat`,

package/v2Containers/InApp/actions.js

@@ -0,0 +1,64 @@
+import { INAPP } from "../CreativesContainer/constants";
+import {
+  INAPP_TEMPLATE_CREATE_REQUEST,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+  RESET_EDIT_TEMPLATE,
+  UPLOAD_INAPP_ASSET_REQUEST,
+  CLEAR_INAPP_ASSET,
+  INAPP_EDIT_TEMPLATE_REQUEST,
+} from "./constants";
+
+export function createInAppTemplate(payload, callback) {
+  return {
+    type: INAPP_TEMPLATE_CREATE_REQUEST,
+    payload,
+    callback,
+  };
+}
+export function clearCreateResponse() {
+  return {
+    type: CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+// FOR EDIT
+export function getTemplateDetails(id, callback) {
+  return {
+    type: GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: INAPP,
+    callback,
+  };
+}
+
+export function editTemplate(template, callback) {
+  return {
+    type: INAPP_EDIT_TEMPLATE_REQUEST,
+    payload: template,
+    callback,
+  };
+}
+
+export function resetEditTemplate() {
+  return {
+    type: RESET_EDIT_TEMPLATE,
+  };
+}
+
+export const uploadInAppAsset = (
+  file,
+  assetType,
+  fileParams,
+  templateType,
+) => ({
+  type: UPLOAD_INAPP_ASSET_REQUEST,
+  file,
+  assetType,
+  fileParams,
+  templateType,
+});
+
+export const clearInAppAsset = (templateType) => ({
+  type: CLEAR_INAPP_ASSET,
+  templateType,
+});

package/v2Containers/InApp/constants.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import { WEBSITE } from "../../v2Components/CapInAppCTA/constants";
+import messages from "./messages";
+
+const prefix = "app/v2Containers/InApp";
+export const INAPP_TEMPLATE_CREATE_REQUEST = `${prefix}/INAPP_TEMPLATE_CREATE_REQUEST`;
+export const INAPP_TEMPLATE_CREATE_SUCCESS = `${prefix}/INAPP_TEMPLATE_CREATE_SUCCESS`;
+export const INAPP_TEMPLATE_CREATE_FAILURE = `${prefix}/INAPP_TEMPLATE_CREATE_FAILURE`;
+export const INAPP_EDIT_TEMPLATE_REQUEST = `${prefix}/INAPP_EDIT_TEMPLATE_REQUEST`;
+export const INAPP_EDIT_TEMPLATE_SUCCESS = `${prefix}/INAPP_EDIT_TEMPLATE_SUCCESS`;
+export const INAPP_EDIT_TEMPLATE_FAILURE = `${prefix}/INAPP_EDIT_TEMPLATE_FAILURE`;
+export const CLEAR_CREATE_RESPONSE_REQUEST = `${prefix}/CLEAR_CREATE_RESPONSE_REQUEST`;
+// FOR EDIT
+export const GET_INAPP_TEMPLATE_DETAILS_REQUEST = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_REQUEST`;
+export const GET_INAPP_TEMPLATE_DETAILS_SUCCESS = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_SUCCESS`;
+export const GET_INAPP_TEMPLATE_DETAILS_FAILURE = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_FAILURE`;
+export const RESET_EDIT_TEMPLATE = `${prefix}/Edit/RESET_EDIT_TEMPLATE`;
+
+export const UPLOAD_INAPP_ASSET_REQUEST = `${prefix}/UPLOAD_INAPP_ASSET_REQUEST`;
+export const UPLOAD_INAPP_ASSET_SUCCESS = `${prefix}/UPLOAD_INAPP_ASSET_SUCCESS`;
+export const UPLOAD_INAPP_ASSET_FAILURE = `${prefix}/UPLOAD_INAPP_ASSET_FAILURE`;
+export const CLEAR_INAPP_ASSET = `${prefix}/CLEAR_INAPP_ASSET`;
+
+export const INAPP_MEDIA_TYPES = {
+  TEXT: "TEXT",
+  IMAGE: "IMAGE",
+};
+export const BIG_TEXT = 'BIG_TEXT';
+export const BIG_PICTURE = 'BIG_PICTURE';
+export const NONE = "NONE";
+export const CTA = "CTA";
+export const MAPP_SDK = "MAPP_SDK";
+export const INAPP_BUTTON_TYPES = {
+  NONE,
+  CTA,
+};
+
+export const DEEP_LINK = 'DEEP_LINK';
+
+export const INITIAL_CTA_DATA = [
+  {
+    index: 0,
+    ctaType: WEBSITE,
+    text: "",
+    urlType: DEEP_LINK,
+    url: "",
+    isSaved: false,
+    label: "",
+  },
+];
+
+export const URL_MAX_LENGTH = 2000;
+
+export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+export const INAPP_IMG_SIZE = 5000000; // 5MB
+
+export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
+
+export const INAPP_MESSAGE_LAYOUT_TYPES = {
+  MODAL: "POPUP",
+  TOPBANNER: "HEADER",
+  BOTTOMBANNER: "FOOTER",
+  FULLSCREEN: "FULLSCREEN",
+};
+
+export const ANDROID = "ANDROID";
+export const IOS = "iOS";
+export const LAYOUT_RADIO_OPTIONS = [
+  {
+    value: INAPP_MESSAGE_LAYOUT_TYPES.MODAL,
+    label: <FormattedMessage {...messages.layoutModal} />,
+  },
+  {
+    value: INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER,
+    label: <FormattedMessage {...messages.layoutTopBanner} />,
+  },
+  {
+    value: INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER,
+    label: <FormattedMessage {...messages.layoutBottomBanner} />,
+  },
+  {
+    value: INAPP_MESSAGE_LAYOUT_TYPES.FULLSCREEN,
+    label: <FormattedMessage {...messages.layoutFullScreen} />,
+  },
+];
+export const MEDIA_RADIO_OPTIONS = [
+  {
+    value: INAPP_MEDIA_TYPES.TEXT,
+    label: <FormattedMessage {...messages.mediaText} />,
+  },
+  {
+    value: INAPP_MEDIA_TYPES.IMAGE,
+    label: <FormattedMessage {...messages.mediaImage} />,
+  },
+];
+export const BUTTON_RADIO_OPTIONS = [
+  {
+    value: INAPP_BUTTON_TYPES.NONE,
+    label: (
+      <CapHeading
+        type="h4"
+        className="inapp-button-none"
+      >
+        <FormattedMessage {...messages.btnTypeNone} />
+      </CapHeading>
+    ),
+  },
+  {
+    value: INAPP_BUTTON_TYPES.CTA,
+    label: (
+      <>
+        <div
+          className="inapp-button-cta"
+        >
+          <CapHeading type="h4">
+            <FormattedMessage {...messages.btnTypeCTA} />
+          </CapHeading>
+          <CapLabel><FormattedMessage {...messages.ctaDesc} /></CapLabel>
+        </div>
+      </>
+    ),
+  },
+];