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 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 ( return (
<div className={styles.summary} data-visible={isVisible}> <div className={styles.summary} data-visible={isVisible}>
{showMemberDiscountBanner && ( {showMemberDiscountBanner && (
@@ -90,9 +105,21 @@ export default function RateSummary({
</Footnote> </Footnote>
</div> </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.summaryPrice}>
<div className={styles.summaryPriceTextDesktop}> <div className={styles.summaryPriceTextDesktop}>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}> <Subtitle
color={isUserLoggedIn ? "red" : "uiTextHighContrast"}
textAlign="right"
>
{priceToShow?.localPrice.pricePerStay}{" "} {priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency} {priceToShow?.localPrice.currency}
</Subtitle> </Subtitle>
@@ -114,35 +141,19 @@ export default function RateSummary({
color="uiTextMediumContrast" color="uiTextMediumContrast"
className={styles.summaryPriceTextMobile} className={styles.summaryPriceTextMobile}
> >
{intl.formatMessage( {summaryPriceTex}
{ 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,
}
)}
</>
)}
</Footnote> </Footnote>
</div> </div>
{isPetRoomSelected && ( {isPetRoomSelected && (
<div className={styles.petInfo}> <div className={styles.petInfo}>
<Body color="uiTextHighContrast" textTransform="bold"> <Body
color="uiTextHighContrast"
textTransform="bold"
textAlign="right"
>
+ {petRoomPrice} {petRoomCurrency} + {petRoomPrice} {petRoomCurrency}
</Body> </Body>
<Body color="uiTextMediumContrast"> <Body color="uiTextMediumContrast" textAlign="right">
{intl.formatMessage({ id: "Pet charge" })} {intl.formatMessage({ id: "Pet charge" })}
</Body> </Body>
</div> </div>

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

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

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

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

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

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

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

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