Merged in feat/SW-1026-breakfast-for-kids (pull request #1038)

feat(SW-1026): added info regarding children breakfast

* feat(SW-1026): added info regarding children breakfast

* fix: remove hardcoded currency

* fix(SW-1026): remove price for no breakfast

* fix: missing translation


Approved-by: Christian Andolf
Approved-by: Arvid Norlin
This commit is contained in:
Tobias Johansson
2024-12-09 14:58:54 +00:00
parent 420bf88820
commit 9b1d70b3be
9 changed files with 110 additions and 67 deletions

View File

@@ -1,3 +1,9 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.form { .form {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);

View File

@@ -9,6 +9,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card" import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio" import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
import Body from "@/components/TempDesignSystem/Text/Body"
import { breakfastFormSchema } from "./schema" import { breakfastFormSchema } from "./schema"
@@ -43,6 +44,11 @@ export default function Breakfast({ packages }: BreakfastProps) {
const updateBreakfast = useEnterDetailsStore( const updateBreakfast = useEnterDetailsStore(
(state) => state.actions.updateBreakfast (state) => state.actions.updateBreakfast
) )
const children = useEnterDetailsStore(
(state) => state.booking.rooms[0].children
)
const methods = useForm<BreakfastFormSchema>({ const methods = useForm<BreakfastFormSchema>({
defaultValues: formValuesBreakfast defaultValues: formValuesBreakfast
? { breakfast: formValuesBreakfast } ? { breakfast: formValuesBreakfast }
@@ -75,60 +81,62 @@ export default function Breakfast({ packages }: BreakfastProps) {
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}> <div className={styles.container}>
{packages.map((pkg) => ( {children?.length ? (
<RadioCard <Body>
key={pkg.code} {intl.formatMessage({
id={pkg.code} id: "Children's breakfast is always free as part of the adult's breakfast.",
name="breakfast"
subtitle={
pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
? intl.formatMessage<React.ReactNode>(
{ id: "breakfast.price.free" },
{
amount: pkg.localPrice.price,
currency: pkg.localPrice.currency,
free: (str) => <Highlight>{str}</Highlight>,
strikethrough: (str) => <s>{str}</s>,
}
)
: intl.formatMessage(
{ id: "breakfast.price" },
{
amount: pkg.localPrice.price,
currency: pkg.localPrice.currency,
}
)
}
text={intl.formatMessage({
id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
})} })}
title={intl.formatMessage({ id: "Breakfast buffet" })} </Body>
value={pkg.code} ) : null}
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
{packages.map((pkg) => (
<RadioCard
key={pkg.code}
id={pkg.code}
name="breakfast"
subtitle={
pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
? intl.formatMessage<React.ReactNode>(
{ id: "breakfast.price.free" },
{
amount: pkg.localPrice.price,
currency: pkg.localPrice.currency,
free: (str) => <Highlight>{str}</Highlight>,
strikethrough: (str) => <s>{str}</s>,
}
)
: intl.formatMessage(
{ id: "breakfast.price" },
{
amount: pkg.localPrice.price,
currency: pkg.localPrice.currency,
}
)
}
text={intl.formatMessage({
id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
})}
title={intl.formatMessage({ id: "Breakfast buffet" })}
value={pkg.code}
handleSelectedOnClick={
breakfast === pkg.code ? completeStep : undefined
}
/>
))}
<RadioCard
name="breakfast"
text={intl.formatMessage({
id: "You can always change your mind later and add breakfast at the hotel.",
})}
title={intl.formatMessage({ id: "No breakfast" })}
value="false"
handleSelectedOnClick={ handleSelectedOnClick={
breakfast === pkg.code ? completeStep : undefined breakfast === "false" ? completeStep : undefined
} }
/> />
))} </form>
<RadioCard </div>
name="breakfast"
subtitle={intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: "0",
currency: "SEK",
}
)}
text={intl.formatMessage({
id: "You can always change your mind later and add breakfast at the hotel.",
})}
title={intl.formatMessage({ id: "No breakfast" })}
value="false"
handleSelectedOnClick={
breakfast === "false" ? completeStep : undefined
}
/>
</form>
</FormProvider> </FormProvider>
) )
} }

View File

@@ -115,19 +115,18 @@ export default function SummaryUI({
</Body> </Body>
</div> </div>
<Caption color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast">
{intl.formatMessage( {`${intl.formatMessage(
{ id: "booking.adults" }, { id: "booking.adults" },
{ totalAdults: adults } { totalAdults: adults }
)} )}${
children?.length
? `, ${intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: children.length }
)}`
: ""
}`}
</Caption> </Caption>
{children?.length ? (
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: children.length }
)}
</Caption>
) : null}
<Caption color="uiTextMediumContrast">{cancellationText}</Caption> <Caption color="uiTextMediumContrast">{cancellationText}</Caption>
<Popover <Popover
placement="bottom left" placement="bottom left"
@@ -197,16 +196,40 @@ export default function SummaryUI({
</div> </div>
) : null} ) : null}
{breakfast ? ( {breakfast ? (
<div className={styles.entry}> <div>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{intl.formatMessage({ id: "Breakfast buffet" })} {intl.formatMessage({ id: "Breakfast buffet" })}
</Body> </Body>
<Body color="uiTextHighContrast"> <div className={styles.entry}>
{intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), { <Caption color="uiTextMediumContrast">
currency: breakfast.localPrice.currency, {intl.formatMessage(
style: "currency", { id: "booking.adults" },
})} { totalAdults: adults }
</Body> )}
</Caption>
<Body color="uiTextHighContrast">
{intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
currency: breakfast.localPrice.currency,
style: "currency",
})}
</Body>
</div>
{children?.length ? (
<div className={styles.entry}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: children.length }
)}
</Caption>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: breakfast.localPrice.currency,
style: "currency",
})}
</Body>
</div>
) : null}
</div> </div>
) : null} ) : null}
</div> </div>

