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

Merged in feat/sw-1602-preliminary-receipt (pull request #1595)

Browse Source 
feat/sw-1602 preliminary receipt

* feat(sw-1602): create page for preliminary receipt

* Add link to my stay page


Approved-by: Pontus Dreij
This commit is contained in:
Niclas Edenvin
2025-03-24 07:55:15 +00:00
parent c4f8ff8bb5
commit efa7336ebd
21 changed files with 902 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx Normal file
View File

@@ -0,0 +1,185 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import styles from "./specification.module.css"
import type { SpecificationProps } from "@/types/components/hotelReservation/myStay/receipt"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
export default async function Specification({
ancillaryPackages,
booking,
currency,
}: SpecificationProps) {
const intl = await getIntl()
const breakfastPackages = booking.packages.filter(
(p) => p.type === "Breakfast"
)
const breakfastTotalPriceInMoney = breakfastPackages
.filter((p) => p.currency !== "Points")
.reduce((acc, curr) => acc + curr.totalPrice, 0)
const breakfastTotalPriceInPoints = breakfastPackages
.filter((p) => p.currency === "Points")
.reduce((acc, curr) => acc + curr.totalPrice, 0)
const breakfastCount = breakfastPackages.reduce(
(acc, curr) => acc + curr.unit,
0
)
const breakfastMoneyString =
breakfastTotalPriceInMoney > 0
? `${breakfastTotalPriceInMoney} ${currency}`
: ""
const breakfastPointsString =
breakfastTotalPriceInPoints > 0
? `${breakfastTotalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
: ""
const breakfastPlusString =
breakfastMoneyString && breakfastPointsString ? " + " : ""
const petRoomPackage = booking.packages.find(
(p) => p.code === RoomPackageCodeEnum.PET_ROOM
)
const roomPriceExclVat =
booking.roomPrice - (booking.roomPrice * booking.vatPercentage) / 100
const roomPriceVat = booking.roomPrice - roomPriceExclVat
return (
<div className={styles.container}>
<div>
{/****** The room ********/}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{intl.formatMessage({ id: "Accommodation" })}
{!booking.rateDefinition.mustBeGuaranteed && (
<>
{" - "}
{intl.formatMessage({ id: "Room is prepaid" })}
</>
)}
</span>
</Typography>
<dl className={styles.dl}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>{intl.formatMessage({ id: "Price including VAT" })}</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>
{!booking.rateDefinition.mustBeGuaranteed &&
`(${intl.formatMessage({ id: "PREPAID" })}) `}
{`${booking.roomPrice} ${currency}`}
</dd>
</Typography>
{petRoomPackage && (
<>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{intl.formatMessage({ id: "Pet room charge including VAT" })}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{`${petRoomPackage.totalPrice} ${petRoomPackage.currency}`}</dd>
</Typography>
</>
)}
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "Price excluding VAT" })}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd
className={styles.tertiary}
>{`${roomPriceExclVat.toFixed(2)} ${currency}`}</dd>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt className={styles.tertiary}>
{intl.formatMessage({ id: "VAT" })} {booking.vatPercentage} %
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd
className={styles.tertiary}
>{`${roomPriceVat.toFixed(2)} ${currency}`}</dd>
</Typography>
</dl>
</div>
{/****** Ancillaries ********/}
{booking.ancillaries.map((ancillary) => (
<>
<Divider color="subtle" />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{ancillaryPackages?.flatMap((a) =>
a.ancillaryContent.filter(
(aa) =>
aa.id === ancillary.code ||
aa.loyaltyCode === ancillary.code
)
)[0]?.title ?? intl.formatMessage({ id: "Unknown item" })}
</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{`x ${ancillary.unit}`}</span>
</Typography>
</div>
<dl className={styles.dl}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{ancillary.currency !== "Points"
? intl.formatMessage({ id: "Price including VAT" })
: intl.formatMessage({ id: "Price" })}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{`${ancillary.totalPrice} ${ancillary.currency}`}</dd>
</Typography>
</dl>
</div>
</>
))}
{/****** Breakfast ********/}
{breakfastCount > 0 && (
<>
<Divider color="subtle" />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{intl.formatMessage({ id: "Breakfast" })}</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{`x ${breakfastCount}`}</span>
</Typography>
</div>
<dl className={styles.dl}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dt>
{breakfastTotalPriceInMoney > 0
? intl.formatMessage({ id: "Price including VAT" })
: intl.formatMessage({ id: "Price" })}
</dt>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<dd>{`${breakfastMoneyString}${breakfastPlusString}${breakfastPointsString}`}</dd>
</Typography>
</dl>
</div>
</>
)}
</div>
)
}

26
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css Normal file
View File

@@ -0,0 +1,26 @@
.container {
display: flex;
padding: 0 var(--Spacing-x2);
flex-direction: column;
gap: var(--Spacing-x2);
}
.tertiary {
color: var(--Text-Tertiary);
}
.dl {
display: grid;
grid-template-columns: auto auto;
gap: var(--Spacing-x-half);
padding: 8px 0;
}
.dl dd {
text-align: right;
}
.quantifyingHeader {
display: flex;
justify-content: space-between;
}