feat(SW-650): added sitewide alert to use sticky position hook

components/SitewideAlert/Client.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { useRef } from "react"
+
+import { StickyElementNameEnum } from "@/stores/sticky-position"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+import useStickyPosition from "@/hooks/useStickyPosition"
+
+import { SitewideAlertProps } from "./sitewideAlert"
+
+import styles from "./sitewideAlert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default function SiteWideAlertClient({ alert }: SitewideAlertProps) {
+  const alertRef = useRef(null)
+  useStickyPosition({
+    ref: alertRef,
+    name: StickyElementNameEnum.SITEWIDE_ALERT,
+  })
+  const isAlarm = alert.type === AlertTypeEnum.Alarm
+
+  return (
+    <div
+      ref={isAlarm ? alertRef : null}
+      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,8 +1,6 @@
 import { getSiteConfig } from "@/lib/trpc/memoizedRequests"
 
-import Alert from "../TempDesignSystem/Alert"
-
-import styles from "./sitewideAlert.module.css"
+import SiteWideAlertClient from "./Client"
 
 export function preload() {
   void getSiteConfig()
@@ -15,19 +13,5 @@ export default async function SitewideAlert() {
     return null
   }
 
-  const { sitewideAlert } = siteConfig
-  return (
-    <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
-      <Alert
-        variant="banner"
-        type={sitewideAlert.type}
-        link={sitewideAlert.link}
-        phoneContact={sitewideAlert.phoneContact}
-        sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
-        sidepeekContent={sitewideAlert.sidepeekContent}
-        heading={sitewideAlert.heading}
-        text={sitewideAlert.text}
-      />
-    </div>
-  )
+  return <SiteWideAlertClient alert={siteConfig.sitewideAlert} />
 }

components/SitewideAlert/sitewideAlert.ts

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