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

fix: unite all price details modals to one and align on ui

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-04-15 15:04:11 +02:00
committed by Michael Zetterberg
parent 8152aea649
commit 1f94c581ae
54 changed files with 1926 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/priceDetailsTable.module.css
View File

@@ -1,36 +0,0 @@
.priceDetailsTable {
border-collapse: collapse;
width: 100%;
}
.price {
text-align: end;
}
.tableSection {
display: flex;
gap: var(--Spacing-x-half);
flex-direction: column;
width: 100%;
}
.tableSection:has(tr > th) {
padding-top: var(--Spacing-x2);
}
.tableSection:has(tr > th):not(:first-of-type) {
border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
.tableSection:not(:last-child) {
padding-bottom: var(--Spacing-x2);
}
.row {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.priceDetailsTable {
min-width: 512px;
}
}

25
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
import { useRatesStore } from "@/stores/select-rate"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
@@ -18,7 +19,7 @@ import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import { isBookingCodeRate } from "./isBookingCodeRate"
import PriceDetailsTable from "./PriceDetailsTable"
import { mapToPrice } from "./mapToPrice"
import styles from "./summary.module.css"
@@ -34,6 +35,7 @@ export default function Summary({
vat,
toggleSummaryOpen,
}: SelectRateSummaryProps) {
const rateSummary = useRatesStore((state) => state.rateSummary)
const intl = useIntl()
const lang = useLang()
@@ -66,6 +68,8 @@ export default function Summary({
)
const showDiscounted = containsBookingCodeRate || isMember
const priceDetailsRooms = mapToPrice(rateSummary, booking, isMember)
return (
<section className={styles.summary}>
<header className={styles.header}>
@@ -304,17 +308,14 @@ export default function Summary({
{ b: (str) => <b>{str}</b> }
)}
</Body>
<PriceDetailsModal>
<PriceDetailsTable
bookingCode={booking.bookingCode}
fromDate={booking.fromDate}
isMember={isMember}
rooms={rooms}
toDate={booking.toDate}
totalPrice={totalPrice}
vat={vat}
/>
</PriceDetailsModal>
<PriceDetailsModal
bookingCode={booking.bookingCode}
fromDate={booking.fromDate}
rooms={priceDetailsRooms}
toDate={booking.toDate}
totalPrice={totalPrice}
vat={vat}
/>
</div>
<div>
<Body

59
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapToPrice.ts Normal file
View File

@@ -0,0 +1,59 @@
import type {
Rate,
SelectRateSearchParams,
} from "@/types/components/hotelReservation/selectRate/selectRate"
import type { Room } from "@/components/HotelReservation/PriceDetailsModal/PriceDetailsTable"
export function mapToPrice(
rooms: (Rate | null)[],
booking: SelectRateSearchParams,
isUserLoggedIn: boolean
) {
return rooms
.map((room, idx) => {
if (!room) {
return null
}
let price = null
if ("corporateCheque" in room.product) {
price = {
corporateCheque: room.product.corporateCheque.localPrice,
}
} else if ("redemption" in room.product) {
price = {
redemption: room.product.redemption.localPrice,
}
} else if ("voucher" in room.product) {
price = {
voucher: room.product.voucher,
}
} else {
const isMainRoom = idx === 0
const memberRate = room.product.member
const onlyMemberRate = !room.product.public && memberRate
if ((isUserLoggedIn && isMainRoom && memberRate) || onlyMemberRate) {
price = {
regular: memberRate.localPrice,
}
} else if (room.product.public) {
price = {
regular: room.product.public.localPrice,
}
}
}
const bookingRoom = booking.rooms[idx]
return {
adults: bookingRoom.adults,
bedType: undefined,
breakfast: undefined,
breakfastIncluded: room.product.rateDefinition.breakfastIncluded,
childrenInRoom: bookingRoom.childrenInRoom,
packages: room.packages,
price,
roomType: room.roomType,
}
})
.filter((r) => !!(r && r.price)) as Room[]
}

50
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
View File

@@ -1,6 +1,9 @@
import { sumPackages } from "@/components/HotelReservation/utils"
import type { Price } from "@/types/components/hotelReservation/price"
import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
import { CurrencyEnum } from "@/types/enums/currency"
import type { Packages } from "@/types/requests/packages"
import type { RedemptionProduct } from "@/types/trpc/routers/hotel/roomAvailability"
export function calculateTotalPrice(
@@ -87,16 +90,28 @@ export function calculateTotalPrice(
}
export function calculateRedemptionTotalPrice(
redemption: RedemptionProduct["redemption"]
redemption: RedemptionProduct["redemption"],
packages: Packages | null
) {
const pkgsSum = sumPackages(packages)
let additionalPrice
if (redemption.localPrice.additionalPricePerStay) {
additionalPrice =
redemption.localPrice.additionalPricePerStay + pkgsSum.price
} else if (pkgsSum.price) {
additionalPrice = pkgsSum.price
}
let additionalPriceCurrency
if (redemption.localPrice.currency) {
additionalPriceCurrency = redemption.localPrice.currency
} else if (pkgsSum.currency) {
additionalPriceCurrency = pkgsSum.currency
}
return {
local: {
additionalPrice: redemption.localPrice.additionalPricePerStay
? redemption.localPrice.additionalPricePerStay
: undefined,
additionalPriceCurrency: redemption.localPrice.currency
? redemption.localPrice.currency
: undefined,
additionalPrice,
additionalPriceCurrency,
currency: CurrencyEnum.POINTS,
price: redemption.localPrice.pointsPerStay,
},
@@ -111,13 +126,9 @@ export function calculateVoucherPrice(selectedRateSummary: Rate[]) {
}
const rate = room.product.voucher
return {
local: {
currency: total.local.currency,
price: total.local.price + rate.numberOfVouchers,
},
requested: undefined,
}
total.local.price = total.local.price + rate.numberOfVouchers
return total
},
{
local: {
@@ -136,12 +147,17 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) {
return total
}
const rate = room.product.corporateCheque
const pkgsSum = sumPackages(room.packages)
total.local.price = total.local.price + rate.localPrice.numberOfCheques
if (rate.localPrice.additionalPricePerStay) {
total.local.additionalPrice =
(total.local.additionalPrice || 0) +
rate.localPrice.additionalPricePerStay
rate.localPrice.additionalPricePerStay +
pkgsSum.price
} else if (pkgsSum.price) {
total.local.additionalPrice =
(total.local.additionalPrice || 0) + pkgsSum.price
}
if (rate.localPrice.currency) {
total.local.additionalPriceCurrency = rate.localPrice.currency
@@ -196,11 +212,11 @@ export function getTotalPrice(
return calculateTotalPrice(summaryArray, isUserLoggedIn)
}
const { product } = mainRoomProduct
const { packages, product } = mainRoomProduct
// In case of reward night (redemption) or voucher only single room booking is supported by business rules
if ("redemption" in product) {
return calculateRedemptionTotalPrice(product.redemption)
return calculateRedemptionTotalPrice(product.redemption, packages)
}
if ("voucher" in product) {
return calculateVoucherPrice(summaryArray)