@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Containers/BeeEditor/index.js

@@ -3,14 +3,16 @@
 * Beeeditor
 *
 */
-import React, {
-  useEffect, useState, useRef, useCallback,
-} from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { bindActionCreators, compose } from 'redux';
+import TagList from '../TagList';
+import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
+import makeSelectBEE from './selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import config from '../../config/app';
 import { loadItem } from 'services/localStorageApi';
 import './index.scss';
 import CapModal from "@capillarytech/cap-ui-library/CapModal";
@@ -19,18 +21,18 @@ import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
 import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
 import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
-import config from '../../config/app';
-import makeSelectBEE from './selectors';
+import  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
+import { request,getAPICallObject } from '../../services/api';
 import messages from './messages';
 import * as beeActions from './actions';
+import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 import { v2BeeEditionSagas } from './sagas';
 import v2BeeEditionReducer from './reducer';
-
-import TagList from '../TagList';
-import injectSaga from '../../utils/injectSaga';
+import { compose } from 'redux';
 
 import { selectCurrentOrgDetails } from '../Cap/selectors';
+import { ENABLE_AI_SUGGESTIONS } from './constants';
 function BeeEditor(props) {
   const {
     uid,
@@ -59,10 +61,10 @@ function BeeEditor(props) {
   const UNSUBSCRIBE = 'unsubscribe';
   let beePluginInstance = null;
   const categoryOptions = [{key: 'cta', value: 'cta', label: formatMessage(messages.cta)},
-    {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
-    {key: 'header', value: 'header', label: formatMessage(messages.header)},
-    {key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
-    {key: 'others', value: 'others', label: formatMessage(messages.others)},
+  {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
+  {key: 'header', value: 'header', label: formatMessage(messages.header)},
+  {key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
+  {key: 'others', value: 'others', label: formatMessage(messages.others)},
   ];
   const [visibleTaglist, setVisibleTaglist] = useState(false);
   const [showRowMetaModal, setRowMetaModal] = useState(false);
@@ -92,8 +94,8 @@ function BeeEditor(props) {
     locale = JSON.parse(user).lang;
   }
   const defaultFormattedUrl = locale !== DEFAULT_LOCALE && ['zh-cn', 'zh', 'jp', 'ja-JP'].includes(locale)
-    ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
-    : "";
+      ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
+      : "";
   useEffect(() => {
     savedCallback.current = Object.keys(selectedTag).length > 0 ? selectedTag : rowMetaInfo;
   }, [selectedTag, rowMetaInfo]);
@@ -244,74 +246,70 @@ function BeeEditor(props) {
   const onChangeCategoy = (e) => {
     setRowCategory(e);
   };
-  const contentSection = (
-    <>
-      <CapInput
-        label={<FormattedMessage {...messages.rowName} />}
-        placeholder={formatMessage(messages.rowPlaceHolder)}
-        onChange={onRowChange}
-        value={rowName}
-        maxLength={50}
-        style={{ width: 324, paddingBottom: 21 }}
-      />
-      <CapSelect
-        label="Category"
-        style={{ width: 324, paddingBottom: 24}}
-        options={categoryOptions}
-        value={rowCategory || undefined}
-        placeholder={<FormattedMessage {...messages.selectCategoyPlaceholder} />}
-        onChange={onChangeCategoy}
-      />
+  const contentSection = <>
+    <CapInput
+      label={<FormattedMessage {...messages.rowName} />}
+      placeholder={formatMessage(messages.rowPlaceHolder)}
+      onChange={onRowChange}
+      value={rowName}
+      maxLength={50}
+      style={{ width: 324, paddingBottom: 21 }}
+    />
+    <CapSelect
+      label="Category"
+      style={{ width: 324, paddingBottom: 24}}
+      options={categoryOptions}
+      value={rowCategory || undefined}
+      placeholder={<FormattedMessage {...messages.selectCategoyPlaceholder} />}
+      onChange={onChangeCategoy}
+    />
 
-    </>
-  );
+  </>;
   return (
-    <CapSpin spinning={saveRowRequest || false}>
-      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
-      <TagList
-        moduleFilterEnabled={moduleFilterEnabled}
-        label={label}
-        onTagSelect={onTagSelect}
-        location={location}
-        tags={filteredTags}
-        injectedTags={injectedTags}
-        className={className}
-        id={id}
-        userLocale={userLocale}
-        selectedOfferDetails={selectedOfferDetails}
-        visibleTaglist={visibleTaglist}
-        hidePopover
-        modalProps={{
-          onCancel: onCancelTagList,
-          style: { left: 135, top: 250 },
-          className: "bee-editor-tag-list",
-        }}
-        onContextChange={onContextChange}
-        eventContextTags={eventContextTags}
-      />
-      <CapModal
-        className="custom-row-modal"
-        visible={showRowMetaModal}
-        onCancel={onCustomRowCancel}
-        title={formatMessage(messages.customRows)}
-        style={{
-          width: 372, height: 296, left: 135, top: 300,
-        }}
-        footer={[
-          <CapButton
-            key="submit"
-            type="primary"
-            id="delete-version"
-            onClick={onCustomRowSave}
-            disabled={isDisableSave()}
-          >
-            {formatMessage(messages.done)}
-          </CapButton>,
-        ]}
-      >
-        {contentSection}
-      </CapModal>
-    </CapSpin>
+      <CapSpin spinning={saveRowRequest || false}>
+        <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+        <TagList
+          moduleFilterEnabled={moduleFilterEnabled}
+          label={label}
+          onTagSelect={onTagSelect}
+          location={location}
+          tags={filteredTags}
+          injectedTags={injectedTags}
+          className={className}
+          id={id}
+          userLocale={userLocale}
+          selectedOfferDetails={selectedOfferDetails}
+          visibleTaglist={visibleTaglist}
+          hidePopover
+          modalProps={{
+            onCancel: onCancelTagList,
+            style: { left: 135, top: 250 },
+            className: "bee-editor-tag-list",
+          }}
+          onContextChange={onContextChange}
+          eventContextTags={eventContextTags}
+        />
+        <CapModal
+          className="custom-row-modal"
+          visible={showRowMetaModal}
+          onCancel={onCustomRowCancel}
+          title={formatMessage(messages.customRows)}
+          style={{ width: 372, height: 296, left: 135, top: 300 }}
+          footer={[
+            <CapButton
+              key="submit"
+              type="primary"
+              id="delete-version"
+              onClick={onCustomRowSave}
+              disabled={isDisableSave()}
+            >
+              {formatMessage(messages.done)}
+            </CapButton>,
+          ]}
+        >
+          {contentSection}
+        </CapModal>
+      </CapSpin>
   );
 }
 
@@ -338,7 +336,7 @@ BeeEditor.propTypes = {
 
 const mapStateToProps = () => createStructuredSelector({
   BEESelect: makeSelectBEE(),
-  currentOrgDetails: selectCurrentOrgDetails(),
+  currentOrgDetails: selectCurrentOrgDetails()
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -243,7 +243,7 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.componentsV2.CapDocumentUpload.imageDimenstionDescription": "Dimensions upto: {width}px x {height}px",
         "creatives.componentsV2.CapDocumentUpload.or": "OR",
         "creatives.componentsV2.CapDocumentUpload.uploadComputer": "Select from computer",
-        "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size upto: {size}",
+        "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size up to: {size}",
         "creatives.componentsV2.CapImageUpload.aspectRatio": "Aspect ratio: 1:1",
         "creatives.componentsV2.CapImageUpload.dragAndDrop": "Drag and drop image here",
         "creatives.componentsV2.CapImageUpload.format": "Format: JPEG, JPG, PNG",
@@ -251,13 +251,13 @@ exports[`<Cap /> should render correct component 1`] = `
         "creatives.componentsV2.CapImageUpload.imageErrorDesc": "Please upload the image with allowed file extension, size, dimension and aspect ratio",
         "creatives.componentsV2.CapImageUpload.imageGallery": "Gallery",
         "creatives.componentsV2.CapImageUpload.imageReUpload": "Reupload",
-        "creatives.componentsV2.CapImageUpload.imageSize": "Size upto: 2MB",
+        "creatives.componentsV2.CapImageUpload.imageSize": "Size up to: 2MB",
         "creatives.componentsV2.CapImageUpload.or": "OR",
         "creatives.componentsV2.CapImageUpload.uploadComputer": "Select from computer",
         "creatives.componentsV2.CapImageUpload.uploadGallery": "Gallery",
         "creatives.componentsV2.CapImageUpload.uploadImageDescription": "The relevant image that complements the message context.",
         "creatives.componentsV2.CapImageUpload.whatsappAspectRatio": "Max aspect ratio: 1.91:1",
-        "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size upto: 5MB",
+        "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size up to: 5MB",
         "creatives.componentsV2.CapTagList.Cancel": "Cancel",
         "creatives.componentsV2.CapTagList.Ok": "Ok",
         "creatives.componentsV2.CapTagList.all": "All",
@@ -1950,6 +1950,7 @@ new message content.",
         "creatives.containersV2.WeChat.templateName": "Template Name",
         "creatives.containersV2.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
         "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template edited successfully",
+        "creatives.containersV2.WebPush.addLabels": "Add labels",
         "creatives.containersV2.Whatsapp.IncorrectCategoryError": "INCORRECT CATEGORY: Message content different from expected content in the category selected. Refer {here} for expected content in each category.",
         "creatives.containersV2.Whatsapp.accountUpdate": "Account update",
         "creatives.containersV2.Whatsapp.accountUpdateTooltip": "Let customers know about updates or changes to their accounts.",

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -10,7 +10,6 @@ import SmsWrapper from '../SmsWrapper';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
-import InAppWrapper from '../InAppWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
@@ -29,6 +28,10 @@ import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
 import MobilePushNew from '../MobilePushNew';
+import WebPush from '../WebPush';
+import DevicePreviewContent from '../WebPush/Create/preview/DevicePreviewContent';
+import { LAYOUT_MODE } from '../WebPush/Create/preview/constants';
+import { WEBPUSH_CONTENT_FIELDS, WEBPUSH_TEMPLATE_PATHS } from '../WebPush/constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -116,11 +119,7 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
-      onInAppEditorTypeChange,
-      inAppEditorType,
       templateStep,
-      inAppCreateMode,
-      onInAppModeChange,
       onEnterTemplateName,
       onRemoveTemplateName,
       onCreateNextStep,
@@ -169,6 +168,7 @@ export function SlideBoxContent(props) {
       handleTestAndPreview,
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
+      supportedTags = [],
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -205,6 +205,7 @@ export function SlideBoxContent(props) {
   const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
+  const isCreateWebPush = isCreate && channel === constants.WEBPUSH;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
@@ -212,12 +213,14 @@ export function SlideBoxContent(props) {
   let isEmailPreview = false;
   let isMpushPreview = false;
   let isInappPreview = false;
+  let isWebPushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
   let isEditInApp = false;
+  let isEditWebPush = false;
   let isEditRcs = false;
   let isEditZalo = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
@@ -231,10 +234,12 @@ export function SlideBoxContent(props) {
     isEditFacebook = isEdit && channel === constants.FACEBOOK;
     isEditWhatsapp = isEdit && channel === constants.WHATSAPP;
     isEditRcs = isEdit && channel === constants.RCS;
+    isEditWebPush = isEdit && channel === constants.WEBPUSH;
     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;
+    isWebPushPreview = slidBoxContent === 'preview' && channel === constants.WEBPUSH;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
     isEditZalo = isEdit && channel?.toUpperCase() === constants.ZALO;
     isEditInApp = isEdit && channel === constants.INAPP;
@@ -482,8 +487,30 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           channel={channel}
           forwardedTags={forwardedTags}
-        />
+      />
       )}
+      {isWebPushPreview && (() => {
+        const webpushContent = get(templateData, WEBPUSH_TEMPLATE_PATHS.CONTENT, {});
+        const notificationTitle = webpushContent?.[WEBPUSH_CONTENT_FIELDS.TITLE] || '';
+        const notificationBody = webpushContent?.[WEBPUSH_CONTENT_FIELDS.MESSAGE] || '';
+        const imageSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.IMAGE] || '';
+        const brandIconSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.BRAND_ICON] || '';
+        // Extract URL from onClickAction or use empty string
+        const url = webpushContent?.[WEBPUSH_CONTENT_FIELDS.ON_CLICK_ACTION]?.url || '';
+        
+        return (
+          <div className="webpush-preview-container">
+            <DevicePreviewContent
+              notificationTitle={notificationTitle}
+              notificationBody={notificationBody}
+              url={url}
+              imageSrc={imageSrc}
+              brandIconSrc={brandIconSrc}
+              layoutMode={LAYOUT_MODE.COMPACT}
+            />
+          </div>
+        );
+      })()}
 
       {
         (currentChannel === constants.WECHAT && !!slidBoxContent) && <WechatWrapper
@@ -634,92 +661,44 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
-        location={location}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
-        (() => {
-          const supportCKEditor = commonUtil.hasSupportCKEditor();
-          // When supportCKEditor is true: Always use Email component (legacy flow)
-          if (supportCKEditor || templateData?.is_drag_drop) {
-            return (
-              <Email
-                key="cretives-container-email-edit"
-                setIsLoadingContent={setIsLoadingContent}
-                location={{
-                  pathname: `/email/edit`,
-                  query: { type: 'embedded', module: 'library'},
-                }}
-                route={{ name: 'email' }}
-                isGetFormData={isGetFormData}
-                getFormdata={getFormData}
-                params={{ id: templateData._id }}
-                templateData={templateData}
-                getFormSubscriptionData={getFormData}
-                getDefaultTags={type}
-                isFullMode={isFullMode}
-                editor={editor}
-                cap={cap}
-                showTemplateName={showTemplateName}
-                onValidationFail={onValidationFail}
-                forwardedTags={forwardedTags}
-                selectedOfferDetails={selectedOfferDetails}
-                onPreviewContentClicked={onPreviewContentClicked}
-                onTestContentClicked={onTestContentClicked}
-                moduleType={moduleType}
-                showLiquidErrorInFooter={showLiquidErrorInFooter}
-                eventContextTags={eventContextTags}
-                isLoyaltyModule={isLoyaltyModule}
-                showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-                handleTestAndPreview={handleTestAndPreview}
-                handleCloseTestAndPreview={handleCloseTestAndPreview}
-                isTestAndPreviewMode={isTestAndPreviewMode}
-              />
-            );
-          }     
-          // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
-          return (
-            <EmailWrapper
-              key="cretives-container-email-edit-wrapper"
-              setIsLoadingContent={setIsLoadingContent}
-              onEmailModeChange={onEmailModeChange}
-              emailCreateMode="editor"
-              isGetFormData={isGetFormData}
-              getFormdata={getFormData}
-              templateData={templateData}
-              type={type}
-              step="createTemplateContent"
-              showNextStep={onCreateNextStep}
-              isFullMode={isFullMode}
-              editor={editor}
-              cap={cap}
-              onResetStep={onResetStep}
-              showTemplateName={showTemplateName}
-              onEnterTemplateName={onEnterTemplateName}
-              onRemoveTemplateName={onRemoveTemplateName}
-              onValidationFail={onValidationFail}
-              forwardedTags={forwardedTags}
-              selectedOfferDetails={selectedOfferDetails}
-              onPreviewContentClicked={onPreviewContentClicked}
-              onTestContentClicked={onTestContentClicked}
-              getCmsTemplatesInProgress={getCmsTemplatesInProgress}
-              moduleType={moduleType}
-              showLiquidErrorInFooter={showLiquidErrorInFooter}
-              eventContextTags={eventContextTags}
-              isLoyaltyModule={isLoyaltyModule}
-              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-              handleTestAndPreview={handleTestAndPreview}
-              handleCloseTestAndPreview={handleCloseTestAndPreview}
-              isTestAndPreviewMode={isTestAndPreviewMode}
-              location={{
-                pathname: `/email/edit/${templateData._id}`,
-                query: { type: 'embedded', module: 'library', id: templateData._id },
-              }}
-              params={{ id: templateData._id }}
-            />
-          );
-        })()
-      )}
+      <Email
+        key="cretives-container-email-edit"
+        setIsLoadingContent={setIsLoadingContent}
+        location={{
+          pathname: `/email/edit`,
+          query: { type: 'embedded', module: 'library'},
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+        editor={editor}
+        cap={cap}
+        showTemplateName={showTemplateName}
+        onValidationFail={onValidationFail}
+        forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
+        moduleType={moduleType}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
+        isLoyaltyModule={isLoyaltyModule}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={(() => {
+          return isTestAndPreviewMode;
+        })()}
+      />
+        )}
       {isEditMPush && (
         (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
         (!isFullMode && isLoyaltyModule) || 
@@ -993,73 +972,65 @@ export function SlideBoxContent(props) {
         />
       )}
 
-      {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
-          date={new Date().getMilliseconds()}
-          setIsLoadingContent={setIsLoadingContent}
-          onInAppEditorTypeChange={onInAppEditorTypeChange}
-          inAppEditorType={inAppEditorType}
-          isGetFormData={isGetFormData}
-          getFormdata={getFormData}
-          templateData={templateData}
-          type={type}
-          step={templateStep}
-          showNextStep={onCreateNextStep}
-          isFullMode={isFullMode}
-          cap={cap}
-          onResetStep={onResetStep}
-          showTemplateName={showTemplateName}
-          onEnterTemplateName={onEnterTemplateName}
-          onRemoveTemplateName={onRemoveTemplateName}
-          onValidationFail={onValidationFail}
-          forwardedTags={forwardedTags}
-          selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
-          moduleType={moduleType}
-          showLiquidErrorInFooter={showLiquidErrorInFooter}
-          eventContextTags={eventContextTags}
-          onCreateComplete={onCreateComplete}
-          handleClose={handleClose}
-          getDefaultTags={type}
-          onInAppModeChange={onInAppModeChange}
-          inAppCreateMode={inAppCreateMode}
+      {isCreateInApp && (<InApp
+        isFullMode={isFullMode}
+        onCreateComplete={onCreateComplete}
+        handleClose={handleClose}
+        location={{
+          pathname: `/inapp/create`,
+          query,
+          search: '',
+        }}
+        getFormData={getFormData}
+        isGetFormData={isGetFormData}
+        templateData={templateData}
+        getDefaultTags={type}
+        eventContextTags={eventContextTags}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
+      />
+      )}
+
+      {isEditInApp && (<InApp
+        isFullMode={isFullMode}
+        templateData={templateData}
+        getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
+        onCreateComplete={onCreateComplete}
+        selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/inapp/edit`,
+          query,
+          search: '',
+        }}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
         />
       )}
 
-      {isEditInApp && (
-        <InApp
-          key={`creatives-inapp-edit-${templateData._id || 'new'}`}
-          isEditInApp={true}
+      {(isCreateWebPush || isEditWebPush) && (
+        <WebPush
           isFullMode={isFullMode}
-          templateData={templateData}
-          getFormData={getFormData}
-          getDefaultTags={type}
-          forwardedTags={forwardedTags}
+          handleClose={handleClose}
           onCreateComplete={onCreateComplete}
-          selectedOfferDetails={selectedOfferDetails}
-          eventContextTags={eventContextTags}
-          params={{
-            id: templateData._id,
-          }}
+          templateData={isEditWebPush ? templateData : undefined}
+          creativesMode={creativesMode}
+          params={isEditWebPush && templateData ? { id: templateData._id } : undefined}
           location={{
-            pathname: `/inapp/edit`,
+            pathname: isEditWebPush ? '/webpush/edit' : '/webpush/create',
             query,
             search: '',
           }}
-          showLiquidErrorInFooter={showLiquidErrorInFooter}
-          setIsLoadingContent={setIsLoadingContent}
-          onInAppModeChange={onInAppModeChange}
-          inAppCreateMode={inAppCreateMode}
-          isGetFormData={isGetFormData}
-          showTemplateName={showTemplateName}
-          onValidationFail={onValidationFail}
-          type={type}
-          query={query}
+          getDefaultTags={type}
+          forwardedTags={forwardedTags}
+          supportedTags={supportedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          eventContextTags={eventContextTags}
         />
       )}
-
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
@@ -1091,8 +1062,6 @@ SlideBoxContent.propTypes = {
   onSelectTemplate: PropTypes.func,
   onPreviewTemplate: PropTypes.func,
   templateData: PropTypes.object,
-  onInAppEditorTypeChange: PropTypes.func,
-  inAppEditorType: PropTypes.object,
   location: PropTypes.object,
   isGetFormData: PropTypes.bool,
   getFormData: PropTypes.func,
@@ -1118,6 +1087,7 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  supportedTags: PropTypes.array,
   selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
@@ -1133,7 +1103,7 @@ SlideBoxContent.propTypes = {
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
   fbAdManager: PropTypes.string,
-  showDisabledFBInfo: PropTypes.boolean,
+  showDisabledFBInfo: PropTypes.bool,
   orgUnitId: PropTypes.any,
   smsRegister: PropTypes.any,
   getCmsTemplatesInProgress: PropTypes.bool,