@capillarytech/creatives-library 2.0.81 → 2.0.83

package/v2Components/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/v2Components/EmailMobilePreview/index.scss

@@ -0,0 +1,55 @@
+$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%;
+          // 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/v2Components/EmailPreview/_emailPreview.scss

@@ -0,0 +1,119 @@
+.modal-emailPreivew-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.56);
+  z-index: 10002;
+
+  #emailPreivew-container {
+    position: relative;
+    left: 20vw;
+    width: 80vw;
+    height: 100vh;
+    background: rgba(255,255,255,1);
+    // padding: 0 24px 0 24px;
+    overflow-y: auto;
+    // font-family: 'proxima-nova';
+    overflow: hidden;
+
+    .emailPreivew-header {
+      display: inline-flex;
+      width: 100%;
+      padding: 16px 24px;
+      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      margin-bottom: 6px;
+      height: 56px;
+      align-items: center;
+      .heading-title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 600;
+        width: 97%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:first-letter{
+          text-transform: capitalize;
+        }
+      }
+      .close-emailPreivew{
+        cursor: pointer;
+      }
+    }
+
+    #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%;
+            width: 100%;
+            height: 100%;
+            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;
+      }
+    }
+  }
+}
+
+.show-emailPreivew {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
+}
+.hide-emailPreivew {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s;
+}

package/v2Components/EmailPreview/index.js

@@ -0,0 +1,106 @@
+/**
+*
+* EmailPreview
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import moment from "moment";
+import messages from "./messages";
+import './_emailPreview.scss';
+import tabletBody from '../../assets/iPad.svg';
+import mobileBody from '../../assets/mobile.png';
+
+// this component will be deprecated after replacing with the v2 component.
+const deviceAspectRatio = {
+  desktop: {
+    height: "500",
+    width: "1024",
+  },
+  tablet: {
+    height: "600",
+    width: "520",
+  },
+  mobile: {
+    height: "600",
+    width: "320",
+  },
+};
+
+class EmailPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    console.log('URL tablet', tabletBody, mobileBody);
+    let messageContainerName = '';
+    if (this.props.device === 'tablet') {
+      messageContainerName = 'tablet-message-container';
+    } else if (this.props.device === 'mobile') {
+      messageContainerName = 'mobile-message-container';
+    }
+
+    return (
+      <div className={this.props.show ? "modal-emailPreivew-wrapper show-emailPreivew" : "modal-emailPreivew-wrapper hide-emailPreivew"}>
+        <div id="emailPreivew-container">
+          <div className="emailPreivew-header">
+            <div className="heading-title">
+              {this.props.header}
+            </div>
+            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
+              <i className="material-icons close-emailPreivew">close</i>
+            </div>
+          </div>
+
+          <div id="emailPreivew-content-wrapper">
+            <div id="emailPreivew-content">
+              {/* {this.props.content} */}
+              <div className="device-wrapper">
+                <div onClick={() => this.props.changePreviewDevice("desktop")} className={(this.props.device.toLowerCase() === "desktop") ? "device-name active" : "device-name"}>Desktop</div>
+                <div onClick={() => this.props.changePreviewDevice("tablet")} className={(this.props.device.toLowerCase() === "tablet") ? "device-name active" : "device-name"}>Tablet</div>
+                <div onClick={() => this.props.changePreviewDevice("mobile")} className={(this.props.device.toLowerCase() === "mobile") ? "device-name active" : "device-name"}>Mobile</div>
+              </div>
+              <div className="email-preview-container">
+                <div className={this.props.device === 'desktop' ? '' : "shell align-center"}>
+                  {this.props.device === 'tablet' ?
+                    <img src={tabletBody} alt="capillary" width="520" /> : ''}
+                  {this.props.device === 'mobile' ?
+                    <img src={mobileBody} alt="capillary" width="85%" /> : ''}
+                  <div className={messageContainerName}>
+                    <iframe srcDoc={this.props.content} {...deviceAspectRatio[this.props.device]} >
+                      <p>Your browser does not support iframes.</p>
+                    </iframe>
+                  </div>
+                </div>
+
+                {(this.props.lastModified && this.props.updatedByName) ? <div>
+                  <p className="preview-info" style={{ marginBottom: '8px', paddingTop: '8px'}}><FormattedMessage {...messages.lastModified} />: {moment(this.props.lastModified).format('MM-DD-YYYY')}</p>
+                  <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.updatedByName}</p>
+                </div> : ''}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+EmailPreview.propTypes = {
+  header: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+  content: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  show: PropTypes.bool,
+  device: PropTypes.string,
+  handleClose: PropTypes.func,
+  changePreviewDevice: PropTypes.func,
+  lastModified: PropTypes.string,
+  updatedByName: PropTypes.string,
+};
+
+export default EmailPreview;

package/v2Components/EmailPreview/messages.js

