feat(SW-2719): Added Dialogshift chat widget to certain hotel pages

Approved-by: Matilda Landström

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
+}

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} />
+}

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}