Merged in fix/refactor-booking-flow-search-params (pull request #2148)

Fix: refactor booking flow search params * wip: apply codemod and upgrade swc plugin * wip: design-system to react 19, fix issues from async (search)params * Prepare new parse function for booking flow search params * Prepare serialize function for booking flow search params * Improve handling of comma separated arrays * Slightly refactor for readability * Next abstracts URLSearchParams so handle the abstraction instead * Refactor booking widget to use new search params parsing * Rename search param functions * Refactor select-hotel to use new search param parser * Use new search params parser in select-rate and details * Fix hotelId type * Avoid passing down search params into BookingWidget components * More updates to use new types instead of SearchParams<T> * Remove types SelectHotelSearchParams and AlternativeSelectHotelSearchParams * Fix parseBookingWidgetSearchParams return type * Add error handling to booking search param parsers * Fix modifyRateIndex handling in details page * Clean up * Refactor booking widget search param serializing to util function * Move start page booking widget search param parsing to page * Use new search param serializer in HandleErrorCallback * Delete convertSearchParamsToObj & convertObjToSearchParams Approved-by: Michael Zetterberg
2025-06-02 13:38:01 +00:00
parent 81887c83ff
commit 03468ad824
49 changed files with 1257 additions and 444 deletions
@@ -72,7 +72,7 @@ export default function Summary({
  )
  const showDiscounted = containsBookingCodeRate || isMember

-  const priceDetailsRooms = mapToPrice(rateSummary, booking, isMember)
+  const priceDetailsRooms = mapToPrice(rateSummary, booking.rooms, isMember)

  return (
    <section className={styles.summary}>
@@ -1,12 +1,12 @@
 import type {
  Rate,
-  SelectRateSearchParams,
+  Room as SelectRateRoom,
 } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { Room } from "@/components/HotelReservation/PriceDetailsModal/PriceDetailsTable"

 export function mapToPrice(
  rooms: (Rate | null)[],
-  booking: SelectRateSearchParams,
+  bookingRooms: SelectRateRoom[],
  isUserLoggedIn: boolean
 ) {
  return rooms
@@ -43,7 +43,7 @@ export function mapToPrice(
        }
      }

-      const bookingRoom = booking.rooms[idx]
+      const bookingRoom = bookingRooms[idx]
      return {
        adults: bookingRoom.adults,
        bedType: undefined,
@@ -1,6 +1,6 @@
 "use client"

-import { useSearchParams } from "next/navigation"
+import { notFound, useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"

 import { trpc } from "@/lib/trpc/client"
@@ -9,7 +9,7 @@ import { selectRateRoomsAvailabilityInputSchema } from "@/server/routers/hotels/
 import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 import RatesProvider from "@/providers/RatesProvider"
-import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"
+import { parseSelectRateSearchParams, searchParamsToRecord } from "@/utils/url"

 import RateSummary from "./RateSummary"
 import Rooms from "./Rooms"
@@ -18,7 +18,6 @@ import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
 import styles from "./index.module.css"

 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
-import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { AlertTypeEnum } from "@/types/enums/alert"

 export function RoomsContainer({
@@ -30,10 +29,12 @@ export function RoomsContainer({
  const intl = useIntl()
  const searchParams = useSearchParams()

-  const booking = convertSearchParamsToObj<SelectRateSearchParams>(
+  const booking = parseSelectRateSearchParams(
    searchParamsToRecord(searchParams)
  )

+  if (!booking) return notFound()
+
  const bookingInput = selectRateRoomsAvailabilityInputSchema.safeParse({
    booking,
    lang,
@@ -7,12 +7,11 @@ import { REDEMPTION } from "@/constants/booking"

 import TrackingSDK from "@/components/TrackingSDK"
 import useLang from "@/hooks/useLang"
-import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"
+import { parseSelectRateSearchParams, searchParamsToRecord } from "@/utils/url"

 import { getValidDates } from "../getValidDates"
 import { getTracking } from "./tracking"

-import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"

 export default function Tracking({
@@ -34,16 +33,13 @@ export default function Tracking({
 }) {
  const lang = useLang()
  const params = useSearchParams()
-  const selectRateParams = convertSearchParamsToObj<SelectRateSearchParams>(
-    searchParamsToRecord(params)
-  )
+  const booking = parseSelectRateSearchParams(searchParamsToRecord(params))

-  const { fromDate, toDate } = getValidDates(
-    selectRateParams.fromDate,
-    selectRateParams.toDate
-  )
+  if (!booking) return null

-  const { rooms, searchType, bookingCode, city: paramCity } = selectRateParams
+  const { fromDate, toDate } = getValidDates(booking.fromDate, booking.toDate)
+
+  const { rooms, searchType, bookingCode, city: paramCity } = booking

  const arrivalDate = fromDate.toDate()
  const departureDate = toDate.toDate()
@@ -12,16 +12,15 @@ import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
 import AvailabilityError from "./AvailabilityError"
 import Tracking from "./Tracking"

-import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { SelectRateBooking } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { Lang } from "@/constants/languages"
-import type { SelectHotelParams } from "@/utils/url"

 export default async function SelectRatePage({
  lang,
  booking,
 }: {
  lang: Lang
-  booking: SelectHotelParams<SelectRateSearchParams>
+  booking: SelectRateBooking
 }) {
  const searchDetails = await getHotelSearchDetails(booking)
  if (!searchDetails?.hotel) {