@capillarytech/creatives-library 2.0.22 → 2.0.24

package/assets/iPad.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="407px" height="574px" viewBox="0 0 407 574" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>iPad-PNG-Free-Download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Full-page-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <image id="iPad-PNG-Free-Download" x="0" y="0" width="407" height="574" xlink:href="data:image/png;base64,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"></image>
+    </g>
+</svg>

package/components/EmailPreview/index.js

@@ -11,9 +11,10 @@ import { FormattedMessage } from 'react-intl';
 import moment from "moment";
 import messages from "./messages";
 import './_emailPreview.scss';
-const tabletBody = require('./assets/images/iPad.svg');
-const mobileBody = require('./assets/images/mobile.png');
+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",

package/components/EmailPreviewV2/_emailPreviewV2.scss

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

package/components/EmailPreviewV2/index.js

@@ -0,0 +1,123 @@
+/**
+*
+* 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 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: devices.desktop,
+    };
+  }
+  componentWillMount() {
+    const {templateData, templateContent} = this.props;
+    if (isEmpty(templateContent) && templateData._id) {
+      this.props.templateActions.getTemplateDetails(templateData._id);
+    }
+  }
+  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 srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
+                        <p><FormattedMessage {...messages.noIframeSupport}/></p>
+                      </iframe>
+                    </div>
+                  </div>
+
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </CapSpin>
+      </div>
+
+    );
+  }
+
+}
+
+EmailPreviewV2.propTypes = {
+  templateContent: PropTypes.string,
+  templateData: PropTypes.object,
+  templateActions: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  templateContent: selectTemplateContent(),
+});
+function mapDispatchToProps(dispatch) {
+  return {
+    templateActions: bindActionCreators(templateActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EmailPreviewV2);

package/components/EmailPreviewV2/messages.js

@@ -0,0 +1,30 @@
+/*
+ * 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.',
+  },
+
+});

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

package/containers/CreativesContainer/SlideBoxContent.js

@@ -6,7 +6,7 @@ import TemplatePreview from '../../components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
-import EmailPreview from '../../components/EmailPreview';
+import EmailPreviewV2 from '../../components/EmailPreviewV2';
 import * as constants from './constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -26,8 +26,6 @@ function SlideBoxContent(props) {
       getFormData,
       messageDetails,
       onCreateNew,
-      toggleShowSlideBox,
-      showSlideBox,
       currentChannel,
       onChannelChange,
     } = props;
@@ -44,11 +42,13 @@ function SlideBoxContent(props) {
   let isEmailEditWithContent = false;
   let isPreview = false;
   let isEmailPreview = false;
+  //let isEmailCreate = false;
   let channel = currentChannel;//for create mode
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
     isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+    //isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
@@ -76,15 +76,9 @@ function SlideBoxContent(props) {
       />
         )}
       {isEmailPreview && (
-        <EmailPreview
-          content={templateData.base.html_content}
-          device={this.state.device}
-          header={templateData.base.subject}
-          location={this.props.location}
-          show={showSlideBox}
-          handleClose={toggleShowSlideBox}
-          changePreviewDevice={this.changePreviewDevice}
-              />
+        <EmailPreviewV2
+          templateData={templateData}
+         />
       )
       }
       {isEditSms && (
@@ -107,7 +101,7 @@ function SlideBoxContent(props) {
         getDefaultTags={type}
           />
         )}
-      {isEditEmailWithId && (
+      {(isEditEmailWithId || isEmailEditWithContent) && (
       <Email
         location={{
           pathname: `/email`,
@@ -122,21 +116,6 @@ function SlideBoxContent(props) {
         getDefaultTags={type}
           />
         )}
-      {isEmailEditWithContent && (
-      <Email
-        location={{
-          pathname: `/email`,
-          query,
-        }}
-        route={{ name: 'email' }}
-        isGetFormData={isGetFormData}
-        getFormdata={getFormData}
-        params={{ id: templateData._id }}
-        templateData={templateData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
-      />
-        )}
     </CreativesWrapper>
   );
 }
@@ -150,8 +129,6 @@ SlideBoxContent.propTypes = {
   getFormData: PropTypes.func,
   messageDetails: PropTypes.object,
   onCreateNew: PropTypes.func,
-  toggleShowSlideBox: PropTypes.func,
-  showSlideBox: PropTypes.bool,
   onChannelChange: PropTypes.func,
   currentChannel: PropTypes.string,
 };

package/containers/Email/index.js

@@ -1005,21 +1005,23 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
       if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
         let injectedTags = _.cloneDeep(this.state.injectedTags);
-        delete injectedTags["Registration custom fields"];
-        delete injectedTags["Store custom fields"];
-        delete injectedTags["Transaction custom fields"];
-        injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-        console.log('new injected tags', nextProps.metaEntities.tags.custom);
-        if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
+        if (!_.isEmpty(injectedTags)) {
           delete injectedTags["Registration custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
           delete injectedTags["Store custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
           delete injectedTags["Transaction custom fields"];
+          injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
+          console.log('new injected tags', nextProps.metaEntities.tags.custom);
+          if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
+            delete injectedTags["Registration custom fields"];
+          }
+          if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
+            delete injectedTags["Store custom fields"];
+          }
+          if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
+            delete injectedTags["Transaction custom fields"];
+          }
+          this.setState({injectedTags});
         }
-        this.setState({injectedTags});
       }
 
       if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {

package/containers/TagList/index.js

@@ -38,7 +38,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('tag next props', nextProps.injectedTags, this.props.injectedTags);
+    if (_.isEmpty(this.props.injectedTags) && _.isEmpty(this.props.tags)) {
+      this.setState({loading: true});
+    }
     if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
       console.log('received new tags', nextProps);
       this.setState({loading: false});
@@ -177,7 +179,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   render() {
-    console.log('tags props 2', this.props);
     let tags = {};
     let injectedTags = {};
     if (this.props.injectedTags && !_.isEmpty(this.props.injectedTags)) {
@@ -190,7 +191,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     }
     tags = _.merge( {}, tags, injectedTags);
     console.log('merged tags', tags);
-        // console.log('tag list', this.renderTags(tags));
     return (
       <div className={this.props.className ? this.props.className : ''}>
         <CapTagList

package/containers/Templates/selectors.js

@@ -1,4 +1,5 @@
 import { createSelector } from 'reselect';
+import isEmpty from 'lodash/isEmpty';
 
 /**
  * Direct selector to the templates state domain
@@ -22,7 +23,18 @@ const makeSelectTemplates = () => createSelector(
 const makeSelectTemplatesResponse = () => createSelector(
   selectTemplatesDomain(), (templatesState) => templatesState.get('templates')
 );
+const selectTemplateContent = () => createSelector(
+  makeSelectTemplates(), (templates) => {
+    const {templateDetails} = templates;
+    if (!isEmpty(templateDetails)) {
+      const templateBase = templateDetails.versions.base;
+      const selectedLanguage = templateBase.selectedLanguages[0];
+      return templateBase[selectedLanguage]['template-content'];
+    }
+    return null;
+  }
+);
 
 export {
-  makeSelectTemplates, makeSelectTemplatesResponse,
+  makeSelectTemplates, makeSelectTemplatesResponse, selectTemplateContent,
 };

package/index.js

@@ -63,6 +63,7 @@ export {default as TagListSaga} from './containers/TagList/sagas';
 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 CreativesContainer} from './containers/CreativesContainer';
 
 export { CapContainer,

package/package.json

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