web/components/HotelReservation/MyStay/ReferenceCard/index.tsx

import { dt } from "@/lib/dt"

import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { Hotel } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

export async function ReferenceCard({
  booking,
  hotel,
}: {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
}) {
  const intl = await getIntl()
  const lang = getLang()

  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`

  return (
    <div className={styles.referenceCard}>
      <div className={styles.referenceRow}>
        <Subtitle color="uiTextHighContrast" className={styles.titleMobile}>
          {intl.formatMessage({ id: "Reference" })}
        </Subtitle>
        <Subtitle color="uiTextHighContrast" className={styles.titleDesktop}>
          {intl.formatMessage({ id: "Reference number" })}
        </Subtitle>
        <Subtitle color="uiTextHighContrast">
          {booking.confirmationNumber}
        </Subtitle>
      </div>
      <Divider color="primaryLightSubtle" className={styles.divider} />
      <div className={styles.referenceRow}>
        <Caption
          textTransform="uppercase"
          type="bold"
          color="uiTextHighContrast"
        >
          {intl.formatMessage({ id: "Guests" })}
        </Caption>
        <Caption type="bold" color="uiTextHighContrast">
          {booking.childrenAges.length > 0
            ? intl.formatMessage(
                { id: "{adults} adults, {children} children" },
                {
                  adults: booking.adults,
                  children: booking.childrenAges.length,
                }
              )
            : intl.formatMessage(
                { id: "{adults} adults" },
                {
                  adults: booking.adults,
                }
              )}
        </Caption>
      </div>
      <div className={styles.referenceRow}>
        <Caption
          textTransform="uppercase"
          type="bold"
          color="uiTextHighContrast"
        >
          {intl.formatMessage({ id: "Check-in" })}
        </Caption>
        <Caption type="bold" color="uiTextHighContrast">
          {`${fromDate.format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
        </Caption>
      </div>
      <div className={styles.referenceRow}>
        <Caption
          textTransform="uppercase"
          type="bold"
          color="uiTextHighContrast"
        >
          {intl.formatMessage({ id: "Check-out" })}
        </Caption>
        <Caption type="bold" color="uiTextHighContrast">
          {`${toDate.format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
        </Caption>
      </div>
      <Divider color="primaryLightSubtle" className={styles.divider} />
      <div className={styles.referenceRow}>
        <Caption
          textTransform="uppercase"
          type="bold"
          color="uiTextHighContrast"
        >
          {intl.formatMessage({ id: "Total paid" })}
        </Caption>
        <Caption type="bold" color="uiTextHighContrast">
          {formatPrice(intl, booking.totalPrice, booking.currencyCode)}
        </Caption>
      </div>
      <div className={styles.actionArea}>
        <Button fullWidth>{intl.formatMessage({ id: "Manage stay" })}</Button>
        <Button fullWidth intent="secondary" asChild>
          <Link href={directionsUrl} target="_blank">
            {intl.formatMessage({ id: "Get directions" })}
          </Link>
        </Button>
      </div>
      {booking.rateDefinition.cancellationRule !== "NotCancellable" && (
        <Caption className={styles.note} color="uiTextHighContrast">
          {intl.formatMessage(
            {
              id: "Changes can be made until {time} on {date}, subject to availability. Room rates may vary.",
            },
            {
              date: fromDate.format("D MMMM"),
              time: "18:00",
            }
          )}
        </Caption>
      )}
    </div>
  )
}