fix: always use totalPrice to display roomCharge

2025-04-16 12:41:37 +02:00
parent edc4f0c016
commit b5deb84b33
7 changed files with 209 additions and 82 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetails/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetails/index.tsx
@@ -30,6 +30,8 @@ export default function PriceDetails() {
    .startOf("day")
    .diff(dt(fromDate).startOf("day"), "days")

+  console.log({ rooms })
+
  const totalPrice = rooms.reduce<Price>(
    (total, room) => {
      if (!room) {
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -210,17 +210,17 @@ export default function SummaryUI({
                  <Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
                    {showMemberPrice
                      ? formatPrice(
-                          intl,
-                          memberPrice.amount,
-                          memberPrice.currency
-                        )
+                        intl,
+                        memberPrice.amount,
+                        memberPrice.currency
+                      )
                      : formatPrice(
-                          intl,
-                          room.roomPrice.perStay.local.price,
-                          room.roomPrice.perStay.local.currency,
-                          room.roomPrice.perStay.local.additionalPrice,
-                          room.roomPrice.perStay.local.additionalPriceCurrency
-                        )}
+                        intl,
+                        room.roomPrice.perStay.local.price,
+                        room.roomPrice.perStay.local.currency,
+                        room.roomPrice.perStay.local.additionalPrice,
+                        room.roomPrice.perStay.local.additionalPriceCurrency
+                      )}
                  </Body>
                </div>
                <Caption color="uiTextMediumContrast">
@@ -272,22 +272,22 @@ export default function SummaryUI({
              </div>
              {room.roomFeatures
                ? room.roomFeatures.map((feature) => (
-                    <div className={styles.entry} key={feature.code}>
-                      <div>
-                        <Body color="uiTextHighContrast">
-                          {feature.description}
-                        </Body>
-                      </div>
-
+                  <div className={styles.entry} key={feature.code}>
+                    <div>
                      <Body color="uiTextHighContrast">
-                        {formatPrice(
-                          intl,
-                          feature.localPrice.price,
-                          feature.localPrice.currency
-                        )}
+                        {feature.description}
                      </Body>
                    </div>
-                  ))
+
+                    <Body color="uiTextHighContrast">
+                      {formatPrice(
+                        intl,
+                        feature.localPrice.price,
+                        feature.localPrice.currency
+                      )}
+                    </Body>
+                  </div>
+                ))
                : null}
              {room.bedType ? (
                <div className={styles.entry}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/PriceType.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/PriceType.tsx
@@ -0,0 +1,62 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import Cheques from "../Cheques"
+import Points from "../Points"
+import Price from "../Price"
+
+import { PriceTypeEnum } from "@/types/components/hotelReservation/myStay/myStay"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+interface PriceTypeProps
+  extends Pick<
+    BookingConfirmation["booking"],
+    "cheques" | "rateDefinition" | "roomPoints" | "totalPrice" | "vouchers"
+  > {
+  isCancelled: boolean
+  priceType: PriceTypeEnum
+}
+
+export default function PriceType({
+  cheques,
+  isCancelled,
+  priceType,
+  rateDefinition,
+  roomPoints,
+  totalPrice,
+  vouchers,
+}: PriceTypeProps) {
+  const intl = useIntl()
+
+  switch (priceType) {
+    case PriceTypeEnum.cheque:
+      return <Cheques cheques={cheques} price={isCancelled ? 0 : totalPrice} />
+    case PriceTypeEnum.money:
+      return (
+        <Price
+          isMember={rateDefinition.isMemberRate}
+          price={isCancelled ? 0 : totalPrice}
+          variant="Title/Subtitle/lg"
+        />
+      )
+    case PriceTypeEnum.points:
+      return <Points points={roomPoints} variant="Title/Subtitle/lg" />
+    case PriceTypeEnum.voucher:
+      return (
+        <Typography variant="Title/Subtitle/lg">
+          <p>
+            {intl.formatMessage(
+              {
+                defaultMessage: "{count} voucher",
+              },
+              { count: vouchers }
+            )}
+          </p>
+        </Typography>
+      )
+    default:
+      return null
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
@@ -16,11 +16,11 @@ import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"

 import { IconForFeatureCode } from "../../utils"
-import PriceType from "../PriceType"
 import { hasModifiableRate } from "../utils"
 import { hasBreakfastPackageFromBookingFlow } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
 import MultiRoomSkeleton from "./MultiRoomSkeleton"
+import PriceType from "./PriceType"
 import ToggleSidePeek from "./ToggleSidePeek"

 import styles from "./multiRoom.module.css"
@@ -33,10 +33,10 @@ import type { User } from "@/types/user"
 interface MultiRoomProps {
  booking?: BookingConfirmation["booking"]
  room?:
-    | (Room & {
-        bedType: Room["roomTypes"][number]
-      })
-    | null
+  | (Room & {
+    bedType: Room["roomTypes"][number]
+  })
+  | null
  bookingPromise?: Promise<BookingConfirmation | null>
  index?: number
  user: User | null
@@ -243,26 +243,26 @@ export default function MultiRoom({
            item.code as RoomPackageCodeEnum
          )
        ) && (
-          <div className={styles.packages}>
-            {packages
-              .filter((item) =>
-                Object.values(RoomPackageCodeEnum).includes(
-                  item.code as RoomPackageCodeEnum
+            <div className={styles.packages}>
+              {packages
+                .filter((item) =>
+                  Object.values(RoomPackageCodeEnum).includes(
+                    item.code as RoomPackageCodeEnum
+                  )
                )
-              )
-              .map((item) => {
-                return (
-                  <span className={styles.package} key={item.code}>
-                    <IconForFeatureCode
-                      featureCode={item.code}
-                      size={16}
-                      color="Icon/Interactive/Default"
-                    />
-                  </span>
-                )
-              })}
-          </div>
-        )}
+                .map((item) => {
+                  return (
+                    <span className={styles.package} key={item.code}>
+                      <IconForFeatureCode
+                        featureCode={item.code}
+                        size={16}
+                        color="Icon/Interactive/Default"
+                      />
+                    </span>
+                  )
+                })}
+            </div>
+          )}
        <div className={styles.imageContainer}>
          <Image
            src={roomInfo?.images[0]?.imageSizes.small ?? ""}
@@ -332,11 +332,11 @@ export default function MultiRoom({
                  })) ?? []
                )
                  ? intl.formatMessage({
-                      defaultMessage: "Included",
-                    })
+                    defaultMessage: "Included",
+                  })
                  : intl.formatMessage({
-                      defaultMessage: "Not included",
-                    })}
+                    defaultMessage: "Not included",
+                  })}
              </p>
            </Typography>
          </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/PriceType.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/PriceType.tsx
