Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)
Chore/SW-2878 extract booking confirmation pag * chore(SW-2878): Moved booking confirmation page to booking-flow package * chore(SW-2878): Fixed promo styles as per design * chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
@@ -0,0 +1,12 @@
|
||||
.entry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.textDefault {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.textSecondary {
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import styles from "./breakfast.module.css"
|
||||
|
||||
import type { PackageSchema } from "@scandic-hotels/trpc/types/bookingConfirmation"
|
||||
|
||||
interface BreakfastProps {
|
||||
breakfast: PackageSchema | false | undefined
|
||||
breakfastIncluded: boolean
|
||||
guests: string
|
||||
}
|
||||
|
||||
export default function Breakfast({
|
||||
breakfast,
|
||||
breakfastIncluded,
|
||||
guests,
|
||||
}: BreakfastProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
const breakfastBuffet = intl.formatMessage({
|
||||
defaultMessage: "Breakfast buffet",
|
||||
})
|
||||
|
||||
if (breakfastIncluded || breakfast) {
|
||||
const price = breakfast
|
||||
? formatPrice(intl, breakfast.totalPrice, breakfast.currency)
|
||||
: intl.formatMessage({ defaultMessage: "Included" })
|
||||
return (
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.textDefault}>{breakfastBuffet}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p className={styles.textSecondary}>{guests}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.textDefault}>{price}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (breakfast === false) {
|
||||
const noBreakfast = intl.formatMessage({ defaultMessage: "No breakfast" })
|
||||
return (
|
||||
<div className={styles.entry}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.textDefault}>{breakfastBuffet}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.textDefault}>{noBreakfast}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
||||
|
||||
import styles from "./roomSkeletonLoader.module.css"
|
||||
|
||||
export default function RoomSkeletonLoader() {
|
||||
return (
|
||||
<div className={styles.room}>
|
||||
<SkeletonShimmer />
|
||||
<SkeletonShimmer width={"15%"} />
|
||||
<SkeletonShimmer width={"30%"} />
|
||||
<SkeletonShimmer width={"40%"} />
|
||||
<SkeletonShimmer />
|
||||
<SkeletonShimmer />
|
||||
<SkeletonShimmer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
"use client"
|
||||
|
||||
import { cx } from "class-variance-authority"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Modal from "@scandic-hotels/design-system/Modal"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { ChildBedTypeEnum } from "@scandic-hotels/trpc/enums/childBedTypeEnum"
|
||||
|
||||
import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
|
||||
import { getFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
|
||||
import Breakfast from "./Breakfast"
|
||||
import RoomSkeletonLoader from "./RoomSkeletonLoader"
|
||||
|
||||
import styles from "./room.module.css"
|
||||
|
||||
import type { Room } from "../../../../types/stores/booking-confirmation"
|
||||
|
||||
type BookingConfirmationReceiptRoomProps = {
|
||||
room: Room
|
||||
roomNumber: number
|
||||
roomCount: number
|
||||
}
|
||||
|
||||
export function ReceiptRoom({
|
||||
room,
|
||||
roomNumber,
|
||||
roomCount,
|
||||
}: BookingConfirmationReceiptRoomProps) {
|
||||
const intl = useIntl()
|
||||
const { currencyCode, isVatCurrency } = useBookingConfirmationStore(
|
||||
(state) => ({
|
||||
currencyCode: state.currencyCode,
|
||||
isVatCurrency: state.isVatCurrency,
|
||||
})
|
||||
)
|
||||
|
||||
if (!room) {
|
||||
return <RoomSkeletonLoader />
|
||||
}
|
||||
|
||||
const childBedCrib = room.childBedPreferences.find(
|
||||
(c) => c.bedType === ChildBedTypeEnum.Crib
|
||||
)
|
||||
|
||||
const childBedExtraBed = room.childBedPreferences.find(
|
||||
(c) => c.bedType === ChildBedTypeEnum.ExtraBed
|
||||
)
|
||||
|
||||
const adultsMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
|
||||
},
|
||||
{ totalAdults: room.adults }
|
||||
)
|
||||
|
||||
const guestsParts = [adultsMsg]
|
||||
if (room.childrenAges?.length) {
|
||||
const childrenMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalChildren, plural, one {# child} other {# children}}",
|
||||
},
|
||||
{ totalChildren: room.childrenAges.length }
|
||||
)
|
||||
guestsParts.push(childrenMsg)
|
||||
}
|
||||
|
||||
const guests = guestsParts.join(", ")
|
||||
const showDiscounted = room.rateDefinition.isMemberRate
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.room}>
|
||||
<div>
|
||||
{roomCount > 1 ? (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p className={styles.roomTitle}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{
|
||||
roomIndex: roomNumber,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{room.name}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div className={styles.additionalInformation}>
|
||||
<p>{guestsParts.join(", ")}</p>
|
||||
<p>{room.rateDefinition.cancellationText}</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.prices}>
|
||||
<p
|
||||
className={cx(styles.price, {
|
||||
[styles.discounted]: showDiscounted,
|
||||
})}
|
||||
>
|
||||
{room.formattedRoomCost}
|
||||
</p>
|
||||
{/* TODO: add original price, we're currently not receiving this value from API */}
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
{room.rateDefinition.generalTerms ? (
|
||||
<div className={styles.ctaWrapper}>
|
||||
<Modal
|
||||
trigger={
|
||||
<Button
|
||||
className={styles.termsButton}
|
||||
variant="Text"
|
||||
typography="Body/Supporting text (caption)/smBold"
|
||||
wrapping={false}
|
||||
>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Reservation policy",
|
||||
})}
|
||||
<MaterialIcon
|
||||
icon="chevron_right"
|
||||
size={20}
|
||||
color="CurrentColor"
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
title={
|
||||
(isVatCurrency
|
||||
? room.rateDefinition.cancellationText
|
||||
: room.rateDefinition.title) || ""
|
||||
}
|
||||
subtitle={
|
||||
room.rateDefinition.cancellationRule ===
|
||||
CancellationRuleEnum.CancellableBefore6PM
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "Pay later",
|
||||
})
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Pay now",
|
||||
})
|
||||
}
|
||||
>
|
||||
<div className={styles.terms}>
|
||||
{room.rateDefinition.generalTerms?.map((info) => (
|
||||
<Typography
|
||||
key={info}
|
||||
className={styles.termsText}
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
>
|
||||
<span>
|
||||
<MaterialIcon
|
||||
icon="check"
|
||||
color="Icon/Feedback/Success"
|
||||
size={20}
|
||||
className={styles.termsIcon}
|
||||
/>
|
||||
{info}
|
||||
</span>
|
||||
</Typography>
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{room.roomFeatures
|
||||
? room.roomFeatures.map((feature) => (
|
||||
<div className={styles.entry} key={feature.code}>
|
||||
<div>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.uiTextHighContrast}>
|
||||
{getFeatureDescription(
|
||||
feature.code,
|
||||
feature.description,
|
||||
intl
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.uiTextHighContrast}>
|
||||
{formatPrice(intl, feature.totalPrice, feature.currency)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
))
|
||||
: null}
|
||||
<div className={styles.entry}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.uiTextHighContrast}>{room.bedDescription}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.uiTextHighContrast}>
|
||||
{formatPrice(intl, 0, currencyCode)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{childBedCrib ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Crib (child) × {count}",
|
||||
},
|
||||
{ count: childBedCrib.quantity }
|
||||
)}
|
||||
</p>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p className={styles.uiTextHighContrast}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Subject to availability",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.prices}>
|
||||
<span className={styles.price}>
|
||||
{formatPrice(intl, 0, currencyCode)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Typography>
|
||||
) : null}
|
||||
{childBedExtraBed ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Extra bed (child) × {count}",
|
||||
},
|
||||
{
|
||||
count: childBedExtraBed.quantity,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.prices}>
|
||||
<span className={styles.price}>
|
||||
{formatPrice(intl, 0, currencyCode)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Typography>
|
||||
) : null}
|
||||
<Breakfast
|
||||
breakfast={room.breakfast}
|
||||
breakfastIncluded={room.breakfastIncluded}
|
||||
guests={guests}
|
||||
/>
|
||||
</div>
|
||||
<Divider color="Border/Divider/Subtle" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.room {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x15);
|
||||
overflow-y: auto;
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.roomTitle,
|
||||
.additionalInformation {
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.terms {
|
||||
margin-top: var(--Space-x3);
|
||||
margin-bottom: var(--Space-x3);
|
||||
}
|
||||
.termsText:nth-child(n) {
|
||||
display: flex;
|
||||
margin-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.terms .termsIcon {
|
||||
margin-right: var(--Space-x1);
|
||||
}
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.prices {
|
||||
justify-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: var(--Text-Default);
|
||||
|
||||
&.discounted {
|
||||
color: var(--Text-Accent-Primary);
|
||||
}
|
||||
}
|
||||
|
||||
.strikeThroughRate {
|
||||
text-decoration: line-through;
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.ctaWrapper {
|
||||
margin-top: var(--Space-x15);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.room {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client"
|
||||
|
||||
import { cx } from "class-variance-authority"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
|
||||
import PriceDetails from "../../PriceDetails"
|
||||
|
||||
import styles from "./totalPrice.module.css"
|
||||
|
||||
export default function TotalPrice() {
|
||||
const intl = useIntl()
|
||||
const { rooms, formattedTotalCost } = useBookingConfirmationStore(
|
||||
(state) => ({
|
||||
bookingCode: state.bookingCode,
|
||||
rooms: state.rooms,
|
||||
formattedTotalCost: state.formattedTotalCost,
|
||||
})
|
||||
)
|
||||
|
||||
const hasAllRoomsLoaded = rooms.every((room) => room)
|
||||
const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode
|
||||
const isMemberRate = rooms.some((room) => room?.rateDefinition.isMemberRate)
|
||||
const showDiscounted = bookingCode || isMemberRate
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider color="Border/Divider/Subtle" />
|
||||
<div className={styles.price}>
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "<b>Total price</b> (incl VAT)",
|
||||
},
|
||||
{
|
||||
b: (str) => (
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span>{str}</span>
|
||||
</Typography>
|
||||
),
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
{/* TODO: Add approx price, we're currently not receiving this value from API */}
|
||||
</div>
|
||||
<div className={styles.prices}>
|
||||
{hasAllRoomsLoaded ? (
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span
|
||||
className={cx(styles.price, {
|
||||
[styles.discounted]: showDiscounted,
|
||||
})}
|
||||
>
|
||||
{formattedTotalCost}
|
||||
</span>
|
||||
</Typography>
|
||||
) : (
|
||||
<SkeletonShimmer width={"25%"} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.ctaWrapper}>
|
||||
{hasAllRoomsLoaded ? (
|
||||
<PriceDetails />
|
||||
) : (
|
||||
<SkeletonShimmer width={"100%"} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{bookingCode && <BookingCodeChip bookingCode={bookingCode} alignCenter />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.entry {
|
||||
display: flex;
|
||||
gap: var(--Space-x05);
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--Space-x15);
|
||||
}
|
||||
|
||||
.prices {
|
||||
justify-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: var(--Text-Default);
|
||||
|
||||
&.discounted {
|
||||
color: var(--Text-Accent-Primary);
|
||||
}
|
||||
}
|
||||
|
||||
.strikeThroughRate {
|
||||
text-decoration: line-through;
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.approxPrice {
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.ctaWrapper {
|
||||
margin-top: var(--Space-x15);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useLang from "../../../hooks/useLang"
|
||||
import { useBookingConfirmationStore } from "../../../stores/booking-confirmation"
|
||||
import { ReceiptRoom as Room } from "./Room"
|
||||
import TotalPrice from "./TotalPrice"
|
||||
|
||||
import styles from "./receipt.module.css"
|
||||
|
||||
export function Receipt() {
|
||||
const lang = useLang()
|
||||
const intl = useIntl()
|
||||
const { rooms, fromDate, toDate } = useBookingConfirmationStore((state) => ({
|
||||
rooms: state.rooms,
|
||||
fromDate: state.fromDate,
|
||||
toDate: state.toDate,
|
||||
}))
|
||||
|
||||
const totalNights = dt(toDate).diff(fromDate, "days")
|
||||
|
||||
const nights = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
|
||||
},
|
||||
{ totalNights }
|
||||
)
|
||||
|
||||
const filteredRooms = rooms.filter(
|
||||
(room): room is NonNullable<typeof room> => !!room
|
||||
)
|
||||
|
||||
return (
|
||||
<section className={styles.receipt}>
|
||||
<header>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h3 className={styles.heading}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Booking summary",
|
||||
})}
|
||||
</h3>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p className={styles.dates}>
|
||||
{dt(fromDate).locale(lang).format(longDateFormat[lang])}
|
||||
<MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{dt(toDate).locale(lang).format(longDateFormat[lang])} ({nights})
|
||||
</p>
|
||||
</Typography>
|
||||
</header>
|
||||
|
||||
<Divider color="Border/Divider/Subtle" />
|
||||
|
||||
{filteredRooms.map((room, idx) => (
|
||||
<Room
|
||||
key={room ? room.confirmationNumber : `loader-${idx}`}
|
||||
room={room}
|
||||
roomNumber={idx + 1}
|
||||
roomCount={rooms.length}
|
||||
/>
|
||||
))}
|
||||
|
||||
<TotalPrice />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.receipt {
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.dates {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x1);
|
||||
justify-content: flex-start;
|
||||
color: var(--Text-Accent-Secondary);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.receipt {
|
||||
padding: var(--Space-x3);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user