web/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/index.tsx

"use client"
import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { dt } from "@/lib/dt"
import { getBookedHotelRoom } from "@/server/routers/booking/utils"

import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import Image from "@/components/Image"
import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

import PriceType from "../../PriceType"
import { hasModifiableRate } from "../../utils"

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

import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { RoomCategories } from "@/types/hotel"
import type { Room } from "@/types/stores/my-stay"
import type { SafeUser } from "@/types/user"

interface MultiRoomProps {
  booking: Room
  roomNr: number
  user: SafeUser
  roomCategories: RoomCategories
}

export default function MultiRoom({
  booking,
  roomNr,
  user,
  roomCategories,
}: MultiRoomProps) {
  const intl = useIntl()
  const lang = useLang()

  const {
    adults,
    breakfast,
    cancellationNumber,
    checkInDate,
    cheques,
    childrenAges,
    confirmationNumber,
    currencyCode,
    packages,
    rateDefinition,
    room,
    roomName,
    roomPoints,
    isCancelled,
    priceType,
    roomTypeCode,
    vouchers,
    totalPrice,
  } = booking

  const fromDate = dt(checkInDate).locale(lang)

  const adultsMsg = intl.formatMessage(
    {
      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
    },
    {
      adults: adults,
    }
  )

  const childrenMsg = intl.formatMessage(
    {
      defaultMessage: "{children, plural, one {# child} other {# children}}",
    },
    {
      children: childrenAges.length,
    }
  )

  const adultsOnlyMsg = adultsMsg
  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")

  const formattedTotalPrice = formatPrice(intl, totalPrice, currencyCode)

  let breakfastPrice = intl.formatMessage({
    defaultMessage: "No breakfast",
  })
  if (rateDefinition.breakfastIncluded) {
    breakfastPrice = intl.formatMessage({
      defaultMessage: "Included",
    })
  } else if (breakfast) {
    breakfastPrice = formatPrice(
      intl,
      breakfast.localPrice.totalPrice,
      breakfast.localPrice.currency
    )
  }
  const hotelRoom = getBookedHotelRoom(roomCategories, roomTypeCode)

  return (
    <article className={styles.multiRoom}>
      <Typography variant="Title/smRegular">
        <h3 className={styles.roomName}>{roomName}</h3>
      </Typography>
      <div className={styles.roomHeader}>
        {isCancelled ? (
          <IconChip
            color={"red"}
            icon={
              <MaterialIcon
                icon="cancel"
                size={20}
                color="Icon/Feedback/Error"
              />
            }
          >
            <Typography variant="Body/Supporting text (caption)/smBold">
              <span>
                {intl.formatMessage({
                  defaultMessage: "Cancelled",
                })}
              </span>
            </Typography>
          </IconChip>
        ) : (
          <div className={styles.chip}>
            <Typography variant="Tag/sm">
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "Room {roomIndex}",
                  },
                  {
                    roomIndex: roomNr,
                  }
                )}
              </span>
            </Typography>
          </div>
        )}
        <div className={styles.reference}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            {isCancelled ? (
              <span>
                {intl.formatMessage({
                  defaultMessage: "Cancellation no",
                })}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {":"}
              </span>
            ) : (
              <span>
                {intl.formatMessage({
                  defaultMessage: "Booking number",
                })}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {":"}
              </span>
            )}
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            {isCancelled ? (
              <span className={styles.cancellationNumber}>
                {cancellationNumber}
              </span>
            ) : (
              <span>{confirmationNumber}</span>
            )}
          </Typography>
        </div>
        <div className={styles.toggleSidePeek}>
          <DialogTrigger>
            <ButtonRAC
              aria-label={intl.formatMessage({
                defaultMessage: "View room details",
              })}
              className={styles.iconContainer}
            >
              <MaterialIcon icon="pan_zoom" color="CurrentColor" />
            </ButtonRAC>
            <BookedRoomSidePeek
              hotelRoom={hotelRoom}
              room={booking}
              user={user}
            />
          </DialogTrigger>
        </div>
      </div>
      <div
        className={`${styles.multiRoomCard} ${isCancelled ? styles.cancelled : ""}`}
      >
        {packages?.some((item) =>
          Object.values(RoomPackageCodeEnum).includes(
            item.code as RoomPackageCodeEnum
          )
        ) && (
          <div className={styles.packages}>
            {packages
              .filter((item) =>
                Object.values(RoomPackageCodeEnum).includes(
                  item.code as RoomPackageCodeEnum
                )
              )
              .map((item) => {
                return (
                  <span className={styles.package} key={item.code}>
                    <IconForFeatureCode
                      featureCode={item.code}
                      size={16}
                      color="Icon/Interactive/Default"
                    />
                  </span>
                )
              })}
          </div>
        )}
        <div className={styles.imageContainer}>
          <Image
            src={room?.images[0]?.imageSizes.small ?? ""}
            alt={roomName}
            fill
          />
        </div>
        <div className={styles.details}>
          <div className={styles.row}>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Guests",
                })}
              </p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {childrenAges.length > 0 ? adultsAndChildrenMsg : adultsOnlyMsg}
              </p>
            </Typography>
          </div>
          {rateDefinition.cancellationText ? (
            <div className={styles.row}>
              <Typography variant="Body/Paragraph/mdBold">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "Terms",
                  })}
                </p>
              </Typography>
              <Typography variant="Body/Paragraph/mdRegular">
                <p>{rateDefinition.cancellationText}</p>
              </Typography>
            </div>
          ) : null}
          {hasModifiableRate(rateDefinition.cancellationRule) && (
            <div className={styles.row}>
              <Typography variant="Body/Paragraph/mdBold">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "Modify By",
                  })}
                </p>
              </Typography>

              <Typography variant="Body/Paragraph/mdRegular">
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <p color="uiTextHighContrast">
                  18:00, {fromDate.format("dddd D MMM")}
                </p>
              </Typography>
            </div>
          )}
          {breakfastPrice !== null && (
            <div className={styles.row}>
              <Typography variant="Body/Paragraph/mdBold">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "Breakfast",
                  })}
                </p>
              </Typography>

              <Typography variant="Body/Paragraph/mdRegular">
                <p color="uiTextHighContrast">{breakfastPrice}</p>
              </Typography>
            </div>
          )}
          <Divider color="subtle" />
          <div className={styles.row}>
            <Typography variant="Body/Lead text">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Room total",
                })}
              </p>
            </Typography>
            <PriceType
              cheques={cheques}
              formattedTotalPrice={formattedTotalPrice}
              isCancelled={isCancelled}
              priceType={priceType}
              rateDefinition={rateDefinition}
              roomPoints={roomPoints}
              totalPrice={totalPrice}
              vouchers={vouchers}
            />
          </div>
        </div>
      </div>
    </article>
  )
}