Merged in feat/sw-3416-add-sitewidealert-to-partner-sas (pull request #2773)

feat(SW-3416): Add SiteWideAlert to partner-sas

* Add SiteWideAlert to partner-sas

* Remove log


Approved-by: Joakim Jäderberg

apps/partner-sas/app/[lang]/layout.tsx

@@ -12,6 +12,7 @@ import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 import { TrpcProvider } from "@scandic-hotels/trpc/Provider"
 
 import { RACRouterProvider } from "@/components/RACRouterProvider"
+import { SiteWideAlert } from "@/components/SitewideAlert"
 import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
@@ -83,6 +84,7 @@ export default async function RootLayout(props: RootLayoutProps) {
                         trackGenericEvent,
                       }}
                     >
+                      <SiteWideAlert />
                       <Header />
                       {props.bookingwidget}
                       <main>{children}</main>

apps/partner-sas/components/SitewideAlert/index.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useCallback, useRef } from "react"
+
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
+import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
+import { debounce } from "@scandic-hotels/common/utils/debounce"
+import { Alert } from "@scandic-hotels/design-system/Alert"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./sitewideAlert.module.css"
+
+export 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 updateHeightRefCallback = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        const debouncedUpdate = debounce(([entry]) => {
+          const height = entry.contentRect.height
+
+          document.documentElement.style.setProperty(
+            "--sitewide-alert-height",
+            `${height}px`
+          )
+
+          document.documentElement.style.setProperty(
+            "--sitewide-alert-sticky-height",
+            isAlarm ? `${height}px` : "0px"
+          )
+        }, 100)
+
+        const observer = new ResizeObserver(debouncedUpdate)
+        observer.observe(node)
+
+        return () => {
+          if (node) {
+            observer.unobserve(node)
+          }
+          observer.disconnect()
+        }
+      }
+    },
+    [isAlarm]
+  )
+
+  if (isLoading || !alert) {
+    return null
+  }
+
+  return (
+    <div
+      id="sitewide-alert"
+      ref={(node) => {
+        alertRef.current = node
+        return updateHeightRefCallback(node)
+      }}
+      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>
+  )
+}

apps/partner-sas/components/SitewideAlert/sitewideAlert.module.css

@@ -0,0 +1,11 @@
+.sitewideAlert {
+  width: 100%;
+  z-index: var(--header-z-index);
+  position: relative;
+}
+
+.alarm {
+  position: sticky;
+  top: 0;
+  z-index: calc(var(--header-z-index) + 1);
+}