feat(BOOK-68): Added kindly chatbot

Approved-by: Linus Flood

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 || []

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

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,
   },
 })
 

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