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>
+  )
+}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  gap: var(--Space-x3);
+  align-items: center;
+}
+
+.availableRooms {
+  color: var(--Text-Default);
+}
+
+.filters {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: center;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-columns: 1fr auto;
+  }
+}