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} />
    </>
  )
--- a/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx
+++ b/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx
@@ -413,6 +413,9 @@ export function SelectRateProvider({
                ? "ALL_SELECTED"
                : "PARTIALLY_SELECTED",
        },
+        hasCampaignRates: roomAvailability.some((roomConfig) =>
+          roomConfig.some((room) => (room?.campaign.length ?? 0) > 0)
+        ),
        activeRoomIndex: activeRoomIndex,
        actions: {
          setActiveRoom: setActiveRoomIndex,
--- a/packages/booking-flow/lib/contexts/SelectRate/types.ts
+++ b/packages/booking-flow/lib/contexts/SelectRate/types.ts
@@ -65,6 +65,7 @@ export type SelectRateContext = {

  bookingCodeFilter: BookingCodeFilterEnum
  activeRoomIndex: number
+  hasCampaignRates: boolean
  actions: {
    setActiveRoom: (roomIndex: number | "deselect" | "next") => void
    selectPackages: (args: {
--- a/packages/design-system/lib/components/BookingCodeChip/index.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/index.tsx
@@ -1,4 +1,3 @@
-import { Button as ButtonRAC } from 'react-aria-components'
 import { useIntl } from 'react-intl'

 import IconChip from '../IconChip'
@@ -8,6 +7,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'

 import styles from './bookingCodeChip.module.css'
+import { IconButton } from '../IconButton'

 type BaseBookingCodeChipProps = {
  alignCenter?: boolean
@@ -19,6 +19,7 @@ type BaseBookingCodeChipProps = {
 }
 type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
  withCloseButton?: false
+  onClose?: undefined
 }
 type BookingCodeChipWithCloseButtonProps = BaseBookingCodeChipProps & {
  withCloseButton: true
@@ -36,7 +37,8 @@ export function BookingCodeChip({
  isUnavailable,
  withText = true,
  filledIcon = false,
-  ...props
+  withCloseButton,
+  onClose,
 }: BookingCodeChipProps) {
  const intl = useIntl()

@@ -46,9 +48,13 @@ export function BookingCodeChip({
        color="green"
        icon={
          filledIcon ? (
-            <FilledDiscountIcon color="Icon/Feedback/Success" />
+            <MaterialIcon
+              icon="sell"
+              color="Icon/Feedback/Success"
+              isFilled={!!filledIcon}
+            />
          ) : (
-            <DiscountIcon color="Icon/Feedback/Success" />
+            <MaterialIcon icon="sell" color="Icon/Feedback/Success" />
          )
        }
        className={alignCenter ? styles.center : undefined}
@@ -64,10 +70,30 @@ export function BookingCodeChip({
          </Typography>
          {bookingCode && (
            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <span>{bookingCode}</span>
+              {/*eslint-disable-next-line formatjs/no-literal-string-in-jsx*/}
+              <span>∙ {bookingCode}</span>
            </Typography>
          )}
        </p>
+        {withCloseButton && (
+          <IconButton
+            style="Muted"
+            theme="Inverted"
+            wrapping
+            className={styles.removeButton}
+            onPress={onClose}
+            aria-label={intl.formatMessage({
+              id: 'booking.removeBookingCode',
+              defaultMessage: 'Remove booking code',
+            })}
+          >
+            <MaterialIcon
+              icon="close"
+              size={16}
+              color="Icon/Feedback/Success"
+            />
+          </IconButton>
+        )}
      </IconChip>
    )
  }
@@ -105,12 +131,24 @@ export function BookingCodeChip({
          <span>{bookingCode}</span>
        </Typography>
      </p>
-      {props.withCloseButton && (
-        <>
-          <ButtonRAC className={styles.removeButton} onPress={props.onClose}>
-            <MaterialIcon icon="close" size={16} color="CurrentColor" />
-          </ButtonRAC>
-        </>
+      {withCloseButton && (
+        <IconButton
+          style="Muted"
+          theme="Inverted"
+          wrapping
+          className={styles.removeButton}
+          onPress={onClose}
+          aria-label={intl.formatMessage({
+            id: 'booking.removeBookingCode',
+            defaultMessage: 'Remove booking code',
+          })}
+        >
+          <MaterialIcon
+            icon="close"
+            size={16}
+            color="Icon/Feedback/Information"
+          />
+        </IconButton>
      )}
    </IconChip>
  )
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -1,3 +1,5 @@
+import { cx } from 'class-variance-authority'
+
 import { Typography } from '../../Typography'
 import { Rate, RateTermDetails } from '../types'

@@ -56,9 +58,12 @@ export default function CampaignRateCard({
        onChange={handleChange}
      />
      <div className={classNames}>
-        <Typography variant="Label/xsBold">
-          <p className={styles.banner}>{bannerText}</p>
-        </Typography>
+        <div className={styles.banner}>
+          <MaterialIcon size={16} icon="sell" color="CurrentColor" />
+          <Typography variant="Label/xsBold">
+            <p>{bannerText}</p>
+          </Typography>
+        </div>
        <div className={styles.container}>
          <header>
            <Typography variant="Tag/sm">
@@ -67,7 +72,7 @@ export default function CampaignRateCard({
                  title={rateTitle}
                  subtitle={paymentTerm}
                  trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                      <MaterialIcon
                        icon="info"
                        size={20}
@@ -109,14 +114,17 @@ export default function CampaignRateCard({
            </div>
          </header>
          <div className={styles.content}>
-            <div
-              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
-            >
+            <div className={styles.rateRow}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>{rate.label}</p>
              </Typography>
              <Typography variant="Title/Subtitle/md">
-                <p>
+                <p
+                  className={cx(
+                    styles.rate,
+                    isHighlightedRate && styles.highlightedRate
+                  )}
+                >
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${rate.price} `}
                  <Typography variant="Body/Supporting text (caption)/smBold">
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -63,7 +63,7 @@ export default function CodeRateCard({
                  title={rateTitle}
                  subtitle={paymentTerm}
                  trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                      <MaterialIcon
                        icon="info"
                        size={20}
--- a/packages/design-system/lib/components/RateCard/Points/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Points/index.tsx
@@ -49,7 +49,7 @@ export default function PointsRateCard({
                title={rateTitle}
                subtitle={paymentTerm}
                trigger={
-                  <IconButton theme="Black" style="Muted">
+                  <IconButton theme="Black" style="Muted" wrapping>
                    <MaterialIcon icon="info" size={20} color="Icon/Default" />
                  </IconButton>
                }
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -56,7 +56,7 @@ export default function RegularRateCard({
                  title={rateTitle}
                  subtitle={paymentTerm}
                  trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                      <MaterialIcon
                        icon="info"
                        size={20}
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -58,7 +58,7 @@ label:not(:has(.radio:checked)) .checkIcon {
  border-top-right-radius: var(--Corner-radius-md);
  text-align: center;
  color: var(--Text-Inverted);
-  padding: var(--Space-x05) 0;
+  padding: var(--Space-x05) var(--Space-x1);
  text-transform: none;
 }

@@ -66,7 +66,6 @@ label:not(:has(.radio:checked)) .checkIcon {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
-
  padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
 }

@@ -100,7 +99,7 @@ label:not(:has(.radio:checked)) .checkIcon {
 }

 .highlightedRate {
-  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  color: var(--Text-Accent-Primary);
 }

 .textSecondary {
@@ -160,7 +159,19 @@ label:not(:has(.radio:checked)) .checkIcon {
 }

 .variant-campaign .banner {
-  background-color: var(--Surface-Accent-3);
+  background-color: var(
+    --Surface-Feedback-Succes-light,
+    var(--Scandic-Green-60)
+  ); /*Should be updated to only use the new token --Surface-Feedback-Succes-light when tokens are up to date*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x05);
+  align-self: stretch;
+}
+
+.variant-campaign .rate {
+  color: var(--Text-Accent-Primary);
 }

 .variant-code .banner {
--- a/packages/trpc/lib/routers/booking/output.ts
+++ b/packages/trpc/lib/routers/booking/output.ts
@@ -79,6 +79,7 @@ const rateDefinitionSchema = z.object({
  mustBeGuaranteed: z.boolean().default(false),
  rateCode: z.string().default(""),
  title: z.string().nullable().default(""),
+  isCampaignRate: z.boolean().default(false),
 })

 export const linkedReservationSchema = z.object({