feat(BOOK-67): Added functionality to show/hide the chatbot

Approved-by: Linus Flood

apps/scandic-web/components/ChatbotScript/Client.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import Script from "next/script"
+import { useEffect } from "react"
+
+import { shouldShowChatbot } from "@/components/ChatbotScript/utils"
+import useLang from "@/hooks/useLang"
+
+interface ChatbotClientProps {
+  liveLangs: string[]
+}
+
+export function ChatbotClient({ liveLangs }: ChatbotClientProps) {
+  const lang = useLang()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const currentLang = useLang()
+  const isLive = liveLangs.includes(currentLang)
+  const shouldShow =
+    isLive && shouldShowChatbot(pathname, searchParams, currentLang)
+
+  useEffect(() => {
+    window.kindlyOptions = {
+      position: {
+        bottom: "130px",
+        right: "20px",
+      },
+    }
+  }, [])
+
+  useEffect(() => {
+    if (window.kindlyChat) {
+      if (!shouldShow) {
+        window.kindlyChat.closeChat()
+        window.kindlyChat.hideBubble()
+      } else {
+        window.kindlyChat.showBubble()
+      }
+    }
+  }, [shouldShow])
+
+  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-bubble-hidden={!shouldShow}
+      data-language={lang}
+      defer
+    ></Script>
+  )
+}