Merged in fix/remove-old-select-rate (pull request #2647)

Fix/remove old select rate

* remove old select-rate

* Fix imports

* renamed SelectRate2 -> SelectRate

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx

@@ -1,24 +1,52 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
 
-import { useRoomContext } from "@/contexts/SelectRate/Room"
+import { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 
 import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
-import RoomPackageFilter from "./RoomPackageFilter"
+import { RoomPackageFilter } from "./RoomPackageFilter"
 
 import styles from "./roomsHeader.module.css"
 
-export default function RoomsHeader() {
-  const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
-  const intl = useIntl()
+export function RoomsHeader({ roomIndex }: { roomIndex: number }) {
+  return (
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+    <ErrorBoundary fallback={<div>Unable to render rooms header</div>}>
+      <InnerRoomsHeader roomIndex={roomIndex} />
+    </ErrorBoundary>
+  )
+}
 
-  const availableRooms = rooms.filter(
-    (room) => room.status === AvailabilityEnum.Available
+function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) {
+  return (
+    <div className={styles.container}>
+      <AvailableRoomCount roomIndex={roomIndex} />
+      <div className={styles.filters}>
+        <RemoveBookingCodeButton />
+        <RoomPackageFilter roomIndex={roomIndex} />
+        {/* <BookingCodeFilter roomIndex={roomIndex} /> */}
+      </div>
+    </div>
+  )
+}
+
+function AvailableRoomCount({ roomIndex }: { roomIndex: number }) {
+  const intl = useIntl()
+  const { isFetching, getAvailabilityForRoom } = useSelectRateContext()
+
+  const roomAvailability = getAvailabilityForRoom(roomIndex) ?? []
+
+  const availableRooms = roomAvailability.filter(
+    (x) => x.status === AvailabilityEnum.Available
   ).length
 
+  const totalRooms = roomAvailability.length
+
   const notAllRoomsAvailableText = intl.formatMessage(
     {
       defaultMessage:
@@ -40,23 +68,17 @@ export default function RoomsHeader() {
     }
   )
 
+  if (isFetching) {
+    return <SkeletonShimmer height="30px" width="25ch" />
+  }
+
   return (
-    <div className={styles.container}>
-      <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
-        {isFetchingPackages ? (
-          <p></p>
-        ) : (
-          <p>
-            {availableRooms !== totalRooms
-              ? notAllRoomsAvailableText
-              : allRoomsAvailableText}
-          </p>
-        )}
-      </Typography>
-      <div className={styles.filters}>
-        <RemoveBookingCodeButton />
-        <RoomPackageFilter />
-      </div>
-    </div>
+    <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
+      <p>
+        {availableRooms !== totalRooms
+          ? notAllRoomsAvailableText
+          : allRoomsAvailableText}
+      </p>
+    </Typography>
   )
 }