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 { useHotelFilterStore } from "../../stores/hotel-filters"

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, activeFilters } = useHotelFilterStore((state) => ({
    resultCount: state.resultCount,
    activeFilters: state.activeFilters,
  }))

  if (activeFilters.length > 0 && resultCount === 0) {
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          defaultMessage: "No hotels match your filters",
        })}
        text={intl.formatMessage({
          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(
      {
        defaultMessage:
          "We found no available rooms using this booking code ({bookingCode}). See available rates below.",
      },
      { bookingCode }
    )
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          defaultMessage: "No availability",
        })}
        text={bookingCodeText}
      />
    )
  }

  if (!isAllUnavailable) {
    return null
  }

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

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