feat(SW-718): fix comments

components/HotelReservation/SelectRate/RateSummary/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
+import { useRateSelectionStore } from "@/stores/rate-selection"
 
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
@@ -16,9 +17,9 @@ import styles from "./rateSummary.module.css"
 
 import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export default function RateSummary({
-  rateSummary,
   isUserLoggedIn,
   packages,
   roomsAvailability,
@@ -26,12 +27,19 @@ export default function RateSummary({
   const intl = useIntl()
   const [isVisible, setIsVisible] = useState(false)
 
+  const { rateSummary } = useRateSelectionStore()
+
   useEffect(() => {
     const timer = setTimeout(() => setIsVisible(true), 0)
     return () => clearTimeout(timer)
   }, [])
 
   if (rateSummary.length === 0) return null
+
+  const selectedRateSummary = rateSummary.filter(
+    (summary): summary is Rate => summary !== null
+  )
+
   const {
     member,
     public: publicRate,
@@ -39,7 +47,7 @@ export default function RateSummary({
     roomType,
     priceName,
     priceTerm,
-  } = rateSummary[0] // TODO: Support multiple rooms
+  } = selectedRateSummary[0] // TODO: Support multiple rooms
 
   const isPetRoomSelected = features.some(
     (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM

components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx

@@ -75,6 +75,8 @@ export async function RoomsContainer({
   const [roomsAvailability, roomsAvailabilityError] =
     await roomsAvailabilityPromise
 
+  console.log("roomsAvailability_", roomsAvailability)
+
   if (packagesError) {
     // TODO: Log packages error
     console.error("[RoomsContainer] unable to fetch packages")

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -7,7 +7,6 @@ import { useIntl } from "react-intl"
 import { useRateSelectionStore } from "@/stores/rate-selection"
 
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useRateSummary } from "@/hooks/selectRate/useRateSummary"
 import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
 import { trackLowestRoomPrice } from "@/utils/tracking"
 import { convertObjToSearchParams, convertSearchParamsToObj } from "@/utils/url"
@@ -24,10 +23,7 @@ import {
   RoomPackageCodeEnum,
 } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { SelectRateProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
-import type {
-  Rate,
-  SelectRateSearchParams,
-} from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { RoomConfiguration } from "@/server/routers/hotels/output"
 
 export default function Rooms({
@@ -45,8 +41,13 @@ export default function Rooms({
   const arrivalDate = searchParams.get("fromDate")
   const departureDate = searchParams.get("toDate")
 
-  const { modifyRate, selectedRates, setSelectedRates } =
-    useRateSelectionStore()
+  const {
+    modifyRate,
+    selectedRates,
+    rateSummary,
+    calculateRateSummary,
+    initializeRates,
+  } = useRateSelectionStore()
 
   const bookingWidgetSearchData = useMemo(
     () =>
@@ -61,10 +62,8 @@ export default function Rooms({
   const intl = useIntl()
 
   useEffect(() => {
-    setSelectedRates(
-      new Array(bookingWidgetSearchData.rooms.length).fill(undefined)
-    )
-  }, [setSelectedRates, bookingWidgetSearchData.rooms.length])
+    initializeRates(bookingWidgetSearchData.rooms.length)
+  }, [initializeRates, bookingWidgetSearchData.rooms.length])
 
   const visibleRooms: RoomConfiguration[] = useMemo(() => {
     const deduped = filterDuplicateRoomTypesByLowestPrice(
@@ -117,14 +116,20 @@ export default function Rooms({
   const { selectedPackagesByRoom, getRooms, handleFilter, getFilteredRooms } =
     useRoomFiltering({ roomsAvailability })
 
-  const rateSummary = useRateSummary({
-    searchedRoomsAndGuests: bookingWidgetSearchData.rooms,
-    selectedRates,
+  useEffect(() => {
+    calculateRateSummary({
+      getFilteredRooms,
+      availablePackages,
+      roomCategories,
+      selectedPackagesByRoom,
+    })
+  }, [
     getFilteredRooms,
-    selectedPackagesByRoom,
     availablePackages,
     roomCategories,
-  })
+    selectedPackagesByRoom,
+    calculateRateSummary,
+  ])
 
   useEffect(() => {
     if (!rateSummary?.some((rate) => rate === null)) return
@@ -180,13 +185,6 @@ export default function Rooms({
     router.push(`select-bed?${queryParams}`)
   }
 
-  const handleModify = useCallback(
-    (index: number) => () => {
-      modifyRate(index)
-    },
-    [modifyRate]
-  )
-
   const handleFilterForRoom = useCallback(
     (index: number) =>
       (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
@@ -251,9 +249,7 @@ export default function Rooms({
                 <SelectedRoomPanel
                   roomIndex={index}
                   room={room}
-                  selectedRate={rateSummary[index]}
                   roomCategories={roomCategories}
-                  handleModify={handleModify(index)}
                 />
               </div>
               <div className={styles.roomSelectionPanel}>
@@ -291,9 +287,6 @@ export default function Rooms({
           onSubmit={handleSubmit}
         >
           <RateSummary
-            rateSummary={rateSummary.filter(
-              (summary): summary is Rate => summary !== null
-            )}
             isUserLoggedIn={isUserLoggedIn}
             packages={availablePackages}
             roomsAvailability={roomsAvailability}

components/HotelReservation/SelectRate/SelectedRoomPanel/index.tsx

@@ -1,6 +1,9 @@
 "use client"
+import { useCallback } from "react"
 import { useIntl } from "react-intl"
 
+import { useRateSelectionStore } from "@/stores/rate-selection"
+
 import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
@@ -9,34 +12,33 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./selectedRoomPanel.module.css"
 
-import type {
-  Rate,
-  Room,
-} from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { Room } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { RoomData } from "@/types/hotel"
 
 interface SelectedRoomPanelProps {
   roomIndex: number
   room: Room
-  selectedRate: Rate | null
   roomCategories: RoomData[]
-  handleModify: () => void
 }
 
 export default function SelectedRoomPanel({
   roomIndex,
   room,
-  selectedRate,
   roomCategories,
-  handleModify,
 }: SelectedRoomPanelProps) {
   const intl = useIntl()
+  const { rateSummary, modifyRate } = useRateSelectionStore()
+  const selectedRate = rateSummary[roomIndex]
   const images = roomCategories.find((roomCategory) =>
     roomCategory.roomTypes.some(
       (roomType) => roomType.code === selectedRate?.roomTypeCode
     )
   )?.images
 
+  const handleModify = useCallback(() => {
+    modifyRate(roomIndex)
+  }, [modifyRate, roomIndex])
+
   return (
     <div className={styles.selectedRoomPanel}>
       <div>