@capillarytech/creatives-library 2.0.52 → 2.0.53

package/components/EmailMobilePreview/index.js

@@ -0,0 +1,129 @@
+/**
+*
+* EmailPreviewV2
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {isEmpty} from 'lodash';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { CapSpin, CapButton } from '@capillarytech/cap-ui-library';
+import moment from 'moment';
+import EmailPreviewV2 from '../EmailPreviewV2';
+import messages from '../EmailPreviewV2/messages';
+import './index.scss';
+import mobileBody from '../../assets/mobile.png';
+
+import {selectTemplateContent} from '../../containers/Templates/selectors';
+import * as templateActions from '../../containers/Templates/actions';
+
+const deviceAspectRatio = {
+  mobile: {
+    height: "440",
+    width: "230",
+  },
+};
+
+class EmailMobilePreview extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      showAllDevices: false,
+    };
+  }
+  componentWillMount() {
+    const {templateData, templateContent} = this.props;
+    if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
+      this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
+    }
+  }
+  onClickShowInAllDevices = () => {
+    const { onClickShowInAllDevices } = this.props;
+    if (onClickShowInAllDevices) {
+      onClickShowInAllDevices();
+    } else {
+      this.setState({
+        showAllDevices: true,
+      });
+    }
+  }
+  render() {
+    const messageContainerName = 'mobile-message-container';
+    const {
+      templateContent,
+      enableShowAllDevices,
+    } = this.props;
+    const { showAllDevices } = this.state;
+
+    return (
+      <div className="email-mobile-preview-container">
+        {showAllDevices ? (
+          <EmailPreviewV2 {...this.props} />
+        ) : (
+          <CapSpin spinning={!templateContent}>
+            <div id="emailPreivew-container">
+              <div id="emailPreivew-content-wrapper">
+                <div id="emailPreivew-content">
+                  <div className="email-preview-container">
+                    {enableShowAllDevices && (
+                      <CapButton
+                        type="flat"
+                        onClick={this.onClickShowInAllDevices}
+                      >
+                        View in all devices
+                      </CapButton>
+                      )}
+                    <div className={"shell align-center"}>
+                      <img src={mobileBody} alt="capillary" width="60%" />
+                      <div className={messageContainerName}>
+                        <iframe srcDoc={templateContent} {...deviceAspectRatio.mobile} >
+                          <p><FormattedMessage {...messages.noIframeSupport}/></p>
+                        </iframe>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {this.props.templateData &&
+              [
+                <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
+                <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
+              ]
+            }
+          </CapSpin>
+        )}
+      </div>
+
+    );
+  }
+
+}
+
+EmailMobilePreview.propTypes = {
+  templateContent: PropTypes.string,
+  templateData: PropTypes.object,
+  templateActions: PropTypes.object,
+  onClickShowInAllDevices: PropTypes.func,
+  enableShowAllDevices: PropTypes.bool,
+};
+
+EmailMobilePreview.defaultProps = {
+  showDeviceSelection: true,
+};
+
+const mapStateToProps = (state, props) => createStructuredSelector({
+  templateContent: props.templateData ? selectTemplateContent() : () => props.templateContent, // when props has templateContent that means preview with content
+});
+function mapDispatchToProps(dispatch) {
+  return {
+    templateActions: bindActionCreators(templateActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EmailMobilePreview);

package/components/EmailMobilePreview/index.scss

@@ -0,0 +1,56 @@
+$classPrefix: email-mobile-preview-container;
+.#{$classPrefix}{
+    #emailPreivew-container {
+        position: relative;
+        // padding: 0 24px 0 24px;
+        overflow-y: auto;
+        // font-family: 'proxima-nova';
+        overflow: hidden;
+        #emailPreivew-content-wrapper{
+          width: 100%;
+          height: 90%;
+          overflow: auto;
+          // display: table;
+    
+          #emailPreivew-content {
+            .device-wrapper {
+              display: inline-flex;
+              margin-bottom: 8px;
+              margin-top: 16px;
+              .device-name {
+                padding: 6px 24px;
+                background: #E6F0FB;
+                border: 2px solid #E6F0FB;
+                font-family: "open-sans";
+                line-height: 20px;
+                font-size: 14px;
+                color: #4E92E5;
+                cursor: pointer;
+              }
+              .active {
+                background: #FFFFFF !important;
+                border: 2px solid #E6F0FB;
+              }
+    
+            }
+            .email-preview-container{
+
+              .mobile-message-container {
+                position: absolute;
+                top: 10.3%;
+                left: 24%;
+                overflow: auto;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+              }
+            }
+            padding: 0 0px 0 24px;
+            // display: table-cell;
+            // vertical-align: middle;
+            text-align: center;
+            margin-bottom: 36px;
+          }
+        }
+      }
+}

package/components/EmailPreviewV2/index.js

@@ -12,7 +12,7 @@ import {isEmpty} from 'lodash';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { CapSpin, CapSlideBox } from '@capillarytech/cap-ui-library';
+import { CapSpin } from '@capillarytech/cap-ui-library';
 import moment from 'moment';
 import messages from './messages';
 import './_emailPreviewV2.scss';
@@ -54,30 +54,10 @@ class EmailPreviewV2 extends React.Component {
       this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
     }
   }
+
   changePreviewDevice = (ev) => {
     this.setState({currentDevice: ev.currentTarget.id});
   }
-  getPreview = ({device, messageContainerName, templateContent}) => {
-    return (
-      <div className={device === devices.desktop ? '' : "shell align-center"}>
-        {device === devices.tablet ?
-          <img src={tabletBody} alt="capillary" width="520" /> : ''}
-        {device === devices.mobile ?
-          <img src={mobileBody} alt="capillary" width="85%" /> : ''}
-        <div className={messageContainerName}>
-          <iframe srcDoc={templateContent} {...deviceAspectRatio[device]} >
-            <p><FormattedMessage {...messages.noIframeSupport}/></p>
-          </iframe>
-        </div>
-      </div>
-    )
-  }
-  showAllDevices = () => {
-    this.setState({showSlideBox: true});
-  }
-  hideAllDevices = () => {
-    this.setState({showSlideBox: false});
-  }
   render() {
     let messageContainerName = '';
     const {currentDevice} = this.state;
@@ -90,7 +70,6 @@ class EmailPreviewV2 extends React.Component {
     }
     return (
       <div className="email-preview-v2">
-
         <CapSpin spinning={!templateContent}>
           <div id="emailPreivew-container">
             <div id="emailPreivew-content-wrapper">
@@ -118,9 +97,10 @@ class EmailPreviewV2 extends React.Component {
               </div>
             </div>
           </div>
-            {this.props.templateData &&
-            [<p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
-              <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
+          {this.props.templateData &&
+            [
+              <p className="preview-info" key="lastModified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
+              <p style={{marginBottom: '8px'}} key="uploadedBy" className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
             ]
         }
         </CapSpin>

package/containers/TemplatesV2/reducer.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * TemplatesV2 reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  loadingTemplates: true,
+  smsTemplates: [],
+  emailTemplates: [],
+  wechatTemplates: [],
+  mobilepushTemplates: [],
+});
+
+function templatesV2Reducer(state = initialState, action) {
+  const channelTemplates = `${action.channel}Templates`;
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.GET_TEMPLATES_REQUEST:
+      return state.set('loadingTemplates', true);
+    case types.GET_TEMPLATES_SUCESS:
+      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
+    case types.GET_TEMPLATES_FAILURE:
+      return state.set('loadingTemplates', false).set('error', action.error);
+    default:
+      return state;
+  }
+}
+
+export default templatesV2Reducer;

package/containers/TemplatesV2/sagas.js

@@ -0,0 +1,32 @@
+import { take, takeLatest, call, put, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+
+
+import * as types from './constants';
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+function* getTemplates(action) {
+  try {
+    const req = {
+      channel: action.channel,
+      queryParams: action.query,
+    };
+    const res = yield call(Api.getAllTemplates, req);
+    yield put({type: types.GET_TEMPLATES_SUCESS, templates: res.response.templates, channel: action.channel});
+  } catch (error) {
+    yield put({type: types.GET_TEMPLATES_FAILURE, error});
+  }
+}
+function* getTemplatesWatcher() {
+  const watcher = yield takeLatest(types.GET_TEMPLATES_REQUEST, getTemplates);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+// All sagas to be loaded
+export default [
+  defaultSaga,
+  getTemplatesWatcher,
+];

package/index.js

@@ -68,6 +68,7 @@ export {default as TagListReducer} from './containers/TagList/reducer';
 export {default as TemplatePreview} from './components/TemplatePreview';
 export {default as EmailPreview} from './components/EmailPreview';
 export {default as EmailPreviewV2} from './components/EmailPreviewV2';
+export {default as EmailMobilePreview} from './components/EmailMobilePreview';
 
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 

package/package.json

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