@capillarytech/creatives-library 7.17.93 → 7.17.95

package/v2Containers/InApp/index.js

@@ -0,0 +1,762 @@
+import React, { useState, useEffect } from "react";
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import { bindActionCreators } from "redux";
+import { createStructuredSelector } from "reselect";
+import { injectIntl, FormattedMessage } from "react-intl";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
+import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
+import { makeSelectInApp, makeSelectAccount } from "./selectors";
+import {
+  isLoadingMetaEntities,
+  makeSelectMetaEntities,
+  setInjectedTags,
+} from "../Cap/selectors";
+import * as inAppActions from "./actions";
+import './index.scss';
+import messages from "./messages";
+import globalMessages from "../Cap/messages";
+import withCreatives from "../../hoc/withCreatives";
+import TemplatePreview from "../../v2Components/TemplatePreview";
+import { validateTags } from "../../utils/tagValidations";
+
+import {
+  ANDROID,
+  BIG_PICTURE,
+  BIG_TEXT,
+  DEEP_LINK,
+  INAPP_BUTTON_TYPES,
+  INAPP_MEDIA_TYPES,
+  INAPP_MESSAGE_LAYOUT_TYPES,
+  INITIAL_CTA_DATA,
+  IOS,
+  LAYOUT_RADIO_OPTIONS,
+} from "./constants";
+import { INAPP, SMS } from "../CreativesContainer/constants";
+import { ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY } from "../Whatsapp/constants";
+import CapDeviceContent from "../../v2Components/CapDeviceContent";
+import { getCdnUrl } from "../../utils/cdnTransformation";
+let editContent = {};
+
+export const InApp = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    onCreateComplete,
+    params,
+    templateData = {},
+    editData = {},
+    accountData = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    getFormData,
+    selectedOfferDetails,
+  } = props || {};
+  const { formatMessage } = intl;
+  const [titleAndroid, setTitleAndroid] = useState("");
+  const [titleIos, setTitleIos] = useState("");
+  const [templateMediaTypeAndroid, setTemplateMediaTypeAndroid] = useState(
+    INAPP_MEDIA_TYPES.TEXT
+  );
+  const [templateMediaTypeIos, setTemplateMediaTypeIos] = useState(
+    INAPP_MEDIA_TYPES.TEXT
+  );
+  const [templateName, setTemplateName] = useState("");
+  const [templateLayoutType, setTemplateLayoutType] = useState(
+    INAPP_MESSAGE_LAYOUT_TYPES.MODAL
+  );
+  const [addActionLinkAndroid, setAddActionLinkAndroid] = useState(false);
+  const [addActionLinkIos, setAddActionLinkIos] = useState(false);
+  const [deepLinkValueAndroid, setDeepLinkValueAndroid] = useState('');
+  const [deepLinkValueIos, setDeepLinkValueIos] = useState('');
+  const [templateMessageAndroid, setTemplateMessageAndroid] = useState("");
+  const [templateMessageIos, setTemplateMessageIos] = useState("");
+  const [templateMessageErrorAndroid, setTemplateMessageErrorAndroid] = useState(false);
+  const [templateMessageErrorIos, setTemplateMessageErrorIos] = useState(false);
+  const [accountId, setAccountId] = useState("");
+  const [accessToken, setAccessToken] = useState("");
+  const [accountName, setAccountName] = useState("");
+  const [deepLink, setDeepLink] = useState("");
+  const [spin, setSpin] = useState(false);
+  const [inAppImageSrcAndroid, setInAppImageSrcAndroid] = useState("");
+  const [inAppImageSrcIos, setInAppImageSrcIos] = useState("");
+  const [panes, setPanes] = useState(ANDROID);
+  //for tag only
+  const [tags, updateTags] = useState([]);
+  //for edit only
+  const [isEditFlow, setEditFlow] = useState(false);
+  const [templateDate, setTemplateDate] = useState("");
+
+  //buttons
+  const [ctaDataAndroid, setCtaDataAndroid] = useState(INITIAL_CTA_DATA);
+  const [ctaDataIos, setCtaDataIos] = useState(INITIAL_CTA_DATA);
+  const [buttonTypeAndroid, setButtonTypeAndroid] = useState(
+    INAPP_BUTTON_TYPES.NONE
+  );
+  const [buttonTypeIos, setButtonTypeIos] = useState(INAPP_BUTTON_TYPES.NONE);
+  const isBtnTypeCta = buttonTypeAndroid === INAPP_BUTTON_TYPES.CTA;
+
+  //gets account details
+  useEffect(() => {
+    const accountObj = accountData?.selectedWeChatAccount || {};
+    const deepLinkObj = accountData?.weCrmAccounts[0]?.configs?.deeplink || {};
+    if (!isEmpty(accountObj)) {
+      const {
+        sourceAccountIdentifier = "",
+        configs = {},
+        name = "",
+      } = accountObj;
+      //get deep link keys in an array
+      const deepLinkKeys = Object.values(JSON.parse(deepLinkObj));
+      const keys = deepLinkKeys.map((link) => ({label: link.name, value: link.link, title: link.link }));
+      setDeepLink(keys);
+      setAccountId(sourceAccountIdentifier);
+      setAccessToken(configs.accessToken || "");
+      setAccountName(name);
+    }
+  }, [accountData?.selectedWeChatAccount, accountData?.weCrmAccounts[0]] );
+
+  //gets template details
+  const paramObj = params || {};
+  useEffect(() => {
+    const { id } = paramObj;
+    if (id) {
+      if (isFullMode) {
+        setSpin(true);
+        actions.getTemplateDetails(id, setSpin);
+      }
+    }
+    //cleanup code
+    return () => {
+      actions.resetEditTemplate();
+    };
+  }, [paramObj.id]);
+
+  useEffect(() => {
+    const {
+      name = "",
+      versions = {},
+      createdAt = "",
+    } = isFullMode ? editData.templateDetails || {} : templateData || {};
+    editContent = get(versions, `base.content`, {});
+    if (editContent && !isEmpty(editContent)) {
+      setEditFlow(true);
+      setTemplateName(name);
+      setTemplateDate(createdAt);
+      setTemplateLayoutType(editContent?.ANDROID?.bodyType);
+      const androidContent = editContent?.ANDROID;
+      const {
+        title: androidTitle,
+        message: androidMessage,
+        cta: androidCta,
+        expandableDetails: androidExpandableDetails,
+      } = androidContent;
+      setTitleAndroid(androidTitle);
+      setTemplateMessageAndroid(androidMessage);
+      setTemplateMediaTypeAndroid(
+        androidExpandableDetails?.style === BIG_TEXT
+          ? INAPP_MEDIA_TYPES.TEXT
+          : INAPP_MEDIA_TYPES.IMAGE
+      );
+      setInAppImageSrcAndroid(androidExpandableDetails?.image);
+      setDeepLinkValueAndroid(androidCta?.actionLink);
+      setAddActionLinkAndroid(!isEmpty(androidCta) && true);
+      setButtonTypeAndroid(
+        androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
+      );
+      if (androidExpandableDetails?.ctas?.length > 0) {
+        setCtaDataAndroid(
+          androidExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
+            const obj = {
+              index,
+              text: actionText,
+              url: actionLink,
+              urlType: type,
+              isSaved: true,
+            };
+            return obj;
+          })
+        );
+      }
+      const iosContent = editContent?.IOS;
+      const {
+        title: iosTitle,
+        message: iosMessage,
+        cta: iosCta,
+        expandableDetails: iosExpandableDetails,
+      } = iosContent;
+      setTitleIos(iosTitle);
+      setTemplateMessageIos(iosMessage);
+      setTemplateMediaTypeIos(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+      setInAppImageSrcIos(iosExpandableDetails?.image);
+      setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
+      setAddActionLinkIos(!isEmpty(iosCta) && true);
+      setDeepLinkValueIos(iosCta?.actionLink);
+      if (iosExpandableDetails?.ctas?.length > 0) {
+        setCtaDataIos(
+          iosExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
+            const obj = {
+              index,
+              text: actionText,
+              url: actionLink,
+              urlType: type,
+              isSaved: true,
+            };
+            return obj;
+          })
+        );
+      }
+    }
+  }, [editData.templateDetails || templateData]);
+
+  // tag Code start from here
+  useEffect(() => {
+    //fetching tags
+    const { type, module } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const context = isEmbedded ? module : DEFAULT;
+    const embedded = isEmbedded ? type : FULL;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    globalActions.fetchSchemaForEntity(query);
+  }, []);
+
+  useEffect(() => {
+    let tag = get(metaEntities, `tags.standard`, []);
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const tempData = (data || '').toLowerCase();
+    const isEmbedded = type === EMBEDDED;
+    const embedded = isEmbedded ? type : FULL;
+    const context = tempData === ALL ? DEFAULT : tempData;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const templateDescErrorHandler = (value) => {
+    let errorMessage = false;
+    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) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
+    }
+    if (isBraceError) {
+      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
+    }
+    return errorMessage;
+  };
+
+  const onTagSelect = (data, id) => {
+    if (id === 0) {
+      const tempTitle = `${panes === ANDROID ? titleAndroid : titleIos}{{${data}}}`;
+      if (panes === ANDROID) {
+        setTitleAndroid(tempTitle);
+      } else {
+        setTitleIos(tempTitle);
+      }
+    } else {
+      const tempMsg = `${panes === ANDROID ? templateMessageAndroid : templateMessageIos}{{${data}}}`;
+      const error = templateDescErrorHandler(tempMsg);
+      if (panes === ANDROID) {
+        setTemplateMessageAndroid(tempMsg);
+        setTemplateMessageErrorAndroid(error);
+      } else {
+        setTemplateMessageIos(tempMsg);
+        setTemplateMessageErrorIos(error);
+      }
+    }
+  };
+
+  // tag Code end
+
+  const onTemplateNameChange = ({ target: { value } }) => {
+    setTemplateName(value);
+  };
+
+  const onTemplateLayoutTypeChange = ({ target: { value } }) => {
+    setTemplateLayoutType(value);
+  };
+
+  const onCopyTitleAndContent = () => {
+    if (panes === ANDROID) {
+      setTitleAndroid(titleIos);
+      setTemplateMessageAndroid(templateMessageIos);
+    } else {
+      setTitleIos(titleAndroid);
+      setTemplateMessageIos(templateMessageAndroid);
+    }
+  };
+
+
+  const PANES = [
+    {
+      content: (
+        <CapDeviceContent
+          intl={intl}
+          location={location}
+          injectedTags={injectIntl}
+          selectedOfferDetails={selectedOfferDetails}
+          panes={panes}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcAndroid}
+          setInAppImageSrc={setInAppImageSrcAndroid}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataAndroid}
+          setCtaData={setCtaDataAndroid}
+          buttonType={buttonTypeAndroid}
+          setButtonType={setButtonTypeAndroid}
+          accountId={accountId}
+          accessToken={accessToken}
+          templateMediaType={templateMediaTypeAndroid}
+          setTemplateMediaType={setTemplateMediaTypeAndroid}
+          title={titleAndroid}
+          setTitle={setTitleAndroid}
+          templateMessageError={templateMessageErrorAndroid}
+          templateMessage={templateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroid}
+          setTemplateMessageError={setTemplateMessageErrorAndroid}
+          addActionLink={addActionLinkAndroid}
+          setAddActionLink={setAddActionLinkAndroid}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueAndroid}
+          setDeepLinkValue={setDeepLinkValueAndroid}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Android} />,
+      key: ANDROID,
+    },
+    {
+      content: (
+        <CapDeviceContent
+          intl={intl}
+          location={location}
+          injectedTags={injectIntl}
+          selectedOfferDetails={selectedOfferDetails}
+          panes={panes}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcIos}
+          setInAppImageSrc={setInAppImageSrcIos}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataIos}
+          setCtaData={setCtaDataIos}
+          buttonType={buttonTypeIos}
+          setButtonType={setButtonTypeIos}
+          accountId={accountId}
+          accessToken={accessToken}
+          templateMediaType={templateMediaTypeIos}
+          setTemplateMediaType={setTemplateMediaTypeIos}
+          title={titleIos}
+          setTitle={setTitleIos}
+          templateMessageError={templateMessageErrorIos}
+          templateMessage={templateMessageIos}
+          setTemplateMessage={setTemplateMessageIos}
+          setTemplateMessageError={setTemplateMessageErrorIos}
+          addActionLink={addActionLinkIos}
+          setAddActionLink={setAddActionLinkIos}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueIos}
+          setDeepLinkValue={setDeepLinkValueIos}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Ios} />,
+      key: IOS,
+    },
+  ];
+
+  const createModeContent = (
+    <CapRow>
+      {/* template name */}
+      <CapRow>
+        <CapHeading type="h4">
+          <FormattedMessage {...messages.creativeName} />
+        </CapHeading>
+        <CapInput
+          id="inapp-template-name-input"
+          className="inapp-template-name-input"
+          onChange={onTemplateNameChange}
+          placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
+          value={templateName}
+          size="default"
+          />
+      </CapRow>
+      {/* Creative layout type*/}
+      <CapRow className="inapp-creative-layout">
+        <CapHeading type="h4">
+          <FormattedMessage {...messages.creativeLayout} />
+        </CapHeading>
+        <CapHeading type="h6" className="inapp-creative-layout-desc">
+          <FormattedMessage {...messages.creativeLayoutDesc} />
+        </CapHeading>
+      </CapRow>
+      <CapRadioGroup
+        id="inapp-layout-radio"
+        options={LAYOUT_RADIO_OPTIONS}
+        value={templateLayoutType}
+        onChange={onTemplateLayoutTypeChange}
+        className="inapp-layout-radio"
+        />
+    </CapRow>
+  );
+  //create methods end
+
+  //used by create and edit
+  const getPreviewSection = () => {
+    const templateTitle = panes === ANDROID ? titleAndroid : titleIos;
+    const templateMsg = panes === ANDROID ? templateMessageAndroid : templateMessageIos;
+    const mediaPreview = {};
+    let ctaData = {};
+    if (panes === ANDROID) {
+      ctaData = ctaDataAndroid;
+      switch (templateMediaTypeAndroid) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcAndroid = inAppImageSrcAndroid;
+          break;
+        default:
+          break;
+      }
+    } else {
+      ctaData = ctaDataIos;
+      switch (templateMediaTypeIos) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcIos = inAppImageSrcIos;
+          break;
+        default:
+          break;
+      }
+    }
+    return (
+      <TemplatePreview
+        channel={INAPP}
+        content={{
+          inAppPreviewContent: {
+            mediaPreview,
+            templateTitle,
+            templateMsg,
+            ...(isBtnTypeCta && {
+              ctaData,
+            }),
+          },
+        }}
+        inAppAccountName={accountName}
+        templateLayoutType={templateLayoutType}
+        device={panes}
+      />
+    );
+  };
+
+  const isDisableDone = () => {
+    //if template name is not entered
+    if (templateName.trim() === '') {
+      return true;
+    }
+    //if template message is not entered
+    //for android
+    if (panes === ANDROID && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+      return true;
+    }
+    if (panes === IOS && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+      return true;
+    }//for ios
+    //if media type is image and the mediaType file is not uploaded
+    if (panes === ANDROID && !(templateMediaTypeAndroid === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+      return true;
+    }
+    if (panes === IOS && !(templateMediaTypeIos === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+      return true;
+    }
+    //cta
+    if (isBtnTypeCta) {
+      if (panes === ANDROID && ctaDataAndroid[0]?.isSaved) {
+        //if button type is cta and 1st button is saved
+        return false;
+      }
+      if (panes === IOS && ctaDataIos[0]?.isSaved) {
+         //if button type is cta and 1st button is saved
+        return false;
+      }
+      //if button type is cta and there are no buttons saved
+      return true;
+    }
+    return false;
+  };
+
+  const getCtaPayload = (type) =>
+  (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
+    const { text, urlType, url } = cta;
+    return {
+      type: urlType,
+      actionText: text,
+      actionLink: url,
+    };
+  });
+
+  const createPayload = () => {
+    let androidMediaParams = {};
+    let iosMediaParams = {};
+    const commonDevicePayload = {
+      luid: "{{luid}}",
+      cuid: "{{cuid}}",
+      communicationId: "{{communicationId}}",
+    };
+    switch (templateMediaTypeAndroid) {
+      case INAPP_MEDIA_TYPES.IMAGE:
+        androidMediaParams = {
+          image: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
+          style: BIG_PICTURE,
+        };
+        break;
+      default:
+        break;
+    }
+    switch (templateMediaTypeIos) {
+      case INAPP_MEDIA_TYPES.IMAGE:
+        iosMediaParams = {
+          image: getCdnUrl({url: inAppImageSrcIos, channelName: INAPP }),
+          style: BIG_PICTURE,
+        };
+        break;
+      default:
+        break;
+    }
+    const accountObj = accountData?.selectedWeChatAccount || {};
+    const {
+      sourceAccountIdentifier = "",
+      id,
+    } = accountObj;
+    const data = {
+      name: templateName,
+      versions: {
+        base: {
+          content: {
+            ANDROID: {
+              ...commonDevicePayload,
+              title: titleAndroid,
+              message: templateMessageAndroid,
+              bodyType: templateLayoutType,
+              expandableDetails: {
+                style: BIG_TEXT,
+                message: templateMessageAndroid,
+                ...androidMediaParams,
+                ...(isBtnTypeCta && {
+                  ctas: getCtaPayload(ANDROID),
+                }),
+              },
+              custom: [],
+              cta: deepLinkValueAndroid ? {type: DEEP_LINK, actionLink: deepLinkValueAndroid} : {},
+            },
+            IOS: {
+              ...commonDevicePayload,
+              title: titleIos,
+              message: templateMessageIos,
+              bodyType: templateLayoutType,
+              expandableDetails: {
+                style: BIG_TEXT,
+                message: templateMessageIos,
+                ...iosMediaParams,
+                ...(isBtnTypeCta && {
+                  ctas: getCtaPayload(IOS),
+                }),
+              },
+              custom: [],
+              cta: deepLinkValueIos ? {type: DEEP_LINK, actionLink: deepLinkValueIos} : {},
+            },
+          },
+        },
+      },
+      type: INAPP,
+      definition: {
+        accountId: id,
+        licenseCode: sourceAccountIdentifier,
+        mode: "CREATE",
+      },
+    };
+    return data;
+  };
+
+  const actionCallback = ({ errorMessage }) => {
+    if (!errorMessage) {
+      CapNotification.success({
+        message: isEditFlow ? formatMessage(messages.inAppEditNotification, {
+          name: templateName,
+        }) : formatMessage(messages.inAppCreateNotification, {
+          name: templateName,
+        }),
+      });
+      actions.clearCreateResponse();
+    } else {
+      CapNotification.error({
+        message: JSON.stringify(errorMessage),
+      });
+    }
+  };
+
+  const onCreateInApp = () => {
+    setSpin(true);
+    actions.createInAppTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
+        onCreateComplete();
+      } else {
+        setSpin(false);
+      }
+    });
+  };
+
+  const onEditInApp = () => {
+    setSpin(true);
+    actions.editTemplate(
+      {
+        ...createPayload(),
+        _id: params.id,
+      },
+      (resp, errorMessage) => {
+        actionCallback({ resp, errorMessage });
+        if (!errorMessage) {
+          onCreateComplete();
+        } else {
+          setSpin(false);
+        }
+      },
+    );
+  };
+
+
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      if (isEditFlow) {
+        return onEditInApp;
+      }
+      return onCreateInApp;
+    }
+    return () =>
+      getFormData({
+        value: createPayload(),
+        _id: params && params.id,
+        validity: true,
+        type: INAPP,
+      });
+  };
+
+  return (
+    <CapSpin spinning={spin}>
+      <CapRow className="cap-inapp-creatives">
+        <CapColumn span={14}>
+          {isFullMode && createModeContent}
+          {/* device tab */}
+          <CapTab
+            panes={PANES}
+            onChange={(value) => {
+              setPanes(value);
+            }}
+            activeKey={panes}
+            defaultActiveKey={panes}
+            className="inapp-template-device-tab"
+          />
+          <div className="inapp-scroll-div" />
+        </CapColumn>
+        <CapColumn span={10} className="inapp-preview-container">
+          {getPreviewSection()}
+        </CapColumn>
+      </CapRow>
+      <div className="inapp-footer">
+        {
+          <>
+            <CapButton
+              onClick={onDoneCallback()}
+              disabled={isDisableDone()}
+              className="inapp-create-btn"
+            >
+              {isEditFlow ? (
+                isFullMode ? (
+                  <FormattedMessage {...messages.update} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
+              ) : (
+                <FormattedMessage {...messages.create} />
+              )}
+            </CapButton>
+          </>
+        }
+      </div>
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  editData: makeSelectInApp(),
+  accountData: makeSelectAccount(),
+  metaEntities: makeSelectMetaEntities(),
+  loadingTags: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(inAppActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(InApp),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});