Merged in feat/sw-1839-show-added-breakfast (pull request #1673)

Feat/sw-1839 show added breakfast

* Fix wrong space character

* Change to correct CSS variable

* Show added breakfast ancillary in the "My add-ons" section

* Show breakfast info in room card

* Show breakfast in price details table

* Format price


Approved-by: Pontus Dreij

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css

@@ -44,7 +44,7 @@
 
 .breakfastPriceBox {
   display: flex;
-  padding: var(--Space-15);
+  padding: var(--Space-x15);
   flex: 1 0 0;
   border-radius: var(--Corner-radius-md);
   border: 1px solid var(--Base-Border-Subtle);

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/navigation"
+import { useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
@@ -9,11 +10,14 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"
 import RemoveButton from "./RemoveButton"
 
 import styles from "./addedAncillaries.module.css"
 
 import type { AddedAncillariesProps } from "@/types/components/myPages/myStay/ancillaries"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+import type { PackageSchema } from "@/types/trpc/routers/booking/confirmation"
 
 export function AddedAncillaries({
   ancillaries,
@@ -22,6 +26,43 @@ export function AddedAncillaries({
   const intl = useIntl()
   const router = useRouter()
 
+  /**
+   * All ancillaries that are added to the booking
+   *
+   * Adding a special ancillary for breakfast, calculated from
+   * all breakfast packages that has been added as ancillaries,
+   * not in the booking flow.
+   */
+  const addedAncillaries = useMemo(() => {
+    const addedBreakfastPackages = getBreakfastPackagesFromAncillaryFlow(
+      booking.packages
+    )
+    if (!addedBreakfastPackages?.length) {
+      return booking.ancillaries
+    }
+
+    const combinedBreakfastPackageAsAncillary: PackageSchema = {
+      code: BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST,
+      unitPrice: 0,
+      points: 0,
+      currency: addedBreakfastPackages[0].currency,
+      type: addedBreakfastPackages[0].type,
+      description: addedBreakfastPackages[0].description,
+      comment: addedBreakfastPackages[0].comment,
+      totalPrice: addedBreakfastPackages.reduce(
+        (acc, curr) => acc + curr.totalPrice,
+        0
+      ),
+      unit: addedBreakfastPackages.reduce((acc, curr) => acc + curr.unit, 0),
+      totalUnit: addedBreakfastPackages.reduce(
+        (acc, curr) => acc + curr.totalUnit,
+        0
+      ),
+    }
+
+    return [combinedBreakfastPackageAsAncillary, ...booking.ancillaries]
+  }, [booking.ancillaries, booking.packages])
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -39,9 +80,11 @@ export function AddedAncillaries({
         )}
       </div>
 
-      {booking.ancillaries.map((ancillary) => {
+      {addedAncillaries.map((ancillary) => {
         const ancillaryTitle =
-          ancillaries?.find((a) => a.id === ancillary.code)?.title ?? ""
+          ancillary.code === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
+            ? intl.formatMessage({ id: "Breakfast" })
+            : (ancillaries?.find((a) => a.id === ancillary.code)?.title ?? "")
 
         return (
           <>

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx

@@ -18,7 +18,7 @@ import useLang from "@/hooks/useLang"
 import { IconForFeatureCode } from "../../utils"
 import Points from "../Points"
 import Price from "../Price"
-import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
+import { hasBreakfastPackageFromBookingFlow } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
 import MultiRoomSkeleton from "./MultiRoomSkeleton"
 import ToggleSidePeek from "./ToggleSidePeek"
@@ -283,7 +283,7 @@ export default function MultiRoom({
 
             <Typography variant="Body/Paragraph/mdRegular">
               <p color="uiTextHighContrast">
-                {hasBreakfastPackage(
+                {hasBreakfastPackageFromBookingFlow(
                   packages?.map((pkg) => ({
                     code: pkg.code,
                   })) ?? []

apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx

@@ -199,34 +199,20 @@ export default function PriceDetailsTable({
                 <Row
                   label={intl.formatMessage(
                     {
-                      id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+                      id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}",
-                    },
-                    { totalAdults: room.adults, totalBreakfasts: diff }
-                  )}
-                  value={formatPrice(
-                    intl,
-                    room.breakfast.localPrice.price * room.adults,
-                    room.breakfast.localPrice.currency
-                  )}
-                />
-                {room.childrenInRoom?.length ? (
-                  <Row
-                    label={intl.formatMessage(
-                      {
-                        id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                     },
                     {
+                      totalAdults: room.adults,
                       totalChildren: room.childrenInRoom.length,
                       totalBreakfasts: diff,
                     }
                   )}
                   value={formatPrice(
                     intl,
-                      0,
+                    room.breakfast.localPrice.totalPrice,
                     room.breakfast.localPrice.currency
                   )}
                 />
-                ) : null}
                 <Row
                   bold
                   label={intl.formatMessage({
@@ -234,7 +220,7 @@ export default function PriceDetailsTable({
                   })}
                   value={formatPrice(
                     intl,
-                    room.breakfast.localPrice.price * room.adults * diff,
+                    room.breakfast.localPrice.totalPrice,
                     room.breakfast.localPrice.currency
                   )}
                 />

apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx

@@ -16,12 +16,12 @@ import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
 
 import GuestDetails from "../GuestDetails"
 import Points from "../Points"
 import Price from "../Price"
 import PriceDetails from "../PriceDetails"
-import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
 import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./room.module.css"
@@ -64,6 +64,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
     bookingCode,
     roomPrice,
     roomPoints,
+    breakfast,
     packages,
     rateDefinition,
     isCancelled,
@@ -113,6 +114,16 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
     )
   )
 
+  const breakfastText = rateDefinition.breakfastIncluded
+    ? intl.formatMessage({ id: "Included" })
+    : breakfast
+      ? formatPrice(
+          intl,
+          breakfast.localPrice.totalPrice,
+          breakfast.localPrice.currency
+        )
+      : null
+
   return (
     <div>
       <article className={styles.room}>
@@ -253,6 +264,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     </Typography>
                   </div>
                 </div>
+                {breakfastText !== null && (
                   <div className={styles.row}>
                     <span className={styles.rowTitle}>
                       <MaterialIcon
@@ -266,18 +278,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     </span>
                     <div className={styles.rowContent}>
                       <Typography variant="Body/Paragraph/mdRegular">
-                      <p color="uiTextHighContrast">
+                        <p color="uiTextHighContrast">{breakfastText}</p>
-                        {hasBreakfastPackage(
-                          packages?.map((pkg) => ({
-                            code: pkg.code,
-                          })) ?? []
-                        )
-                          ? intl.formatMessage({ id: "Included" })
-                          : intl.formatMessage({ id: "Not included" })}
-                      </p>
                       </Typography>
                     </div>
                   </div>
+                )}
                 {hasPackages && (
                   <div className={styles.row}>
                     <span className={styles.rowTitle}>

apps/scandic-web/components/HotelReservation/MyStay/utils/hasBreakfastPackage.ts

@@ -1,6 +1,6 @@
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
-export function hasBreakfastPackage(
+export function hasBreakfastPackageFromBookingFlow(
   packages: {
     code: string
   }[]
@@ -12,3 +12,41 @@ export function hasBreakfastPackage(
       p.code === BreakfastPackageEnum.SPECIAL_PACKAGE_BREAKFAST
   )
 }
+
+export function getBreakfastPackagesFromBookingFlow<T extends { code: string }>(
+  packages: T[]
+): T[] | undefined {
+  // Since `FREE_CHILD_BREAKFAST` has the same code when breakfast is added
+  // in the booking flow and as ancillary we can't just do a simple filter on the codes.
+  // So we shortcircuit if there are no booking flow specific packages.
+  if (!packages || !hasBreakfastPackageFromBookingFlow(packages)) {
+    return undefined
+  }
+
+  return packages.filter(
+    (p) =>
+      p.code === BreakfastPackageEnum.REGULAR_BREAKFAST ||
+      p.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST ||
+      p.code === BreakfastPackageEnum.CHILD_PAYING_BREAKFAST ||
+      p.code === BreakfastPackageEnum.FREE_CHILD_BREAKFAST ||
+      p.code === BreakfastPackageEnum.SPECIAL_PACKAGE_BREAKFAST
+  )
+}
+
+export function getBreakfastPackagesFromAncillaryFlow<
+  T extends { code: string },
+>(packages: T[]): T[] | undefined {
+  // Since `FREE_CHILD_BREAKFAST` has the same code when breakfast is added
+  // in the booking flow and as ancillary we can't just do a simple filter on the codes.
+  // So we shortcircuit if there are any booking flow specific packages.
+  if (!packages || hasBreakfastPackageFromBookingFlow(packages)) {
+    return undefined
+  }
+
+  return packages.filter(
+    (p) =>
+      p.code === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST ||
+      p.code === BreakfastPackageEnum.ANCILLARY_CHILD_PAYING_BREAKFAST ||
+      p.code === BreakfastPackageEnum.FREE_CHILD_BREAKFAST
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts

@@ -4,6 +4,7 @@ import { dt } from "@/lib/dt"
 import { formatChildBedPreferences } from "../utils"
 import { convertToChildType } from "./convertToChildType"
 import { getPriceType } from "./getPriceType"
+import { getBreakfastPackagesFromBookingFlow } from "./hasBreakfastPackage"
 
 import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
@@ -28,37 +29,45 @@ export function mapRoomDetails({
     .startOf("day")
     .diff(dt(booking.checkInDate).startOf("day"), "days")
 
-  const breakfastPkg = booking.packages.find(
+  const breakfastPackages = getBreakfastPackagesFromBookingFlow(
-    (pkg) =>
+    booking.packages
-      pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST ||
-      pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST ||
-      pkg.code === BreakfastPackageEnum.SPECIAL_PACKAGE_BREAKFAST
   )
-
+  const featuresPackages = booking.packages.filter(
-  const featuresPkg = booking.packages.filter(
     (pkg) =>
       pkg.code === RoomPackageCodeEnum.PET_ROOM ||
       pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM ||
       pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
   )
 
-  const breakfast: BreakfastPackage | false = breakfastPkg
+  const breakfast: BreakfastPackage | null = breakfastPackages?.length
     ? {
-        code: breakfastPkg.code,
+        code: BreakfastPackageEnum.REGULAR_BREAKFAST,
-        description: breakfastPkg.description,
+        description: breakfastPackages[0].description,
         localPrice: {
-          currency: breakfastPkg.currency,
+          currency: breakfastPackages[0].currency,
-          price: breakfastPkg.unitPrice,
+          price: breakfastPackages.reduce(
-          totalPrice: breakfastPkg.totalPrice,
+            (acc, curr) => acc + curr.unitPrice,
+            0
+          ),
+          totalPrice: breakfastPackages.reduce(
+            (acc, curr) => acc + curr.totalPrice,
+            0
+          ),
         },
         requestedPrice: {
-          currency: breakfastPkg.currency,
+          currency: breakfastPackages[0].currency,
-          price: breakfastPkg.unitPrice,
+          price: breakfastPackages.reduce(
-          totalPrice: breakfastPkg.totalPrice,
+            (acc, curr) => acc + curr.unitPrice,
+            0
+          ),
+          totalPrice: breakfastPackages.reduce(
+            (acc, curr) => acc + curr.totalPrice,
+            0
+          ),
         },
         packageType: PackageTypeEnum.BreakfastAdult,
       }
-    : false
+    : null
 
   const isCancelled = booking.reservationStatus === BookingStatusEnum.Cancelled
 
@@ -112,7 +121,7 @@ export function mapRoomDetails({
     childrenInRoom,
     childrenAsString,
     terms: booking.rateDefinition.cancellationText,
-    packages: featuresPkg.map((pkg) => ({
+    packages: featuresPackages.map((pkg) => ({
       code: pkg.code as RoomPackageCodeEnum,
       description: pkg.description,
       inventories: [],

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -11,7 +11,7 @@ import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsSto
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
 import Price from "@/components/HotelReservation/MyStay/Price"
-import { hasBreakfastPackage } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
+import { hasBreakfastPackageFromBookingFlow } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
 import ImageGallery from "@/components/ImageGallery"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
@@ -218,7 +218,7 @@ export default function BookedRoomSidePeek({
                 <Typography variant="Body/Paragraph/mdRegular">
                   <p color="uiTextHighContrast">
                     {packages &&
-                    hasBreakfastPackage(
+                    hasBreakfastPackageFromBookingFlow(
                       packages.map((pkg) => ({
                         code: pkg.code,
                       }))

apps/scandic-web/i18n/dictionaries/da.json

@@ -126,6 +126,7 @@
   "Booking summary": "Opsummering",
   "Breakfast": "Morgenmad",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Morgenmad ({totalAdults, plural, one {# voksen} other {# voksne}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Morgenmad ({totalAdults, plural, one {# voksen} other {# voksne}}{totalChildren, plural, =0 {} one {, # barn} other {, # børn}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Morgenmad ({totalChildren, plural, one {# barn} other {# børn}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Morgenbuffet",

apps/scandic-web/i18n/dictionaries/de.json

@@ -127,6 +127,7 @@
   "Booking summary": "Zusammenfassung",
   "Breakfast": "Frühstück",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Frühstück ({totalAdults, plural, one {# erwachsene} other {# erwachsene}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Frühstück ({totalAdults, plural, one {# erwachsene} other {# erwachsene}}{totalChildren, plural, =0 {} one {, # kind} other {, # kinder}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Frühstück ({totalChildren, plural, one {# kind} other {# kinder}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Frühstücksbuffet",

apps/scandic-web/i18n/dictionaries/en.json

@@ -125,10 +125,11 @@
   "Booking summary": "Booking summary",
   "Breakfast": "Breakfast",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Breakfast buffet",
-  "Breakfast can only be added for the entire duration of the stay
and for all guests.": "Breakfast can only be added for the entire duration of the stay
and for all guests.",
+  "Breakfast can only be added for the entire duration of the stay and for all guests.": "Breakfast can only be added for the entire duration of the stay and for all guests.",
   "Breakfast charge": "Breakfast charge",
   "Breakfast deal can be purchased at the hotel.": "Breakfast deal can be purchased at the hotel.",
   "Breakfast excluded": "Breakfast excluded",

apps/scandic-web/i18n/dictionaries/fi.json

@@ -125,6 +125,7 @@
   "Booking summary": "Yhteenveto",
   "Breakfast": "Aamiainen",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Aamiainen ({totalAdults, plural, one {# aikuinen} other {# aikuiset}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Aamiainen ({totalAdults, plural, one {# aikuinen} other {# aikuista}}{totalChildren, plural, =0 {} one {, # lapsi} other {, # lapset}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Aamiainen ({totalChildren, plural, one {# lapsi} other {# lasta}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Aamiaisbuffet",

apps/scandic-web/i18n/dictionaries/no.json

@@ -125,6 +125,7 @@
   "Booking summary": "Sammendrag",
   "Breakfast": "Frokost",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Frokost ({totalAdults, plural, one {# voksen} other {# voksne}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Frokost ({totalAdults, plural, one {# voksen} other {# voksne}}{totalChildren, plural, =0 {} one {, # barn} other {, # barn}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Frokost ({totalChildren, plural, one {# barn} other {# barn}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Breakfast buffet",

apps/scandic-web/i18n/dictionaries/sv.json

@@ -125,6 +125,7 @@
   "Booking summary": "Sammanfattning",
   "Breakfast": "Frukost",
   "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}": "Frukost ({totalAdults, plural, one {# vuxen} other {# vuxna}}) x {totalBreakfasts}",
+  "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}": "Frukost ({totalAdults, plural, one {# vuxen} other {# vuxna}}{totalChildren, plural, =0 {} one {, # barn} other {, # barn}}) x {totalBreakfasts}",
   "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}": "Frukost ({totalChildren, plural, one {# barn} other {# barn}}) x {totalBreakfasts}",
   "Breakfast Restaurant": "Breakfast Restaurant",
   "Breakfast buffet": "Frukostbuffé",

apps/scandic-web/stores/my-stay/myStayRoomDetailsStore.ts

@@ -42,7 +42,7 @@ export type Room = Pick<
   packages: Packages | null
   bedType: BedTypeSchema
   roomPrice: RoomPrice
-  breakfast: BreakfastPackage | false
+  breakfast: BreakfastPackage | null
   mainRoom: boolean
   isPrePaid: boolean
   priceType: PriceType
@@ -133,7 +133,7 @@ export const useMyStayRoomDetailsStore = create<MyStayRoomDetailsState>(
         description: "",
         roomTypeCode: "",
       },
-      breakfast: false,
+      breakfast: null,
       linkedReservations: [],
       isCancelable: false,
       isPrePaid: false,

apps/scandic-web/types/enums/breakfast.ts

@@ -2,6 +2,7 @@ export enum BreakfastPackageEnum {
   FREE_MEMBER_BREAKFAST = "BRF0",
   FREE_CHILD_BREAKFAST = "BRFINF",
   REGULAR_BREAKFAST = "BRF1",
+  CHILD_PAYING_BREAKFAST = "BRF1C",
   SPECIAL_PACKAGE_BREAKFAST = "F01S",
   ANCILLARY_REGULAR_BREAKFAST = "BRF2",
   ANCILLARY_CHILD_PAYING_BREAKFAST = "BRF2C",