@capillarytech/creatives-library 2.0.44 → 2.0.46

package/components/CmsTemplatesComponent/index.js

@@ -14,6 +14,7 @@ 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>,

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/components/FormBuilder/_formBuilder.scss

@@ -1,12 +1,4 @@
-.ant-tabs-nav{
-  text-align: center;
-  color: #333333;
-  line-height: 24px;
-  font-size: 16px;
-  font-family: open-sans, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-}
+
 
 .form-tab-header{
   display: flex;
@@ -16,11 +8,7 @@
   font-weight: 600;
 }
 
-.ant-tabs-tab{
-  // border: 1px solid #1D5B96;
-  // border-bottom: 2px solid #1D5B96;
-  padding: 0 16px 0 8px !important;
-}
+
 
 .textarea-error-message {
   top: initial !important;