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:
@@ -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
|
||||
}
|
||||
@@ -1,3 +1,9 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
|
||||
@@ -9,6 +9,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
|
||||
import { KingBedIcon } from "@/components/Icons"
|
||||
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
|
||||
|
||||
import BedTypeInfo from "./BedTypeInfo"
|
||||
import { bedTypeFormSchema } from "./schema"
|
||||
|
||||
import styles from "./bedOptions.module.css"
|
||||
@@ -62,26 +63,29 @@ export default function BedType({ bedTypes }: BedTypeProps) {
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
|
||||
{bedTypes.map((roomType) => {
|
||||
const width =
|
||||
roomType.size.max === roomType.size.min
|
||||
? `${roomType.size.min} cm`
|
||||
: `${roomType.size.min} cm - ${roomType.size.max} cm`
|
||||
return (
|
||||
<RadioCard
|
||||
key={roomType.value}
|
||||
Icon={KingBedIcon}
|
||||
iconWidth={46}
|
||||
id={roomType.value}
|
||||
name="bedType"
|
||||
subtitle={width}
|
||||
title={roomType.description}
|
||||
value={roomType.value}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</form>
|
||||
<div className={styles.container}>
|
||||
<BedTypeInfo hasMultipleBedTypes={bedTypes.length > 1} />
|
||||
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
|
||||
{bedTypes.map((roomType) => {
|
||||
const width =
|
||||
roomType.size.max === roomType.size.min
|
||||
? `${roomType.size.min} cm`
|
||||
: `${roomType.size.min} cm - ${roomType.size.max} cm`
|
||||
return (
|
||||
<RadioCard
|
||||
key={roomType.value}
|
||||
Icon={KingBedIcon}
|
||||
iconWidth={46}
|
||||
id={roomType.value}
|
||||
name="bedType"
|
||||
subtitle={width}
|
||||
title={roomType.description}
|
||||
value={roomType.value}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</form>
|
||||
</div>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@ import Modal from "../../Modal"
|
||||
|
||||
import styles from "./ui.module.css"
|
||||
|
||||
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
|
||||
import type { SummaryProps } from "@/types/components/hotelReservation/summary"
|
||||
import type { DetailsState } from "@/types/stores/enter-details"
|
||||
|
||||
@@ -67,6 +68,25 @@ export default function SummaryUI({
|
||||
const adults = booking.rooms[0].adults
|
||||
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
|
||||
? {
|
||||
currency: roomRate.memberRate.localPrice.currency,
|
||||
@@ -179,12 +199,7 @@ export default function SummaryUI({
|
||||
: null}
|
||||
{bedType ? (
|
||||
<div className={styles.entry}>
|
||||
<div>
|
||||
<Body color="uiTextHighContrast">{bedType.description}</Body>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Based on availability" })}
|
||||
</Caption>
|
||||
</div>
|
||||
<Body color="uiTextHighContrast">{bedType.description}</Body>
|
||||
|
||||
<Body color="uiTextHighContrast">
|
||||
{intl.formatNumber(0, {
|
||||
@@ -194,7 +209,39 @@ export default function SummaryUI({
|
||||
</Body>
|
||||
</div>
|
||||
) : 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 ? (
|
||||
<div className={styles.entry}>
|
||||
<Body color="uiTextHighContrast">
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
"Creative spaces for meetings": "Kreative rum til møder",
|
||||
"Credit card": "Kreditkort",
|
||||
"Credit card deleted successfully": "Kreditkort blev slettet",
|
||||
"Crib (child)": "Kørestol (barn)",
|
||||
"Currency Code": "DKK",
|
||||
"Current password": "Nuværende kodeord",
|
||||
"Customer service": "Kundeservice",
|
||||
@@ -142,6 +143,8 @@
|
||||
"Expires at the earliest": "Udløber tidligst {date}",
|
||||
"Explore all levels and benefits": "Udforsk alle niveauer og fordele",
|
||||
"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",
|
||||
"FAQ": "Ofte stillede spørgsmål",
|
||||
"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 points to spend": "Dine brugbare point",
|
||||
"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",
|
||||
"Zoo": "Zoo",
|
||||
"Zoom in": "Zoom ind",
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
"Creative spaces for meetings": "Kreative Räume für Meetings",
|
||||
"Credit card": "Kreditkarte",
|
||||
"Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
|
||||
"Crib (child)": "Kinderbett (Kind)",
|
||||
"Currency Code": "EUR",
|
||||
"Current password": "Aktuelles Passwort",
|
||||
"Customer service": "Kundendienst",
|
||||
@@ -142,6 +143,8 @@
|
||||
"Expires at the earliest": "Läuft frühestens am {date} ab",
|
||||
"Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile",
|
||||
"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",
|
||||
"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.",
|
||||
@@ -485,6 +488,7 @@
|
||||
"Your level": "Dein level",
|
||||
"Your points to spend": "Meine Punkte",
|
||||
"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",
|
||||
"Zoo": "Zoo",
|
||||
"Zoom in": "Vergrößern",
|
||||
|
||||
@@ -112,6 +112,7 @@
|
||||
"Creative spaces for meetings": "Creative spaces for meetings",
|
||||
"Credit card": "Credit card",
|
||||
"Credit card deleted successfully": "Credit card deleted successfully",
|
||||
"Crib (child)": "Crib (child)",
|
||||
"Currency Code": "EUR",
|
||||
"Current password": "Current password",
|
||||
"Customer service": "Customer service",
|
||||
@@ -150,6 +151,8 @@
|
||||
"Expires at the earliest": "Expires at the earliest {date}",
|
||||
"Explore all levels and benefits": "Explore all levels and benefits",
|
||||
"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",
|
||||
"FAQ": "FAQ",
|
||||
"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 points to spend": "Your points to spend",
|
||||
"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",
|
||||
"Zoo": "Zoo",
|
||||
"Zoom in": "Zoom in",
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
"Creative spaces for meetings": "Luovia tiloja kokouksille",
|
||||
"Credit card": "Luottokortti",
|
||||
"Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
|
||||
"Crib (child)": "Körkkä (lasta)",
|
||||
"Currency Code": "EUR",
|
||||
"Current password": "Nykyinen salasana",
|
||||
"Customer service": "Asiakaspalvelu",
|
||||
@@ -142,6 +143,8 @@
|
||||
"Expires at the earliest": "Päättyy aikaisintaan {date}",
|
||||
"Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
|
||||
"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",
|
||||
"FAQ": "Usein kysytyt kysymykset",
|
||||
"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 points to spend": "Käytettävissä olevat pisteesi",
|
||||
"Your room": "Sinun huoneesi",
|
||||
"Your selected bed type will be provided based on availability": "Valitun vuodetyypin toimitetaan saatavuuden mukaan",
|
||||
"Zip code": "Postinumero",
|
||||
"Zoo": "Eläintarha",
|
||||
"Zoom in": "Lähennä",
|
||||
|
||||
@@ -104,6 +104,7 @@
|
||||
"Country is required": "Land kreves",
|
||||
"Creative spaces for meetings": "Kreative rom for møter",
|
||||
"Credit card deleted successfully": "Kredittkort slettet",
|
||||
"Crib (child)": "Kørestol (barn)",
|
||||
"Currency Code": "NOK",
|
||||
"Current password": "Nåværende passord",
|
||||
"Customer service": "Kundeservice",
|
||||
@@ -141,6 +142,8 @@
|
||||
"Expires at the earliest": "Utløper tidligst {date}",
|
||||
"Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
|
||||
"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",
|
||||
"FAQ": "Ofte stilte spørsmål",
|
||||
"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 points to spend": "Dine brukbare poeng",
|
||||
"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",
|
||||
"Zoo": "Dyrehage",
|
||||
"Zoom in": "Zoom inn",
|
||||
|
||||
@@ -104,6 +104,7 @@
|
||||
"Country is required": "Land är obligatoriskt",
|
||||
"Creative spaces for meetings": "Kreativa utrymmen för möten",
|
||||
"Credit card deleted successfully": "Kreditkort har tagits bort",
|
||||
"Crib (child)": "Spjälsäng (barn)",
|
||||
"Currency Code": "SEK",
|
||||
"Current password": "Nuvarande lösenord",
|
||||
"Customer service": "Kundservice",
|
||||
@@ -141,6 +142,8 @@
|
||||
"Expires at the earliest": "Löper ut tidigast {date}",
|
||||
"Explore all levels and benefits": "Utforska alla nivåer och fördelar",
|
||||
"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",
|
||||
"FAQ": "FAQ",
|
||||
"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 points to spend": "Dina spenderbara poäng",
|
||||
"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",
|
||||
"Zoo": "Djurpark",
|
||||
"Zoom in": "Zooma in",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { z } from "zod"
|
||||
import type { z } from "zod"
|
||||
|
||||
import {
|
||||
import type {
|
||||
bedTypeFormSchema,
|
||||
bedTypeSchema,
|
||||
} from "@/components/HotelReservation/EnterDetails/BedType/schema"
|
||||
@@ -20,3 +20,7 @@ export type BedTypeProps = {
|
||||
export interface BedTypeFormSchema extends z.output<typeof bedTypeFormSchema> {}
|
||||
|
||||
export type BedTypeSchema = z.output<typeof bedTypeSchema>["bedType"]
|
||||
|
||||
export type BedTypeInfoProps = {
|
||||
hasMultipleBedTypes: boolean
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user