@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Containers/InApp/index.js

@@ -0,0 +1,792 @@
+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,
+  DEVICE_SUPPORTED,
+  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";
+import { getCtaObject } from "./utils";
+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 [templateMediaType, setTemplateMediaType] = 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 [templateTitleErrorAndroid, setTemplateTitleErrorAndroid] = useState(false);
+  const [templateTitleErrorIos, setTemplateTitleErrorIos] = 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 isBtnTypeCtaAndroid = buttonTypeAndroid === INAPP_BUTTON_TYPES.CTA;
+  const isBtnTypeCTaIos = buttonTypeIos === INAPP_BUTTON_TYPES.CTA;
+
+  //gets account details
+  useEffect(() => {
+    const accountObj = accountData?.selectedWeChatAccount || {};
+    const deepLinkObj = accountObj?.configs?.deeplink || '';
+    if (!isEmpty(accountObj)) {
+      const {
+        sourceAccountIdentifier = "",
+        configs = {},
+        name = "",
+      } = accountObj;
+      const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
+      //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 }));
+      setPanes(isAndroidSupported ? ANDROID : IOS);
+      setDeepLink(keys);
+      setAccountId(sourceAccountIdentifier);
+      setAccessToken(configs?.accessToken || "");
+      setAccountName(name);
+    }
+  }, [accountData?.selectedWeChatAccount]);
+
+  //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;
+      if (!isEmpty(androidContent)) {
+        const {
+          title: androidTitle = '',
+          message: androidMessage = '',
+          ctas: androidCta = {},
+          expandableDetails: androidExpandableDetails = {},
+        } = androidContent || {};
+        const {
+          style: androidStyle,
+          image: androidImage,
+          ctas: androidCtas,
+        } = androidExpandableDetails || {};
+        const androidCtaLength = androidCtas?.length;
+        setTitleAndroid(androidTitle);
+        setTemplateMessageAndroid(androidMessage);
+        setTemplateMediaType(
+          androidStyle === BIG_TEXT
+            ? INAPP_MEDIA_TYPES.TEXT
+            : INAPP_MEDIA_TYPES.IMAGE
+        );
+        setInAppImageSrcAndroid(androidImage);
+        setDeepLinkValueAndroid(androidCta[0]?.actionLink || '');
+        setAddActionLinkAndroid(!isEmpty(androidCta) && true);
+        setButtonTypeAndroid(
+          androidCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
+        );
+        if (androidCtaLength > 0) {
+          setCtaDataAndroid(getCtaObject(androidCtas));
+        }
+      }
+      const iosContent = editContent?.IOS;
+      if (!isEmpty(iosContent)) {
+        const {
+          title: iosTitle = '',
+          message: iosMessage = '',
+          ctas: iosCta = {},
+          expandableDetails: iosExpandableDetails = {},
+        } = iosContent || {};
+        const {
+          style: iosStyle,
+          image: iosImage,
+          ctas: iosCtas,
+        } = iosExpandableDetails || {};
+        const iosCtaLength = iosCtas?.length;
+        setTitleIos(iosTitle);
+        setTemplateMessageIos(iosMessage);
+        setTemplateMediaType(iosStyle === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+        setInAppImageSrcIos(iosImage);
+        setButtonTypeIos(iosCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
+        setAddActionLinkIos(!isEmpty(iosCta) && true);
+        setDeepLinkValueIos(iosCta[0]?.actionLink || '');
+        if (iosCtaLength > 0) {
+          setCtaDataIos(getCtaObject(iosCtas));
+        }
+      }
+    }
+  }, [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={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleAndroid}
+          setTitle={setTitleAndroid}
+          templateMessageError={templateMessageErrorAndroid}
+          templateMessage={templateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroid}
+          setTemplateMessageError={setTemplateMessageErrorAndroid}
+          templateTitleError={templateTitleErrorAndroid}
+          setTemplateTitleError={setTemplateTitleErrorAndroid}
+          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,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED,
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
+    },
+    {
+      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={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleIos}
+          setTitle={setTitleIos}
+          templateMessageError={templateMessageErrorIos}
+          templateMessage={templateMessageIos}
+          setTemplateMessage={setTemplateMessageIos}
+          setTemplateMessageError={setTemplateMessageErrorIos}
+          templateTitleError={templateTitleErrorIos}
+          setTemplateTitleError={setTemplateTitleErrorIos}
+          addActionLink={addActionLinkIos}
+          setAddActionLink={setAddActionLinkIos}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueIos}
+          setDeepLinkValue={setDeepLinkValueIos}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Ios} />,
+      key: IOS,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED,
+    },
+  ];
+
+  const createModeContent = (
+    <CapRow>
+      {/* template name */}
+      <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>
+  );
+  //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 (templateMediaType) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcAndroid = inAppImageSrcAndroid;
+          break;
+        default:
+          break;
+      }
+    } else {
+      ctaData = ctaDataIos;
+      switch (templateMediaType) {
+        case INAPP_MEDIA_TYPES.IMAGE:
+          mediaPreview.inAppImageSrcIos = inAppImageSrcIos;
+          break;
+        default:
+          break;
+      }
+    }
+    return (
+      <TemplatePreview
+        channel={INAPP}
+        content={{
+          inAppPreviewContent: {
+            mediaPreview,
+            templateTitle,
+            templateMsg,
+            ...((isBtnTypeCtaAndroid || isBtnTypeCTaIos) && {
+              ctaData,
+            }),
+          },
+        }}
+        inAppAccountName={accountName}
+        templateLayoutType={templateLayoutType}
+        device={panes}
+      />
+    );
+  };
+
+  const isDisableDone = (device) => {
+    const isIosDevice = device === IOS;
+    const isAndroidDevice = device === ANDROID;
+    //if template name is not entered
+    if (isFullMode && templateName.trim() === '') {
+      return true;
+    }
+    //if template message is not entered
+    //for android
+    if (isAndroidDevice && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+      return true;
+    }
+    if (isIosDevice && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+      return true;
+    }//for ios
+
+    //if template title is not entered
+    //for android
+    if (isAndroidDevice && (titleAndroid.trim() === '' || templateTitleErrorAndroid)) {
+      return true;
+    }
+    if (isIosDevice && (titleIos.trim() === '' || templateTitleErrorIos)) {
+      return true;
+    }//for ios
+    //if media type is image and the mediaType file is not uploaded
+    if (isAndroidDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+      return true;
+    }
+    if (isIosDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+      return true;
+    }
+    //cta
+    if (isBtnTypeCtaAndroid) {
+      if (ctaDataAndroid[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;
+    }
+    if (isBtnTypeCTaIos) {
+      if (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;
+    }
+
+    // action link
+    if (addActionLinkAndroid && !deepLinkValueAndroid) {
+      return true;
+    }
+    if (addActionLinkIos && !deepLinkValueIos) {
+      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 (templateMediaType) {
+      case INAPP_MEDIA_TYPES.IMAGE:
+        androidMediaParams = {
+          image: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
+          style: BIG_PICTURE,
+        };
+        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: !isDisableDone(ANDROID) ? {
+              ...commonDevicePayload,
+              title: titleAndroid,
+              message: templateMessageAndroid,
+              bodyType: templateLayoutType,
+              expandableDetails: {
+                style: BIG_TEXT,
+                message: templateMessageAndroid,
+                ...androidMediaParams,
+                ...(isBtnTypeCtaAndroid && {
+                  ctas: getCtaPayload(ANDROID),
+                }),
+              },
+              custom: [],
+              ...(deepLinkValueAndroid && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
+              }),
+            } : {},
+            IOS: !isDisableDone(IOS) ? {
+              ...commonDevicePayload,
+              title: titleIos,
+              message: templateMessageIos,
+              bodyType: templateLayoutType,
+              expandableDetails: {
+                style: BIG_TEXT,
+                message: templateMessageIos,
+                ...iosMediaParams,
+                ...(isBtnTypeCTaIos && {
+                  ctas: getCtaPayload(IOS),
+                }),
+              },
+              custom: [],
+              ...(deepLinkValueIos && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
+              }),
+            } : {},
+          },
+        },
+      },
+      type: INAPP,
+      definition: {
+        accountId: id,
+        licenseCode: sourceAccountIdentifier,
+        mode: templateMediaType,
+      },
+    };
+    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}
+          {/* Creative layout type*/}
+          {(isFullMode || !isEditFlow) && (
+            <>
+              <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"
+              />
+            </>
+          )}
+          {/* device tab */}
+          <CapTab
+            panes={PANES.filter(
+              (devicePane) => devicePane?.isSupported === true
+            )}
+            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 ${!isFullMode && `inapp-footer-lib`}`}>
+        {
+          <>
+            <CapButton
+              onClick={onDoneCallback()}
+              disabled={isDisableDone(panes)}
+              className="inapp-create-btn"
+            >
+              {isEditFlow ? (
+                isFullMode ? (
+                  <FormattedMessage {...messages.update} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
+              ) : isFullMode ? (
+                <FormattedMessage {...messages.create} />
+              ) : (
+                <FormattedMessage {...globalMessages.done} />
+              )}
+            </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,
+});