scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1813 (pull request #1516)

Browse Source 
Feat/SW-1813

* feat(SW-1652): handle linkedReservations fetching

* feat: add linkedReservation retry functionality

* chore: align naming

* feat(SW-1813): Add booking confirmation PriceDetailsModal


Approved-by: Simon.Emanuelsson
This commit is contained in:
Arvid Norlin
2025-03-14 13:49:22 +00:00
parent 66682be4d2
commit 540402b969
21 changed files with 414 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/__mocks__/hotelReservation/index.ts
View File

@@ -1,8 +1,8 @@
import { BedTypeEnum } from "@/constants/booking" import { BedTypeEnum } from "@/constants/booking"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums" import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType" import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { import type {
DetailsSchema, DetailsSchema,
RoomPrice, RoomPrice,

22
apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
View File

@@ -4,9 +4,7 @@ import { useIntl } from "react-intl"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import { CreditCardAddIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting" import { formatPrice } from "@/utils/numberFormatting"
@@ -16,10 +14,11 @@ import styles from "./paymentDetails.module.css"
export default function PaymentDetails() { export default function PaymentDetails() {
const intl = useIntl() const intl = useIntl()
const rooms = useBookingConfirmationStore((state) => state.rooms) const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
const currencyCode = useBookingConfirmationStore( rooms: state.rooms,
(state) => state.currencyCode currencyCode: state.currencyCode,
) }))
const hasAllRoomsLoaded = rooms.every((room) => room) const hasAllRoomsLoaded = rooms.every((room) => room)
const grandTotal = rooms.reduce((acc, room) => { const grandTotal = rooms.reduce((acc, room) => {
const reservationTotalPrice = room?.totalPrice || 0 const reservationTotalPrice = room?.totalPrice || 0
@@ -45,17 +44,6 @@ export default function PaymentDetails() {
<SkeletonShimmer width={"100%"} /> <SkeletonShimmer width={"100%"} />
)} )}
</div> </div>
<Button
className={styles.btn}
intent="text"
size="small"
theme="base"
variant="icon"
wrapping
>
<CreditCardAddIcon />
{intl.formatMessage({ id: "Save card to profile" })}
</Button>
</div> </div>
) )
} }

233
apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx Normal file
View File

