308 lines
10 KiB
TypeScript
308 lines
10 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
|
|
import {
|
|
ArrowRightIcon,
|
|
ChevronDownSmallIcon,
|
|
ChevronRightSmallIcon,
|
|
} from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Popover from "@/components/TempDesignSystem/Popover"
|
|
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 Modal from "../../Modal"
|
|
|
|
import styles from "./ui.module.css"
|
|
|
|
import type { SummaryProps } from "@/types/components/hotelReservation/summary"
|
|
import type { DetailsState } from "@/types/stores/enter-details"
|
|
|
|
export function storeSelector(state: DetailsState) {
|
|
return {
|
|
bedType: state.bedType,
|
|
booking: state.booking,
|
|
breakfast: state.breakfast,
|
|
join: state.guest.join,
|
|
membershipNo: state.guest.membershipNo,
|
|
packages: state.packages,
|
|
roomRate: state.roomRate,
|
|
roomPrice: state.roomPrice,
|
|
toggleSummaryOpen: state.actions.toggleSummaryOpen,
|
|
togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen,
|
|
totalPrice: state.totalPrice,
|
|
}
|
|
}
|
|
|
|
export default function SummaryUI({
|
|
cancellationText,
|
|
isMember,
|
|
rateDetails,
|
|
roomType,
|
|
}: SummaryProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
const {
|
|
bedType,
|
|
booking,
|
|
breakfast,
|
|
join,
|
|
membershipNo,
|
|
packages,
|
|
roomPrice,
|
|
roomRate,
|
|
toggleSummaryOpen,
|
|
togglePriceDetailsModalOpen,
|
|
totalPrice,
|
|
} = useEnterDetailsStore(storeSelector)
|
|
|
|
const adults = booking.rooms[0].adults
|
|
const children = booking.rooms[0].children
|
|
|
|
const memberPrice = roomRate.memberRate
|
|
? {
|
|
currency: roomRate.memberRate.localPrice.currency,
|
|
amount: roomRate.memberRate.localPrice.pricePerStay,
|
|
}
|
|
: null
|
|
|
|
const showMemberPrice = !!(isMember || join || membershipNo) && memberPrice
|
|
|
|
const diff = dt(booking.toDate).diff(booking.fromDate, "days")
|
|
|
|
const nights = intl.formatMessage(
|
|
{ id: "booking.nights" },
|
|
{ totalNights: diff }
|
|
)
|
|
|
|
function handleToggleSummary() {
|
|
if (toggleSummaryOpen) {
|
|
toggleSummaryOpen()
|
|
}
|
|
}
|
|
|
|
function handleTogglePriceDetailsModal() {
|
|
if (togglePriceDetailsModalOpen) {
|
|
togglePriceDetailsModalOpen()
|
|
}
|
|
}
|
|
|
|
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(booking.fromDate).locale(lang).format("ddd, D MMM")}
|
|
<ArrowRightIcon color="peach80" height={15} width={15} />
|
|
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
|
|
</Body>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
className={styles.chevronButton}
|
|
onClick={handleToggleSummary}
|
|
>
|
|
<ChevronDownSmallIcon height="20" width="20" />
|
|
</Button>
|
|
</header>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.addOns}>
|
|
<div>
|
|
<div className={styles.entry}>
|
|
<Body color="uiTextHighContrast">{roomType}</Body>
|
|
<Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
|
|
{intl.formatNumber(roomPrice.local.price, {
|
|
currency: roomPrice.local.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
<Caption color="uiTextMediumContrast">
|
|
{`${intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{ totalAdults: adults }
|
|
)}${
|
|
children?.length
|
|
? `, ${intl.formatMessage(
|
|
{ id: "booking.children" },
|
|
{ totalChildren: children.length }
|
|
)}`
|
|
: ""
|
|
}`}
|
|
</Caption>
|
|
<Caption color="uiTextMediumContrast">{cancellationText}</Caption>
|
|
<Popover
|
|
placement="bottom left"
|
|
triggerContent={
|
|
<Caption color="burgundy" type="underline">
|
|
{intl.formatMessage({ id: "Rate details" })}
|
|
</Caption>
|
|
}
|
|
>
|
|
<aside className={styles.rateDetailsPopover}>
|
|
<header>
|
|
<Caption type="bold">{cancellationText}</Caption>
|
|
</header>
|
|
{rateDetails?.map((detail, idx) => (
|
|
<Caption key={`rateDetails-${idx}`}>{detail}</Caption>
|
|
))}
|
|
</aside>
|
|
</Popover>
|
|
</div>
|
|
{packages
|
|
? packages.map((roomPackage) => (
|
|
<div className={styles.entry} key={roomPackage.code}>
|
|
<div>
|
|
<Body color="uiTextHighContrast">
|
|
{roomPackage.description}
|
|
</Body>
|
|
</div>
|
|
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatNumber(parseInt(roomPackage.localPrice.price), {
|
|
currency: roomPackage.localPrice.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
))
|
|
: null}
|
|
{bedType ? (
|
|
<div className={styles.entry}>
|
|
<div>
|
|
<Body color="uiTextHighContrast">{bedType.description}</Body>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Based on availability" })}
|
|
</Caption>
|
|
</div>
|
|
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatNumber(0, {
|
|
currency: roomPrice.local.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
) : null}
|
|
|
|
{breakfast === false ? (
|
|
<div className={styles.entry}>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "No breakfast" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatNumber(0, {
|
|
currency: roomPrice.local.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
) : null}
|
|
{breakfast ? (
|
|
<div>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "Breakfast buffet" })}
|
|
</Body>
|
|
<div className={styles.entry}>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{ totalAdults: adults }
|
|
)}
|
|
</Caption>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
|
|
currency: breakfast.localPrice.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
{children?.length ? (
|
|
<div className={styles.entry}>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "booking.children" },
|
|
{ totalChildren: children.length }
|
|
)}
|
|
</Caption>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatNumber(0, {
|
|
currency: breakfast.localPrice.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
) : null}
|
|
</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>
|
|
<Modal
|
|
trigger={
|
|
<Button intent="text" onPress={handleTogglePriceDetailsModal}>
|
|
<Caption color="burgundy">
|
|
{intl.formatMessage({ id: "Price details" })}
|
|
</Caption>
|
|
<ChevronRightSmallIcon
|
|
color="burgundy"
|
|
height="20px"
|
|
width="20px"
|
|
/>
|
|
</Button>
|
|
}
|
|
>
|
|
<div className={styles.modalContent}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu
|
|
risus quis varius quam quisque id diam vel. Rhoncus urna neque
|
|
viverra justo. Mattis aliquam faucibus purus in massa. Id cursus
|
|
metus aliquam eleifend mi in nulla posuere.
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
<div>
|
|
<Body textTransform="bold">
|
|
{intl.formatNumber(totalPrice.local.price, {
|
|
currency: totalPrice.local.currency,
|
|
style: "currency",
|
|
})}
|
|
</Body>
|
|
{totalPrice.requested && (
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Approx." })}{" "}
|
|
{intl.formatNumber(totalPrice.requested.price, {
|
|
currency: totalPrice.requested.currency,
|
|
style: "currency",
|
|
})}
|
|
</Caption>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
|
|
</div>
|
|
{!showMemberPrice && memberPrice ? (
|
|
<SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
|
|
) : null}
|
|
</section>
|
|
)
|
|
}
|