Extend UserCentrics Snippet and funtionality

src/lib/locale.ts

@@ -0,0 +1,9 @@
+/**
+ * Splits locale by hyphen
+ *
+ * @internal
+ */
+export function splitLocale (locale : string) : string[]
+{
+	return locale.split("-");
+}

src/next/components/Snippet/Usercentrics.tsx

@@ -1,17 +1,25 @@
 import React, {ReactElement} from "react";
 import Script from "next/script";
+import {splitLocale} from "../../../lib/locale";
 
 export type UsercentricsProps = Readonly<{
 	id: string;
+	production?: boolean;
+	locale: string;
 }>;
 
 export function Usercentrics (props: UsercentricsProps): ReactElement | null
 {
+	const isProd = true === props.production;
+	const language = splitLocale(props.locale).at(0) ?? "en";
+
 	return (
 		<Script
 			id="usercentrics-cmp"
-			data-settings-id={props.id}
 			src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
+			data-version={!isProd ? "preview" : undefined}
+			data-settings-id={props.id}
+			data-language={language}
 			async
 		/>
 	);

src/react/hooks/usercentrics.ts

@@ -5,6 +5,8 @@ import {useEffect, useState} from "react";
 type WindowWithUsercentrics = Window & Readonly<{
 	UC_UI?: {
 		showFirstLayer(): void;
+		showSecondLayer(): void;
+		restartEmbeddings(): void;
 	};
 }>;
 
@@ -20,6 +22,8 @@ type UsercentricsEvent = CustomEvent<{
 
 type UsercentricsSettings = Readonly<{
 	openConsentManager(): void;
+	showSecondLayer(): void;
+	restartEmbeddings(): void;
 	hasAnyConsent: boolean;
 	/**
 	 * Contains all categories with consent apart from the essential categories
@@ -68,5 +72,13 @@ export function useUsercentrics () : UsercentricsSettings
 		{
 			(window as WindowWithUsercentrics).UC_UI?.showFirstLayer();
 		},
+		showSecondLayer (): void
+		{
+			(window as WindowWithUsercentrics).UC_UI?.showSecondLayer();
+		},
+		restartEmbeddings ()
+		{
+			(window as WindowWithUsercentrics).UC_UI?.restartEmbeddings();
+		},
 	}
 }