feat(SW-650): added sticky position hook and store

components/BookingWidget/Client.tsx

@@ -1,13 +1,15 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
 import { dt } from "@/lib/dt"
+import { StickyElementNameEnum } from "@/stores/sticky-position"
 
 import Form from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 import { CloseLargeIcon } from "@/components/Icons"
+import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
 import { getFormattedUrlQueryParams } from "@/utils/url"
 
@@ -28,6 +30,11 @@ export default function BookingWidgetClient({
   searchParams,
 }: BookingWidgetClientProps) {
   const [isOpen, setIsOpen] = useState(false)
+  const bookingWidgetRef = useRef(null)
+  useStickyPosition({
+    ref: bookingWidgetRef,
+    name: StickyElementNameEnum.BOOKING_WIDGET,
+  })
 
   const sessionStorageSearchData =
     typeof window !== "undefined"
@@ -139,7 +146,11 @@ export default function BookingWidgetClient({
 
   return (
     <FormProvider {...methods}>
-      <section className={styles.container} data-open={isOpen}>
+      <section
+        ref={bookingWidgetRef}
+        className={styles.container}
+        data-open={isOpen}
+      >
         <button
           className={styles.close}
           onClick={closeMobileSearch}