fix: always use totalPrice to display roomCharge

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

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>