scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2079-update-booking-page-to-show-points- (pull request #1683)

Browse Source 
feat: SW-2079 Show points in confirmation page

* feat: SW-2079 Show points in confirmation page

* feat: SW-2079 Optimized code

* feat: SW-2079 Updated Body to Typography

* feat: SW-2079 Multi-room total cost display

* feat: SW-2079 Add reward nights condition rate title

* feat: SW-2079 Removed extra checks

* feat: SW-2079 Optimmized formatPrice function

* feat: SW-2079 Typo fix


Approved-by: Christian Andolf
This commit is contained in:
Hrishikesh Vaipurkar
2025-04-04 09:39:55 +00:00
parent e30b8a0be3
commit ae1010bfce
24 changed files with 325 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
View File

@@ -7,24 +7,20 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./paymentDetails.module.css"
export default function PaymentDetails() {
const intl = useIntl()
const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
rooms: state.rooms,
currencyCode: state.currencyCode,
}))
const { rooms, formattedTotalCost } = useBookingConfirmationStore(
(state) => ({
rooms: state.rooms,
formattedTotalCost: state.formattedTotalCost,
})
)
const hasAllRoomsLoaded = rooms.every((room) => room)
const grandTotal = rooms.reduce((acc, room) => {
const reservationTotalPrice = room?.totalPrice || 0
return acc + reservationTotalPrice
}, 0)
return (
<div className={styles.details}>
<Subtitle color="uiTextHighContrast" type="two">
@@ -33,11 +29,12 @@ export default function PaymentDetails() {
<div className={styles.payment}>
{hasAllRoomsLoaded ? (
<Body color="uiTextHighContrast">
{`${intl.formatMessage({ id: "Total cost" })}: ${formatPrice(
intl,
grandTotal,
currencyCode
)}`}
{intl.formatMessage(
{ id: "Total cost: {amount}" },
{
amount: formattedTotalCost,
}
)}
</Body>
) : (
<SkeletonShimmer width={"100%"} />

63
apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
View File

@@ -3,6 +3,7 @@ import React from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
@@ -61,15 +62,25 @@ function TableSectionHeader({
export default function PriceDetailsModal() {
const intl = useIntl()
const lang = useLang()
const { rooms, currencyCode, vat, fromDate, toDate, bookingCode } =
useBookingConfirmationStore((state) => ({
rooms: state.rooms,
currencyCode: state.currencyCode,
vat: state.vat,
fromDate: state.fromDate,
toDate: state.toDate,
bookingCode: state.bookingCode,
}))
const {
rooms,
currencyCode,
vat,
fromDate,
toDate,
bookingCode,
isVatCurrency,
formattedTotalCost,
} = useBookingConfirmationStore((state) => ({
rooms: state.rooms,
currencyCode: state.currencyCode,
vat: state.vat,
fromDate: state.fromDate,
toDate: state.toDate,
bookingCode: state.bookingCode,
isVatCurrency: state.isVatCurrency,
formattedTotalCost: state.formattedTotalCost,
}))
if (!rooms[0]) {
return null
@@ -149,7 +160,7 @@ export default function PriceDetailsModal() {
<Row
bold
label={intl.formatMessage({ id: "Room charge" })}
value={formatPrice(intl, room.roomPrice, currencyCode)}
value={room.formattedTotalCost}
/>
</TableSection>
@@ -200,24 +211,28 @@ export default function PriceDetailsModal() {
})}
<TableSection>
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
<Row
label={intl.formatMessage({ id: "Price excluding VAT" })}
value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
/>
<Row
label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
/>
{isVatCurrency ? (
<>
<Row
label={intl.formatMessage({ id: "Price excluding VAT" })}
value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
/>
<Row
label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
/>
</>
) : null}
<tr className={styles.row}>
<td>
<Body textTransform="bold">
{intl.formatMessage({ id: "Price including VAT" })}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<span>{intl.formatMessage({ id: "Price including VAT" })}</span>
</Typography>
</td>
<td className={styles.price}>
<Body textTransform="bold">
{formatPrice(intl, bookingTotal.price, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<span>{formattedTotalCost}</span>
</Typography>
</td>
</tr>
{bookingCode && (

183
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
View File

@@ -3,6 +3,7 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
@@ -10,8 +11,6 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"
import RoomSkeletonLoader from "./RoomSkeletonLoader"
@@ -45,29 +44,37 @@ export default function ReceiptRoom({
return (
<article className={styles.room}>
<header className={styles.roomHeader}>
<Body color="uiTextHighContrast">{room.name}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>{room.name}</p>
</Typography>
{room.rateDefinition.isMemberRate ? (
<div className={styles.memberPrice}>
<Body color="red">
{formatPrice(intl, room.roomPrice, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.red}>{room.formattedTotalCost}</p>
</Typography>
</div>
) : (
<Body color="uiTextHighContrast">
{formatPrice(intl, room.roomPrice, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(intl, room.roomPrice, currencyCode)}
</p>
</Typography>
)}
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
{
totalAdults: room.adults,
}
)}
</Caption>
<Caption color="uiTextMediumContrast">
{room.rateDefinition.cancellationText}
</Caption>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextMediumContrast}>
{intl.formatMessage(
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
{
totalAdults: room.adults,
}
)}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextMediumContrast}>
{room.rateDefinition.cancellationText}
</p>
</Typography>
<Modal
trigger={
<Button intent="text" className={styles.termsLink}>
@@ -83,7 +90,11 @@ export default function ReceiptRoom({
</Link>
</Button>
}
title={room.rateDefinition.cancellationText || ""}
title={
(room.roomPoints
? room.rateDefinition.title
: room.rateDefinition.cancellationText) || ""
}
subtitle={
room.rateDefinition.cancellationRule ===
CancellationRuleEnum.CancellableBefore6PM
@@ -93,19 +104,21 @@ export default function ReceiptRoom({
>
<div className={styles.terms}>
{room.rateDefinition.generalTerms?.map((info) => (
<Body
<Typography
key={info}
color="uiTextHighContrast"
className={styles.termsText}
variant="Body/Paragraph/mdRegular"
>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{info}
</Body>
<span>
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{info}
</span>
</Typography>
))}
</div>
</Modal>
@@ -114,70 +127,98 @@ export default function ReceiptRoom({
? room.roomFeatures.map((feature) => (
<div className={styles.entry} key={feature.code}>
<div>
<Body color="uiTextHighContrast">{feature.description}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{feature.description}
</p>
</Typography>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, feature.totalPrice, feature.currency)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(intl, feature.totalPrice, feature.currency)}
</p>
</Typography>
</div>
))
: null}
<div className={styles.entry}>
<Body color="uiTextHighContrast">{room.bedDescription}</Body>
<Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>{room.bedDescription}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(intl, 0, currencyCode)}
</p>
</Typography>
</div>
{childBedCrib ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Crib (child) × {count}" },
{ count: childBedCrib.quantity }
)}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Based on availability" })}
</Caption>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{intl.formatMessage(
{ id: "Crib (child) × {count}" },
{ count: childBedCrib.quantity }
)}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.uiTextHighContrast}>
{intl.formatMessage({ id: "Based on availability" })}
</p>
</Typography>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(intl, 0, currencyCode)}
</p>
</Typography>
</div>
) : null}
{childBedExtraBed ? (
<div className={styles.entry}>
<div>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "Extra bed (child) × {count}" },
{
count: childBedExtraBed.quantity,
}
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{intl.formatMessage(
{ id: "Extra bed (child) × {count}" },
{
count: childBedExtraBed.quantity,
}
)}
</p>
</Typography>
</div>
<Body color="uiTextHighContrast">
{formatPrice(intl, 0, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(intl, 0, currencyCode)}
</p>
</Typography>
</div>
) : null}
{room.breakfast || breakfastIncluded ? (
<div className={styles.entry}>
<Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>{intl.formatMessage({ id: "Breakfast buffet" })}</p>
</Typography>
{breakfastIncluded ? (
<Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.red}>
{intl.formatMessage({ id: "Included" })}
</p>
</Typography>
) : null}
{room.breakfast && !breakfastIncluded ? (
<Body color="uiTextHighContrast">
{formatPrice(
intl,
room.breakfast.totalPrice,
room.breakfast.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.uiTextHighContrast}>
{formatPrice(
intl,
room.breakfast.totalPrice,
room.breakfast.currency
)}
</p>
</Typography>
) : null}
</div>
) : null}

12
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css
View File

@@ -40,3 +40,15 @@
.terms .termsIcon {
padding-right: var(--Spacing-x1);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}

30
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
View File

@@ -2,12 +2,12 @@
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting"
import PriceDetailsModal from "../../PriceDetailsModal"
@@ -15,29 +15,27 @@ import styles from "./totalPrice.module.css"
export default function TotalPrice() {
const intl = useIntl()
const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
rooms: state.rooms,
currencyCode: state.currencyCode,
}))
const { rooms, formattedTotalCost } = useBookingConfirmationStore(
(state) => ({
rooms: state.rooms,
formattedTotalCost: state.formattedTotalCost,
})
)
const hasAllRoomsLoaded = rooms.every((room) => room)
const grandTotal = rooms.reduce((acc, room) => {
const reservationTotalPrice = room?.totalPrice || 0
return acc + reservationTotalPrice
}, 0)
return (
<>
<Divider color="primaryLightSubtle" />
<div className={styles.price}>
<div className={styles.entry}>
<Body textTransform="bold">
{intl.formatMessage({ id: "Total price" })}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Total price" })}</p>
</Typography>
{hasAllRoomsLoaded ? (
<Body textTransform="bold">
{formatPrice(intl, grandTotal, currencyCode)}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>{formattedTotalCost}</p>
</Typography>
) : (
<SkeletonShimmer width={"25%"} />
)}

30
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
View File

@@ -1,11 +1,13 @@
"use client"
import { useEffect } from "react"
import { useIntl } from "react-intl"
import { trpc } from "@/lib/trpc/client"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import { mapRoomState } from "../../utils"
import Room from "../Room"
@@ -25,14 +27,36 @@ export function LinkedReservation({
confirmationNumber,
lang,
})
const setRoom = useBookingConfirmationStore((state) => state.actions.setRoom)
const { setRoom, setFormattedTotalCost, currencyCode, totalBookingPrice } =
useBookingConfirmationStore((state) => ({
setRoom: state.actions.setRoom,
setFormattedTotalCost: state.actions.setFormattedTotalCost,
currencyCode: state.currencyCode,
totalBookingPrice: state.totalBookingPrice,
}))
const intl = useIntl()
useEffect(() => {
if (data?.room) {
const roomData = mapRoomState(data.booking, data.room)
const roomData = mapRoomState(data.booking, data.room, intl)
setRoom(roomData, roomIndex)
const formattedTotalCost = formatPrice(
intl,
totalBookingPrice,
currencyCode
)
setFormattedTotalCost(formattedTotalCost)
}
}, [data, roomIndex, setRoom])
}, [
data,
roomIndex,
setRoom,
intl,
totalBookingPrice,
currencyCode,
setFormattedTotalCost,
])
if (isLoading) {
return <LinkedReservationCardSkeleton />

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
View File

@@ -10,6 +10,7 @@ import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
import Alerts from "./Alerts"
@@ -38,6 +39,7 @@ export default async function BookingConfirmation({
`${booking.confirmationNumber},${booking.guest.lastName}`
)
const intl = await getIntl()
return (
<BookingConfirmationProvider
bookingCode={booking.bookingCode}
@@ -45,7 +47,7 @@ export default async function BookingConfirmation({
fromDate={booking.checkInDate}
toDate={booking.checkOutDate}
rooms={[
mapRoomState(booking, room),
mapRoomState(booking, room, intl),
// null represents "known but not yet fetched rooms" and is used to render placeholders correctly
...Array(booking.linkedReservations.length).fill(null),
]}

25
apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
View File

@@ -1,10 +1,16 @@
import { formatPrice } from "@/utils/numberFormatting"
import type { IntlShape } from "react-intl"
import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
import { CurrencyEnum } from "@/types/enums/currency"
import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
export function mapRoomState(
booking: BookingConfirmationSchema,
room: BookingConfirmationRoom
room: BookingConfirmationRoom,
intl: IntlShape
) {
const breakfast = booking.packages.find(
(pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
@@ -13,6 +19,21 @@ export function mapRoomState(
(pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
)
let formattedTotalCost = formatPrice(
intl,
booking.totalPrice,
booking.currencyCode
)
if (booking.roomPoints) {
formattedTotalCost = formatPrice(
intl,
booking.roomPoints,
CurrencyEnum.POINTS,
booking.totalPrice,
booking.currencyCode
)
}
return {
adults: booking.adults,
bedDescription: room.bedType.description,
@@ -23,11 +44,13 @@ export function mapRoomState(
childBedPreferences: booking.childBedPreferences,
confirmationNumber: booking.confirmationNumber,
currencyCode: booking.currencyCode,
formattedTotalCost,
fromDate: booking.checkInDate,
name: room.name,
packages: booking.packages,
rateDefinition: booking.rateDefinition,
roomFeatures: booking.packages.filter((p) => p.type === "RoomFeature"),
roomPoints: booking.roomPoints,
roomPrice: booking.roomPrice,
roomTypeCode: booking.roomTypeCode,
toDate: booking.checkOutDate,

4
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
View File

@@ -9,7 +9,7 @@ import { formId } from "@/components/HotelReservation/EnterDetails/Payment/Payme
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPriceWithAdditionalPrice } from "@/utils/numberFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./bottomSheet.module.css"
@@ -57,7 +57,7 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
>
<Caption>{intl.formatMessage({ id: "Total price" })}</Caption>
<Subtitle>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency,

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

@@ -16,10 +16,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import {
formatPrice,
formatPriceWithAdditionalPrice,
} from "@/utils/numberFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import PriceDetailsTable from "./PriceDetailsTable"
@@ -202,7 +199,7 @@ export default function SummaryUI({
memberPrice.amount,
memberPrice.currency
)
: formatPriceWithAdditionalPrice(
: formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency,
@@ -419,7 +416,7 @@ export default function SummaryUI({
</div>
<div>
<Body textTransform="bold" data-testid="total-price">
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency,
@@ -444,9 +441,7 @@ export default function SummaryUI({
value: formatPrice(
intl,
totalPrice.requested.price,
totalPrice.requested.currency,
totalPrice.requested.additionalPrice,
totalPrice.requested.additionalPriceCurrency
totalPrice.requested.currency
),
}
)}

9
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -15,10 +15,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import {
formatPrice,
formatPriceWithAdditionalPrice,
} from "@/utils/numberFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import { isBookingCodeRate } from "./isBookingCodeRate"
import PriceDetailsTable from "./PriceDetailsTable"
@@ -160,7 +157,7 @@ export default function Summary({
<div className={styles.entry}>
<Body color="uiTextHighContrast">{room.roomType}</Body>
<Body color={showDiscounted ? "red" : "uiTextHighContrast"}>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency,
@@ -280,7 +277,7 @@ export default function Summary({
textTransform="bold"
data-testid="total-price"
>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency,

4
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
View File

@@ -7,7 +7,7 @@ import { useRatesStore } from "@/stores/select-rate"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPriceWithAdditionalPrice } from "@/utils/numberFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import { isBookingCodeRate } from "./isBookingCodeRate"
import { mapRate } from "./mapRate"
@@ -107,7 +107,7 @@ export default function MobileSummary({
color={showDiscounted ? "red" : "uiTextHighContrast"}
className={styles.wrappedText}
>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPriceToShow.local.price,
totalPriceToShow.local.currency,

9
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
View File

@@ -13,10 +13,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import {
formatPrice,
formatPriceWithAdditionalPrice,
} from "@/utils/numberFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import MobileSummary from "./MobileSummary"
import {
@@ -299,7 +296,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
color={showDiscounted ? "red" : "uiTextHighContrast"}
textAlign="right"
>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPriceToShow.local.price,
totalPriceToShow.local.currency,
@@ -342,7 +339,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
{formatPriceWithAdditionalPrice(
{formatPrice(
intl,
totalPriceToShow.local.price,
totalPriceToShow.local.currency,