diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a65c32..0803dbe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +2.7.0 +===== + +* (feature) Add `UsercentricsV3` component for v3 configurations. + + 2.6.0 ===== diff --git a/src/next/components/Snippet/Usercentrics.tsx b/src/next/components/Snippet/Usercentrics.tsx index 4133784..b64434e 100644 --- a/src/next/components/Snippet/Usercentrics.tsx +++ b/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; diff --git a/src/next/components/Snippet/UsercentricsV3.tsx b/src/next/components/Snippet/UsercentricsV3.tsx new file mode 100644 index 0000000..1897a8f --- /dev/null +++ b/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 ( +