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

View File

@@ -20,7 +20,12 @@ const renderBreadcrumb = (newsletterType) => {
const renderAnnouncement = () => {
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) => {