Merged in feat/BOOK-479-scandic-go-hotels-rm-brf- (pull request #3143)

feat(BOOK-479): Updated breakfast UI for ScandicGo hotels

Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/Breakfast/breakfast.module.css

@@ -1,12 +0,0 @@
-.entry {
-  display: flex;
-  justify-content: space-between;
-}
-
-.textDefault {
-  color: var(--Text-Default);
-}
-
-.textSecondary {
-  color: var(--Text-Secondary);
-}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/Breakfast/index.tsx

@@ -1,71 +0,0 @@
-"use client"
-import { useIntl } from "react-intl"
-
-import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./breakfast.module.css"
-
-import type { PackageSchema } from "@scandic-hotels/trpc/types/bookingConfirmation"
-
-interface BreakfastProps {
-  breakfast: PackageSchema | false | undefined
-  breakfastIncluded: boolean
-  guests: string
-}
-
-export default function Breakfast({
-  breakfast,
-  breakfastIncluded,
-  guests,
-}: BreakfastProps) {
-  const intl = useIntl()
-
-  const breakfastBuffet = intl.formatMessage({
-    id: "common.breakfastBuffet",
-    defaultMessage: "Breakfast buffet",
-  })
-
-  if (breakfastIncluded || breakfast) {
-    const price = breakfast
-      ? formatPrice(intl, breakfast.totalPrice, breakfast.currency)
-      : intl.formatMessage({
-          id: "common.included",
-          defaultMessage: "Included",
-        })
-    return (
-      <div className={styles.entry}>
-        <div>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.textDefault}>{breakfastBuffet}</p>
-          </Typography>
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <p className={styles.textSecondary}>{guests}</p>
-          </Typography>
-        </div>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.textDefault}>{price}</p>
-        </Typography>
-      </div>
-    )
-  }
-
-  if (breakfast === false) {
-    const noBreakfast = intl.formatMessage({
-      id: "common.noBreakfast",
-      defaultMessage: "No breakfast",
-    })
-    return (
-      <div className={styles.entry}>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.textDefault}>{breakfastBuffet}</p>
-        </Typography>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.textDefault}>{noBreakfast}</p>
-        </Typography>
-      </div>
-    )
-  }
-
-  return null
-}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx

@@ -15,7 +15,7 @@ import { ChildBedTypeEnum } from "@scandic-hotels/trpc/enums/childBedTypeEnum"
 
 import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
-import Breakfast from "./Breakfast"
+import { SummaryBreakfast } from "../../../SummaryBreakfast"
 import RoomSkeletonLoader from "./RoomSkeletonLoader"
 
 import styles from "./room.module.css"
@@ -36,11 +36,12 @@ export function ReceiptRoom({
   showBookingCodeChip = false,
 }: BookingConfirmationReceiptRoomProps) {
   const intl = useIntl()
-  const { currencyCode, isVatCurrency, bookingCode } =
+  const { currencyCode, isVatCurrency, bookingCode, hotelOffersBreakfast } =
     useBookingConfirmationStore((state) => ({
       currencyCode: state.currencyCode,
       isVatCurrency: state.isVatCurrency,
       bookingCode: state.bookingCode,
+      hotelOffersBreakfast: state.hotelOffersBreakfast,
     }))
 
   if (!room) {
@@ -80,6 +81,11 @@ export function ReceiptRoom({
   const showDiscounted =
     room.rateDefinition.isMemberRate || room.rateDefinition.isCampaignRate
 
+  const breakfastPrice = room.breakfast
+    ? room.breakfast?.totalPrice
+    : room.breakfast
+  const breakfastCurrency = room.breakfast ? room.breakfast?.currency : null
+
   return (
     <>
       <div className={styles.room}>
@@ -275,10 +281,12 @@ export function ReceiptRoom({
             </div>
           </Typography>
         ) : null}
-        <Breakfast
-          breakfast={room.breakfast}
+        <SummaryBreakfast
+          breakfastPrice={breakfastPrice}
+          breakfastCurrency={breakfastCurrency}
           breakfastIncluded={room.breakfastIncluded}
           guests={guests}
+          hotelOffersBreakfast={hotelOffersBreakfast}
         />
 
         {showBookingCodeChip && (