Merged in fix/SW-2890-select-rate-not-updating (pull request #2190)

fix: select-rate didn't update results when switching back to a recent search SW-2890

* fix: select-rate didn't update results when switching back to a recent search


Approved-by: Linus Flood

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { trpc } from "@/lib/trpc/client"
@@ -7,6 +8,7 @@ import { trpc } from "@/lib/trpc/client"
 import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 import RatesProvider from "@/providers/RatesProvider"
+import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"
 
 import RateSummary from "./RateSummary"
 import Rooms from "./Rooms"
@@ -15,16 +17,21 @@ 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({
-  booking,
   hotelType,
   roomCategories,
   vat,
 }: RoomsContainerProps) {
   const lang = useLang()
   const intl = useIntl()
+  const searchParams = useSearchParams()
+
+  const booking = convertSearchParamsToObj<SelectRateSearchParams>(
+    searchParamsToRecord(searchParams)
+  )
 
   const { data, isFetching, isError, error } =
     trpc.hotel.availability.selectRate.rooms.useQuery(

apps/scandic-web/components/HotelReservation/SelectRate/index.tsx

@@ -8,7 +8,6 @@ import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCar
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
 import { setLang } from "@/i18n/serverContext"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
-import { convertSearchParamsToObj } from "@/utils/url"
 
 import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
 import AvailabilityError from "./AvailabilityError"
@@ -39,8 +38,6 @@ export default async function SelectRatePage({
     return notFound()
   }
 
-  const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
-
   let isInValidFNF = false
   if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
     const cookieStore = cookies()
@@ -54,7 +51,6 @@ export default async function SelectRatePage({
         <FnFNotAllowedAlert />
       ) : (
         <RoomsContainer
-          booking={booking}
           hotelType={hotelData.hotel.hotelType}
           roomCategories={hotelData.roomCategories}
           vat={hotelData.hotel.vat}

apps/scandic-web/providers/RatesProvider.tsx

@@ -1,13 +1,13 @@
 "use client"
+
 import { usePathname, useSearchParams } from "next/navigation"
-import { useRef } from "react"
+import { useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { createRatesStore } from "@/stores/select-rate"
 
 import { RatesContext } from "@/contexts/Rates"
 
-import type { RatesStore } from "@/types/contexts/rates"
 import type { RatesProviderProps } from "@/types/providers/rates"
 
 export default function RatesProvider({
@@ -18,37 +18,43 @@ export default function RatesProvider({
   roomsAvailability,
   vat,
 }: RatesProviderProps) {
-  const storeRef = useRef<RatesStore>()
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const intl = useIntl()
 
-  if (!storeRef.current) {
-    storeRef.current = createRatesStore({
+  const store = useMemo(
+    () =>
+      createRatesStore({
+        booking,
+        hotelType,
+        labels: {
+          accessibilityRoom: intl.formatMessage({
+            defaultMessage: "Accessible room",
+          }),
+          allergyRoom: intl.formatMessage({
+            defaultMessage: "Allergy-friendly room",
+          }),
+          petRoom: intl.formatMessage({
+            defaultMessage: "Pet-friendly room",
+          }),
+        },
+        pathname,
+        roomCategories,
+        roomsAvailability,
+        searchParams: new URLSearchParams(searchParams),
+        vat,
+      }),
+    [
       booking,
       hotelType,
-      labels: {
-        accessibilityRoom: intl.formatMessage({
-          defaultMessage: "Accessible room",
-        }),
-        allergyRoom: intl.formatMessage({
-          defaultMessage: "Allergy-friendly room",
-        }),
-        petRoom: intl.formatMessage({
-          defaultMessage: "Pet-friendly room",
-        }),
-      },
+      intl,
       pathname,
       roomCategories,
       roomsAvailability,
-      searchParams: new URLSearchParams(searchParams),
+      searchParams,
       vat,
-    })
-  }
-
-  return (
-    <RatesContext.Provider value={storeRef.current}>
-      {children}
-    </RatesContext.Provider>
+    ]
   )
+
+  return <RatesContext.Provider value={store}>{children}</RatesContext.Provider>
 }

apps/scandic-web/types/components/hotelReservation/selectRate/roomsContainer.ts

@@ -1,8 +1,5 @@
 import type { HotelData } from "@/types/hotel"
-import type { SelectRateSearchParams } from "./selectRate"
 
 export interface RoomsContainerProps
   extends Pick<HotelData, "roomCategories">,
-    Pick<HotelData["hotel"], "hotelType" | "vat"> {
-  booking: SelectRateSearchParams
-}
+    Pick<HotelData["hotel"], "hotelType" | "vat"> {}