@capillarytech/creatives-library 2.0.56 → 2.0.57

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) {
@@ -2161,7 +2162,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "input":
           if (styling === 'semantic') {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             columns.push(
               <CapColumn key={val.id} span={val.width}>
                 <CapInput
@@ -2173,7 +2174,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={value || ""}
                   disabled={val.disabled}
                 />
               </CapColumn>
@@ -2193,6 +2194,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
         case "textarea":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
           if (styling === 'semantic') {
             columns.push(
               <CapColumn key="input" span={val.width}>
@@ -2204,7 +2206,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   style={val.style ? val.style : {}}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={value || ""}
                   rows={20}
                   disabled={val.disabled}
                   cols={20}
@@ -2518,7 +2520,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key={val.id} span={val.width}>
@@ -2530,7 +2532,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     style={val.style ? val.style : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
-                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    value={value || ""}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}
                   />
@@ -2551,6 +2553,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
           case "textarea":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key="input" span={val.width} offset={val.offset}>
@@ -2564,7 +2567,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    value={textValue || ""}
                     rows={10}
                     cols={2}
                   />

package/containers/CreativesContainer/SlideBoxContent.js

@@ -7,8 +7,10 @@ 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';
 import * as constants from './constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -32,8 +34,10 @@ function SlideBoxContent(props) {
       onChannelChange,
       onEmailModeChange,
       emailCreateMode,
+      onMobilepushModeChange,
+      mobilePushCreateMode,
       templateStep,
-      onEmailNextStep,
+      onCreateNextStep,
       cap,
       onResetStep,
       isFullMode,
@@ -49,6 +53,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 === 'CALLTASK';
   let isEditSms = false;
   let isEditEmailWithId = false;
@@ -56,11 +61,13 @@ function SlideBoxContent(props) {
   let isPreview = false;
   let isEmailPreview = false;
   let isEditCallTask = false;
+  let isEditMPush = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
     isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
+    isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
@@ -148,7 +155,7 @@ function SlideBoxContent(props) {
         templateData={templateData}
         type={type}
         step={templateStep}
-        showNextStep={onEmailNextStep}
+        showNextStep={onCreateNextStep}
         isFullMode={isFullMode}
         cap={cap}
         onResetStep={onResetStep}
@@ -172,6 +179,38 @@ function SlideBoxContent(props) {
         cap={cap}
           />
         )}
+      {isEditMPush &&
+        <MobliPushEdit
+          getFormLibraryData={getFormData}
+          setIsLoadingContent={setIsLoadingContent}
+          location={{
+            pathname: `/mobilepush/edit/`,
+            query,
+          }}
+          isFullMode={false}
+          isGetFormData={isGetFormData}
+          route={{ name: 'mobilepush' }}
+          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>
   );
 }
@@ -190,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/constants.js

@@ -8,5 +8,6 @@ export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
 export const EMAIL = "EMAIL";
 export const SMS = "SMS";
 export const CALL_TASK = "CALL_TASK";
+export const MOBILE_PUSH = "MOBILEPUSH";
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

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} from 'lodash';
+import {isEmpty, get} 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({
@@ -136,6 +138,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;
     }
@@ -149,6 +164,28 @@ class Creatives extends React.Component {
     } else if (channel === constants.EMAIL && template.value.base) {
       templateData.emailBody = template.value.base.html_content;
       templateData.emailSubject = template.value.base.subject;
+    } else if (channel === constants.MOBILE_PUSH && get(template, "value.versions.base")) {
+      const mobilpushTemplate = template.value;
+      templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
+      const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
+      if (!isEmpty(androidContent)) {
+        delete androidContent.cuid;
+        delete androidContent.luid;
+        delete androidContent.communicationId;
+        templateData.androidContent = androidContent;
+        templateData.androidContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.androidContent.deviceType = 'ANDROID';
+      }
+      const iosContent = get(mobilpushTemplate, 'versions.base.IOS');
+      if (!isEmpty(iosContent)) {
+        delete iosContent.cuid;
+        delete iosContent.luid;
+        delete iosContent.communicationId;
+        templateData.iosContent = iosContent;
+        templateData.iosContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.iosContent.deviceType = 'IOS';
+      }
+      templateData.messageSubject = mobilpushTemplate.name;
     }
     return templateData;
   };
@@ -207,15 +244,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 === '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;
@@ -235,23 +276,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'}`)}>
@@ -286,10 +340,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() &&
@@ -298,7 +354,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/Email/index.js

@@ -2620,7 +2620,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         />}
         <ImagePreview
           header={imagePreviewHeader}
-          content={imagePreviewContent} 
+          content={imagePreviewContent}
           show={this.state.showImageSelectionBox}
           handleClose={this.handleImagePreviewClose}
           isLoading={this.props.Email.fetchingAllAssets}
@@ -2673,3 +2673,4 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
+

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/MobilePush/Edit/index.js

@@ -13,7 +13,7 @@ import { connect } from 'react-redux';
 import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape } from 'react-intl';
-import _ from 'lodash';
+import _, {get} from 'lodash';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
 import {makeSelectMetaEntities} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
@@ -186,9 +186,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!_.isEmpty(this.state.schema)) {
       this.injectEvents(this.state.schema);
     }
-    if (this.props.location.query && typeof this.props.location.query.module === 'undefined') { // when this containers is imported from creatives library
-      if (this.props.params.id) {
-        this.props.actions.getTemplateDetails(this.props.params.id);
+    if (this.props.location.query && (typeof this.props.location.query.module === 'undefined' || this.props.isFullMode === false)) { // when this containers is imported from creatives library
+      const templateId = get(this, "props.params.id");
+      if (templateId) {
+        this.props.actions.getTemplateDetails(templateId);
       } else {
         this.props.actions.setTemplateDetails(this.props.templateData);
       }
@@ -213,11 +214,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
       this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
-        if (nextProps.location.query.module !== 'loyalty' && this.props.params.id !== 'temp') {
-          this.props.actions.getTemplateDetails(this.props.params.id);
+        const templateId = get(this, "props.params.id");
+        if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
+          this.props.actions.getTemplateDetails(templateId);
         }
         const type = this.props.location.query.type;
-        if (type === 'embedded' && this.props.params.id === 'temp' && _.isEmpty(this.state.formData)) { // when his.props.params.id is temp that means mobile push template content will be passed from post message from parent with startTemplateCreation action
+        if (type === 'embedded' && templateId === 'temp' && _.isEmpty(this.state.formData)) { // when his.props.params.id is temp that means mobile push template content will be passed from post message from parent with startTemplateCreation action
           const response = {
             action: 'startTemplateCreation',
           };
@@ -595,7 +597,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
     };
     if (this.props.location.query && this.props.location.query.module !== 'dvs') {
-      obj.definition.mode = this.props.Edit.templateDetails.mode;
+      obj.definition.mode = this.props.Edit.templateDetails.mode || get(this, 'props.Edit.templateDetails.definition.mode');
     }
     const android = {};
     Object.keys(formData[0]).forEach((data) => {
@@ -2549,6 +2551,7 @@ Edit.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   templateData: PropTypes.object,
+  isFullMode: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/MobilePush/Edit/selectors.js

@@ -3,7 +3,8 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the create state domain
  */
-const selectMobilePushEditDomain = () => (state) => state.get('edit');
+const selectMobilePushEditDomain = () => (state, props) => props.isFullMode === false ? state.get('mobileEdit') : state.get('edit'); // reducer injected as mobileEdit in library mode.
+
 
 /**
  * Other specific selectors

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);

package/containers/MobilepushWrapper/messages.js

@@ -0,0 +1,25 @@
+/*
+ * MobilepushWrapper Messages
+ *
+ * This contains all the text for the MobilepushWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.MobilepushWrapper.header',
+    defaultMessage: 'This is MobilepushWrapper container !',
+  },
+  image: {
+    id: 'app.containers.MobilepushWrapper.image',
+    defaultMessage: 'Image content',
+  },
+  text: {
+    id: 'app.containers.MobilepushWrapper.text',
+    defaultMessage: 'Text content',
+  },
+  createMode: {
+    id: 'app.containers.MobilepushWrapper.createMode',
+    defaultMessage: 'Which type of content you want to create?',
+  },
+});

package/containers/MobilepushWrapper/tests/index.test.js

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

package/containers/Templates/index.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import {injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Select, Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard} from '@capillarytech/cap-ui-library';
+import { Row, Dropdown, Menu, Modal} from 'antd';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -44,7 +44,6 @@ import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 const MenuItem = Menu.Item;
-const Option = Select.Option;
 const {CapCustomCardList} = CapCustomCard;
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -1318,16 +1317,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           if (this.props.location.query.type === 'embedded' && (!this.props.location.query.module || (this.props.location.query.module && this.props.location.query.module !== 'library'))) {
             if (this.props.location.query.source_account_id && account.sourceAccountIdentifier === this.props.location.query.source_account_id) {
               accountOptions.push(
-                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+                { key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  label: account.name,
+                  value: account.name,
+                }
               );
             } else if (this.props.location.query.module && (this.state.channel.toUpperCase() === "WECHAT" || this.state.channel.toUpperCase() === "MOBILEPUSH")) {
               accountOptions.push(
-                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+                {
+                  key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  value: account.name,
+                  label: account.name,
+                }
               );
             }
           } else {
             accountOptions.push(
-              <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+              {
+                key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                value: account.name,
+                label: account.name,
+              }
             );
           }
         }
@@ -1336,17 +1346,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const pageHeader = (
       <div>
         {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
-          <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
-            {accountOptions}
-          </CapSelect>}
+          <CapSelect
+            className="selectAccount"
+            onSelect={this.onAccountSelect}
+            value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined}
+            placeholder={this.props.intl.formatMessage(messages.selectAccount)}
+            options={accountOptions}
+          />
+           }
       </div>
     );
     const pageHeaderDvs = (
       <div>
         {((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
-        <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
-          {accountOptions}
-        </CapSelect>}
+        <CapSelect
+          className="selectAccount"
+          onSelect={this.onAccountSelect}
+          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}
+          options={accountOptions}
+        />
+          }
       </div>
     );
     let actionButton = '';
@@ -1481,9 +1500,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
         <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
           <CapButton
             type={this.props.isFullMode ? "primary" : "secondary"}
             disabled={isLoading}
+            style={{marginLeft: '8px'}}
             onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
             { this.props.intl.formatMessage(messages.createNewActionButton) }
           </CapButton>
@@ -1506,10 +1527,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
       <div>
-        <Row className="template-header-container">
-          <div className="template-header">{(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}</div>
-        </Row>
-
         <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
@@ -1612,6 +1629,7 @@ Templates.propTypes = {
   isFullMode: PropTypes.bool,
   renderNewCardGrid: PropTypes.func,
   handlePeviewTemplate: PropTypes.func,
+  router: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/TemplatesV2/index.js

@@ -55,7 +55,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       {content: <div></div>, tab: 'Email', key: 'email'},
       // {content: <div></div>, tab: 'Call Task', key: 'calltask'},
       // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      // {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
+      {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
     ];
     const panes = this.setChannelContent(defaultChannel, deafaultPanes);
     this.state = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.56",
+  "version": "2.0.57",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",