From d492b5ad6a368d379b378e23d3915dcd410c8541 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 16 Jun 2025 12:33:38 +0000
Subject: [PATCH] feat(SW-2719): Added Dialogshift chat widget to certain hotel
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../HotelPage/DialogshiftWidget/Client.tsx    | 46 +++++++++++++++++++
 .../HotelPage/DialogshiftWidget/index.tsx     | 40 ++++++++++++++++
 .../ContentType/HotelPage/index.tsx           |  4 ++
 apps/scandic-web/package.json                 |  1 +
 yarn.lock                                     |  8 ++++
 5 files changed, 99 insertions(+)
 create mode 100644 apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/Client.tsx
 create mode 100644 apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/index.tsx

diff --git a/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/Client.tsx b/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/Client.tsx
new file mode 100644
index 000000000..a4d588456
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/Client.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import "dialogshift-webchat-sdk/bundles/dialogshift-webchat-sdk.min.css"
+
+import { useEffect, useRef } from "react"
+
+import type { Lang } from "@/constants/languages"
+
+interface DialogshiftWidgetClientProps {
+  widgetId: string
+  language: Lang
+}
+
+export default function DialogshiftWidgetClient({
+  widgetId,
+  language,
+}: DialogshiftWidgetClientProps) {
+  const dialogshiftRef = useRef<any>(null)
+
+  useEffect(() => {
+    const loadDialogshift = async () => {
+      try {
+        dialogshiftRef.current = await import("dialogshift-webchat-sdk")
+        dialogshiftRef.current.instance({
+          id: widgetId,
+          locale: language,
+        })
+      } catch (error) {
+        console.error("Failed to load Dialogshift chat:", error)
+      }
+    }
+
+    if (!dialogshiftRef.current) {
+      loadDialogshift()
+    }
+
+    return () => {
+      if (dialogshiftRef.current?.instance) {
+        dialogshiftRef.current.instance().destroy()
+        dialogshiftRef.current = null
+      }
+    }
+  }, [widgetId, language])
+
+  return null
+}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/index.tsx
new file mode 100644
index 000000000..1f4d0c883
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/HotelPage/DialogshiftWidget/index.tsx
@@ -0,0 +1,40 @@
+import { getLang } from "@/i18n/serverContext"
+
+import DialogshiftWidgetClient from "./Client"
+
+interface DialogshiftWidgetProps {
+  hotelId: string
+}
+
+const DIALOG_SHIFT_WIDGET_IDS = [
+  {
+    hotelName: "Scandic Berlin Kurfürstendamm",
+    hotelId: "554",
+    widgetId: "pro1dbe",
+  },
+  {
+    hotelName: "Scandic Berlin Potsdamer Platz",
+    hotelId: "551",
+    widgetId: "pro2363",
+  },
+  {
+    hotelName: "Scandic Hamburg Emporio",
+    hotelId: "550",
+    widgetId: "pro219b",
+  },
+]
+
+export default async function DialogshiftWidget({
+  hotelId,
+}: DialogshiftWidgetProps) {
+  const lang = await getLang()
+  const widgetId = DIALOG_SHIFT_WIDGET_IDS.find(
+    (item) => item.hotelId === hotelId
+  )?.widgetId
+
+  if (!widgetId) {
+    return null
+  }
+
+  return <DialogshiftWidgetClient widgetId={widgetId} language={lang} />
+}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
index 4653135bf..a169a76f6 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
@@ -31,6 +31,7 @@ import RestaurantBarSidePeek from "./SidePeeks/RestaurantBar"
 import RoomSidePeek from "./SidePeeks/Room"
 import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
 import AmenitiesList from "./AmenitiesList"
+import DialogshiftWidget from "./DialogshiftWidget"
 import Facilities from "./Facilities"
 import IntroSection from "./IntroSection"
 import PreviewImages from "./PreviewImages"
@@ -287,6 +288,9 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           <RoomSidePeek key={room.name} hotelId={hotelId} room={room} />
         ))}
       </SidePeeks>
+
+      <DialogshiftWidget hotelId={hotelId} />
+
       <Suspense fallback={null}>
         <TrackingSDK
           pageData={trackingPageData}
diff --git a/apps/scandic-web/package.json b/apps/scandic-web/package.json
index 849737cca..07f0dd948 100644
--- a/apps/scandic-web/package.json
+++ b/apps/scandic-web/package.json
@@ -71,6 +71,7 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
+    "dialogshift-webchat-sdk": "^2.10.1",
     "downshift": "^9.0.9",
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
diff --git a/yarn.lock b/yarn.lock
index 88ffa5b38..85b8ef148 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7124,6 +7124,7 @@ __metadata:
     date-fns: "npm:^4.1.0"
     dayjs: "npm:^1.11.13"
     deepmerge: "npm:^4.3.1"
+    dialogshift-webchat-sdk: "npm:^2.10.1"
     dotenv: "npm:^16.5.0"
     downshift: "npm:^9.0.9"
     embla-carousel: "npm:^8.6.0"
@@ -12497,6 +12498,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dialogshift-webchat-sdk@npm:^2.10.1":
+  version: 2.10.1
+  resolution: "dialogshift-webchat-sdk@npm:2.10.1"
+  checksum: 10c0/6b88f5818093792516307dcf70edbb7f686d88982894fe29703b9a0f83876cd39b944d3f1bf2ee4495f203a96b918fa3114412d716d2ca02ca11ceff115635c7
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
   version: 29.6.3
   resolution: "diff-sequences@npm:29.6.3"