645a99a844
feat(LOY-415): Add SJ widget * feat(LOY-415): Add SJ widget can be added as dynamic content to Content Pages * feat(LOY-415): init SJ widget with a useEffect instead due to onLoad only being called the first time * make sure to only initialize the SJ widget once and handle navigation Approved-by: Erik Tiekstra
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import Script from "next/script"
|
|
import { useEffect, useRef, useState } from "react"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
const SJSupportedLangs = ["en", "sv"] as const
|
|
|
|
export function SJWidget() {
|
|
const lang = useLang()
|
|
const [scriptInitialized, setScriptInitialized] = useState(
|
|
!!window.SJ?.widget?.init
|
|
)
|
|
const componentInitialized = useRef(false)
|
|
|
|
useEffect(() => {
|
|
const initWidget = () => {
|
|
if (componentInitialized.current === true) return
|
|
if (!window.SJ?.widget?.init) return
|
|
|
|
window.SJ.widget.init({
|
|
micrositeId: "12952d0f-c70f-452c-9598-6586a64c7b60",
|
|
language: isSJSupportedLang(lang) ? lang : "en",
|
|
})
|
|
|
|
componentInitialized.current = true
|
|
}
|
|
|
|
initWidget()
|
|
}, [lang, scriptInitialized])
|
|
|
|
return (
|
|
<>
|
|
<Script
|
|
src="https://www.sj.se/microsite-widget/microsite-widget.min.js"
|
|
strategy="lazyOnload"
|
|
onLoad={() => setScriptInitialized(true)}
|
|
/>
|
|
|
|
<div id="sj-widget"> </div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function isSJSupportedLang(
|
|
lang: string
|
|
): lang is (typeof SJSupportedLangs)[number] {
|
|
return SJSupportedLangs.includes(lang as (typeof SJSupportedLangs)[number])
|
|
}
|