@capillarytech/creatives-library 3.0.3 → 3.0.4

package/assets/android-message-gui-2.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="360px" height="725px" viewBox="0 0 360 725" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Artboard Copy 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Artboard-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#FFFFFF" x="0" y="660" width="360" height="65"></rect>
+        <g id="Organisms/ui/android/screenshots/wallpaper" transform="translate(120.000000, 0.000000)"></g>
+        <g id="Group-5" transform="translate(16.000000, 680.000000)">
+            <polygon id="Stroke-1" stroke-opacity="0.0117647061" stroke="#000000" stroke-width="1.33333336e-11" points="0 0 23.999999 0 23.999999 23.999999 0 23.999999"></polygon>
+            <polygon id="Fill-3" fill="#7F7F7F" points="18.9999989 12.9999992 12.9999992 12.9999992 12.9999992 18.9999989 10.9999993 18.9999989 10.9999993 12.9999992 4.9999997 12.9999992 4.9999997 10.9999993 10.9999993 10.9999993 10.9999993 4.9999997 12.9999992 4.9999997 12.9999992 10.9999993 18.9999989 10.9999993"></polygon>
+        </g>
+        <text id="Add-text-to-this-mes" font-family="Roboto-Regular, Roboto" font-size="15" font-weight="normal" letter-spacing="0.3" fill="#959595">
+            <tspan x="53" y="697">Add text to this message</tspan>
+        </text>
+        <g id="Group-5" transform="translate(320.000000, 679.000000)">
+            <polygon id="Stroke-1" stroke-opacity="0.0117647061" stroke="#000000" stroke-width="1.33333336e-11" points="0 0 23.999999 0 23.999999 23.999999 0 23.999999"></polygon>
+            <polygon id="Fill-3" fill="#757575" points="2.00999988 20.9999987 22.9999986 11.9999993 2.00999988 2.99999982 1.99999988 9.9999994 16.999999 11.9999993 1.99999988 13.9999992"></polygon>
+        </g>
+        <rect id="Rectangle" stroke="#E6E6E6" fill="#F4F5F7" x="0.5" y="86.5" width="359" height="573"></rect>
+        <g id="Group">
+            <g id="Toolbar">
+                <polygon id="Toolbar-bg" fill="#E51FA3" points="360 0 0 0 0 86 360 86"></polygon>
+                <g id="Toolbar-contents" transform="translate(16.000000, 40.000000)">
+                    <g id="Back">
+                        <rect id="Bounds" x="0" y="0" width="24" height="24"></rect>
+                        <polygon id="Shape" fill="#FFFFFF" points="20 11 7.8 11 13.4 5.4 12 4 4 12 12 20 13.4 18.6 7.8 13 20 13"></polygon>
+                    </g>
+                </g>
+            </g>
+            <g id="Status-bar">
+                <rect id="Status-bar-bg" fill="#CF0E8F" x="0" y="0" width="360" height="24"></rect>
+                <rect id="bounds" x="242" y="0" width="118" height="24"></rect>
+                <g id="battery" transform="translate(337.000000, 4.000000)">
+                    <polygon id="bounds" points="0 0 16 0 16 16 0 16"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="9 1.875 9 1 6 1 6 1.875 3 1.875 3 15 12 15 12 1.875"></polygon>
+                </g>
+                <g id="cellular" transform="translate(317.000000, 4.000000)">
+                    <polygon id="bounds" points="0 0 16 0 16 16 0 16"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="0 15 14 15 14 1"></polygon>
+                </g>
+                <g id="wifi" transform="translate(296.000000, 4.000000)">
+                    <polygon id="bounds" points="2 0 18 0 18 16 2 16"></polygon>
+                    <path d="M0.977372085,4.01593123 C3.48821908,2.12256382 6.61301513,1 10,1 C13.3869849,1 16.5117809,2.12256382 19.0226279,4.01593123 L10,15 L0.977372085,4.01593123 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+            <g id="Icons-/-Navigation-24px-/-White-/-More" transform="translate(332.000000, 42.000000)">
+                <g id="More">
+                    <rect id="Bounds" x="0" y="0" width="12" height="24"></rect>
+                    <path d="M6,8 C7.1,8 8,7.1 8,6 C8,4.9 7.1,4 6,4 C4.9,4 4,4.9 4,6 C4,7.1 4.9,8 6,8 L6,8 Z M6,10 C4.9,10 4,10.9 4,12 C4,13.1 4.9,14 6,14 C7.1,14 8,13.1 8,12 C8,10.9 7.1,10 6,10 L6,10 Z M6,16 C4.9,16 4,16.9 4,18 C4,19.1 4.9,20 6,20 C7.1,20 8,19.1 8,18 C8,16.9 7.1,16 6,16 L6,16 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/components/CallTaskPreview/_callTaskPreview.scss

