@capillarytech/creatives-library 2.0.93 → 2.0.95

package/containers/Templates/index.js

@@ -1287,7 +1287,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         header={this.state.previewTemplate.name}
         content={slideboxContent}
         show={this.state.showEmailPreviewModal}
-        handleClose={this.toggleImagePreview}
+        handleClose={this.togglePreview}
         width={60}
       />
     );

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -14,7 +14,7 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import { Menu, Dropdown } from 'antd';
-import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-react-ui-library';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpin } from '@capillarytech/cap-react-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';
@@ -970,7 +970,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     return (
       <div className="richmedia-container">
-        <CapSpinner spinning={this.state.loading}>
+        <CapSpin spinning={this.state.loading}>
           {this.state.showPreview && <WechatRichmediaTemplatePreview
             show={this.state.showPreview}
             closeSlideBox={this.closeSlideBox}
@@ -1012,7 +1012,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
               </CapRow>
             </div>
           </div>
-        </CapSpinner>
+        </CapSpin>
       </div>
     );
   }

package/package.json

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

package/v2Containers/Sms/Edit/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapSpinner, CapNotification } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -932,7 +932,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     return (
       <div className="sms-email-container">
-        <CapSpinner tip={tipText} spinning={spinning}>
+        <CapSpin tip={tipText} spinning={spinning}>
           {/*<CapRow style={{marginBottom: '16px', marginLeft: '-40px'}}>
             <CapColumn offset={1}>
               <Breadcrumb>
@@ -973,7 +973,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
               />
             </CapColumn>
           </CapRow>
-        </CapSpinner>
+        </CapSpin>
       </div>
     );
   }

package/v2Containers/Templates/index.js

@@ -392,7 +392,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
   onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
   onCreateComplete = () => {
-    this.setState({routeParams: null});
+    this.setState({routeParams: null, previewOpen: false});
   }
   getCurrentWindow(e) {
     const response = {
@@ -1291,7 +1291,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   toggleEmailPreview = () => {
-    this.setState({ showHtmlPreview: !this.state.showHtmlPreview }, () => {
+    this.setState({ showHtmlPreview: !this.state.showHtmlPreview, previewOpen: !this.state.previewOpen }, () => {
       if (!this.state.showHtmlPreview) {
         this.setState({previewTemplate: {}});
       }
@@ -1362,7 +1362,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         header={this.state.previewTemplate.name}
         content={slideboxContent}
         show={this.state.showEmailPreviewModal}
-        handleClose={this.toggleImagePreview}
+        handleClose={this.togglePreview}
         width={60}
       />
     );

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -14,7 +14,7 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import { Menu, Dropdown } from 'antd';
-import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpin } from '@capillarytech/cap-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';
@@ -970,7 +970,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     return (
       <div className="richmedia-container">
-        <CapSpinner spinning={this.state.loading}>
+        <CapSpin spinning={this.state.loading}>
           {this.state.showPreview && <WechatRichmediaTemplatePreview
             show={this.state.showPreview}
             closeSlideBox={this.closeSlideBox}
@@ -1012,7 +1012,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
               </CapRow>
             </div>
           </div>
-        </CapSpinner>
+        </CapSpin>
       </div>
     );
   }

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

@@ -1,55 +0,0 @@
-<?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

@@ -1,17 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-/**
-*
-* 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

@@ -1,13 +0,0 @@
-/*
- * 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

@@ -1,15 +0,0 @@
-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

@@ -1,33 +0,0 @@
-/**
-*
-* 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

@@ -1,17 +0,0 @@
-/*
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,129 +0,0 @@
-/**
-*
-* 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

@@ -1,55 +0,0 @@
-$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

@@ -1,69 +0,0 @@
-$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;
-          }
-        }
-      }
-}