web/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx

import { Typography } from "@scandic-hotels/design-system/Typography"

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

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getNumberOfNights } from "@/utils/dateFormatting"

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

import type { FooterProps } from "@/types/components/hotelReservation/myStay/receipt"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"

export default async function Footer({ booking, room }: FooterProps) {
  const intl = await getIntl()
  const lang = getLang()

  const petRoomPackage = booking.packages.find(
    (p) => p.code === RoomPackageCodeEnum.PET_ROOM
  )

  return (
    <dl className={styles.dl}>
      <div>
        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Reference number" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{booking.confirmationNumber}</dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Room" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{room?.name}</dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Rate" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{booking.rateDefinition.title}</dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Check-in" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {dt(booking.checkInDate).locale(lang).format("ddd, D MMM YYYY")}
            </dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Check-out" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {dt(booking.checkOutDate).locale(lang).format("ddd, D MMM YYYY")}
            </dd>
          </Typography>
        </div>
      </div>

      <div className={styles.rightColumn}>
        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Number of nights" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {getNumberOfNights(booking.checkInDate, booking.checkOutDate)}
            </dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Number of guests" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {intl.formatMessage(
                { id: "{adults, plural, one {# adult} other {# adults}}" },
                { adults: booking.adults }
              )}
              {booking.childrenAges.length > 0 && (
                <>
                  {", "}
                  {intl.formatMessage(
                    {
                      id: "{children, plural, one {# child} other {# children}}",
                    },
                    { children: booking.childrenAges.length }
                  )}
                </>
              )}
            </dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Bed type" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{room?.bedType.mainBed.description}</dd>
          </Typography>
        </div>

        {petRoomPackage && (
          <div>
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <dt>{intl.formatMessage({ id: "Room classification" })}</dt>
            </Typography>
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <dd>{intl.formatMessage({ id: "Pet-friendly" })}</dd>
            </Typography>
          </div>
        )}

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>{intl.formatMessage({ id: "Breakfast" })}</dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {booking.rateDefinition.breakfastIncluded
                ? intl.formatMessage({ id: "Included" })
                : intl.formatMessage({ id: "Not included" })}
            </dd>
          </Typography>
        </div>
      </div>
    </dl>
  )
}