feat(SW-718) refactor: optimize rate selection and room scrolling

components/HotelReservation/SelectRate/RateSummary/index.tsx

@@ -27,16 +27,14 @@ export default function RateSummary({
   const intl = useIntl()
   const [isVisible, setIsVisible] = useState(false)
 
-  const { rateSummary } = useRateSelectionStore()
+  const { getSelectedRateSummary } = useRateSelectionStore()
 
   useEffect(() => {
     const timer = setTimeout(() => setIsVisible(true), 0)
     return () => clearTimeout(timer)
   }, [])
 
-  const selectedRateSummary = rateSummary.filter(
-    (summary): summary is Rate => summary !== null
-  )
+  const selectedRateSummary = getSelectedRateSummary()
 
   if (selectedRateSummary.length === 0) return null
 

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -193,7 +193,7 @@ export default function Rooms({
   }
 
   useEffect(() => {
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const SCROLL_OFFSET = 100
       const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
       const index = selectedRates.findIndex((rate) => rate === undefined)
@@ -208,7 +208,7 @@ export default function Rooms({
           behavior: "smooth",
         })
       }
-    }, 0)
+    })
   }, [selectedRates])
 
   return (

stores/select-rate/rate-selection.ts

@@ -30,6 +30,7 @@ interface RateSelectionState {
     availablePackages,
     roomCategories,
   }: RateSummaryParams) => void
+  getSelectedRateSummary: () => Rate[]
 }
 
 export const useRateSelectionStore = create<RateSelectionState>((set, get) => ({
@@ -64,4 +65,8 @@ export const useRateSelectionStore = create<RateSelectionState>((set, get) => ({
 
     set({ rateSummary: summaries })
   },
+  getSelectedRateSummary: () => {
+    const { rateSummary } = get()
+    return rateSummary.filter((summary): summary is Rate => summary !== null)
+  },
 }))

types/components/hotelReservation/selectRate/roomFilter.ts

@@ -14,8 +14,8 @@ export interface DefaultFilterOptions {
   itemCode: string | undefined
 }
 
-export interface FilterValues {
-  [key: string]: boolean | undefined
+export type FilterValues = {
+  [K in RoomPackageCodeEnum]?: boolean
 }
 export interface RoomFilterProps {
   numberOfRooms: number