Refactor passing window properties to background image announcement via props

[MAILPOET-1430]
This commit is contained in:
Rostislav Wolny
2018-09-24 13:55:49 +02:00
parent 08cd4e09f9
commit 7b6d8afc53
2 changed files with 25 additions and 17 deletions

View File

@@ -2,22 +2,25 @@ import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import InAppAnnouncement from 'in_app_announcements/in_app_announcement.jsx'; import InAppAnnouncement from 'in_app_announcements/in_app_announcement.jsx';
const BackgroundImageAnnouncement = () => { const BackgroundImageAnnouncement = props => (
const heading = MailPoet.I18n.t('announcementBackgroundImagesHeading') <InAppAnnouncement
.replace('%username%', window.config.currentUserFirstName || window.config.currentUserUsername); validUntil={new Date('2018-10-06')}
return ( height="700px"
<InAppAnnouncement showOnlyOnceSlug="background_image"
validUntil={new Date('2018-10-06')} >
height="700px" <div className="mailpoet_in_app_announcement_background_videos">
showOnlyOnceSlug="background_image" <h2>
> {MailPoet.I18n.t('announcementBackgroundImagesHeading').replace('%username%', props.username)}
<div className="mailpoet_in_app_announcement_background_videos"> </h2>
<h2>{heading}</h2> <p>{MailPoet.I18n.t('announcementBackgroundImagesMessage')}</p>
<p>{MailPoet.I18n.t('announcementBackgroundImagesMessage')}</p> <video src={props.videoUrl} controls autoPlay><track kind="captions" /></video>
<video src={window.config.backgroundImageDemoUrl} controls autoPlay><track kind="captions" /></video> </div>
</div> </InAppAnnouncement>
</InAppAnnouncement> );
);
BackgroundImageAnnouncement.propTypes = {
username: React.PropTypes.string.isRequired,
videoUrl: React.PropTypes.string.isRequired,
}; };
module.exports = BackgroundImageAnnouncement; module.exports = BackgroundImageAnnouncement;

View File

@@ -20,7 +20,12 @@ const renderBreadcrumb = (newsletterType) => {
const renderAnnouncement = () => { const renderAnnouncement = () => {
const container = document.getElementById('mailpoet_editor_announcement'); const container = document.getElementById('mailpoet_editor_announcement');
ReactDOM.render(<BackgroundImageAnnouncement />, container); ReactDOM.render(
<BackgroundImageAnnouncement
username={window.config.currentUserFirstName || window.config.currentUserUsername}
videoUrl={window.config.backgroundImageDemoUrl}
/>, container
);
}; };
const initializeEditor = (config) => { const initializeEditor = (config) => {