Merged in feat/SW-1023-bed-type-information (pull request #1056)

Feat/SW-1023 bed type information

* feat(SW-1023): add bed type info

* fix: formatting of bed type string

* fix(SW-1023): refactored bed type info and added default value to children beds

* fix(SW-1023): fixes from PR


Approved-by: Christel Westerberg
Approved-by: Simon.Emanuelsson
This commit is contained in:
Tobias Johansson
2024-12-18 09:47:06 +00:00
parent 77d449b8cb
commit 118f1afafa
11 changed files with 158 additions and 29 deletions

View File

@@ -0,0 +1,44 @@
import { useIntl } from "react-intl"
import { useEnterDetailsStore } from "@/stores/enter-details"
import Body from "@/components/TempDesignSystem/Text/Body"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { BedTypeInfoProps } from "@/types/components/hotelReservation/enterDetails/bedType"
export default function BedTypeInfo({ hasMultipleBedTypes }: BedTypeInfoProps) {
const intl = useIntl()
const hasChildWithExtraBed = useEnterDetailsStore((state) =>
state.booking.rooms[0].children?.some(
(child) => Number(child.bed) === ChildBedMapEnum.IN_EXTRA_BED
)
)
const availabilityText = intl.formatMessage({
id: "Your selected bed type will be provided based on availability",
})
const extraBedText = intl.formatMessage({
id: "Extra bed will be provided additionally",
})
if (hasMultipleBedTypes && hasChildWithExtraBed) {
return (
<Body>
{availabilityText}. {extraBedText}
</Body>
)
}
if (hasMultipleBedTypes) {
return <Body>{availabilityText}</Body>
}
if (hasChildWithExtraBed) {
return <Body>{extraBedText}</Body>
}
return null
}

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 { KingBedIcon } from "@/components/Icons" import { KingBedIcon } from "@/components/Icons"
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio" import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
import BedTypeInfo from "./BedTypeInfo"
import { bedTypeFormSchema } from "./schema" import { bedTypeFormSchema } from "./schema"
import styles from "./bedOptions.module.css" import styles from "./bedOptions.module.css"
@@ -62,26 +63,29 @@ export default function BedType({ bedTypes }: BedTypeProps) {
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}> <div className={styles.container}>
{bedTypes.map((roomType) => { <BedTypeInfo hasMultipleBedTypes={bedTypes.length > 1} />
const width = <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
roomType.size.max === roomType.size.min {bedTypes.map((roomType) => {
? `${roomType.size.min} cm` const width =
: `${roomType.size.min} cm - ${roomType.size.max} cm` roomType.size.max === roomType.size.min
return ( ? `${roomType.size.min} cm`
<RadioCard : `${roomType.size.min} cm - ${roomType.size.max} cm`
key={roomType.value} return (
Icon={KingBedIcon} <RadioCard
iconWidth={46} key={roomType.value}
id={roomType.value} Icon={KingBedIcon}
name="bedType" iconWidth={46}
subtitle={width} id={roomType.value}
title={roomType.description} name="bedType"
value={roomType.value} subtitle={width}
/> title={roomType.description}
) value={roomType.value}
})} />
</form> )
})}
</form>
</div>
</FormProvider> </FormProvider>
) )
} }

View File

