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
--- a/components/HotelReservation/SelectRate/BedSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/BedSelection/index.tsx
@@ -1,5 +1,7 @@
 "use client"
+
 import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"

 import SelectionCard from "../SelectionCard"

@@ -11,6 +13,7 @@ export default function BedSelection({
  alternatives,
  nextPath,
 }: BedSelectionProps) {
+  const intl = useIntl()
  const router = useRouter()
  const searchParams = useSearchParams()

@@ -46,7 +49,7 @@ export default function BedSelection({
        </ul>

        <button type="submit" hidden>
-          Submit
+          {intl.formatMessage({ id: "Submit" })}
        </button>
      </form>
    </div>
--- a/components/HotelReservation/SelectRate/BreakfastSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/BreakfastSelection/index.tsx
@@ -1,5 +1,7 @@
 "use client"
+
 import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"

 import SelectionCard from "../SelectionCard"

@@ -11,6 +13,7 @@ export default function BreakfastSelection({
  alternatives,
  nextPath,
 }: BreakfastSelectionProps) {
+  const intl = useIntl()
  const router = useRouter()
  const searchParams = useSearchParams()

@@ -49,7 +52,7 @@ export default function BreakfastSelection({
        </ul>

        <button type="submit" hidden>
-          Submit
+          {intl.formatMessage({ id: "Submit" })}
        </button>
      </form>
    </div>
--- a/components/HotelReservation/SelectRate/Details/index.tsx
+++ b/components/HotelReservation/SelectRate/Details/index.tsx
@@ -1,5 +1,7 @@
 "use client"
+
 import { useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"

 import Button from "@/components/TempDesignSystem/Button"

@@ -8,12 +10,13 @@ import styles from "./details.module.css"
 import type { DetailsProps } from "@/types/components/hotelReservation/selectRate/section"

 export default function Details({ nextPath }: DetailsProps) {
+  const intl = useIntl()
  const searchParams = useSearchParams()

  return (
    <div className={styles.wrapper}>
      <form method="GET" action={`${nextPath}?${searchParams}`}>
-        <Button type="submit">Submit</Button>
+        <Button type="submit">{intl.formatMessage({ id: "Submit" })}</Button>
      </form>
    </div>
  )
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -70,7 +70,18 @@ export default async function HotelInfoCard({
              </Title>
              <div className={styles.hotelAddressDescription}>
                <Caption color="uiTextMediumContrast">
-                  {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${getSingleDecimal(hotelAttributes.location.distanceToCentre / 1000)} ${intl.formatMessage({ id: "km to city center" })}`}
+                  {intl.formatMessage(
+                    {
+                      id: "{address}, {city} ∙ {distanceToCityCentreInKm} km to city center",
+                    },
+                    {
+                      address: hotelAttributes.address.streetAddress,
+                      city: hotelAttributes.address.city,
+                      distanceToCityCentreInKm: getSingleDecimal(
+                        hotelAttributes.location.distanceToCentre / 1000
+                      ),
+                    }
+                  )}
                </Caption>
                <Body color="uiTextHighContrast">
                  {hotelAttributes.hotelContent.texts.descriptions.medium}
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -84,8 +84,12 @@ export default function RoomFilter({
      <div className={styles.infoDesktop}>
        <Body color="uiTextHighContrast">
          {intl.formatMessage(
-            { id: "Room types available" },
-            { numberOfRooms }
+            {
+              id: "{numberOfRooms, plural, one {# room type} other {# room types}} available",
+            },
+            {
+              numberOfRooms,
+            }
          )}
        </Body>
      </div>
@@ -117,8 +121,12 @@ export default function RoomFilter({
        </div>
        <Caption color="uiTextHighContrast">
          {intl.formatMessage(
-            { id: "Room types available" },
-            { numberOfRooms }
+            {
+              id: "{numberOfRooms, plural, one {# room type} other {# room types}} available",
+            },
+            {
+              numberOfRooms,
+            }
          )}
        </Caption>
      </div>
@@ -138,7 +146,7 @@ export default function RoomFilter({
                <CheckboxChip
                  name={code}
                  key={code}
-                  label={intl.formatMessage({ id: description })}
+                  label={description}
                  disabled={isDisabled}
                  selected={getValues(code)}
                  Icon={getIconForFeatureCode(code)}
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -85,7 +85,7 @@ export default function PriceList({
            </div>
          ) : (
            <Subtitle type="two" color="baseTextDisabled">
-              {intl.formatMessage({ id: "n/a" })}
+              {intl.formatMessage({ id: "N/A" })}
            </Subtitle>
          )}
        </dd>
@@ -112,7 +112,7 @@ export default function PriceList({
            </div>
          ) : (
            <Body textTransform="bold" color="disabled">
-              - {intl.formatMessage({ id: "Currency Code" })}
+              -
            </Body>
          )}
        </dd>
@@ -126,9 +126,14 @@ export default function PriceList({
          </dt>
          <dd>
            <Caption color="uiTextMediumContrast">
-              {totalPublicRequestedPricePerNight}/
-              {totalMemberRequestedPricePerNight}{" "}
-              {publicRequestedPrice.currency}
+              {intl.formatMessage(
+                { id: "{publicPrice}/{memberPrice} {currency}" },
+                {
+                  publicPrice: totalPublicRequestedPricePerNight,
+                  memberPrice: totalMemberRequestedPricePerNight,
+                  currency: publicRequestedPrice.currency,
+                }
+              )}
            </Caption>
          </dd>
        </div>
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -80,15 +80,15 @@ export default function RateSummary({
  const showMemberDiscountBanner = member && !isUserLoggedIn

  const summaryPriceText = `${intl.formatMessage(
-    { id: "booking.nights" },
+    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights: nights }
  )}, ${intl.formatMessage(
-    { id: "booking.adults" },
+    { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
    { totalAdults: roomsAvailability.occupancy?.adults }
  )}${
    roomsAvailability.occupancy?.children?.length
      ? `, ${intl.formatMessage(
-          { id: "booking.children" },
+          { id: "{totalChildren, plural, one {# child} other {# children}}" },
          { totalChildren: roomsAvailability.occupancy.children.length }
        )}`
      : ""
@@ -136,11 +136,15 @@ export default function RateSummary({
              </Subtitle>
              {totalPriceToShow?.requestedPrice ? (
                <Body color="uiTextMediumContrast">
-                  {intl.formatMessage({ id: "Approx." })}{" "}
-                  {formatPrice(
-                    intl,
-                    totalPriceToShow.requestedPrice.price,
-                    totalPriceToShow.requestedPrice.currency
+                  {intl.formatMessage(
+                    { id: "Approx. {value}" },
+                    {
+                      value: formatPrice(
+                        intl,
+                        totalPriceToShow.requestedPrice.price,
+                        totalPriceToShow.requestedPrice.currency
+                      ),
+                    }
                  )}
                </Body>
              ) : null}
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -118,10 +118,12 @@ export default function RoomCard({
            {roomConfiguration.roomsLeft > 0 &&
              roomConfiguration.roomsLeft < 5 && (
                <span className={styles.chip}>
-                  <Footnote
-                    color="burgundy"
-                    textTransform="uppercase"
-                  >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+                  <Footnote color="burgundy" textTransform="uppercase">
+                    {intl.formatMessage(
+                      { id: "{amount, number} left" },
+                      { amount: roomConfiguration.roomsLeft }
+                    )}
+                  </Footnote>
                </span>
              )}
            {roomConfiguration.features
@@ -150,7 +152,7 @@ export default function RoomCard({
            <Caption color="uiTextMediumContrast" className={styles.guests}>
              {intl.formatMessage(
                {
-                  id: "booking.guests",
+                  id: "Max {max, plural, one {{range} guest} other {{range} guests}}",
                },
                { max: totalOccupancy.max, range: totalOccupancy.range }
              )}
@@ -159,9 +161,21 @@ export default function RoomCard({
          {roomSize && (
            <Caption color="uiTextMediumContrast">
              {roomSize.min === roomSize.max
-                ? roomSize.min
-                : `${roomSize.min}-${roomSize.max}`}
-              m²
+                ? intl.formatMessage(
+                    { id: "{roomSize} m²" },
+                    {
+                      roomSize: roomSize.min,
+                    }
+                  )
+                : intl.formatMessage(
+                    {
+                      id: "{roomSizeMin} - {roomSizeMax} m²",
+                    },
+                    {
+                      roomSizeMin: roomSize.min,
+                      roomSizeMax: roomSize.max,
+                    }
+                  )}
            </Caption>
          )}
          <div className={styles.toggleSidePeek}>
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -1,6 +1,7 @@
 "use client"

 import { useCallback, useEffect, useMemo, useState } from "react"
+import { useIntl } from "react-intl"

 import RoomFilter from "../RoomFilter"
 import RoomSelection from "../RoomSelection"
@@ -27,6 +28,8 @@ export default function Rooms({
  hotelType,
  isUserLoggedIn,
 }: SelectRateProps) {
+  const intl = useIntl()
+
  const visibleRooms: RoomConfiguration[] = useMemo(() => {
    const deduped = filterDuplicateRoomTypesByLowestPrice(
      roomsAvailability.roomConfigurations
@@ -59,27 +62,27 @@ export default function Rooms({
    () => [
      {
        code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-        description: "Accessible Room",
+        description: intl.formatMessage({ id: "Accessible Room" }),
        itemCode: availablePackages.find(
          (pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
        )?.itemCode,
      },
      {
        code: RoomPackageCodeEnum.ALLERGY_ROOM,
-        description: "Allergy Room",
+        description: intl.formatMessage({ id: "Allergy Room" }),
        itemCode: availablePackages.find(
          (pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM
        )?.itemCode,
      },
      {
        code: RoomPackageCodeEnum.PET_ROOM,
-        description: "Pet Room",
+        description: intl.formatMessage({ id: "Pet Room" }),
        itemCode: availablePackages.find(
          (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
        )?.itemCode,
      },
    ],
-    [availablePackages]
+    [availablePackages, intl]
  )

  const handleFilter = useCallback(
--- a/components/HotelReservation/SelectRate/SelectionCard/index.tsx
+++ b/components/HotelReservation/SelectRate/SelectionCard/index.tsx
@@ -30,15 +30,20 @@ export default function SelectionCard({

      <div>
        <Caption color="burgundy" className={styles.price}>
-          {formatPrice(intl, price, currency)}/
-          {intl.formatMessage({ id: "night" })}
+          {intl.formatMessage(
+            { id: "{price}/night" },
+            {
+              price: formatPrice(intl, price, currency),
+            }
+          )}
        </Caption>

        {membersPrice && (
          <Caption color="burgundy" className={styles.membersPrice}>
-            {intl.formatMessage({ id: "Members" })}{" "}
-            {formatPrice(intl, membersPrice, currency)}/
-            {intl.formatMessage({ id: "night" })}
+            {intl.formatMessage(
+              { id: "Members {price}/night" },
+              { price: formatPrice(intl, membersPrice, currency) }
+            )}
          </Caption>
        )}
      </div>