import React from "react"
import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting"
import {
calculateTotalRoomPrice,
hasFlexibleRate,
hasPrepaidRate,
} from "../helpers"
import styles from "./mixedRatePaymentBreakdown.module.css"
import type { RoomState } from "@/types/stores/enter-details"
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({
defaultMessage: "Pay now",
})
const payAtCheckInTitle = intl.formatMessage({
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 (
)
}
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 (
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{title}{" "}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{"/ "}
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
}
)}
{formatPrice(intl, price, currency)}
{isMemberRateApplied && comparisonPrice ? (
{formatPrice(intl, comparisonPrice, currency)}
) : null}
)
}