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