@@ -0,0 +1,63 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
+
+import Cheques from "../Cheques"
+import Points from "../Points"
+import Price from "../Price"
+
+import { PriceTypeEnum } from "@/types/components/hotelReservation/myStay/myStay"
+
+export default function PriceType() {
+  const intl = useIntl()
+  const {
+    cheques,
+    isCancelled,
+    priceType,
+    rateDefinition,
+    roomPoints,
+    totalPrice,
+    vouchers,
+  } = useMyStayRoomDetailsStore((state) => ({
+    cheques: state.bookedRoom.cheques,
+    isCancelled: state.bookedRoom.isCancelled,
+    priceType: state.bookedRoom.priceType,
+    rateDefinition: state.bookedRoom.rateDefinition,
+    roomPoints: state.bookedRoom.roomPoints,
+    totalPrice: state.bookedRoom.totalPrice,
+    vouchers: state.bookedRoom.vouchers,
+  }))
+
+  switch (priceType) {
+    case PriceTypeEnum.cheque:
+      return <Cheques cheques={cheques} price={isCancelled ? 0 : totalPrice} />
+    case PriceTypeEnum.money:
+      return (
+        <Price
+          isMember={rateDefinition.isMemberRate}
+          price={isCancelled ? 0 : totalPrice}
+          variant="Title/Subtitle/lg"
+        />
+      )
+    case PriceTypeEnum.points:
+      return <Points points={roomPoints} variant="Title/Subtitle/lg" />
+    case PriceTypeEnum.voucher:
+      return (
+        <Typography variant="Title/Subtitle/lg">
+          <p>
+            {intl.formatMessage(
+              {
+                defaultMessage: "{count} voucher",
+              },
+              { count: vouchers }
+            )}
+          </p>
+        </Typography>
+      )
+    default:
+      return null
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
@@ -18,8 +18,8 @@ import { formatPrice } from "@/utils/numberFormatting"

 import GuestDetails from "../GuestDetails"
 import PriceDetails from "../PriceDetails"
-import PriceType from "../PriceType"
 import { hasModifiableRate } from "../utils"
+import PriceType from "./PriceType"
 import ToggleSidePeek from "./ToggleSidePeek"

 import styles from "./room.module.css"
@@ -119,14 +119,14 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {

  const breakfastText = rateDefinition.breakfastIncluded
    ? intl.formatMessage({
-        defaultMessage: "Included",
-      })
+      defaultMessage: "Included",
+    })
    : breakfast
      ? formatPrice(
-          intl,
-          breakfast.localPrice.totalPrice,
-          breakfast.localPrice.currency
-        )
+        intl,
+        breakfast.localPrice.totalPrice,
+        breakfast.localPrice.currency
+      )
      : null

  return (
@@ -183,26 +183,26 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                item.code as RoomPackageCodeEnum
              )
            ) && (
-              <div className={styles.packages}>
-                {packages
-                  .filter((item) =>
-                    Object.values(RoomPackageCodeEnum).includes(
-                      item.code as RoomPackageCodeEnum
+                <div className={styles.packages}>
+                  {packages
+                    .filter((item) =>
+                      Object.values(RoomPackageCodeEnum).includes(
+                        item.code as RoomPackageCodeEnum
+                      )
                    )
-                  )
-                  .map((item) => {
-                    return (
-                      <span className={styles.package} key={item.code}>
-                        <IconForFeatureCode
-                          featureCode={item.code}
-                          size={16}
-                          color="Icon/Interactive/Default"
-                        />
-                      </span>
-                    )
-                  })}
-              </div>
-            )}
+                    .map((item) => {
+                      return (
+                        <span className={styles.package} key={item.code}>
+                          <IconForFeatureCode
+                            featureCode={item.code}
+                            size={16}
+                            color="Icon/Interactive/Default"
+                          />
+                        </span>
+                      )
+                    })}
+                </div>
+              )}
            <div className={styles.imageContainer}>
              <Image
                key={image.imageSizes.small}