@@ -0,0 +1,17 @@
+.call-task-preview {
+  .call-task-subject-container {
+    padding: 8px;
+    background: #444;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .call-task-message-container {
+    overflow-y: auto;
+    height: 150px;
+    width: 100%;
+    font-size: 12px;
+    background: #eee;
+    padding: 8px;
+  }
+}

package/components/CallTaskPreview/index.js

@@ -0,0 +1,37 @@
+/**
+*
+* CallTaskPreview
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeaderPng from './images/Header.png';
+import FooterPng from './images/Footer.png';
+
+import './_callTaskPreview.scss';
+
+class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const { subject, messageBody } = this.props;
+    return (
+      <div className="call-task-preview">
+        <img style={{ width: '100%' }} src={HeaderPng} alt="header" />
+        <div className="call-task-subject-container">
+          {subject}
+        </div>
+        <div className="call-task-message-container">
+          {messageBody}
+        </div>
+        <img style={{ width: '100%' }} src={FooterPng} alt="footer" />
+      </div>
+    );
+  }
+}
+
+CallTaskPreview.propTypes = {
+  subject: PropTypes.string,
+  messageBody: PropTypes.string,
+};
+
+export default CallTaskPreview;

package/components/CallTaskPreview/messages.js

@@ -0,0 +1,13 @@
+/*
+ * CallTaskPreview Messages
+ *
+ * This contains all the text for the CallTaskPreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.CallTaskPreview.header',
+    defaultMessage: 'This is the CallTaskPreview component !',
+  },
+});

package/components/CallTaskPreview/tests/index.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CallTaskPreview from "../index";
+
+describe("<CallTaskPreview />", () => {
+  it("Test if Call task component renders", () => {
+    const component = shallow(
+      <CallTaskPreview
+        subject="this is test"
+        body="this is test message body"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

package/components/CmsTemplatesComponent/index.js

@@ -0,0 +1,33 @@
+/**
+*
+* CmsTemplatesComponent
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+const {CapCustomCardList} = CapCustomCard;
+function CmsTemplatesComponent(props) {
+  const cardDataList = props.cmsTemplates.map((template) => (
+    {
+      key: template.name,
+      title: template.name,
+      url: template.versions.base.preview_http_url,
+      hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
+    }));
+  return (<div>
+    <div className="pagination-container">
+      <CapCustomCardList cardList={cardDataList} type="Email" />
+    </div>
+  </div>);
+}
+
+CmsTemplatesComponent.propTypes = {
+  cmsTemplates: PropTypes.array,
+};
+
+export default CmsTemplatesComponent;

package/components/CmsTemplatesComponent/messages.js

@@ -0,0 +1,17 @@
+/*
+ * CmsTemplatesComponent Messages
+ *
+ * This contains all the text for the CmsTemplatesComponent component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.CmsTemplatesComponent.header',
+    defaultMessage: 'This is the CmsTemplatesComponent component !',
+  },
+  select: {
+    id: 'app.components.CmsTemplatesComponent.select',
+    defaultMessage: 'Select',
+  },
+});

package/components/CmsTemplatesComponent/tests/index.test.js

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

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,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/components/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/components/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/components/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/components/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();
+  });
+});