From 272c492b761453860f29f402e7eeb05d2d2bf8b5 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Fri, 21 Mar 2025 13:44:14 +0000 Subject: [PATCH] Merged in feat/SW-1943-ancillaries-with-points (pull request #1598) feat(SW-1943): fix design to pay with points * feat(SW-1943): fix design to pay with points Approved-by: Niclas Edenvin --- .../ActionButtons/actionButtons.module.css | 2 +- .../PriceSummary/PriceRow/index.tsx | 38 ++++++++ .../PriceSummary/PriceRow/priceRow.module.css | 4 + .../PriceDetails/PriceSummary/index.tsx | 89 +++++++++---------- .../PriceDetails/index.tsx | 61 ++++++++----- .../PriceDetails/priceDetails.module.css | 11 +++ .../Steps/SelectQuantityStep/index.tsx | 7 +- .../addAncillaryFlowModal.module.css | 1 - .../AddAncillaryFlowModal/index.tsx | 1 + apps/scandic-web/i18n/dictionaries/da.json | 4 + apps/scandic-web/i18n/dictionaries/de.json | 4 + apps/scandic-web/i18n/dictionaries/en.json | 4 + apps/scandic-web/i18n/dictionaries/fi.json | 4 + apps/scandic-web/i18n/dictionaries/no.json | 4 + apps/scandic-web/i18n/dictionaries/sv.json | 4 + 15 files changed, 160 insertions(+), 78 deletions(-) create mode 100644 apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx create mode 100644 apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css index d6fbf5eb5..586db5f10 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css @@ -9,7 +9,7 @@ display: flex; padding: 0 var(--Space-x15); justify-content: space-between; - align-items: center; + align-items: baseline; } .priceButton { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx new file mode 100644 index 000000000..88f306e7e --- /dev/null +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx @@ -0,0 +1,38 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + +import styles from "./priceRow.module.css" + +interface PriceRowProps { + title: string + quantity: number + label: string + value: string +} + +export default function PriceRow({ + title, + quantity, + label, + value, +}: PriceRowProps) { + return ( + <> +
+ +

{title}

+
+ +

{`X${quantity}`}

+
+
+
+ +

{label}

+
+ +

{value}

+
+
+ + ) +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css new file mode 100644 index 000000000..0faefa0b2 --- /dev/null +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css @@ -0,0 +1,4 @@ +.column { + display: flex; + justify-content: space-between; +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx index b3e45bd27..4e3ca8dfa 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx @@ -5,6 +5,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import Divider from "@/components/TempDesignSystem/Divider" import { formatPrice } from "@/utils/numberFormatting" +import PriceRow from "./PriceRow" + import styles from "./priceSummary.module.css" import type { Ancillary } from "@/types/components/myPages/myStay/ancillaries" @@ -12,14 +14,16 @@ import type { Ancillary } from "@/types/components/myPages/myStay/ancillaries" interface PriceSummaryProps { totalPrice: number | null totalPoints: number | null - totalUnits: number + quantityWithPoints: number + quantityWithCard: number selectedAncillary: NonNullable } export default function PriceSummary({ totalPrice, totalPoints, - totalUnits, + quantityWithPoints, + quantityWithCard, selectedAncillary, }: PriceSummaryProps) { const intl = useIntl() @@ -33,61 +37,48 @@ export default function PriceSummary({ -
- -

{selectedAncillary.title}

-
- -

{`X${totalUnits}`}

-
-
- -
- -

{intl.formatMessage({ id: "Price including VAT" })}

-
- -

- {formatPrice( - intl, - selectedAncillary.price.total, - selectedAncillary.price.currency - )} -

-
-
+ {hasTotalPrice && ( + + )} + {hasTotalPoints && ( + + )}
- +

- {intl.formatMessage( - { id: "Total price (incl VAT)" }, - { b: (str) => {str} } - )} + {hasTotalPrice + ? intl.formatMessage({ id: "Total price including VAT" }) + : intl.formatMessage({ id: "Total points" })}

- {hasTotalPoints && ( -
-
- -
- -

- {totalPoints} {intl.formatMessage({ id: "points" })} - {hasTotalPrice && "+"} -

-
-
- )} - {hasTotalPrice && ( + {(hasTotalPoints || hasTotalPrice) && (

- {formatPrice( - intl, - totalPrice, - selectedAncillary.price.currency - )} + {hasTotalPrice && + formatPrice( + intl, + totalPrice, + selectedAncillary.price.currency + )} + {hasTotalPoints && hasTotalPrice && " + "} + {hasTotalPoints && + `${totalPoints} ${intl.formatMessage({ id: "points" })}`}

)} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx index 6a2474a50..b4c0f8b48 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx @@ -43,44 +43,59 @@ export default function PriceDetails({ quantityWithPoints && selectedAncillary?.points ? selectedAncillary.points * quantityWithPoints : null - const totalUnits = (quantityWithCard ?? 0) + (quantityWithPoints ?? 0) + + const hasTotalPoints = typeof totalPoints === "number" + const hasTotalPrice = typeof totalPrice === "number" + return ( <>
- -

- {intl.formatMessage( - { id: "Total price (incl VAT)" }, - { b: (str) => {str} } - )} -

-
- {totalPrice !== null && ( +
-

- {formatPrice(intl, totalPrice, selectedAncillary.price.currency)} -

+

{intl.formatMessage({ id: "Total" })}

- )} - {totalPoints !== null && ( -
-
- -
+ {totalPrice && ( + +

({intl.formatMessage({ id: "Incl. VAT" })})

+
+ )} +
+
+ {hasTotalPrice && (

- {totalPoints} {intl.formatMessage({ id: "points" })} + {formatPrice( + intl, + totalPrice, + selectedAncillary.price.currency + )}

-
- )} + )} + {hasTotalPoints && hasTotalPrice && ( + + )} + {hasTotalPoints && ( +
+
+ +
+ +

+ {totalPoints} {intl.formatMessage({ id: "points" })} +

+
+
+ )} +
{isPriceDetailsOpen && ( )} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css index 8bfd4ceb2..e91a40192 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css @@ -7,3 +7,14 @@ background-color: var(--Base-Surface-Secondary-light-Normal); border-radius: var(--Corner-radius-Medium); } + +.totalPriceInclVAT { + display: flex; + gap: var(--Space-x05); +} + +.totalPriceValue { + display: flex; + gap: var(--Space-x1); + height: 20px; +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx index 1d2c83ab1..05628aa83 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx @@ -42,10 +42,9 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) { const insufficientPoints = currentPoints < pointsCost || currentPoints === 0 - const pointsLabel = - insufficientPoints && user - ? intl.formatMessage({ id: "Insufficient points" }) - : intl.formatMessage({ id: "Select quantity" }) + const pointsLabel = insufficientPoints + ? intl.formatMessage({ id: "Insufficient points" }) + : intl.formatMessage({ id: "Select quantity" }) return (
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css index 59f756627..53525245b 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css @@ -57,7 +57,6 @@ bottom: 0; z-index: 10; background: var(--Surface-Primary-OnSurface-Default); - border-top: 1px solid var(--Base-Border-Normal); padding-bottom: var(--Space-x15); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx index 1e87a4a20..d75f01a2c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx @@ -111,6 +111,7 @@ export default function AddAncillaryFlowModal({ { ancillary: selectedAncillary?.title } ) ) + router.refresh() } else { toast.error(ancillaryErrorMessage) } diff --git a/apps/scandic-web/i18n/dictionaries/da.json b/apps/scandic-web/i18n/dictionaries/da.json index 88e9367db..1b44297a0 100644 --- a/apps/scandic-web/i18n/dictionaries/da.json +++ b/apps/scandic-web/i18n/dictionaries/da.json @@ -371,6 +371,7 @@ "In extra bed": "i ekstra seng", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "Log ind for at se din reservation.", + "Incl. VAT": "Inkl. moms", "Included": "Inkluderet", "Indoor pool": "Indendørs pool", "Indoor windows and excellent lighting": "Indoor windows and excellent lighting", @@ -643,6 +644,7 @@ "Room facilities": "Værelsesfaciliteter", "Room sold out": "Værelse solgt ud", "Room total": "Værelse total", + "Room type": "Værelsestype", "Room {roomIndex}": "Værelse {roomIndex}", "Rooms": "Værelser", "Rooms & Guests": "Værelser & gæster", @@ -719,6 +721,7 @@ "Street": "Gade", "Submit": "Submit", "Successfully updated profile!": "Profilen er opdateret med succes!", + "Summary": "Resumé", "Sunday": "Søndag", "Surprise!": "Overraskelse!", "Surprises": "Surprises", @@ -757,6 +760,7 @@ "Total points": "Samlet antal point", "Total price": "Samlet pris", "Total price (incl VAT)": "Samlet pris (inkl. moms)", + "Total price including VAT": "Total pris inkl. moms", "Tourist": "Turist", "Transaction date": "Overførselsdato", "Transactions": "Transaktioner", diff --git a/apps/scandic-web/i18n/dictionaries/de.json b/apps/scandic-web/i18n/dictionaries/de.json index 4939cdeb2..ca3967184 100644 --- a/apps/scandic-web/i18n/dictionaries/de.json +++ b/apps/scandic-web/i18n/dictionaries/de.json @@ -372,6 +372,7 @@ "In extra bed": "im zusätzlichen Bett", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "Um Ihre Buchung einzusehen, loggen Sie sich bitte ein.", + "Incl. VAT": "Inkl. MwSt.", "Included": "Iinklusive", "Indoor pool": "Innenpool", "Indoor windows and excellent lighting": "Indoor windows and excellent lighting", @@ -642,6 +643,7 @@ "Room facilities": "Zimmerausstattung", "Room sold out": "Zimmer verkauft", "Room total": "Zimmer total", + "Room type": "Zimmertyp", "Room {roomIndex}": "Zimmer {roomIndex}", "Rooms": "Räume", "Rooms & Guests": "Zimmer & Gäste", @@ -718,6 +720,7 @@ "Street": "Straße", "Submit": "Submit", "Successfully updated profile!": "Profil erfolgreich aktualisiert!", + "Summary": "Zusammenfassung", "Sunday": "Sonntag", "Surprise!": "Überraschung!", "Surprises": "Surprises", @@ -755,6 +758,7 @@ "Total points": "Gesamtpunktzahl", "Total price": "Gesamtpreis", "Total price (incl VAT)": "Gesamtpreis (inkl. MwSt.)", + "Total price including VAT": "Gesamtpreis inkl. MwSt.", "Tourist": "Tourist", "Transaction date": "Transaktionsdatum", "Transactions": "Transaktionen", diff --git a/apps/scandic-web/i18n/dictionaries/en.json b/apps/scandic-web/i18n/dictionaries/en.json index aba073bfb..ddbe544a7 100644 --- a/apps/scandic-web/i18n/dictionaries/en.json +++ b/apps/scandic-web/i18n/dictionaries/en.json @@ -370,6 +370,7 @@ "In extra bed": "In extra bed", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "In order to view your booking, please log in.", + "Incl. VAT": "Incl. VAT", "Included": "Included", "Indoor pool": "Indoor pool", "Indoor windows and excellent lighting": "Indoor windows and excellent lighting", @@ -641,6 +642,7 @@ "Room facilities": "Room facilities", "Room sold out": "Room sold out", "Room total": "Room total", + "Room type": "Room type", "Room {roomIndex}": "Room {roomIndex}", "Rooms": "Rooms", "Rooms & Guests": "Rooms & Guests", @@ -717,6 +719,7 @@ "Street": "Street", "Submit": "Submit", "Successfully updated profile!": "Successfully updated profile!", + "Summary": "Summary", "Sunday": "Sunday", "Surprise!": "Surprise!", "Surprises": "Surprises", @@ -753,6 +756,7 @@ "Total paid": "Total paid", "Total points": "Total points", "Total price": "Total price", + "Total price including VAT": "Total price including VAT", "Tourist": "Tourist", "Transaction date": "Transaction date", "Transactions": "Transactions", diff --git a/apps/scandic-web/i18n/dictionaries/fi.json b/apps/scandic-web/i18n/dictionaries/fi.json index 1a15de282..bc587ced6 100644 --- a/apps/scandic-web/i18n/dictionaries/fi.json +++ b/apps/scandic-web/i18n/dictionaries/fi.json @@ -371,6 +371,7 @@ "In extra bed": "Oma vuodepaikka", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "Nähdäksesi varauksesi, ole hyvä ja kirjaudu sisään.", + "Incl. VAT": "Sis. ALV", "Included": "Sisälly hintaan", "Indoor pool": "Sisäuima-allas", "Indoor windows and excellent lighting": "Indoor windows and excellent lighting", @@ -641,6 +642,7 @@ "Room facilities": "Huoneen varustelu", "Room sold out": "Huone slutsattu", "Room total": "Huoneen kokonaishinta", + "Room type": "Huonetyyppi", "Room {roomIndex}": "Huone {roomIndex}", "Rooms": "Huoneet", "Rooms & Guests": "Huoneet & Vieraat", @@ -718,6 +720,7 @@ "Street": "Katu", "Submit": "Submit", "Successfully updated profile!": "Profiilin päivitys onnistui!", + "Summary": "Yhteenveto", "Sunday": "Sunnuntai", "Surprise!": "Yllätys!", "Surprises": "Surprises", @@ -755,6 +758,7 @@ "Total points": "Kokonaispisteet", "Total price": "Kokonaishinta", "Total price (incl VAT)": "Kokonaishinta (sis. ALV)", + "Total price including VAT": "Kokonaishinta sisältäen ALV", "Tourist": "Turisti", "Transaction date": "Tapahtuman päivämäärä", "Transactions": "Tapahtumat", diff --git a/apps/scandic-web/i18n/dictionaries/no.json b/apps/scandic-web/i18n/dictionaries/no.json index 264aa9e9d..b56d15afc 100644 --- a/apps/scandic-web/i18n/dictionaries/no.json +++ b/apps/scandic-web/i18n/dictionaries/no.json @@ -370,6 +370,7 @@ "In extra bed": "i ekstraseng", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "For å se bestillingen din, vennligst logg inn.", + "Incl. VAT": "Inkl. MVA", "Included": "Inkludert", "Indoor pool": "Innendørs basseng", "Indoor windows and excellent lighting": "Indoor windows and excellent lighting", @@ -639,6 +640,7 @@ "Room details": "Room details", "Room facilities": "Romfasiliteter", "Room total": "Rom total", + "Room type": "Romtype", "Room {roomIndex}": "Rom {roomIndex}", "Rooms": "Rom", "Rooms & Guests": "Rom og gjester", @@ -715,6 +717,7 @@ "Street": "Gate", "Submit": "Submit", "Successfully updated profile!": "Vellykket oppdatert profil!", + "Summary": "Sammendrag", "Sunday": "Søndag", "Surprise!": "Overraskelse!", "Surprises": "Surprises", @@ -752,6 +755,7 @@ "Total paid": "Total betalt", "Total points": "Totale poeng", "Total price": "Totalpris", + "Total price including VAT": "Totalpris inkludert mva", "Tourist": "Turist", "Transaction date": "Transaksjonsdato", "Transactions": "Transaksjoner", diff --git a/apps/scandic-web/i18n/dictionaries/sv.json b/apps/scandic-web/i18n/dictionaries/sv.json index 0bd3c9d12..a2123d753 100644 --- a/apps/scandic-web/i18n/dictionaries/sv.json +++ b/apps/scandic-web/i18n/dictionaries/sv.json @@ -370,6 +370,7 @@ "In extra bed": "Egen sängplats", "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.", "In order to view your booking, please log in.": "För att se din bokning, vänligen logga in.", + "Incl. VAT": "Inkl. moms", "Included": "Inkluderad", "Indoor pool": "Inomhuspool", "Indoor windows and excellent lighting": "Fönster inomhus och utmärkt belysning", @@ -640,6 +641,7 @@ "Room facilities": "Rumfaciliteter", "Room sold out": "Rum slutsålt", "Room total": "Rum total", + "Room type": "Rumstyp", "Room {roomIndex}": "Rum {roomIndex}", "Rooms": "Rum", "Rooms & Guests": "Rum och gäster", @@ -716,6 +718,7 @@ "Street": "Gata", "Submit": "Submit", "Successfully updated profile!": "Profilen har uppdaterats framgångsrikt!", + "Summary": "Sammanfattning", "Sunday": "Söndag", "Surprise!": "Överraskning!", "Surprises": "Surprises", @@ -753,6 +756,7 @@ "Total paid": "Total betalt", "Total points": "Poäng totalt", "Total price": "Totalpris", + "Total price including VAT": "Totalpris inklusive moms", "Tourist": "Turist", "Transaction date": "Transaktionsdatum", "Transactions": "Transaktioner",