feat: adding cookie dialog

Author: Joel Worrall

gatsby-config.js

@@ -160,6 +160,18 @@ module.exports = {
           // }
         }
       }
+    },
+    {
+      resolve: `gatsby-plugin-gdpr-cookies`,
+      options: {
+        googleTagManager: {
+          trackingId: 'BLAH', // leave empty if you want to disable the tracker
+          cookieName: 'newrelic-gdpr-consent', // default
+          dataLayerName: 'dataLayer', // default
+        },
+        // defines the environments where the tracking should be available  - default is ["production"]
+        environments: ['production', 'development']
+      },
     }
   ]
 };

package-lock.json

@@ -9,6 +9,7 @@
     "feather-icons": "^4.28.0",
     "gatsby": "^2.22.11",
     "gatsby-image": "^2.4.5",
+    "gatsby-plugin-gdpr-cookies": "^1.0.7",
     "gatsby-plugin-manifest": "^2.4.9",
     "gatsby-plugin-mdx": "^1.2.12",
     "gatsby-plugin-newrelic": "https://github.com/newrelic/gatsby-plugin-newrelic.git#5cd42e832f0588764dc332ce7ebd05794de5106a",
@@ -22,6 +23,7 @@
     "gatsby-source-filesystem": "^2.3.8",
     "gatsby-transformer-json": "^2.4.3",
     "gatsby-transformer-sharp": "^2.5.3",
+    "js-cookie": "^2.2.1",
     "js-search": "^2.0.0",
     "lodash": "^4.17.15",
     "node-sass": "^4.14.1",

package.json

@@ -2,35 +2,69 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './CookieApprovalDialog.module.scss';
 import withDarkMode from './withDarkMode';
+import Cookies from 'js-cookie';
 
-const CookieApprovalDialog = ({ className, darkMode }) => {
-  return (
-    <div className={`${styles.container} ${className || ''}`}>
-      <div className={styles.content}>
-        {/* <X className={styles.buttonClose} size={18} /> */}
-        <div className={styles.primaryContent}>
-          <h4 className={styles.heading}>This site uses cookies 🍪</h4>
-          <p className={styles.description}>
-            We rely on cookies to play videos, remember your preferences, and
-            analyze our website traffic. You consent to our cookies if you click
-            “OK”.
-          </p>
-        </div>
-        <div className={styles.ctaContainer}>
-          <button className={`button ${styles.approvalButton}`} type="button">
-            OK
-          </button>
-          <button
-            className={`button button-tertiary ${styles.ignoreButton}`}
-            type="button"
-          >
-            Reject
-          </button>
+class CookieApprovalDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cookieSet: Cookies.get('newrelic-gdpr-consent') !== undefined
+    };
+    this.writeCookies = this.writeCookies.bind(this);
+  }
+
+  writeCookies(answer) {
+    Cookies.set('newrelic-gdpr-consent', !!answer, {
+      expires: 365
+    });
+    // console.debug(Cookies.get('newrelic-gdpr-consent'));
+    this.setState({ cookieSet: true });
+  }
+
+  render() {
+    const { className, darkMode } = this.props; // eslint-disable-line no-unused-vars
+    // console.debug(this.state.cookieSet);
+    return (
+      !this.state.cookieSet && (
+        <div className={`${styles.container} ${className || ''}`}>
+          <div className={styles.content}>
+            {/* <X className={styles.buttonClose} size={18} /> */}
+            <div className={styles.primaryContent}>
+              <h4 className={styles.heading}>
+                This site uses tracking cookies 🍪
+              </h4>
+              <p className={styles.description}>
+                We rely on tracking instrumentation to deliver an optimal
+                experience across our sites. If you consent to our cookies,
+                please click “OK”.
+              </p>
+            </div>
+            <div className={styles.ctaContainer}>
+              <button
+                className={`button ${styles.approvalButton}`}
+                type="button"
+                onClick={() => {
+                  this.writeCookies(true);
+                }}
+              >
+                OK
+              </button>
+              <button
+                className={`button button-tertiary ${styles.ignoreButton}`}
+                type="button"
+                onClick={() => {
+                  this.writeCookies(false);
+                }}
+              >
+                Reject
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  );
-};
+      )
+    );
+  }
+}
 
 CookieApprovalDialog.propTypes = {
   className: PropTypes.string,