@capillarytech/creatives-library 2.0.45 → 2.0.46

package/components/EmailMobilePreview/index.js

@@ -0,0 +1,108 @@
+/**
+*
+* 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 } from '@capillarytech/cap-ui-library';
+import moment from 'moment';
+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: "500",
+    width: "300",
+  },
+};
+
+class EmailMobilePreview extends React.Component {
+  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
+    }
+  }
+
+  getPreview = ({device, messageContainerName, templateContent}) => (
+    <div className={"shell align-center"}>
+      <img src={mobileBody} alt="capillary" width="85%" height="400px" />
+      <div className={messageContainerName}>
+        <iframe srcDoc={templateContent} {...deviceAspectRatio[device]} >
+          <p><FormattedMessage {...messages.noIframeSupport}/></p>
+        </iframe>
+      </div>
+    </div>
+  );
+
+  render() {
+    const messageContainerName = 'mobile-message-container';
+    const {currentDevice} = this.state;
+    const { templateContent } = this.props;
+
+    return (
+      <div className="email-preview-v2">
+
+        <CapSpin spinning={!templateContent}>
+          <div id="emailPreivew-container">
+            <div id="emailPreivew-content-wrapper">
+              <div id="emailPreivew-content">
+                <div className="email-preview-container">
+                  <div className={"shell align-center"}>
+                    <img src={mobileBody} alt="capillary" width="85%" />
+                    <div className={messageContainerName}>
+                      <iframe srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
+                        <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,
+};
+
+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,66 @@
+$classPrefix: email-preview-v2;
+.#{$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{
+              .tablet-message-container {
+                position: absolute;
+                top: 9%;
+                left: 10%;
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+              }
+              .mobile-message-container {
+                position: absolute;
+                top: 10.3%;
+                left: 14%;
+                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/containers/CreativesContainer/index.js

@@ -164,10 +164,11 @@ class Creatives extends React.Component {
       return newState;  
     });
   }
-  toggleShowSlideBox = () => {
+  handleClodeSlideBox = () => {
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
+      showSlideBox: false,
     }), this.props.handleCloseCreatives);
   };
   saveMessage = () => {
@@ -235,8 +236,6 @@ class Creatives extends React.Component {
               getFormData={this.getFormData}
               onCreateNew={this.onCreateNew}
               isGetFormData={isGetFormData}
-              toggleShowSlideBox={this.toggleShowSlideBox}
-              showSlideBox={showSlideBox}
               isFullMode={isFullMode}
               currentChannel={currentChannel.toUpperCase()}
               onChannelChange={this.onChannelChange}
@@ -262,7 +261,7 @@ class Creatives extends React.Component {
               shouldShowDoneFooter={this.shouldShowDoneFooter}
             />
           }
-          handleClose={this.toggleShowSlideBox}
+          handleClose={this.handleClodeSlideBox}
           show={showSlideBox}
           size="size-l"
         />

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/package.json

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