@capillarytech/creatives-library 3.0.19 → 3.0.21

package/containers/Templates/index.js

@@ -1082,7 +1082,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const updateDateTime = (moment().format('DD-MM-YYYY') === moment(template.updatedAt).format('DD-MM-YYYY')) ? moment(template.updatedAt).format('hh:mma') : moment(template.updatedAt).format('DD MMM YYYY');
       let content = '';
       temp.id = template._id;
-      if (this.state.channel === 'wechat') {
+      if (this.state.channel === 'wechat' && template.type.toLowerCase() === 'wechat') {
         let path = '';
         if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
           if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {

package/package.json

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

package/v2Components/EmailMobilePreview/index.js

@@ -12,7 +12,7 @@ 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 { CapSpin, CapButton, CapLabel } from '@capillarytech/cap-ui-library';
 import moment from 'moment';
 import EmailPreviewV2 from '../EmailPreviewV2';
 import messages from '../EmailPreviewV2/messages';
@@ -24,8 +24,8 @@ import * as templateActions from '../../containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {
-    height: "440",
-    width: "230",
+    height: "415",
+    width: "227",
   },
 };
 
@@ -65,9 +65,15 @@ class EmailMobilePreview extends React.Component {
     const {
       templateContent,
       enableShowAllDevices,
+      templateSubject,
     } = this.props;
     const { showAllDevices } = this.state;
 
+    const emailSubjectLabel = templateSubject && (
+      <CapLabel className="email-subject-mobile" type="label2">
+        <FormattedMessage {...messages.subject} /> {templateSubject}</CapLabel>
+    );
+
     return (
       <div className="email-mobile-preview-container">
         {showAllDevices ? (
@@ -87,8 +93,9 @@ class EmailMobilePreview extends React.Component {
                       </CapButton>
                       )}
                     <div className={"shell align-center"}>
+                      {emailSubjectLabel}
                       <img src={mobileBody} alt="capillary" width="60%" />
-                      <div className={messageContainerName}>
+                      <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                         <iframe srcDoc={templateContent} {...deviceAspectRatio.mobile} >
                           <p><FormattedMessage {...messages.noIframeSupport}/></p>
                         </iframe>
@@ -115,6 +122,7 @@ class EmailMobilePreview extends React.Component {
 
 EmailMobilePreview.propTypes = {
   templateContent: PropTypes.string,
+  templateSubject: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
   onClickShowInAllDevices: PropTypes.func,

package/v2Components/EmailMobilePreview/index.scss

@@ -33,15 +33,22 @@ $classPrefix: email-mobile-preview-container;
     
             }
             .email-preview-container{
-
+              .email-subject-mobile {
+                position: absolute;
+                top: 11.5%;
+                left: 26%;
+              }
               .mobile-message-container {
                 position: absolute;
                 top: 10.3%;
-                left: 24%;
+                left: 24.8%;
                 overflow: auto;
                 display: -webkit-box;
                 display: -ms-flexbox;
                 display: flex;
+                &.with-subject {
+                  top: 15%;
+                }
               }
             }
             padding: 0 0px 0 24px;

package/v2Components/EmailPreview/_emailPreview.scss

@@ -53,48 +53,47 @@
       // 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-device-tabs .ant-tabs-bar {
+          justify-content: center;
+          flex-direction: none;
         }
         .email-preview-container{
+          .shell {
+            position: relative;
+            -webkit-transform: unset;
+            transform: unset;
+            left: unset;
+            padding: unset;
+            width: unset;
+            display: flex;
+            justify-content: center;
+          }
+          .email-subject-mobile {
+            width: 310px;
+            text-align: left;
+            margin: 8px 0;
+            margin-left: 4px;
+          }
+          .email-subject-tablet {
+            width: 450px;
+            text-align: left;
+            margin: 8px 0;
+            margin-left: 4px;
+          }
+          .email-subject-desktop {
+            text-align: left;
+            margin-bottom: 8px;
+          }
           .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;

package/v2Components/EmailPreview/index.js

@@ -7,6 +7,10 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
+import styled from 'styled-components';
+import get from 'lodash/get';
+import { CapTab, CapIcon, CapLabel } from '@capillarytech/cap-ui-library';
+import { CAP_G01, CAP_G06, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/styled/variables';
 import { FormattedMessage } from 'react-intl';
 import moment from "moment";
 import messages from "./messages";
@@ -16,30 +20,49 @@ import mobileBody from '../../assets/mobile.png';
 
 // this component will be deprecated after replacing with the v2 component.
 const deviceAspectRatio = {
-  desktop: {
+  desktop: () => ({
     height: "500",
     width: "1024",
-  },
-  tablet: {
-    height: "600",
-    width: "520",
-  },
-  mobile: {
-    height: "600",
-    width: "320",
-  },
+  }),
+  tablet: (emailSubject) => ({
+    height: emailSubject ? "570" : "600",
+    width: "450",
+  }),
+  mobile: (emailSubject) => ({
+    height: emailSubject ? "570" : "600",
+    width: "310",
+  }),
 };
 
+const StyledCapIcon = styled(CapIcon)`
+  color: ${(props) => props.active ? CAP_G01 : CAP_G06};
+  font-size: ${FONT_SIZE_VL};
+`;
+
 class EmailPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
-    console.log('URL tablet', tabletBody, mobileBody);
+    const { device, content, versions = {} } = this.props;
+    const emailSubject = get(versions, 'base.subject');
     let messageContainerName = '';
-    if (this.props.device === 'tablet') {
+    let subjectClassName = 'email-subject-desktop';
+    if (device === 'tablet') {
       messageContainerName = 'tablet-message-container';
-    } else if (this.props.device === 'mobile') {
+      subjectClassName = "email-subject-tablet";
+    } else if (device === 'mobile') {
       messageContainerName = 'mobile-message-container';
+      subjectClassName = "email-subject-mobile";
     }
 
+    const emailSubjectLabel = emailSubject && (
+      <CapLabel className={subjectClassName} type="label2">
+        <FormattedMessage {...messages.subject} /> {emailSubject}</CapLabel>
+    );
+    const iframeDiv = (<div className={`${messageContainerName}`}>
+      {emailSubjectLabel}
+      <iframe srcDoc={content} {...deviceAspectRatio[device](emailSubject)} >
+        <p>Your browser does not support iframes.</p>
+      </iframe>
+    </div>);
     return (
       <div className={this.props.show ? "modal-emailPreivew-wrapper show-emailPreivew" : "modal-emailPreivew-wrapper hide-emailPreivew"}>
         <div id="emailPreivew-container">
@@ -54,25 +77,41 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
 
           <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>
-
+              <CapTab
+                className="email-preview-device-tabs"
+                activeKey={this.props.device}
+                onChange={this.props.changePreviewDevice}
+                panes={[
+                  {
+                    key: 'desktop',
+                    tab: <StyledCapIcon type="desktop" active={device === 'desktop'} />,
+                    content: <div className="email-preview-container">
+                      {iframeDiv}
+                    </div>,
+                  },
+                  {
+                    key: 'tablet',
+                    tab: <StyledCapIcon type="tablet" active={device === 'tablet'} />,
+                    content: (<div className="email-preview-container">
+                      <div className="shell align-center">
+                        <img src={tabletBody} alt="capillary" width="520" />
+                        {iframeDiv}
+                      </div>
+                    </div>),
+                  },
+                  {
+                    key: 'mobile',
+                    tab: <StyledCapIcon type="mobile" active={device === 'mobile'} />,
+                    content: (<div className="email-preview-container">
+                      <div className="shell align-center">
+                        <img src={mobileBody} alt="capillary" width="350" />
+                        {iframeDiv}
+                      </div>
+                    </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>
@@ -101,6 +140,7 @@ EmailPreview.propTypes = {
   changePreviewDevice: PropTypes.func,
   lastModified: PropTypes.string,
   updatedByName: PropTypes.string,
+  versions: PropTypes.object,
 };
 
 export default EmailPreview;

package/v2Components/EmailPreview/messages.js

@@ -14,4 +14,8 @@ export default defineMessages({
     id: 'app.components.EmailPreview.uploadedBy',
     defaultMessage: 'Last modified by',
   },
+  subject: {
+    id: 'app.components.EmailPreview.subject',
+    defaultMessage: 'Subject:',
+  },
 });

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -16,6 +16,10 @@ $classPrefix: email-preview-v2;
           // display: table;
     
           #emailPreivew-content {
+            .email-preview-device-tabs .ant-tabs-bar {
+              justify-content: center;
+              flex-direction: none;
+            }
             .device-wrapper {
               display: inline-flex;
               margin-bottom: 8px;
@@ -37,25 +41,42 @@ $classPrefix: email-preview-v2;
     
             }
             .email-preview-container{
+              .shell {
+                position: relative;
+                -webkit-transform: unset;
+                transform: unset;
+                left: unset;
+                padding: unset;
+                width: unset;
+                display: flex;
+                justify-content: center;
+              }
+              .email-subject-mobile {
+                width: 310px;
+                text-align: left;
+                margin: 8px 0;
+                margin-left: 4px;
+              }
+              .email-subject-tablet {
+                width: 450px;
+                text-align: left;
+                margin: 8px 0;
+                margin-left: 4px;
+              }
+              .email-subject-desktop {
+                text-align: left;
+                margin-bottom: 8px;
+              }
               .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;
+                height: 100%;
               }
             }
             padding: 0 0px 0 24px;

package/v2Components/EmailPreviewV2/index.js

@@ -5,14 +5,15 @@
 */
 
 import React from 'react';
-// import styled from 'styled-components';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import {isEmpty} from 'lodash';
+import { isEmpty, get } from 'lodash';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { CapSpin } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapTab, CapIcon, CapLabel } from '@capillarytech/cap-ui-library';
+import { CAP_G01, CAP_G06, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/styled/variables';
 import moment from 'moment';
 import messages from './messages';
 import './_emailPreviewV2.scss';
@@ -23,24 +24,30 @@ import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
 import * as templateActions from '../../v2Containers/Templates/actions';
 
 const deviceAspectRatio = {
-  desktop: {
+  desktop: () => ({
     height: "500",
     width: "1024",
-  },
-  tablet: {
-    height: "600",
-    width: "520",
-  },
-  mobile: {
-    height: "600",
-    width: "320",
-  },
+  }),
+  tablet: (emailSubject) => ({
+    height: emailSubject ? "570" : "600",
+    width: "450",
+  }),
+  mobile: (emailSubject) => ({
+    height: emailSubject ? "570" : "600",
+    width: "310",
+  }),
 };
 const devices = {
   mobile: 'mobile',
   desktop: 'desktop',
   tablet: 'tablet',
 };
+
+const StyledCapIcon = styled(CapIcon)`
+  color: ${(props) => props.active ? CAP_G01 : CAP_G06};
+  font-size: ${FONT_SIZE_VL};
+`;
+
 class EmailPreviewV2 extends React.Component {
   constructor(props) {
     super(props);
@@ -57,31 +64,75 @@ class EmailPreviewV2 extends React.Component {
   componentWillUnmount() {
     this.props.templateActions.resetTemplateData();
   }
-  changePreviewDevice = (ev) => {
-    this.setState({currentDevice: ev.currentTarget.id});
+  changePreviewDevice = (device) => {
+    this.setState({currentDevice: device});
   }
   render() {
     let messageContainerName = '';
     const {currentDevice} = this.state;
-    const {templateContent} = this.props;
-
+    const { templateContent, templateData = {}, templateSubject } = this.props;
+    let subjectClassName = 'email-subject-desktop';
     if (currentDevice === devices.tablet) {
       messageContainerName = 'tablet-message-container';
+      subjectClassName = "email-subject-tablet";
     } else if (currentDevice === devices.mobile) {
       messageContainerName = 'mobile-message-container';
+      subjectClassName = "email-subject-mobile";
     }
+    const emailSubject = get(templateData, 'versions.base.subject') || templateSubject;
+    const emailSubjectLabel = emailSubject && (
+      <CapLabel className={subjectClassName} type="label2">
+        <FormattedMessage {...messages.subject} /> {emailSubject}</CapLabel>
+    );
+    const iframeDiv = (<div className={`${messageContainerName}`}>
+      {emailSubjectLabel}
+      <iframe srcDoc={templateContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
+        <p>Your browser does not support iframes.</p>
+      </iframe>
+    </div>);
+
+
     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">
+                <CapTab
+                  className="email-preview-device-tabs"
+                  activeKey={currentDevice}
+                  onChange={this.changePreviewDevice}
+                  panes={[
+                    {
+                      key: 'desktop',
+                      tab: <StyledCapIcon type="desktop" active={currentDevice === 'desktop'} />,
+                      content: <div className="email-preview-container">
+                        {iframeDiv}
+                      </div>,
+                    },
+                    {
+                      key: 'tablet',
+                      tab: <StyledCapIcon type="tablet" active={currentDevice === 'tablet'} />,
+                      content: (<div className="email-preview-container">
+                        <div className="shell align-center">
+                          <img src={tabletBody} alt="capillary" width="520" />
+                          {iframeDiv}
+                        </div>
+                      </div>),
+                    },
+                    {
+                      key: 'mobile',
+                      tab: <StyledCapIcon type="mobile" active={currentDevice === 'mobile'} />,
+                      content: (<div className="email-preview-container">
+                        <div className="shell align-center">
+                          <img src={mobileBody} alt="capillary" width="350" />
+                          {iframeDiv}
+                        </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" /> : ''}
@@ -95,7 +146,7 @@ class EmailPreviewV2 extends React.Component {
                   </div>
 
 
-                </div>
+                </div> */}
               </div>
             </div>
           </div>
@@ -115,6 +166,7 @@ class EmailPreviewV2 extends React.Component {
 
 EmailPreviewV2.propTypes = {
   templateContent: PropTypes.string,
+  templateSubject: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
   device: PropTypes.string,

package/v2Components/EmailPreviewV2/messages.js

@@ -38,4 +38,8 @@ export default defineMessages({
     id: 'app.components.PreviewSideBar.uploadedBy',
     defaultMessage: 'Last modified by',
   },
+  subject: {
+    id: 'app.components.PreviewSideBar.uploadedBy',
+    defaultMessage: 'Subject:',
+  },
 });

package/v2Containers/Templates/index.js

@@ -1716,6 +1716,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             device={this.state.device}
             handleClose={this.toggleEmailPreview}
             changePreviewDevice={this.changePreviewDevice}
+            versions={_.get(this.state, 'previewTemplate.versions', {})}
             lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
             updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
           />}