@@ -0,0 +1,17 @@
+/*
+ * Edmeditor Messages
+ *
+ * This contains all the text for the Edmeditor component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  lastModified: {
+    id: 'app.components.EmailPreview.lastModified',
+    defaultMessage: 'Last Modified On',
+  },
+  uploadedBy: {
+    id: 'app.components.EmailPreview.uploadedBy',
+    defaultMessage: 'Last Modified By',
+  },
+});

package/v2Components/EmailPreview/tests/index.test.js

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

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -0,0 +1,69 @@
+$classPrefix: email-preview-v2;
+.#{$classPrefix}{
+    #emailPreivew-container {
+        position: relative;
+        // padding: 0 24px 0 24px;
+        overflow-y: auto;
+        // font-family: 'proxima-nova';
+        overflow: hidden;
+
+        #email-iframe {
+          width: -webkit-fill-available;
+        }
+        #emailPreivew-content-wrapper{
+          width: 100%;
+          height: 90%;
+          // 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/v2Components/EmailPreviewV2/index.js

@@ -0,0 +1,132 @@
+/**
+*
+* 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 './messages';
+import './_emailPreviewV2.scss';
+import tabletBody from '../../assets/iPad.svg';
+import mobileBody from '../../assets/mobile.png';
+
+import {selectTemplateContent} from '../../containers/Templates/selectors';
+import * as templateActions from '../../containers/Templates/actions';
+
+const deviceAspectRatio = {
+  desktop: {
+    height: "500",
+    width: "1024",
+  },
+  tablet: {
+    height: "600",
+    width: "520",
+  },
+  mobile: {
+    height: "600",
+    width: "320",
+  },
+};
+const devices = {
+  mobile: 'mobile',
+  desktop: 'desktop',
+  tablet: 'tablet',
+};
+class EmailPreviewV2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentDevice: props.device || devices.desktop,
+    };
+  }
+  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
+    }
+  }
+  componentWillUnmount() {
+    this.props.templateActions.resetTemplateData();
+  }
+  changePreviewDevice = (ev) => {
+    this.setState({currentDevice: ev.currentTarget.id});
+  }
+  render() {
+    let messageContainerName = '';
+    const {currentDevice} = this.state;
+    const {templateContent} = this.props;
+
+    if (currentDevice === devices.tablet) {
+      messageContainerName = 'tablet-message-container';
+    } else if (currentDevice === devices.mobile) {
+      messageContainerName = 'mobile-message-container';
+    }
+    return (
+      <div className="email-preview-v2">
+        <CapSpin spinning={!templateContent}>
+          <div id="emailPreivew-container">
+            <div id="emailPreivew-content-wrapper">
+              <div id="emailPreivew-content">
+                <div className="device-wrapper">
+                  <div id={devices.desktop} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.desktop ? 'active' : ''}`}><FormattedMessage {...messages.desktop}/></div>
+                  <div id={devices.tablet} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.tablet ? 'active' : ''}`}><FormattedMessage {...messages.tablet}/></div>
+                  <div id={devices.mobile} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.mobile ? 'active' : ''}`}><FormattedMessage {...messages.mobile}/></div>
+                </div>
+                <div className="email-preview-container">
+                  <div className={currentDevice === devices.desktop ? '' : "shell align-center"}>
+                    {currentDevice === devices.tablet ?
+                      <img src={tabletBody} alt="capillary" width="520" /> : ''}
+                    {currentDevice === devices.mobile ?
+                      <img src={mobileBody} alt="capillary" width="85%" /> : ''}
+                    <div className={messageContainerName}>
+                      <iframe id="email-iframe" srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
+                        <p><FormattedMessage {...messages.noIframeSupport}/></p>
+                      </iframe>
+                    </div>
+                  </div>
+
+
+                </div>
+              </div>
+            </div>
+          </div>
+          {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>
+      </div>
+
+    );
+  }
+
+}
+
+EmailPreviewV2.propTypes = {
+  templateContent: PropTypes.string,
+  templateData: PropTypes.object,
+  templateActions: PropTypes.object,
+  device: PropTypes.string,
+};
+
+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)(EmailPreviewV2);

package/v2Components/EmailPreviewV2/messages.js

@@ -0,0 +1,41 @@
+/*
+ * EmailPreviewV2 Messages
+ *
+ * This contains all the text for the EmailPreviewV2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.EmailPreviewV2.header',
+    defaultMessage: 'This is the EmailPreviewV2 component !',
+  },
+  desktop: {
+    id: 'app.components.EmailPreviewV2.desktop',
+    defaultMessage: 'Desktop',
+  },
+  tablet: {
+    id: 'app.components.EmailPreviewV2.tablet',
+    defaultMessage: 'Tablet',
+  },
+  mobile: {
+    id: 'app.components.EmailPreviewV2.mobile',
+    defaultMessage: 'Mobile',
+  },
+  noIframeSupport: {
+    id: 'app.components.EmailPreviewV2.noIframeSupport',
+    defaultMessage: 'Your browser does not support iframes.',
+  },
+  showAllDevices: {
+    id: 'app.components.EmailPreviewV2.showAllDevices',
+    defaultMessage: 'Show all devices',
+  },
+  lastModified: {
+    id: 'app.components.PreviewSideBar.lastModified',
+    defaultMessage: 'Last Modified On',
+  },
+  uploadedBy: {
+    id: 'app.components.PreviewSideBar.uploadedBy',
+    defaultMessage: 'Last Modified By',
+  },
+});

package/v2Components/EmailPreviewV2/tests/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import EmailPreviewV2 from '../index';
+
+describe('<EmailPreviewV2 />', () => {
+  it('<EmailPreviewV2 /> without the templateData', () => {
+    const compoent = shallow(<EmailPreviewV2 templateData={{_id: 'test'}}/>);
+    expect(compoent).toMatchSnapshot();
+  });
+});