81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
|
|
import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
|
|
|
|
import Points from "../../Points"
|
|
import Price from "../../Price"
|
|
|
|
import styles from "./totalPrice.module.css"
|
|
|
|
import type { PriceType } from "@/types/components/hotelReservation/myStay/myStay"
|
|
|
|
export type Variant =
|
|
| "Title/Subtitle/lg"
|
|
| "Title/Subtitle/md"
|
|
| "Body/Paragraph/mdBold"
|
|
|
|
interface TotalPriceProps {
|
|
variant: Variant
|
|
type?: PriceType
|
|
}
|
|
|
|
export default function TotalPrice({
|
|
variant,
|
|
type = "money",
|
|
}: TotalPriceProps) {
|
|
const totalPrice = useMyStayTotalPriceStore((state) => state.totalPrice)
|
|
const totalPoints = useMyStayTotalPriceStore((state) => state.totalPoints)
|
|
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
|
|
|
|
const { vouchers, cheques } = bookedRoom
|
|
|
|
const intl = useIntl()
|
|
if (type === "money") {
|
|
return <Price price={totalPrice} variant={variant} />
|
|
}
|
|
|
|
if (type === "voucher") {
|
|
return (
|
|
<Typography variant={variant}>
|
|
<p>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{count} voucher",
|
|
},
|
|
{ count: vouchers }
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
)
|
|
}
|
|
|
|
if (type === "cheque") {
|
|
return (
|
|
<div className={styles.totalPrice}>
|
|
<Typography variant={variant}>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<p>{cheques} CC + </p>
|
|
</Typography>
|
|
<Price price={totalPrice} variant={variant} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (totalPrice && totalPrice > 0 && type === "points") {
|
|
return (
|
|
<div className={styles.totalPrice}>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<Points points={totalPoints} variant={variant} /> +{" "}
|
|
<Price price={totalPrice} variant={variant} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <Points points={totalPoints} variant={variant} />
|
|
}
|