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

Merged in fix/labels-english (pull request #1249)

Browse Source 
fix(i18n): validated English messages

Approved-by: Bianca Widstam
Approved-by: Christian Andolf
This commit is contained in:
Michael Zetterberg
2025-02-06 20:54:25 +00:00
parent 9fafb33d26
commit 1d822dad5a
21 changed files with 489 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/BookingWidget/MobileToggleButton/index.tsx
+2 -2
View File
@@ -91,7 +91,7 @@ export default function MobileToggleButton({
<>
<div>
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to" })}
{intl.formatMessage({ id: "Where to?" })}
</Caption>
<Body color="uiTextPlaceholder">
{parsedLocation
@@ -154,7 +154,7 @@ export function MobileToggleButtonSkeleton() {
<div className={styles.partial}>
<div>
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to" })}
{intl.formatMessage({ id: "Where to?" })}
</Caption>
<SkeletonShimmer height="24px" />
</div>
components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+35 -25
View File
@@ -6,6 +6,7 @@ import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIco
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -28,30 +29,39 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
<SidePeek contentKey={getRoomNameAsParam(room.name)} title={room.name}>
<div className={styles.content}>
<div className={styles.innerContent}>
<Body color="baseTextMediumContrast">
{roomSize.min === roomSize.max
? intl.formatMessage(
{
id: "{roomSize} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
},
{
roomSize: roomSize.min,
max: totalOccupancy.max,
range: totalOccupancy.range,
}
)
: intl.formatMessage(
{
id: "{roomSizeMin} - {roomSizeMax} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
},
{
roomSizeMin: roomSize.min,
roomSizeMax: roomSize.max,
max: totalOccupancy.max,
range: totalOccupancy.range,
}
)}
</Body>
{totalOccupancy && (
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
},
{
max: totalOccupancy.max,
range: totalOccupancy.range,
}
)}
</Caption>
)}
{roomSize && (
<Caption color="uiTextMediumContrast">
{roomSize.min === roomSize.max
? intl.formatMessage(
{ id: "{roomSize} m²" },
{
roomSize: roomSize.min,
}
)
: intl.formatMessage(
{
id: "{roomSizeMin}–{roomSizeMax} m²",
},
{
roomSizeMin: roomSize.min,
roomSizeMax: roomSize.max,
}
)}
</Caption>
)}
<div className={styles.imageContainer}>
<ImageGallery
images={galleryImages}
@@ -64,7 +74,7 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
<div className={styles.innerContent}>
<Subtitle type="two" color="uiTextHighContrast" asChild>
<h3>{intl.formatMessage({ id: "This room is equipped with" })}</h3>
<h3>{intl.formatMessage({ id: "Room amenities" })}</h3>
</Subtitle>
<ul className={styles.facilityList}>
{room.roomFacilities
components/ContentType/HotelPage/SidePeeks/Room/room.module.css
+5
View File
@@ -11,6 +11,11 @@
gap: var(--Spacing-x-one-and-half);
}
.innerContent .guests {
border-right: 1px solid var(--Base-Border-Subtle);
padding-right: var(--Spacing-x1);
}
.imageContainer {
position: relative;
border-radius: var(--Corner-radius-Medium);
components/Forms/BookingWidget/FormContent/Search/index.tsx
+3 -3
View File
@@ -177,7 +177,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
}, [location])
function getLocationLabel(): string {
const fallbackLabel = intl.formatMessage({ id: "Where to" })
const fallbackLabel = intl.formatMessage({ id: "Where to?" })
if (location?.type === "hotels") {
return location?.relationships?.city?.name || fallbackLabel
}
@@ -230,7 +230,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
openMenu()
},
placeholder: intl.formatMessage({
id: "Destinations & hotels",
id: "Hotels & Destinations",
}),
...register(name, {
onChange: handleOnChange,
@@ -267,7 +267,7 @@ export function SearchSkeleton() {
<div className={styles.container}>
<div className={styles.label}>
<Caption type="bold" color="red" asChild>
<span>{intl.formatMessage({ id: "Where to" })}</span>
<span>{intl.formatMessage({ id: "Where to?" })}</span>
</Caption>
</div>
<div>
components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+4 -4
View File
@@ -14,8 +14,8 @@ import styles from "./voucher.module.css"
export default function Voucher() {
const intl = useIntl()
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
const bonus = intl.formatMessage({ id: "Use Bonus Cheque" })
const reward = intl.formatMessage({ id: "Book Reward Night" })
// ToDo: Remove this when all three options are enabled
const disabledBookingOptionsHeader = intl.formatMessage({
@@ -72,8 +72,8 @@ export function VoucherSkeleton() {
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
const addVouchers = intl.formatMessage({ id: "Add code" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
const bonus = intl.formatMessage({ id: "Use Bonus Cheque" })
const reward = intl.formatMessage({ id: "Book Reward Night" })
const form = useForm()
components/Forms/BookingWidget/FormContent/index.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ export default function FormContent({
const intl = useIntl()
const selectedDate = useWatch({ name: "date" })
const roomsLabel = intl.formatMessage({ id: "Guests & Rooms" })
const roomsLabel = intl.formatMessage({ id: "Rooms & Guests" })
const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
@@ -123,7 +123,7 @@ export function BookingWidgetFormContentSkeleton() {
</div>
<div className={styles.rooms}>
<Caption color="red" type="bold" asChild>
<span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
<span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
</Caption>
<SkeletonShimmer width={"100%"} />
</div>
components/HotelReservation/BookingConfirmation/Receipt/index.tsx
+3 -1
View File
@@ -41,7 +41,9 @@ export default function Receipt({
)
return (
<section className={styles.receipt}>
<Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
<Subtitle type="two">
{intl.formatMessage({ id: "Booking summary" })}
</Subtitle>
<article className={styles.room}>
<header className={styles.roomHeader}>
<Body color="uiTextHighContrast">{room.name}</Body>
components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
+4 -4
View File
@@ -25,14 +25,14 @@ export default function JoinScandicFriendsCard({
const intl = useIntl()
const list = [
{ title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
{ title: intl.formatMessage({ id: "Get member benefits & offers" }) },
{ title: intl.formatMessage({ id: "Join at no cost" }) },
{ title: intl.formatMessage({ id: "Friendly room rates" }) },
{ title: intl.formatMessage({ id: "Earn & spend points" }) },
{ title: intl.formatMessage({ id: "Join for free" }) },
]
const saveOnJoiningLabel = intl.formatMessage(
{
id: "Only pay {amount}",
id: "Get the member price: {amount}",
},
{
amount: formatPrice(
components/HotelReservation/EnterDetails/Details/index.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
theme="base"
type="submit"
>
{intl.formatMessage({ id: "Proceed to payment method" })}
{intl.formatMessage({ id: "Proceed to payment" })}
</Button>
</footer>
<MemberPriceModal
components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export default function SummaryUI({
<section className={styles.summary}>
<header className={styles.header}>
<Subtitle className={styles.title} type="two">
{intl.formatMessage({ id: "Summary" })}
{intl.formatMessage({ id: "Booking summary" })}
</Subtitle>
<Body className={styles.date} color="baseTextMediumContrast">
{dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
+9 -1
View File
@@ -17,7 +17,7 @@ export default function HotelPriceCard({
return (
<dl className={styles.priceCard}>
{isMemberPrice && (
{isMemberPrice ? (
<div className={styles.priceRow}>
<dt>
<Caption color="red">
@@ -25,6 +25,14 @@ export default function HotelPriceCard({
</Caption>
</dt>
</div>
) : (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Standard price" })}
</Caption>
</dt>
</div>
)}
<div className={styles.priceRow}>
<dt>
components/HotelReservation/SelectRate/RoomTypeList/RoomCard/index.tsx
+6 -3
View File
@@ -227,9 +227,12 @@ export default function RoomCard({
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "Max {max, plural, one {{range} guest} other {{range} guests}}",
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
},
{ max: totalOccupancy.max, range: totalOccupancy.range }
{
max: totalOccupancy.max,
range: totalOccupancy.range,
}
)}
</Caption>
)}
@@ -244,7 +247,7 @@ export default function RoomCard({
)
: intl.formatMessage(
{
id: "{roomSizeMin} - {roomSizeMax} m²",
id: "{roomSizeMin}–{roomSizeMax} m²",
},
{
roomSizeMin: roomSize.min,
components/HotelReservation/SelectRate/Rooms/index.tsx
+3 -3
View File
@@ -70,21 +70,21 @@ export default function Rooms({
() => [
{
code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
description: intl.formatMessage({ id: "Accessible Room" }),
description: intl.formatMessage({ id: "Accessible room" }),
itemCode: availablePackages.find(
(pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
)?.itemCode,
},
{
code: RoomPackageCodeEnum.ALLERGY_ROOM,
description: intl.formatMessage({ id: "Allergy Room" }),
description: intl.formatMessage({ id: "Allergy-friendly room" }),
itemCode: availablePackages.find(
(pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM
)?.itemCode,
},
{
code: RoomPackageCodeEnum.PET_ROOM,
description: intl.formatMessage({ id: "Pet Room" }),
description: intl.formatMessage({ id: "Pet room" }),
itemCode: availablePackages.find(
(pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
)?.itemCode,
components/SidePeeks/RoomSidePeek/index.tsx
+36 -26
View File
@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
import ImageGallery from "@/components/ImageGallery"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -22,7 +23,7 @@ export default function RoomSidePeek({
const intl = useIntl()
const roomSize = room.roomSize
const totalOccupancy = room.occupancy
const totalOccupancy = room.totalOccupancy
const roomDescription = room.descriptions.medium
const galleryImages = mapApiImagesToGalleryImages(room.images)
@@ -34,30 +35,39 @@ export default function RoomSidePeek({
>
<div className={styles.wrapper}>
<div className={styles.mainContent}>
<Body color="baseTextMediumContrast">
{roomSize.min === roomSize.max
? intl.formatMessage(
{
id: "{roomSize} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
},
{
roomSize: roomSize.min,
max: room.totalOccupancy.max,
range: room.totalOccupancy.range,
}
)
: intl.formatMessage(
{
id: "{roomSizeMin} - {roomSizeMax} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
},
{
roomSizeMin: roomSize.min,
roomSizeMax: roomSize.max,
max: room.totalOccupancy.max,
range: room.totalOccupancy.range,
}
)}
</Body>
{totalOccupancy && (
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
},
{
max: totalOccupancy.max,
range: totalOccupancy.range,
}
)}
</Caption>
)}
{roomSize && (
<Caption color="uiTextMediumContrast">
{roomSize.min === roomSize.max
? intl.formatMessage(
{ id: "{roomSize} m²" },
{
roomSize: roomSize.min,
}
)
: intl.formatMessage(
{
id: "{roomSizeMin}–{roomSizeMax} m²",
},
{
roomSizeMin: roomSize.min,
roomSizeMax: roomSize.max,
}
)}
</Caption>
)}
<div className={styles.imageContainer}>
<ImageGallery
images={galleryImages}
@@ -69,7 +79,7 @@ export default function RoomSidePeek({
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "This room is equipped with" })}
{intl.formatMessage({ id: "Room amenities" })}
</Subtitle>
<ul className={styles.facilityList}>
{room.roomFacilities