From 73cb423c95a5e34e2bbc6ca2defca9c2935e4dd2 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Tue, 8 Apr 2025 07:27:40 +0000 Subject: [PATCH] Merged in feat/SW-2078-update-confirmation-page-vouchers (pull request #1731) Feat/SW-2078 update confirmation page vouchers and Corp Cheques rate * feat: SW-2078 Tablet bookingCode ref forward issue fix (cherry picked from commit 16a6a00fd99b6b6220a98ad74de062d67d35e1c0) * feat: SW-2078 Display Vouchers and Cheques prices on confirmation page (cherry picked from commit a76494de497a7d5e7641cb0036bd7055acf875c1) * feat: SW-2078 Rebase issue fix * feat: SW-2079 Updated rate title in terms modal * feat: SW-2078 Optimized code * feat: SW-2078 Removed extra tags Approved-by: Christian Andolf --- .../FormContent/BookingCode/index.tsx | 9 ++++ .../PriceDetailsModal/index.tsx | 54 ++++++++++++++----- .../Receipt/Room/index.tsx | 19 ++++--- .../Rooms/LinkedReservation/index.tsx | 39 +++++++++----- .../BookingConfirmation/Tracking/tracking.ts | 2 +- .../BookingConfirmation/utils.ts | 17 +++++- .../Summary/UI/PriceDetailsTable/index.tsx | 29 +++++++--- .../EnterDetails/Summary/UI/index.tsx | 25 +++++++-- .../HotelReservation/HotelCard/index.tsx | 30 +++++++---- .../MyStay/ReferenceCard/index.tsx | 29 ++++++---- .../ReferenceCard/referenceCard.module.css | 4 -- .../MyStay/SingleRoom/index.tsx | 31 ++++++----- .../MyStay/SingleRoom/room.module.css | 4 -- .../SidePeeks/BookedRoomSidePeek/index.tsx | 29 ++++++---- .../TempDesignSystem/Form/Checkbox/index.tsx | 21 ++++---- .../TempDesignSystem/Form/Input/index.tsx | 38 +++++++------ apps/scandic-web/i18n/dictionaries/da.json | 1 + apps/scandic-web/i18n/dictionaries/de.json | 1 + apps/scandic-web/i18n/dictionaries/en.json | 1 + apps/scandic-web/i18n/dictionaries/fi.json | 1 + apps/scandic-web/i18n/dictionaries/no.json | 1 + apps/scandic-web/i18n/dictionaries/sv.json | 1 + .../providers/BookingConfirmationProvider.tsx | 24 +++++++++ .../stores/booking-confirmation/index.ts | 14 ++--- .../types/stores/booking-confirmation.ts | 17 ++---- apps/scandic-web/utils/numberFormatting.ts | 2 +- 26 files changed, 300 insertions(+), 143 deletions(-) diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx index 46503e9a5..326f6a3f5 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx @@ -322,6 +322,15 @@ function TabletBookingCode({ const codeVoucher = intl.formatMessage({ id: "Code / Voucher" }) function toggleModal(isOpen: boolean) { + if (document.body) { + if (isOpen) { + document.body.style.overflow = "visible" + } else { + // !important needed to override 'overflow: hidden' set by react-aria. + // 'overflow: hidden' does not work in combination with other sticky positioned elements, which clip does. + document.body.style.overflow = "clip !important" + } + } if (!isOpen && !bookingCode?.value) { setValue("bookingCode.flag", false) setIsOpen(isOpen) diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx index bc2768c36..7374d70e8 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx @@ -2,6 +2,7 @@ import React from "react" import { useIntl } from "react-intl" +import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -10,7 +11,7 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" -import Body from "@/components/TempDesignSystem/Text/Body" +import IconChip from "@/components/TempDesignSystem/IconChip" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import { formatPrice } from "@/utils/numberFormatting" @@ -45,15 +46,26 @@ function TableSection({ children }: React.PropsWithChildren) { function TableSectionHeader({ title, subtitle, + bold, }: { title: string subtitle?: string + bold?: boolean }) { + const typographyVariant = bold + ? "Body/Paragraph/mdBold" + : "Body/Paragraph/mdRegular" return ( - - {title} - {subtitle ? {subtitle} : null} + + +

{title}

+ + {subtitle ? ( + +

{subtitle}

+ + ) : null} ) @@ -130,12 +142,13 @@ export default function PriceDetailsModal() { {rooms.length > 1 && ( - - {intl.formatMessage( + + bold + /> )} {room.roomFeatures @@ -179,14 +192,14 @@ export default function PriceDetailsModal() { currencyCode )} /> - {room.children ? ( + {room.childrenAges?.length ? ( {bookingCode && ( - - - {bookingCode} + + + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + - )} diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx index 1a39d8eb9..c13621f6c 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx @@ -23,10 +23,13 @@ export default function ReceiptRoom({ roomIndex, }: BookingConfirmationReceiptRoomProps) { const intl = useIntl() - const { room, currencyCode } = useBookingConfirmationStore((state) => ({ - room: state.rooms[roomIndex], - currencyCode: state.currencyCode, - })) + const { room, currencyCode, isVatCurrency } = useBookingConfirmationStore( + (state) => ({ + room: state.rooms[roomIndex], + currencyCode: state.currencyCode, + isVatCurrency: state.isVatCurrency, + }) + ) if (!room) { return @@ -56,7 +59,7 @@ export default function ReceiptRoom({ ) : (

- {formatPrice(intl, room.roomPrice, currencyCode)} + {room.formattedTotalCost}

)} @@ -91,9 +94,9 @@ export default function ReceiptRoom({ } title={ - (room.roomPoints - ? room.rateDefinition.title - : room.rateDefinition.cancellationText) || "" + (isVatCurrency + ? room.rateDefinition.cancellationText + : room.rateDefinition.title) || "" } subtitle={ room.rateDefinition.cancellationRule === diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx index ce85304ce..5d77345a2 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx @@ -15,6 +15,7 @@ import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton" import Retry from "./Retry" import type { LinkedReservationProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation" +import { CurrencyEnum } from "@/types/enums/currency" export function LinkedReservation({ checkInTime, @@ -27,13 +28,19 @@ export function LinkedReservation({ confirmationNumber, lang, }) - const { setRoom, setFormattedTotalCost, currencyCode, totalBookingPrice } = - useBookingConfirmationStore((state) => ({ - setRoom: state.actions.setRoom, - setFormattedTotalCost: state.actions.setFormattedTotalCost, - currencyCode: state.currencyCode, - totalBookingPrice: state.totalBookingPrice, - })) + const { + setRoom, + setFormattedTotalCost, + currencyCode, + totalBookingPrice, + totalBookingCheques, + } = useBookingConfirmationStore((state) => ({ + setRoom: state.actions.setRoom, + setFormattedTotalCost: state.actions.setFormattedTotalCost, + currencyCode: state.currencyCode, + totalBookingPrice: state.totalBookingPrice, + totalBookingCheques: state.totalBookingCheques, + })) const intl = useIntl() useEffect(() => { @@ -41,18 +48,24 @@ export function LinkedReservation({ const roomData = mapRoomState(data.booking, data.room, intl) setRoom(roomData, roomIndex) - const formattedTotalCost = formatPrice( - intl, - totalBookingPrice, - currencyCode - ) + const formattedTotalCost = totalBookingCheques + ? formatPrice( + intl, + totalBookingCheques, + CurrencyEnum.CC, + totalBookingPrice, + currencyCode + ) + : formatPrice(intl, totalBookingPrice, currencyCode) + setFormattedTotalCost(formattedTotalCost) } }, [ data, roomIndex, - setRoom, intl, + setRoom, + totalBookingCheques, totalBookingPrice, currencyCode, setFormattedTotalCost, diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts index 7b5277cf4..4cdeece7b 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts @@ -75,7 +75,7 @@ export function getTracking( } const noOfAdults = rooms.map((r) => r.adults).join(",") - const noOfChildren = rooms.map((r) => r.children ?? 0).join(",") + const noOfChildren = rooms.map((r) => r.childrenAges?.length ?? 0).join(",") const noOfRooms = rooms.length const hotelsTrackingData: TrackingSDKHotelInfo = { diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts index 0c04d7248..ea855fdee 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts @@ -32,6 +32,20 @@ export function mapRoomState( booking.totalPrice, booking.currencyCode ) + } else if (booking.cheques) { + formattedTotalCost = formatPrice( + intl, + booking.cheques, + CurrencyEnum.CC, + booking.totalPrice, + booking.currencyCode + ) + } else if (booking.vouchers) { + formattedTotalCost = formatPrice( + intl, + booking.vouchers, + CurrencyEnum.Voucher + ) } return { @@ -39,7 +53,7 @@ export function mapRoomState( bedDescription: room.bedType.description, breakfast, breakfastIncluded, - children: booking.childrenAges.length, + cheques: booking.cheques, childrenAges: booking.childrenAges, childBedPreferences: booking.childBedPreferences, confirmationNumber: booking.confirmationNumber, @@ -57,5 +71,6 @@ export function mapRoomState( totalPrice: booking.totalPrice, totalPriceExVat: booking.totalPriceExVat, vatAmount: booking.vatAmount, + vouchers: booking.vouchers, } } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx index d9bcdc7da..b73d42045 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx @@ -3,10 +3,12 @@ import { Fragment } from "react" import { useIntl } from "react-intl" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import { dt } from "@/lib/dt" +import IconChip from "@/components/TempDesignSystem/IconChip" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" @@ -328,13 +330,28 @@ export default function PriceDetailsTable({ ) : null} - {bookingCode && totalPrice.local.regularPrice && ( + {bookingCode && ( - - - {bookingCode} + + + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + - )} 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 e6aee14d8..9a53c0059 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx @@ -3,7 +3,9 @@ import { Fragment } from "react" import { useIntl } from "react-intl" +import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import { dt } from "@/lib/dt" @@ -12,6 +14,7 @@ import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Deskto import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" +import IconChip from "@/components/TempDesignSystem/IconChip" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" @@ -450,10 +453,24 @@ export default function SummaryUI({ {booking.bookingCode && ( -
- - {booking.bookingCode} -
+ + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: booking.bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + )} diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx index a714face9..59f995b9e 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx @@ -5,8 +5,8 @@ import { useRouter, useSearchParams } from "next/navigation" import { memo, useCallback } from "react" import { useIntl } from "react-intl" +import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation" @@ -185,14 +185,26 @@ function HotelCard({ ) : ( <> {bookingCode && ( - - } - > - {bookingCode} - - +
+ + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + +
)} {(!isUserLoggedIn || !price?.member || diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx index 0d375c3ff..e98bedd9e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx @@ -273,17 +273,24 @@ export function ReferenceCard({

{intl.formatMessage({ id: "Booking code" })}

 - } - > - -

- {intl.formatMessage({ id: "Booking code" })}:{" "} - {bookingCode} -

- - + + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + )}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css index d85934aa5..b496cbbdf 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css @@ -43,10 +43,6 @@ display: none; } -.bookingCode { - color: var(--UI-Semantic-Information); -} - .guaranteed { align-items: flex-start; border-radius: var(--Corner-radius-Medium); diff --git a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx index 396197768..a8ad62106 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx @@ -343,19 +343,24 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
{bookingCode && ( - } - > - -

- - {intl.formatMessage({ id: "Booking code" })} - - : {bookingCode} -

- - + + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + )}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css index 7fd1b1d31..805089901 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css @@ -6,10 +6,6 @@ padding: var(--Spacing-x3) 0; } -.bookingCode { - color: var(--UI-Semantic-Information); -} - .roomName { color: var(--Scandic-Brand-Burgundy); padding: 0 var(--Spacing-x2); diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx index 04bf10de5..20b14ea0f 100644 --- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx +++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx @@ -291,17 +291,24 @@ export default function BookedRoomSidePeek({
{bookingCode && ( - } - > - -

- {intl.formatMessage({ id: "Booking code" })} - {bookingCode} -

- - + + } + > + {intl.formatMessage( + { id: "Booking code: {value}" }, + { + value: bookingCode, + strong: (text) => ( + + {text} + + ), + } + )} + + )} ) { +const Checkbox = forwardRef< + HTMLInputElement, + React.PropsWithChildren +>(function Checkbox( + { className, name, children, registerOptions, hideError, topAlign = false }, + ref +) { const { control } = useFormContext() const { field, fieldState } = useController({ control, @@ -43,6 +43,7 @@ export default function Checkbox({ {isSelected && ( @@ -60,4 +61,6 @@ export default function Checkbox({ )} ) -} +}) + +export default Checkbox diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx index 3bea52700..054ea65f9 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx @@ -1,4 +1,5 @@ "use client" +import { forwardRef, type HTMLAttributes, type WheelEvent } from "react" import { Text, TextField } from "react-aria-components" import { Controller, useFormContext } from "react-hook-form" import { useIntl } from "react-intl" @@ -10,24 +11,25 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./input.module.css" -import type { HTMLAttributes, WheelEvent } from "react" - import type { InputProps } from "./input" -export default function Input({ - "aria-label": ariaLabel, - className = "", - disabled = false, - helpText = "", - label, - maxLength, - name, - placeholder = "", - readOnly = false, - registerOptions = {}, - type = "text", - hideError, -}: InputProps) { +const Input = forwardRef(function Input( + { + "aria-label": ariaLabel, + className = "", + disabled = false, + helpText = "", + label, + maxLength, + name, + placeholder = "", + readOnly = false, + registerOptions = {}, + type = "text", + hideError, + }, + ref +) { const intl = useIntl() const { control } = useFormContext() let numberAttributes: HTMLAttributes = {} @@ -58,6 +60,7 @@ export default function Input({ > ) -} +}) +export default Input diff --git a/apps/scandic-web/i18n/dictionaries/da.json b/apps/scandic-web/i18n/dictionaries/da.json index 378b67f97..d004d260b 100644 --- a/apps/scandic-web/i18n/dictionaries/da.json +++ b/apps/scandic-web/i18n/dictionaries/da.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/nat per voksen", + "Booking code: {value}": "Bookingkode: {value}", "Status Paid": "Status Betalt", "Status Unpaid": "Status Ikke betalt", "A destination or hotel name is needed to be able to search for a hotel room.": "Et destinations- eller hotelnavn er nødvendigt for at kunne søge efter et hotelværelse.", diff --git a/apps/scandic-web/i18n/dictionaries/de.json b/apps/scandic-web/i18n/dictionaries/de.json index d2dc47a58..2e9c51277 100644 --- a/apps/scandic-web/i18n/dictionaries/de.json +++ b/apps/scandic-web/i18n/dictionaries/de.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/Nacht pro Erwachsenem", + "Booking code: {value}": "Buchungscode: {value}", "Status Paid": "Status Bezahlt", "Status Unpaid": "Status Unbezahlt", "A destination or hotel name is needed to be able to search for a hotel room.": "Ein Reiseziel oder Hotelname wird benötigt, um nach einem Hotelzimmer suchen zu können.", diff --git a/apps/scandic-web/i18n/dictionaries/en.json b/apps/scandic-web/i18n/dictionaries/en.json index 0914fe6b7..86de4f2bc 100644 --- a/apps/scandic-web/i18n/dictionaries/en.json +++ b/apps/scandic-web/i18n/dictionaries/en.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/night per adult", + "Booking code: {value}": "Booking code: {value}", "Status Paid": "Status Paid", "Status Unpaid": "Status Unpaid", "A destination or hotel name is needed to be able to search for a hotel room.": "A destination or hotel name is needed to be able to search for a hotel room.", diff --git a/apps/scandic-web/i18n/dictionaries/fi.json b/apps/scandic-web/i18n/dictionaries/fi.json index 4d779f426..e6842de78 100644 --- a/apps/scandic-web/i18n/dictionaries/fi.json +++ b/apps/scandic-web/i18n/dictionaries/fi.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/yötä aikuista kohti", + "Booking code: {value}": "Varauskoodi: {value}", "Status Paid": "Status Maksettu", "Status Unpaid": "Status Ei maksettu", "A destination or hotel name is needed to be able to search for a hotel room.": "Kohteen tai hotellin nimi tarvitaan, jotta hotellihuonetta voidaan hakea.", diff --git a/apps/scandic-web/i18n/dictionaries/no.json b/apps/scandic-web/i18n/dictionaries/no.json index 829bb7242..8c4f8c637 100644 --- a/apps/scandic-web/i18n/dictionaries/no.json +++ b/apps/scandic-web/i18n/dictionaries/no.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/natt per voksen", + "Booking code: {value}": "Bestillingskode: {value}", "Status Paid": "Status Betalt", "Status Unpaid": "Status Ikke betalt", "A destination or hotel name is needed to be able to search for a hotel room.": "Et reisemål eller hotellnavn er nødvendig for å kunne søke etter et hotellrom.", diff --git a/apps/scandic-web/i18n/dictionaries/sv.json b/apps/scandic-web/i18n/dictionaries/sv.json index dd0812119..472e44bba 100644 --- a/apps/scandic-web/i18n/dictionaries/sv.json +++ b/apps/scandic-web/i18n/dictionaries/sv.json @@ -9,6 +9,7 @@ "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!": "EuroBonus {sasLevelName} and {scandicLevelName} are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!", "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.": "EuroBonus {sasLevelName} has upgraded your Scandic Friends level to {scandicLevelName}.", "{amount} 0 {currency}/night per adult": "{amount} 0 {currency}/natt per vuxen", + "Booking code: {value}": "Bokningskod: {value}", "Status Paid": "Status Betalat", "Status Unpaid": "Status Ej betalat", "A destination or hotel name is needed to be able to search for a hotel room.": "Ett destinations- eller hotellnamn behövs för att kunna söka efter ett hotellrum.", diff --git a/apps/scandic-web/providers/BookingConfirmationProvider.tsx b/apps/scandic-web/providers/BookingConfirmationProvider.tsx index 14ec171e8..00d6ff368 100644 --- a/apps/scandic-web/providers/BookingConfirmationProvider.tsx +++ b/apps/scandic-web/providers/BookingConfirmationProvider.tsx @@ -33,6 +33,13 @@ export default function BookingConfirmationProvider({ const totalBookingPoints = rooms.reduce((acc, room) => { return acc + (room?.roomPoints ?? 0) }, 0) + const totalBookingCheques = rooms.reduce((acc, room) => { + return acc + (room?.cheques ?? 0) + }, 0) + const totalBookingVouchers = rooms.reduce((acc, room) => { + return acc + (room?.vouchers ?? 0) + }, 0) + let isVatCurrency = true if (totalBookingPoints) { isVatCurrency = false @@ -43,6 +50,22 @@ export default function BookingConfirmationProvider({ totalBookingPrice, currencyCode ) + } else if (totalBookingCheques) { + isVatCurrency = false + formattedTotalCost = formatPrice( + intl, + totalBookingCheques, + CurrencyEnum.CC, + totalBookingPrice, + currencyCode + ) + } else if (totalBookingVouchers) { + isVatCurrency = false + formattedTotalCost = formatPrice( + intl, + totalBookingVouchers, + CurrencyEnum.Voucher + ) } const initialData = { bookingCode, @@ -54,6 +77,7 @@ export default function BookingConfirmationProvider({ isVatCurrency, formattedTotalCost, totalBookingPrice, + totalBookingCheques, } storeRef.current = createBookingConfirmationStore(initialData) diff --git a/apps/scandic-web/stores/booking-confirmation/index.ts b/apps/scandic-web/stores/booking-confirmation/index.ts index a4835b0d7..99c2aa39f 100644 --- a/apps/scandic-web/stores/booking-confirmation/index.ts +++ b/apps/scandic-web/stores/booking-confirmation/index.ts @@ -19,22 +19,24 @@ export function createBookingConfirmationStore(initialState: InitialState) { formattedTotalCost: initialState.formattedTotalCost, isVatCurrency: initialState.isVatCurrency, totalBookingPrice: initialState.totalBookingPrice, + totalBookingCheques: initialState.totalBookingCheques, actions: { setRoom: (room, idx) => { set((state) => { const rooms = [...state.rooms] rooms[idx] = room + const totalBookingPrice = rooms.reduce((acc, room) => { return acc + (room?.totalPrice ?? 0) }, 0) - - return { rooms, totalBookingPrice } + const totalBookingCheques = rooms.reduce((acc, room) => { + return acc + (room?.cheques ?? 0) + }, 0) + return { rooms, totalBookingPrice, totalBookingCheques } }) }, - setFormattedTotalCost: (updatedFormattedTotalCost: string) => { - set((state) => { - return { ...state, formattedTotalCost: updatedFormattedTotalCost } - }) + setFormattedTotalCost: (formattedTotalCost) => { + set(() => ({ formattedTotalCost })) }, }, })) diff --git a/apps/scandic-web/types/stores/booking-confirmation.ts b/apps/scandic-web/types/stores/booking-confirmation.ts index f5c898fab..c587781d7 100644 --- a/apps/scandic-web/types/stores/booking-confirmation.ts +++ b/apps/scandic-web/types/stores/booking-confirmation.ts @@ -14,7 +14,7 @@ export interface Room { bedDescription: string breakfast?: PackageSchema breakfastIncluded: boolean - children?: number + cheques: number childBedPreferences: ChildBedPreference[] childrenAges?: number[] confirmationNumber: string @@ -32,6 +32,7 @@ export interface Room { totalPrice: number totalPriceExVat: number vatAmount: number + vouchers: number } export interface InitialState { @@ -44,20 +45,12 @@ export interface InitialState { isVatCurrency: boolean formattedTotalCost: string totalBookingPrice: number + totalBookingCheques: number } -export interface BookingConfirmationState { - bookingCode: string | null - isVatCurrency: boolean - rooms: (Room | null)[] - currencyCode: string - vat: number - fromDate: Date - toDate: Date - formattedTotalCost: string | null - totalBookingPrice: number +export interface BookingConfirmationState extends InitialState { actions: { setRoom: (room: Room, idx: number) => void - setFormattedTotalCost: (updatedFormattedTotalCost: string) => void + setFormattedTotalCost: (formattedTotalCost: string) => void } } diff --git a/apps/scandic-web/utils/numberFormatting.ts b/apps/scandic-web/utils/numberFormatting.ts index 370a57531..86cf117cf 100644 --- a/apps/scandic-web/utils/numberFormatting.ts +++ b/apps/scandic-web/utils/numberFormatting.ts @@ -34,7 +34,7 @@ export function formatPrice( const localizedAdditionalPrice = intl.formatNumber(additionalPrice, { minimumFractionDigits: 0, }) - formattedAdditionalPrice = ` ${localizedAdditionalPrice} ${additionalPriceCurrency}` + formattedAdditionalPrice = ` + ${localizedAdditionalPrice} ${additionalPriceCurrency}` } return `${localizedPrice} ${currency}${formattedAdditionalPrice}`