fix: clean up dictionaries

This commit is contained in:
Michael Zetterberg
2025-03-11 13:12:06 +01:00
parent 1a8a57599c
commit 91c36ee41c
32 changed files with 372 additions and 182 deletions

View File

@@ -26,7 +26,12 @@ export default function Multiroom() {
<section>
<Header>
<Title level="h2" as="h4">
{`${intl.formatMessage({ id: "Room" })} ${roomNr}`}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: roomNr,
}
)}
</Title>
</Header>

View File

@@ -31,7 +31,12 @@ export default function RoomOne({ user }: { user: SafeUser }) {
{isMultiroom ? (
<Header>
<Title level="h2" as="h4">
{`${intl.formatMessage({ id: "Room" })} 1`}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: 1,
}
)}
</Title>
</Header>
) : null}

View File

@@ -149,7 +149,12 @@ export default function SummaryUI({
<div>
{rooms.length > 1 ? (
<Body textTransform="bold">
{intl.formatMessage({ id: "Room" })} {roomNumber}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: roomNumber,
}
)}
</Body>
) : null}
<div className={styles.entry}>

View File

@@ -218,8 +218,12 @@ export default function AddAncillaryFlowModal({
<>
<Divider variant="vertical" color="subtle" />
<Body textTransform="bold" color="uiTextHighContrast">
{selectedAncillary.points}{" "}
{intl.formatMessage({ id: "points" })}
{intl.formatMessage(
{ id: "{value} points" },
{
value: selectedAncillary.points,
}
)}
</Body>
</>
)}

View File

@@ -110,7 +110,10 @@ export default function ConfirmationStep() {
<Divider variant="vertical" color="subtle" />
</div>
<Body textTransform="bold" color="uiTextHighContrast">
{totalPoints} {intl.formatMessage({ id: "points" })}
{intl.formatMessage(
{ id: "{value} points" },
{ value: totalPoints }
)}
</Body>
</div>
)}

View File

