feat: Add cookies dialog

newrelic · Jul 2, 2020 · a5c1d95 · a5c1d95
1 parent f27ca69
commit a5c1d95
Showing 1 changed file with 55 additions and 30 deletions.
diff --git a/src/components/CookieApprovalDialog.js b/src/components/CookieApprovalDialog.js
@@ -1,41 +1,66 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import Cookies from 'js-cookie';
 import Button from './Button';
 import styles from './CookieApprovalDialog.module.scss';
 
+const gdprConsentCookieName = 'newrelic-gdpr-consent';
+
 const CookieApprovalDialog = ({ className }) => {
+  const [isCookieSet, setIsCookieSet] = useState(true);
+
+  useEffect(() => {
+    setIsCookieSet(Cookies.get(gdprConsentCookieName) !== undefined);
+  }, []);
+
+  function writeCookie(answer) {
+    const currentEnvironment =
+      process.env.ENV || process.env.NODE_ENV || 'development';
+    const options = { expires: 365 /* days */ };
+    if (currentEnvironment !== 'development') {
+      options.domain = 'newrelic.com';
+    }
+
+    Cookies.set(gdprConsentCookieName, String(!!answer), options);
+    setIsCookieSet(true);
+  }
+
   return (
-    <div className={`${styles.container} ${className || ''}`}>
-      <div className={styles.content}>
-        <div className={styles.primaryContent}>
-          <h4 className={styles.heading}>
-            This site uses cookies{' '}
-            <span role="img" aria-label="Cookie emoji">
-              🍪
-            </span>
-          </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}`}
-            variant={Button.VARIANT.PRIMARY}
-          >
-            OK
-          </Button>
-          <Button
-            className={`${styles.ignoreButton}`}
-            variant={Button.VARIANT.NORMAL}
-          >
-            Reject
-          </Button>
+    !isCookieSet && (
+      <div className={`${styles.container} ${className || ''}`}>
+        <div className={styles.content}>
+          <div className={styles.primaryContent}>
+            <h4 className={styles.heading}>
+              This site uses cookies{' '}
+              <span role="img" aria-label="Cookie emoji">
+                🍪
+              </span>
+            </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={styles.approvalButton}
+              variant={Button.VARIANT.PRIMARY}
+              onClick={() => writeCookie(true)}
+            >
+              OK
+            </Button>
+            <Button
+              className={`${styles.ignoreButton}`}
+              variant={Button.VARIANT.NORMAL}
+              onClick={() => writeCookie(false)}
+            >
+              Reject
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    )
   );
 };