Add UsercentricsV3 component

CHANGELOG.md

@@ -1,3 +1,9 @@
+2.7.0
+=====
+
+* (feature) Add `UsercentricsV3` component for v3 configurations.
+
+
 2.6.0
 =====
 

src/next/components/Snippet/Usercentrics.tsx

@@ -8,6 +8,10 @@ export type UsercentricsProps = Readonly<{
 	locale: string;
 }>;
 
+/**
+ * This component will *only* work with v2 configuration IDs. If you're trying to use this component with a v3 configuration,
+ * the website will become unscrollable as Usercentrics web-component silently fails to load and blocks any scrolling.
+ */
 export function Usercentrics (props: UsercentricsProps): ReactElement | null
 {
 	const isProd = true === props.production;

src/next/components/Snippet/UsercentricsV3.tsx

@@ -0,0 +1,37 @@
+import React, {ReactElement} from "react";
+import Script from "next/script";
+import {parseLocale} from "../../../lib/locale";
+
+export type UsercentricsV3Props = Readonly<{
+	id: string;
+	production?: boolean;
+	locale?: string;
+}>;
+
+/**
+ * This component will *only* work with v3 configuration IDs. For v2 configurations, use the `Usercentrics` component instead.
+ */
+export function UsercentricsV3 (props: UsercentricsV3Props): ReactElement
+{
+	const {
+		id,
+		production,
+		locale,
+	} = props;
+
+	const isProd = true === production;
+	const language = undefined !== locale
+		? (parseLocale(locale)?.language ?? undefined)
+		: undefined;
+
+	return (
+		<Script
+			id="usercentrics-cmp"
+			src="https://web.cmp.usercentrics.eu/ui/loader.js"
+			data-draft={!isProd ? "true" : undefined}
+			data-settings-id={id}
+			data-language={language}
+			async
+		/>
+	);
+}