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

feat: add no breakfast message to price details modal and to conf page receipt

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-05-09 11:56:50 +02:00
parent 3cd8c59dd3
commit ca29237f2e
14 changed files with 389 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Breakfast/breakfast.module.css Normal file
View File

@@ -0,0 +1,13 @@
.entry {
display: flex;
gap: var(--Spacing-x-half);
justify-content: space-between;
}
.textDefault {
color: var(--Text-Default);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}

73
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Breakfast/index.tsx Normal file
View File

@@ -0,0 +1,73 @@
"use client"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./breakfast.module.css"
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
interface BreakfastProps {
adults: number
breakfast: BreakfastPackage | false | undefined
breakfastIncluded: boolean
guests: string
nights: number
}
export default function Breakfast({
adults,
breakfast,
breakfastIncluded,
guests,
nights,
}: BreakfastProps) {
const intl = useIntl()
const breakfastBuffet = intl.formatMessage({
defaultMessage: "Breakfast buffet",
})
if (breakfastIncluded || breakfast) {
const price = breakfast
? formatPrice(
intl,
breakfast.localPrice.price * adults * nights,
breakfast.localPrice.currency
)
: intl.formatMessage({ defaultMessage: "Included" })
return (
<div className={styles.entry}>
<div>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textDefault}>{breakfastBuffet}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.uiTextMediumContrast}>{guests}</p>
</Typography>
</div>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textDefault}>{price}</p>
</Typography>
</div>
)
}
if (breakfast === false) {
const noBreakfast = intl.formatMessage({ defaultMessage: "No breakfast" })
return (
<div className={styles.entry}>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textDefault}>{breakfastBuffet}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textDefault}>{noBreakfast}</p>
</Typography>
</div>
)
}
return null
}

90
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -19,6 +19,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import Breakfast from "./Breakfast"
import { mapToPrice } from "./mapToPrice"
import styles from "./ui.module.css"
@@ -185,6 +186,8 @@ export default function SummaryUI({
guestsParts.push(childrenMsg)
}
const guests = guestsParts.join(", ")
const hideBedCurrency = notDisplayableCurrencies.includes(
room.roomPrice.perStay.local.currency
)
@@ -233,9 +236,7 @@ export default function SummaryUI({
)}
</Body>
</div>
<Caption color="uiTextMediumContrast">
{guestsParts.join(", ")}
</Caption>
<Caption color="uiTextMediumContrast">{guests}</Caption>
<Caption color="uiTextMediumContrast">
{room.cancellationText}
</Caption>
@@ -371,82 +372,13 @@ export default function SummaryUI({
</Body>
</div>
) : null}
{room.breakfastIncluded ? (
<div className={styles.entry}>
<Body color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: "Breakfast buffet",
})}
</Body>
<Body color="red">
{intl.formatMessage({
defaultMessage: "Included",
})}
</Body>
</div>
) : room.breakfast === false ? (
<div className={styles.entry}>
<Body color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: "No breakfast",
})}
</Body>
<Body color="uiTextHighContrast">
{formatPrice(
intl,
0,
room.roomPrice.perStay.local.currency
)}
</Body>
</div>
) : null}
{room.breakfast ? (
<div>
<Body color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: "Breakfast buffet",
})}
</Body>
<div className={styles.entry}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
defaultMessage:
"{totalAdults, plural, one {# adult} other {# adults}}",
},
{ totalAdults: adults }
)}
</Caption>
<Body color="uiTextHighContrast">
{formatPrice(
intl,
room.breakfast.localPrice.price * adults * nights,
room.breakfast.localPrice.currency
)}
</Body>
</div>
{childrenInRoom?.length ? (
<div className={styles.entry}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
defaultMessage:
"{totalChildren, plural, one {# child} other {# children}}",
},
{ totalChildren: childrenInRoom.length }
)}
</Caption>
<Body color="uiTextHighContrast">
{formatPrice(
intl,
0,
room.breakfast.localPrice.currency
)}
</Body>
</div>
) : null}
</div>
) : null}
<Breakfast
adults={room.adults}
breakfast={room.breakfast}
breakfastIncluded={room.breakfastIncluded}
guests={guests}
nights={nights}
/>
</div>
<Divider color="primaryLightSubtle" />
</Fragment>