diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx index f3ead2161..33400efaf 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx @@ -52,69 +52,116 @@ export default function RateSummary({ const checkOutDate = new Date(roomsAvailability.checkOutDate) const nights = dt(checkOutDate).diff(dt(checkInDate), "days") + 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 (
+ {showMemberDiscountBanner && ( +
+ + {intl.formatMessage({ + id: "Join or log in while booking for member pricing.", + })} + +
+ )}
{roomType} {priceName}
-
-
- - {priceToShow?.localPrice.pricePerStay}{" "} - {priceToShow?.localPrice.currency} - - - {intl.formatMessage({ id: "Approx." })}{" "} - {priceToShow?.requestedPrice?.pricePerStay}{" "} - {priceToShow?.requestedPrice?.currency} - -
-
- - {intl.formatMessage({ id: "Total price" })} - - - {priceToShow?.localPrice.pricePerStay}{" "} - {priceToShow?.localPrice.currency} - - - {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 } - )} - - )} - -
- {isPetRoomSelected && ( -
- - + {petRoomPrice} {petRoomCurrency} - - - {intl.formatMessage({ id: "Pet charge" })} - +
+ {showMemberDiscountBanner && ( +
+ + {intl.formatMessage( + { + id: "To get the member price {amount} {currency}, log in or join when completing the booking.", + }, + { + span: (str) => ( + + {str} + + ), + amount: member.localPrice.pricePerStay, + currency: member.localPrice.currency, + } + )} +
)} - +
+ + {intl.formatMessage( + { id: "Total price (incl VAT)" }, + { b: (str) => {str} } + )} + + {summaryPriceTex} +
+
+
+ + {priceToShow?.localPrice.pricePerStay}{" "} + {priceToShow?.localPrice.currency} + + + {intl.formatMessage({ id: "Approx." })}{" "} + {priceToShow?.requestedPrice?.pricePerStay}{" "} + {priceToShow?.requestedPrice?.currency} + +
+
+ + {intl.formatMessage({ id: "Total price" })} + + + {priceToShow?.localPrice.pricePerStay}{" "} + {priceToShow?.localPrice.currency} + + + {summaryPriceTex} + +
+ {isPetRoomSelected && ( +
+ + + {petRoomPrice} {petRoomCurrency} + + + {intl.formatMessage({ id: "Pet charge" })} + +
+ )} + +
) diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css index 3152b5cf6..4c49741c5 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css @@ -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; + } } diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css index dc2c8e067..a39439815 100644 --- a/components/TempDesignSystem/Text/Body/body.module.css +++ b/components/TempDesignSystem/Text/Body/body.module.css @@ -52,6 +52,10 @@ text-align: left; } +.textAlignRight { + text-align: right; +} + .black { color: var(--Main-Grey-100); } diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts index 898adc3c4..aa614fe14 100644 --- a/components/TempDesignSystem/Text/Body/variants.ts +++ b/components/TempDesignSystem/Text/Body/variants.ts @@ -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, diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css index 8207d7523..b15623491 100644 --- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css +++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css @@ -47,6 +47,10 @@ text-align: left; } +.right { + text-align: right; +} + .black { color: var(--Main-Grey-100); } diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts index 18a0880a8..f2edbb9f5 100644 --- a/components/TempDesignSystem/Text/Subtitle/variants.ts +++ b/components/TempDesignSystem/Text/Subtitle/variants.ts @@ -18,6 +18,7 @@ const config = { textAlign: { center: styles.center, left: styles.left, + right: styles.right, }, textTransform: { regular: styles.regular, diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 1ebe5d3f9..6ead0af95 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -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 {amount} {currency}, log in or join when completing the booking.": "For at få medlemsprisen {amount} {currency}, 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", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 71231512a..8a1a463d1 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -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 {amount} {currency}, log in or join when completing the booking.": "Um den Mitgliederpreis von {amount} {currency} 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", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 604b52c60..0f28e3231 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -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 {amount} {currency}, log in or join when completing the booking.": "To get the member price {amount} {currency}, 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", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 665a6e374..24325460c 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -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 {amount} {currency}, 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", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 075c0b2d8..5a7dfe511 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -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 {amount} {currency}, log in or join when completing the booking.": "For å få medlemsprisen {amount} {currency}, 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", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 9b6b51748..9aeced109 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -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 {amount} {currency}, log in or join when completing the booking.": "För att få medlemsprisen {amount} {currency}, 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",