Merged in feat/book-425-optimize-campaign-rate-card (pull request #3015)

Feat/book 425 optimize campaign rate card * feat(BOOK-425): design updates to RateCard * feat(BOOK-425): design updates to campaign BookingCodeChip * feat(BOOK-425): fixed breakfast message & booking code chips on select rate and enter detailss * feat(BOOK-425): fixed booking code chip on Booking Confirmation page * fixed draft comments * fixed more comments * feat(BOOK-425): removed fixed height from RateCard banner * fixed another variable comment * fixed more pr comments * fixed more pr comments * updated ratecard campaign standard rate title color * removed deconstructed props Approved-by: Bianca Widstam Approved-by: Erik Tiekstra
2025-10-29 13:54:29 +00:00
parent 56b44c16d4
commit 2c6d9860e1
28 changed files with 272 additions and 83 deletions
--- 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 (
    <PriceDetailsModal
@@ -132,6 +134,7 @@ export default function PriceDetails() {
      totalPrice={totalPrice}
      vat={vat}
      defaultCurrency={currency}
+      isCampaignRate={isCampaignRate}
    />
  )
 }
--- 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 <RoomSkeletonLoader />
@@ -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 && (
+          <BookingCodeChip
+            isCampaign={room.rateDefinition.isCampaignRate}
+            bookingCode={bookingCode}
+            alignCenter
+          />
+        )}
      </div>
      <Divider color="Border/Divider/Subtle" />
    </>
--- 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 (
    <>
-      <Divider color="Border/Divider/Subtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <div>
@@ -70,15 +67,13 @@ export default function TotalPrice() {
          </div>
        </div>
      </div>
-      <div className={styles.ctaWrapper}>
+      <div>
        {hasAllRoomsLoaded ? (
          <PriceDetails />
        ) : (
          <SkeletonShimmer width={"100%"} />
        )}
      </div>
-
-      {bookingCode && <BookingCodeChip bookingCode={bookingCode} alignCenter />}
    </>
  )
 }
--- 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);
-}
--- 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)
+          }
        />
      ))}

      <TotalPrice />
+      {rooms.length === 1 && (isCampaignRate || !!bookingCode) && (
+        <BookingCodeChip
+          isCampaign={isCampaignRate}
+          bookingCode={bookingCode}
+          alignCenter
+        />
+      )}
    </section>
  )
 }
--- 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}
        />
      </div>
-
+      {showBookingCodeChip && (
+        <BookingCodeChip
+          isCampaign={room.roomRate.rateDefinition.isCampaignRate}
+          bookingCode={room.roomRate.bookingCode}
+          alignCenter
+        />
+      )}
      <Divider color="Border/Divider/Subtle" />
    </>
  )
--- 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}
          />
        </div>
      </div>
