Add Usercentrics hook + snippet

CHANGELOG.md

@@ -1,7 +1,9 @@
-2.1.2 (unreleased)
+2.2.0 (unreleased)
 =====
 
 * (improvement) Add `isAbortError()`.
+* (feature) Add Usercentrics hook.
+* (feature) Add `<Usercentrics>` snippet component.
 
 
 2.1.1

src/next/components/Snippet/Usercentrics.tsx

@@ -0,0 +1,18 @@
+import React, {ReactElement} from "react";
+import Script from "next/script";
+
+export type UsercentricsProps = Readonly<{
+	id: string;
+}>;
+
+export function Usercentrics (props: UsercentricsProps): ReactElement | null
+{
+	return (
+		<Script
+			id="usercentrics-cmp"
+			data-settings-id={props.id}
+			src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
+			async
+		/>
+	);
+}

src/react/hooks/usercentrics.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import {useEffect, useState} from "react";
+
+type WindowWithUsercentrics = Window & Readonly<{
+	UC_UI?: {
+		showFirstLayer(): void;
+	};
+}>;
+
+/**
+ * The essential key
+ */
+type UsercentricsConsentCategories = "essential" | "marketing" | "functional" | "statictics" | string;
+type UsercentricsEvent = CustomEvent<{
+	ucCategory: Partial<Record<UsercentricsConsentCategories, boolean>>;
+}>;
+
+
+
+type UsercentricsSettings = Readonly<{
+	openConsentManager(): void;
+	hasAnyConsent: boolean;
+	/**
+	 * Contains all categories with consent apart from the essential categories
+	 */
+	consent: Record<UsercentricsConsentCategories, boolean>;
+}>;
+
+
+/**
+ * Custom hook to integrate with user centrics
+ */
+export function useUsercentrics () : UsercentricsSettings
+{
+	const [consent, setConsent] = useState<Record<UsercentricsConsentCategories, boolean>>({
+		marketing: false,
+		functional: false,
+		statistics: false,
+	});
+
+	useEffect(() =>
+	{
+		const onUsercentricsEvent = (event: UsercentricsEvent) =>
+		{
+			const newConsent: Partial<Record<UsercentricsConsentCategories, boolean>> = event.detail.ucCategory;
+
+			setConsent({
+				...newConsent,
+				marketing: newConsent.marketing ?? false,
+				functional: newConsent.functional ?? false,
+				statistics: newConsent.statistics ?? false,
+			});
+		};
+
+		window.addEventListener("ucEvent", onUsercentricsEvent as EventListener);
+
+		return () =>
+		{
+			window.removeEventListener("ucEvent", onUsercentricsEvent as EventListener);
+		}
+	}, []);
+
+	return {
+		consent,
+		hasAnyConsent: Object.keys(consent).some(category => "essential" !== category && consent[category]),
+		openConsentManager (): void
+		{
+			(window as WindowWithUsercentrics).UC_UI?.showFirstLayer();
+		},
+	}
+}