scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-28 13:50:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions1

feat: wip: show privacy banner on all pages

Browse source
This commit is contained in:
cori hudson 2023-04-20 17:09:27 -04:00
parent 8d45c766c1
commit 9d7fed3935
5 changed files with 71 additions and 60 deletions
src
components
page/www
page.jsx
privacy-banner
privacy-banner.jsxprivacy-banner.scss
views/splash
presentation.jsx
privacy
privacy-banner.jsx

2
src/components/page/www/page.jsx
View file

@ -6,6 +6,7 @@ const Navigation = require('../../navigation/www/navigation.jsx');
const Footer = require('../../footer/www/footer.jsx');
const DonorRecognition = require('./donor-recognition.jsx');
const ErrorBoundary = require('../../errorboundary/errorboundary.jsx');
const PrivacyBanner = require('../../privacy-banner/privacy-banner.jsx');
const today = new Date();
const semi = today.getDate() === 1 && today.getMonth() === 3;
@ -25,6 +26,7 @@ const Page = ({
>
<Navigation />
</nav>
<PrivacyBanner />
<main id="view">
{children}
</main>

66
src/components/privacy-banner/privacy-banner.jsx Normal file
View file

@ -0,0 +1,66 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const connect = require('react-redux').connect;
const PropTypes = require('prop-types');
const React = require('react');
const TitleBanner = require('../title-banner/title-banner.jsx');
const Button = require('../forms/button.jsx');
require('./privacy-banner.scss');
const PrivacyBanner = ({
user
}) => {
if (typeof user === 'undefined') {
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
});
PrivacyBanner.propTypes = {
// onRequestClose: PropTypes.func
user: PropTypes.shape({
classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
thumbnailUrl: PropTypes.string,
username: PropTypes.string
})
};
const ConnectedPrivacyBanner = connect(
mapStateToProps
)(PrivacyBanner);
module.exports = injectIntl(ConnectedPrivacyBanner);

5
src/views/splash/privacy/privacy-banner.scss → src/components/privacy-banner/privacy-banner.scss
View file

@ -1,5 +1,5 @@
@import "../../../colors";
@import "../../../frameless";
@import "../../colors";
@import "../../frameless";
.privacy-banner {
@ -12,6 +12,7 @@
align-items: center;
justify-content: center;
margin-bottom: 0px;
margin-top: 50px;
.privacy-banner-container {
display: flex;

10
src/views/splash/presentation.jsx
View file

@ -35,7 +35,6 @@ 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');
@ -385,13 +384,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</MediaQuery>
)
}
{
this.props.shouldShowPrivacyBanner && (
<PrivacyBanner
onRequestClose={this.props.onClosePrivacyBanner}
/>
)
}
{
this.props.shouldShowIntro && (
<Intro
@ -541,7 +533,6 @@ 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,
@ -554,7 +545,6 @@ 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
};

48
src/views/splash/privacy/privacy-banner.jsx
View file

@ -1,48 +0,0 @@
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">
<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={onRequestClose}
>
<div className="action-button-text">
<FormattedMessage id="general.close" />
</div>
</Button>
</div>
</TitleBanner>
);
PrivacyBanner.propTypes = {
onRequestClose: PropTypes.func
};
module.exports = injectIntl(PrivacyBanner);