feat(BOOK-472): Different placement of no availability alert on mobile viewports

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx

@@ -1,13 +1,9 @@
 "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 { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { ErrorBoundary } from "../../../../ErrorBoundary/ErrorBoundary"
+import NoAvailabilityAlert from "../NoAvailabilityAlert"
 import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
+import { AvailableRoomsCount } from "./AvailableRoomsCount"
 import { RoomPackageFilter } from "./RoomPackageFilter"
 
 import styles from "./roomsHeader.module.css"
@@ -24,7 +20,14 @@ export function RoomsHeader({ roomIndex }: { roomIndex: number }) {
 function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) {
   return (
     <div className={styles.container}>
-      <AvailableRoomCount roomIndex={roomIndex} />
+      <AvailableRoomsCount
+        roomIndex={roomIndex}
+        className={styles.availableRoomsCount}
+      />
+      <NoAvailabilityAlert
+        roomIndex={roomIndex}
+        className={styles.noAvailabilityAlert}
+      />
       <div className={styles.filters}>
         <RemoveBookingCodeButton />
         <RoomPackageFilter roomIndex={roomIndex} />
@@ -33,53 +36,3 @@ function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) {
     </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(
-    {
-      id: "selectRate.availableRooms.partial",
-      defaultMessage:
-        "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
-    },
-    {
-      availableRooms,
-      numberOfRooms: totalRooms,
-    }
-  )
-
-  const allRoomsAvailableText = intl.formatMessage(
-    {
-      id: "selectRate.availableRooms.all",
-      defaultMessage:
-        "{numberOfRooms, plural, one {# room type} other {# room types}} available",
-    },
-    {
-      numberOfRooms: totalRooms,
-    }
-  )
-
-  if (isFetching) {
-    return <SkeletonShimmer height="30px" width="25ch" />
-  }
-
-  return (
-    <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
-      <p>
-        {availableRooms !== totalRooms
-          ? notAllRoomsAvailableText
-          : allRoomsAvailableText}
-      </p>
-    </Typography>
-  )
-}