web/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/index.tsx

"use client"

import { useIntl } from "react-intl"

import { useBookingConfirmationStore } from "@scandic-hotels/booking-flow/stores/booking-confirmation"
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"

import Room from "./Room"
import TotalPrice from "./TotalPrice"

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

export default function Receipt() {
  const lang = useLang()
  const intl = useIntl()
  const { rooms, fromDate, toDate } = useBookingConfirmationStore((state) => ({
    rooms: state.rooms,
    fromDate: state.fromDate,
    toDate: state.toDate,
  }))

  const totalNights = dt(toDate).diff(fromDate, "days")

  const nights = intl.formatMessage(
    {
      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
    },
    { totalNights }
  )

  const filteredRooms = rooms.filter(
    (room): room is NonNullable<typeof room> => !!room
  )

  return (
    <section className={styles.receipt}>
      <header>
        <Typography variant="Title/Subtitle/md">
          <h3 className={styles.heading}>
            {intl.formatMessage({
              defaultMessage: "Booking summary",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdBold">
          <p className={styles.dates}>
            {dt(fromDate).locale(lang).format(longDateFormat[lang])}
            <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {dt(toDate).locale(lang).format(longDateFormat[lang])} ({nights})
          </p>
        </Typography>
      </header>

      <Divider color="Border/Divider/Subtle" />

      {filteredRooms.map((room, idx) => (
        <Room
          key={room ? room.confirmationNumber : `loader-${idx}`}
          room={room}
          roomNumber={idx + 1}
          roomCount={rooms.length}
        />
      ))}

      <TotalPrice />
    </section>
  )
}