Merged in feat/refactor-header-footer-sitewidealert (pull request #1374)

Refactor: removed parallel routes for header, footer and sidewidealert. Langswitcher and sidewidealert now client components

* feat - removed parallel routes and made sidepeek and sitewidealerts as client components

* Langswitcher as client component

* Fixed lang switcher for current header

* Passing lang when fetching siteconfig

* Merge branch 'master' into feat/refactor-header-footer-sitewidealert

* Refactor

* Removed dead code

* Show only languages that has translation

* Refetch sitewidealert every 60 seconds

* Merge branch 'master' into feat/refactor-header-footer-sitewidealert

* Removed sidepeek parallel route from my-stay

* Added missing env.var to env.test

* Removed console.log


Approved-by: Joakim Jäderberg

components/LanguageSwitcher/index.tsx

@@ -1,9 +1,11 @@
 "use client"
 
+import { usePathname } from "next/navigation"
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
+import { trpc } from "@/lib/trpc/client"
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
@@ -11,6 +13,7 @@ import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
+import SkeletonShimmer from "../SkeletonShimmer"
 import Caption from "../TempDesignSystem/Text/Caption"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
@@ -24,10 +27,7 @@ import {
   LanguageSwitcherTypesEnum,
 } from "@/types/components/languageSwitcher/languageSwitcher"
 
-export default function LanguageSwitcher({
-  urls,
-  type,
-}: LanguageSwitcherProps) {
+export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
   const {
@@ -37,6 +37,14 @@ export default function LanguageSwitcher({
     isHeaderLanguageSwitcherOpen,
   } = useDropdownStore()
 
+  const pathName = usePathname()
+
+  const { data: languagesResponse, isLoading } =
+    trpc.contentstack.languageSwitcher.get.useQuery({
+      pathName,
+      lang: currentLanguage,
+    })
+
   const languageSwitcherRef = useRef<HTMLDivElement>(null)
   const isFooter = type === LanguageSwitcherTypesEnum.Footer
   const isHeader = !isFooter
@@ -80,6 +88,14 @@ export default function LanguageSwitcher({
   const closeMsg = intl.formatMessage({ id: "Close language menu" })
   const openMsg = intl.formatMessage({ id: "Open language menu" })
 
+  if (isLoading) {
+    return <SkeletonShimmer width="12ch" />
+  }
+
+  if (!languagesResponse?.urls) {
+    return null
+  }
+
   return (
     <div className={classNames} ref={languageSwitcherRef}>
       <button
@@ -105,7 +121,7 @@ export default function LanguageSwitcher({
         {isLanguageSwitcherOpen ? (
           <LanguageSwitcherContainer type={type}>
             <LanguageSwitcherContent
-              urls={urls}
+              urls={languagesResponse.urls}
               onLanguageSwitch={() => toggleDropdown(dropdownType)}
             />
           </LanguageSwitcherContainer>