Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
2025-08-05 09:20:20 +00:00
parent 03c9244fdf
commit 1bd8fe6821
206 changed files with 1936 additions and 796 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { usePathname, useRouter } from "next/navigation"
+import { useTransition } from "react"
+import { Form as FormRAC } from "react-aria-components"
+import { useFormContext } from "react-hook-form"
+
+import {
+  selectHotel,
+  selectHotelMap,
+  selectRate,
+} from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
+
+import useLang from "../../../hooks/useLang"
+import {
+  BookingCodeFilterEnum,
+  useBookingCodeFilterStore,
+} from "../../../stores/bookingCode-filter"
+import { useTrackingContext } from "../../../trackingContext"
+import { serializeBookingSearchParams } from "../../../utils/url"
+import FormContent, { BookingWidgetFormContentSkeleton } from "./FormContent"
+import { bookingWidgetVariants } from "./variants"
+
+import styles from "./form.module.css"
+
+import type { BookingWidgetType } from ".."
+import type { BookingWidgetSchema } from "../Client"
+
+const formId = "booking-widget"
+
+type BookingWidgetFormProps = {
+  type?: BookingWidgetType
+  onClose: () => void
+}
+export default function Form({ type, onClose }: BookingWidgetFormProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const lang = useLang()
+  const [isPending, startTransition] = useTransition()
+  const { trackBookingSearchClick } = useTrackingContext()
+  const setBookingCodeFilter = useBookingCodeFilterStore(
+    (state) => state.setFilter
+  )
+
+  const classNames = bookingWidgetVariants({
+    type,
+  })
+
+  const { handleSubmit, setValue, reset } =
+    useFormContext<BookingWidgetSchema>()
+
+  function onSubmit(data: BookingWidgetSchema) {
+    trackBookingSearchClick(data.search, data.hotel ? "hotel" : "destination")
+    const isMapView = pathname.endsWith("/map")
+    const bookingFlowPage = data.hotel
+      ? selectRate(lang)
+      : isMapView
+        ? selectHotelMap(lang)
+        : selectHotel(lang)
+    const bookingWidgetParams = serializeBookingSearchParams({
+      rooms: data.rooms,
+      ...data.date,
+      ...(data.city ? { city: data.city } : {}),
+      ...(data.hotel ? { hotel: data.hotel } : {}),
+      ...(data.bookingCode?.value
+        ? { bookingCode: data.bookingCode.value }
+        : {}),
+      // Followed current url structure to keep searchtype=redemption param incase of reward night
+      ...(data.redemption ? { searchType: SEARCH_TYPE_REDEMPTION } : {}),
+    })
+
+    onClose()
+    startTransition(() => {
+      router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
+    })
+
+    if (data.bookingCode?.value) {
+      // Reset the booking code filter if changed by user to "All rates"
+      setBookingCodeFilter(BookingCodeFilterEnum.Discounted)
+
+      if (data.bookingCode.remember) {
+        localStorage.setItem("bookingCode", JSON.stringify(data.bookingCode))
+      }
+    } else {
+      setValue("bookingCode.remember", false, {
+        shouldDirty: true,
+      })
+      localStorage.removeItem("bookingCode")
+    }
+    reset(data)
+  }
+
+  return (
+    <section className={classNames}>
+      <FormRAC
+        onSubmit={handleSubmit(onSubmit)}
+        className={styles.form}
+        id={formId}
+      >
+        <FormContent
+          formId={formId}
+          onSubmit={handleSubmit(onSubmit)}
+          isSearching={isPending}
+        />
+      </FormRAC>
+    </section>
+  )
+}
+
+export function BookingWidgetFormSkeleton({
+  type,
+}: {
+  type: BookingWidgetType
+}) {
+  const classNames = bookingWidgetVariants({
+    type,
+  })
+
+  return (
+    <section className={classNames}>
+      <form className={styles.form}>
+        <BookingWidgetFormContentSkeleton />
+      </form>
+    </section>
+  )
+}