@capillarytech/creatives-library 2.0.60 → 2.0.61

package/components/EmailPreview/assets/images/iPad.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="407px" height="574px" viewBox="0 0 407 574" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>iPad-PNG-Free-Download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Full-page-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <image id="iPad-PNG-Free-Download" x="0" y="0" width="407" height="574" xlink:href="data:image/png;base64,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"></image>
+    </g>
+</svg>

package/components/FormBuilder/index.js

@@ -556,7 +556,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(this.state.formData, (tab, index) => {
         let isCurrentTabValid = true;
         let skipValidation = false;
-        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0))) {
+        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0)) && isOnlyAndroid !== isOnlyIos) { 
+          // skip validation of the tab which is not open in embedded mode
           skipValidation = true;
         }
         if (!isNaN(index) && tab && !skipValidation) {

package/components/MobilePushPreviewV2/index.js

@@ -0,0 +1,120 @@
+/**
+*
+* PreviewSideBar
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { CapButton } from '@capillarytech/cap-ui-library';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Button } from 'antd';
+import { get, map, isEmpty} from 'lodash';
+import TemplatePreview from '../TemplatePreview';
+import '../PreviewSideBar/_previewsidebar.scss';
+import messages from './messages';
+const ButtonGroup = Button.Group;
+
+class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.goToEdit = this.goToEdit.bind(this);
+    this.goToDuplicate = this.goToDuplicate.bind(this);
+    this.changeDevice = this.changeDevice.bind(this);
+    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent');
+    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent');
+    let device = "android";
+    if (hasAndroid) {
+      device = 'android';
+    } else if (hasIos) {
+      device = 'ios';
+    }
+    this.state = {
+      device,
+      content: this.setContent(props.templateData, device),
+    };
+  }
+
+  setContent = (templateData, device) => {
+    const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+    const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+
+    const data = device === "android" ? androidContent : iosContent;
+    const content = {
+      header: data.title,
+      bodyText: data.message,
+      bodyImage: data.expandableDetails && data.expandableDetails.image,
+      actions: [],
+      appName: templateData.appName,
+    };
+    if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
+      if (device === "android" ) {
+        content.actions = map(data.expandableDetails.ctas, (cta) => ({label: cta.actionText}));
+      } else {
+        content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
+      }
+    }
+    return content;
+  }
+  goToDuplicate() {
+    this.props.onDuplicateClick(this.props.templateData);
+    this.props.handleClose();
+  }
+  changeDevice(ev) {
+    const device = ev.target.value;
+    const content = this.setContent(this.props.templateData, device);
+    this.setState({device, content });
+  }
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
+  }
+  render() {
+    const {templateData, channel} = this.props;
+
+    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+
+    const {device, content} = this.state;
+
+    return (
+
+      <div>
+        <div className="devices">
+          {!isEmpty(templateData) && hasAndroid && hasIos &&
+          <ButtonGroup onClick={this.changeDevice}>
+            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
+            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
+          </ButtonGroup>}
+        </div>
+        <TemplatePreview
+          device={device === "android" ? "android" : "iphone"}
+          channel={channel}
+          content={content || ''}
+          templateData={templateData}
+              >
+        </TemplatePreview>
+
+
+      </div>
+
+
+    );
+  }
+
+}
+
+MobilePushPreviewV2.propTypes = {
+  templateData: PropTypes.object.isRequired,
+  channel: PropTypes.string.isRequired,
+  showPreview: PropTypes.bool,
+  handleClose: PropTypes.func,
+  onEditClick: PropTypes.func,
+  onDuplicateClick: PropTypes.func,
+  location: PropTypes.object,
+  embedded: PropTypes.bool,
+};
+
+export default MobilePushPreviewV2;

package/components/MobilePushPreviewV2/messages.js

@@ -0,0 +1,13 @@
+/*
+ * MobilePushPreviewV2 Messages
+ *
+ * This contains all the text for the MobilePushPreviewV2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.MobilePushPreviewV2.header',
+    defaultMessage: 'This is the MobilePushPreviewV2 component !',
+  },
+});

package/components/MobilePushPreviewV2/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import MobilePushPreviewV2 from '../index';
+
+describe('<MobilePushPreviewV2 />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/components/TemplatePreview/index.js

@@ -155,7 +155,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
             : ''
         }
-        {this.props.templateData &&
+        {this.props.templateData && this.props.templateData.updatedByName &&
           [<p className="preview-info" key="preview-info-modified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
             <p style={{marginBottom: '8px'}} className="preview-info" key="preview-info-updated"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
           ]

package/containers/CreativesContainer/SlideBoxContent.js

@@ -7,6 +7,7 @@ import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
+import MobilepusWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../components/EmailPreviewV2';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
@@ -33,8 +34,10 @@ function SlideBoxContent(props) {
       onChannelChange,
       onEmailModeChange,
       emailCreateMode,
+      onMobilepushModeChange,
+      mobilePushCreateMode,
       templateStep,
-      onEmailNextStep,
+      onCreateNextStep,
       cap,
       onResetStep,
       isFullMode,
@@ -51,7 +54,7 @@ function SlideBoxContent(props) {
   let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
-  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
+  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === 'CALLTASK';
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
@@ -152,7 +155,7 @@ function SlideBoxContent(props) {
         templateData={templateData}
         type={type}
         step={templateStep}
-        showNextStep={onEmailNextStep}
+        showNextStep={onCreateNextStep}
         isFullMode={isFullMode}
         cap={cap}
         onResetStep={onResetStep}
@@ -181,7 +184,7 @@ function SlideBoxContent(props) {
           getFormLibraryData={getFormData}
           setIsLoadingContent={setIsLoadingContent}
           location={{
-            pathname: `/mobilepush`,
+            pathname: `/mobilepush/edit/`,
             query,
           }}
           isFullMode={false}
@@ -190,6 +193,24 @@ function SlideBoxContent(props) {
           templateData={templateData}
         />
         }
+      {isCreateMPush &&
+      <MobilepusWrapper
+        key="creatives-mobilepush-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onMobilepushModeChange={onMobilepushModeChange}
+        mobilePushCreateMode={mobilePushCreateMode}
+        isGetFormData={isGetFormData}
+        getFormData={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+        query={query}/>
+        }
     </CreativesWrapper>
   );
 }
@@ -208,11 +229,13 @@ SlideBoxContent.propTypes = {
   onEmailModeChange: PropTypes.func,
   emailCreateMode: PropTypes.string,
   templateStep: PropTypes.string,
-  onEmailNextStep: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
   onCallTaskSubmit: PropTypes.func,
   isFullMode: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { CapButton } from '@capillarytech/cap-ui-library';
 import PropTypes from 'prop-types';
 function SlideBoxFooter(props) {
-  const { slidBoxContent, onSave, messages, onEditTemplate, onEmailNextStep} = props;
+  const { slidBoxContent, onSave, messages, onEditTemplate, onCreateNextStep} = props;
   return (
     <div>
       <div>
@@ -13,7 +13,7 @@ function SlideBoxFooter(props) {
         </CapButton>
           )}
         {props.shouldShowContinueFooter() &&
-          <CapButton onClick={onEmailNextStep}>
+          <CapButton onClick={onCreateNextStep}>
             <FormattedMessage {...messages.continue} />
           </CapButton>
           }
@@ -31,7 +31,7 @@ SlideBoxFooter.propTypes = {
   onSave: PropTypes.func,
   messages: PropTypes.object,
   onEditTemplate: PropTypes.func,
-  onEmailNextStep: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
   shouldShowContinueFooter: PropTypes.func,
   shouldShowDoneFooter: PropTypes.func,
 };

package/containers/CreativesContainer/index.js

@@ -5,7 +5,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { injectIntl } from 'react-intl';
 import classnames from 'classnames';
-import {isEmpty, get} from 'lodash';
+import {isEmpty, get, forEach} from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
@@ -71,11 +71,11 @@ class Creatives extends React.Component {
   onChannelChange = (channel) => {
     this.setState({currentChannel: channel});
   }
-  onEmailNextStep = () => {
+  onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
       const {emailCreateMode, currentChannel} = prevState;
-      if (currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") {
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
         templateStep = prevState.templateStep + 2;
       }
 
@@ -88,7 +88,9 @@ class Creatives extends React.Component {
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: mode});
   }
-
+  onMobilepushModeChange = (mode) => {
+    this.setState({ mobilePushCreateMode: mode});
+  }
 
   onCallTaskSubmit = (data) => {
     this.props.getCreativesData({
@@ -118,10 +120,11 @@ class Creatives extends React.Component {
         const formData = {
           subject: templateData.emailSubject,
           html_content: templateData.emailBody,
-          is_drag_drop: false,
-          lang_id: 411,
-          iso_code: "en",
-          language: "English",
+          is_drag_drop: templateData.is_drag_drop,
+          lang_id: templateData.lang_id,
+          iso_code: templateData.iso_code,
+          language: templateData.language,
+          drag_drop_id: templateData.drag_drop_id,
         };
         creativesTeplateData = {
           base: formData,
@@ -136,6 +139,19 @@ class Creatives extends React.Component {
           edit: true,
           type: channel,
         };
+      } else if (channel === constants.MOBILE_PUSH) {
+        const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type');
+        creativesTeplateData = {
+          type: channel,
+          name: templateData.messageSubject,
+          versions: {
+            base: {
+              ANDROID: templateData.androidContent,
+              IOS: templateData.iosContent,
+            },
+          },
+          definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+        };
       }
       return creativesTeplateData;
     }
@@ -143,12 +159,14 @@ class Creatives extends React.Component {
   }
 
   getCreativesData = (channel, template) => { //from creatives to consumers
-    const templateData = {channel };
+    let templateData = {channel };
     if (channel === constants.SMS && template.value.base) {
       templateData.messageBody = template.value.base['sms-editor'];
     } else if (channel === constants.EMAIL && template.value.base) {
-      templateData.emailBody = template.value.base.html_content;
-      templateData.emailSubject = template.value.base.subject;
+      const emailBase = template.value.base;
+      templateData = {...templateData, ...emailBase, emailBody: emailBase.html_content, emailSubject: emailBase.subject};
+      delete templateData.html_content;
+      delete templateData.subject;
     } else if (channel === constants.MOBILE_PUSH && get(template, "value.versions.base")) {
       const mobilpushTemplate = template.value;
       templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
@@ -157,6 +175,11 @@ class Creatives extends React.Component {
         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(mobilpushTemplate, 'definition.mode').toUpperCase();
         templateData.androidContent.deviceType = 'ANDROID';
@@ -166,6 +189,11 @@ class Creatives extends React.Component {
         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(mobilpushTemplate, 'definition.mode').toUpperCase();
         templateData.iosContent.deviceType = 'IOS';
@@ -229,15 +257,19 @@ class Creatives extends React.Component {
   };
   shouldShowFooter = () => {
     const {isFullMode } = this.props;
-    const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
+    const {slidBoxContent, currentChannel, emailCreateMode, templateStep, mobilePushCreateMode} = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showFooter = false;
+    const isMobilepush = channel === constants.MOBILE_PUSH;
     if (!isFullMode ) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-      const isCallTask = channel === constants.CALL_TASK;
+      const isCallTask = channel === 'CALLTASK';
       showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview') && !isCallTask;
+      if (isMobilepush) {
+        showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(mobilePushCreateMode));
+      }
     } else if (channel === constants.EMAIL && isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showFooter = isEmailCreate && emailCreateMode;
@@ -257,23 +289,36 @@ class Creatives extends React.Component {
   shouldShowDoneFooter = () => {
     const {slidBoxContent, templateStep, currentChannel} = this.state;
     const currentStep = this.creativesTemplateSteps[templateStep];
-    const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
-    const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-    return isCreate;
+    let showDone = false;
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
+      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+    } else if (channel === constants.MOBILE_PUSH) {
+      showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
+    }
+
+    return showDone;
   }
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
-    const {slidBoxContent, templateStep, currentChannel, emailCreateMode} = this.state;
+    const {slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode} = this.state;
     let isShowContinueFooter = false;
-    if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
-      const currentStep = this.creativesTemplateSteps[templateStep];
-      let isEmailCreate = slidBoxContent === 'createTemplate';
-      isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
-      isShowContinueFooter = isEmailCreate && emailCreateMode;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
+        let isEmailCreate = slidBoxContent === 'createTemplate';
+        isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
+        isShowContinueFooter = isEmailCreate && emailCreateMode;
+      }
+    } else if (currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+      isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
     }
+
     return isShowContinueFooter;
   }
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode} = this.state;
     const {isFullMode, creativesMode, cap, isUploading} = this.props;
     return (
       <div className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
@@ -308,10 +353,12 @@ class Creatives extends React.Component {
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
               templateStep={this.creativesTemplateSteps[templateStep]}
-              onEmailNextStep={this.onEmailNextStep}
+              onCreateNextStep={this.onCreateNextStep}
               onResetStep={this.resetStep}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
+              onMobilepushModeChange={this.onMobilepushModeChange}
+              mobilePushCreateMode={mobilePushCreateMode}
             />
           }
           footer={this.shouldShowFooter() &&
@@ -320,7 +367,7 @@ class Creatives extends React.Component {
               onSave={this.saveMessage}
               onEditTemplate={this.onEditTemplate}
               slidBoxContent={slidBoxContent}
-              onEmailNextStep={this.onEmailNextStep}
+              onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}
               templateStep={this.creativesTemplateSteps[templateStep]}
               emailCreateMode={emailCreateMode}

package/containers/MobilePush/Create/index.js

@@ -504,10 +504,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
   getFormData = (e) => {
     console.log('posting final result', this.state.formData);
+    const templateData = this.getTransformedData(this.state.formData);
     const response = {
       action: "getFormData",
-      value: this.getTransformedData(this.state.formData),
+      value: templateData,
       validity: this.state.isFormValid,
+      type: templateData.type,
     };
     this.setState({checkValidation: true});
     if (e) {
@@ -2216,7 +2218,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 usingTabContainer
-                checkValidation={false}
+                checkValidation={this.state.checkValidation}
                 iosCtasData={this.state.iosCtasData}
                 tabKey={this.state.tabKey}
                 tabCount={2}

package/containers/MobilepushWrapper/index.js

@@ -0,0 +1,92 @@
+/*
+ *
+ * MobilepushWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import {CapRadioCard, CapHeader} from '@capillarytech/cap-ui-library';
+import {isEmpty} from 'lodash';
+import MobilepushCreate from '../MobilePush/Create';
+import messages from './messages';
+
+export class MobilepushWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.modes = [
+      {
+        title: <FormattedMessage {...messages.text}/>,
+        content: <FormattedMessage {...messages.text}/>,
+        value: 'text',
+        // onClick: () => {
+        //   this.emailUploader.current.click();
+        // },
+      },
+      {
+        title: <FormattedMessage {...messages.image}/>,
+        content: <FormattedMessage {...messages.image}/>,
+        value: 'image',
+      },
+    ];
+  }
+  onChange = (e) => {
+    this.props.onMobilepushModeChange( e.target.value );
+  };
+  render() {
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query} = this.props;
+    const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
+    return (
+      <div>
+        {step === "modeSelection" ?
+          <div>
+            <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
+            <CapRadioCard
+              panes={this.modes}
+              onChange={this.onChange}
+              selected={mobilePushCreateMode}
+          />
+          </div>
+        :
+          <div>
+            {isShowMobilepushCreate && <MobilepushCreate
+              getFormLibraryData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              location={{
+                pathname: `/mobilepush/create/${mobilePushCreateMode}`,
+                query,
+              }}
+              params={{mode: mobilePushCreateMode}}
+              isFullMode={false}
+              isGetFormData={isGetFormData}
+              route={{ name: 'mobilepush' }}
+          />
+
+
+          }
+          </div>
+       }
+      </div>
+    );
+  }
+}
+
+MobilepushWrapper.propTypes = {
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
+  step: PropTypes.string,
+  getFormData: PropTypes.string,
+  setIsLoadingContent: PropTypes.func,
+  isGetFormData: PropTypes.bool,
+  query: PropTypes.object,
+};
+
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(null, mapDispatchToProps)(MobilepushWrapper);