feat(BOOK-68): Added kindly chatbot

Approved-by: Linus Flood

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

apps/scandic-web/components/ChatbotScript/constants.ts

@@ -0,0 +1 @@
+export const CHATBOT_HIDE_ROUTES = ["/hotelreservation"]

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