diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 39d61af9f..27c065828 100644 --- a/src/views/splash/presentation.jsx +++ b/src/views/splash/presentation.jsx @@ -35,6 +35,7 @@ const ShareProjectMessage = require('./activity-rows/share-project.jsx'); const DonateBanner = require('./donate/donate-banner.jsx'); const HOCTopBanner = require('./hoc/top-banner.jsx'); const HOCMiddleBanner = require('./hoc/middle-banner.jsx'); +const PrivacyBanner = require('./privacy/privacy-banner.jsx'); require('./splash.scss'); @@ -384,6 +385,13 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ) } + { + this.props.shouldShowPrivacyBanner && ( + + ) + } { this.props.shouldShowIntro && ( ( + +
+

+ The Scratch privacy policy has been updated, effective xx yy, 2023. + You can see the new policy here. +

+ +
+
+); + +PrivacyBanner.propTypes = { + onRequestClose: PropTypes.func +}; + +module.exports = injectIntl(PrivacyBanner); diff --git a/src/views/splash/privacy/privacy-banner.scss b/src/views/splash/privacy/privacy-banner.scss new file mode 100644 index 000000000..128780132 --- /dev/null +++ b/src/views/splash/privacy/privacy-banner.scss @@ -0,0 +1,34 @@ +@import '../../../colors'; + +.privacy-banner { + display: flex; + position: sticky; + z-index: 8; + background-color: $ui-blue; + overflow: hidden; + align-items: center; + justify-content: center; + margin-bottom: 0px; + padding: 8px 0; + + .privacy-banner-container { + display: flex; + align-items: center; + } + + .privacy-close-button { + right: 1rem; + top: auto; + } + + .privacy-banner-text { + color: $ui-white; + font-size: 1rem; + font-weight: bold; + } + + a { + color: $ui-white; + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 4bb52ca94..d9caf3f93 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -8,6 +8,7 @@ const log = require('../../lib/log'); const render = require('../../lib/render.jsx'); const sessionActions = require('../../redux/session.js'); const splashActions = require('../../redux/splash.js'); +const jar = require('../../lib/jar.js'); const Page = require('../../components/page/www/page.jsx'); const SplashPresentation = require('./presentation.jsx'); @@ -19,6 +20,9 @@ const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00 -- No end const HOC_START_TIME = 1668574800000; // 2022-11-16 00:00:00 GMT in ms const HOC_END_TIME = 1670821200000; // 2022-12-12 00:00:00 GMT in ms +const PRIVACY_UPDATE_START_TIME = 1681826142976; // TODO: coordinate this later +const PRIVACY_UPDATE_END_TIME = 1713434255000; // TODO: see above + class Splash extends React.Component { constructor (props) { super(props); @@ -28,10 +32,12 @@ class Splash extends React.Component { 'getHomepageRefreshStatus', 'handleCloseAdminPanel', 'handleCloseDonateBanner', + 'handleClosePrivacyBanner', 'handleOpenAdminPanel', 'handleDismiss', 'shouldShowWelcome', - 'shouldShowEmailConfirmation' + 'shouldShowEmailConfirmation', + 'shouldShowPrivacyBanner' ]); this.state = { adminPanelOpen: false, @@ -123,6 +129,11 @@ class Splash extends React.Component { handleCloseDonateBanner () { this.setState({dismissedDonateBanner: true}); } + handleClosePrivacyBanner () { + const opts = {}; + this.setState({dismissedPrivacyBanner: true}); + jar.set('scratchpolicyseen', true, opts); + } handleDismiss (cue) { api({ host: '', @@ -173,11 +184,19 @@ class Splash extends React.Component { Date.now() >= SCRATCH_WEEK_START_TIME ); } + shouldShowPrivacyBanner () { + const seen = jar.get('scratchpolicyseen'); + if (typeof seen === 'undefined') { + return Date.now() >= PRIVACY_UPDATE_START_TIME && Date.now() < PRIVACY_UPDATE_END_TIME; + } + return false; + } render () { const showEmailConfirmation = this.shouldShowEmailConfirmation() || false; const showDonateBanner = this.shouldShowDonateBanner() || false; const showHOCTopBanner = this.shouldShowHOCTopBanner() || false; const showHOCMiddleBanner = this.shouldShowHOCMiddleBanner() || false; + const showPrivacyBanner = this.shouldShowPrivacyBanner() || false; const showIntro = this.shouldShowIntro() || false; const showWelcome = this.shouldShowWelcome(); const homepageRefreshStatus = this.getHomepageRefreshStatus(); @@ -200,10 +219,12 @@ class Splash extends React.Component { shouldShowHOCTopBanner={showHOCTopBanner} shouldShowIntro={showIntro} shouldShowHOCMiddleBanner={showHOCMiddleBanner} + shouldShowPrivacyBanner={showPrivacyBanner} shouldShowWelcome={showWelcome} user={this.props.user} onCloseDonateBanner={this.handleCloseDonateBanner} onCloseAdminPanel={this.handleCloseAdminPanel} + onClosePrivacyBanner={this.handleClosePrivacyBanner} onDismiss={this.handleDismiss} onOpenAdminPanel={this.handleOpenAdminPanel} onRefreshHomepageCache={this.handleRefreshHomepageCache}