From 645a99a844be380807ff612f0ee0b627366b80e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20J=C3=A4derberg?=
 <joakim.jaderberg@scandichotels.com>
Date: Wed, 5 Nov 2025 13:05:15 +0000
Subject: [PATCH] Merged in feature/LOY-415-sj-widget (pull request #3074)

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
---
 .../Blocks/DynamicContent/index.tsx           |  3 ++
 .../scandic-web/components/SJWidget/index.tsx | 50 +++++++++++++++++++
 apps/scandic-web/types/window.d.ts            |  5 ++
 packages/trpc/lib/types/dynamicContent.ts     |  1 +
 4 files changed, 59 insertions(+)
 create mode 100644 apps/scandic-web/components/SJWidget/index.tsx

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
index 456c29133..c70ebf0c7 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
@@ -22,6 +22,7 @@ import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrap
 import NextStay from "@/components/Blocks/DynamicContent/Stays/NextStay"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
+import { SJWidget } from "@/components/SJWidget"
 
 import JobylonFeed from "./JobylonFeed"
 
@@ -84,6 +85,8 @@ function DynamicContentBlocks(props: DynamicContentProps) {
           preamble={dynamic_content.subtitle}
         />
       )
+    case DynamicContentEnum.Blocks.components.sj_widget:
+      return <SJWidget />
     default:
       return null
   }
diff --git a/apps/scandic-web/components/SJWidget/index.tsx b/apps/scandic-web/components/SJWidget/index.tsx
new file mode 100644
index 000000000..da0806ce9
--- /dev/null
+++ b/apps/scandic-web/components/SJWidget/index.tsx
@@ -0,0 +1,50 @@
+"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">&nbsp;</div>
+    </>
+  )
+}
+
+function isSJSupportedLang(
+  lang: string
+): lang is (typeof SJSupportedLangs)[number] {
+  return SJSupportedLangs.includes(lang as (typeof SJSupportedLangs)[number])
+}
diff --git a/apps/scandic-web/types/window.d.ts b/apps/scandic-web/types/window.d.ts
index 25a529c2f..ac1801969 100644
--- a/apps/scandic-web/types/window.d.ts
+++ b/apps/scandic-web/types/window.d.ts
@@ -29,4 +29,9 @@ interface Window {
       right?: string
     }
   }
+  SJ?: {
+    widget?: {
+      init?: (args: { micrositeId: string; language: "en" | "sv" }) => void
+    }
+  }
 }
diff --git a/packages/trpc/lib/types/dynamicContent.ts b/packages/trpc/lib/types/dynamicContent.ts
index 7ccdd3400..a0fc4116f 100644
--- a/packages/trpc/lib/types/dynamicContent.ts
+++ b/packages/trpc/lib/types/dynamicContent.ts
@@ -27,6 +27,7 @@ export namespace DynamicContentEnum {
       sas_transfer_points: "sas_transfer_points",
       sas_tier_comparison: "sas_tier_comparison",
       manage_cookie_consent: "manage_cookie_consent",
+      sj_widget: "sj_widget",
       unknown: "unknown",
     } as const