@@ -73,7 +73,12 @@ export function AddedAncillaries({
color="baseSurfaceSubtleNormal"
/>
<Body textTransform="bold">
{`${ancillary.points} ${intl.formatMessage({ id: "Points" })}`}
{intl.formatMessage(
{ id: "{value} points" },
{
value: ancillary.points,
}
)}
</Body>
</div>
</div>
@@ -120,7 +125,12 @@ export function AddedAncillaries({
</Body>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Body textTransform="bold">
{`${ancillary.points} ${intl.formatMessage({ id: "Points" })}`}
{intl.formatMessage(
{ id: "{value} points" },
{
value: ancillary.points,
}
)}
</Body>
</div>
</div>

View File

@@ -68,7 +68,12 @@ export function CancelStayConfirmation({
>
<div className={styles.roomInfo}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Room" })} {index + 1}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: index + 1,
}
)}
</Caption>
{roomDetail && (
<>

View File

@@ -56,11 +56,35 @@ export default function LinkedReservation({
const fromDate = dt(booking.checkInDate).locale(lang)
const toDate = dt(booking.checkOutDate).locale(lang)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
adults: booking.adults,
}
)
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
},
{
children: booking.childrenAges.length,
}
)
const adultsOnlyMsg = adultsMsg
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
return (
<article className={styles.linkedReservation}>
<div className={styles.title}>
<Subtitle color="burgundy">
{intl.formatMessage({ id: "Room" }) + " " + (index + 2)}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: index + 2,
}
)}
</Subtitle>
</div>
<div className={styles.details}>
@@ -70,19 +94,8 @@ export default function LinkedReservation({
<div>
<Caption color="uiTextHighContrast">
{booking.childrenAges.length > 0
? intl.formatMessage(
{ id: "{adults} adults, {children} children" },
{
adults: booking.adults,
children: booking.childrenAges.length,
}
)
: intl.formatMessage(
{ id: "{adults} adults" },
{
adults: booking.adults,
}
)}
? adultsAndChildrenMsg
: adultsOnlyMsg}
</Caption>
</div>
</div>

View File

@@ -49,6 +49,7 @@ export function ReferenceCard({ booking, hotel }: ReferenceCardProps) {
(acc, linkedReservation) => acc + linkedReservation.adults,
0
) ?? 0)
const children =
booking.childrenAges.length +
(booking.linkedReservations?.reduce(
@@ -56,6 +57,25 @@ export function ReferenceCard({ booking, hotel }: ReferenceCardProps) {
0
) ?? 0)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{
adults: adults,
}
)
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
},
{
children: children,
}
)
const adultsOnlyMsg = adultsMsg
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
return (
<div className={styles.referenceCard}>
<div className={styles.referenceRow}>
@@ -83,20 +103,7 @@ export function ReferenceCard({ booking, hotel }: ReferenceCardProps) {
{intl.formatMessage({ id: "Guests" })}
</Caption>
<Caption type="bold" color="uiTextHighContrast">
{children > 0
? intl.formatMessage(
{ id: "{adults} adults, {children} children" },
{
adults: adults,
children: children,
}
)
: intl.formatMessage(
{ id: "{adults} adults" },
{
adults: adults,
}
)}
{children > 0 ? adultsAndChildrenMsg : adultsOnlyMsg}
</Caption>
</div>
<div className={styles.referenceRow}>

View File

@@ -158,8 +158,12 @@ export default function GuestDetails({
</Body>
{isMemberBooking && (
<Body color="uiTextHighContrast">
{intl.formatMessage({ id: "Member no." })}{" "}
{user.membership!.membershipNumber}
{intl.formatMessage(
{ id: "Member no. {nr}" },
{
nr: user.membership!.membershipNumber,
}
)}
</Body>
)}
<Caption color="uiTextHighContrast">{guestDetails.email}</Caption>

View File

@@ -87,6 +87,44 @@ export function Room({ booking, room, hotel, user }: RoomProps) {
const fromDate = dt(booking.checkInDate).locale(lang)
const mainBedWidthValueMsg = intl.formatMessage(
{ id: "{value} cm" },
{
value: room.bedType.mainBed.widthRange.min,
}
)
const mainBedWidthRangeMsg = intl.formatMessage(
{
id: "{min}{max} cm",
},
{
min: room.bedType.mainBed.widthRange.min,
max: room.bedType.mainBed.widthRange.max,
}
)
const adultsMsg = intl.formatMessage(
{
id: "{adults, plural, one {# adult} other {# adults}}",
},
{
adults: booking.adults,
}
)
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
},
{
children: booking.childrenAges.length,
}
)
const adultsOnlyMsg = adultsMsg
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
return (
<div>
<article className={styles.room}>
@@ -189,19 +227,8 @@ export function Room({ booking, room, hotel, user }: RoomProps) {
<div className={styles.rowContent}>
<Body color="uiTextHighContrast">
{booking.childrenAges.length > 0
? intl.formatMessage(
{ id: "{adults} adults, {children} children" },
{
adults: booking.adults,
children: booking.childrenAges.length,
}
)
: intl.formatMessage(
{ id: "{adults} adults" },
{
adults: booking.adults,
}
)}
? adultsAndChildrenMsg
: adultsOnlyMsg}
</Body>
</div>
</div>
@@ -232,8 +259,8 @@ export function Room({ booking, room, hotel, user }: RoomProps) {
{room.bedType.mainBed.description}
{room.bedType.mainBed.widthRange.min ===
room.bedType.mainBed.widthRange.max
? ` (${room.bedType.mainBed.widthRange.min} ${intl.formatMessage({ id: "cm" })})`
: ` (${room.bedType.mainBed.widthRange.min} - ${room.bedType.mainBed.widthRange.max} ${intl.formatMessage({ id: "cm" })})`}
? ` (${mainBedWidthValueMsg})`
: ` (${mainBedWidthRangeMsg})`}
</Body>
</div>
</div>

View File

@@ -110,7 +110,12 @@ export default function PriceDetailsTable({
<TableSection>
{rooms.length > 1 && (
<Body textTransform="bold">
{intl.formatMessage({ id: "Room" })} {idx + 1}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: idx + 1,
}
)}
</Body>
)}
<TableSectionHeader title={room.roomType} subtitle={duration} />

View File

@@ -43,7 +43,7 @@ export default function BookingCodeFilter() {
<>
<div className={styles.bookingCodeFilter}>
<Select
aria-label="Booking Code Filter"
aria-label={intl.formatMessage({ id: "Booking Code Filter" })}
className={styles.bookingCodeFilterSelect}
name="bookingCodeFilter"
onSelect={updateFilter}

View File

@@ -209,7 +209,12 @@ export default async function SelectHotel({
<div className={styles.cityInformation}>
<Subtitle>
{isAlternativeFor
? `${intl.formatMessage({ id: "Alternatives for" })} ${isAlternativeFor.name}`
? intl.formatMessage(
{ id: "Alternatives for {value}" },
{
value: isAlternativeFor.name,
}
)
: city.name}
</Subtitle>
<HotelCount />

View File

@@ -138,7 +138,12 @@ export default function Summary({
<div>
{rooms.length > 1 ? (
<Body textTransform="bold">
{intl.formatMessage({ id: "Room" })} {roomNumber}
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{
roomIndex: roomNumber,
}
)}
</Body>
) : null}
<div className={styles.entry}>

View File

@@ -27,18 +27,33 @@ export default function MultiRoomWrapper({
selectedRate,
} = useRoomContext()
const onlyAdultsMsg = intl.formatMessage(
{ id: "{adults} adults" },
const roomMsg = intl.formatMessage(
{ id: "Room {roomIndex}" },
{ roomIndex: roomNr }
)
const adultsMsg = intl.formatMessage(
{ id: "{adults, plural, one {# adult} other {# adults}}" },
{ adults: bookingRoom.adults }
)
const adultsAndChildrenMsg = intl.formatMessage(
{ id: "{adults} adults, {children} children" },
const childrenMsg = intl.formatMessage(
{
id: "{children, plural, one {# child} other {# children}}",
},
{
adults: bookingRoom.adults,
children: bookingRoom.childrenInRoom?.length,
}
)
const onlyAdultsMsg = adultsMsg
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
const guestsMsg = bookingRoom.childrenInRoom?.length
? adultsAndChildrenMsg
: onlyAdultsMsg
const title = [roomMsg, guestsMsg].join(", ")
useEffect(() => {
requestAnimationFrame(() => {
const SCROLL_OFFSET = 100
@@ -67,16 +82,7 @@ export default function MultiRoomWrapper({
<div className={styles.roomContainer} data-multiroom="true">
<div className={styles.header}>
{selectedRate && !isActiveRoom ? null : (
<Subtitle className={styles.subtitle} color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Room {roomIndex}" },
{ roomIndex: roomNr }
)}
,{" "}
{bookingRoom.childrenInRoom?.length
? adultsAndChildrenMsg
: onlyAdultsMsg}
</Subtitle>
<Subtitle color="uiTextHighContrast">{title}</Subtitle>
)}
{selectedRate && isActiveRoom ? (
<Button

View File

@@ -217,10 +217,16 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
<Caption color="uiTextMediumContrast">
{occupancy.max === occupancy.min
? intl.formatMessage(
{ id: "guests.plural" },
{ guests: occupancy.max }
)
: intl.formatMessage({ id: "guests.span" }, occupancy)}
{ id: "{guests, plural, one {# guest} other {# guests}}" },
{ guests: occupancy.max }
)
: intl.formatMessage(
{ id: "{min}-{max} guests" },
{
min: occupancy.min,
max: occupancy.max,
}
)}
</Caption>
)}
<RoomSize roomSize={roomSize} />
@@ -290,7 +296,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
title={rateTitle}
rateTitle={
product.public &&
product.public?.rateType !== RateTypeEnum.Regular
product.public?.rateType !== RateTypeEnum.Regular
? rateDefinition?.title
: undefined
}

View File

@@ -70,7 +70,7 @@ export default function RoomTypeFilter() {
: allRoomsAvailableText}
</Caption>
<ToggleButtonGroup
aria-label="Filter"
aria-label={intl.formatMessage({ id: "Filter" })}
className={styles.roomsFilter}
defaultSelectedKeys={selectedPackage ? [selectedPackage] : undefined}
onSelectionChange={handleChange}