feat: contain logic for selecting price at the top level instead of on individual room card

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 import RoomFilter from "../RoomFilter"
 import RoomSelection from "../RoomSelection"
@@ -14,10 +14,7 @@ import {
 } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { SelectRateProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type {
-  RoomConfiguration,
-  RoomsAvailability,
-} from "@/server/routers/hotels/output"
+import type { RoomConfiguration } from "@/server/routers/hotels/output"
 
 export default function Rooms({
   roomsAvailability,
@@ -27,7 +24,10 @@ export default function Rooms({
 }: SelectRateProps) {
   const visibleRooms: RoomConfiguration[] =
     filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
-  const [rateSummary, setRateSummary] = useState<Rate | null>(null)
+  // const [internalRateSummary, setRateSummary] = useState<Rate | null>(null)
+  const [selectedRate, setSelectedRate] = useState<
+    { publicRateCode: string; roomTypeCode: string } | undefined
+  >(undefined)
   const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
     []
   )
@@ -39,81 +39,9 @@ export default function Rooms({
       ) as RoomPackageCodeEnum[]
 
       setSelectedPackages(filteredPackages)
-
-      // if (filteredPackages.length === 0) {
-      //   setRooms({
-      //     ...roomsAvailability,
-      //     roomConfigurations: visibleRooms,
-      //   })
-
-      //   if (!!rateSummary) {
-      //     setRateSummary({
-      //       ...rateSummary,
-      //       features: [],
-      //     })
-      //   }
-
-      //   if (noRoomsAvailable) {
-      //     setRoomsAvailable()
-      //   }
-
-      //   return
-      // }
-
-      // const filteredRooms = visibleRooms.filter((room) =>
-      //   filteredPackages.every((filteredPackage) =>
-      //     room.features.some((feature) => feature.code === filteredPackage)
-      //   )
-      // )
-      // let notAvailableRooms = visibleRooms.filter((room) =>
-      //   filteredPackages.every(
-      //     (filteredPackage) =>
-      //       !room.features.some((feature) => feature.code === filteredPackage)
-      //   )
-      // )
-      // // Clone nested object to keep original object intact and not messup the room data
-      // notAvailableRooms = JSON.parse(JSON.stringify(notAvailableRooms))
-      // notAvailableRooms.forEach((room) => {
-      //   room.status = "NotAvailable"
-      // })
-      // setRooms({
-      //   ...roomsAvailability,
-      //   roomConfigurations: [...filteredRooms, ...notAvailableRooms],
-      // })
-
-      // if (filteredRooms.length == 0) {
-      //   setNoRoomsAvailable()
-      // } else if (noRoomsAvailable) {
-      //   setRoomsAvailable()
-      // }
-
-      // const petRoomPackage =
-      //   (filteredPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
-      //     packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
-      //   undefined
-
-      // const features = filteredRooms.find((room) =>
-      //   room.features.some(
-      //     (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
-      //   )
-      // )?.features
-
-      // if (!!rateSummary) {
-      //   setRateSummary({
-      //     ...rateSummary,
-      //     features: petRoomPackage && features ? features : [],
-      //   })
-      // }
+      // setRateSummary(null)
     },
-    [
-      // roomsAvailability,
-      // visibleRooms,
-      // rateSummary,
-      // packages,
-      // noRoomsAvailable,
-      // setNoRoomsAvailable,
-      // setRoomsAvailable,
-    ]
+    []
   )
 
   const filteredRooms = useMemo(() => {
@@ -150,7 +78,20 @@ export default function Rooms({
     }
   }, [roomsAvailability, visibleRooms, selectedPackages, filteredRooms])
 
-  const rSummary: Rate | null = useMemo(() => {
+  const rateSummary: Rate | null = useMemo(() => {
+    const room = filteredRooms.find(
+      (room) => room.roomTypeCode === selectedRate?.roomTypeCode
+    )
+
+    if (!room) return null
+
+    const product = room.products.find(
+      (product) =>
+        product.productType.public.rateCode === selectedRate?.publicRateCode
+    )
+
+    if (!product) return null
+
     const petRoomPackage =
       (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
         packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
@@ -162,13 +103,24 @@ export default function Rooms({
       )
     )?.features
 
-    if (!rateSummary) return null
-
-    return {
-      ...rateSummary,
+    const rateSummary: Rate = {
       features: petRoomPackage && features ? features : [],
+      priceName: room.roomType,
+      public: product.productType.public,
+      member: product.productType.member,
+      roomType: room.roomType,
+      roomTypeCode: room.roomTypeCode,
     }
-  }, [filteredRooms, rateSummary, packages, selectedPackages])
+
+    return rateSummary
+  }, [filteredRooms, packages, selectedPackages, selectedRate])
+
+  useEffect(() => {
+    if (rateSummary) return
+    if (!selectedRate) return
+
+    setSelectedRate(undefined)
+  }, [rateSummary, selectedRate])
 
   return (
     <div className={styles.content}>
@@ -183,8 +135,8 @@ export default function Rooms({
         user={user}
         packages={packages}
         selectedPackages={selectedPackages}
-        setRateSummary={setRateSummary}
-        rateSummary={rSummary}
+        setRateCode={setSelectedRate}
+        rateSummary={rateSummary}
       />
     </div>
   )