From e518eff627056e4ce9d757a373fd89c88fbb05ff Mon Sep 17 00:00:00 2001
From: Dzhani Ivanov <68897146+dzhaniivanov@users.noreply.github.com>
Date: Sun, 29 Oct 2023 13:53:30 +0200
Subject: [PATCH] added cookies consent banner (#1634)
---
package.json | 1 +
public/locales/bg/common.json | 5 ++-
public/locales/en/common.json | 5 ++-
src/components/common/CookieConsentPopup.tsx | 45 ++++++++++++++++++++
src/pages/_app.tsx | 25 +++++++++--
yarn.lock | 19 +++++++++
6 files changed, 95 insertions(+), 5 deletions(-)
create mode 100644 src/components/common/CookieConsentPopup.tsx
diff --git a/package.json b/package.json
index 25145a847..7bd53286f 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"quill-html-edit-button": "^2.2.12",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
+ "react-cookie-consent": "^9.0.0",
"react-dom": "18.2.0",
"react-gtm-module": "2.0.11",
"react-i18next": "^13.2.2",
diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json
index 835c32a12..0075be69d 100644
--- a/public/locales/bg/common.json
+++ b/public/locales/bg/common.json
@@ -102,5 +102,8 @@
"read-more": "Прочетете още",
"see-profile": "Вижте профил",
"question": "Имате въпрос?"
- }
+ },
+ "cookieConsent": "Подкрепи.бг не използва бисквитки, освен тези от трети страни, нужни за аналитичните компоненти Google Analytics и HotJar. Приемането на бисквитките ще ни помогне да подобрим вашето потребителско преживяване",
+ "cookieConsentButton": "Приемам",
+ "cookieRejectButton": "Отхвърлям"
}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 76cd634eb..8faba94b3 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -99,5 +99,8 @@
"read-more": "Read more",
"see-profile": "See profile",
"question": "Have a question?"
- }
+ },
+ "cookieConsent": "Podkrepi.bg doesn't use cookies, except the third-party cookies required for the analytics components Google Analytics and HotJar. Accepting the cookies will help us improve your user experience.",
+ "cookieConsentButton": "Accept",
+ "cookieRejectButton": "Reject"
}
diff --git a/src/components/common/CookieConsentPopup.tsx b/src/components/common/CookieConsentPopup.tsx
new file mode 100644
index 000000000..d2e98a316
--- /dev/null
+++ b/src/components/common/CookieConsentPopup.tsx
@@ -0,0 +1,45 @@
+import CookieConsent from 'react-cookie-consent'
+import { useTranslation } from 'react-i18next'
+
+type CookieConsentPopupProps = {
+ handleAcceptCookie: () => void
+ handleDeclineCookie: () => void
+}
+
+const CookieConsentPopup = ({
+ handleAcceptCookie,
+ handleDeclineCookie,
+}: CookieConsentPopupProps) => {
+ const { t } = useTranslation()
+
+ return (
+
+ {t('cookieConsent')}
+
+ )
+}
+
+export default CookieConsentPopup
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index deb80c8a7..4b80d4f75 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -24,6 +24,8 @@ import {
globalSnackbarProps,
globalSnackbarContentProps,
} from 'components/client/layout/NotificationSnackBar/props/global'
+import { getCookieConsentValue, Cookies } from 'react-cookie-consent'
+import CookieConsentPopup from 'components/common/CookieConsentPopup'
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache()
@@ -46,11 +48,24 @@ function CustomApp({
const { i18n } = useTranslation()
const { initialize, trackEvent } = useGTM()
- useEffect(() => {
- // Init GTM
+ const handleAcceptCookie = () => {
initialize({
- events: { user_lang: i18n?.language },
+ events: { user_lang: i18n.language },
})
+ }
+
+ const handleDeclineCookie = () => {
+ Cookies.remove('_ga')
+ Cookies.remove('_gat')
+ Cookies.remove('_gid')
+ }
+
+ useEffect(() => {
+ const isConsent = getCookieConsentValue()
+ // Init GTM
+ if (isConsent === 'true') {
+ handleAcceptCookie()
+ }
}, [])
// Register route change complete event handlers
@@ -108,6 +123,10 @@ function CustomApp({
+
)
}
diff --git a/yarn.lock b/yarn.lock
index 2fbc64dc6..dde6c2f5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9304,6 +9304,13 @@ __metadata:
languageName: node
linkType: hard
+"js-cookie@npm:^2.2.1":
+ version: 2.2.1
+ resolution: "js-cookie@npm:2.2.1"
+ checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2
+ languageName: node
+ linkType: hard
+
"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
version: 4.0.0
resolution: "js-tokens@npm:4.0.0"
@@ -11710,6 +11717,7 @@ __metadata:
quill-html-edit-button: ^2.2.12
react: 18.2.0
react-chartjs-2: ^5.2.0
+ react-cookie-consent: ^9.0.0
react-dom: 18.2.0
react-gtm-module: 2.0.11
react-i18next: ^13.2.2
@@ -12152,6 +12160,17 @@ __metadata:
languageName: node
linkType: hard
+"react-cookie-consent@npm:^9.0.0":
+ version: 9.0.0
+ resolution: "react-cookie-consent@npm:9.0.0"
+ dependencies:
+ js-cookie: ^2.2.1
+ peerDependencies:
+ react: ">=16"
+ checksum: 56a50f03e21c7345dc97159222fd93e920290653da52fc7bf405b757e84dac183753950c42ea1db6cf633fabd0eded8216986798935bbdeda44ddb2db4dc83e0
+ languageName: node
+ linkType: hard
+
"react-devtools-inline@npm:4.4.0":
version: 4.4.0
resolution: "react-devtools-inline@npm:4.4.0"