@capillarytech/creatives-library 2.0.59 → 2.0.61

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/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';
@@ -175,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';
@@ -184,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';

package/index.js

@@ -75,7 +75,7 @@ export {default as EmailPreview} from './components/EmailPreview';
 export {default as EmailPreviewV2} from './components/EmailPreviewV2';
 export {default as CallTaskPreview} from './components/CallTaskPreview';
 export {default as EmailMobilePreview} from './components/EmailMobilePreview';
-
+export {default as MobilePushPreview} from './components/MobilePushPreviewV2';
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
 export { CapContainer,

package/package.json

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