@@ -368,11 +368,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                      <p color="uiTextHighContrast">
                        {bedType.mainBed.description}
                        {bedType.mainBed.widthRange.min ===
-                        bedType.mainBed.widthRange.max
+                          bedType.mainBed.widthRange.max
                          ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                            ` (${mainBedWidthValueMsg})`
+                          ` (${mainBedWidthValueMsg})`
                          : // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                            ` (${mainBedWidthRangeMsg})`}
+                          ` (${mainBedWidthRangeMsg})`}
                      </p>
                    </Typography>
                  </div>
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx
@@ -53,7 +53,7 @@ export default function VoucherPrice({

  let averagePricePerNight = `${price.numberOfVouchers} ${CurrencyEnum.Voucher}`
  if (averageAdditionalPricePerNight) {
-    averagePricePerNight = `${averagePricePerNight} + ${averageAdditionalPricePerNight} ${pkgsSum.currency}`
+    averagePricePerNight = `${averagePricePerNight} + ${averageAdditionalPricePerNight} ${pkgsSum.currency ?? currency}`
  }

  return (
@@ -68,7 +68,7 @@ export default function VoucherPrice({
          price.numberOfVouchers,
          CurrencyEnum.Voucher,
          additionalPricePerStay,
-          pkgsSum.currency
+          pkgsSum.currency ?? currency
        )}
      />
    </>