fix: always use totalPrice to display roomCharge

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
+  }
+}

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>