From 59f4a27cb1ffc4bcd48d5067391021ebfcfdcbef Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Fri, 27 Jun 2025 15:03:24 +0200 Subject: [PATCH] feat: translate Voucher everywhere during booking flow --- .../BookingConfirmation/utils.ts | 2 +- .../EnterDetails/Summary/UI/Room/index.tsx | 42 ++++++++++++------- .../EnterDetails/Summary/UI/index.tsx | 16 ++++++- .../MyStay/PriceType/Vouchers.tsx | 5 ++- .../PriceDetailsTable/Row/Large.tsx | 7 +++- .../PriceDetailsTable/Row/Price/Voucher.tsx | 8 ++-- .../RoomsContainer/RateSummary/index.tsx | 3 +- .../RoomsContainer/RateSummary/utils.ts | 10 ++++- .../providers/BookingConfirmationProvider.tsx | 8 ++-- apps/scandic-web/stores/my-stay/helpers.ts | 2 +- 10 files changed, 71 insertions(+), 32 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts index f9a8b176d..941357511 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts @@ -57,7 +57,7 @@ export function mapRoomState( formattedRoomCost = formatPrice( intl, booking.vouchers, - CurrencyEnum.Voucher + intl.formatMessage({ defaultMessage: "Voucher" }) ) } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx index 8ae67d76a..aaff04b71 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx @@ -102,6 +102,30 @@ export default function Room({ const guests = guestsParts.join(", ") const zeroPrice = formatPrice(intl, 0, defaultCurrency) + let price = showMemberPrice + ? formatPrice(intl, memberPrice.amount, memberPrice.currency) + : formatPrice( + intl, + room.roomPrice.perStay.local.price, + room.roomPrice.perStay.local.currency, + room.roomPrice.perStay.local.additionalPrice, + room.roomPrice.perStay.local.additionalPriceCurrency + ) + + let currency: string = room.roomPrice.perStay.local.currency + const voucherCurrency = intl.formatMessage({ defaultMessage: "Voucher" }) + const isVoucher = "voucher" in room.roomRate + if (isVoucher) { + currency = voucherCurrency + price = formatPrice( + intl, + room.roomPrice.perStay.local.price, + voucherCurrency, + room.roomPrice.perStay.local.additionalPrice, + room.roomPrice.perStay.local.additionalPriceCurrency + ) + } + return ( <>
@@ -139,19 +163,7 @@ export default function Room({ [styles.discounted]: showDiscounted, })} > - {showMemberPrice - ? formatPrice( - intl, - memberPrice.amount, - memberPrice.currency - ) - : formatPrice( - intl, - room.roomPrice.perStay.local.price, - room.roomPrice.perStay.local.currency, - room.roomPrice.perStay.local.additionalPrice, - room.roomPrice.perStay.local.additionalPriceCurrency - )} + {price}

{showDiscounted && publicPrice ? ( @@ -262,7 +274,7 @@ export default function Room({
- {formatPrice(intl, 0, room.roomPrice.perStay.local.currency)} + {formatPrice(intl, 0, currency)}
@@ -284,7 +296,7 @@ export default function Room({

- {formatPrice(intl, 0, room.roomPrice.perStay.local.currency)} + {formatPrice(intl, 0, currency)}
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx index 9d0008fde..52315276d 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx @@ -4,6 +4,7 @@ import { cx } from "class-variance-authority" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" +import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { dt } from "@scandic-hotels/common/dt" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -66,11 +67,12 @@ export default function SummaryUI({ const roomOneMemberPrice = getMemberPrice(rooms[0].room.roomRate) const roomOneRoomRate = rooms[0].room.roomRate + const isVoucherRate = "voucher" in roomOneRoomRate // In case of Redemption, voucher and Corporate cheque do not show approx price const isSpecialRate = "corporateCheque" in roomOneRoomRate || "redemption" in roomOneRoomRate || - "voucher" in roomOneRoomRate + isVoucherRate const priceDetailsRooms = mapToPrice(rooms, isMember) const isAllCampaignRate = rooms.every( @@ -84,6 +86,16 @@ export default function SummaryUI({ ) const showDiscounted = containsBookingCodeRate || isMember + const totalCurrency = isVoucherRate + ? intl.formatMessage({ defaultMessage: "Voucher" }) + : totalPrice.local.currency + + if (isVoucherRate && defaultCurrency === CurrencyEnum.Voucher) { + defaultCurrency = intl.formatMessage({ + defaultMessage: "Voucher", + }) as CurrencyEnum + } + return (
{nights > 1 ? ( diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx index 09d6321d0..a468e1fc6 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx @@ -167,7 +167,8 @@ export default function RateSummary() { const totalPriceToShow = getTotalPrice( mainRoomProduct, rateSummary, - isUserLoggedIn + isUserLoggedIn, + intl ) const rateProduct = rateSummary.find((rate) => rate?.product)?.product diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts index bf68ada30..6a2073b5d 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts @@ -5,6 +5,7 @@ import { sumPackages } from "@/components/HotelReservation/utils" import type { Packages } from "@scandic-hotels/trpc/types/packages" import type { 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" @@ -218,7 +219,8 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) { export function getTotalPrice( mainRoomProduct: Rate | null, rateSummary: Array, - isUserLoggedIn: boolean + isUserLoggedIn: boolean, + intl: IntlShape ): Price | null { const summaryArray = rateSummary.filter((rate): rate is Rate => rate !== null) @@ -237,7 +239,11 @@ export function getTotalPrice( return calculateRedemptionTotalPrice(product.redemption, packages) } if ("voucher" in product) { - return calculateVoucherPrice(summaryArray) + const voucherPrice = calculateVoucherPrice(summaryArray) + voucherPrice.local.currency = intl.formatMessage({ + defaultMessage: "Voucher", + }) as CurrencyEnum + return voucherPrice } return calculateTotalPrice(summaryArray, isUserLoggedIn) diff --git a/apps/scandic-web/providers/BookingConfirmationProvider.tsx b/apps/scandic-web/providers/BookingConfirmationProvider.tsx index 48cb801cf..3f56ee068 100644 --- a/apps/scandic-web/providers/BookingConfirmationProvider.tsx +++ b/apps/scandic-web/providers/BookingConfirmationProvider.tsx @@ -3,13 +3,14 @@ import { useRef } from "react" import { useIntl } from "react-intl" +import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" + import { createBookingConfirmationStore } from "@/stores/booking-confirmation" import { BookingConfirmationContext } from "@/contexts/BookingConfirmation" import { formatPrice } from "@/utils/numberFormatting" import type { BookingConfirmationStore } from "@/types/contexts/booking-confirmation" -import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation" export default function BookingConfirmationProvider({ @@ -62,6 +63,7 @@ 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, @@ -72,7 +74,7 @@ export default function BookingConfirmationProvider({ formattedTotalCost = formatPrice( intl, totalBookingVouchers, - CurrencyEnum.Voucher, + voucherCurrency, pkgsSum, currency ) @@ -81,7 +83,7 @@ export default function BookingConfirmationProvider({ formattedTotalCost = formatPrice( intl, totalBookingVouchers, - CurrencyEnum.Voucher + voucherCurrency ) } } diff --git a/apps/scandic-web/stores/my-stay/helpers.ts b/apps/scandic-web/stores/my-stay/helpers.ts index 5117db2dd..fb59441fd 100644 --- a/apps/scandic-web/stores/my-stay/helpers.ts +++ b/apps/scandic-web/stores/my-stay/helpers.ts @@ -52,7 +52,7 @@ export function calculateTotalPrice( } if (totals.vouchers) { const appendTotalPrice = totalPrice ? `${totalPrice} + ` : "" - totalPrice = `${appendTotalPrice}${totals.vouchers} ${CurrencyEnum.Voucher}` + totalPrice = `${appendTotalPrice}${totals.vouchers} ${intl.formatMessage({ defaultMessage: "Voucher" })}` } if (totals.cash) { const appendTotalPrice = totalPrice ? `${totalPrice} + ` : ""