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/SitewideAlert/Client.tsx

@@ -1,70 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useRef } from "react"
-
-import { StickyElementNameEnum } from "@/stores/sticky-position"
-
-import Alert from "@/components/TempDesignSystem/Alert"
-import useStickyPosition from "@/hooks/useStickyPosition"
-import { debounce } from "@/utils/debounce"
-
-import styles from "./sitewideAlert.module.css"
-
-import { AlertTypeEnum } from "@/types/enums/alert"
-import type { SitewideAlertProps } from "./sitewideAlert"
-
-export default function SiteWideAlertClient({ alert }: SitewideAlertProps) {
-  const alertRef = useRef<HTMLDivElement>(null)
-  const isAlarm = alert.type === AlertTypeEnum.Alarm
-  useStickyPosition({
-    ref: isAlarm ? alertRef : undefined,
-    name: StickyElementNameEnum.SITEWIDE_ALERT,
-  })
-
-  const updateHeight = useCallback(() => {
-    if (alertRef.current) {
-      const height = alertRef.current.offsetHeight
-      document.documentElement.style.setProperty(
-        "--sitewide-alert-height",
-        `${height}px`
-      )
-    }
-  }, [])
-
-  useEffect(() => {
-    const alertElement = alertRef.current
-    const debouncedResizeHandler = debounce(() => {
-      updateHeight()
-    }, 100)
-    const observer = new ResizeObserver(debouncedResizeHandler)
-
-    if (alertElement) {
-      observer.observe(alertElement)
-    }
-
-    return () => {
-      if (alertElement) {
-        observer.unobserve(alertElement)
-      }
-      observer.disconnect()
-    }
-  }, [updateHeight])
-
-  return (
-    <div
-      ref={alertRef}
-      className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
-    >
-      <Alert
-        variant="banner"
-        type={alert.type}
-        link={alert.link}
-        phoneContact={alert.phoneContact}
-        sidepeekCtaText={alert.sidepeekButton?.cta_text}
-        sidepeekContent={alert.sidepeekContent}
-        heading={alert.heading}
-        text={alert.text}
-      />
-    </div>
-  )
-}

components/SitewideAlert/index.tsx

@@ -1,17 +1,84 @@
-import { getSiteConfig } from "@/lib/trpc/memoizedRequests"
+"use client"
 
-import SiteWideAlertClient from "./Client"
+import { useCallback, useEffect, useRef } from "react"
 
-export function preload() {
-  void getSiteConfig()
-}
+import { trpc } from "@/lib/trpc/client"
+import { StickyElementNameEnum } from "@/stores/sticky-position"
 
-export default async function SitewideAlert() {
-  const siteConfig = await getSiteConfig()
+import Alert from "@/components/TempDesignSystem/Alert"
+import useLang from "@/hooks/useLang"
+import useStickyPosition from "@/hooks/useStickyPosition"
+import { debounce } from "@/utils/debounce"
 
-  if (!siteConfig?.sitewideAlert) {
+import styles from "./sitewideAlert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default function SiteWideAlert() {
+  const alertRef = useRef<HTMLDivElement>(null)
+  const lang = useLang()
+  const { data: siteConfig, isLoading } =
+    trpc.contentstack.base.siteConfig.useQuery(
+      { lang },
+      { refetchInterval: 60_000 }
+    )
+
+  const alert = siteConfig?.sitewideAlert
+
+  const isAlarm = alert?.type === AlertTypeEnum.Alarm
+  useStickyPosition({
+    ref: isAlarm ? alertRef : undefined,
+    name: StickyElementNameEnum.SITEWIDE_ALERT,
+  })
+
+  const updateHeight = useCallback(() => {
+    if (alertRef.current) {
+      const height = alertRef.current.offsetHeight
+      document.documentElement.style.setProperty(
+        "--sitewide-alert-height",
+        `${height}px`
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    const alertElement = alertRef.current
+    const debouncedResizeHandler = debounce(() => {
+      updateHeight()
+    }, 100)
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    if (alertElement) {
+      observer.observe(alertElement)
+    }
+
+    return () => {
+      if (alertElement) {
+        observer.unobserve(alertElement)
+      }
+      observer.disconnect()
+    }
+  }, [updateHeight])
+
+  if (isLoading || !alert) {
     return null
   }
 
-  return <SiteWideAlertClient alert={siteConfig.sitewideAlert} />
+  return (
+    <div
+      ref={alertRef}
+      className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
+    >
+      <Alert
+        variant="banner"
+        type={alert.type}
+        link={alert.link}
+        phoneContact={alert.phoneContact}
+        sidepeekCtaText={alert.sidepeekButton?.cta_text}
+        sidepeekContent={alert.sidepeekContent}
+        heading={alert.heading}
+        text={alert.text}
+      />
+    </div>
+  )
 }

components/SitewideAlert/sitewideAlert.ts

@@ -1,5 +0,0 @@
-import type { Alert } from "@/types/trpc/routers/contentstack/siteConfig"
-
-export interface SitewideAlertProps {
-  alert: Alert
-}