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

"use client"

import { TRPCClientError } from "@trpc/client"
import { useEffect } from "react"
import { useIntl } from "react-intl"

import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { Alert } from "@scandic-hotels/design-system/Alert"

import { useSelectRateContext } from "../../../contexts/SelectRate/SelectRateContext"
import { trackLowestRoomPrice } from "../Tracking/tracking"
import { RateSummary } from "./RateSummary"
import Rooms from "./Rooms"
import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"

import styles from "./index.module.css"

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

interface RoomsContainerProps
  extends Pick<HotelData, "roomCategories">,
    Pick<HotelData["hotel"], "hotelType" | "vat"> {}

export function RoomsContainer({}: RoomsContainerProps) {
  const intl = useIntl()

  const {
    availability: { error, isFetching, isError, data: availabilityData },
    input: { hasError: hasInputError, errorCode, data: inputData },
    getLowestRoomPrice,
  } = useSelectRateContext()

  useEffect(() => {
    if (!availabilityData) return

    const lowestRoomPrice = getLowestRoomPrice()
    const booking = inputData?.booking

    if (!booking || !lowestRoomPrice) return

    trackLowestRoomPrice({
      hotelId: booking.hotelId,
      arrivalDate: booking?.fromDate,
      departureDate: booking?.toDate,
      lowestPrice: lowestRoomPrice.price.toString(),
      currency: lowestRoomPrice.currency,
    })
  }, [availabilityData, inputData, getLowestRoomPrice])

  if (isFetching) {
    return <RoomsContainerSkeleton />
  }

  if (isError || hasInputError) {
    const errorMessage = getErrorMessage(error ?? errorCode, intl)

    return (
      <div className={styles.errorContainer}>
        <Alert type={AlertTypeEnum.Alarm} heading={errorMessage} />
      </div>
    )
  }

  return (
    <>
      <Rooms />
      <RateSummary />
    </>
  )
}

function getErrorMessage(error: unknown, intl: ReturnType<typeof useIntl>) {
  let errorCode = ""
  if (error instanceof TRPCClientError) {
    errorCode = error.data?.zodError?.formErrors?.at(0)
  } else if (typeof error == "string") {
    errorCode = error
  }

  switch (errorCode) {
    case "FROMDATE_INVALID":
    case "TODATE_INVALID":
    case "TODATE_MUST_BE_AFTER_FROMDATE":
    case "FROMDATE_CANNOT_BE_IN_THE_PAST": {
      return intl.formatMessage({
        defaultMessage: "Invalid dates",
      })
    }
    default:
      return intl.formatMessage({
        defaultMessage: "Something went wrong",
      })
  }
}