diff --git a/src/components/CookieConsent/CookieConsent.css b/src/components/CookieConsent/CookieConsent.css new file mode 100644 index 00000000..cc720194 --- /dev/null +++ b/src/components/CookieConsent/CookieConsent.css @@ -0,0 +1,56 @@ +@import '../../marketplace.css'; + +.root { + /* Fixed on top of everything */ + position: fixed; + top: 0; + z-index: 1000; + + /* Dimensions */ + width: 100vw; + padding: 17px 0; + + /* Layout */ + display: flex; + justify-content: center; + align-items: center; + + /* Colors */ + background-color: var(--matterColor); + color: var(--matterColorNegative); + + /* Cover Topbar on desktop */ + @media (--viewportMedium) { + padding: 20px 0; + } +} + +.message { + @apply --marketplaceH5FontStyles; + margin: 0 24px; +} + +.cookieLink { + color: var(--matterColorNegative); + border-bottom: 1px solid var(--matterColorNegative); + + &:hover { + text-decoration: none; + border-bottom: 1px solid transparent; + } +} + +.continueBtn { + /* Font */ + @apply --marketplaceH5FontStyles; + font-weight: var(--fontWeightSemiBold); + + /* Dimensions */ + padding: 3px 12px 3px 12px; + margin: 0 24px; + + background-color: transparent; + border: solid 1px var(--matterColorNegative); + border-radius: 4px; + cursor: pointer; +} diff --git a/src/components/CookieConsent/CookieConsent.js b/src/components/CookieConsent/CookieConsent.js new file mode 100644 index 00000000..47694d58 --- /dev/null +++ b/src/components/CookieConsent/CookieConsent.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; +import { ExternalLink } from '../../components'; +import classNames from 'classnames'; + +import css from './CookieConsent.css'; + +class CookieConsent extends Component { + constructor(props) { + super(props); + this.state = { show: false }; + this.onAcceptCookies = this.onAcceptCookies.bind(this); + this.saveCookieConsent = this.saveCookieConsent.bind(this); + } + + componentDidMount() { + const cookies = document.cookie.split('; ').reduce((acc, c) => { + const [name, value] = c.split('='); + return { ...acc, [name]: decodeURIComponent(value) }; + }, {}); + + if (cookies.euCookiesAccepted !== '1') { + this.setState({ show: true }); + } + } + + onAcceptCookies() { + this.saveCookieConsent(); + this.setState({ show: false }); + } + + saveCookieConsent() { + // We create date object and modify it to show date 10 years into the future. + let expirationDate = new Date(); + expirationDate.setFullYear(expirationDate.getFullYear() + 10); + // Save the cookie with expiration date + document.cookie = 'euCookiesAccepted=1; path=/; expires=' + expirationDate.toGMTString(); + } + + render() { + const { className, rootClassName } = this.props; + const isServer = typeof window === 'undefined'; + + // Server side doesn't know about cookie consent + if (isServer || !this.state.show) { + return null; + } else { + const cookieLink = ( + + + + ); + const classes = classNames(rootClassName || css.root, className); + + return ( +
+
+ +
+ +
+ ); + } + } +} + +const { string } = PropTypes; + +CookieConsent.defaultProps = { + className: null, + rootClassName: null, +}; + +CookieConsent.propTypes = { + className: string, + rootClassName: string, +}; + +export default CookieConsent; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index aabb74da..0b033c25 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -8,6 +8,7 @@ import routeConfiguration from '../../routeConfiguration'; import config from '../../config'; import { metaTagProps } from '../../util/seo'; import { canonicalRoutePath } from '../../util/routes'; +import { CookieConsent } from '../../components'; import facebookImage from '../../assets/saunatimeFacebook-1200x630.jpg'; import twitterImage from '../../assets/saunatimeTwitter-600x314.jpg'; @@ -191,6 +192,7 @@ class PageComponent extends Component { {metaTags} +