388 lines
12 KiB
TypeScript
388 lines
12 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,
|
||
CheckIcon,
|
||
ChevronDownSmallIcon,
|
||
ChevronRightSmallIcon,
|
||
} from "@/components/Icons"
|
||
import Modal from "@/components/Modal"
|
||
import Button from "@/components/TempDesignSystem/Button"
|
||
import Divider from "@/components/TempDesignSystem/Divider"
|
||
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 { formatPrice } from "@/utils/numberFormatting"
|
||
|
||
import PriceDetailsTable from "../PriceDetailsTable"
|
||
|
||
import styles from "./ui.module.css"
|
||
|
||
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
|
||
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,
|
||
vat: state.vat,
|
||
}
|
||
}
|
||
|
||
export default function SummaryUI({
|
||
cancellationText,
|
||
isMember,
|
||
rateDetails,
|
||
roomType,
|
||
breakfastIncluded,
|
||
}: SummaryProps) {
|
||
const intl = useIntl()
|
||
const lang = useLang()
|
||
|
||
const {
|
||
bedType,
|
||
booking,
|
||
breakfast,
|
||
join,
|
||
membershipNo,
|
||
packages,
|
||
roomPrice,
|
||
roomRate,
|
||
toggleSummaryOpen,
|
||
togglePriceDetailsModalOpen,
|
||
totalPrice,
|
||
vat,
|
||
} = useEnterDetailsStore(storeSelector)
|
||
|
||
// TODO: Update for Multiroom later
|
||
const adults = booking.rooms[0].adults
|
||
const children = booking.rooms[0].children
|
||
|
||
const childrenBeds = children?.reduce(
|
||
(acc, value) => {
|
||
const bedType = Number(value.bed)
|
||
if (bedType === ChildBedMapEnum.IN_ADULTS_BED) {
|
||
return acc
|
||
}
|
||
const count = acc.get(bedType) ?? 0
|
||
acc.set(bedType, count + 1)
|
||
return acc
|
||
},
|
||
new Map<ChildBedMapEnum, number>([
|
||
[ChildBedMapEnum.IN_CRIB, 0],
|
||
[ChildBedMapEnum.IN_EXTRA_BED, 0],
|
||
])
|
||
)
|
||
|
||
const childBedCrib = childrenBeds?.get(ChildBedMapEnum.IN_CRIB)
|
||
const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED)
|
||
|
||
const memberPrice = roomRate.memberRate
|
||
? {
|
||
currency: roomRate.memberRate.localPrice.currency,
|
||
pricePerNight: roomRate.memberRate.localPrice.pricePerNight,
|
||
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: "{totalNights, plural, one {# night} other {# nights}}" },
|
||
{ totalNights: diff }
|
||
)
|
||
|
||
function handleToggleSummary() {
|
||
if (toggleSummaryOpen) {
|
||
toggleSummaryOpen()
|
||
}
|
||
}
|
||
|
||
function handleTogglePriceDetailsModal() {
|
||
if (togglePriceDetailsModalOpen) {
|
||
togglePriceDetailsModalOpen()
|
||
}
|
||
}
|
||
|
||
const adultsMsg = intl.formatMessage(
|
||
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
|
||
{ totalAdults: adults }
|
||
)
|
||
|
||
const guestsParts = [adultsMsg]
|
||
if (children?.length) {
|
||
const childrenMsg = intl.formatMessage(
|
||
{
|
||
id: "{totalChildren, plural, one {# child} other {# children}}",
|
||
},
|
||
{ totalChildren: children.length }
|
||
)
|
||
guestsParts.push(childrenMsg)
|
||
}
|
||
|
||
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"}>
|
||
{formatPrice(
|
||
intl,
|
||
roomPrice.perStay.local.price,
|
||
roomPrice.perStay.local.currency
|
||
)}
|
||
</Body>
|
||
</div>
|
||
<Caption color="uiTextMediumContrast">
|
||
{guestsParts.join(", ")}
|
||
</Caption>
|
||
<Caption color="uiTextMediumContrast">{cancellationText}</Caption>
|
||
<Modal
|
||
trigger={
|
||
<Button intent="text">
|
||
<Caption color="burgundy" type="underline">
|
||
{intl.formatMessage({ id: "Rate details" })}
|
||
</Caption>
|
||
</Button>
|
||
}
|
||
title={cancellationText}
|
||
>
|
||
<div className={styles.terms}>
|
||
{rateDetails?.map((info) => (
|
||
<Body
|
||
key={info}
|
||
color="uiTextHighContrast"
|
||
className={styles.termsText}
|
||
>
|
||
<CheckIcon
|
||
color="uiSemanticSuccess"
|
||
width={20}
|
||
height={20}
|
||
className={styles.termsIcon}
|
||
></CheckIcon>
|
||
{info}
|
||
</Body>
|
||
))}
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
{packages
|
||
? packages.map((roomPackage) => (
|
||
<div className={styles.entry} key={roomPackage.code}>
|
||
<div>
|
||
<Body color="uiTextHighContrast">
|
||
{roomPackage.description}
|
||
</Body>
|
||
</div>
|
||
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(
|
||
intl,
|
||
parseInt(roomPackage.localPrice.price),
|
||
roomPackage.localPrice.currency
|
||
)}
|
||
</Body>
|
||
</div>
|
||
))
|
||
: null}
|
||
{bedType ? (
|
||
<div className={styles.entry}>
|
||
<Body color="uiTextHighContrast">{bedType.description}</Body>
|
||
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
|
||
</Body>
|
||
</div>
|
||
) : null}
|
||
{childBedCrib ? (
|
||
<div className={styles.entry}>
|
||
<div>
|
||
<Body color="uiTextHighContrast">
|
||
{intl.formatMessage(
|
||
{ id: "Crib (child) × {count}" },
|
||
{ count: childBedCrib }
|
||
)}
|
||
</Body>
|
||
<Caption color="uiTextMediumContrast">
|
||
{intl.formatMessage({ id: "Based on availability" })}
|
||
</Caption>
|
||
</div>
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
|
||
</Body>
|
||
</div>
|
||
) : null}
|
||
{childBedExtraBed ? (
|
||
<div className={styles.entry}>
|
||
<div>
|
||
<Body color="uiTextHighContrast">
|
||
{intl.formatMessage(
|
||
{ id: "Extra bed (child) × {count}" },
|
||
{
|
||
count: childBedExtraBed,
|
||
}
|
||
)}
|
||
</Body>
|
||
</div>
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
|
||
</Body>
|
||
</div>
|
||
) : null}
|
||
{breakfastIncluded ? (
|
||
<div className={styles.entry}>
|
||
<Body color="uiTextHighContrast">
|
||
{intl.formatMessage({ id: "Breakfast included" })}
|
||
</Body>
|
||
</div>
|
||
) : breakfast === false ? (
|
||
<div className={styles.entry}>
|
||
<Body color="uiTextHighContrast">
|
||
{intl.formatMessage({ id: "No breakfast" })}
|
||
</Body>
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(intl, 0, roomPrice.perStay.local.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: "{totalAdults, plural, one {# adult} other {# adults}}",
|
||
},
|
||
{ totalAdults: adults }
|
||
)}
|
||
</Caption>
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(
|
||
intl,
|
||
parseInt(breakfast.localPrice.totalPrice),
|
||
breakfast.localPrice.currency
|
||
)}
|
||
</Body>
|
||
</div>
|
||
{children?.length ? (
|
||
<div className={styles.entry}>
|
||
<Caption color="uiTextMediumContrast">
|
||
{intl.formatMessage(
|
||
{
|
||
id: "{totalChildren, plural, one {# child} other {# children}}",
|
||
},
|
||
{ totalChildren: children.length }
|
||
)}
|
||
</Caption>
|
||
<Body color="uiTextHighContrast">
|
||
{formatPrice(intl, 0, breakfast.localPrice.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
|
||
title={intl.formatMessage({ id: "Price details" })}
|
||
trigger={
|
||
<Button intent="text" onPress={handleTogglePriceDetailsModal}>
|
||
<Caption color="burgundy">
|
||
{intl.formatMessage({ id: "Price details" })}
|
||
</Caption>
|
||
<ChevronRightSmallIcon
|
||
color="burgundy"
|
||
height="20px"
|
||
width="20px"
|
||
/>
|
||
</Button>
|
||
}
|
||
>
|
||
<PriceDetailsTable roomType={roomType} />
|
||
</Modal>
|
||
</div>
|
||
<div>
|
||
<Body textTransform="bold">
|
||
{formatPrice(
|
||
intl,
|
||
totalPrice.local.price,
|
||
totalPrice.local.currency
|
||
)}
|
||
</Body>
|
||
{totalPrice.requested && (
|
||
<Caption color="uiTextMediumContrast">
|
||
{intl.formatMessage(
|
||
{ id: "Approx. {value}" },
|
||
{
|
||
value: formatPrice(
|
||
intl,
|
||
totalPrice.requested.price,
|
||
totalPrice.requested.currency
|
||
),
|
||
}
|
||
)}
|
||
</Caption>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
|
||
</div>
|
||
{!showMemberPrice && memberPrice ? (
|
||
<SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
|
||
) : null}
|
||
</section>
|
||
)
|
||
}
|