@@ -0,0 +1,233 @@
"use client"
import React from "react"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import { PriceTagIcon } from "@/components/Icons"
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./priceDetailsModal.module.css"
function Row({
label,
value,
bold,
}: {
label: string
value: string
bold?: boolean
}) {
return (
<tr className={styles.row}>
<td>
<Caption type={bold ? "bold" : undefined}>{label}</Caption>
</td>
<td className={styles.price}>
<Caption type={bold ? "bold" : undefined}>{value}</Caption>
</td>
</tr>
)
}
function TableSection({ children }: React.PropsWithChildren) {
return <tbody className={styles.tableSection}>{children}</tbody>
}
function TableSectionHeader({
title,
subtitle,
}: {
title: string
subtitle?: string
}) {
return (
<tr>
<th colSpan={2}>
<Body>{title}</Body>
{subtitle ? <Body>{subtitle}</Body> : null}
</th>
</tr>
)
}
export default function PriceDetailsModal() {
const intl = useIntl()
const lang = useLang()
const { rooms, currencyCode, vat, fromDate, toDate, bookingCode } =
useBookingConfirmationStore((state) => ({
rooms: state.rooms,
currencyCode: state.currencyCode,
vat: state.vat,
fromDate: state.fromDate,
toDate: state.toDate,
bookingCode: state.bookingCode,
}))
if (!rooms[0]) {
return null
}
const bookingTotal = rooms.reduce(
(acc, room) => {
if (room) {
return {
price: acc.price + room.totalPrice,
priceExVat: acc.priceExVat + room.totalPriceExVat,
vatAmount: acc.vatAmount + room.vatAmount,
}
}
return acc
},
{ price: 0, priceExVat: 0, vatAmount: 0 }
)
const diff = dt(toDate).diff(fromDate, "days")
const nights = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{ totalNights: diff }
)
const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
-
${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
return (
<Modal
title={intl.formatMessage({ id: "Price details" })}
trigger={
<Button intent="text">
<Caption color="burgundy">
{intl.formatMessage({ id: "Price details" })}
</Caption>
<ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
</Button>
}
>
<table className={styles.priceDetailsTable}>
{rooms.map((room, idx) => {
return room ? (
<React.Fragment key={idx}>
<TableSection>
{rooms.length > 1 && (
<Body textTransform="bold">
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{ roomIndex: idx + 1 }
)}
</Body>
)}
<TableSectionHeader title={room.name} subtitle={duration} />
{room.roomFeatures
? room.roomFeatures.map((feature) => (
<Row
key={feature.code}
label={feature.description}
value={formatPrice(
intl,
feature.totalPrice,
currencyCode
)}
/>
))
: null}
{room.bedDescription ? (
<Row
label={room.bedDescription}
value={formatPrice(intl, 0, currencyCode)}
/>
) : null}
<Row
bold
label={intl.formatMessage({ id: "Room charge" })}
value={formatPrice(intl, room.roomPrice, currencyCode)}
/>
</TableSection>
{room.breakfast ? (
<TableSection>
<Row
label={intl.formatMessage(
{
id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
},
{ totalAdults: room.adults, totalBreakfasts: diff }
)}
value={formatPrice(
intl,
room.breakfast.unitPrice * room.adults,
currencyCode
)}
/>
{room.children ? (
<Row
label={intl.formatMessage(
{
id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
},
{
totalChildren: room.children,
totalBreakfasts: diff,
}
)}
value={formatPrice(intl, 0, currencyCode)}
/>
) : null}
<Row
bold
label={intl.formatMessage({
id: "Breakfast charge",
})}
value={formatPrice(
intl,
room.breakfast.totalPrice * room.adults,
currencyCode
)}
/>
</TableSection>
) : null}
</React.Fragment>
) : null
})}
<TableSection>
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
<Row
label={intl.formatMessage({ id: "Price excluding VAT" })}
value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
/>
<Row
label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
/>
<tr className={styles.row}>
<td>
<Body textTransform="bold">
{intl.formatMessage({ id: "Price including VAT" })}
</Body>
</td>
<td className={styles.price}>
<Body textTransform="bold">
{formatPrice(intl, bookingTotal.price, currencyCode)}
</Body>
</td>
</tr>
{bookingCode && (
<tr className={styles.row}>
<td>
<PriceTagIcon />
{bookingCode}
</td>
<td></td>
</tr>
)}
</TableSection>
</table>
</Modal>
)
}

36
apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css Normal file
View File

