155 lines
4.6 KiB
TypeScript
155 lines
4.6 KiB
TypeScript
import { dt } from "@/lib/dt"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import ToggleSidePeek from "./ToggleSidePeek"
|
|
|
|
import styles from "./summary.module.css"
|
|
|
|
// TEMP
|
|
const rooms = [
|
|
{
|
|
adults: 1,
|
|
type: "Cozy cabin",
|
|
},
|
|
]
|
|
|
|
export default async function Summary() {
|
|
const intl = await getIntl()
|
|
const lang = getLang()
|
|
const fromDate = dt().locale(lang).format("ddd, D MMM")
|
|
const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
|
|
const diff = dt(toDate).diff(fromDate, "days")
|
|
|
|
const totalAdults = rooms.reduce((total, room) => total + room.adults, 0)
|
|
|
|
const adults = intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{ totalAdults: totalAdults }
|
|
)
|
|
const nights = intl.formatMessage(
|
|
{ id: "booking.nights" },
|
|
{ totalNights: diff }
|
|
)
|
|
|
|
const addOns = [
|
|
{
|
|
price: intl.formatMessage({ id: "Included" }),
|
|
title: intl.formatMessage({ id: "King bed" }),
|
|
},
|
|
{
|
|
price: intl.formatMessage({ id: "Included" }),
|
|
title: intl.formatMessage({ id: "Breakfast buffet" }),
|
|
},
|
|
]
|
|
|
|
const mappedRooms = Array.from(
|
|
rooms
|
|
.reduce((acc, room) => {
|
|
const currentRoom = acc.get(room.type)
|
|
acc.set(room.type, {
|
|
total: currentRoom ? currentRoom.total + 1 : 1,
|
|
type: room.type,
|
|
})
|
|
return acc
|
|
}, new Map())
|
|
.values()
|
|
)
|
|
|
|
return (
|
|
<section className={styles.summary}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{mappedRooms.map(
|
|
(room, idx) =>
|
|
`${room.total} x ${room.type}${mappedRooms.length > 1 && idx + 1 !== mappedRooms.length ? ", " : ""}`
|
|
)}
|
|
</Body>
|
|
<Body className={styles.date} color="textMediumContrast">
|
|
{fromDate}
|
|
<ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
|
|
{toDate}
|
|
</Body>
|
|
|
|
<ToggleSidePeek />
|
|
</header>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.addOns}>
|
|
<div className={styles.entry}>
|
|
<Caption color="uiTextMediumContrast">
|
|
{`${nights}, ${adults}`}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "4536", currency: "SEK" }
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
{addOns.map((addOn) => (
|
|
<div className={styles.entry} key={addOn.title}>
|
|
<Caption color="uiTextMediumContrast">{addOn.title}</Caption>
|
|
<Caption color="uiTextHighContrast">{addOn.price}</Caption>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.total}>
|
|
<div>
|
|
<div className={styles.entry}>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Total incl VAT" })}
|
|
</Body>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "4686", currency: "SEK" }
|
|
)}
|
|
</Body>
|
|
</div>
|
|
<div className={styles.entry}>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Approx." })}
|
|
</Caption>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "455", currency: "EUR" }
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className={styles.entry}>
|
|
<Body color="red" textTransform="bold">
|
|
{intl.formatMessage({ id: "Member price" })}
|
|
</Body>
|
|
<Body color="red" textTransform="bold">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "4219", currency: "SEK" }
|
|
)}
|
|
</Body>
|
|
</div>
|
|
<div className={styles.entry}>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage({ id: "Approx." })}
|
|
</Caption>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{ amount: "412", currency: "EUR" }
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|