-      <BookingCodeChip
-        isCampaign={isAllCampaignRate}
-        bookingCode={booking.bookingCode}
-        alignCenter
-      />
+      {rooms.length === 1 && (isAllCampaignRate || booking.bookingCode) && (
+        <BookingCodeChip
+          isCampaign={isAllCampaignRate}
+          bookingCode={booking.bookingCode}
+          alignCenter
+        />
+      )}
      <Divider className={styles.bottomDivider} color="Border/Divider/Subtle" />
      {showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? (
        <SignupPromoDesktop
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/mapToPrice.ts
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/mapToPrice.ts
@@ -16,6 +16,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
        ...room,
        packages: room.roomFeatures,
        rateDefinition: {
+          ...room.roomRate.rateDefinition,
          isMemberRate: false,
        },
      }
@@ -86,6 +87,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
            return {
              ...roomWithoutPrice,
              rateDefinition: {
+                ...roomWithoutPrice.rateDefinition,
                isMemberRate: true,
              },
              price: {
@@ -104,6 +106,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
          return {
            ...roomWithoutPrice,
            rateDefinition: {
+              ...roomWithoutPrice.rateDefinition,
              isMemberRate: true,
            },
            price: {
--- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx
+++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx
@@ -14,14 +14,15 @@ export default function BookingCodeRow({
  bookingCode,
  isCampaignRate,
 }: BookingCodeRowProps) {
-  if (!bookingCode) {
+  if (!bookingCode && !isCampaignRate) {
    return null
  }

  return (
    <tr className={styles.row}>
-      <td colSpan={2} align="left">
+      <td colSpan={2} align="center" className={styles.bookingCodeCell}>
        <BookingCodeChip
+          alignCenter
          bookingCode={bookingCode}
          isCampaign={isCampaignRate}
        />
--- 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 (
    <>
--- 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%;
+}
--- 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, "isMemberRate">
+  rateDefinition: Pick<RateDefinition, "isMemberRate" | "isCampaignRate">
  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 (
    <table className={styles.priceDetailsTable}>
      {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) && (
+                <Tbody>
+                  <BookingCodeRow
+                    isCampaignRate={room.rateDefinition.isCampaignRate}
+                    bookingCode={bookingCode}
+                  />
+                </Tbody>
+              )}
          </Fragment>
        )
      })}
@@ -223,9 +239,8 @@ export default function PriceDetailsTable({
        />

        <VatRow totalPrice={totalPrice} vat={vat} />
-
        <LargeRow
-          allPricesIsDiscounted={allPricesIsDiscounted}
+          allPricesIsDiscounted={!!allPricesIsDiscounted || !!isCampaignRate}
          label={intl.formatMessage({
            id: "booking.priceIncludingVat",
            defaultMessage: "Price including VAT",
@@ -233,10 +248,15 @@ export default function PriceDetailsTable({
          price={totalPrice}
        />

-        <BookingCodeRow
-          isCampaignRate={isCampaignRate}
-          bookingCode={bookingCode}
-        />
+        {rooms.length === 1 && (allRoomsHasCampaignRate || bookingCode) && (
+          <>
+            <tr className={styles.bookingCode} />
+            <BookingCodeRow
+              isCampaignRate={isCampaignRate}
+              bookingCode={bookingCode}
+            />
+          </>
+        )}
      </Tbody>
    </table>
  )
--- 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);
+}
--- 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 (
    <Button
      variant="Text"
-      typography="Body/Supporting text (caption)/smBold"
+      size="Medium"
+      typography="Body/Paragraph/mdBold"
      wrapping={false}
    >
      {title}
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
@@ -6,6 +6,7 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -58,6 +59,11 @@ export default function SummaryContent({
    (r) => r && isBookingCodeRate(r)
  )

+  const cointainsCode = selectedRates.rates.find((r) => r?.type === "code")
+  const containsCampaignRate = selectedRates.rates.some(
+    (r) => r?.type === "campaign"
+  )
+
  if (!selectedRates?.totalPrice) {
    return null
  }
@@ -129,6 +135,10 @@ export default function SummaryContent({
            roomNumber={idx + 1}
            roomCount={selectedRates.rates.length}
            isMember={isUserLoggedIn && idx === 0}
+            showBookingCodeChip={
+              selectedRates.rates.length !== 1 &&
+              (room.rateDefinition.isCampaignRate || isBookingCodeRate(room))
+            }
          />
        )
      })}
@@ -216,6 +226,9 @@ export default function SummaryContent({
            selectedRates.totalPrice.requested?.currency ??
            selectedRates.totalPrice.local.currency
          }
+          isCampaignRate={selectedRates?.rates?.some(
+            (room) => room != null && room.type === "campaign"
+          )}
          rooms={selectedRates.rates
            .map((room, idx) => {
              if (!room) {
@@ -308,6 +321,7 @@ export default function SummaryContent({
                breakfastIncluded:
                  room?.rateDefinition.breakfastIncluded ?? false,
                rateDefinition: room.rateDefinition,
+                bookingCode: room.bookingCode,
              }
            })
            .filter((x) => !!x)}
@@ -317,6 +331,17 @@ export default function SummaryContent({
          vat={selectedRates.vat}
        />
      </div>
+
+      {selectedRates.rates.length === 1 &&
+        (containsBookingCodeRate || cointainsCode) && (
+          <div>
+            <BookingCodeChip
+              alignCenter
+              bookingCode={input.bookingCode}
+              isCampaign={containsCampaignRate}
+            />
+          </div>
+        )}
      {!isUserLoggedIn && memberPrice ? (
        <SignupPromoDesktop
          memberPrice={{
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx
@@ -2,6 +2,7 @@ import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

 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"
@@ -33,6 +34,7 @@ interface RoomProps {
    cancellationText: string
    packages?: Packages
  }
+  showBookingCodeChip: boolean
  roomNumber: number
  roomCount: number
  isMember: boolean
@@ -43,6 +45,7 @@ export default function Room({
  roomNumber,
  roomCount,
  isMember,
+  showBookingCodeChip,
 }: RoomProps) {
  const intl = useIntl()
  const adults = room.adults
@@ -271,6 +274,13 @@ export default function Room({
          </Typography>
        ))}
      </div>
+      {showBookingCodeChip && (
+        <BookingCodeChip
+          isCampaign={room.roomRate.rateDefinition.isCampaignRate}
+          bookingCode={room.roomRate.bookingCode}
+          alignCenter
+        />
+      )}
      <Divider color="Border/Divider/Subtle" />
    </>
  )
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
@@ -6,6 +6,7 @@ export function RemoveBookingCodeButton() {
  const {
    input: { bookingCode },
    actions: { removeBookingCode },
+    hasCampaignRates,
  } = useSelectRateContext()

  if (!bookingCode) {
@@ -16,6 +17,7 @@ export function RemoveBookingCodeButton() {
    <BookingCodeChip
      bookingCode={bookingCode}
      filledIcon
+      isCampaign={hasCampaignRates}
      withCloseButton={true}
      withText={false}
      onClose={() => {
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
@@ -148,8 +148,9 @@ function Inner({
    id: "booking.campaign",
    defaultMessage: "Campaign",
  })
+
  if (product.bookingCode) {
-    bannerText = product.bookingCode
+    bannerText = `${bannerText} ∙ ${product.bookingCode.trim()}`
  }

  if (product.rateDefinition.breakfastIncluded) {
@@ -157,11 +158,6 @@ function Inner({
      id: "booking.breakfastIncluded",
      defaultMessage: "Breakfast included",
    })}`
-  } else {
-    bannerText = `${bannerText} ∙ ${intl.formatMessage({
-      id: "booking.breakfastExcluded",
-      defaultMessage: "Breakfast excluded",
-    })}`
  }

  const pkgsSum = sumPackages(selectedPackages)
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
@@ -1,7 +1,5 @@
 "use client"

-import { Divider } from "@scandic-hotels/design-system/Divider"
-
 import { useSelectRateContext } from "../../../../../../../contexts/SelectRate/SelectRateContext"
 import { BookingCodeFilterEnum } from "../../../../../../../stores/bookingCode-filter"
 import { BreakfastMessage } from "./BreakfastMessage"
@@ -44,22 +42,38 @@ export function Rates({
    selectedPackages,
  }
  const showAllRates = bookingCodeFilter === BookingCodeFilterEnum.All
-  const hasBookingCodeRates = !!(campaign.length || code.length)
  const hasRegularRates = !!regular.length
-  const showDivider = showAllRates && hasBookingCodeRates && hasRegularRates
+
+  const showSeparateCampaignBreakfastMessage = campaign.some((camp) => {
+    return (
+      camp.rateDefinition.breakfastIncluded ||
+      camp.rateDefinitionMember?.breakfastIncluded
+    )
+  })

  return (
    <>
      <Code {...sharedProps} code={code} />
+
+      {!showSeparateCampaignBreakfastMessage && showAllRates && (
+        <BreakfastMessage
+          breakfastIncludedMember={breakfastIncludedInAllRatesMember}
+          breakfastIncludedStandard={breakfastIncludedInAllRates}
+          hasRegularRates={hasRegularRates && showAllRates}
+          roomIndex={roomIndex}
+        />
+      )}
      <Campaign {...sharedProps} campaign={campaign} />
      <Redemptions {...sharedProps} redemptions={redemptions} />
-      {showDivider ? <Divider color="Border/Divider/Subtle" /> : null}
-      <BreakfastMessage
-        breakfastIncludedMember={breakfastIncludedInAllRatesMember}
-        breakfastIncludedStandard={breakfastIncludedInAllRates}
-        hasRegularRates={hasRegularRates && showAllRates}
-        roomIndex={roomIndex}
-      />
+
+      {showSeparateCampaignBreakfastMessage && showAllRates && (
+        <BreakfastMessage
+          breakfastIncludedMember={breakfastIncludedInAllRatesMember}
+          breakfastIncludedStandard={breakfastIncludedInAllRates}
+          hasRegularRates={hasRegularRates && showAllRates}
+          roomIndex={roomIndex}
+        />
+      )}
      <RegularRate {...sharedProps} regular={regular} />
    </>
  )