Merged in fix/SW-3021-vouchers (pull request #2719)

fix(SW-3021): add pluralization support for vouchers

* fix(SW-3021): add pluralization support for vouchers


Approved-by: Anton Gunnarsson

apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts

@@ -56,7 +56,7 @@ export function mapRoomState(
     formattedRoomCost = formatPrice(
       intl,
       booking.vouchers,
-      intl.formatMessage({ defaultMessage: "Voucher" })
+      CurrencyEnum.Voucher
     )
   }
 

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx

@@ -1,6 +1,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
@@ -16,8 +17,6 @@ import Breakfast from "./Breakfast"
 
 import styles from "./room.module.css"
 
-import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-
 import type { Room as RoomType } from "@/types/stores/enter-details"
 
 interface RoomProps {
@@ -114,14 +113,13 @@ export default function Room({
       )
 
   let currency: string = room.roomPrice.perStay.local.currency
-  const voucherCurrency = intl.formatMessage({ defaultMessage: "Voucher" })
   const isVoucher = "voucher" in room.roomRate
   if (isVoucher) {
-    currency = voucherCurrency
+    currency = CurrencyEnum.Voucher
     price = formatPrice(
       intl,
       room.roomPrice.perStay.local.price,
-      voucherCurrency,
+      currency,
       room.roomPrice.perStay.local.additionalPrice,
       room.roomPrice.perStay.local.additionalPriceCurrency
     )

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -86,15 +86,9 @@ export default function SummaryUI({
   const showDiscounted = containsBookingCodeRate || isMember
 
   const totalCurrency = isVoucherRate
-    ? intl.formatMessage({ defaultMessage: "Voucher" })
+    ? CurrencyEnum.Voucher
     : totalPrice.local.currency
 
-  if (isVoucherRate && defaultCurrency === CurrencyEnum.Voucher) {
-    defaultCurrency = intl.formatMessage({
-      defaultMessage: "Voucher",
-    }) as CurrencyEnum
-  }
-
   return (
     <section className={styles.summary}>
       <header

apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx

@@ -151,24 +151,45 @@ export default function HotelCardListing({
               },
             }}
             lang={lang}
-            prices={{
+            fullPrice={!hotel.availability.bookingCode}
-              public: hotel.availability.productType?.public
+            prices={
-                ? {
+              hotel.availability.productType && {
-                    ...hotel.availability.productType.public,
+                public: hotel.availability.productType?.public
-                    requestedPrice:
+                  ? {
-                      hotel.availability.productType?.public.requestedPrice ??
+                      ...hotel.availability.productType.public,
-                      undefined,
+                      requestedPrice:
-                  }
+                        hotel.availability.productType?.public.requestedPrice ??
-                : undefined,
+                        undefined,
-              member: hotel.availability.productType?.member
+                    }
-                ? {
+                  : undefined,
-                    ...hotel.availability.productType.member,
+                member: hotel.availability.productType?.member
-                    requestedPrice:
+                  ? {
-                      hotel.availability.productType?.member.requestedPrice ??
+                      ...hotel.availability.productType.member,
-                      undefined,
+                      requestedPrice:
-                  }
+                        hotel.availability.productType?.member.requestedPrice ??
-                : undefined,
+                        undefined,
-            }}
+                    }
+                  : undefined,
+                voucher: hotel.availability.productType?.voucher,
+                bonusCheque: hotel.availability.productType?.bonusCheque
+                  ? {
+                      ...hotel.availability.productType.bonusCheque,
+                      requestedPrice:
+                        hotel.availability.productType.bonusCheque
+                          .requestedPrice ?? undefined,
+                    }
+                  : undefined,
+                redemptions: hotel.availability.productType?.redemptions?.map(
+                  (redemption) => ({
+                    ...redemption,
+                    localPrice: {
+                      ...redemption.localPrice,
+                      currency: redemption.localPrice.currency,
+                    },
+                  })
+                ),
+              }
+            }
             onHover={() => engage(hotel.hotel.name)}
             onHoverEnd={() => disengage()}
             onAddressClick={() => {

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Vouchers.tsx

@@ -1,12 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-
 export default function Vouchers({
   currencyCode,
   isCancelled,
@@ -27,7 +26,7 @@ export default function Vouchers({
   const totalPrice = formatPrice(
     intl,
     vouchers,
-    intl.formatMessage({ defaultMessage: "Voucher" }),
+    CurrencyEnum.Voucher,
     price,
     currencyCode
   )

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx

@@ -1,7 +1,6 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -21,14 +20,11 @@ export default function LargeRow({
   price,
 }: RowProps) {
   const intl = useIntl()
-  const isVoucherRate = price.local.currency === CurrencyEnum.Voucher
+
-  const currency = isVoucherRate
-    ? intl.formatMessage({ defaultMessage: "Voucher" })
-    : price.local.currency
   const totalPrice = formatPrice(
     intl,
     price.local.price,
-    currency,
+    price.local.currency,
     price.local.additionalPrice,
     price.local.additionalPriceCurrency
   )

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import BoldRow from "../Bold"
@@ -35,19 +36,21 @@ export default function VoucherPrice({
     return null
   }
 
-  const voucherCurrency = intl.formatMessage({ defaultMessage: "Voucher" })
-
   const averagePriceTitle = intl.formatMessage({
     defaultMessage: "Average price per night",
   })
 
-  const averagePricePerNight = `${price.numberOfVouchers / nights} ${voucherCurrency}`
+  const averagePricePerNight = formatPrice(
+    intl,
+    price.numberOfVouchers / nights,
+    CurrencyEnum.Voucher
+  )
 
   return (
     <>
       <BoldRow
         label={intl.formatMessage({ defaultMessage: "Room charge" })}
-        value={formatPrice(intl, price.numberOfVouchers, voucherCurrency)}
+        value={formatPrice(intl, price.numberOfVouchers, CurrencyEnum.Voucher)}
       />
       {nights > 1 ? (
         <RegularRow label={averagePriceTitle} value={averagePricePerNight} />

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts

@@ -8,7 +8,6 @@ import type {
   Product,
   RedemptionProduct,
 } from "@scandic-hotels/trpc/types/roomAvailability"
-import type { IntlShape } from "react-intl"
 
 import type { Price } from "@/types/components/hotelReservation/price"
 import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -214,8 +213,7 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) {
 export function getTotalPrice(
   mainRoomProduct: Rate | null,
   rateSummary: Array<Rate | null>,
-  isUserLoggedIn: boolean,
+  isUserLoggedIn: boolean
-  intl: IntlShape
 ): Price | null {
   const summaryArray = rateSummary.filter((rate): rate is Rate => rate !== null)
 
@@ -235,9 +233,6 @@ export function getTotalPrice(
   }
   if ("voucher" in product) {
     const voucherPrice = calculateVoucherPrice(summaryArray)
-    voucherPrice.local.currency = intl.formatMessage({
-      defaultMessage: "Voucher",
-    }) as CurrencyEnum
     return voucherPrice
   }
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx

@@ -338,15 +338,25 @@ function VoucherCode({
 
   const rateTermDetails = getRateTermDetails(codeProduct)
 
-  const voucherMsg = intl
+  const voucherMsg = intl.formatMessage(
-    .formatMessage({
+    {
-      defaultMessage: "Voucher",
+      defaultMessage:
-    })
+        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
-    .toUpperCase()
+    },
-  let price = `${numberOfVouchers} ${voucherMsg}`
+    {
-  if (packagesSum.price) {
+      numberOfVouchers: numberOfVouchers,
-    price = `${price} + ${packagesSum.price}`
+    }
-  }
+  )
+
+  const { price, currency } = packagesSum.price
+    ? {
+        price: `${numberOfVouchers} ${voucherMsg} + ${packagesSum.price}`,
+        currency: packagesSum.currency ?? "",
+      }
+    : {
+        price: `${numberOfVouchers} ${voucherMsg}`,
+        currency: "",
+      }
   return (
     <CodeRateCard
       key={codeProduct.rate}
@@ -358,7 +368,7 @@ function VoucherCode({
       rate={{
         label: codeProduct.rateDefinition?.title,
         price,
-        unit: packagesSum.currency ?? "",
+        unit: currency,
       }}
       rateTitle={rateTitles[codeProduct.rate].title}
       rateTermDetails={rateTermDetails}

apps/scandic-web/contexts/SelectRate/SelectRateContext.tsx

@@ -232,7 +232,6 @@ export function SelectRateProvider({
       roomConfiguration: roomAvailability[ix]?.[0],
     })),
     useMemberPrices: isUserLoggedIn,
-    intl,
   })
 
   const getPriceForRoom = useCallback(
@@ -252,10 +251,9 @@ export function SelectRateProvider({
           { rate, roomConfiguration: roomAvailability[roomIndex]?.[0] },
         ],
         useMemberPrices: isUserLoggedIn,
-        intl,
       })
     },
-    [selectedRates, roomAvailability, isUserLoggedIn, intl]
+    [selectedRates, roomAvailability, isUserLoggedIn]
   )
 
   const setActiveRoomIndex = useCallback(

apps/scandic-web/contexts/SelectRate/getTotalPrice.test.ts

@@ -2,20 +2,11 @@ import { describe, expect, it } from "vitest"
 
 import { getTotalPrice } from "./getTotalPrice"
 
-import type { IntlShape } from "react-intl"
-
-const mockIntl = {
-  formatMessage: ({ defaultMessage }: { defaultMessage: string }) => {
-    return defaultMessage
-  },
-} as IntlShape
-
 describe("getTotalPrice", () => {
   it("should return null when no rates are selected", () => {
     const result = getTotalPrice({
       selectedRates: [],
       useMemberPrices: false,
-      intl: mockIntl,
     })
 
     expect(result).toEqual({

apps/scandic-web/contexts/SelectRate/getTotalPrice.ts

@@ -3,7 +3,6 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { sumPackages } from "@/components/HotelReservation/utils"
 
 import type { RedemptionProduct } from "@scandic-hotels/trpc/types/roomAvailability"
-import type { IntlShape } from "react-intl"
 
 import type {
   AvailabilityWithRoomInfo,
@@ -32,11 +31,9 @@ type SelectedRate = {
 export function getTotalPrice({
   selectedRates,
   useMemberPrices,
-  intl,
 }: {
   selectedRates: Array<SelectedRate | null>
   useMemberPrices: boolean
-  intl: IntlShape
 }): Price | null {
   const mainRoom = selectedRates[0]
   const mainRoomRate = mainRoom?.rate
@@ -63,10 +60,6 @@ export function getTotalPrice({
   }
   if ("voucher" in mainRoomRate) {
     const voucherPrice = calculateVoucherPrice(summaryArray)
-    // TODO: This is a workaround, should be handled where we print the price.
-    voucherPrice.local.currency = intl.formatMessage({
-      defaultMessage: "Voucher",
-    }) as CurrencyEnum
     return voucherPrice
   }
 

apps/scandic-web/providers/BookingConfirmationProvider.tsx

@@ -63,7 +63,6 @@ export default function BookingConfirmationProvider({
       )
     } else if (totalBookingVouchers) {
       const room = rooms?.[0]
-      const voucherCurrency = intl.formatMessage({ defaultMessage: "Voucher" })
       if (room?.packages) {
         const pkgsSum = room.packages.reduce(
           (total, pkg) => total + pkg.totalPrice,
@@ -74,7 +73,7 @@ export default function BookingConfirmationProvider({
         formattedTotalCost = formatPrice(
           intl,
           totalBookingVouchers,
-          voucherCurrency,
+          CurrencyEnum.Voucher,
           pkgsSum,
           currency
         )
@@ -83,7 +82,7 @@ export default function BookingConfirmationProvider({
         formattedTotalCost = formatPrice(
           intl,
           totalBookingVouchers,
-          voucherCurrency
+          CurrencyEnum.Voucher
         )
       }
     }

apps/scandic-web/stores/my-stay/helpers.ts

@@ -51,7 +51,15 @@ export function calculateTotalPrice(
   }
   if (totals.vouchers) {
     const appendTotalPrice = totalPrice ? `${totalPrice} + ` : ""
-    totalPrice = `${appendTotalPrice}${totals.vouchers} ${intl.formatMessage({ defaultMessage: "Voucher" })}`
+    totalPrice = `${appendTotalPrice}${totals.vouchers} ${intl.formatMessage(
+      {
+        defaultMessage:
+          "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+      },
+      {
+        numberOfVouchers: totals.vouchers,
+      }
+    )}`
   }
   if (totals.cash) {
     const appendTotalPrice = totalPrice ? `${totalPrice} + ` : ""

packages/common/utils/numberFormatting.ts

@@ -1,3 +1,5 @@
+import { CurrencyEnum } from "../constants/currency"
+
 import type { IntlShape } from "react-intl"
 
 /**
@@ -21,7 +23,7 @@ export function getSingleDecimal(n: Number | string) {
 export function formatPrice(
   intl: IntlShape,
   price: number,
-  currency: string,
+  currency: string | CurrencyEnum,
   additionalPrice?: number,
   additionalPriceCurrency?: string
 ) {
@@ -37,5 +39,18 @@ export function formatPrice(
     formattedAdditionalPrice = ` + ${localizedAdditionalPrice} ${additionalPriceCurrency}`
   }
 
-  return `${localizedPrice} ${currency}${formattedAdditionalPrice}`
+  const currencyText =
+    currency === CurrencyEnum.Voucher
+      ? intl.formatMessage(
+          {
+            defaultMessage:
+              "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+          },
+          {
+            numberOfVouchers: price,
+          }
+        )
+      : currency
+
+  return `${localizedPrice} ${currencyText}${formattedAdditionalPrice}`
 }

packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx

@@ -1,6 +1,5 @@
 import { useIntl } from 'react-intl'
 
-import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
 import Caption from '../../Caption'
 import Subtitle from '../../Subtitle'
 
@@ -29,7 +28,15 @@ export default function HotelVoucherCard({
             {productTypeVoucher.numberOfVouchers}
           </Subtitle>
           <Caption color="uiTextHighContrast" className={styles.currency}>
-            {CurrencyEnum.Voucher}
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  '{numberOfVouchers, plural, one {Voucher} other {Vouchers}}',
+              },
+              {
+                numberOfVouchers: productTypeVoucher.numberOfVouchers,
+              }
+            )}
           </Caption>
         </div>
       </div>

packages/design-system/lib/components/HotelCard/index.tsx

@@ -31,10 +31,10 @@ import styles from './hotelCard.module.css'
 import type { Lang } from '@scandic-hotels/common/constants/language'
 import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
-import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
 import { BookingCodeChip } from '../BookingCodeChip'
 import { HotelType } from '@scandic-hotels/common/constants/hotelType'
 import { TripAdvisorChip } from '../TripAdvisorChip'
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
 
 type Price = {
   pricePerStay: number
@@ -57,47 +57,48 @@ export type HotelCardProps = {
       tripAdvisor?: number
     }
   }
-  prices: {
+  prices:
-    public?: {
+    | {
-      rateType: RateTypeEnum
+        public?: {
-      localPrice: Price
+          rateType: RateTypeEnum
-      requestedPrice?: Price
+          localPrice: Price
-    }
+          requestedPrice?: Price
-    member?: {
+        }
-      rateType: RateTypeEnum
+        member?: {
-      localPrice: Price
+          rateType: RateTypeEnum
-      requestedPrice?: Price
+          localPrice: Price
-    }
+          requestedPrice?: Price
-    voucher?: {
+        }
-      numberOfVouchers: number
+        voucher?: {
-      rateCode: string
+          numberOfVouchers: number
-      rateType: RateTypeEnum
+          rateCode: string
-    }
+          rateType: RateTypeEnum
-    bonusCheque?: {
+        }
-      rateCode: string
+        bonusCheque?: {
-      rateType: RateTypeEnum
+          rateCode: string
-      localPrice: {
+          rateType: RateTypeEnum
-        additionalPricePerStay: number
+          localPrice: {
-        currency: CurrencyEnum | null | undefined
+            additionalPricePerStay: number
-        numberOfCheques: number
+            currency: CurrencyEnum | null | undefined
+            numberOfCheques: number
+          }
+          requestedPrice?: {
+            additionalPricePerStay: number
+            currency: CurrencyEnum | null | undefined
+            numberOfCheques: number
+          }
+        }
+        redemptions?: {
+          rateCode: string
+          hasEnoughPoints: boolean
+          localPrice: {
+            additionalPricePerStay: number
+            pointsPerStay: number
+            currency: CurrencyEnum | null | undefined
+          }
+        }[]
       }
-      requestedPrice?: {
+    | undefined
-        additionalPricePerStay: number
-        currency: CurrencyEnum | null | undefined
-        numberOfCheques: number
-      }
-    }
-    redemptions?: {
-      rateCode: string
-      hasEnoughPoints: boolean
-      localPrice: {
-        additionalPricePerStay: number
-        pointsPerStay: number
-        currency: string
-      }
-    }[]
-  }
-
   images: GalleryImage[]
   distanceToCityCenter: number
   isUserLoggedIn: boolean
@@ -105,6 +106,7 @@ export type HotelCardProps = {
   state?: 'default' | 'active'
   bookingCode?: string | null
   isAlternative?: boolean
+  fullPrice: boolean
 
   lang: Lang
 
@@ -128,6 +130,7 @@ export const HotelCard = memo(
     images,
     lang,
     belowInfoSlot,
+    fullPrice,
     onAddressClick,
     onHover,
     onHoverEnd,
@@ -151,16 +154,15 @@ export const HotelCard = memo(
     }
 
     const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
-    const fullPrice = !bookingCode
 
-    const hasInsufficientPoints = !prices.redemptions?.some(
+    const hasInsufficientPoints = !prices?.redemptions?.some(
       (r) => r.hasEnoughPoints
     )
     const notEnoughPointsLabel = intl.formatMessage({
       defaultMessage: 'Not enough points',
     })
 
-    const isDisabled = prices.redemptions?.length && hasInsufficientPoints
+    const isDisabled = prices?.redemptions?.length && hasInsufficientPoints
 
     return (
       <article