View File

@@ -70,6 +70,7 @@
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.", "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.",
"Check-in/Check-out": "Indtjekning/Udtjekning", "Check-in/Check-out": "Indtjekning/Udtjekning",
"Children": "børn", "Children": "børn",
"Children's breakfast is always free as part of the adult's breakfast.": "Barnemorgenmad er altid gratis som en del af voksenmorgenmaden.",
"Choose room": "Vælg rum", "Choose room": "Vælg rum",
"Cities": "Byer", "Cities": "Byer",
"City": "By", "City": "By",

View File

@@ -70,6 +70,7 @@
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sehen Sie sich die in Ihrem Profil gespeicherten Kreditkarten an. Bezahlen Sie mit einer gespeicherten Karte, wenn Sie angemeldet sind, für ein reibungsloseres Web-Erlebnis.", "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sehen Sie sich die in Ihrem Profil gespeicherten Kreditkarten an. Bezahlen Sie mit einer gespeicherten Karte, wenn Sie angemeldet sind, für ein reibungsloseres Web-Erlebnis.",
"Check-in/Check-out": "Einchecken/Auschecken", "Check-in/Check-out": "Einchecken/Auschecken",
"Children": "Kinder", "Children": "Kinder",
"Children's breakfast is always free as part of the adult's breakfast.": "Kinderfrühstück ist immer kostenlos als Teil des Frühstücks der Erwachsenen.",
"Choose room": "Zimmer wählen", "Choose room": "Zimmer wählen",
"Cities": "Städte", "Cities": "Städte",
"City": "Stadt", "City": "Stadt",

View File

@@ -78,6 +78,7 @@
"Check-out": "Check-out", "Check-out": "Check-out",
"Child age is required": "Child age is required", "Child age is required": "Child age is required",
"Children": "Children", "Children": "Children",
"Children's breakfast is always free as part of the adult's breakfast.": "Children's breakfast is always free as part of the adult's breakfast.",
"Choose room": "Choose room", "Choose room": "Choose room",
"Cities": "Cities", "Cities": "Cities",
"City": "City", "City": "City",

View File

@@ -70,6 +70,7 @@
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.", "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.",
"Check-in/Check-out": "Sisäänkirjautuminen/Uloskirjautuminen", "Check-in/Check-out": "Sisäänkirjautuminen/Uloskirjautuminen",
"Children": "Lasta", "Children": "Lasta",
"Children's breakfast is always free as part of the adult's breakfast.": "Lapsen ateria on aina ilmainen osana isojen aterioita.",
"Choose room": "Valitse huone", "Choose room": "Valitse huone",
"Cities": "Kaupungit", "Cities": "Kaupungit",
"City": "Kaupunki", "City": "Kaupunki",

View File

@@ -70,6 +70,7 @@
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.", "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.",
"Check-in/Check-out": "Innsjekking/Utsjekking", "Check-in/Check-out": "Innsjekking/Utsjekking",
"Children": "Barn", "Children": "Barn",
"Children's breakfast is always free as part of the adult's breakfast.": "Barnemorgenmad er altid gratis som en del af voksenmorgenmaden.",
"Choose room": "Velg rom", "Choose room": "Velg rom",
"Cities": "Byer", "Cities": "Byer",
"City": "By", "City": "By",

View File

@@ -70,6 +70,7 @@
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.", "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.",
"Check-in/Check-out": "Inchecking/Utcheckning", "Check-in/Check-out": "Inchecking/Utcheckning",
"Children": "Barn", "Children": "Barn",
"Children's breakfast is always free as part of the adult's breakfast.": "Barnens frukost är alltid gratis som en del av vuxnas frukost.",
"Choose room": "Välj rum", "Choose room": "Välj rum",
"Cities": "Städer", "Cities": "Städer",
"City": "Ort", "City": "Ort",