mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-28 13:50:45 -04:00
feat(privacy banner): fix margin, move cookie logic to banner
This commit is contained in:
cori hudson
parent
9d7fed3935
commit
d7ca6dd6b2
3 changed files with 69 additions and 62 deletions
src
|
|
@ -1,3 +1,4 @@
|
|||
const bindAll = require('lodash.bindall');
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const connect = require('react-redux').connect;
|
||||
|
|
@ -6,45 +7,76 @@ const React = require('react');
|
|||
|
||||
const TitleBanner = require('../title-banner/title-banner.jsx');
|
||||
const Button = require('../forms/button.jsx');
|
||||
const jar = require('../../lib/jar.js');
|
||||
|
||||
require('./privacy-banner.scss');
|
||||
|
||||
const PrivacyBanner = ({
|
||||
user
|
||||
}) => {
|
||||
if (typeof user === 'undefined') {
|
||||
const PRIVACY_UPDATE_START_TIME = 1681826142976; // TODO: coordinate this later
|
||||
const PRIVACY_UPDATE_END_TIME = 1713434255000; // TODO: see above
|
||||
|
||||
class PrivacyBanner extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'shouldShowBanner',
|
||||
'handleCloseBanner'
|
||||
]);
|
||||
}
|
||||
|
||||
shouldShowBanner () {
|
||||
const seen = jar.get('scratchpolicyseen');
|
||||
return (
|
||||
Date.now() >= PRIVACY_UPDATE_START_TIME &&
|
||||
Date.now() < PRIVACY_UPDATE_END_TIME &&
|
||||
typeof seen === 'undefined' &&
|
||||
typeof this.props.user !== 'undefined'
|
||||
);
|
||||
}
|
||||
|
||||
handleCloseBanner () {
|
||||
const opts = {};
|
||||
this.setState({dismissedPrivacyBanner: true});
|
||||
jar.set('scratchpolicyseen', true, opts);
|
||||
}
|
||||
render () {
|
||||
const showBanner = this.shouldShowBanner();
|
||||
if (showBanner) {
|
||||
return (
|
||||
<TitleBanner className="privacy-banner">
|
||||
<div className="privacy-banner-container">
|
||||
<img
|
||||
aria-hidden="true"
|
||||
alt=""
|
||||
className="lightbulb-icon"
|
||||
src="/images/ideas/bulb-icon.svg"
|
||||
/>
|
||||
<div className="privacy-banner-centered">
|
||||
<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>
|
||||
</div>
|
||||
<Button
|
||||
isCloseType
|
||||
className="privacy-close-button"
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
onClick={this.handleCloseBanner}
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
);
|
||||
}
|
||||
|
||||
// if we're not showing the banner, return null to not render anything
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<TitleBanner className="privacy-banner">
|
||||
<div className="privacy-banner-container">
|
||||
<img
|
||||
aria-hidden="true"
|
||||
alt=""
|
||||
className="lightbulb-icon"
|
||||
src="/images/ideas/bulb-icon.svg"
|
||||
/>
|
||||
<div className="privacy-banner-centered">
|
||||
<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>
|
||||
</div>
|
||||
<Button
|
||||
isCloseType
|
||||
className="privacy-close-button"
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: state.session && state.session.session && state.session.session.user
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@
|
|||
|
||||
.privacy-banner {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
z-index: 8;
|
||||
background-color: $ui-blue-dark;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: -50px;
|
||||
margin-top: 50px;
|
||||
|
||||
.privacy-banner-container {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ 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,10 +18,6 @@ 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);
|
||||
|
|
@ -32,12 +27,10 @@ class Splash extends React.Component {
|
|||
'getHomepageRefreshStatus',
|
||||
'handleCloseAdminPanel',
|
||||
'handleCloseDonateBanner',
|
||||
'handleClosePrivacyBanner',
|
||||
'handleOpenAdminPanel',
|
||||
'handleDismiss',
|
||||
'shouldShowWelcome',
|
||||
'shouldShowEmailConfirmation',
|
||||
'shouldShowPrivacyBanner'
|
||||
'shouldShowEmailConfirmation'
|
||||
]);
|
||||
this.state = {
|
||||
adminPanelOpen: false,
|
||||
|
|
@ -129,11 +122,7 @@ 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: '',
|
||||
|
|
@ -184,22 +173,11 @@ class Splash extends React.Component {
|
|||
Date.now() >= SCRATCH_WEEK_START_TIME
|
||||
);
|
||||
}
|
||||
shouldShowPrivacyBanner () {
|
||||
const seen = jar.get('scratchpolicyseen');
|
||||
if (typeof seen === 'undefined') {
|
||||
return (
|
||||
this.props.user && // only show for logged in users
|
||||
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();
|
||||
|
|
@ -222,12 +200,10 @@ 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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue