fix: conflicts

components/CookieConsent.js

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import 'vanilla-cookieconsent';
+import Cookies from 'js-cookie';
+import ReactGA from 'react-ga4';
 
 const pluginConfig = {
   current_lang: 'en',
@@ -15,6 +17,9 @@ const pluginConfig = {
       swap_buttons: false,
     },
   },
+  onAccept: function () {
+    googleAnalyticsCookieScript();
+  },
   languages: {
     en: {
       consent_modal: {
@@ -26,7 +31,7 @@ const pluginConfig = {
           role: 'accept_all',
         },
         secondary_btn: {
-          text: 'Reject all',
+          text: 'Reject',
           role: 'accept_necessary',
         },
       },
@@ -63,12 +68,29 @@ const pluginConfig = {
             description:
               'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="mailto:[email protected]">contact us</a>.',
           },
+          {
+            title: 'Analytics cookies',
+            description:
+              'These cookies will help us to make your experience better with the site',
+            toggle: {
+              value: 'analytics',
+              enabled: true,
+              readonly: false,
+            },
+          },
         ],
       },
     },
   },
 };
 
+const googleAnalyticsCookieScript = () => {
+  const cookie = JSON.parse(Cookies.get('cc_cookie'));
+  if (cookie?.categories.includes('analytics')) {
+    ReactGA.initialize(`${process.env.GA_MEASUREMENT_ID}`);
+  }
+};
+
 const CookieConsent = () => {
   useEffect(() => {
     if (!document.getElementById('cc--main')) {