From 5c3797b12541a3ed8044bfc1f2d41292aa755399 Mon Sep 17 00:00:00 2001
From: James Coker
Date: Wed, 21 Aug 2024 17:09:39 +0100
Subject: [PATCH 01/13] Add cookies page back link
---
package.json | 2 +-
src/lib/components/CookiesPage.react.js | 8 +++++++-
src/lib/fragments/CookieBanner.react.js | 4 ++--
src/lib/fragments/CookiePages/CookiesPage.js | 12 +++++++-----
4 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/package.json b/package.json
index c0ef3f8..5f8d818 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "uk_gov_dash_components",
- "version": "1.28.0",
+ "version": "1.32.0",
"description": "Dash components for Gov UK",
"repository": {
"type": "git",
diff --git a/src/lib/components/CookiesPage.react.js b/src/lib/components/CookiesPage.react.js
index 4047090..8c9445f 100644
--- a/src/lib/components/CookiesPage.react.js
+++ b/src/lib/components/CookiesPage.react.js
@@ -12,7 +12,8 @@ import { CookieProvider } from './cookies/utils/CookieContext';
* @param {
* id: string, // Unique identifier for the cookie component
* tag: string // Google Analytics tag string
- * appTitle: string // Name of the app
+ * appTitle: string
+ * previousPage: string // Name of the app
* } [props={}]
* @return {*}
*/
@@ -58,6 +59,11 @@ CookiesPage.propTypes = {
*/
appTitle: PropTypes.string,
+ /**
+ * The name of the app to be referenced in CookiesPage.
+ */
+ previousPage: PropTypes.string,
+
/**
* Dash-assigned callback that gets fired when the value changes.
*/
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index 52173db..12f7011 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -79,7 +79,7 @@ const CookieBanner = ({ ...props }) => {
@@ -126,7 +126,7 @@ const CookieBanner = ({ ...props }) => {
data-track-category="cookieBanner" onClick={() => setCookieAccepted(false)}>
Reject additional cookies
- View cookies
+ View cookies
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index 8182ca6..17dea6b 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -7,7 +7,9 @@ import { CookieContext } from '../../components/cookies/utils/CookieContext';
-const SuccessNotification = (props) => {
+const SuccessNotification = ({...props}) => {
+ const {previousPage} = props
+
return (
{
@@ -31,7 +33,7 @@ const CookiesPage = ({ ...props }) => {
const {cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted} = useContext(CookieContext);
console.log(cookieStateIsSet, "cookiesstateisset")
const { tag } = props;
- const {appTitle} = props;
+ const { appTitle } = props;
const handleButtonClick = (cookieState) => {
setCookieAccepted(true);
@@ -56,11 +58,11 @@ const CookiesPage = ({ ...props }) => {
setCookieStateIsSet(false);
}
}, []);
-
+
return <>
- { cookieAccepted ? : null }
+ { cookieAccepted ? : null }
Cookies
From 6af3581d0159c88fcf2ba60b6fc63260e11136d0 Mon Sep 17 00:00:00 2001
From: James Coker
Date: Thu, 22 Aug 2024 11:10:59 +0100
Subject: [PATCH 02/13] update cookie name
---
package.json | 3 ++-
src/lib/components/cookies/utils/Cookie.js | 8 ++++----
src/lib/fragments/CookieBanner.react.js | 6 +++---
src/lib/fragments/CookiePages/CookiesPage.js | 6 +++---
4 files changed, 12 insertions(+), 11 deletions(-)
diff --git a/package.json b/package.json
index 5f8d818..ecac361 100644
--- a/package.json
+++ b/package.json
@@ -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 ",
"license": "MIT",
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index dbee090..1a0ddec 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -60,16 +60,16 @@ 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=/`
};
\ No newline at end of file
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index 12f7011..83e1d0d 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -31,15 +31,15 @@ const CookieBanner = ({ ...props }) => {
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');
+ const cookiePolicyRaw = Cookies.get('cookies_policy');
console.log(`????${tag}`)
if (!cookiePolicyRaw) {
- Cookies.remove("cookies_preferences_set_21_3");
+ Cookies.remove("cookies_preferences_set");
setCookieStateIsSet(false)
console.info("Cookies policy has not been set.");
}
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index 17dea6b..018c258 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -42,13 +42,13 @@ const CookiesPage = ({ ...props }) => {
};
useEffect(() => {
- const cookiePreference = Cookies.get('cookies_preferences_set_21_3');
+ const cookiePreference = Cookies.get('cookies_preferences_set');
if (cookiePreference === 'true') {
- const cookiePolicyRaw = Cookies.get('cookies_policy_21_3');
+ const cookiePolicyRaw = Cookies.get('cookies_policy');
if (!cookiePolicyRaw) {
- Cookies.remove('cookies_preferences_set_21_3');
+ Cookies.remove('cookies_preferences_set');
setCookieStateIsSet(true);
} else {
const cookiePolicy = JSON.parse(cookiePolicyRaw);
From 93a2cc5ad03813fd7c276b7af40ed254e4c45340 Mon Sep 17 00:00:00 2001
From: James Coker
Date: Thu, 22 Aug 2024 11:13:29 +0100
Subject: [PATCH 03/13] Update cookies page content
---
src/lib/fragments/CookiePages/CookiesPage.js | 40 +++++++++++++++++++-
1 file changed, 38 insertions(+), 2 deletions(-)
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index 018c258..cc3a5a7 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -80,6 +80,42 @@ const CookiesPage = ({ ...props }) => {
We use 2 types of cookie. You can choose which cookies you're happy for us to use.
+ Essential cookies
+
+
+ Essential cookies keep your information secure while you use the service. We do not need to ask permission to use them.
+
+
+
+
+
+
+ Name
+ Purpose
+ Expires
+
+
+
+
+ cookies_policy
+
+ Saves your chosen cookies preference for future vists.
+
+ 1 year
+
+
+
+ cookies_preferences_set
+
+ Saves whether you've set your cookie preferences to avoid repeat prompts.
+
+ 1 year
+
+
+
+
+
+
Cookies that measure website use
@@ -160,7 +196,7 @@ const CookiesPage = ({ ...props }) => {
-
Strictly necessary cookies
+ {/* Strictly necessary cookies
These essential cookies do things like remember your cookie preferences, so we don't ask for them again.
@@ -168,7 +204,7 @@ const CookiesPage = ({ ...props }) => {
They always need to be on.
-
+ */}
Date: Thu, 22 Aug 2024 12:01:34 +0100
Subject: [PATCH 04/13] remove extra ga cookie
---
src/lib/components/cookies/utils/Cookie.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 1a0ddec..8460d0a 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -47,6 +47,7 @@ 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;
From c06715277d615375d413671217212984c83b98e7 Mon Sep 17 00:00:00 2001
From: Kate Riley
Date: Thu, 22 Aug 2024 15:00:26 +0100
Subject: [PATCH 05/13] wip - cookieprefernece cookie default to false and
banner is dependent on this cookie being false. issue with cookies.remove
slice ?
---
src/lib/components/cookies/utils/Cookie.js | 11 ++++++++++-
src/lib/fragments/CookieBanner.react.js | 13 +++++++++++--
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 8460d0a..4b2ce48 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -47,7 +47,7 @@ export const setCookies = (tag) => {
export const deleteCookies = (tag) => {
Cookies.remove("_ga");
Cookies.remove("_gid");
- Cookies.remove(`_ga_${tag.slice(2)}`)
+ // Cookies.remove(`_ga_${tag.slice(2)}`) # if cookies not set, it cannot delete as doesn't exist?
Cookies.remove(`_gat_gtag_${tag}`);
window[`ga-disable-${tag}`] = true;
@@ -73,4 +73,13 @@ export const handleCookieAccept = (accepted, tag) => {
document.cookie = `cookies_preferences_set=true; expires=${cookieExpiryDate}; path=/`
+};
+
+export const handleInitialCookie = () => {
+ const
+ today = new Date(),
+ [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
+ cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
+
+ document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
};
\ No newline at end of file
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index 83e1d0d..de5ee7e 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -1,7 +1,7 @@
import React, { useContext, useEffect } from 'react';
-import { setCookies, deleteCookies, handleCookieAccept } from '../components/cookies/utils/Cookie';
+import { setCookies, deleteCookies, handleCookieAccept, handleInitialCookie } from '../components/cookies/utils/Cookie';
import { CookieContext } from '../components/cookies/utils/CookieContext';
import Cookies from "js-cookie";
@@ -14,6 +14,13 @@ const CookieBanner = ({ ...props }) => {
const {appTitle} = props;
console.log(`!!!!${tag}`)
console.log(`cookieacepted${cookieAccepted}`)
+
+ useEffect(() => {
+ if (!Cookies.get('cookies_preferences_set')) {
+ handleInitialCookie();
+ }
+ }, [cookieStateIsSet, setCookieStateIsSet]);
+
useEffect(() => {
if (cookieAccepted) {
@@ -32,6 +39,7 @@ const CookieBanner = ({ ...props }) => {
useEffect(() => {
const cookiePreference = Cookies.get('cookies_preferences_set');
+ console.log("*********",cookiePreference)
if (cookiePreference === 'true') {
console.info("Cookies preferences have been set.");
@@ -67,10 +75,11 @@ const CookieBanner = ({ ...props }) => {
}, [cookieAccepted]);
-
+ console.log("!!!!!!", cookieStateIsSet, cookieAccepted )
if (cookieStateIsSet === null) return null;
if (cookieStateIsSet && cookieAccepted !== null) {
+ console.log("££££££")
return (
Date: Thu, 22 Aug 2024 15:24:52 +0100
Subject: [PATCH 06/13] cookie policy cookie displays before cookie settings
have been changed
---
src/lib/components/cookies/utils/Cookie.js | 5 +++--
src/lib/fragments/CookieBanner.react.js | 14 +++++++-------
2 files changed, 10 insertions(+), 9 deletions(-)
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 4b2ce48..6c6e282 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -47,7 +47,7 @@ export const setCookies = (tag) => {
export const deleteCookies = (tag) => {
Cookies.remove("_ga");
Cookies.remove("_gid");
- // Cookies.remove(`_ga_${tag.slice(2)}`) # if cookies not set, it cannot delete as doesn't exist?
+ Cookies.remove(`_ga_${tag?.slice(2)}`)
Cookies.remove(`_gat_gtag_${tag}`);
window[`ga-disable-${tag}`] = true;
@@ -75,11 +75,12 @@ export const handleCookieAccept = (accepted, tag) => {
};
-export const handleInitialCookie = () => {
+export const handleCookiesInitialLoad = () => {
const
today = new Date(),
[year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
+ document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
};
\ No newline at end of file
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index de5ee7e..b150a7f 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -1,7 +1,7 @@
import React, { useContext, useEffect } from 'react';
-import { setCookies, deleteCookies, handleCookieAccept, handleInitialCookie } 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";
@@ -9,15 +9,15 @@ 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;
+ const { appTitle } = props;
console.log(`!!!!${tag}`)
console.log(`cookieacepted${cookieAccepted}`)
useEffect(() => {
if (!Cookies.get('cookies_preferences_set')) {
- handleInitialCookie();
+ handleCookiesInitialLoad();
}
}, [cookieStateIsSet, setCookieStateIsSet]);
@@ -39,7 +39,7 @@ const CookieBanner = ({ ...props }) => {
useEffect(() => {
const cookiePreference = Cookies.get('cookies_preferences_set');
- console.log("*********",cookiePreference)
+ console.log("*********", cookiePreference)
if (cookiePreference === 'true') {
console.info("Cookies preferences have been set.");
@@ -75,7 +75,7 @@ const CookieBanner = ({ ...props }) => {
}, [cookieAccepted]);
- console.log("!!!!!!", cookieStateIsSet, cookieAccepted )
+ console.log("!!!!!!", cookieStateIsSet, cookieAccepted)
if (cookieStateIsSet === null) return null;
if (cookieStateIsSet && cookieAccepted !== null) {
@@ -106,7 +106,7 @@ const CookieBanner = ({ ...props }) => {
if (!cookieStateIsSet) {
- console.log("!cookiestateisset",`${cookieStateIsSet}`)
+ console.log("!cookiestateisset", `${cookieStateIsSet}`)
return
From a46cbe5f56ad36eb245d25799163912bd846a608 Mon Sep 17 00:00:00 2001
From: Kate Riley
Date: Thu, 22 Aug 2024 16:55:50 +0100
Subject: [PATCH 07/13] wip - radio buttons not responding correctly
---
src/lib/components/cookies/utils/Cookie.js | 18 +++++++--------
.../components/cookies/utils/CookieContext.js | 22 ++++++++++++++++---
src/lib/fragments/CookieBanner.react.js | 16 +++++++-------
src/lib/fragments/CookiePages/CookiesPage.js | 4 ++--
4 files changed, 38 insertions(+), 22 deletions(-)
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 6c6e282..67a3cb3 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -75,12 +75,12 @@ export const handleCookieAccept = (accepted, tag) => {
};
-export const handleCookiesInitialLoad = () => {
- const
- today = new Date(),
- [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
- cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
-
- document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
- document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
-};
\ No newline at end of file
+// export const handleCookiesInitialLoad = () => {
+// const
+// today = new Date(),
+// [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
+// cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
+
+// document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
+// document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
+// };
\ No newline at end of file
diff --git a/src/lib/components/cookies/utils/CookieContext.js b/src/lib/components/cookies/utils/CookieContext.js
index 4a5751b..9b5051d 100644
--- a/src/lib/components/cookies/utils/CookieContext.js
+++ b/src/lib/components/cookies/utils/CookieContext.js
@@ -1,15 +1,31 @@
import React from 'react';
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect } from "react";
export const CookieContext = createContext();
export const CookieProvider = ({ children }) => {
const [cookieStateIsSet, setCookieStateIsSet] = useState(false);
- const [cookieAccepted, setCookieAccepted] = useState(null);
+ const [cookieAccepted, setCookieAccepted] = useState(false);
+
+ const
+ today = new Date(),
+ [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
+ cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
+
+ document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
+ document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
+
+ // useEffect(() => {
+ // console.log("cookieStateIsSet:", cookieStateIsSet)
+ // console.log("cookieAccepted:",cookieAccepted)
+ // }, [cookieStateIsSet, cookieAccepted]);
+
+
return (
{children}
);
-};
\ No newline at end of file
+};
+
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index b150a7f..6efc4ac 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -15,11 +15,11 @@ const CookieBanner = ({ ...props }) => {
console.log(`!!!!${tag}`)
console.log(`cookieacepted${cookieAccepted}`)
- useEffect(() => {
- if (!Cookies.get('cookies_preferences_set')) {
- handleCookiesInitialLoad();
- }
- }, [cookieStateIsSet, setCookieStateIsSet]);
+ // useEffect(() => {
+ // if (!Cookies.get('cookies_preferences_set')) {
+ // handleCookiesInitialLoad();
+ // }
+ // }, [cookieStateIsSet, setCookieStateIsSet]);
useEffect(() => {
@@ -28,7 +28,7 @@ const CookieBanner = ({ ...props }) => {
console.info("Cookies accepted.");
setCookieStateIsSet(true);
}
- else if (cookieAccepted === false) {
+ else if (cookieAccepted === false && cookieStateIsSet===true) {
handleCookieAccept(false);
console.info("Cookies declined.");
setCookieStateIsSet(true);
@@ -127,12 +127,12 @@ const CookieBanner = ({ ...props }) => {
setCookieAccepted(true)}>
+ onClick={() => {setCookieAccepted(true); setCookieStateIsSet(true)}}>
Accept additional cookies
setCookieAccepted(false)}>
+ data-track-category="cookieBanner" onClick={() => {setCookieAccepted(false); setCookieStateIsSet(true)}}>
Reject additional cookies
View cookies
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index cc3a5a7..8d11567 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -178,7 +178,7 @@ const CookiesPage = ({ ...props }) => {
setCookieStateIsSet(true)} />
Use cookies that measure my website use
@@ -186,7 +186,7 @@ const CookiesPage = ({ ...props }) => {
setCookieStateIsSet(false)} />
From 514f78306294d12fe87b060983da7b40a1a54e49 Mon Sep 17 00:00:00 2001
From: Kate Riley
Date: Fri, 23 Aug 2024 11:37:45 +0100
Subject: [PATCH 08/13] wip
---
src/lib/components/cookies/utils/Cookie.js | 1 +
.../components/cookies/utils/CookieContext.js | 24 +++++++++--
src/lib/fragments/CookieBanner.react.js | 7 ++--
src/lib/fragments/CookiePages/CookiesPage.js | 40 ++++++++++---------
4 files changed, 48 insertions(+), 24 deletions(-)
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 67a3cb3..1666b55 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -72,6 +72,7 @@ export const handleCookieAccept = (accepted, tag) => {
}
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
index 9b5051d..4e78d04 100644
--- a/src/lib/components/cookies/utils/CookieContext.js
+++ b/src/lib/components/cookies/utils/CookieContext.js
@@ -2,19 +2,37 @@ import React 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(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();
- document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
- document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
+ // 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);
+ }
+ }, []);
+
+
+
+ // document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
+ // document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
// useEffect(() => {
// console.log("cookieStateIsSet:", cookieStateIsSet)
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index 6efc4ac..4445407 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -28,7 +28,7 @@ const CookieBanner = ({ ...props }) => {
console.info("Cookies accepted.");
setCookieStateIsSet(true);
}
- else if (cookieAccepted === false && cookieStateIsSet===true) {
+ else if (cookieAccepted === false) {
handleCookieAccept(false);
console.info("Cookies declined.");
setCookieStateIsSet(true);
@@ -45,6 +45,7 @@ const CookieBanner = ({ ...props }) => {
console.info("Cookies preferences have been set.");
const cookiePolicyRaw = Cookies.get('cookies_policy');
+ console.log("cookiepolicyraw", cookiePolicyRaw)
console.log(`????${tag}`)
if (!cookiePolicyRaw) {
Cookies.remove("cookies_preferences_set");
@@ -127,12 +128,12 @@ const CookieBanner = ({ ...props }) => {
{setCookieAccepted(true); setCookieStateIsSet(true)}}>
+ onClick={() => {setCookieAccepted(true); setCookieStateIsSet(true); console.log("!!!!!!!cookieaccepted",cookieAccepted)}}>
Accept additional cookies
{setCookieAccepted(false); setCookieStateIsSet(true)}}>
+ data-track-category="cookieBanner" onClick={() => {setCookieAccepted(false); console.log("!!!!!!!cookieaccepted",cookieAccepted);setCookieStateIsSet(true)}}>
Reject additional cookies
View cookies
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index 8d11567..545c2dc 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react';
+import React, { useEffect, useContext, useState } from 'react';
import { handleCookieAccept } from '../../components/cookies/utils/Cookie';
@@ -31,38 +31,42 @@ const SuccessNotification = ({...props}) => {
const CookiesPage = ({ ...props }) => {
console.log("before context")
const {cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted} = useContext(CookieContext);
+ const {cookieThroughCookiePage, setCookieThroughCookiePage}=useState(false)
console.log(cookieStateIsSet, "cookiesstateisset")
+ console.log(cookieAccepted, "cookieaccepted")
const { tag } = props;
const { appTitle } = props;
const handleButtonClick = (cookieState) => {
setCookieAccepted(true);
+ setCookieThroughCookiePage(true)
handleCookieAccept(cookieState, tag);
window.scrollTo(0, 0);
};
useEffect(() => {
const cookiePreference = Cookies.get('cookies_preferences_set');
-
+ const cookiePolicyRaw = Cookies.get('cookies_policy');
+ const cookiePolicy = JSON.parse(cookiePolicyRaw);
+ console.log("cookiepref",cookiePreference)
if (cookiePreference === 'true') {
- const cookiePolicyRaw = Cookies.get('cookies_policy');
-
- if (!cookiePolicyRaw) {
- Cookies.remove('cookies_preferences_set');
- setCookieStateIsSet(true);
- } else {
- const cookiePolicy = JSON.parse(cookiePolicyRaw);
- setCookieStateIsSet(cookiePolicy.usage);
- }
- } else {
+
+ console.log("cookiepolraw", cookiePolicyRaw)
+
+ console.log(cookiePolicy.usage, typeof(cookiePolicy.usage), "cookiepolicyusage")
+ setCookieStateIsSet(true);
+ setCookieAccepted(cookiePolicy.usage)
+ } else {
+ console.log("$$$$");
setCookieStateIsSet(false);
- }
+ setCookieAccepted(cookiePolicy.usage)
+ }
}, []);
return <>
- { cookieAccepted ? : null }
+ { cookieThroughCookiePage ? : null }
Cookies
@@ -179,16 +183,16 @@ const CookiesPage = ({ ...props }) => {
setCookieStateIsSet(true)} />
+ className="govuk-radios__input" onClick={() => setCookieAccepted(true)} />
Use cookies that measure my website use
setCookieStateIsSet(false)} />
+ onClick={() => setCookieAccepted(false)} />
Do not use cookies that measure my website use
@@ -210,7 +214,7 @@ const CookiesPage = ({ ...props }) => {
handleButtonClick(cookieStateIsSet)}>
+ onClick={ () => handleButtonClick(cookieAccepted)}>
Save changes
From 4b804ed643658532f8af0a86871f52b938872493 Mon Sep 17 00:00:00 2001
From: James Coker
Date: Fri, 23 Aug 2024 12:47:14 +0100
Subject: [PATCH 09/13] Fixing cookie functionality
---
src/demo/App.js | 2 --
src/lib/components/cookies/utils/Cookie.js | 9 -------
.../components/cookies/utils/CookieContext.js | 11 --------
src/lib/fragments/CookieBanner.react.js | 27 ++-----------------
src/lib/fragments/CookiePages/CookiesPage.js | 13 ++-------
5 files changed, 4 insertions(+), 58 deletions(-)
diff --git a/src/demo/App.js b/src/demo/App.js
index f3248ce..ad3385f 100644
--- 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 (
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index 1666b55..ef69859 100644
--- 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.")
@@ -51,9 +46,6 @@ export const deleteCookies = (tag) => {
Cookies.remove(`_gat_gtag_${tag}`);
window[`ga-disable-${tag}`] = true;
-
-
- console.info("Removed cookies and disabled tracking.");
};
@@ -62,7 +54,6 @@ export const handleCookieAccept = (accepted, tag) => {
today = new Date(),
[year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
-
if (accepted) {
document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":true,"preferences":true}')}; expires=${cookieExpiryDate};`;
setCookies(tag);
diff --git a/src/lib/components/cookies/utils/CookieContext.js b/src/lib/components/cookies/utils/CookieContext.js
index 4e78d04..d0a1b11 100644
--- a/src/lib/components/cookies/utils/CookieContext.js
+++ b/src/lib/components/cookies/utils/CookieContext.js
@@ -29,17 +29,6 @@ export const CookieProvider = ({ children }) => {
}
}, []);
-
-
- // document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
- // document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
-
- // useEffect(() => {
- // console.log("cookieStateIsSet:", cookieStateIsSet)
- // console.log("cookieAccepted:",cookieAccepted)
- // }, [cookieStateIsSet, cookieAccepted]);
-
-
return (
{children}
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index 4445407..ae4b708 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -8,29 +8,18 @@ import Cookies from "js-cookie";
const CookieBanner = ({ ...props }) => {
- console.log("start of cookiebanner")
const { cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted } = useContext(CookieContext);
const { tag } = props;
const { appTitle } = props;
- console.log(`!!!!${tag}`)
- console.log(`cookieacepted${cookieAccepted}`)
-
- // useEffect(() => {
- // if (!Cookies.get('cookies_preferences_set')) {
- // handleCookiesInitialLoad();
- // }
- // }, [cookieStateIsSet, setCookieStateIsSet]);
useEffect(() => {
if (cookieAccepted) {
handleCookieAccept(true);
- console.info("Cookies accepted.");
setCookieStateIsSet(true);
}
else if (cookieAccepted === false) {
handleCookieAccept(false);
- console.info("Cookies declined.");
setCookieStateIsSet(true);
}
@@ -39,31 +28,23 @@ const CookieBanner = ({ ...props }) => {
useEffect(() => {
const cookiePreference = Cookies.get('cookies_preferences_set');
- console.log("*********", cookiePreference)
if (cookiePreference === 'true') {
- console.info("Cookies preferences have been set.");
const cookiePolicyRaw = Cookies.get('cookies_policy');
- console.log("cookiepolicyraw", cookiePolicyRaw)
- console.log(`????${tag}`)
if (!cookiePolicyRaw) {
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);
@@ -71,16 +52,13 @@ const CookieBanner = ({ ...props }) => {
}
else {
setCookieStateIsSet(false);
- console.info("Cookies preferences have not been set.");
}
}, [cookieAccepted]);
- console.log("!!!!!!", cookieStateIsSet, cookieAccepted)
if (cookieStateIsSet === null) return null;
if (cookieStateIsSet && cookieAccepted !== null) {
- console.log("££££££")
return (
{
if (!cookieStateIsSet) {
- console.log("!cookiestateisset", `${cookieStateIsSet}`)
return
@@ -128,12 +105,12 @@ const CookieBanner = ({ ...props }) => {
{setCookieAccepted(true); setCookieStateIsSet(true); console.log("!!!!!!!cookieaccepted",cookieAccepted)}}>
+ onClick={() => {setCookieAccepted(true); setCookieStateIsSet(true)}}>
Accept additional cookies
{setCookieAccepted(false); console.log("!!!!!!!cookieaccepted",cookieAccepted);setCookieStateIsSet(true)}}>
+ data-track-category="cookieBanner" onClick={() => {setCookieAccepted(false); setCookieStateIsSet(true)}}>
Reject additional cookies
View cookies
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index 545c2dc..da537b1 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -29,16 +29,13 @@ const SuccessNotification = ({...props}) => {
};
const CookiesPage = ({ ...props }) => {
- console.log("before context")
const {cookieStateIsSet, setCookieStateIsSet, cookieAccepted, setCookieAccepted} = useContext(CookieContext);
- const {cookieThroughCookiePage, setCookieThroughCookiePage}=useState(false)
- console.log(cookieStateIsSet, "cookiesstateisset")
- console.log(cookieAccepted, "cookieaccepted")
+ const [cookieThroughCookiePage, setCookieThroughCookiePage] = useState(false)
const { tag } = props;
const { appTitle } = props;
const handleButtonClick = (cookieState) => {
- setCookieAccepted(true);
+ setCookieAccepted(cookieState);
setCookieThroughCookiePage(true)
handleCookieAccept(cookieState, tag);
window.scrollTo(0, 0);
@@ -48,16 +45,10 @@ const CookiesPage = ({ ...props }) => {
const cookiePreference = Cookies.get('cookies_preferences_set');
const cookiePolicyRaw = Cookies.get('cookies_policy');
const cookiePolicy = JSON.parse(cookiePolicyRaw);
- console.log("cookiepref",cookiePreference)
if (cookiePreference === 'true') {
-
- console.log("cookiepolraw", cookiePolicyRaw)
-
- console.log(cookiePolicy.usage, typeof(cookiePolicy.usage), "cookiepolicyusage")
setCookieStateIsSet(true);
setCookieAccepted(cookiePolicy.usage)
} else {
- console.log("$$$$");
setCookieStateIsSet(false);
setCookieAccepted(cookiePolicy.usage)
}
From 45d54c3b34b8a0baedb3e84195f5fd25f4aa491b Mon Sep 17 00:00:00 2001
From: Kate Riley
Date: Fri, 23 Aug 2024 13:39:01 +0100
Subject: [PATCH 10/13] remove commented code
---
src/lib/components/CookiesPage.react.js | 7 ++++---
src/lib/components/cookies/utils/Cookie.js | 12 +-----------
src/lib/fragments/CookiePages/CookiesPage.js | 12 +-----------
3 files changed, 6 insertions(+), 25 deletions(-)
diff --git a/src/lib/components/CookiesPage.react.js b/src/lib/components/CookiesPage.react.js
index 8c9445f..d1c488e 100644
--- a/src/lib/components/CookiesPage.react.js
+++ b/src/lib/components/CookiesPage.react.js
@@ -12,8 +12,8 @@ import { CookieProvider } from './cookies/utils/CookieContext';
* @param {
* id: string, // Unique identifier for the cookie component
* tag: string // Google Analytics tag string
- * appTitle: string
- * previousPage: string // Name of the app
+ * appTitle: string // Name of the app
+ * previousPage: string // The path to the previous page
* } [props={}]
* @return {*}
*/
@@ -60,7 +60,8 @@ CookiesPage.propTypes = {
appTitle: PropTypes.string,
/**
- * The name of the app to be referenced in CookiesPage.
+ * The path to the previous page, which is used in success banner on CookiesPage when cookies
+ * accepted/rejected.
*/
previousPage: PropTypes.string,
diff --git a/src/lib/components/cookies/utils/Cookie.js b/src/lib/components/cookies/utils/Cookie.js
index ef69859..72ba97e 100644
--- a/src/lib/components/cookies/utils/Cookie.js
+++ b/src/lib/components/cookies/utils/Cookie.js
@@ -65,14 +65,4 @@ export const handleCookieAccept = (accepted, tag) => {
document.cookie = `cookies_preferences_set=true; expires=${cookieExpiryDate}; path=/`
-};
-
-// export const handleCookiesInitialLoad = () => {
-// const
-// today = new Date(),
-// [year, month, day] = [today.getFullYear(), today.getMonth(), today.getDate()],
-// cookieExpiryDate = new Date(year + 1, month, day).toUTCString();
-
-// document.cookie = `cookies_policy=${encodeURIComponent('{"essential":true,"usage":false,"preferences":false}')}; expires=${cookieExpiryDate};`;
-// document.cookie = `cookies_preferences_set=false; expires=${cookieExpiryDate}; path=/`
-// };
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index da537b1..b032378 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -21,7 +21,7 @@ const SuccessNotification = ({...props}) => {
@@ -190,16 +190,6 @@ const CookiesPage = ({ ...props }) => {
-
- {/* Strictly necessary cookies
-
-
- These essential cookies do things like remember your cookie preferences, so we don't ask for them again.
-
-
-
- They always need to be on.
-
*/}
Date: Fri, 23 Aug 2024 14:44:55 +0100
Subject: [PATCH 11/13] update pkg version
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 44f7978..023498d 100644
--- 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",
From f2d6ace46d9480a9380f1bd3532b14714507f051 Mon Sep 17 00:00:00 2001
From: Kate Riley
Date: Mon, 4 Nov 2024 11:43:42 +0000
Subject: [PATCH 12/13] add tag to handlecookieaccept
---
src/lib/fragments/CookieBanner.react.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/lib/fragments/CookieBanner.react.js b/src/lib/fragments/CookieBanner.react.js
index ae4b708..d46f04d 100644
--- a/src/lib/fragments/CookieBanner.react.js
+++ b/src/lib/fragments/CookieBanner.react.js
@@ -15,11 +15,11 @@ const CookieBanner = ({ ...props }) => {
useEffect(() => {
if (cookieAccepted) {
- handleCookieAccept(true);
+ handleCookieAccept(true, tag);
setCookieStateIsSet(true);
}
else if (cookieAccepted === false) {
- handleCookieAccept(false);
+ handleCookieAccept(false, tag);
setCookieStateIsSet(true);
}
From 066ca582b11d46bea81f589a3940654b6f2b4097 Mon Sep 17 00:00:00 2001
From: James Coker
Date: Thu, 2 Jan 2025 11:42:05 +0000
Subject: [PATCH 13/13] Add full stop
---
src/lib/fragments/CookiePages/CookiesPage.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/lib/fragments/CookiePages/CookiesPage.js b/src/lib/fragments/CookiePages/CookiesPage.js
index b032378..d236e74 100644
--- a/src/lib/fragments/CookiePages/CookiesPage.js
+++ b/src/lib/fragments/CookiePages/CookiesPage.js
@@ -21,7 +21,7 @@ const SuccessNotification = ({...props}) => {