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"