diff --git a/packages/booking-flow/lib/components/BookingConfirmation/PriceDetails/index.tsx b/packages/booking-flow/lib/components/BookingConfirmation/PriceDetails/index.tsx index d42cb86f4..5f3e6cd97 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/PriceDetails/index.tsx +++ b/packages/booking-flow/lib/components/BookingConfirmation/PriceDetails/index.tsx @@ -120,8 +120,10 @@ export default function PriceDetails() { requested: undefined, } ) - const mappedRooms = mapToPrice(rooms, nights) + const isCampaignRate = rooms.every( + (room) => room?.rateDefinition.isCampaignRate + ) return ( ) } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx index 2dddc9be9..49d1db208 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx @@ -5,6 +5,7 @@ import { useIntl } from "react-intl" import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" +import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip" 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" @@ -25,20 +26,22 @@ type BookingConfirmationReceiptRoomProps = { room: Room roomNumber: number roomCount: number + showBookingCodeChip?: boolean } export function ReceiptRoom({ room, roomNumber, roomCount, + showBookingCodeChip = false, }: BookingConfirmationReceiptRoomProps) { const intl = useIntl() - const { currencyCode, isVatCurrency } = useBookingConfirmationStore( - (state) => ({ + const { currencyCode, isVatCurrency, bookingCode } = + useBookingConfirmationStore((state) => ({ currencyCode: state.currencyCode, isVatCurrency: state.isVatCurrency, - }) - ) + bookingCode: state.bookingCode, + })) if (!room) { return @@ -74,7 +77,8 @@ export function ReceiptRoom({ } const guests = guestsParts.join(", ") - const showDiscounted = room.rateDefinition.isMemberRate + const showDiscounted = + room.rateDefinition.isMemberRate || room.rateDefinition.isCampaignRate return ( <> @@ -276,6 +280,14 @@ export function ReceiptRoom({ breakfastIncluded={room.breakfastIncluded} guests={guests} /> + + {showBookingCodeChip && ( + + )} diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx index 6fb073275..0b3fd71ec 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx @@ -3,8 +3,6 @@ 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" @@ -30,7 +28,6 @@ export default function TotalPrice() { return ( <> -
@@ -70,15 +67,13 @@ export default function TotalPrice() {
-
+
{hasAllRoomsLoaded ? ( ) : ( )}
- - {bookingCode && } ) } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css index de76e36b5..f1daa2dee 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css @@ -2,7 +2,6 @@ display: flex; gap: var(--Space-x05); justify-content: space-between; - margin-bottom: var(--Space-x15); } .prices { @@ -27,7 +26,3 @@ .approxPrice { color: var(--Text-Secondary); } - -.ctaWrapper { - margin-top: var(--Space-x15); -} diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/index.tsx b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/index.tsx index 71ec10088..ccb92a7b8 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/index.tsx +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/index.tsx @@ -4,6 +4,7 @@ import { useIntl } from "react-intl" import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats" import { dt } from "@scandic-hotels/common/dt" +import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip" 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" @@ -18,13 +19,19 @@ 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 { rooms, fromDate, toDate, bookingCode } = useBookingConfirmationStore( + (state) => ({ + rooms: state.rooms, + fromDate: state.fromDate, + toDate: state.toDate, + bookingCode: state.bookingCode, + }) + ) const totalNights = dt(toDate).diff(fromDate, "days") + const isCampaignRate = rooms.every( + (room) => room?.rateDefinition.isCampaignRate + ) const nights = intl.formatMessage( { @@ -67,10 +74,21 @@ export function Receipt() { room={room} roomNumber={idx + 1} roomCount={rooms.length} + showBookingCodeChip={ + rooms.length !== 1 && + (room.rateDefinition.isCampaignRate || !!bookingCode) + } /> ))} + {rooms.length === 1 && (isCampaignRate || !!bookingCode) && ( + + )} ) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx index e34eff15c..51529acf6 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx @@ -3,6 +3,7 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" +import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip" 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" @@ -24,6 +25,7 @@ interface RoomProps { isUserLoggedIn: boolean nightsCount: number defaultCurrency: CurrencyEnum + showBookingCodeChip?: boolean } export default function Room({ @@ -33,6 +35,7 @@ export default function Room({ isUserLoggedIn, nightsCount, defaultCurrency, + showBookingCodeChip = false, }: RoomProps) { const intl = useIntl() const adults = room.adults @@ -68,6 +71,7 @@ export default function Room({ "member" in room.roomRate && room.roomRate.member ) + const isSpecialRate = "corporateCheque" in room.roomRate || "redemption" in room.roomRate || @@ -344,7 +348,13 @@ export default function Room({ nights={nightsCount} />
- + {showBookingCodeChip && ( + + )} ) diff --git a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx index 88f2b36d8..31934b605 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx @@ -84,10 +84,12 @@ export default function SummaryUI({ const isAllCampaignRate = rooms.every( (room) => room.room.roomRate.rateDefinition.isCampaignRate ) - const containsBookingCodeRate = rooms.find( (r) => r && isBookingCodeRate(r.room.roomRate) ) + const containsCampaignRate = rooms.find( + (r) => r && r.room.roomRate.rateDefinition.isCampaignRate + ) const showDiscounted = containsBookingCodeRate || isUserLoggedIn const totalCurrency = isVoucherRate @@ -136,6 +138,11 @@ export default function SummaryUI({ roomCount={rooms.length} isUserLoggedIn={isUserLoggedIn} nightsCount={nights} + showBookingCodeChip={ + rooms.length !== 1 && + (room.roomRate.rateDefinition.isCampaignRate || + !!room.roomRate.bookingCode) + } /> ))} @@ -223,14 +230,17 @@ export default function SummaryUI({ toDate={booking.toDate} totalPrice={totalPrice} vat={vat} + isCampaignRate={!!containsCampaignRate} /> - + {rooms.length === 1 && (isAllCampaignRate || booking.bookingCode) && ( + + )} {showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? ( - + diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx index a0e3c592f..ef2eed7d7 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx +++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx @@ -23,12 +23,14 @@ export interface RegularPriceType { interface RegularPriceProps extends SharedPriceRowProps { isMemberRate: boolean + isCampaignRate?: boolean price: RegularPriceType["regular"] } export default function RegularPrice({ bedType, isMemberRate, + isCampaignRate, nights, packages, price, @@ -58,7 +60,8 @@ export default function RegularPrice({ if (regularPriceIsHigherThanPrice) { regularCharge = formatPrice(intl, price.regularPricePerStay, price.currency) } - const isDiscounted = isMemberRate || regularPriceIsHigherThanPrice + const isDiscounted = + isMemberRate || isCampaignRate || regularPriceIsHigherThanPrice return ( <> diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/row.module.css b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/row.module.css index b38fa52e7..e7871652c 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/row.module.css +++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/row.module.css @@ -19,3 +19,8 @@ text-decoration: line-through; color: var(--Text-Secondary); } + +.bookingCodeCell { + justify-content: center; + width: 100%; +} diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/index.tsx b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/index.tsx index 344ed7adc..a4dc9950e 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/index.tsx +++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/index.tsx @@ -53,7 +53,7 @@ interface Room { childrenInRoom: Child[] | undefined packages: Packages | null price: RoomPrice - rateDefinition: Pick + rateDefinition: Pick roomType: string } @@ -101,6 +101,9 @@ export default function PriceDetailsTable({ if (room.rateDefinition.isMemberRate) { return true } + if (room.rateDefinition.isCampaignRate) { + return true + } if (!room.price.regular) { return false } @@ -108,6 +111,9 @@ export default function PriceDetailsTable({ return room.price.regular.pricePerStay > room.price.regular.pricePerStay }) + const allRoomsHasCampaignRate = rooms.every( + (room) => room.rateDefinition.isCampaignRate + ) return ( {rooms.map((room, idx) => { @@ -176,6 +182,7 @@ export default function PriceDetailsTable({ bedType={room.bedType} packages={room.packages} isMemberRate={isMemberRate} + isCampaignRate={room.rateDefinition.isCampaignRate} nights={nights} price={price} /> @@ -211,6 +218,15 @@ export default function PriceDetailsTable({ currency={currency} nights={nights} /> + {rooms.length !== 1 && + (room.rateDefinition.isCampaignRate || !!bookingCode) && ( + + + + )} ) })} @@ -223,9 +239,8 @@ export default function PriceDetailsTable({ /> - - + {rooms.length === 1 && (allRoomsHasCampaignRate || bookingCode) && ( + <> + + + + )}
) diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css index d61dbc140..cf7d698de 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css +++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css @@ -8,3 +8,7 @@ min-width: 512px; } } + +.bookingCode { + padding-top: var(--Space-x3); +} diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/index.tsx b/packages/booking-flow/lib/components/PriceDetailsModal/index.tsx index 3f76404d7..bdee57e58 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/index.tsx +++ b/packages/booking-flow/lib/components/PriceDetailsModal/index.tsx @@ -13,7 +13,8 @@ function Trigger({ title }: { title: string }) { return (