added cookies consent banner (#1634)

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",

public/locales/bg/common.json

@@ -102,5 +102,8 @@
     "read-more": "Прочетете още",
     "see-profile": "Вижте профил",
     "question": "Имате въпрос?"
-  }
+  },
+  "cookieConsent": "Подкрепи.бг не използва бисквитки, освен тези от трети страни, нужни за аналитичните компоненти Google Analytics и HotJar. Приемането на бисквитките ще ни помогне да подобрим вашето потребителско преживяване",
+  "cookieConsentButton": "Приемам",
+  "cookieRejectButton": "Отхвърлям"
 }

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"
 }

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 (
+    <CookieConsent
+      enableDeclineButton
+      onAccept={handleAcceptCookie}
+      onDecline={handleDeclineCookie}
+      buttonText={t('cookieConsentButton')}
+      declineButtonText={t('cookieRejectButton')}
+      style={{ border: '1px solid black', backgroundColor: '#fff' }}
+      contentStyle={{
+        fontSize: '1rem',
+        color: '#000',
+        padding: '0.5rem',
+      }}
+      buttonStyle={{
+        backgroundColor: 'white',
+        color: '#32a9fe',
+        border: '1px solid #32a9fe',
+        borderRadius: '5px',
+      }}
+      declineButtonStyle={{
+        backgroundColor: 'white',
+        color: '#32a9fe',
+        border: '1px solid #32a9fe',
+        borderRadius: '5px',
+      }}>
+      {t('cookieConsent')}
+    </CookieConsent>
+  )
+}
+
+export default CookieConsentPopup

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({
           </QueryClientProvider>
         </SessionProvider>
       </ThemeProvider>
+      <CookieConsentPopup
+        handleAcceptCookie={handleAcceptCookie}
+        handleDeclineCookie={handleDeclineCookie}
+      />
     </CacheProvider>
   )
 }

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"