From 10922b9cb8c7b30e611c04a4f896f4782b00170b Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MBP.hub>
Date: Wed, 14 Jul 2021 23:49:51 +1000
Subject: [PATCH] Accept cookies banner with link to privacy page. #103.

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../banner-cookies/banner-cookies.js          | 64 +++++++++++++++++++
 .../banner-cookies/banner-cookies.module.css  | 51 +++++++++++++++
 src/components/layout/layout.js               |  2 +
 src/styles/vars.module.css                    |  2 +
 6 files changed, 125 insertions(+)
 create mode 100644 src/components/banner-cookies/banner-cookies.js
 create mode 100644 src/components/banner-cookies/banner-cookies.module.css

diff --git a/package-lock.json b/package-lock.json
index 77585b6..41be8e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11590,6 +11590,11 @@
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
       "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index a55a920..339b82c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "gatsby-remark-images": "^5.1.0",
     "gatsby-source-filesystem": "^3.4.0",
     "gatsby-transformer-sharp": "^3.4.0",
+    "js-cookie": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
diff --git a/src/components/banner-cookies/banner-cookies.js b/src/components/banner-cookies/banner-cookies.js
new file mode 100644
index 0000000..0889c1d
--- /dev/null
+++ b/src/components/banner-cookies/banner-cookies.js
@@ -0,0 +1,64 @@
+/*
+ * JXTX Foundation
+ * https://www.jxtxfoundation.org
+ *
+ * JXTX cookies banner component.
+ */
+
+// Core dependencies
+import Link from "gatsby-link";
+import Cookies from "js-cookie";
+import React, { useEffect, useState } from "react";
+
+// App dependencies
+import Button from "../button/button";
+import { ButtonType } from "../button/button-type.model";
+
+// Styles
+import * as compStyles from "./banner-cookies.module.css";
+
+function BannerCookies() {
+  const [showBanner, setShowBanner] = useState(false);
+
+  /**
+   * Sets cookie and closes banner.
+   */
+  const closeBanner = () => {
+    /* Set cookie and hide banner. */
+    Cookies.set("cookiesAccepted", true, { expires: new Date(2300, 1, 1) });
+    setShowBanner(false);
+  };
+
+  /* useEffect - componentDidMount/componentWillUnmount. */
+  useEffect(() => {
+    /* Grab the cookie "cookiesAccepted". */
+    const cookie = Cookies.get("cookiesAccepted");
+
+    /* Show the banner if the cookie has not been accepted. */
+    if (cookie === undefined) {
+      setShowBanner(true);
+    }
+
+    /* Hide the banner if the cookie has been accepted. */
+    if (Cookies.get("cookiesAccepted") === true) {
+      setShowBanner(false);
+    }
+  }, []);
+
+  return showBanner ? (
+    <div className={compStyles.banner}>
+      <p className={compStyles.banner__text}>
+        This website uses cookies for security and analytics purposes. By using
+        this site, you agree to these uses.{" "}
+        <Link className={compStyles.banner__link} to={"/privacy"}>
+          Learn more here.
+        </Link>
+      </p>
+      <Button buttonAction={() => closeBanner()} buttonType={ButtonType.TEXT}>
+        Ok
+      </Button>
+    </div>
+  ) : null;
+}
+
+export default BannerCookies;
diff --git a/src/components/banner-cookies/banner-cookies.module.css b/src/components/banner-cookies/banner-cookies.module.css
new file mode 100644
index 0000000..2f7bae2
--- /dev/null
+++ b/src/components/banner-cookies/banner-cookies.module.css
@@ -0,0 +1,51 @@
+/*
+ * JXTX Foundation
+ * https://www.jxtxfoundation.org
+ *
+ * Style definitions specific to JXTX banner cookies component.
+ */
+
+/* Banner. */
+.banner {
+  align-items: flex-start;
+  background-color: var(--accent-pink);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  margin: 0 auto;
+  max-width: var(--maximum);
+  padding: 40px;
+  position: sticky;
+  width: 100vw;
+  z-index: 10;
+}
+
+/* Banner text. */
+.banner__text {
+  margin: 0;
+  padding: 20px 0;
+}
+
+/* Banner link. */
+.banner__link {
+  color: inherit;
+  white-space: nowrap;
+}
+
+/**
+ * 1240px - Medium (laptop).
+ */
+@media screen and (min-width: 1240px) {
+  /* Banner. */
+  .banner {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  /* Banner text. */
+  .banner__text {
+    margin-right: var(--vu___60);
+  }
+}
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index b419570..f256a62 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -10,6 +10,7 @@
 import React from "react";
 
 // App dependencies
+import CookiesBanner from "../banner-cookies/banner-cookies";
 import DocumentMetadata from "../document-metadata/document-metadata";
 import Footer from "../footer/footer";
 import Header from "../header/header";
@@ -29,6 +30,7 @@ function Layout(props) {
       <div className={compStyles.site}>
         <Header headerMinor={headerMinor} />
         {children}
+        <CookiesBanner />
         <Footer />
       </div>
     </>
diff --git a/src/styles/vars.module.css b/src/styles/vars.module.css
index 84630b2..ccf0fea 100644
--- a/src/styles/vars.module.css
+++ b/src/styles/vars.module.css
@@ -10,6 +10,8 @@
   --accent-blue-light: #a3cbdf;
   --accent-orange: #fe7f02;
   --accent-orange-light: #fdbf6f;
+  --accent-pink: #FB9998;
+  --accent-red: #e31a1e;
   --background: #fafafa;
   --black: #000000;
   --black12: rgba(0, 0, 0, 0.12);