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

feat(SW-829): Added MemberDiscountBanner to Rate Summary

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-13 13:50:08 +01:00
parent f782b69c33
commit 9a667257a4
8 changed files with 146 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,69 +52,105 @@ export default function RateSummary({
const checkOutDate = new Date(roomsAvailability.checkOutDate)
const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
const showMemberDiscountBanner = member && !isUserLoggedIn
return (
<div className={styles.summary} data-visible={isVisible}>
{showMemberDiscountBanner && (
<div className={styles.memberDiscountBannerMobile}>
<Footnote color="burgundy">
{intl.formatMessage({
id: "Join or log in while booking for member pricing.",
})}
</Footnote>
</div>
)}
<div className={styles.summaryText}>
<Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
<Body color="uiTextMediumContrast">{priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceTextDesktop}>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{priceToShow?.requestedPrice?.pricePerStay}{" "}
{priceToShow?.requestedPrice?.currency}
</Body>
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
<Footnote
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 }
)}
</>
)}
</Footnote>
</div>
{isPetRoomSelected && (
<div className={styles.petInfo}>
<Body color="uiTextHighContrast" textTransform="bold">
+ {petRoomPrice} {petRoomCurrency}
</Body>
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Pet charge" })}
</Body>
<div className={styles.summaryPriceContainer}>
{showMemberDiscountBanner && (
<div className={styles.memberDiscountBannerDesktop}>
<Footnote color="burgundy">
{intl.formatMessage<React.ReactNode>(
{
id: "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.",
},
{
span: (str) => (
<Caption color="red" type="bold" asChild>
<span>{str}</span>
</Caption>
),
amount: member.localPrice.pricePerStay,
currency: member.localPrice.currency,
}
)}
</Footnote>
</div>
)}
<Button type="submit" theme="base" className={styles.continueButton}>
{intl.formatMessage({ id: "Continue" })}
</Button>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceTextDesktop}>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{priceToShow?.requestedPrice?.pricePerStay}{" "}
{priceToShow?.requestedPrice?.currency}
</Body>
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
<Footnote
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,
}
)}
</>
)}
</Footnote>
</div>
{isPetRoomSelected && (
<div className={styles.petInfo}>
<Body color="uiTextHighContrast" textTransform="bold">
+ {petRoomPrice} {petRoomCurrency}
</Body>
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Pet charge" })}
</Body>
</div>
)}
<Button type="submit" theme="base" className={styles.continueButton}>
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
</div>
)

49
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
View File

@@ -5,8 +5,9 @@
left: 0;
right: 0;
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
padding: 0 0 var(--Spacing-x5);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--Base-Border-Subtle);
@@ -17,6 +18,14 @@
bottom: 0;
}
.summaryPriceContainer {
display: flex;
flex-direction: row;
gap: var(--Spacing-x4);
padding: var(--Spacing-x2) var(--Spacing-x3) 0;
width: 100%;
}
.summaryPrice {
display: flex;
width: 100%;
@@ -48,22 +57,50 @@
white-space: nowrap;
}
.memberDiscountBannerDesktop {
display: none;
background: var(--Primary-Light-Surface-Normal);
border-radius: var(--Corner-radius-xLarge) var(--Corner-radius-xLarge) 0px
var(--Corner-radius-xLarge);
flex-direction: row;
align-items: center;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
gap: var(--Spacing-x2);
max-width: 264px;
}
.memberDiscountBannerMobile {
width: 100%;
background: var(--Primary-Light-Surface-Normal);
padding: var(--Spacing-x-one-and-half);
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.summary {
padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x5);
flex-direction: row;
}
.petInfo,
.summaryText,
.summaryPriceTextDesktop {
display: block;
}
.summaryPriceTextMobile {
.memberDiscountBannerDesktop {
display: flex;
}
.summaryPriceTextMobile,
.memberDiscountBannerMobile {
display: none;
}
.summaryPrice {
width: auto;
}
.summaryPrice,
.continueButton {
width: auto;
}
.summaryPriceContainer {
width: auto;
padding: 0;
}
}

2
i18n/dictionaries/da.json
View File

@@ -159,6 +159,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke muligt at administrere dine kommunikationspræferencer lige nu, prøv venligst igen senere eller kontakt support, hvis problemet fortsætter.",
"Join Scandic Friends": "Tilmeld dig Scandic Friends",
"Join at no cost": "Tilmeld dig uden omkostninger",
"Join or log in while booking for member pricing.": "Tilmeld dig eller log ind under booking for medlemspris.",
"King bed": "Kingsize-seng",
"Language": "Sprog",
"Last name": "Efternavn",
@@ -330,6 +331,7 @@
"Theatre": "Teater",
"There are no transactions to display": "Der er ingen transaktioner at vise",
"Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "For at få medlemsprisen <span>{amount} {currency}</span>, log ind eller tilmeld dig, når du udfylder bookingen.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "For at sikre din reservation, beder vi om at du giver os dine betalingsoplysninger. Du kan så være sikker på, at ingen gebyrer vil blive opkrævet på dette tidspunkt.",
"Total Points": "Samlet antal point",
"Total price": "Samlet pris",

