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

Merged in feat/SW-1943-ancillaries-with-points (pull request #1598)

Browse Source 
feat(SW-1943): fix design to pay with points

* feat(SW-1943): fix design to pay with points


Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2025-03-21 13:44:14 +00:00
parent 91e26e30af
commit 272c492b76
15 changed files with 160 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css
View File

@@ -9,7 +9,7 @@
display: flex;
padding: 0 var(--Space-x15);
justify-content: space-between;
align-items: center;
align-items: baseline;
}
.priceButton {

38
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx Normal file
View File

@@ -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 (
<>
<div className={styles.column}>
<Typography variant="Body/Paragraph/mdBold">
<h2>{title}</h2>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>{`X${quantity}`}</p>
</Typography>
</div>
<div className={styles.column}>
<Typography variant="Body/Paragraph/mdRegular">
<h2>{label}</h2>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<h2>{value}</h2>
</Typography>
</div>
</>
)
}

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css Normal file
View File

@@ -0,0 +1,4 @@
.column {
display: flex;
justify-content: space-between;
}

89
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx
View File

@@ -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<Ancillary["ancillaryContent"][number]>
}
export default function PriceSummary({
totalPrice,
totalPoints,
totalUnits,
quantityWithPoints,
quantityWithCard,
selectedAncillary,
}: PriceSummaryProps) {
const intl = useIntl()
@@ -33,61 +37,48 @@ export default function PriceSummary({
</Typography>
<Divider color="subtle" />
<div className={styles.column}>
<Typography variant="Body/Paragraph/mdBold">
<h2>{selectedAncillary.title}</h2>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>{`X${totalUnits}`}</p>
</Typography>
</div>
<div className={styles.column}>
<Typography variant="Body/Paragraph/mdRegular">
<h2>{intl.formatMessage({ id: "Price including VAT" })}</h2>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<h2>
{formatPrice(
intl,
selectedAncillary.price.total,
selectedAncillary.price.currency
)}
</h2>
</Typography>
</div>
{hasTotalPrice && (
<PriceRow
title={selectedAncillary.title}
quantity={quantityWithCard}
label={intl.formatMessage({ id: "Price including VAT" })}
value={formatPrice(
intl,
selectedAncillary.price.total,
selectedAncillary.price.currency
)}
/>
)}
{hasTotalPoints && (
<PriceRow
title={selectedAncillary.title}
quantity={quantityWithPoints}
label={intl.formatMessage({ id: "Points" })}
value={`${selectedAncillary.points} ${intl.formatMessage({ id: "points" })}`}
/>
)}
<Divider color="subtle" />
<div className={styles.column}>
<Typography variant="Body/Paragraph/mdRegular">
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage(
{ id: "<b>Total price</b> (incl VAT)" },
{ b: (str) => <b>{str}</b> }
)}
{hasTotalPrice
? intl.formatMessage({ id: "Total price including VAT" })
: intl.formatMessage({ id: "Total points" })}
</p>
</Typography>
<div className={styles.totalPrice}>
{hasTotalPoints && (
<div>
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">
<p>
{totalPoints} {intl.formatMessage({ id: "points" })}
{hasTotalPrice && "+"}
</p>
</Typography>
</div>
)}
{hasTotalPrice && (
{(hasTotalPoints || hasTotalPrice) && (
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(
intl,
totalPrice,
selectedAncillary.price.currency
)}
{hasTotalPrice &&
formatPrice(
intl,
totalPrice,
selectedAncillary.price.currency
)}
{hasTotalPoints && hasTotalPrice && " + "}
{hasTotalPoints &&
`${totalPoints} ${intl.formatMessage({ id: "points" })}`}
</p>
</Typography>
)}

61
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx
View File

@@ -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 (
<>
<div className={styles.totalPrice}>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{ id: "<b>Total price</b> (incl VAT)" },
{ b: (str) => <b>{str}</b> }
)}
</p>
</Typography>
{totalPrice !== null && (
<div className={styles.totalPriceInclVAT}>
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(intl, totalPrice, selectedAncillary.price.currency)}
</p>
<p>{intl.formatMessage({ id: "Total" })}</p>
</Typography>
)}
{totalPoints !== null && (
<div>
<div>
<Divider variant="vertical" color="subtle" />
</div>
{totalPrice && (
<Typography variant="Body/Paragraph/mdRegular">
<p>({intl.formatMessage({ id: "Incl. VAT" })})</p>
</Typography>
)}
</div>
<div className={styles.totalPriceValue}>
{hasTotalPrice && (
<Typography variant="Body/Paragraph/mdBold">
<p>
{totalPoints} {intl.formatMessage({ id: "points" })}
{formatPrice(
intl,
totalPrice,
selectedAncillary.price.currency
)}
</p>
</Typography>
</div>
)}
)}
{hasTotalPoints && hasTotalPrice && (
<Divider variant="vertical" color="subtle" />
)}
{hasTotalPoints && (
<div>
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">
<p>
{totalPoints} {intl.formatMessage({ id: "points" })}
</p>
</Typography>
</div>
)}
</div>
</div>
<Divider color="subtle" />
{isPriceDetailsOpen && (
<PriceSummary
totalPrice={totalPrice}
totalPoints={totalPoints}
totalUnits={totalUnits}
quantityWithCard={quantityWithCard ?? 0}
quantityWithPoints={quantityWithPoints ?? 0}
selectedAncillary={selectedAncillary}
/>
)}

11
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css
View File

@@ -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;
}

7
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx
View File

@@ -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 (
<div className={styles.selectContainer}>

1
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css
View File

@@ -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);
}

1
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -111,6 +111,7 @@ export default function AddAncillaryFlowModal({
{ ancillary: selectedAncillary?.title }
)
)
router.refresh()
} else {
toast.error(ancillaryErrorMessage)
}

4
apps/scandic-web/i18n/dictionaries/da.json
View File

@@ -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",

4
apps/scandic-web/i18n/dictionaries/de.json
View File

@@ -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",

4
apps/scandic-web/i18n/dictionaries/en.json
View File

@@ -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",

4
apps/scandic-web/i18n/dictionaries/fi.json
View File

@@ -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",

4
apps/scandic-web/i18n/dictionaries/no.json
View File

@@ -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",

4
apps/scandic-web/i18n/dictionaries/sv.json
View File

@@ -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",