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

feat(SW-1717): rewrite select-rate to show all variants of rate-cards

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-03-25 11:25:44 +01:00
committed by Michael Zetterberg
parent adde77eaa9
commit ebaea78fb3
118 changed files with 4601 additions and 4374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -80,7 +80,7 @@ export default function Breakfast() {
ancillary={{
title: intl.formatMessage({ id: "Breakfast buffet" }),
price: {
totalPrice: pkg.localPrice.price,
total: pkg.localPrice.price,
currency: pkg.localPrice.currency,
included:
pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST,
@@ -100,7 +100,7 @@ export default function Breakfast() {
ancillary={{
title: intl.formatMessage({ id: "No breakfast" }),
price: {
totalPrice: 0,
total: 0,
currency: packages?.[0].localPrice.currency ?? "",
},
description: intl.formatMessage({

6
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx
View File

@@ -20,7 +20,7 @@ export default function JoinScandicFriendsCard({
const intl = useIntl()
const { room, roomNr } = useRoomContext()
if (!room.roomRate.memberRate) {
if (!("member" in room.roomRate) || !room.roomRate.member) {
return null
}
@@ -37,8 +37,8 @@ export default function JoinScandicFriendsCard({
{
amount: formatPrice(
intl,
room.roomRate.memberRate.localPrice.pricePerStay ?? 0,
room.roomRate.memberRate.localPrice.currency ?? CurrencyEnum.Unknown
room.roomRate.member.localPrice.pricePerStay ?? 0,
room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
),
roomNr,
}

6
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -27,7 +27,7 @@ export default function JoinScandicFriendsCard({
const intl = useIntl()
const { room } = useRoomContext()
if (!room.roomRate.memberRate) {
if (!("member" in room.roomRate) || !room.roomRate.member) {
return null
}
@@ -44,8 +44,8 @@ export default function JoinScandicFriendsCard({
{
amount: formatPrice(
intl,
room.roomRate.memberRate.localPrice.pricePerStay ?? 0,
room.roomRate.memberRate.localPrice.currency ?? CurrencyEnum.Unknown
room.roomRate.member.localPrice.pricePerStay ?? 0,
room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
),
}
)

6
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx
View File

@@ -26,9 +26,13 @@ export default function MemberPriceModal({
setIsOpen: Dispatch<SetStateAction<boolean>>
}) {
const { room } = useRoomContext()
const memberRate = room.roomRate.memberRate
const memberRate = "member" in room.roomRate ? room.roomRate.member : null
const intl = useIntl()
if (!memberRate) {
return null
}
const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice
return (

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

@@ -44,7 +44,7 @@ export default function Details({ user }: DetailsProps) {
roomNr,
} = useRoomContext()
const initialData = room.guest
const memberRate = room.roomRate.memberRate
const memberRate = "member" in room.roomRate ? room.roomRate.member : null
const isPaymentNext = activeRoom === lastRoom

134
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -49,6 +49,7 @@ import type {
PriceChangeData,
} from "@/types/components/hotelReservation/enterDetails/payment"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import { RateTypeEnum } from "@/types/enums/rateType"
const maxRetries = 15
const retryInterval = 2000
@@ -261,7 +262,6 @@ export default function PaymentClient({
const shouldUsePayment =
guarantee || bookingMustBeGuaranteed || !hasOnlyFlexRates
const payment = shouldUsePayment
? {
paymentMethod: paymentMethod,
@@ -271,6 +271,7 @@ export default function PaymentClient({
cancel: `${paymentRedirectUrl}/cancel`,
}
: undefined
trackPaymentEvent({
event: "paymentAttemptStart",
hotelId,
@@ -286,66 +287,81 @@ export default function PaymentClient({
hotelId,
language: lang,
payment,
rooms: rooms.map(({ room }, idx) => ({
adults: room.adults,
childrenAges: room.childrenInRoom?.map((child) => ({
age: child.age,
bedType: bedTypeMap[parseInt(child.bed.toString())],
})),
guest: {
becomeMember: room.guest.join,
countryCode: room.guest.countryCode,
email: room.guest.email,
firstName: room.guest.firstName,
lastName: room.guest.lastName,
membershipNumber: room.guest.membershipNo,
phoneNumber: room.guest.phoneNumber,
// Only allowed for room one
...(idx === 0 && {
dateOfBirth:
"dateOfBirth" in room.guest && room.guest.dateOfBirth
? room.guest.dateOfBirth
rooms: rooms.map(({ room }, idx) => {
let bookingCode = undefined
if (
room.roomRate.rateDefinition &&
room.roomRate.rateDefinition.rateType !== RateTypeEnum.Regular
) {
bookingCode = room.roomRate.rateDefinition.rateCode
}
return {
adults: room.adults,
bookingCode,
childrenAges: room.childrenInRoom?.map((child) => ({
age: child.age,
bedType: bedTypeMap[parseInt(child.bed.toString())],
})),
guest: {
becomeMember: room.guest.join,
countryCode: room.guest.countryCode,
email: room.guest.email,
firstName: room.guest.firstName,
lastName: room.guest.lastName,
membershipNumber: room.guest.membershipNo,
phoneNumber: room.guest.phoneNumber,
// Only allowed for room one
...(idx === 0 && {
dateOfBirth:
"dateOfBirth" in room.guest && room.guest.dateOfBirth
? room.guest.dateOfBirth
: undefined,
postalCode:
"zipCode" in room.guest && room.guest.zipCode
? room.guest.zipCode
: undefined,
}),
},
packages: {
accessibility:
room.roomFeatures?.some(
(feature) =>
feature.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
) ?? false,
allergyFriendly:
room.roomFeatures?.some(
(feature) => feature.code === RoomPackageCodeEnum.ALLERGY_ROOM
) ?? false,
breakfast: !!(room.breakfast && room.breakfast.code),
petFriendly:
room.roomFeatures?.some(
(feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
) ?? false,
},
rateCode:
(room.guest.join || room.guest.membershipNo) &&
booking.rooms[idx].counterRateCode
? booking.rooms[idx].counterRateCode
: booking.rooms[idx].rateCode,
roomPrice: {
memberPrice:
"member" in room.roomRate
? room.roomRate.member?.localPrice.pricePerStay
: undefined,
postalCode:
"zipCode" in room.guest && room.guest.zipCode
? room.guest.zipCode
publicPrice:
"public" in room.roomRate
? room.roomRate.public?.localPrice.pricePerStay
: undefined,
}),
},
packages: {
accessibility:
room.roomFeatures?.some(
(feature) =>
feature.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
) ?? false,
allergyFriendly:
room.roomFeatures?.some(
(feature) => feature.code === RoomPackageCodeEnum.ALLERGY_ROOM
) ?? false,
breakfast: !!(room.breakfast && room.breakfast.code),
petFriendly:
room.roomFeatures?.some(
(feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
) ?? false,
},
rateCode:
(room.guest.join || room.guest.membershipNo) &&
booking.rooms[idx].counterRateCode
? booking.rooms[idx].counterRateCode
: booking.rooms[idx].rateCode,
roomPrice: {
memberPrice: room.roomRate.memberRate?.localPrice.pricePerStay,
publicPrice: room.roomRate.publicRate?.localPrice.pricePerStay,
},
bookingCode: booking.bookingCode,
roomTypeCode: room.bedType!.roomTypeCode, // A selection has been made in order to get to this step.
smsConfirmationRequested: data.smsConfirmation,
specialRequest: {
comment: room.specialRequest.comment
? room.specialRequest.comment
: undefined,
},
})),
},
roomTypeCode: room.bedType!.roomTypeCode, // A selection has been made in order to get to this step.
smsConfirmationRequested: data.smsConfirmation,
specialRequest: {
comment: room.specialRequest.comment
? room.specialRequest.comment
: undefined,
},
}
}),
})
},
[

6
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/helpers.ts
View File

@@ -33,9 +33,9 @@ export function calculateTotalRoomPrice(
let comparisonPrice = totalPrice
const isMember = room.guest.join || room.guest.membershipNo
if (isMember) {
const publicPrice = room.roomRate.publicRate?.localPrice.pricePerStay ?? 0
const memberPrice = room.roomRate.memberRate?.localPrice.pricePerStay ?? 0
if (isMember && "member" in room.roomRate) {
const publicPrice = room.roomRate.public?.localPrice.pricePerStay ?? 0
const memberPrice = room.roomRate.member?.localPrice.pricePerStay ?? 0
const diff = publicPrice - memberPrice
comparisonPrice = totalPrice + diff
}

30
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
View File

@@ -111,16 +111,28 @@ export default function PriceDetailsTable({
return (
<table className={styles.priceDetailsTable}>
{rooms.map((room, idx) => {
const isMainRoom = idx === 0
const getMemberRate =
room.guest?.join ||
room.guest?.membershipNo ||
(idx === 0 && isMember)
const price =
getMemberRate && room.roomRate.memberRate
? room.roomRate.memberRate
: room.roomRate.publicRate
const voucherPrice = room.roomRate.voucherRate
const chequePrice = room.roomRate.chequeRate
(isMainRoom && isMember)
let price
if (
getMemberRate &&
"member" in room.roomRate &&
room.roomRate.member
) {
price = room.roomRate.member
} else if ("public" in room.roomRate && room.roomRate.public) {
price = room.roomRate.public
}
const voucherPrice =
"voucher" in room.roomRate ? room.roomRate.voucher : undefined
const chequePrice =
"corporateCheque" in room.roomRate
? room.roomRate.corporateCheque
: undefined
if (!price) {
return null
}
@@ -192,10 +204,10 @@ export default function PriceDetailsTable({
label={intl.formatMessage({ id: "Room charge" })}
value={formatPrice(
intl,
chequePrice.localPrice.numberOfBonusCheques,
chequePrice.localPrice.numberOfCheques,
CurrencyEnum.CC,
chequePrice.localPrice.additionalPricePerStay,
chequePrice.localPrice.currency
chequePrice.localPrice.currency ?? undefined
)}
/>
)}

25
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -28,7 +28,6 @@ import styles from "./ui.module.css"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
import type { EnterDetailsSummaryProps } from "@/types/components/hotelReservation/summary"
import { CurrencyEnum } from "@/types/enums/currency"
export default function SummaryUI({
booking,
@@ -55,14 +54,15 @@ export default function SummaryUI({
}
function getMemberPrice(roomRate: RoomRate) {
return roomRate?.memberRate
? {
currency:
roomRate.memberRate.localPrice.currency ?? CurrencyEnum.Unknown,
pricePerNight: roomRate.memberRate.localPrice.pricePerNight,
amount: roomRate.memberRate.localPrice.pricePerStay ?? 0,
}
: null
if ("member" in roomRate && roomRate.member) {
return {
amount: roomRate.member.localPrice.pricePerStay,
currency: roomRate.member.localPrice.currency,
pricePerNight: roomRate.member.localPrice.pricePerNight,
}
}
return null
}
const roomOneGuest = rooms[0].room.guest
@@ -74,11 +74,12 @@ export default function SummaryUI({
const roomOneMemberPrice = getMemberPrice(rooms[0].room.roomRate)
const roomOneRoomRate = rooms[0].room.roomRate
// In case of Redemption, voucher and Corporate cheque do not show approx price
const isSpecialRate =
rooms[0].room.roomRate.chequeRate ||
rooms[0].room.roomRate.redemptionRate ||
rooms[0].room.roomRate.voucherRate
"corporateCheque" in roomOneRoomRate ||
"redemption" in roomOneRoomRate ||
"voucher" in roomOneRoomRate
return (
<section className={styles.summary}>

218
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/_summary._test.tsx Normal file
View File

@@ -0,0 +1,218 @@
// import { describe, expect, test } from "@jest/globals"
// import { act, cleanup, render, screen, within } from "@testing-library/react"
// import { type IntlConfig, IntlProvider } from "react-intl"
// import { Lang } from "@/constants/languages"
// import {
// bedType,
// booking,
// breakfastPackage,
// guestDetailsMember,
// guestDetailsNonMember,
// roomPrice,
// roomRate,
// } from "@/__mocks__/hotelReservation"
// import { initIntl } from "@/i18n"
// import SummaryUI from "./UI"
// import type { PropsWithChildren } from "react"
// import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
// import { StepEnum } from "@/types/enums/step"
// import type { RoomState } from "@/types/stores/enter-details"
// jest.mock("@/lib/api", () => ({
// fetchRetry: jest.fn((fn) => fn),
// }))
// function createWrapper(intlConfig: IntlConfig) {
// return function Wrapper({ children }: PropsWithChildren) {
// return (
// <IntlProvider
// messages={intlConfig.messages}
// locale={intlConfig.locale}
// defaultLocale={intlConfig.defaultLocale}
// >
// {children}
// </IntlProvider>
// )
// }
// }
// const rooms: RoomState[] = [
// {
// currentStep: StepEnum.selectBed,
// isComplete: false,
// room: {
// adults: 2,
// bedType: {
// description: bedType.queen.description,
// roomTypeCode: bedType.queen.value,
// },
// bedTypes: [],
// breakfast: breakfastPackage,
// breakfastIncluded: false,
// cancellationRule: "",
// cancellationText: "Non-refundable",
// childrenInRoom: [{ bed: ChildBedMapEnum.IN_EXTRA_BED, age: 5 }],
// guest: guestDetailsNonMember,
// rateDetails: [],
// roomFeatures: [],
// roomPrice: roomPrice,
// roomRate: roomRate,
// roomType: "Standard",
// roomTypeCode: "QS",
// isAvailable: true,
// mustBeGuaranteed: false,
// isFlexRate: false,
// specialRequest: {
// comment: "",
// },
// },
// steps: {
// [StepEnum.selectBed]: {
// step: StepEnum.selectBed,
// isValid: false,
// },
// [StepEnum.breakfast]: {
// step: StepEnum.breakfast,
// isValid: false,
// },
// [StepEnum.details]: {
// step: StepEnum.details,
// isValid: false,
// },
// },
// },
// {
// currentStep: StepEnum.selectBed,
// isComplete: false,
// room: {
// adults: 1,
// bedType: {
// description: bedType.king.description,
// roomTypeCode: bedType.king.value,
// },
// bedTypes: [],
// breakfast: undefined,
// breakfastIncluded: false,
// cancellationText: "Non-refundable",
// childrenInRoom: [],
// guest: guestDetailsMember,
// rateDetails: [],
// roomFeatures: [],
// roomPrice: roomPrice,
// roomRate: roomRate,
// roomType: "Standard",
// roomTypeCode: "QS",
// isAvailable: true,
// mustBeGuaranteed: false,
// isFlexRate: false,
// specialRequest: {
// comment: "",
// },
// },
// steps: {
// [StepEnum.selectBed]: {
// step: StepEnum.selectBed,
// isValid: false,
// },
// [StepEnum.breakfast]: {
// step: StepEnum.breakfast,
// isValid: false,
// },
// [StepEnum.details]: {
// step: StepEnum.details,
// isValid: false,
// },
// },
// },
// ]
// describe("EnterDetails Summary", () => {
// afterEach(() => {
// cleanup()
// })
// test("render with single room correctly", async () => {
// const intl = await initIntl(Lang.en)
// await act(async () => {
// render(
// <SummaryUI
// booking={booking}
// rooms={rooms.slice(0, 1)}
// isMember={false}
// totalPrice={{
// requested: {
// currency: "EUR",
// price: 133,
// },
// local: {
// currency: "SEK",
// price: 1500,
// },
// }}
// vat={12}
// toggleSummaryOpen={jest.fn()}
// />,
// {
// wrapper: createWrapper(intl),
// }
// )
// })
// screen.getByText("2 adults, 1 child")
// screen.getByText("Standard")
// screen.getByText("1,525 SEK")
// screen.getByText(bedType.queen.description)
// screen.getByText("Breakfast buffet")
// screen.getByText("1,500 SEK")
// screen.getByTestId("signup-promo-desktop")
// })
// test("render with multiple rooms correctly", async () => {
// const intl = await initIntl(Lang.en)
// await act(async () => {
// render(
// <SummaryUI
// booking={booking}
// rooms={rooms}
// isMember={false}
// totalPrice={{
// requested: {
// currency: "EUR",
// price: 133,
// },
// local: {
// currency: "SEK",
// price: 1500,
// },
// }}
// vat={12}
// toggleSummaryOpen={jest.fn()}
// />,
// {
// wrapper: createWrapper(intl),
// }
// )
// })
// const room1 = within(screen.getByTestId("summary-room-1"))
// room1.getByText("Standard")
// room1.getByText("2 adults, 1 child")
// room1.getByText(bedType.queen.description)
// room1.getByText("Breakfast buffet")
// const room2 = within(screen.getByTestId("summary-room-2"))
// room2.getByText("Standard")
// room2.getByText("1 adult")
// const room2Breakfast = room2.queryByText("Breakfast buffet")
// expect(room2Breakfast).not.toBeInTheDocument()
// room2.getByText(bedType.king.description)
// })
// })

218
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/summary.test.tsx
View File

@@ -1,218 +0,0 @@
import { describe, expect, test } from "@jest/globals"
import { act, cleanup, render, screen, within } from "@testing-library/react"
import { type IntlConfig, IntlProvider } from "react-intl"
import { Lang } from "@/constants/languages"
import {
bedType,
booking,
breakfastPackage,
guestDetailsMember,
guestDetailsNonMember,
roomPrice,
roomRate,
} from "@/__mocks__/hotelReservation"
import { initIntl } from "@/i18n"
import SummaryUI from "./UI"
import type { PropsWithChildren } from "react"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import { StepEnum } from "@/types/enums/step"
import type { RoomState } from "@/types/stores/enter-details"
jest.mock("@/lib/api", () => ({
fetchRetry: jest.fn((fn) => fn),
}))
function createWrapper(intlConfig: IntlConfig) {
return function Wrapper({ children }: PropsWithChildren) {
return (
<IntlProvider
messages={intlConfig.messages}
locale={intlConfig.locale}
defaultLocale={intlConfig.defaultLocale}
>
{children}
</IntlProvider>
)
}
}
const rooms: RoomState[] = [
{
currentStep: StepEnum.selectBed,
isComplete: false,
room: {
adults: 2,
bedType: {
description: bedType.queen.description,
roomTypeCode: bedType.queen.value,
},
bedTypes: [],
breakfast: breakfastPackage,
breakfastIncluded: false,
cancellationRule: "",
cancellationText: "Non-refundable",
childrenInRoom: [{ bed: ChildBedMapEnum.IN_EXTRA_BED, age: 5 }],
guest: guestDetailsNonMember,
rateDetails: [],
roomFeatures: [],
roomPrice: roomPrice,
roomRate: roomRate,
roomType: "Standard",
roomTypeCode: "QS",
isAvailable: true,
mustBeGuaranteed: false,
isFlexRate: false,
specialRequest: {
comment: "",
},
},
steps: {
[StepEnum.selectBed]: {
step: StepEnum.selectBed,
isValid: false,
},
[StepEnum.breakfast]: {
step: StepEnum.breakfast,
isValid: false,
},
[StepEnum.details]: {
step: StepEnum.details,
isValid: false,
},
},
},
{
currentStep: StepEnum.selectBed,
isComplete: false,
room: {
adults: 1,
bedType: {
description: bedType.king.description,
roomTypeCode: bedType.king.value,
},
bedTypes: [],
breakfast: undefined,
breakfastIncluded: false,
cancellationText: "Non-refundable",
childrenInRoom: [],
guest: guestDetailsMember,
rateDetails: [],
roomFeatures: [],
roomPrice: roomPrice,
roomRate: roomRate,
roomType: "Standard",
roomTypeCode: "QS",
isAvailable: true,
mustBeGuaranteed: false,
isFlexRate: false,
specialRequest: {
comment: "",
},
},
steps: {
[StepEnum.selectBed]: {
step: StepEnum.selectBed,
isValid: false,
},
[StepEnum.breakfast]: {
step: StepEnum.breakfast,
isValid: false,
},
[StepEnum.details]: {
step: StepEnum.details,
isValid: false,
},
},
},
]
describe("EnterDetails Summary", () => {
afterEach(() => {
cleanup()
})
test("render with single room correctly", async () => {
const intl = await initIntl(Lang.en)
await act(async () => {
render(
<SummaryUI
booking={booking}
rooms={rooms.slice(0, 1)}
isMember={false}
totalPrice={{
requested: {
currency: "EUR",
price: 133,
},
local: {
currency: "SEK",
price: 1500,
},
}}
vat={12}
toggleSummaryOpen={jest.fn()}
/>,
{
wrapper: createWrapper(intl),
}
)
})
screen.getByText("2 adults, 1 child")
screen.getByText("Standard")
screen.getByText("1,525 SEK")
screen.getByText(bedType.queen.description)
screen.getByText("Breakfast buffet")
screen.getByText("1,500 SEK")
screen.getByTestId("signup-promo-desktop")
})
test("render with multiple rooms correctly", async () => {
const intl = await initIntl(Lang.en)
await act(async () => {
render(
<SummaryUI
booking={booking}
rooms={rooms}
isMember={false}
totalPrice={{
requested: {
currency: "EUR",
price: 133,
},
local: {
currency: "SEK",
price: 1500,
},
}}
vat={12}
toggleSummaryOpen={jest.fn()}
/>,
{
wrapper: createWrapper(intl),
}
)
})
const room1 = within(screen.getByTestId("summary-room-1"))
room1.getByText("Standard")
room1.getByText("2 adults, 1 child")
room1.getByText(bedType.queen.description)
room1.getByText("Breakfast buffet")
const room2 = within(screen.getByTestId("summary-room-2"))
room2.getByText("Standard")
room2.getByText("1 adult")
const room2Breakfast = room2.queryByText("Breakfast buffet")
expect(room2Breakfast).not.toBeInTheDocument()
room2.getByText(bedType.king.description)
})
})