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, trackRoomsLoaded } 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()

  const { price: lowestRoomPrice, currency: lowestRoomPriceCurrency } =
    getLowestRoomPrice() ?? {}
  const dataAvailable = availabilityData?.length
  const { hotelId, fromDate, toDate } = inputData?.booking ?? {}

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

    if (!hotelId || !fromDate || !toDate || !lowestRoomPrice) return

    trackLowestRoomPrice({
      hotelId: hotelId,
      arrivalDate: fromDate,
      departureDate: toDate,
      lowestPrice: lowestRoomPrice.toString(),
      currency: lowestRoomPriceCurrency,
    })
  }, [
    dataAvailable,
    hotelId,
    fromDate,
    toDate,
    lowestRoomPrice,
    lowestRoomPriceCurrency,
  ])

  useEffect(() => {
    if (isFetching) return
    trackRoomsLoaded()
  }, [isFetching])

  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({
        id: "selectRate.invalidDatesErrorMessage",
        defaultMessage: "Invalid dates",
      })
    }
    default:
      return intl.formatMessage({
        id: "errorMessage.somethingWentWrong",
        defaultMessage: "Something went wrong!",
      })
  }
}