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/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,31 +264,25 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     </Typography>
                   </div>
                 </div>
-                <div className={styles.row}>
-                  <span className={styles.rowTitle}>
-                    <MaterialIcon
-                      icon="coffee"
-                      color="Icon/Default"
-                      size={20}
-                    />
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <p>{intl.formatMessage({ id: "Breakfast" })}</p>
-                    </Typography>
-                  </span>
-                  <div className={styles.rowContent}>
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      <p color="uiTextHighContrast">
-                        {hasBreakfastPackage(
-                          packages?.map((pkg) => ({
-                            code: pkg.code,
-                          })) ?? []
-                        )
-                          ? intl.formatMessage({ id: "Included" })
-                          : intl.formatMessage({ id: "Not included" })}
-                      </p>
-                    </Typography>
+                {breakfastText !== null && (
+                  <div className={styles.row}>
+                    <span className={styles.rowTitle}>
+                      <MaterialIcon
+                        icon="coffee"
+                        color="Icon/Default"
+                        size={20}
+                      />
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>{intl.formatMessage({ id: "Breakfast" })}</p>
+                      </Typography>
+                    </span>
+                    <div className={styles.rowContent}>
+                      <Typography variant="Body/Paragraph/mdRegular">
+                        <p color="uiTextHighContrast">{breakfastText}</p>
+                      </Typography>
+                    </div>
                   </div>
-                </div>
+                )}
                 {hasPackages && (
                   <div className={styles.row}>
                     <span className={styles.rowTitle}>