web/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

"use client"

import { Fragment, useState } from "react"
import {
  Dialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"
import { useIntl } from "react-intl"

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"

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

import type { RoomState } from "../../../../stores/enter-details/types"

interface PriceChangeSummaryProps {
  rooms: RoomState[]
  roomPrices: { prevPrice: number; newPrice?: number }[]
  newTotalPrice: { price: number; currency: string }
  onAccept: () => void
  onCancel: () => void
}

export default function PriceChangeSummary({
  rooms,
  roomPrices,
  newTotalPrice,
  onAccept,
  onCancel,
}: PriceChangeSummaryProps) {
  const intl = useIntl()
  const [isOpen, toggleOpen] = useState(false)

  return (
    <DialogTrigger>
      <Button
        intent="text"
        size="small"
        theme="base"
        variant="icon"
        wrapping
        onClick={() => toggleOpen((isOpen) => !isOpen)}
      >
        {intl.formatMessage({
          id: "enterDetails.priceChangeDialog.seePriceDetailsButton",
          defaultMessage: "See price details",
        })}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
      <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
        <Modal>
          <Dialog className={styles.dialog}>
            {({ close }) => (
              <div className={styles.content}>
                <header className={styles.header}>
                  <Typography variant="Title/Subtitle/md">
                    <p>
                      {intl.formatMessage({
                        id: "common.priceDetails",
                        defaultMessage: "Price details",
                      })}
                    </p>
                  </Typography>
                  <Button
                    onPress={close}
                    variant="clean"
                    className={styles.closeButton}
                  >
                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
                  </Button>
                </header>
                <section>
                  <div>
                    {rooms.map(({ room }, idx) => {
                      const roomNumber = idx + 1
                      const newPrice = roomPrices[idx].newPrice

                      return (
                        <Fragment key={idx}>
                          <div className={styles.rowContainer}>
                            <Typography variant="Body/Paragraph/mdBold">
                              <p>
                                {rooms.length > 1
                                  ? intl.formatMessage(
                                      {
                                        id: "booking.roomIndex",
                                        defaultMessage: "Room {roomIndex}",
                                      },
                                      { roomIndex: roomNumber }
                                    )
                                  : intl.formatMessage({
                                      id: "common.room",
                                      defaultMessage: "Room",
                                    })}
                              </p>
                            </Typography>
                            <Typography variant="Body/Paragraph/mdRegular">
                              <p>{room.roomType}</p>
                            </Typography>
                            <div className={styles.priceRow}>
                              <Caption color="uiTextMediumContrast">
                                {intl.formatMessage({
                                  id: "priceDetails.roomCharge",
                                  defaultMessage: "Room charge",
                                })}
                              </Caption>
                              {newPrice ? (
                                <div className={styles.updatedPrice}>
                                  <Caption color="uiTextMediumContrast" striked>
                                    {formatPrice(
                                      intl,
                                      room.roomPrice.perStay.local.price,
                                      room.roomPrice.perStay.local.currency
                                    )}
                                  </Caption>
                                  <Typography variant="Body/Paragraph/mdBold">
                                    <p>
                                      {formatPrice(
                                        intl,
                                        newPrice,
                                        room.roomPrice.perStay.local.currency
                                      )}
                                    </p>
                                  </Typography>
                                </div>
                              ) : (
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    room.roomPrice.perStay.local.price,
                                    room.roomPrice.perStay.local.currency
                                  )}
                                </Caption>
                              )}
                            </div>
                            {room.breakfast && (
                              <div className={styles.priceRow}>
                                <Caption color="uiTextMediumContrast">
                                  {intl.formatMessage({
                                    id: "enterDetails.priceChangeDialog.breakfastCharge",
                                    defaultMessage: "Breakfast charge",
                                  })}
                                </Caption>
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    Number(
                                      room.breakfast.localPrice.totalPrice
                                    ),
                                    room.breakfast.localPrice.currency
                                  )}
                                </Caption>
                              </div>
                            )}
                            {room.roomFeatures?.map((feature) => (
                              <div
                                className={styles.priceRow}
                                key={feature.itemCode}
                              >
                                <Caption color="uiTextMediumContrast">
                                  {getRoomFeatureDescription(
                                    feature.code,
                                    feature.description,
                                    intl
                                  )}
                                </Caption>
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    Number(feature.localPrice.totalPrice),
                                    feature.localPrice.currency
                                  )}
                                </Caption>
                              </div>
                            ))}
                          </div>
                          <Divider color="Border/Divider/Subtle" />
                        </Fragment>
                      )
                    })}
                  </div>
                  <div className={styles.rowContainer}>
                    <Typography variant="Body/Paragraph/mdRegular">
                      <p>
                        {intl.formatMessage({
                          id: "common.total",
                          defaultMessage: "Total",
                        })}
                      </p>
                    </Typography>
                    <div className={styles.priceRow}>
                      <Typography variant="Body/Paragraph/mdBold">
                        <p>
                          {intl.formatMessage({
                            id: "booking.priceIncludingVat",
                            defaultMessage: "Price including VAT",
                          })}
                        </p>
                      </Typography>
                      <Typography variant="Body/Paragraph/mdBold">
                        <p>
                          {formatPrice(
                            intl,
                            newTotalPrice.price,
                            newTotalPrice.currency
                          )}
                        </p>
                      </Typography>
                    </div>
                  </div>
                </section>
                <footer className={styles.footer}>
                  <Button intent="secondary" onClick={onCancel}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.cancelButton",
                      defaultMessage: "Back to room selection",
                    })}
                  </Button>
                  <Button onClick={onAccept}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.acceptButton",
                      defaultMessage: "Continue with new price",
                    })}
                  </Button>
                </footer>
              </div>
            )}
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  )
}