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/EnterDetails/Summary/UI/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;
}
}

23
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -21,7 +21,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import PriceDetailsTable from "./PriceDetailsTable"
import { mapToPrice } from "./mapToPrice"
import styles from "./ui.module.css"
@@ -95,6 +95,8 @@ export default function SummaryUI({
? totalPrice.requested.currency === totalPrice.local.currency
: false
const priceDetailsRooms = mapToPrice(rooms, isMember)
return (
<section className={styles.summary}>
<header className={styles.header}>
@@ -440,17 +442,14 @@ export default function SummaryUI({
{ b: (str) => <b>{str}</b> }
)}
</Body>
<PriceDetailsModal>
<PriceDetailsTable
bookingCode={booking.bookingCode}
fromDate={booking.fromDate}
isMember={isMember}
rooms={rooms.map((r) => r.room)}
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 textTransform="bold" data-testid="total-price">

65
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/mapToPrice.ts Normal file
View File

@@ -0,0 +1,65 @@
import type { RoomState } from "@/types/stores/enter-details"
export function mapToPrice(rooms: RoomState[], isMember: boolean) {
return rooms
.filter((room) => room && room.room.roomRate)
.map(({ room }, idx) => {
const isMainRoom = idx === 0
if ("corporateCheque" in room.roomRate) {
return {
...room,
packages: room.roomFeatures,
price: {
corporateCheque: room.roomRate.corporateCheque.localPrice,
},
}
}
if ("redemption" in room.roomRate) {
return {
...room,
packages: room.roomFeatures,
price: {
redemption: room.roomRate.redemption.localPrice,
},
}
}
if ("voucher" in room.roomRate) {
return {
...room,
packages: room.roomFeatures,
price: {
voucher: room.roomRate.voucher,
},
}
}
const isMemberRate = !!(room.guest.join || room.guest.membershipNo)
if ((isMember && isMainRoom) || isMemberRate) {
if ("member" in room.roomRate && room.roomRate.member) {
return {
...room,
packages: room.roomFeatures,
price: {
regular: room.roomRate.member.localPrice,
},
}
}
}
if ("public" in room.roomRate && room.roomRate.public) {
return {
...room,
packages: room.roomFeatures,
price: {
regular: room.roomRate.public.localPrice,
},
}
}
console.error(room.roomRate)
throw new Error(`Unknown roomRate`)
})
}