Feat/tracking consent

.storybook/TrackingConsentForm.jsx

@@ -0,0 +1,76 @@
+export const CONSENT_KEY = "user_tracking_consent";
+
+const overlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0,0,0,0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 9999,
+};
+
+const modalStyle = {
+  backgroundColor: "white",
+  borderRadius: "8px",
+  maxWidth: "600px",
+  width: "90%",
+  padding: "1.5rem",
+  textAlign: "left",
+  boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+};
+
+const footerStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: "1.5rem",
+};
+
+const buttonStyle = {
+  padding: "0.5rem 1rem",
+  borderRadius: "4px",
+  border: "none",
+  cursor: "pointer",
+};
+
+export default function TrackingConsentForm({ onConsentChange }) {
+  return (
+    <div style={overlayStyle}>
+      <div style={modalStyle}>
+        <h2>Before you use the TSS</h2>
+
+        <p>
+          We use cookies and tracking technologies to improve your experience.
+          By clicking <b>Accept</b>, you agree to analytics tracking. We
+        </p>
+
+        <ul>
+          <li>measure performance and detect issues</li>
+          <li>continuously improve functionality</li>
+        </ul>
+
+        <div style={footerStyle}>
+          <button
+            style={{
+              ...buttonStyle,
+              backgroundColor: "#45556a",
+              color: "white",
+            }}
+            onClick={() => onConsentChange("accepted")}
+          >
+            Accept
+          </button>
+          <button
+            style={{ ...buttonStyle, backgroundColor: "#eee" }}
+            onClick={() => onConsentChange("declined")}
+          >
+            Decline
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

.storybook/manager.js

@@ -1,9 +1,9 @@
 import { addons } from "@storybook/addons";
 import { create } from "@storybook/theming/create";
 
-const enableMatomo = process.env.STORYBOOK_ENABLE_MATOMO === "true";
+const hasConsent = localStorage.getItem("user_tracking_consent") === "accepted";
 
-if (enableMatomo) {
+if (process.env.STORYBOOK_ENABLE_MATOMO === "true" && hasConsent) {
   addons.setConfig({
     matomo: {
       baseUrl: process.env.STORYBOOK_MATOMO_URL,
@@ -12,7 +12,6 @@ if (enableMatomo) {
     },
   });
 }
-console.log("Matomo enabled: ", enableMatomo);
 
 addons.setConfig({
   theme: create({

.storybook/overview.mdx

@@ -1,7 +1,26 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import React, { useState } from "react";
+import TrackingConsentForm from "./TrackingConsentForm";
+import { getConsent, setConsent } from "./trackingConsent";
 
 <Meta title="Overview" />
 
+{(() => {
+  const [consent, setLocalConsent] = useState(getConsent());
+
+  if (consent) return null;
+
+  return (
+    <TrackingConsentForm
+      onConsentChange={(value) => {
+        setConsent(value);
+        setLocalConsent(value);
+        window.top.location.reload();
+      }}
+    />
+  );
+})()}
+
 <div
   style={{
     backgroundColor: '#45556a',

.storybook/trackingConsent.js

@@ -0,0 +1,9 @@
+export const CONSENT_KEY = "user_tracking_consent";
+
+export function getConsent() {
+  return localStorage.getItem(CONSENT_KEY);
+}
+
+export function setConsent(value) {
+  localStorage.setItem(CONSENT_KEY, value);
+}