Resolve "cookie banner for matomo"

Closes #301 (closed)

src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx

@@ -4,22 +4,35 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { Button } from '@/shared/Button';
 import Link from 'next/link';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { cookiePolicyUrlSelector } from '@/redux/configuration/configuration.selectors';
+import { OptionInput } from '@/components/Map/Drawer/ExportDrawer/CheckboxFilter/OptionInput';
+import { CheckboxItem } from '@/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.types';
+import { ZERO } from '@/constants/common';
 import {
   USER_ACCEPTED_COOKIES_COOKIE_NAME,
   USER_ACCEPTED_COOKIES_COOKIE_VALUE,
+  USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,
 } from './CookieBanner.constants';
 
+const selectMatomoOption: CheckboxItem = {
+  id: 'select-matomo',
+  label: 'I agree to collect my data by matomo',
+};
+
 export const CookieBanner = (): React.ReactNode => {
   const dispatch = useAppDispatch();
   const { visible, accepted } = useAppSelector(selectCookieBanner);
   const cookiePolicyUrl = useAppSelector(cookiePolicyUrlSelector);
 
+  const [options, setOptions] = useState([selectMatomoOption]);
+
   useEffect(() => {
     const isAccepted =
       localStorage.getItem(USER_ACCEPTED_COOKIES_COOKIE_NAME) ===
-      USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED;
+        USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED &&
+      localStorage.getItem(USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME) !== null &&
+      localStorage.getItem(USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME) !== undefined;
     if (isAccepted) {
       dispatch(acceptCookies());
     } else {
@@ -33,6 +46,25 @@ export const CookieBanner = (): React.ReactNode => {
       USER_ACCEPTED_COOKIES_COOKIE_NAME,
       USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED,
     );
+    if (options.length > ZERO) {
+      localStorage.setItem(
+        USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,
+        USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED,
+      );
+    } else {
+      localStorage.setItem(
+        USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,
+        USER_ACCEPTED_COOKIES_COOKIE_VALUE.DECLINED,
+      );
+    }
+  };
+
+  const selectMatomo = (data: CheckboxItem): void => {
+    if (options.length > ZERO) {
+      setOptions([]);
+    } else {
+      setOptions([data]);
+    }
   };
 
   if (!visible || accepted) {
@@ -52,6 +84,13 @@ export const CookieBanner = (): React.ReactNode => {
             </Link>
           </p>
         )}
+        <OptionInput
+          option={selectMatomoOption}
+          currentOptions={options}
+          handleRadioChange={() => {}}
+          handleCheckboxChange={selectMatomo}
+          type="checkbox"
+        />
       </p>
       <Button
         className="h-10 w-36 justify-center"