feat(SW-2043): Added new room packages filter

* feat(SW-2043): Added new room packages filter

* fix(SW-2043): Fixed issue with not updating price when selecting pet room

Approved-by: Tobias Johansson
Approved-by: Matilda Landström

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

@@ -0,0 +1,57 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useRoomContext } from "@/contexts/SelectRate/Room"
+
+import BookingCodeFilter from "../BookingCodeFilter"
+import RoomPackageFilter from "../RoomPackageFilter"
+
+import styles from "./roomsHeader.module.css"
+
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+
+export default function RoomsHeader() {
+  const { rooms, totalRooms } = useRoomContext()
+  const intl = useIntl()
+
+  const availableRooms = rooms.filter(
+    (room) => room.status === AvailabilityEnum.Available
+  ).length
+
+  const notAllRoomsAvailableText = intl.formatMessage(
+    {
+      id: "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
+    },
+    {
+      availableRooms,
+      numberOfRooms: totalRooms,
+    }
+  )
+
+  const allRoomsAvailableText = intl.formatMessage(
+    {
+      id: "{numberOfRooms, plural, one {# room type} other {# room types}} available",
+    },
+    {
+      numberOfRooms: totalRooms,
+    }
+  )
+
+  return (
+    <div className={styles.container}>
+      <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
+        <p>
+          {availableRooms !== totalRooms
+            ? notAllRoomsAvailableText
+            : allRoomsAvailableText}
+        </p>
+      </Typography>
+      <div className={styles.filters}>
+        <RoomPackageFilter />
+        <BookingCodeFilter />
+      </div>
+    </div>
+  )
+}