web/packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx

"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 useLang from "../../hooks/useLang"
import { useHotelResultCountStore } from "../../stores/hotel-result-count"
import { useHotelFilters } from "./Filters/useHotelFilters"

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

type NoAvailabilityAlertProps = {
  hotelsLength: number
  bookingCode?: string
  isAllUnavailable: boolean
  isAlternative?: boolean
  isBookingCodeRateNotAvailable?: boolean
  operaId: Hotel["operaId"]
}

export default function NoAvailabilityAlert({
  hotelsLength,
  bookingCode,
  isAllUnavailable,
  isAlternative,
  isBookingCodeRateNotAvailable,
  operaId,
}: NoAvailabilityAlertProps) {
  const intl = useIntl()
  const lang = useLang()

  const { resultCount } = useHotelResultCountStore((state) => ({
    resultCount: state.resultCount,
  }))
  const [activeFilters] = useHotelFilters(null)

  if (activeFilters.length > 0 && resultCount === 0) {
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          id: "filter.noMatchingHotelsFound",
          defaultMessage: "No matching hotels found",
        })}
        text={intl.formatMessage({
          id: "filter.noMatchingHotelsFoundDescription",
          defaultMessage:
            "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
        })}
      />
    )
  }

  if (bookingCode && isBookingCodeRateNotAvailable && hotelsLength > 0) {
    const bookingCodeText = intl.formatMessage(
      {
        id: "selectHotel.noAvailabilityForBookingCode",
        defaultMessage:
          "We found no available rooms using this booking code ({bookingCode}). See available rates below.",
      },
      { bookingCode }
    )
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          id: "booking.noAvailability",
          defaultMessage: "No availability",
        })}
        text={bookingCodeText}
      />
    )
  }

  if (!isAllUnavailable) {
    return null
  }

  if (hotelsLength === 1 && !isAlternative && operaId) {
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          id: "booking.noAvailability",
          defaultMessage: "No availability",
        })}
        text={intl.formatMessage({
          id: "selectHotel.noAvailability.changeSearchText",
          defaultMessage:
            "Please try and change your search for this destination or see alternative hotels.",
        })}
        link={{
          title: intl.formatMessage({
            id: "booking.seeAlternativeHotels",
            defaultMessage: "See alternative hotels",
          }),
          url: `${alternativeHotels(lang)}?hotel=${operaId}`,
          keepSearchParams: true,
        }}
      />
    )
  }

  return (
    <Alert
      type={AlertTypeEnum.Info}
      heading={intl.formatMessage({
        id: "booking.noAvailability",
        defaultMessage: "No availability",
      })}
      text={intl.formatMessage({
        id: "booking.noRoomsAvailable",
        defaultMessage: "There are no rooms available that match your request.",
      })}
    />
  )
}