feat(splash): add privacy banner (first draft)

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/
                         </MediaQuery>
                     )
                 }
+                {
+                    this.props.shouldShowPrivacyBanner && (
+                        <PrivacyBanner
+                            onRequestClose={this.props.onClosePrivacyBanner}
+                        />
+                    )
+                }
                 {
                     this.props.shouldShowIntro && (
                         <Intro
@@ -533,6 +541,7 @@ SplashPresentation.propTypes = {
     news: PropTypes.arrayOf(PropTypes.object),
     onCloseAdminPanel: PropTypes.func.isRequired,
     onCloseDonateBanner: PropTypes.func.isRequired,
+    onClosePrivacyBanner: PropTypes.func.isRequired,
     onDismiss: PropTypes.func.isRequired,
     onOpenAdminPanel: PropTypes.func.isRequired,
     onRefreshHomepageCache: PropTypes.func.isRequired,
@@ -545,6 +554,7 @@ SplashPresentation.propTypes = {
     shouldShowIntro: PropTypes.bool.isRequired,
     shouldShowHOCMiddleBanner: PropTypes.bool.isRequired,
     shouldShowWelcome: PropTypes.bool.isRequired,
+    shouldShowPrivacyBanner: PropTypes.bool.isRequired,
     user: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
 };
 

src/views/splash/privacy/privacy-banner.jsx

@@ -0,0 +1,40 @@
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+const Button = require('../../../components/forms/button.jsx');
+
+require('./privacy-banner.scss');
+
+const PrivacyBanner = ({
+    onRequestClose
+}) => (
+    <TitleBanner className="privacy-banner">
+        <div className="privacy-banner-container">
+            <p className="privacy-banner-text">
+                The Scratch privacy policy has been updated, effective xx yy, 2023.
+                You can see the new policy <a href="/privacy_policy">here</a>.
+            </p>
+            <Button
+                isCloseType
+                className="privacy-close-button"
+                key="closeButton"
+                name="closeButton"
+                type="button"
+                onClick={onRequestClose}
+            >
+                <div className="action-button-text">
+                    <FormattedMessage id="general.close" />
+                </div>
+            </Button>
+        </div>
+    </TitleBanner>
+);
+
+PrivacyBanner.propTypes = {
+    onRequestClose: PropTypes.func
+};
+
+module.exports = injectIntl(PrivacyBanner);

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;
+    }
+}

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}