fix(i18n): prepare for Lokalise

2025-01-03 14:54:46 +01:00
parent cbc17e2c5b
commit d2ce9c0d7c
120 changed files with 1703 additions and 1042 deletions
@@ -36,10 +36,10 @@ export default function Confirmation({
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({
-              id: "booking.confirmation.membershipInfo.heading",
+              id: "Failed to verify membership",
            })}
            text={intl.formatMessage({
-              id: "booking.confirmation.membershipInfo.text",
+              id: "Your booking(s) is confirmed but we could not verify your membership. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay.",
            })}
          />
        )}
@@ -24,7 +24,9 @@ export default function Header({
  const intl = useIntl()

  const text = intl.formatMessage<React.ReactNode>(
-    { id: "booking.confirmation.text" },
+    {
+      id: "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>contact us.</emailLink>",
+    },
    {
      emailLink: (str) => (
        <Link color="burgundy" href="#" textDecoration="underline">
@@ -57,7 +59,7 @@ export default function Header({
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
        <Title as="h2" color="red" textTransform="uppercase" type="h2">
-          {intl.formatMessage({ id: "booking.confirmation.title" })}
+          {intl.formatMessage({ id: "Booking confirmation" })}
        </Title>
        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
          {hotel.name}
@@ -1,4 +1,5 @@
 "use client"
+
 import { useIntl } from "react-intl"

 import Link from "@/components/TempDesignSystem/Link"
@@ -23,8 +24,14 @@ export default function HotelDetails({
        <div className={styles.hotel}>
          <Body color="uiTextHighContrast">{hotel.name}</Body>
          <Body color="uiTextHighContrast">
-            {hotel.address.streetAddress}, {hotel.address.zipCode}{" "}
-            {hotel.address.city}
+            {intl.formatMessage(
+              { id: "{streetAddress}, {zipCode} {city}" },
+              {
+                streetAddress: hotel.address.streetAddress,
+                zipCode: hotel.address.zipCode,
+                city: hotel.address.city,
+              }
+            )}
          </Body>
          <Body asChild color="uiTextHighContrast">
            <Link
@@ -64,7 +71,7 @@ export default function HotelDetails({
      <div className={styles.toast}>
        <Toast variant="info">
          <ul className={styles.list}>
-            <li>N/A</li>
+            <li>{intl.formatMessage({ id: "N/A" })}</li>
          </ul>
        </Toast>
      </div>
@@ -26,8 +26,16 @@ export default function PaymentDetails({
      </Subtitle>
      <div className={styles.payment}>
        <Body color="uiTextHighContrast">
-          {formatPrice(intl, booking.totalPrice, booking.currencyCode)}{" "}
-          {intl.formatMessage({ id: "has been paid" })}
+          {intl.formatMessage(
+            { id: "{amount} has been paid" },
+            {
+              amount: formatPrice(
+                intl,
+                booking.totalPrice,
+                booking.currencyCode
+              ),
+            }
+          )}
        </Body>
        <Body color="uiTextHighContrast">
          {dt(booking.createDateTime)
@@ -1,4 +1,5 @@
 "use client"
+
 import { notFound } from "next/navigation"
 import { useIntl } from "react-intl"

@@ -47,7 +48,7 @@ export default function Receipt({
          {booking.rateDefinition.isMemberRate ? (
            <div className={styles.memberPrice}>
              <Body color="uiTextPlaceholder">
-                <s>N/A</s>
+                <s>{intl.formatMessage({ id: "N/A" })}</s>
              </Body>
              <Body color="red">
                {formatPrice(intl, booking.roomPrice, booking.currencyCode)}
@@ -60,7 +61,7 @@ export default function Receipt({
          )}
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
-              { id: "booking.adults" },
+              { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
              {
                totalAdults: booking.adults,
              }
@@ -156,7 +157,12 @@ export default function Receipt({
            <ChevronRightSmallIcon />
          </Button>
          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage({ id: "Approx." })} N/A EUR
+            {intl.formatMessage(
+              { id: "Approx. {value}" },
+              {
+                value: "N/A EUR",
+              }
+            )}
          </Caption>
        </div>
      </div>
@@ -1,4 +1,5 @@
 "use client"
+
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
@@ -23,6 +24,7 @@ export default function Room({ booking, img, roomName }: RoomProps) {
  const intl = useIntl()
  const lang = useLang()

+  const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)
  return (
@@ -33,7 +35,12 @@ export default function Room({ booking, img, roomName }: RoomProps) {
          {intl.formatMessage({ id: "Room" })} 1
        </Subtitle> */}
          <Subtitle color="uiTextHighContrast" type="two">
-            {`${intl.formatMessage({ id: "Reservation number" })} ${booking.confirmationNumber}`}
+            {intl.formatMessage(
+              { id: "Reservation number {value}" },
+              {
+                value: booking.confirmationNumber,
+              }
+            )}
          </Subtitle>
        </div>
        <div className={styles.benefits}>
@@ -81,7 +88,13 @@ export default function Room({ booking, img, roomName }: RoomProps) {
                {intl.formatMessage({ id: "Check-in" })}
              </Body>
              <Body color="uiTextHighContrast">
-                {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
+                {intl.formatMessage(
+                  { id: "{checkInDate} from {checkInTime}" },
+                  {
+                    checkInDate: fromDate.format("ddd, D MMM"),
+                    checkInTime: fromDate.format("HH:mm"),
+                  }
+                )}
              </Body>
            </li>
            <li className={styles.listItem}>
@@ -89,14 +102,22 @@ export default function Room({ booking, img, roomName }: RoomProps) {
                {intl.formatMessage({ id: "Check-out" })}
              </Body>
              <Body color="uiTextHighContrast">
-                {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
+                {intl.formatMessage(
+                  { id: "{checkOutDate} from {checkOutTime}" },
+                  {
+                    checkOutDate: toDate.format("ddd, D MMM"),
+                    checkOutTime: toDate.format("HH:mm"),
+                  }
+                )}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Breakfast" })}
              </Body>
-              <Body color="uiTextHighContrast">N/A</Body>
+              <Body color="uiTextHighContrast">
+                {intl.formatMessage({ id: "N/A" })}
+              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
@@ -110,19 +131,24 @@ export default function Room({ booking, img, roomName }: RoomProps) {
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Rebooking" })}
              </Body>
-              <Body color="uiTextHighContrast">N/A</Body>
+              <Body color="uiTextHighContrast">
+                {intl.formatMessage({ id: "N/A" })}
+              </Body>
            </li>
          </ul>
          <div className={styles.guest}>
            <Body color="uiTextPlaceholder">
              {intl.formatMessage({ id: "Main guest" })}
            </Body>
-            <Body color="uiTextHighContrast">
-              {`${booking.guest.firstName} ${booking.guest.lastName}`}
-            </Body>
+            <Body color="uiTextHighContrast">{guestName}</Body>
            {booking.guest.membershipNumber ? (
              <Body color="uiTextHighContrast">
-                {`${intl.formatMessage({ id: "Friend no." })} ${booking.guest.membershipNumber}`}
+                {intl.formatMessage(
+                  { id: "Friend no. {value}" },
+                  {
+                    value: booking.guest.membershipNumber,
+                  }
+                )}
              </Body>
            ) : null}
            {booking.guest.phoneNumber ? (