feat(SW-718): Created store for selectRate

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}