Merge pull request #124 from communitiesuk/cookies-back-link

Cookies back link
communitiesuk · Jan 2, 2025 · 30287a8 · 30287a8
2 parents 90dcdfc + bfe7017
commit 30287a8
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uk_gov_dash_components",
-    "version": "1.29.0",
+    "version": "1.29.1",
     "description": "Dash components for Gov UK",
     "repository": {
         "type": "git",
@@ -20,7 +20,8 @@
         "build:backends": "dash-generate-components ./src/lib/components uk_gov_dash_components -p package-info.json --r-prefix 'govuk' --jl-prefix 'govuk' --ignore \\.test\\.",
         "build:backends-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:py_and_r)",
         "build": "npm run build:js && npm run build:backends",
-        "build:activated": "npm run build:js && npm run build:backends-activated"
+        "build:activated": "npm run build:js && npm run build:backends-activated",
+        "dist": "npm run build && python setup.py sdist bdist_wheel"
     },
     "author": "DLUHC GovUk <[email protected]>",
     "license": "MIT",

diff --git a/src/demo/App.js b/src/demo/App.js
@@ -12,8 +12,6 @@ const App = () => {
     const [value, setValue] = useState('');
     const setProps = (props) => {
         setValue(props.value)
-        console.log('props', props);
-        console.log('value', value);
     }
     return (
     <Router>

diff --git a/src/lib/components/CookiesPage.react.js b/src/lib/components/CookiesPage.react.js
@@ -13,6 +13,7 @@ import { CookieProvider } from './cookies/utils/CookieContext';
  * id: string,                            // Unique identifier for the cookie component
  * tag: string                            // Google Analytics tag string
  * appTitle: string                       // Name of the app
+ * previousPage: string                   // The path to the previous page                   
  * } [props={}]
  * @return {*}
  */
@@ -58,6 +59,12 @@ CookiesPage.propTypes = {
      */
     appTitle: PropTypes.string,
 
+    /**
+     * The path to the previous page, which is used in success banner on CookiesPage when cookies
+     * accepted/rejected.
+     */
+     previousPage: PropTypes.string,
+
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */

diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
@@ -15,8 +15,6 @@ export const stripPIIUri = function (str) {
 
 
 export const setCookies = (tag) => {
-    console.info("Cookies accepted - setting up GA.");
-    console.log(`***${tag}`)
     window[`ga-disable-${tag}`] = false;
 
     window.dataLayer = window.dataLayer || [];
@@ -34,9 +32,6 @@ export const setCookies = (tag) => {
             cookie_domain: 'none'
         });
 
-
-        console.info("GA successfully set up.", gtag);
-
     } catch (error) {
         console.warn("Cookies accepted, but tracking is blocked by the browser.")
         console.warn("Failed to set GA cookies.")
@@ -47,29 +42,27 @@ export const setCookies = (tag) => {
 export const deleteCookies = (tag) => {
     Cookies.remove("_ga");
     Cookies.remove("_gid");
+    Cookies.remove(`_ga_${tag?.slice(2)}`)
     Cookies.remove(`_gat_gtag_${tag}`);
 
     window[`ga-disable-${tag}`] = true;
-
-
-    console.info("Removed cookies and disabled tracking.");
 };
 
 
 export const handleCookieAccept = (accepted, tag) => {
     const
         today = new Date(),
         [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
-        cookieExpiryDate = new Date(year, month + 1, day).toUTCString();
-
+        cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
     if (accepted) {
-        document.cookie = `cookies_policy_21_3=${encodeURIComponent('{"essential":true,"usage":true,"preferences":true}')}; expires=${cookieExpiryDate};`;
+        document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":true,"preferences":true}')}; expires=${cookieExpiryDate};`;
         setCookies(tag);
     } else {
-        document.cookie = `cookies_policy_21_3=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
+        document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
         deleteCookies(tag);
     }
 
-    document.cookie = `cookies_preferences_set_21_3=true; expires=${cookieExpiryDate}; path=/`
+    document.cookie = `cookies_preferences_set=true; expires=${cookieExpiryDate}; path=/`
+
 
 };
diff --git a/src/lib/components/cookies/utils/CookieContext.js b/src/lib/components/cookies/utils/CookieContext.js
@@ -1,15 +1,38 @@
 import React from 'react';
 
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect } from "react";
+
+import Cookies from "js-cookie";
 
 export const CookieContext = createContext();
 
 export const CookieProvider = ({ children }) => {
   const [cookieStateIsSet, setCookieStateIsSet] = useState(false);
   const [cookieAccepted, setCookieAccepted] = useState(null);
+
+  const
+      today = new Date(),
+      [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
+      cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
+
+    // Set initial cookie values on load
+    useEffect(() => {
+
+      if (!Cookies.get('cookies_preferences_set')) {
+        document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
+        setCookieStateIsSet(false);
+      }
+
+      if (!Cookies.get('cookies_policy')) {
+        document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
+        setCookieStateIsSet(false);
+      }
+    }, []);
+
   return (
     <CookieContext.Provider value={{ cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted }}>
       {children}
     </CookieContext.Provider>
   );
-};
+};
+
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
@@ -1,73 +1,61 @@
 
 import React, { useContext, useEffect } from 'react';
 
-import { setCookies, deleteCookies, handleCookieAccept } from '../components/cookies/utils/Cookie';
+import { setCookies, deleteCookies, handleCookieAccept, handleCookiesInitialLoad } from '../components/cookies/utils/Cookie';
 import { CookieContext } from '../components/cookies/utils/CookieContext';
 
 import Cookies from "js-cookie";
 
 
 const CookieBanner = ({ ...props }) => {
-    console.log("start of cookiebanner")
-    const {cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted} = useContext(CookieContext);
+    const { cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted } = useContext(CookieContext);
     const { tag } = props;
-    const {appTitle} = props;
-    console.log(`!!!!${tag}`)
-    console.log(`cookieacepted${cookieAccepted}`)
+    const { appTitle } = props;
+
     useEffect(() => {
 
         if (cookieAccepted) {
-            handleCookieAccept(true);
-            console.info("Cookies accepted.");
+            handleCookieAccept(true, tag);
             setCookieStateIsSet(true);
         }
         else if (cookieAccepted === false) {
-            handleCookieAccept(false);
-            console.info("Cookies declined.");
+            handleCookieAccept(false, tag);
             setCookieStateIsSet(true);
         }
 
     }, [cookieAccepted]);
 
     useEffect(() => {
 
-        const cookiePreference = Cookies.get('cookies_preferences_set_21_3');
+        const cookiePreference = Cookies.get('cookies_preferences_set');
 
         if (cookiePreference === 'true') {
-            console.info("Cookies preferences have been set.");
 
-            const cookiePolicyRaw = Cookies.get('cookies_policy_21_3');
-            console.log(`????${tag}`)
+            const cookiePolicyRaw = Cookies.get('cookies_policy');
             if (!cookiePolicyRaw) {
-                Cookies.remove("cookies_preferences_set_21_3");
+                Cookies.remove("cookies_preferences_set");
                 setCookieStateIsSet(false)
-                console.info("Cookies policy has not been set.");
             }
             else {
-                console.info("Cookies policy has been set.");
                 const cookiePolicy = JSON.parse(cookiePolicyRaw);
 
                 if (cookiePolicy.usage === false || !cookiePolicy.usage) {
                     window[`ga-disable-${tag}`] = true;
                     deleteCookies(tag);
-                    console.info("Cookies are disabled.", `ga-disable-${tag}`);
                 }
                 else {
                     setCookies(tag);
-                    console.info("Cookies successfully set.");
                 }
 
                 setCookieStateIsSet(true);
             }
         }
         else {
             setCookieStateIsSet(false);
-            console.info("Cookies preferences have not been set.");
         }
 
     }, [cookieAccepted]);
 
-
     if (cookieStateIsSet === null) return null;
 
     if (cookieStateIsSet && cookieAccepted !== null) {
@@ -79,7 +67,7 @@ const CookieBanner = ({ ...props }) => {
                     <div className="govuk-grid-row">
                         <div className="govuk-grid-column-two-thirds">
                             <div className="govuk-cookie-banner__content" tabIndex="-1">
-                                <p className="govuk-body">You've {cookieAccepted ? "accepted" : "rejected"} additional cookies. You can <a class="govuk-link" href="/cookiespage" > change your cookie settings</a> at any time.</p>
+                                <p className="govuk-body">You've {cookieAccepted ? "accepted" : "rejected"} additional cookies. You can <a className="govuk-link" href="/cookiespage" > change your cookie settings</a> at any time.</p>
                             </div>
                         </div>
                     </div>
@@ -97,7 +85,6 @@ const CookieBanner = ({ ...props }) => {
 
 
     if (!cookieStateIsSet) {
-        console.log("!cookiestateisset",`${cookieStateIsSet}`)
         return <div className="govuk-cookie-banner " role="region" aria-label={`Cookies on ${appTitle}`}>
             <div className={"govuk-cookie-banner__message govuk-width-container"}>
                 <div className="govuk-grid-row">
@@ -118,15 +105,15 @@ const CookieBanner = ({ ...props }) => {
                     <button className="govuk-button" type="submit"
                         data-module="track-click" data-accept-cookies="true"
                         data-track-category="cookieBanner"
-                        onClick={() => setCookieAccepted(true)}>
+                        onClick={() => {setCookieAccepted(true); setCookieStateIsSet(true)}}>
                         Accept additional cookies
                     </button>
                     <button className="govuk-button"
                         type="submit" data-module="track-click" data-set-cookie-preferences="true"
-                        data-track-category="cookieBanner" onClick={() => setCookieAccepted(false)}>
+                        data-track-category="cookieBanner" onClick={() => {setCookieAccepted(false); setCookieStateIsSet(true)}}>
                         Reject additional cookies
                     </button>
-                    <a class="govuk-link" href="/cookiespage" >View cookies</a>
+                    <a className="govuk-link" href="/cookiespage" >View cookies</a>
                 </div>
             </div>
         </div>