@@ -0,0 +1,36 @@
.priceDetailsTable {
border-collapse: collapse;
width: 100%;
}
.price {
text-align: end;
}
.tableSection {
display: flex;
gap: var(--Spacing-x-half);
flex-direction: column;
width: 100%;
}
.tableSection:has(tr > th) {
padding-top: var(--Spacing-x2);
}
.tableSection:has(tr > th):not(:first-of-type) {
border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
.tableSection:not(:last-child) {
padding-bottom: var(--Spacing-x2);
}
.row {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.priceDetailsTable {
min-width: 512px;
}
}

73
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
View File

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { CancellationRuleEnum } from "@/constants/booking" import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons" import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
@@ -23,14 +23,23 @@ export default function ReceiptRoom({
roomIndex, roomIndex,
}: BookingConfirmationReceiptRoomProps) { }: BookingConfirmationReceiptRoomProps) {
const intl = useIntl() const intl = useIntl()
const room = useBookingConfirmationStore((state) => state.rooms[roomIndex]) const { room, currencyCode } = useBookingConfirmationStore((state) => ({
const currencyCode = useBookingConfirmationStore( room: state.rooms[roomIndex],
(state) => state.currencyCode currencyCode: state.currencyCode,
) }))
if (!room) { if (!room) {
return <RoomSkeletonLoader /> return <RoomSkeletonLoader />
} }
const childBedCrib = room.childBedPreferences.find(
(c) => c.bedType === ChildBedTypeEnum.Crib
)
const childBedExtraBed = room.childBedPreferences.find(
(c) => c.bedType === ChildBedTypeEnum.ExtraBed
)
return ( return (
<article className={styles.room}> <article className={styles.room}>
<header className={styles.roomHeader}> <header className={styles.roomHeader}>
@@ -99,23 +108,71 @@ export default function ReceiptRoom({
</div> </div>
</Modal> </Modal>
</header> </header>
{room.roomFeatures
? room.roomFeatures.map((feature) => (
<div className={styles.entry} key={feature.code}>
<div>
<Body color="uiTextHighContrast">{feature.description}</Body>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, feature.totalPrice, feature.currency)}
</Body>
</div>
))
: null}
<div className={styles.entry}> <div className={styles.entry}>
<Body color="uiTextHighContrast">{room.bedDescription}</Body> <Body color="uiTextHighContrast">{room.bedDescription}</Body>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)} {formatPrice(intl, 0, currencyCode)}
</Body> </Body>
</div> </div>
{childBedCrib ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Crib (child) × {count}" },
{ count: childBedCrib.quantity }
)}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Based on availability" })}
</Caption>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)}
</Body>
</div>
) : null}
{childBedExtraBed ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Extra bed (child) × {count}" },
{
count: childBedExtraBed.quantity,
}
)}
</Body>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)}
</Body>
</div>
) : null}
<div className={styles.entry}> <div className={styles.entry}>
<Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body> <Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
{(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? ( {(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? (
<Body color="red">{intl.formatMessage({ id: "Included" })}</Body> <Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
) : null} ) : null}
{room.selectedBreakfast ? ( {room.breakfast ? (
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{formatPrice( {formatPrice(
intl, intl,
room.selectedBreakfast.totalPrice, room.breakfast.totalPrice * room.adults,
room.selectedBreakfast.currency room.breakfast.currency
)} )}
</Body> </Body>
) : null} ) : null}

27
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
View File

@@ -4,21 +4,22 @@ import { useIntl } from "react-intl"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import { ChevronRightSmallIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting" import { formatPrice } from "@/utils/numberFormatting"
import PriceDetailsModal from "../../PriceDetailsModal"
import styles from "./totalPrice.module.css" import styles from "./totalPrice.module.css"
export default function TotalPrice() { export default function TotalPrice() {
const intl = useIntl() const intl = useIntl()
const rooms = useBookingConfirmationStore((state) => state.rooms) const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
const currencyCode = useBookingConfirmationStore( rooms: state.rooms,
(state) => state.currencyCode currencyCode: state.currencyCode,
) }))
const hasAllRoomsLoaded = rooms.every((room) => room) const hasAllRoomsLoaded = rooms.every((room) => room)
const grandTotal = rooms.reduce((acc, room) => { const grandTotal = rooms.reduce((acc, room) => {
const reservationTotalPrice = room?.totalPrice || 0 const reservationTotalPrice = room?.totalPrice || 0
@@ -42,19 +43,7 @@ export default function TotalPrice() {
)} )}
</div> </div>
{hasAllRoomsLoaded ? ( {hasAllRoomsLoaded ? (
<div className={styles.entry}> <PriceDetailsModal />
<Button
className={styles.btn}
intent="text"
size="small"
theme="base"
variant="icon"
wrapping
>
{intl.formatMessage({ id: "Price details" })}
<ChevronRightSmallIcon />
</Button>
</div>
) : ( ) : (
<div className={styles.priceDetailsLoader}> <div className={styles.priceDetailsLoader}>
<SkeletonShimmer width={"100%"} /> <SkeletonShimmer width={"100%"} />

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
View File

@@ -114,12 +114,16 @@ export default async function BookingConfirmation({
return ( return (
<BookingConfirmationProvider <BookingConfirmationProvider
bookingCode={booking.bookingCode}
currencyCode={booking.currencyCode} currencyCode={booking.currencyCode}
fromDate={booking.checkInDate}
toDate={booking.checkOutDate}
rooms={[ rooms={[
mapRoomState(booking, room), mapRoomState(booking, room),
// null represents "known but not yet fetched rooms" and is used to render placeholders correctly // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
...Array(booking.linkedReservations.length).fill(null), ...Array(booking.linkedReservations.length).fill(null),
]} ]}
vat={booking.vatPercentage}
> >
<Confirmation booking={booking} hotel={hotel} room={room}> <Confirmation booking={booking} hotel={hotel} room={room}>
<div className={styles.booking}> <div className={styles.booking}>

9
apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
View File

@@ -6,24 +6,29 @@ export function mapRoomState(
booking: BookingConfirmationSchema, booking: BookingConfirmationSchema,
room: BookingConfirmationRoom room: BookingConfirmationRoom
) { ) {
const selectedBreakfast = booking.packages.find( const breakfast = booking.packages.find(
(pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
) )
const breakfastIncluded = booking.packages.some( const breakfastIncluded = booking.packages.some(
(pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
) )
return { return {
adults: booking.adults, adults: booking.adults,
bedDescription: room.bedType.description, bedDescription: room.bedType.description,
breakfast,
breakfastIncluded, breakfastIncluded,
children: booking.childrenAges.length, children: booking.childrenAges.length,
childBedPreferences: booking.childBedPreferences,
confirmationNumber: booking.confirmationNumber, confirmationNumber: booking.confirmationNumber,
fromDate: booking.checkInDate, fromDate: booking.checkInDate,
name: room.name, name: room.name,
rateDefinition: booking.rateDefinition, rateDefinition: booking.rateDefinition,
roomFeatures: booking.packages.filter((p) => p.type === "RoomFeature"),
roomPrice: booking.roomPrice, roomPrice: booking.roomPrice,
selectedBreakfast,
toDate: booking.checkOutDate, toDate: booking.checkOutDate,
totalPrice: booking.totalPrice, totalPrice: booking.totalPrice,
totalPriceExVat: booking.totalPriceExVat,
vatAmount: booking.vatAmount,
} }
} }

2
apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx
View File

@@ -15,7 +15,7 @@ import { breakfastFormSchema } from "./schema"
import styles from "./breakfast.module.css" import styles from "./breakfast.module.css"
import type { BreakfastFormSchema } from "@/types/components/hotelReservation/enterDetails/breakfast" import type { BreakfastFormSchema } from "@/types/components/hotelReservation/breakfast"
import { BreakfastPackageEnum } from "@/types/enums/breakfast" import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default function Breakfast() { export default function Breakfast() {

12
apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import React from "react" import { Fragment } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
@@ -13,8 +13,8 @@ import { formatPrice } from "@/utils/numberFormatting"
import styles from "./priceDetailsTable.module.css" import styles from "./priceDetailsTable.module.css"
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType" import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details" import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
import type { Price } from "@/types/components/hotelReservation/price" import type { Price } from "@/types/components/hotelReservation/price"
import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate" import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -106,7 +106,7 @@ export default function PriceDetailsTable({
return ( return (
<table className={styles.priceDetailsTable}> <table className={styles.priceDetailsTable}>
{rooms.map((room, idx) => ( {rooms.map((room, idx) => (
<React.Fragment key={idx}> <Fragment key={idx}>
<TableSection> <TableSection>
{rooms.length > 1 && ( {rooms.length > 1 && (
<Body textTransform="bold"> <Body textTransform="bold">
@@ -134,8 +134,8 @@ export default function PriceDetailsTable({
label={feature.description} label={feature.description}
value={formatPrice( value={formatPrice(
intl, intl,
0, parseInt(feature.localPrice.price),
room.roomPrice.perStay.local.currency feature.localPrice.currency
)} )}
/> />
)) ))
@@ -209,7 +209,7 @@ export default function PriceDetailsTable({
/> />
</TableSection> </TableSection>
) : null} ) : null}
</React.Fragment> </Fragment>
))} ))}
<TableSection> <TableSection>
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} /> <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />

2
apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
View File

@@ -8,8 +8,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
import PriceDetailsTable from "./PriceDetailsTable" import PriceDetailsTable from "./PriceDetailsTable"
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType" import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details" import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
import type { Price } from "@/types/components/hotelReservation/price" import type { Price } from "@/types/components/hotelReservation/price"
import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate" import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"

13
apps/scandic-web/providers/BookingConfirmationProvider.tsx
View File

@@ -10,14 +10,25 @@ import type { BookingConfirmationStore } from "@/types/contexts/booking-confirma
import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation" import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation"
export default function BookingConfirmationProvider({ export default function BookingConfirmationProvider({
bookingCode,
children, children,
currencyCode, currencyCode,
fromDate,
toDate,
rooms, rooms,
vat,
}: BookingConfirmationProviderProps) { }: BookingConfirmationProviderProps) {
const storeRef = useRef<BookingConfirmationStore>() const storeRef = useRef<BookingConfirmationStore>()
if (!storeRef.current) { if (!storeRef.current) {
const initialData = { rooms, currencyCode } const initialData = {
bookingCode,
currencyCode,
fromDate,
toDate,
rooms,
vat,
}
storeRef.current = createBookingConfirmationStore(initialData) storeRef.current = createBookingConfirmationStore(initialData)
} }

2
apps/scandic-web/server/routers/booking/output.ts
View File

@@ -85,7 +85,7 @@ export type Guest = z.output<typeof guestSchema>
export const packageSchema = z export const packageSchema = z
.object({ .object({
type: z.string().nullable(), type: z.string().nullable(),
description: z.string().nullable().default(""), description: nullableStringValidator,
code: z.string().nullable().default(""), code: z.string().nullable().default(""),
price: z.object({ price: z.object({
unit: z.number().int().nullable(), unit: z.number().int().nullable(),

4
apps/scandic-web/stores/booking-confirmation/index.ts
View File

@@ -11,7 +11,11 @@ import type {
export function createBookingConfirmationStore(initialState: InitialState) { export function createBookingConfirmationStore(initialState: InitialState) {
return create<BookingConfirmationState>()((set) => ({ return create<BookingConfirmationState>()((set) => ({
rooms: initialState.rooms, rooms: initialState.rooms,
bookingCode: initialState.bookingCode,
currencyCode: initialState.currencyCode, currencyCode: initialState.currencyCode,
fromDate: initialState.fromDate,
toDate: initialState.toDate,
vat: initialState.vat,
actions: { actions: {
setRoom: (room, idx) => { setRoom: (room, idx) => {
set((state) => { set((state) => {

2
apps/scandic-web/stores/enter-details/index.ts
View File

@@ -19,7 +19,7 @@ import {
writeToSessionStorage, writeToSessionStorage,
} from "./helpers" } from "./helpers"
import type { BreakfastPackages } from "@/types/components/hotelReservation/enterDetails/breakfast" import type { BreakfastPackages } from "@/types/components/hotelReservation/breakfast"
import { StepEnum } from "@/types/enums/step" import { StepEnum } from "@/types/enums/step"
import type { import type {
DetailsState, DetailsState,

0
apps/scandic-web/types/components/hotelReservation/enterDetails/breakfast.ts → apps/scandic-web/types/components/hotelReservation/breakfast.ts
View File

2
apps/scandic-web/types/contexts/details/room.ts
View File

@@ -1,5 +1,5 @@
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType" import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details" import type { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
import type { StepEnum } from "@/types/enums/step" import type { StepEnum } from "@/types/enums/step"
import type { RoomState } from "@/types/stores/enter-details" import type { RoomState } from "@/types/stores/enter-details"

4
apps/scandic-web/types/providers/booking-confirmation.ts
View File

@@ -2,6 +2,10 @@ import type { Room } from "../stores/booking-confirmation"
export interface BookingConfirmationProviderProps export interface BookingConfirmationProviderProps
extends React.PropsWithChildren { extends React.PropsWithChildren {
bookingCode: string | null
currencyCode: string currencyCode: string
fromDate: Date
rooms: (Room | null)[] rooms: (Room | null)[]
toDate: Date
vat: number
} }

2
apps/scandic-web/types/providers/enter-details.ts
View File

@@ -1,6 +1,6 @@
import type { Room } from "@/types/providers/details/room" import type { Room } from "@/types/providers/details/room"
import type { SafeUser } from "@/types/user" import type { SafeUser } from "@/types/user"
import type { BreakfastPackages } from "../components/hotelReservation/enterDetails/breakfast" import type { BreakfastPackages } from "../components/hotelReservation/breakfast"
import type { SelectRateSearchParams } from "../components/hotelReservation/selectRate/selectRate" import type { SelectRateSearchParams } from "../components/hotelReservation/selectRate/selectRate"
export interface DetailsProviderProps extends React.PropsWithChildren { export interface DetailsProviderProps extends React.PropsWithChildren {

20
apps/scandic-web/types/stores/booking-confirmation.ts
View File

@@ -1,30 +1,48 @@
import type { ChildBedTypeEnum } from "@/constants/booking"
import type { import type {
BookingConfirmation, BookingConfirmation,
PackageSchema, PackageSchema,
} from "../trpc/routers/booking/confirmation" } from "../trpc/routers/booking/confirmation"
export interface ChildBedPreference {
quantity: number
bedType: ChildBedTypeEnum
}
export interface Room { export interface Room {
adults: number adults: number
bedDescription: string bedDescription: string
breakfast?: PackageSchema
breakfastIncluded: boolean breakfastIncluded: boolean
children?: number children?: number
childBedPreferences: ChildBedPreference[]
confirmationNumber: string confirmationNumber: string
fromDate: Date fromDate: Date
name: string name: string
rateDefinition: BookingConfirmation["booking"]["rateDefinition"] rateDefinition: BookingConfirmation["booking"]["rateDefinition"]
roomFeatures?: PackageSchema[] | null
roomPrice: number roomPrice: number
selectedBreakfast?: PackageSchema
toDate: Date toDate: Date
totalPrice: number totalPrice: number
totalPriceExVat: number
vatAmount: number
} }
export interface InitialState { export interface InitialState {
bookingCode: string | null
fromDate: Date
rooms: (Room | null)[] rooms: (Room | null)[]
toDate: Date
currencyCode: string currencyCode: string
vat: number
} }
export interface BookingConfirmationState { export interface BookingConfirmationState {
bookingCode: string | null
rooms: (Room | null)[] rooms: (Room | null)[]
currencyCode: string currencyCode: string
vat: number
fromDate: Date
toDate: Date
actions: { setRoom: (room: Room, idx: number) => void } actions: { setRoom: (room: Room, idx: number) => void }
} }

8
apps/scandic-web/types/stores/enter-details.ts
View File

@@ -1,11 +1,11 @@
import type {
BreakfastPackage,
BreakfastPackages,
} from "@/types/components/hotelReservation/breakfast"
import type { import type {
BedTypeSchema, BedTypeSchema,
BedTypeSelection, BedTypeSelection,
} from "@/types/components/hotelReservation/enterDetails/bedType" } from "@/types/components/hotelReservation/enterDetails/bedType"
import type {
BreakfastPackage,
BreakfastPackages,
} from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { import type {
DetailsSchema, DetailsSchema,
MultiroomDetailsSchema, MultiroomDetailsSchema,