270 lines
8.6 KiB
TypeScript
270 lines
8.6 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { ChevronDown } from "react-feather"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./summary.module.css"
|
|
|
|
import { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
|
|
import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
|
|
import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
|
|
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
|
|
|
|
function parsePrice(price: string | undefined) {
|
|
return price ? parseInt(price) : 0
|
|
}
|
|
|
|
export default function Summary({
|
|
showMemberPrice,
|
|
room,
|
|
}: {
|
|
showMemberPrice: boolean
|
|
room: RoomsData
|
|
}) {
|
|
const [chosenBed, setChosenBed] = useState<BedTypeSchema>()
|
|
const [chosenBreakfast, setChosenBreakfast] = useState<
|
|
BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
|
|
>()
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const {
|
|
fromDate,
|
|
toDate,
|
|
bedType,
|
|
breakfast,
|
|
setTotalPrice,
|
|
totalPrice,
|
|
toggleSummaryOpen,
|
|
} = useEnterDetailsStore((state) => ({
|
|
fromDate: state.roomData.fromDate,
|
|
toDate: state.roomData.toDate,
|
|
bedType: state.userData.bedType,
|
|
breakfast: state.userData.breakfast,
|
|
toggleSummaryOpen: state.toggleSummaryOpen,
|
|
setTotalPrice: state.setTotalPrice,
|
|
totalPrice: state.totalPrice,
|
|
}))
|
|
|
|
const diff = dt(toDate).diff(fromDate, "days")
|
|
|
|
const nights = intl.formatMessage(
|
|
{ id: "booking.nights" },
|
|
{ totalNights: diff }
|
|
)
|
|
|
|
let color: "uiTextHighContrast" | "red" = "uiTextHighContrast"
|
|
if (showMemberPrice) {
|
|
color = "red"
|
|
}
|
|
|
|
useEffect(() => {
|
|
setChosenBed(bedType)
|
|
|
|
if (breakfast) {
|
|
setChosenBreakfast(breakfast)
|
|
if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
|
|
setTotalPrice({
|
|
local: {
|
|
price: parsePrice(room.localPrice.price),
|
|
currency: room.localPrice.currency!,
|
|
},
|
|
euro: {
|
|
price: parsePrice(room.euroPrice.price),
|
|
currency: room.euroPrice.currency!,
|
|
},
|
|
})
|
|
} else {
|
|
setTotalPrice({
|
|
local: {
|
|
price:
|
|
parsePrice(room.localPrice.price) +
|
|
parsePrice(breakfast.localPrice.totalPrice),
|
|
currency: room.localPrice.currency!,
|
|
},
|
|
euro: {
|
|
price:
|
|
parsePrice(room.euroPrice.price) +
|
|
parsePrice(breakfast.requestedPrice.totalPrice),
|
|
currency: room.euroPrice.currency!,
|
|
},
|
|
})
|
|
}
|
|
}
|
|
}, [bedType, breakfast, room.localPrice, room.euroPrice, setTotalPrice])
|
|
|
|
useEffect(() => {
|
|
setTotalPrice({
|
|
local: {
|
|
price: parsePrice(room.localPrice.price),
|
|
currency: room.localPrice.currency!,
|
|
},
|
|
euro: {
|
|
price: parsePrice(room.euroPrice.price),
|
|
currency: room.euroPrice.currency!,
|
|
},
|
|
})
|
|
}, [room.localPrice, room.euroPrice, setTotalPrice])
|
|
|
|
return (
|
|
<section className={styles.summary}>
|
|
<header className={styles.header}>
|
|
<Subtitle className={styles.title} type="two">
|
|
{intl.formatMessage({ id: "Summary" })}
|
|
</Subtitle>
|
|
<Body className={styles.date} color="baseTextMediumContrast">
|
|
{dt(fromDate).locale(lang).format("ddd, D MMM")}
|
|
<ArrowRightIcon color="peach80" height={15} width={15} />
|
|
{dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
|
|
</Body>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
className={styles.chevronButton}
|
|
onClick={toggleSummaryOpen}
|
|
>
|
|
<ChevronDown height="20" width="20" />
|
|
</Button>
|
|
</header>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.addOns}>
|
|
<div>
|
|
<div className={styles.entry}>
|
|
<Body color="textHighContrast">{room.roomType}</Body>
|
|
<Caption color={color}>
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{
|
|
amount: intl.formatNumber(
|
|
parseInt(room.localPrice.price ?? "0")
|
|
),
|
|
currency: room.localPrice.currency,
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{ totalAdults: room.adults }
|
|
)}
|
|
</Caption>
|
|
{room.children?.length ? (
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "booking.children" },
|
|
{ totalChildren: room.children.length }
|
|
)}
|
|
</Caption>
|
|
) : null}
|
|
<Caption color="uiTextMediumContrast">
|
|
{room.cancellationText}
|
|
</Caption>
|
|
<Link color="burgundy" href="#" variant="underscored" size="small">
|
|
{intl.formatMessage({ id: "Rate details" })}
|
|
</Link>
|
|
</div>
|
|
|
|
{chosenBed ? (
|
|
<div className={styles.entry}>
|
|
<div>
|
|
<Body color="textHighContrast">{chosenBed.description}</Body>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Based on availability" })}
|
|
</Caption>
|
|
</div>
|
|
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "0", currency: room.localPrice.currency }
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
) : null}
|
|
|
|
{chosenBreakfast ? (
|
|
chosenBreakfast === BreakfastPackageEnum.NO_BREAKFAST ? (
|
|
<div className={styles.entry}>
|
|
<Body color="textHighContrast">
|
|
{intl.formatMessage({ id: "No breakfast" })}
|
|
</Body>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "0", currency: room.localPrice.currency }
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
) : (
|
|
<div className={styles.entry}>
|
|
<Body color="textHighContrast">
|
|
{intl.formatMessage({ id: "Breakfast buffet" })}
|
|
</Body>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{
|
|
amount: chosenBreakfast.localPrice.totalPrice,
|
|
currency: chosenBreakfast.localPrice.currency,
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
)
|
|
) : null}
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.total}>
|
|
<div className={styles.entry}>
|
|
<div>
|
|
<Body>
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{ id: "<b>Total price</b> (incl VAT)" },
|
|
{ b: (str) => <b>{str}</b> }
|
|
)}
|
|
</Body>
|
|
<Link color="burgundy" href="#" variant="underscored" size="small">
|
|
{intl.formatMessage({ id: "Price details" })}
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{
|
|
amount: intl.formatNumber(totalPrice.local.price),
|
|
currency: totalPrice.local.currency,
|
|
}
|
|
)}
|
|
</Body>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Approx." })}{" "}
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{
|
|
amount: intl.formatNumber(totalPrice.euro.price),
|
|
currency: totalPrice.euro.currency,
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|