From e20d72edeadc4530e5cc25217b6a219d549fa11b Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 24 Oct 2024 13:30:43 +0200
Subject: [PATCH] show info about matomo in cookie banner
---
.../CookieBanner/CookieBanner.component.tsx | 43 ++++++++++++++++++-
.../CookieBanner/CookieBanner.constants.ts | 1 +
2 files changed, 42 insertions(+), 2 deletions(-)
diff --git a/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx b/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx
index 878ee3dd..6968deaa 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 348c713c..dc1f3a5f 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',
--
GitLab