feat(SW-718): fix comments

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>