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

feat(SW-829): Added Total price (VAT)

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-13 14:05:01 +01:00
parent 9a667257a4
commit 80377f4e4e
5 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
View File

@@ -54,6 +54,21 @@ export default function RateSummary({
const showMemberDiscountBanner = member && !isUserLoggedIn
const summaryPriceTex = `${intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}, ${intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: roomsAvailability.occupancy?.adults }
)}${
roomsAvailability.occupancy?.children?.length
? `, ${intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: roomsAvailability.occupancy.children.length }
)}`
: ""
}`
return (
<div className={styles.summary} data-visible={isVisible}>
{showMemberDiscountBanner && (
@@ -90,9 +105,21 @@ export default function RateSummary({
</Footnote>
</div>
)}
<div className={styles.summaryPriceTextDesktop}>
<Body>
{intl.formatMessage<React.ReactNode>(
{ id: "<b>Total price</b> (incl VAT)" },
{ b: (str) => <b>{str}</b> }
)}
</Body>
<Caption color="uiTextMediumContrast">{summaryPriceTex}</Caption>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceTextDesktop}>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
<Subtitle
color={isUserLoggedIn ? "red" : "uiTextHighContrast"}
textAlign="right"
>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
@@ -114,35 +141,19 @@ export default function RateSummary({
color="uiTextMediumContrast"
className={styles.summaryPriceTextMobile}
>
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
,{" "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: roomsAvailability.occupancy?.adults }
)}
{roomsAvailability.occupancy?.children?.length && (
<>
,{" "}
{intl.formatMessage(
{ id: "booking.children" },
{
totalChildren:
roomsAvailability.occupancy.children.length,
}
)}
</>
)}
{summaryPriceTex}
</Footnote>
</div>
{isPetRoomSelected && (
<div className={styles.petInfo}>
<Body color="uiTextHighContrast" textTransform="bold">
<Body
color="uiTextHighContrast"
textTransform="bold"
textAlign="right"
>
+ {petRoomPrice} {petRoomCurrency}
</Body>
<Body color="uiTextMediumContrast">
<Body color="uiTextMediumContrast" textAlign="right">
{intl.formatMessage({ id: "Pet charge" })}
</Body>
</div>

4
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -52,6 +52,10 @@
text-align: left;
}
.textAlignRight {
text-align: right;
}
.black {
color: var(--Main-Grey-100);
}

2
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -30,6 +30,7 @@ const config = {
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
@@ -52,6 +53,7 @@ const fontOnlyconfig = {
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,

4
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -47,6 +47,10 @@
text-align: left;
}
.right {
text-align: right;
}
.black {
color: var(--Main-Grey-100);
}

1
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -18,6 +18,7 @@ const config = {
textAlign: {
center: styles.center,
left: styles.left,
right: styles.right,
},
textTransform: {
regular: styles.regular,