web/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx

import React from "react"
import { useIntl } from "react-intl"

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Caption from "@scandic-hotels/design-system/Caption"
import { Typography } from "@scandic-hotels/design-system/Typography"

import {
  calculateTotalRoomPrice,
  hasFlexibleRate,
  hasPrepaidRate,
} from "../helpers"

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

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

type PaymentBreakdownState = {
  roomsWithPrepaidRate: number[]
  roomsWithFlexRate: number[]
  payNowPrice: number
  payNowComparisonPrice: number
  payAtCheckInPrice: number
  payAtCheckInComparisonPrice: number
}

interface MixedRatePaymentBreakdownProps {
  rooms: RoomState[]
  currency: string
}

export default function MixedRatePaymentBreakdown({
  rooms,
  currency,
}: MixedRatePaymentBreakdownProps) {
  const intl = useIntl()
  const payNowTitle = intl.formatMessage({
    id: "booking.payNow",
    defaultMessage: "Pay now",
  })
  const payAtCheckInTitle = intl.formatMessage({
    id: "enterDetails.payment.payAtCheckInOption",
    defaultMessage: "Pay at check-in",
  })

  const initialState: PaymentBreakdownState = {
    roomsWithPrepaidRate: [],
    roomsWithFlexRate: [],
    payNowPrice: 0,
    payNowComparisonPrice: 0,
    payAtCheckInPrice: 0,
    payAtCheckInComparisonPrice: 0,
  }

  const {
    roomsWithPrepaidRate,
    roomsWithFlexRate,
    payNowPrice,
    payNowComparisonPrice,
    payAtCheckInPrice,
    payAtCheckInComparisonPrice,
  } = rooms.reduce((acc, room, idx) => {
    if (hasPrepaidRate(room)) {
      acc.roomsWithPrepaidRate.push(idx)
      const { totalPrice, comparisonPrice } = calculateTotalRoomPrice(room)
      acc.payNowPrice += totalPrice
      acc.payNowComparisonPrice += comparisonPrice
    }
    if (hasFlexibleRate(room)) {
      acc.roomsWithFlexRate.push(idx)
      const { totalPrice, comparisonPrice } = calculateTotalRoomPrice(room)
      acc.payAtCheckInPrice += totalPrice
      acc.payAtCheckInComparisonPrice += comparisonPrice
    }
    return acc
  }, initialState)

  return (
    <div className={styles.container}>
      <PaymentCard
        title={payNowTitle}
        price={payNowPrice}
        comparisonPrice={payNowComparisonPrice}
        currency={currency}
        roomIndexes={roomsWithPrepaidRate}
      />
      <PaymentCard
        title={payAtCheckInTitle}
        price={payAtCheckInPrice}
        comparisonPrice={payAtCheckInComparisonPrice}
        currency={currency}
        roomIndexes={roomsWithFlexRate}
      />
    </div>
  )
}

interface PaymentCardProps {
  title: string
  price: number
  comparisonPrice: number
  currency: string
  roomIndexes: number[]
}

function PaymentCard({
  title,
  price,
  comparisonPrice,
  currency,
  roomIndexes,
}: PaymentCardProps) {
  const intl = useIntl()
  const isMemberRateApplied = price < comparisonPrice

  return (
    <div className={styles.card}>
      <Caption
        type="bold"
        textTransform="uppercase"
        className={styles.cardTitle}
      >
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        {title}{" "}
        <span>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          {"/ "}
          {intl.formatMessage(
            {
              id: "booking.roomIndex",
              defaultMessage: "Room {roomIndex}",
            },
            {
              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
            }
          )}
        </span>
      </Caption>
      <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
        <p>
          {formatPrice(intl, price, currency)}
          {isMemberRateApplied && comparisonPrice && (
            <span>{formatPrice(intl, comparisonPrice, currency)}</span>
          )}
        </p>
      </Typography>
    </div>
  )
}