fix(SW-690): use correct naming of search params in booking

Approved-by: Bianca Widstam
Approved-by: Linus Flood

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -17,11 +17,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const selecetRoomParams = new URLSearchParams(searchParams)
-  const selecetRoomParamsObject =
-    getHotelReservationQueryParams(selecetRoomParams)
-  const adults = selecetRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selecetRoomParamsObject.room[0].child.length // TODO: Handle multiple rooms
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const selectRoomParamsObject =
+    getHotelReservationQueryParams(selectRoomParams)
+  const adults = selectRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectRoomParamsObject.room[0].child?.length // TODO: Handle multiple rooms
 
   const [hotelData, roomConfigurations, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
@@ -33,8 +33,8 @@ export default async function SelectRatePage({
       hotelId: parseInt(searchParams.hotel, 10),
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
-      adults: adults,
-      children: children,
+      adults,
+      children,
     }),
     getProfileSafely(),
   ])

components/BookingWidget/Client.tsx

@@ -42,8 +42,8 @@ export default function BookingWidgetClient({
       date: {
         // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
         // This is specifically to handle timezones falling in different dates.
-        from: dt().utc().format("YYYY-MM-DD"),
-        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
+        fromDate: dt().utc().format("YYYY-MM-DD"),
+        toDate: dt().utc().add(1, "day").format("YYYY-MM-DD"),
       },
       bookingCode: "",
       redemption: false,

components/DatePicker/index.tsx

@@ -44,22 +44,22 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   function handleSelectDate(selected: Date) {
     if (isSelectingFrom) {
       setValue(name, {
-        from: dt(selected).format("YYYY-MM-DD"),
-        to: undefined,
+        fromDate: dt(selected).format("YYYY-MM-DD"),
+        toDate: undefined,
       })
       setIsSelectingFrom(false)
     } else {
-      const fromDate = dt(selectedDate.from)
+      const fromDate = dt(selectedDate.fromDate)
       const toDate = dt(selected)
       if (toDate.isAfter(fromDate)) {
         setValue(name, {
-          from: selectedDate.from,
-          to: toDate.format("YYYY-MM-DD"),
+          fromDate: selectedDate.fromDate,
+          toDate: toDate.format("YYYY-MM-DD"),
         })
       } else {
         setValue(name, {
-          from: toDate.format("YYYY-MM-DD"),
-          to: selectedDate.from,
+          fromDate: toDate.format("YYYY-MM-DD"),
+          toDate: selectedDate.fromDate,
         })
       }
       setIsSelectingFrom(true)
@@ -79,11 +79,11 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     }
   }, [setIsOpen])
 
-  const selectedFromDate = dt(selectedDate.from)
+  const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)
     .format("ddd D MMM")
-  const selectedToDate = !!selectedDate.to
-    ? dt(selectedDate.to).locale(lang).format("ddd D MMM")
+  const selectedToDate = !!selectedDate.toDate
+    ? dt(selectedDate.toDate).locale(lang).format("ddd D MMM")
     : ""
 
   return (
@@ -93,8 +93,8 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
           {selectedFromDate} - {selectedToDate}
         </Body>
       </button>
-      <input {...register("date.from")} type="hidden" />
-      <input {...register("date.to")} type="hidden" />
+      <input {...register("date.fromDate")} type="hidden" />
+      <input {...register("date.toDate")} type="hidden" />
       <div aria-modal className={styles.hideWrapper} role="dialog">
         <DatePickerDesktop
           close={close}

components/Forms/BookingWidget/FormContent/index.tsx

@@ -27,7 +27,7 @@ export default function FormContent({
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
 
-  const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
+  const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
 
   return (
     <>

components/Forms/BookingWidget/schema.ts

@@ -18,8 +18,8 @@ export const bookingWidgetSchema = z.object({
   bookingCode: z.string(), // Update this as required when working with booking codes component
   date: z.object({
     // Update this as required once started working with Date picker in Nights component
-    from: z.string(),
-    to: z.string(),
+    fromDate: z.string(),
+    toDate: z.string(),
   }),
   location: z.string().refine(
     (value) => {

components/HotelReservation/HotelCard/index.tsx

@@ -105,7 +105,11 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
           className={styles.button}
         >
           {/* TODO: Localize link and also use correct search params */}
-          <Link href="/en/hotelreservation/select-rate" color="none">
+          <Link
+            href={`/en/hotelreservation/select-rate?hotel=${hotelData.operaId}`}
+            color="none"
+            keepSearchParams
+          >
             {intl.formatMessage({ id: "See rooms" })}
           </Link>
         </Button>

components/TempDesignSystem/Link/index.tsx

@@ -51,9 +51,10 @@ export default function Link({
   const router = useRouter()
 
   const fullUrl = useMemo(() => {
-    const search =
-      keepSearchParams && searchParams.size ? `?${searchParams}` : ""
-    return `${href}${search}`
+    if (!keepSearchParams || !searchParams.size) return href
+
+    const delimiter = href.includes("?") ? "&" : "?"
+    return `${href}${delimiter}${searchParams}`
   }, [href, searchParams, keepSearchParams])
 
   // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted

types/components/hotelReservation/selectRate/selectRate.ts

@@ -7,9 +7,9 @@ interface Child {
 
 interface Room {
   adults: number
-  roomtypecode: string
-  ratecode: string
-  child: Child[]
+  roomcode?: string
+  ratecode?: string
+  child?: Child[]
 }
 
 export interface SelectRateSearchParams {