scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move room charge to top in price details modal

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-05-08 11:28:22 +02:00
committed by Michael Zetterberg
parent 194a401a56
commit a99e434d84
28 changed files with 264 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/mapToPrice.ts
View File

@@ -1,5 +1,7 @@
import { dt } from "@/lib/dt"
import { sumPackages } from "../../utils"
import { PriceTypeEnum } from "@/types/components/hotelReservation/myStay/myStay"
import type { Price } from "@/types/components/hotelReservation/price"
import { CurrencyEnum } from "@/types/enums/currency"
@@ -10,7 +12,7 @@ export function mapToPrice(room: Room) {
case PriceTypeEnum.cheque:
return {
corporateCheque: {
additionalPricePerStay: room.totalPrice,
additionalPricePerStay: room.roomPrice.perStay.local.price,
currency: room.roomPrice.perStay.local.currency,
numberOfCheques: room.cheques,
},
@@ -20,7 +22,7 @@ export function mapToPrice(room: Room) {
regular: {
currency: room.currencyCode,
pricePerNight: room.roomPrice.perNight.local.price,
pricePerStay: room.totalPrice,
pricePerStay: room.roomPrice.perStay.local.price,
},
}
case PriceTypeEnum.points:
@@ -29,7 +31,7 @@ export function mapToPrice(room: Room) {
.diff(dt(room.checkInDate).startOf("day"), "days")
return {
redemption: {
additionalPricePerStay: room.totalPrice,
additionalPricePerStay: room.roomPrice.perStay.local.price,
currency: room.currencyCode,
pointsPerNight: room.roomPoints / nights,
pointsPerStay: room.roomPoints,
@@ -80,7 +82,6 @@ export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) {
switch (room.priceType) {
case PriceTypeEnum.cheque:
case PriceTypeEnum.points:
case PriceTypeEnum.voucher:
{
if (room.totalPrice) {
total.local.additionalPrice =
@@ -88,8 +89,19 @@ export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) {
}
if (!total.local.additionalPriceCurrency) {
if (room.currencyCode) {
total.local.additionalPriceCurrency = room.currencyCode
total.local.additionalPriceCurrency = currency
}
}
break
case PriceTypeEnum.voucher:
{
if (room.packages) {
const pkgsSum = sumPackages(room.packages)
total.local.additionalPrice =
(total.local.additionalPrice || 0) + pkgsSum.price
if (pkgsSum.currency) {
total.local.additionalPriceCurrency = pkgsSum.currency
} else {
total.local.additionalPriceCurrency = currency
}

7
apps/scandic-web/components/HotelReservation/MyStay/PriceType/Cheques.tsx
View File

@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { formatPrice } from "@/utils/numberFormatting"
@@ -12,15 +10,16 @@ import { CurrencyEnum } from "@/types/enums/currency"
export default function Cheques({
cheques,
currencyCode,
isCancelled,
price,
}: {
cheques: number
currencyCode: CurrencyEnum
isCancelled: boolean
price: number
}) {
const intl = useIntl()
const currency = useMyStayStore((state) => state.bookedRoom.currencyCode)
if (!cheques) {
return <SkeletonShimmer width="100px" />
@@ -31,7 +30,7 @@ export default function Cheques({
cheques,
CurrencyEnum.CC,
price,
currency
currencyCode
)
return (

7
apps/scandic-web/components/HotelReservation/MyStay/PriceType/Vouchers.tsx
View File

@@ -3,24 +3,23 @@ import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { formatPrice } from "@/utils/numberFormatting"
import { CurrencyEnum } from "@/types/enums/currency"
export default function Vouchers({
currencyCode,
isCancelled,
price,
vouchers,
}: {
currencyCode: CurrencyEnum
isCancelled: boolean
price?: number
vouchers: number
}) {
const intl = useIntl()
const currency = useMyStayStore((state) => state.bookedRoom.currencyCode)
if (!vouchers) {
return <SkeletonShimmer width="100px" />
@@ -31,7 +30,7 @@ export default function Vouchers({
vouchers,
CurrencyEnum.Voucher,
price,
currency
currencyCode
)
return (

2
apps/scandic-web/components/HotelReservation/MyStay/PriceType/index.tsx
View File

@@ -39,6 +39,7 @@ export default function PriceType({
return (
<Cheques
cheques={cheques}
currencyCode={currencyCode}
isCancelled={isCancelled}
price={totalPrice}
/>
@@ -63,6 +64,7 @@ export default function PriceType({
case PriceTypeEnum.voucher:
return (
<Vouchers
currencyCode={currencyCode}
isCancelled={isCancelled}
price={totalPrice}
vouchers={vouchers}

12
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx
View File

@@ -6,6 +6,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import PriceType from "@/components/HotelReservation/MyStay/PriceType"
import { sumPackages } from "@/components/HotelReservation/utils"
import styles from "./details.module.css"
@@ -17,6 +18,7 @@ export default function PriceDetails() {
formattedTotalPrice: state.totalPrice,
isCancelled: state.bookedRoom.isCancelled,
currencyCode: state.bookedRoom.currencyCode,
packages: state.bookedRoom.packages,
priceType: state.bookedRoom.priceType,
rateDefinition: state.bookedRoom.rateDefinition,
roomPoints: state.bookedRoom.roomPoints,
@@ -24,6 +26,14 @@ export default function PriceDetails() {
vouchers: state.bookedRoom.vouchers,
}))
let totalPrice = pricing.totalPrice
// API returns negative values for totalPrice
// on voucher bookings (╯°□°）╯︵ ┻━┻
if (pricing.vouchers && totalPrice < 0) {
const pkgsSum = sumPackages(pricing.packages)
totalPrice = pkgsSum.price
}
return (
<div className={styles.priceDetails}>
<div className={styles.price}>
@@ -34,7 +44,7 @@ export default function PriceDetails() {
})}
</p>
</Typography>
<PriceType {...pricing} />
<PriceType {...pricing} totalPrice={totalPrice} />
</div>
</div>
)

27
apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice.tsx
View File

@@ -1,26 +1,39 @@
"use client"
import { useMyStayStore } from "@/stores/my-stay"
import { sumPackages } from "../../utils"
import PriceType from "../PriceType"
import type { PriceType as _PriceType } from "@/types/components/hotelReservation/myStay/myStay"
export default function TotalPrice() {
const { bookedRoom, formattedTotalPrice } = useMyStayStore((state) => ({
bookedRoom: state.bookedRoom,
formattedTotalPrice: state.totalPrice,
}))
const { bookedRoom, formattedTotalPrice, rooms } = useMyStayStore(
(state) => ({
bookedRoom: state.bookedRoom,
formattedTotalPrice: state.totalPrice,
rooms: state.rooms,
})
)
const totalCheques = rooms.reduce((total, room) => total + room.cheques, 0)
const totalPoints = rooms.reduce((total, room) => total + room.roomPoints, 0)
let totalPrice = rooms.reduce((total, room) => total + room.totalPrice, 0)
if (rooms.some((room) => room.vouchers)) {
const pkgsSum = sumPackages(rooms.flatMap((r) => r.packages || []))
totalPrice = pkgsSum.price
}
return (
<PriceType
cheques={bookedRoom.cheques}
cheques={totalCheques}
formattedTotalPrice={formattedTotalPrice}
isCancelled={bookedRoom.isCancelled}
currencyCode={bookedRoom.currencyCode}
priceType={bookedRoom.priceType}
rateDefinition={bookedRoom.rateDefinition}
roomPoints={bookedRoom.roomPoints}
totalPrice={bookedRoom.totalPrice}
roomPoints={totalPoints}
totalPrice={totalPrice}
vouchers={bookedRoom.vouchers}
/>
)