"use client" import { useIntl } from "react-intl" import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert" import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation" import { Alert } from "@scandic-hotels/design-system/Alert" import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel" import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext" import useLang from "../../../../../hooks/useLang" import styles from "./alert.module.css" export default function NoAvailabilityAlert({ roomIndex, }: { roomIndex: number }) { const lang = useLang() const intl = useIntl() const { availability, input } = useSelectRateContext() if (availability.isFetching || !availability.data) { return null } const indexed = availability.data[roomIndex] const hasAvailabilityError = "error" in indexed if (hasAvailabilityError) { return null } const noAvailableRooms = hasAvailableRoomsForRoom(indexed.roomConfigurations) const alertLink = roomIndex !== -1 && (input.data?.booking.rooms.at(roomIndex)?.packages ?? []).length === 0 ? { title: intl.formatMessage({ defaultMessage: "See alternative hotels", }), url: `${alternativeHotels(lang)}`, keepSearchParams: true, } : null if (noAvailableRooms) { const text = intl.formatMessage({ defaultMessage: "There are no rooms available that match your request.", }) return (