From 15a352ea9909e6cd1765bedc4d7ef08df58ff620 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 11 Sep 2025 12:44:47 +0000
Subject: [PATCH] feat(BOOK-68): Added kindly chatbot

Approved-by: Linus Flood
---
 apps/scandic-web/app/[lang]/(live)/layout.tsx |  2 ++
 .../components/ChatbotScript/RouteChange.tsx  | 34 +++++++++++++++++++
 .../components/ChatbotScript/constants.ts     |  1 +
 .../components/ChatbotScript/index.tsx        | 25 ++++++++++++++
 apps/scandic-web/env/server.ts                |  5 +++
 apps/scandic-web/types/window.d.ts            |  6 ++++
 6 files changed, 73 insertions(+)
 create mode 100644 apps/scandic-web/components/ChatbotScript/RouteChange.tsx
 create mode 100644 apps/scandic-web/components/ChatbotScript/constants.ts
 create mode 100644 apps/scandic-web/components/ChatbotScript/index.tsx

diff --git a/apps/scandic-web/app/[lang]/(live)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/layout.tsx
index 64191d25f..418595edd 100644
--- a/apps/scandic-web/app/[lang]/(live)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx
@@ -17,6 +17,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
 
 import { SessionRefresher } from "@/components/Auth/TokenRefresher"
 import { BookingFlowProviders } from "@/components/BookingFlowProviders"
+import ChatbotScript from "@/components/ChatbotScript"
 import CookieBotConsent from "@/components/CookieBot"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
@@ -53,6 +54,7 @@ export default async function RootLayout(
         <FontPreload />
         <AdobeSDKScript />
         <GTMScript />
+        <ChatbotScript />
         {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         <Script id="ensure-adobeDataLayer">{`
           window.adobeDataLayer = window.adobeDataLayer || []
diff --git a/apps/scandic-web/components/ChatbotScript/RouteChange.tsx b/apps/scandic-web/components/ChatbotScript/RouteChange.tsx
new file mode 100644
index 000000000..deba88533
--- /dev/null
+++ b/apps/scandic-web/components/ChatbotScript/RouteChange.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import useLang from "@/hooks/useLang"
+
+import { CHATBOT_HIDE_ROUTES } from "./constants"
+
+interface ChatbotRouteChangeProps {
+  liveLangs: string[]
+}
+
+export function ChatbotRouteChange({ liveLangs }: ChatbotRouteChangeProps) {
+  const pathName = usePathname()
+  const currentLang = useLang()
+
+  useEffect(() => {
+    const isLive = liveLangs.includes(currentLang)
+    const shouldHideChatbot = CHATBOT_HIDE_ROUTES.some((route) =>
+      pathName.includes(route)
+    )
+    if (window.kindlyChat) {
+      if (shouldHideChatbot || !isLive) {
+        window.kindlyChat.closeChat()
+        window.kindlyChat.hideBubble()
+      } else {
+        window.kindlyChat.showBubble()
+      }
+    }
+  }, [pathName, liveLangs, currentLang])
+
+  return null
+}
diff --git a/apps/scandic-web/components/ChatbotScript/constants.ts b/apps/scandic-web/components/ChatbotScript/constants.ts
new file mode 100644
index 000000000..00d2f51db
--- /dev/null
+++ b/apps/scandic-web/components/ChatbotScript/constants.ts
@@ -0,0 +1 @@
+export const CHATBOT_HIDE_ROUTES = ["/hotelreservation"]
diff --git a/apps/scandic-web/components/ChatbotScript/index.tsx b/apps/scandic-web/components/ChatbotScript/index.tsx
new file mode 100644
index 000000000..540eff6a3
--- /dev/null
+++ b/apps/scandic-web/components/ChatbotScript/index.tsx
@@ -0,0 +1,25 @@
+import Script from "next/script"
+
+import { env } from "@/env/server"
+
+import { ChatbotRouteChange } from "@/components/ChatbotScript/RouteChange"
+import { getLang } from "@/i18n/serverContext"
+
+export default async function ChatbotScript() {
+  const lang = await getLang()
+  const liveLangs = env.CHATBOT_LIVE_LANGS
+
+  return (
+    <>
+      <Script
+        id="kindly-chat"
+        src="https://chat.kindlycdn.com/kindly-chat.js"
+        data-bot-key="910bd27a-7472-43a1-bcfc-955b41adc3e7"
+        data-shadow-dom
+        data-language={lang}
+        defer
+      ></Script>
+      <ChatbotRouteChange liveLangs={liveLangs} />
+    </>
+  )
+}
diff --git a/apps/scandic-web/env/server.ts b/apps/scandic-web/env/server.ts
index b2b924c9b..45bd0ae25 100644
--- a/apps/scandic-web/env/server.ts
+++ b/apps/scandic-web/env/server.ts
@@ -164,6 +164,10 @@ export const env = createEnv({
       .refine((s) => s === "true" || s === "false")
       .transform((s) => s === "true")
       .default("false"),
+    CHATBOT_LIVE_LANGS: z
+      .string()
+      .optional()
+      .transform((s) => s?.split(",") || []),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -246,6 +250,7 @@ export const env = createEnv({
     CAMPAIGN_PAGES_ENABLED: process.env.CAMPAIGN_PAGES_ENABLED,
     WEBVIEW_SHOW_OVERVIEW: process.env.WEBVIEW_SHOW_OVERVIEW,
     ENABLE_NEW_OVERVIEW_SECTION: process.env.ENABLE_NEW_OVERVIEW_SECTION,
+    CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,
   },
 })
 
diff --git a/apps/scandic-web/types/window.d.ts b/apps/scandic-web/types/window.d.ts
index b6b03f0aa..58dfb4f4b 100644
--- a/apps/scandic-web/types/window.d.ts
+++ b/apps/scandic-web/types/window.d.ts
@@ -17,4 +17,10 @@ interface Window {
   }
   Cookiebot: { changed: boolean; consented: boolean }
   ApplePaySession: (() => void) | undefined
+  kindlyChat: {
+    showBubble: () => void
+    closeChat: () => void
+    showChat: () => void
+    hideBubble: () => void
+  }
 }