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 (
|