fix: always use totalPrice to display roomCharge
This commit is contained in:
Simon Emanuelsson
committed by
Simon.Emanuelsson
Simon.Emanuelsson
parent
edc4f0c016
commit
b5deb84b33
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user