@capillarytech/creatives-library 2.0.52 → 2.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* EmailPreviewV2
|
|
4
|
+
*
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import React from 'react';
|
|
8
|
+
// import styled from 'styled-components';
|
|
9
|
+
import PropTypes from 'prop-types';
|
|
10
|
+
import { FormattedMessage } from 'react-intl';
|
|
11
|
+
import {isEmpty} from 'lodash';
|
|
12
|
+
import { connect } from 'react-redux';
|
|
13
|
+
import { bindActionCreators } from 'redux';
|
|
14
|
+
import { createStructuredSelector } from 'reselect';
|
|
15
|
+
import { CapSpin, CapButton } from '@capillarytech/cap-ui-library';
|
|
16
|
+
import moment from 'moment';
|
|
17
|
+
import EmailPreviewV2 from '../EmailPreviewV2';
|
|
18
|
+
import messages from '../EmailPreviewV2/messages';
|
|
19
|
+
import './index.scss';
|
|
20
|
+
import mobileBody from '../../assets/mobile.png';
|
|
21
|
+
|
|
22
|
+
import {selectTemplateContent} from '../../containers/Templates/selectors';
|
|
23
|
+
import * as templateActions from '../../containers/Templates/actions';
|
|
24
|
+
|
|
25
|
+
const deviceAspectRatio = {
|
|
26
|
+
mobile: {
|
|
27
|
+
height: "440",
|
|
28
|
+
width: "230",
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
class EmailMobilePreview extends React.Component {
|
|
33
|
+
constructor() {
|
|
34
|
+
super();
|
|
35
|
+
this.state = {
|
|
36
|
+
showAllDevices: false,
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
componentWillMount() {
|
|
40
|
+
const {templateData, templateContent} = this.props;
|
|
41
|
+
if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
|
|
42
|
+
this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
onClickShowInAllDevices = () => {
|
|
46
|
+
const { onClickShowInAllDevices } = this.props;
|
|
47
|
+
if (onClickShowInAllDevices) {
|
|
48
|
+
onClickShowInAllDevices();
|
|
49
|
+
} else {
|
|
50
|
+
this.setState({
|
|
51
|
+
showAllDevices: true,
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
render() {
|
|
56
|
+
const messageContainerName = 'mobile-message-container';
|
|
57
|
+
const {
|
|
58
|
+
templateContent,
|
|
59
|
+
enableShowAllDevices,
|
|
60
|
+
} = this.props;
|
|
61
|
+
const { showAllDevices } = this.state;
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div className="email-mobile-preview-container">
|
|
65
|
+
{showAllDevices ? (
|
|
66
|
+
<EmailPreviewV2 {...this.props} />
|
|
67
|
+
) : (
|
|
68
|
+
<CapSpin spinning={!templateContent}>
|
|
69
|
+
<div id="emailPreivew-container">
|
|
70
|
+
<div id="emailPreivew-content-wrapper">
|
|
71
|
+
<div id="emailPreivew-content">
|
|
72
|
+
<div className="email-preview-container">
|
|
73
|
+
{enableShowAllDevices && (
|
|
74
|
+
<CapButton
|
|
75
|
+
type="flat"
|
|
76
|
+
onClick={this.onClickShowInAllDevices}
|
|
77
|
+
>
|
|
78
|
+
View in all devices
|
|
79
|
+
</CapButton>
|
|
80
|
+
)}
|
|
81
|
+
<div className={"shell align-center"}>
|
|
82
|
+
<img src={mobileBody} alt="capillary" width="60%" />
|
|
83
|
+
<div className={messageContainerName}>
|
|
84
|
+
<iframe srcDoc={templateContent} {...deviceAspectRatio.mobile} >
|
|
85
|
+
<p><FormattedMessage {...messages.noIframeSupport}/></p>
|
|
86
|
+
</iframe>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
{this.props.templateData &&
|
|
94
|
+
[
|
|
95
|
+
<p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
|
|
96
|
+
<p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
</CapSpin>
|
|
100
|
+
)}
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
EmailMobilePreview.propTypes = {
|
|
109
|
+
templateContent: PropTypes.string,
|
|
110
|
+
templateData: PropTypes.object,
|
|
111
|
+
templateActions: PropTypes.object,
|
|
112
|
+
onClickShowInAllDevices: PropTypes.func,
|
|
113
|
+
enableShowAllDevices: PropTypes.bool,
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
EmailMobilePreview.defaultProps = {
|
|
117
|
+
showDeviceSelection: true,
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const mapStateToProps = (state, props) => createStructuredSelector({
|
|
121
|
+
templateContent: props.templateData ? selectTemplateContent() : () => props.templateContent, // when props has templateContent that means preview with content
|
|
122
|
+
});
|
|
123
|
+
function mapDispatchToProps(dispatch) {
|
|
124
|
+
return {
|
|
125
|
+
templateActions: bindActionCreators(templateActions, dispatch),
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export default connect(mapStateToProps, mapDispatchToProps)(EmailMobilePreview);
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
$classPrefix: email-mobile-preview-container;
|
|
2
|
+
.#{$classPrefix}{
|
|
3
|
+
#emailPreivew-container {
|
|
4
|
+
position: relative;
|
|
5
|
+
// padding: 0 24px 0 24px;
|
|
6
|
+
overflow-y: auto;
|
|
7
|
+
// font-family: 'proxima-nova';
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
#emailPreivew-content-wrapper{
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 90%;
|
|
12
|
+
overflow: auto;
|
|
13
|
+
// display: table;
|
|
14
|
+
|
|
15
|
+
#emailPreivew-content {
|
|
16
|
+
.device-wrapper {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
margin-bottom: 8px;
|
|
19
|
+
margin-top: 16px;
|
|
20
|
+
.device-name {
|
|
21
|
+
padding: 6px 24px;
|
|
22
|
+
background: #E6F0FB;
|
|
23
|
+
border: 2px solid #E6F0FB;
|
|
24
|
+
font-family: "open-sans";
|
|
25
|
+
line-height: 20px;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
color: #4E92E5;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
.active {
|
|
31
|
+
background: #FFFFFF !important;
|
|
32
|
+
border: 2px solid #E6F0FB;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
.email-preview-container{
|
|
37
|
+
|
|
38
|
+
.mobile-message-container {
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 10.3%;
|
|
41
|
+
left: 24%;
|
|
42
|
+
overflow: auto;
|
|
43
|
+
display: -webkit-box;
|
|
44
|
+
display: -ms-flexbox;
|
|
45
|
+
display: flex;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
padding: 0 0px 0 24px;
|
|
49
|
+
// display: table-cell;
|
|
50
|
+
// vertical-align: middle;
|
|
51
|
+
text-align: center;
|
|
52
|
+
margin-bottom: 36px;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -12,7 +12,7 @@ import {isEmpty} from 'lodash';
|
|
|
12
12
|
import { connect } from 'react-redux';
|
|
13
13
|
import { bindActionCreators } from 'redux';
|
|
14
14
|
import { createStructuredSelector } from 'reselect';
|
|
15
|
-
import { CapSpin
|
|
15
|
+
import { CapSpin } from '@capillarytech/cap-ui-library';
|
|
16
16
|
import moment from 'moment';
|
|
17
17
|
import messages from './messages';
|
|
18
18
|
import './_emailPreviewV2.scss';
|
|
@@ -54,30 +54,10 @@ class EmailPreviewV2 extends React.Component {
|
|
|
54
54
|
this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
+
|
|
57
58
|
changePreviewDevice = (ev) => {
|
|
58
59
|
this.setState({currentDevice: ev.currentTarget.id});
|
|
59
60
|
}
|
|
60
|
-
getPreview = ({device, messageContainerName, templateContent}) => {
|
|
61
|
-
return (
|
|
62
|
-
<div className={device === devices.desktop ? '' : "shell align-center"}>
|
|
63
|
-
{device === devices.tablet ?
|
|
64
|
-
<img src={tabletBody} alt="capillary" width="520" /> : ''}
|
|
65
|
-
{device === devices.mobile ?
|
|
66
|
-
<img src={mobileBody} alt="capillary" width="85%" /> : ''}
|
|
67
|
-
<div className={messageContainerName}>
|
|
68
|
-
<iframe srcDoc={templateContent} {...deviceAspectRatio[device]} >
|
|
69
|
-
<p><FormattedMessage {...messages.noIframeSupport}/></p>
|
|
70
|
-
</iframe>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
)
|
|
74
|
-
}
|
|
75
|
-
showAllDevices = () => {
|
|
76
|
-
this.setState({showSlideBox: true});
|
|
77
|
-
}
|
|
78
|
-
hideAllDevices = () => {
|
|
79
|
-
this.setState({showSlideBox: false});
|
|
80
|
-
}
|
|
81
61
|
render() {
|
|
82
62
|
let messageContainerName = '';
|
|
83
63
|
const {currentDevice} = this.state;
|
|
@@ -90,7 +70,6 @@ class EmailPreviewV2 extends React.Component {
|
|
|
90
70
|
}
|
|
91
71
|
return (
|
|
92
72
|
<div className="email-preview-v2">
|
|
93
|
-
|
|
94
73
|
<CapSpin spinning={!templateContent}>
|
|
95
74
|
<div id="emailPreivew-container">
|
|
96
75
|
<div id="emailPreivew-content-wrapper">
|
|
@@ -118,9 +97,10 @@ class EmailPreviewV2 extends React.Component {
|
|
|
118
97
|
</div>
|
|
119
98
|
</div>
|
|
120
99
|
</div>
|
|
121
|
-
|
|
122
|
-
[
|
|
123
|
-
<p
|
|
100
|
+
{this.props.templateData &&
|
|
101
|
+
[
|
|
102
|
+
<p className="preview-info" key="lastModified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
|
|
103
|
+
<p style={{marginBottom: '8px'}} key="uploadedBy" className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
|
|
124
104
|
]
|
|
125
105
|
}
|
|
126
106
|
</CapSpin>
|
|
@@ -390,7 +390,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
390
390
|
const message = getMessageObject('error', (nextProps.Email.createTemplateErrorMessage && nextProps.Email.createTemplateErrorMessage !== '') ? nextProps.Email.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
|
|
391
391
|
this.props.globalActions.addMessageToQueue(message);
|
|
392
392
|
}
|
|
393
|
-
if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData)) {
|
|
393
|
+
if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData) && !_.isEmpty(nextProps.Email.cmsData)) {
|
|
394
394
|
const formData = _.cloneDeep(this.state.formData);
|
|
395
395
|
if (nextProps.Email.langId && nextProps.Email.langId !== 'undefined') {
|
|
396
396
|
const langId = nextProps.Email.langId;
|
|
@@ -2671,4 +2671,4 @@ function mapDispatchToProps(dispatch) {
|
|
|
2671
2671
|
};
|
|
2672
2672
|
}
|
|
2673
2673
|
|
|
2674
|
-
export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
|
|
2674
|
+
export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
|
package/index.js
CHANGED
|
@@ -68,6 +68,7 @@ export {default as TagListReducer} from './containers/TagList/reducer';
|
|
|
68
68
|
export {default as TemplatePreview} from './components/TemplatePreview';
|
|
69
69
|
export {default as EmailPreview} from './components/EmailPreview';
|
|
70
70
|
export {default as EmailPreviewV2} from './components/EmailPreviewV2';
|
|
71
|
+
export {default as EmailMobilePreview} from './components/EmailMobilePreview';
|
|
71
72
|
|
|
72
73
|
CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
|
|
73
74
|
|