CookieConsent component

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

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 = (
+        <ExternalLink href="https://cookiesandyou.com" className={css.cookieLink}>
+          <FormattedMessage id="CookieConsent.cookieLink" />
+        </ExternalLink>
+      );
+      const classes = classNames(rootClassName || css.root, className);
+
+      return (
+        <div className={classes}>
+          <div className={css.message}>
+            <FormattedMessage id="CookieConsent.message" values={{ cookieLink }} />
+          </div>
+          <button className={css.continueBtn} onClick={this.onAcceptCookies}>
+            <FormattedMessage id="CookieConsent.continue" />
+          </button>
+        </div>
+      );
+    }
+  }
+}
+
+const { string } = PropTypes;
+
+CookieConsent.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+CookieConsent.propTypes = {
+  className: string,
+  rootClassName: string,
+};
+
+export default CookieConsent;

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}
           <script type="application/ld+json">{schemaArrayJSONString}</script>
         </Helmet>
+        <CookieConsent />
         <div
           className={css.content}
           style={scrollPositionStyles}

src/components/index.js

@@ -9,6 +9,7 @@ export {
   SecondaryButton,
   InlineTextButton,
 } from './Button/Button';
+export { default as CookieConsent } from './CookieConsent/CookieConsent';
 export { default as CurrencyInputField } from './CurrencyInputField/CurrencyInputField';
 export { default as DateInputField } from './DateInputField/DateInputField';
 export { default as DateRangeInputField } from './DateRangeInputField/DateRangeInputField';

src/translations/en.json

@@ -95,6 +95,9 @@
   "ContactDetailsPage.heading": "Email settings",
   "ContactDetailsPage.passwordTabTitle": "Password",
   "ContactDetailsPage.title": "Contact details",
+  "CookieConsent.continue": "Continue",
+  "CookieConsent.cookieLink": "cookies",
+  "CookieConsent.message": "Welcome to Saunatime, friend! We use {cookieLink} to enhance your browsing experience.",
   "DateInput.clearDate": "Clear Date",
   "DateInput.closeDatePicker": "Close",
   "DateInput.defaultPlaceholder": "Date input",