@@ -22,6 +22,7 @@ import Modal from "../../Modal"
import styles from "./ui.module.css" import styles from "./ui.module.css"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { SummaryProps } from "@/types/components/hotelReservation/summary" import type { SummaryProps } from "@/types/components/hotelReservation/summary"
import type { DetailsState } from "@/types/stores/enter-details" import type { DetailsState } from "@/types/stores/enter-details"
@@ -67,6 +68,25 @@ export default function SummaryUI({
const adults = booking.rooms[0].adults const adults = booking.rooms[0].adults
const children = booking.rooms[0].children const children = booking.rooms[0].children
const childrenBeds = children?.reduce(
(acc, value) => {
const bedType = Number(value.bed)
if (bedType === ChildBedMapEnum.IN_ADULTS_BED) {
return acc
}
const count = acc.get(bedType) ?? 0
acc.set(bedType, count + 1)
return acc
},
new Map<ChildBedMapEnum, number>([
[ChildBedMapEnum.IN_CRIB, 0],
[ChildBedMapEnum.IN_EXTRA_BED, 0],
])
)
const childBedCrib = childrenBeds?.get(ChildBedMapEnum.IN_CRIB)
const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED)
const memberPrice = roomRate.memberRate const memberPrice = roomRate.memberRate
? { ? {
currency: roomRate.memberRate.localPrice.currency, currency: roomRate.memberRate.localPrice.currency,
@@ -179,12 +199,7 @@ export default function SummaryUI({
: null} : null}
{bedType ? ( {bedType ? (
<div className={styles.entry}> <div className={styles.entry}>
<div> <Body color="uiTextHighContrast">{bedType.description}</Body>
<Body color="uiTextHighContrast">{bedType.description}</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Based on availability" })}
</Caption>
</div>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{intl.formatNumber(0, { {intl.formatNumber(0, {
@@ -194,7 +209,39 @@ export default function SummaryUI({
</Body> </Body>
</div> </div>
) : null} ) : null}
{childBedCrib ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{`${intl.formatMessage({ id: "Crib (child)" })} × ${childBedCrib}`}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Based on availability" })}
</Caption>
</div>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.local.currency,
style: "currency",
})}
</Body>
</div>
) : null}
{childBedExtraBed ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{`${intl.formatMessage({ id: "Extra bed (child)" })} × ${childBedExtraBed}`}
</Body>
</div>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.local.currency,
style: "currency",
})}
</Body>
</div>
) : null}
{breakfast === false ? ( {breakfast === false ? (
<div className={styles.entry}> <div className={styles.entry}>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">

View File

@@ -105,6 +105,7 @@
"Creative spaces for meetings": "Kreative rum til møder", "Creative spaces for meetings": "Kreative rum til møder",
"Credit card": "Kreditkort", "Credit card": "Kreditkort",
"Credit card deleted successfully": "Kreditkort blev slettet", "Credit card deleted successfully": "Kreditkort blev slettet",
"Crib (child)": "Kørestol (barn)",
"Currency Code": "DKK", "Currency Code": "DKK",
"Current password": "Nuværende kodeord", "Current password": "Nuværende kodeord",
"Customer service": "Kundeservice", "Customer service": "Kundeservice",
@@ -142,6 +143,8 @@
"Expires at the earliest": "Udløber tidligst {date}", "Expires at the earliest": "Udløber tidligst {date}",
"Explore all levels and benefits": "Udforsk alle niveauer og fordele", "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
"Explore nearby": "Udforsk i nærheden", "Explore nearby": "Udforsk i nærheden",
"Extra bed (child)": "Ekstra seng (barn)",
"Extra bed will be provided additionally": "Der vil blive stillet en ekstra seng til rådighed",
"Extras to your booking": "Tillæg til din booking", "Extras to your booking": "Tillæg til din booking",
"FAQ": "Ofte stillede spørgsmål", "FAQ": "Ofte stillede spørgsmål",
"Failed to delete credit card, please try again later.": "Kunne ikke slette kreditkort. Prøv venligst igen senere.", "Failed to delete credit card, please try again later.": "Kunne ikke slette kreditkort. Prøv venligst igen senere.",
@@ -486,6 +489,7 @@
"Your level": "Dit niveau", "Your level": "Dit niveau",
"Your points to spend": "Dine brugbare point", "Your points to spend": "Dine brugbare point",
"Your room": "Dit værelse", "Your room": "Dit værelse",
"Your selected bed type will be provided based on availability": "Din valgte sengtype vil blive stillet til rådighed baseret på tilgængelighed",
"Zip code": "Postnummer", "Zip code": "Postnummer",
"Zoo": "Zoo", "Zoo": "Zoo",
"Zoom in": "Zoom ind", "Zoom in": "Zoom ind",

View File

@@ -105,6 +105,7 @@
"Creative spaces for meetings": "Kreative Räume für Meetings", "Creative spaces for meetings": "Kreative Räume für Meetings",
"Credit card": "Kreditkarte", "Credit card": "Kreditkarte",
"Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht", "Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
"Crib (child)": "Kinderbett (Kind)",
"Currency Code": "EUR", "Currency Code": "EUR",
"Current password": "Aktuelles Passwort", "Current password": "Aktuelles Passwort",
"Customer service": "Kundendienst", "Customer service": "Kundendienst",
@@ -142,6 +143,8 @@
"Expires at the earliest": "Läuft frühestens am {date} ab", "Expires at the earliest": "Läuft frühestens am {date} ab",
"Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile", "Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile",
"Explore nearby": "Erkunden Sie die Umgebung", "Explore nearby": "Erkunden Sie die Umgebung",
"Extra bed (child)": "Ekstra seng (Kind)",
"Extra bed will be provided additionally": "Ein zusätzliches Bett wird bereitgestellt",
"Extras to your booking": "Extras zu Ihrer Buchung", "Extras to your booking": "Extras zu Ihrer Buchung",
"FAQ": "Häufig gestellte Fragen", "FAQ": "Häufig gestellte Fragen",
"Failed to delete credit card, please try again later.": "Kreditkarte konnte nicht gelöscht werden. Bitte versuchen Sie es später noch einmal.", "Failed to delete credit card, please try again later.": "Kreditkarte konnte nicht gelöscht werden. Bitte versuchen Sie es später noch einmal.",
@@ -485,6 +488,7 @@
"Your level": "Dein level", "Your level": "Dein level",
"Your points to spend": "Meine Punkte", "Your points to spend": "Meine Punkte",
"Your room": "Ihr Zimmer", "Your room": "Ihr Zimmer",
"Your selected bed type will be provided based on availability": "Ihre ausgewählte Bettart wird basierend auf der Verfügbarkeit bereitgestellt",
"Zip code": "PLZ", "Zip code": "PLZ",
"Zoo": "Zoo", "Zoo": "Zoo",
"Zoom in": "Vergrößern", "Zoom in": "Vergrößern",

View File

@@ -112,6 +112,7 @@
"Creative spaces for meetings": "Creative spaces for meetings", "Creative spaces for meetings": "Creative spaces for meetings",
"Credit card": "Credit card", "Credit card": "Credit card",
"Credit card deleted successfully": "Credit card deleted successfully", "Credit card deleted successfully": "Credit card deleted successfully",
"Crib (child)": "Crib (child)",
"Currency Code": "EUR", "Currency Code": "EUR",
"Current password": "Current password", "Current password": "Current password",
"Customer service": "Customer service", "Customer service": "Customer service",
@@ -150,6 +151,8 @@
"Expires at the earliest": "Expires at the earliest {date}", "Expires at the earliest": "Expires at the earliest {date}",
"Explore all levels and benefits": "Explore all levels and benefits", "Explore all levels and benefits": "Explore all levels and benefits",
"Explore nearby": "Explore nearby", "Explore nearby": "Explore nearby",
"Extra bed (child)": "Extra bed (child)",
"Extra bed will be provided additionally": "Extra bed will be provided additionally",
"Extras to your booking": "Extras to your booking", "Extras to your booking": "Extras to your booking",
"FAQ": "FAQ", "FAQ": "FAQ",
"Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.", "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
@@ -529,6 +532,7 @@
"Your level": "Your level", "Your level": "Your level",
"Your points to spend": "Your points to spend", "Your points to spend": "Your points to spend",
"Your room": "Your room", "Your room": "Your room",
"Your selected bed type will be provided based on availability": "Your selected bed type will be provided based on availability",
"Zip code": "Zip code", "Zip code": "Zip code",
"Zoo": "Zoo", "Zoo": "Zoo",
"Zoom in": "Zoom in", "Zoom in": "Zoom in",

View File

@@ -105,6 +105,7 @@
"Creative spaces for meetings": "Luovia tiloja kokouksille", "Creative spaces for meetings": "Luovia tiloja kokouksille",
"Credit card": "Luottokortti", "Credit card": "Luottokortti",
"Credit card deleted successfully": "Luottokortti poistettu onnistuneesti", "Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
"Crib (child)": "Körkkä (lasta)",
"Currency Code": "EUR", "Currency Code": "EUR",
"Current password": "Nykyinen salasana", "Current password": "Nykyinen salasana",
"Customer service": "Asiakaspalvelu", "Customer service": "Asiakaspalvelu",
@@ -142,6 +143,8 @@
"Expires at the earliest": "Päättyy aikaisintaan {date}", "Expires at the earliest": "Päättyy aikaisintaan {date}",
"Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin", "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
"Explore nearby": "Tutustu lähialueeseen", "Explore nearby": "Tutustu lähialueeseen",
"Extra bed (child)": "Lisävuode (lasta)",
"Extra bed will be provided additionally": "Lisävuode toimitetaan erikseen",
"Extras to your booking": "Varauksessa lisäpalveluita", "Extras to your booking": "Varauksessa lisäpalveluita",
"FAQ": "Usein kysytyt kysymykset", "FAQ": "Usein kysytyt kysymykset",
"Failed to delete credit card, please try again later.": "Luottokortin poistaminen epäonnistui, yritä myöhemmin uudelleen.", "Failed to delete credit card, please try again later.": "Luottokortin poistaminen epäonnistui, yritä myöhemmin uudelleen.",
@@ -484,6 +487,7 @@
"Your level": "Tasosi", "Your level": "Tasosi",
"Your points to spend": "Käytettävissä olevat pisteesi", "Your points to spend": "Käytettävissä olevat pisteesi",
"Your room": "Sinun huoneesi", "Your room": "Sinun huoneesi",
"Your selected bed type will be provided based on availability": "Valitun vuodetyypin toimitetaan saatavuuden mukaan",
"Zip code": "Postinumero", "Zip code": "Postinumero",
"Zoo": "Eläintarha", "Zoo": "Eläintarha",
"Zoom in": "Lähennä", "Zoom in": "Lähennä",

View File

@@ -104,6 +104,7 @@
"Country is required": "Land kreves", "Country is required": "Land kreves",
"Creative spaces for meetings": "Kreative rom for møter", "Creative spaces for meetings": "Kreative rom for møter",
"Credit card deleted successfully": "Kredittkort slettet", "Credit card deleted successfully": "Kredittkort slettet",
"Crib (child)": "Kørestol (barn)",
"Currency Code": "NOK", "Currency Code": "NOK",
"Current password": "Nåværende passord", "Current password": "Nåværende passord",
"Customer service": "Kundeservice", "Customer service": "Kundeservice",
@@ -141,6 +142,8 @@
"Expires at the earliest": "Utløper tidligst {date}", "Expires at the earliest": "Utløper tidligst {date}",
"Explore all levels and benefits": "Utforsk alle nivåer og fordeler", "Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
"Explore nearby": "Utforsk i nærheten", "Explore nearby": "Utforsk i nærheten",
"Extra bed (child)": "Ekstra seng (barn)",
"Extra bed will be provided additionally": "Ekstra seng vil bli tilgjengelig",
"Extras to your booking": "Tilvalg til bestillingen din", "Extras to your booking": "Tilvalg til bestillingen din",
"FAQ": "Ofte stilte spørsmål", "FAQ": "Ofte stilte spørsmål",
"Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.", "Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.",
@@ -484,6 +487,7 @@
"Your level": "Ditt nivå", "Your level": "Ditt nivå",
"Your points to spend": "Dine brukbare poeng", "Your points to spend": "Dine brukbare poeng",
"Your room": "Rommet ditt", "Your room": "Rommet ditt",
"Your selected bed type will be provided based on availability": "Din valgte sengtype vil blive stillet til rådighed baseret på tilgængelighed",
"Zip code": "Post kode", "Zip code": "Post kode",
"Zoo": "Dyrehage", "Zoo": "Dyrehage",
"Zoom in": "Zoom inn", "Zoom in": "Zoom inn",

View File

@@ -104,6 +104,7 @@
"Country is required": "Land är obligatoriskt", "Country is required": "Land är obligatoriskt",
"Creative spaces for meetings": "Kreativa utrymmen för möten", "Creative spaces for meetings": "Kreativa utrymmen för möten",
"Credit card deleted successfully": "Kreditkort har tagits bort", "Credit card deleted successfully": "Kreditkort har tagits bort",
"Crib (child)": "Spjälsäng (barn)",
"Currency Code": "SEK", "Currency Code": "SEK",
"Current password": "Nuvarande lösenord", "Current password": "Nuvarande lösenord",
"Customer service": "Kundservice", "Customer service": "Kundservice",
@@ -141,6 +142,8 @@
"Expires at the earliest": "Löper ut tidigast {date}", "Expires at the earliest": "Löper ut tidigast {date}",
"Explore all levels and benefits": "Utforska alla nivåer och fördelar", "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
"Explore nearby": "Utforska i närheten", "Explore nearby": "Utforska i närheten",
"Extra bed (child)": "Extra säng (barn)",
"Extra bed will be provided additionally": "Extra säng kommer att tillhandahållas",
"Extras to your booking": "Extra tillval till din bokning", "Extras to your booking": "Extra tillval till din bokning",
"FAQ": "FAQ", "FAQ": "FAQ",
"Failed to delete credit card, please try again later.": "Det gick inte att ta bort kreditkortet, försök igen senare.", "Failed to delete credit card, please try again later.": "Det gick inte att ta bort kreditkortet, försök igen senare.",
@@ -484,6 +487,7 @@
"Your level": "Din nivå", "Your level": "Din nivå",
"Your points to spend": "Dina spenderbara poäng", "Your points to spend": "Dina spenderbara poäng",
"Your room": "Ditt rum", "Your room": "Ditt rum",
"Your selected bed type will be provided based on availability": "Din valda sängtyp kommer att tillhandahållas baserat på tillgänglighet",
"Zip code": "Postnummer", "Zip code": "Postnummer",
"Zoo": "Djurpark", "Zoo": "Djurpark",
"Zoom in": "Zooma in", "Zoom in": "Zooma in",

View File

@@ -1,6 +1,6 @@
import { z } from "zod" import type { z } from "zod"
import { import type {
bedTypeFormSchema, bedTypeFormSchema,
bedTypeSchema, bedTypeSchema,
} from "@/components/HotelReservation/EnterDetails/BedType/schema" } from "@/components/HotelReservation/EnterDetails/BedType/schema"
@@ -20,3 +20,7 @@ export type BedTypeProps = {
export interface BedTypeFormSchema extends z.output<typeof bedTypeFormSchema> {} export interface BedTypeFormSchema extends z.output<typeof bedTypeFormSchema> {}
export type BedTypeSchema = z.output<typeof bedTypeSchema>["bedType"] export type BedTypeSchema = z.output<typeof bedTypeSchema>["bedType"]
export type BedTypeInfoProps = {
hasMultipleBedTypes: boolean
}