diff --git a/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx b/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx index 878ee3ddaf9581755c4e07a0e191d36ca2932658..6968deaa91e8db816bc5f69a5bbe58e686a906a8 100644 --- a/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx +++ b/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" diff --git a/src/components/FunctionalArea/CookieBanner/CookieBanner.constants.ts b/src/components/FunctionalArea/CookieBanner/CookieBanner.constants.ts index 348c713c8438af90801986c556cd235696297d29..dc1f3a5f24dd0cf88344453205ca9d59209062fd 100644 --- a/src/components/FunctionalArea/CookieBanner/CookieBanner.constants.ts +++ b/src/components/FunctionalArea/CookieBanner/CookieBanner.constants.ts @@ -1,4 +1,5 @@ export const USER_ACCEPTED_COOKIES_COOKIE_NAME = 'cookiesAccepted'; +export const USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME = 'matomoAccepted'; export const USER_ACCEPTED_COOKIES_COOKIE_VALUE = { ACCEPTED: 'true',