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 (