2
i18n/dictionaries/de.json
View File

@@ -159,6 +159,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Es ist derzeit nicht möglich, Ihre Kommunikationseinstellungen zu verwalten. Bitte versuchen Sie es später erneut oder wenden Sie sich an den Support, wenn das Problem weiterhin besteht.",
"Join Scandic Friends": "Treten Sie Scandic Friends bei",
"Join at no cost": "Kostenlos beitreten",
"Join or log in while booking for member pricing.": "Treten Sie Scandic Friends bei oder loggen Sie sich ein, um den Mitgliederpreis zu erhalten.",
"King bed": "Kingsize-Bett",
"Language": "Sprache",
"Last name": "Nachname",
@@ -329,6 +330,7 @@
"Theatre": "Theater",
"There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden",
"Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "Um den Mitgliederpreis von <span>{amount} {currency}</span> zu erhalten, loggen Sie sich ein oder treten Sie Scandic Friends bei, wenn Sie die Buchung abschließen.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "Um Ihre Reservierung zu sichern, bitten wir Sie, Ihre Zahlungskarteninformationen zu geben. Sie können sicher sein, dass keine Gebühren zu diesem Zeitpunkt erhoben werden.",
"Total Points": "Gesamtpunktzahl",
"Total price": "Gesamtpreis",

2
i18n/dictionaries/en.json
View File

@@ -171,6 +171,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.",
"Join Scandic Friends": "Join Scandic Friends",
"Join at no cost": "Join at no cost",
"Join or log in while booking for member pricing.": "Join or log in while booking for member pricing.",
"King bed": "King bed",
"Language": "Language",
"Last name": "Last name",
@@ -359,6 +360,7 @@
"Theatre": "Theatre",
"There are no transactions to display": "There are no transactions to display",
"Things nearby HOTEL_NAME": "Things nearby {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
"Total Points": "Total Points",
"Total cost": "Total cost",

2
i18n/dictionaries/fi.json
View File

@@ -159,6 +159,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Viestintäasetuksiasi ei voi hallita juuri nyt. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
"Join Scandic Friends": "Liity jäseneksi",
"Join at no cost": "Liity maksutta",
"Join or log in while booking for member pricing.": "Liity tai kirjaudu sisään, kun varaat jäsenhinnan.",
"King bed": "King-vuode",
"Language": "Kieli",
"Last name": "Sukunimi",
@@ -331,6 +332,7 @@
"Theatre": "Teatteri",
"There are no transactions to display": "Näytettäviä tapahtumia ei ole",
"Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "Jäsenhintaan saavat sisäänkirjautuneet tai liittyneet jäsenet.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "Varmistaaksesi varauksen, pyydämme sinua antamaan meille maksukortin tiedot. Varmista, että ei veloiteta maksusi tällä hetkellä.",
"Total Points": "Kokonaispisteet",
"Total price": "Kokonaishinta",

2
i18n/dictionaries/no.json
View File

@@ -157,6 +157,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke mulig å administrere kommunikasjonspreferansene dine akkurat nå, prøv igjen senere eller kontakt support hvis problemet vedvarer.",
"Join Scandic Friends": "Bli med i Scandic Friends",
"Join at no cost": "Bli med uten kostnad",
"Join or log in while booking for member pricing.": "Bli med eller logg inn under bestilling for medlemspris.",
"King bed": "King-size-seng",
"Language": "Språk",
"Last name": "Etternavn",
@@ -328,6 +329,7 @@
"Theatre": "Teater",
"There are no transactions to display": "Det er ingen transaksjoner å vise",
"Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "For å få medlemsprisen <span>{amount} {currency}</span>, logg inn eller bli med når du fullfører bestillingen.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "For å sikre din reservasjon, ber vi om at du gir oss dine betalingskortdetaljer. Vær sikker på at ingen gebyrer vil bli belastet på dette tidspunktet.",
"Total Points": "Totale poeng",
"Total incl VAT": "Sum inkl mva",

2
i18n/dictionaries/sv.json
View File

@@ -157,6 +157,7 @@
"It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
"Join Scandic Friends": "Gå med i Scandic Friends",
"Join at no cost": "Gå med utan kostnad",
"Join or log in while booking for member pricing.": "Bli medlem eller logga in när du bokar för medlemspriser.",
"King bed": "King size-säng",
"Language": "Språk",
"Last name": "Efternamn",
@@ -328,6 +329,7 @@
"Theatre": "Teater",
"There are no transactions to display": "Det finns inga transaktioner att visa",
"Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
"To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "För att få medlemsprisen <span>{amount} {currency}</span>, logga in eller bli medlem när du slutför bokningen.",
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.": "För att säkra din bokning ber vi om att du ger oss dina betalkortdetaljer. Välj säker på att ingen avgifter kommer att debiteras just nu.",
"Total Points": "Poäng totalt",
"Total incl VAT": "Totalt inkl moms",