feat: add no breakfast message to price details modal and to conf page receipt

2025-05-09 11:56:50 +02:00
parent 3cd8c59dd3
commit ca29237f2e
14 changed files with 389 additions and 279 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetails/mapToPrice.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetails/mapToPrice.ts
@@ -4,6 +4,7 @@ import {
 } from "@/server/routers/hotels/schemas/packages"

 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import { PackageTypeEnum } from "@/types/enums/packages"
 import type { Package } from "@/types/requests/packages"
@@ -47,24 +48,37 @@ export function mapToPrice(rooms: (Room | null)[], nights: number) {
        }
      }

-      const breakfastPackage = breakfastPackageSchema.safeParse({
-        code: room.breakfast?.code,
-        description: room.breakfast?.description,
-        localPrice: {
-          currency: room.breakfast?.currency,
-          price: room.breakfast?.unitPrice,
-          totalPrice: room.breakfast?.totalPrice,
-        },
-        packageType:
-          room.breakfast?.code === BreakfastPackageEnum.REGULAR_BREAKFAST
-            ? PackageTypeEnum.BreakfastAdult
-            : "",
-        requestedPrice: {
-          currency: room.breakfast?.currency,
-          price: room.breakfast?.unitPrice,
-          totalPrice: room.breakfast?.totalPrice,
-        },
-      })
+      let breakfast:
+        | false
+        | undefined
+        | Omit<BreakfastPackage, "requestedPrice">
+      if (room.breakfast) {
+        const breakfastPackage = breakfastPackageSchema.safeParse({
+          code: room.breakfast?.code,
+          description: room.breakfast?.description,
+          localPrice: {
+            currency: room.breakfast?.currency,
+            price: room.breakfast?.unitPrice,
+            totalPrice: room.breakfast?.totalPrice,
+          },
+          packageType:
+            room.breakfast?.code === BreakfastPackageEnum.REGULAR_BREAKFAST
+              ? PackageTypeEnum.BreakfastAdult
+              : "",
+          requestedPrice: {
+            currency: room.breakfast?.currency,
+            price: room.breakfast?.unitPrice,
+            totalPrice: room.breakfast?.totalPrice,
+          },
+        })
+        if (breakfastPackage.success) {
+          breakfast = breakfastPackage.data
+        }
+      }
+
+      if (!room.breakfastIncluded && !breakfast) {
+        breakfast = false
+      }

      const packages = room.roomFeatures
        ?.map((featPkg) => {
@@ -97,7 +111,7 @@ export function mapToPrice(rooms: (Room | null)[], nights: number) {
          description: room.bedDescription,
          roomTypeCode: room.roomTypeCode || "",
        },
-        breakfast: breakfastPackage.success ? breakfastPackage.data : undefined,
+        breakfast,
        breakfastIncluded: room.rateDefinition.breakfastIncluded,
        childrenInRoom: room.childrenAges?.map((age) => ({
          age,
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/Breakfast/breakfast.module.css
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/Breakfast/breakfast.module.css
@@ -0,0 +1,12 @@
+.entry {
+  display: flex;
+  justify-content: space-between;
+}
+
+.textDefault {
+  color: var(--Text-Default);
+}
+
+.textSecondary {
+  color: var(--Text-Secondary);
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/Breakfast/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/Breakfast/index.tsx
@@ -0,0 +1,65 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./breakfast.module.css"
+
+import type { PackageSchema } from "@/types/trpc/routers/booking/confirmation"
+
+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({
+    defaultMessage: "Breakfast buffet",
+  })
+
+  if (breakfastIncluded || breakfast) {
+    const price = breakfast
+      ? formatPrice(intl, breakfast.totalPrice, breakfast.currency)
+      : intl.formatMessage({ 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({ 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
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
@@ -13,6 +13,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { formatPrice } from "@/utils/numberFormatting"

+import Breakfast from "./Breakfast"
 import RoomSkeletonLoader from "./RoomSkeletonLoader"

 import styles from "./room.module.css"
@@ -34,8 +35,7 @@ export default function ReceiptRoom({
  if (!room) {
    return <RoomSkeletonLoader />
  }
-  const breakfastIncluded =
-    room.breakfastIncluded || room.rateDefinition.breakfastIncluded
+
  const childBedCrib = room.childBedPreferences.find(
    (c) => c.bedType === ChildBedTypeEnum.Crib
  )
@@ -63,6 +63,8 @@ export default function ReceiptRoom({
    guestsParts.push(childrenMsg)
  }

+  const guests = guestsParts.join(", ")
+
  return (
    <article className={styles.room}>
      <header className={styles.roomHeader}>
@@ -83,9 +85,7 @@ export default function ReceiptRoom({
          </Typography>
        )}
        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextMediumContrast}>
-            {guestsParts.join(", ")}
-          </p>
+          <p className={styles.uiTextMediumContrast}>{guests}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.uiTextMediumContrast}>
@@ -226,37 +226,11 @@ export default function ReceiptRoom({
          </Typography>
        </div>
      ) : null}
-      {room.breakfast || breakfastIncluded ? (
-        <div className={styles.entry}>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p>
-              {intl.formatMessage({
-                defaultMessage: "Breakfast buffet",
-              })}
-            </p>
-          </Typography>
-          {breakfastIncluded ? (
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p className={styles.red}>
-                {intl.formatMessage({
-                  defaultMessage: "Included",
-                })}
-              </p>
-            </Typography>
-          ) : null}
-          {room.breakfast && !breakfastIncluded ? (
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p className={styles.uiTextHighContrast}>
-                {formatPrice(
-                  intl,
-                  room.breakfast.totalPrice,
-                  room.breakfast.currency
-                )}
-              </p>
-            </Typography>
-          ) : null}
-        </div>
-      ) : null}
+      <Breakfast
+        breakfast={room.breakfast}
+        breakfastIncluded={room.breakfastIncluded}
+        guests={guests}
+      />
    </article>
  )
 }
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
@@ -5,19 +5,30 @@ import type { IntlShape } from "react-intl"
 import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import { CurrencyEnum } from "@/types/enums/currency"
-import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
+import type {
+  BookingConfirmationSchema,
+  PackageSchema,
+} from "@/types/trpc/routers/booking/confirmation"

 export function mapRoomState(
  booking: BookingConfirmationSchema,
  room: BookingConfirmationRoom,
  intl: IntlShape
 ) {
-  const breakfast = booking.packages.find(
+  const breakfastPackage = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )
-  const breakfastIncluded = booking.packages.some(
-    (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
-  )
+  const breakfastIncluded =
+    booking.packages.some(
+      (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
+    ) || booking.rateDefinition.breakfastIncluded
+
+  let breakfast: false | undefined | PackageSchema
+  if (breakfastPackage) {
+    breakfast = breakfastPackage
+  } else if (!breakfastIncluded) {
+    breakfast = false
+  }

  let formattedRoomCost = formatPrice(
    intl,