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

import { dt } from "@scandic-hotels/common/dt"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"

import { longDateWithYearFormat } from "@/constants/dateFormats"

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"

export default async function Footer({ booking, room }: FooterProps) {
  const intl = await getIntl()
  const lang = await 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({
                defaultMessage: "Booking 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({
                defaultMessage: "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({
                defaultMessage: "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({
                defaultMessage: "Check-in",
              })}
            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {dt(booking.checkInDate)
                .locale(lang)
                .format(longDateWithYearFormat[lang])}
            </dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>
              {intl.formatMessage({
                defaultMessage: "Check-out",
              })}
            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {dt(booking.checkOutDate)
                .locale(lang)
                .format(longDateWithYearFormat[lang])}
            </dd>
          </Typography>
        </div>
      </div>

      <div className={styles.rightColumn}>
        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>
              {intl.formatMessage({
                defaultMessage: "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({
                defaultMessage: "Number of guests",
              })}
            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "{adults, plural, one {# adult} other {# adults}}",
                },
                { adults: booking.adults }
              )}
              {booking.childrenAges.length > 0 && (
                <>
                  {", "}
                  {intl.formatMessage(
                    {
                      defaultMessage:
                        "{children, plural, one {# child} other {# children}}",
                    },
                    { children: booking.childrenAges.length }
                  )}
                </>
              )}
            </dd>
          </Typography>
        </div>

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt>
              {intl.formatMessage({
                defaultMessage: "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({
                  defaultMessage: "Room classification",
                })}
              </dt>
            </Typography>
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <dd>
                {intl.formatMessage({
                  defaultMessage: "Pet-friendly",
                })}
              </dd>
            </Typography>
          </div>
        )}

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