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

components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx

@@ -40,14 +40,10 @@ export async function NoRoomsAlert({
     })
   )
 
-  if (!availability) {
+  if (!availability || availabilityError) {
     return null
   }
 
-  if (availabilityError) {
-    // TODO: Handle error
-  }
-
   const noRoomsAvailable = availability.roomConfigurations.reduce(
     (acc, room) => {
       return acc && room.status === "NotAvailable"

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

@@ -54,7 +54,13 @@ export default function FlexibilityOption({
       member: memberPrice,
       features: petRoomPackage ? features : [],
     }
-    handleSelectRate(rate)
+
+    console.log("Rate", rate)
+
+    handleSelectRate({
+      publicRateCode: publicPrice.rateCode,
+      roomTypeCode: roomTypeCode,
+    })
   }
 
   return (

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -16,7 +16,7 @@ export default function RoomSelection({
   user,
   packages,
   selectedPackages,
-  setRateSummary,
+  setRateCode,
   rateSummary,
 }: RoomSelectionProps) {
   const router = useRouter()
@@ -70,7 +70,7 @@ export default function RoomSelection({
                 rateDefinitions={rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
-                handleSelectRate={setRateSummary}
+                handleSelectRate={setRateCode}
                 selectedPackages={selectedPackages}
                 packages={packages}
               />

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 {
+import type { RoomConfiguration } from "@/server/routers/hotels/output"
-  RoomConfiguration,
-  RoomsAvailability,
-} 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)
-
+      // setRateSummary(null)
-      // 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 : [],
-      //   })
-      // }
     },
-    [
+    []
-      // 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
+    const rateSummary: Rate = {
-
-    return {
-      ...rateSummary,
       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}
+        setRateCode={setSelectedRate}
-        rateSummary={rSummary}
+        rateSummary={rateSummary}
       />
     </div>
   )

types/components/hotelReservation/selectRate/flexibilityOption.ts

@@ -23,7 +23,10 @@ export type FlexibilityOptionProps = {
   roomTypeCode: RoomConfiguration["roomTypeCode"]
   features: RoomConfiguration["features"]
   petRoomPackage: RoomPackage | undefined
-  handleSelectRate: (rate: Rate) => void
+  handleSelectRate: (rateCode: {
+    publicRateCode: string
+    roomTypeCode: string
+  }) => void
 }
 
 export interface PriceListProps {

types/components/hotelReservation/selectRate/hotelInfoCardProps.ts

@@ -1,6 +0,0 @@
-import type { HotelData } from "@/types/hotel"
-
-export type HotelInfoCardProps = {
-  hotelData: HotelData | null
-  noAvailability: boolean
-}

types/components/hotelReservation/selectRate/roomCard.ts

@@ -19,7 +19,10 @@ export type RoomCardProps = {
   roomCategories: RoomData[]
   selectedPackages: RoomPackageCodes[]
   packages: RoomPackageData | undefined
-  handleSelectRate: (rate: Rate) => void
+  handleSelectRate: (rateCode: {
+    publicRateCode: string
+    roomTypeCode: string
+  }) => void
 }
 
 type RoomPackagePriceSchema = z.output<typeof packagePriceSchema>

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -10,7 +10,10 @@ export interface RoomSelectionProps {
   user: SafeUser
   packages: RoomPackageData | undefined
   selectedPackages: RoomPackageCodes[]
-  setRateSummary: (rateSummary: Rate) => void
+  setRateCode: (rateCode: {
+    publicRateCode: string
+    roomTypeCode: string
+  }) => void
   rateSummary: Rate | null
 }