feat(SW-718): Created store for selectRate

components/HotelReservation/SelectRate/RoomList/FlexibilityOption/index.tsx

@@ -4,6 +4,8 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { useRateSelectionStore } from "@/stores/rate-selection"
+
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
@@ -24,16 +26,11 @@ export default function FlexibilityOption({
   priceInformation,
   roomTypeCode,
   petRoomPackage,
-  handleSelectRate,
   roomListIndex,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
   const inputElementRef = useRef<HTMLInputElement>(null)
-  const handleSelectRateRef = useRef(handleSelectRate)
-
-  useEffect(() => {
-    handleSelectRateRef.current = handleSelectRate
-  }, [handleSelectRate])
+  const { selectRate, selectedRates } = useRateSelectionStore()
 
   const searchParams = useSearchParams()
 
@@ -57,24 +54,30 @@ export default function FlexibilityOption({
       return
     }
 
-    handleSelectRateRef.current((prev) => {
-      // If the user already has made a new selection we respect that and don't do anything else
-      if (prev) {
-        return prev
-      }
+    // Check if there's already a selection for this room index
+    const existingSelection = selectedRates[roomListIndex]
+    if (existingSelection) return
 
-      if (inputElementRef.current) {
-        inputElementRef.current.checked = true
-      }
-
-      return {
-        publicRateCode: product.productType.public.rateCode,
-        roomTypeCode: roomTypeCode,
-        name: name,
-        paymentTerm: paymentTerm,
-      }
+    selectRate(roomListIndex, {
+      publicRateCode: product.productType.public.rateCode,
+      roomTypeCode: roomTypeCode,
+      name: name,
+      paymentTerm: paymentTerm,
     })
-  }, [searchParams, roomListIndex, product, roomTypeCode, name, paymentTerm])
+
+    if (inputElementRef.current) {
+      inputElementRef.current.checked = true
+    }
+  }, [
+    searchParams,
+    roomListIndex,
+    product,
+    roomTypeCode,
+    name,
+    paymentTerm,
+    selectedRates,
+    selectRate,
+  ])
 
   if (!product) {
     return (
@@ -98,22 +101,20 @@ export default function FlexibilityOption({
   const { public: publicPrice, member: memberPrice } = product.productType
 
   const onClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
-    handleSelectRateRef.current((prev) => {
-      if (
-        prev &&
-        prev.publicRateCode === publicPrice.rateCode &&
-        prev.roomTypeCode === roomTypeCode
-      ) {
-        if (e.currentTarget?.checked) e.currentTarget.checked = false
-        return undefined
-      } else
-        return {
-          publicRateCode: publicPrice.rateCode,
-          roomTypeCode: roomTypeCode,
-          name: name,
-          paymentTerm: paymentTerm,
-        }
-    })
+    if (
+      selectedRates[roomListIndex]?.publicRateCode === publicPrice.rateCode &&
+      selectedRates[roomListIndex]?.roomTypeCode === roomTypeCode
+    ) {
+      if (e.currentTarget?.checked) e.currentTarget.checked = false
+      selectRate(roomListIndex, undefined)
+    } else {
+      selectRate(roomListIndex, {
+        publicRateCode: publicPrice.rateCode,
+        roomTypeCode: roomTypeCode,
+        name: name,
+        paymentTerm: paymentTerm,
+      })
+    }
   }
 
   return (

components/HotelReservation/SelectRate/RoomList/RoomCard/index.tsx

@@ -3,6 +3,8 @@
 import { createElement, useCallback } from "react"
 import { useIntl } from "react-intl"
 
+import { useRateSelectionStore } from "@/stores/rate-selection"
+
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
 import { ErrorCircleIcon } from "@/components/Icons"
@@ -29,11 +31,14 @@ export default function RoomCard({
   roomCategories,
   selectedPackages,
   packages,
-  handleSelectRate,
   roomListIndex,
 }: RoomCardProps) {
   const intl = useIntl()
 
+  const selectedRate = useRateSelectionStore(
+    (state) => state.selectedRates[roomListIndex]
+  )
+
   const rates = {
     saveRate: rateDefinitions.find(
       (rate) => rate.cancellationRule === "NotCancellable"
@@ -215,13 +220,12 @@ export default function RoomCard({
         ) : (
           Object.entries(rates).map(([key, rate]) => (
             <FlexibilityOption
-              key={key}
+              key={`${roomListIndex}-${rate?.rateCode}-${selectedRate?.roomTypeCode || "unselected"}`}
               name={rateKey(key)}
               value={key.toLowerCase()}
               paymentTerm={key === "flexRate" ? payLater : payNow}
               product={findProductForRate(rate)}
               priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
-              handleSelectRate={handleSelectRate}
               roomTypeCode={roomConfiguration.roomTypeCode}
               petRoomPackage={petRoomPackage}
               roomListIndex={roomListIndex}

components/HotelReservation/SelectRate/RoomList/index.tsx

@@ -11,7 +11,6 @@ export default function RoomList({
   roomCategories,
   availablePackages,
   selectedPackages,
-  setRateCode,
   hotelType,
   roomListIndex,
 }: RoomListProps) {
@@ -27,7 +26,6 @@ export default function RoomList({
             rateDefinitions={rateDefinitions}
             roomConfiguration={roomConfiguration}
             roomCategories={roomCategories}
-            handleSelectRate={setRateCode}
             selectedPackages={selectedPackages}
             packages={availablePackages}
             key={roomConfiguration.roomTypeCode}

components/HotelReservation/SelectRate/RoomList/roomSelection.module.css

@@ -1,7 +1,3 @@
-.wrapper {
-  padding-bottom: var(--Spacing-x3);
-}
-
 .roomList {
   list-style: none;
   display: grid;