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

fix: align price formatting

Browse Source
This commit is contained in:
Christel Westerberg
2025-01-02 10:54:19 +01:00
parent 4f58784a22
commit 139accb8ed
26 changed files with 198 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -8,7 +8,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import getSingleDecimal from "@/utils/numberFormatting"
import { getSingleDecimal } from "@/utils/numberFormatting"
import { getTypeSpecificInformation } from "./utils"

2
components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -8,7 +8,7 @@ import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import getSingleDecimal from "@/utils/numberFormatting"
import { getSingleDecimal } from "@/utils/numberFormatting"
import styles from "./introSection.module.css"

9
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
View File

@@ -1,5 +1,6 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./parkingPrices.module.css"
@@ -42,9 +43,11 @@ export default async function ParkingPrices({
{getPeriod(parking.period)}
</Body>
<Body color="uiTextHighContrast">
{freeParking
? intl.formatMessage({ id: "Free parking" })
: `${parking.amount} ${currency}`}
{parking.amount
? freeParking
? intl.formatMessage({ id: "Free parking" })
: formatPrice(intl, parking.amount, currency)
: "N/A"}
</Body>
</div>
{parking.startTime &&

6
components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
View File

@@ -8,6 +8,7 @@ import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./paymentDetails.module.css"
@@ -25,10 +26,7 @@ export default function PaymentDetails({
</Subtitle>
<div className={styles.payment}>
<Body color="uiTextHighContrast">
{intl.formatNumber(booking.totalPrice, {
currency: booking.currencyCode,
style: "currency",
})}{" "}
{formatPrice(intl, booking.totalPrice, booking.currencyCode)}{" "}
{intl.formatMessage({ id: "has been paid" })}
</Body>
<Body color="uiTextHighContrast">

30
components/HotelReservation/BookingConfirmation/Receipt/index.tsx
View File

@@ -9,6 +9,7 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./receipt.module.css"
@@ -44,18 +45,12 @@ export default function Receipt({
<s>N/A</s>
</Body>
<Body color="red">
{intl.formatNumber(booking.roomPrice, {
currency: booking.currencyCode,
style: "currency",
})}
{formatPrice(intl, booking.roomPrice, booking.currencyCode)}
</Body>
</div>
) : (
<Body color="uiTextHighContrast">
{intl.formatNumber(booking.roomPrice, {
currency: booking.currencyCode,
style: "currency",
})}
{formatPrice(intl, booking.roomPrice, booking.currencyCode)}
</Body>
)}
<Caption color="uiTextMediumContrast">
@@ -83,10 +78,7 @@ export default function Receipt({
<div className={styles.entry}>
<Body color="uiTextHighContrast">{room.bedType.description}</Body>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: booking.currencyCode,
style: "currency",
})}
{formatPrice(intl, 0, booking.currencyCode)}
</Body>
</div>
<div className={styles.entry}>
@@ -97,10 +89,11 @@ export default function Receipt({
{breakfastPkgSelected ? (
<Body color="uiTextHighContrast">
{intl.formatNumber(breakfastPkgSelected.totalPrice, {
currency: breakfastPkgSelected.currency,
style: "currency",
})}
{formatPrice(
intl,
breakfastPkgSelected.totalPrice,
breakfastPkgSelected.currency
)}
</Body>
) : null}
</div>
@@ -112,10 +105,7 @@ export default function Receipt({
{intl.formatMessage({ id: "Total price" })}
</Body>
<Body textTransform="bold">
{intl.formatNumber(booking.totalPrice, {
currency: booking.currencyCode,
style: "currency",
})}
{formatPrice(intl, booking.totalPrice, booking.currencyCode)}
</Body>
</div>
<div className={styles.entry}>

22
components/HotelReservation/EnterDetails/Breakfast/index.tsx
View File

@@ -10,6 +10,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting"
import { breakfastFormSchema } from "./schema"
@@ -91,7 +92,11 @@ export default function Breakfast({ packages }: BreakfastProps) {
? intl.formatMessage<React.ReactNode>(
{ id: "breakfast.price.free" },
{
amount: pkg.localPrice.price,
amount: formatPrice(
intl,
parseInt(pkg.localPrice.price),
pkg.localPrice.currency
),
currency: pkg.localPrice.currency,
free: (str) => <Highlight>{str}</Highlight>,
strikethrough: (str) => <s>{str}</s>,
@@ -100,8 +105,11 @@ export default function Breakfast({ packages }: BreakfastProps) {
: intl.formatMessage(
{ id: "breakfast.price" },
{
amount: pkg.localPrice.price,
currency: pkg.localPrice.currency,
amount: formatPrice(
intl,
parseInt(pkg.localPrice.price),
pkg.localPrice.currency
),
}
)
}
@@ -114,13 +122,7 @@ export default function Breakfast({ packages }: BreakfastProps) {
))}
<RadioCard
name="breakfast"
subtitle={intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: "0",
currency: packages[0].localPrice.currency,
}
)}
subtitle={formatPrice(intl, 0, packages[0].localPrice.currency)}
text={intl.formatMessage({
id: "You can always change your mind later and add breakfast at the hotel.",
})}

10
components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
View File

@@ -11,6 +11,7 @@ import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./joinScandicFriendsCard.module.css"
@@ -31,11 +32,14 @@ export default function JoinScandicFriendsCard({
const saveOnJoiningLabel = intl.formatMessage(
{
id: "Only pay {amount} {currency}",
id: "Only pay {amount}",
},
{
amount: intl.formatNumber(memberPrice?.price ?? 0),
currency: memberPrice?.currency ?? "SEK",
amount: formatPrice(
intl,
memberPrice?.price ?? 0,
memberPrice?.currency ?? "SEK"
),
}
)

10
components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx
View File

@@ -9,6 +9,7 @@ import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { formatPrice } from "@/utils/numberFormatting"
import Modal from "../../Modal"
@@ -47,10 +48,11 @@ export default function MemberPriceModal({
})}
</Body>
<Subtitle type="two" color="red">
{intl.formatNumber(memberPrice.pricePerStay, {
currency: memberPrice.currency,
style: "currency",
})}
{formatPrice(
intl,
memberPrice.pricePerStay,
memberPrice.currency
)}
</Subtitle>
</span>
)}

2
components/HotelReservation/EnterDetails/Header/index.tsx
View File

@@ -2,7 +2,7 @@ import Image from "@/components/Image"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import getSingleDecimal from "@/utils/numberFormatting"
import { getSingleDecimal } from "@/utils/numberFormatting"
import ToggleSidePeek from "./ToggleSidePeek"

5
components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
View File

@@ -5,6 +5,7 @@ import { InfoCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./priceChangeDialog.module.css"
@@ -51,10 +52,10 @@ export default function PriceChangeDialog({
})}
<br />
<span className={styles.oldPrice}>
{intl.formatNumber(oldPrice, { style: "currency", currency })}
{formatPrice(intl, oldPrice, currency)}
</span>{" "}
<strong className={styles.newPrice}>
{intl.formatNumber(newPrice, { style: "currency", currency })}
{formatPrice(intl, newPrice, currency)}
</strong>
</Body>
</header>

11
components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
View File

@@ -9,6 +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 { formatPrice } from "@/utils/numberFormatting"
import styles from "./bottomSheet.module.css"
@@ -56,12 +57,10 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
>
<Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
<Subtitle>
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: intl.formatNumber(totalPrice.local.price),
currency: totalPrice.local.currency,
}
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency
)}
</Subtitle>
<Caption color="baseTextHighContrast" type="underline">

67
components/HotelReservation/EnterDetails/Summary/PriceDetailsTable/index.tsx
View File

@@ -9,6 +9,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { getNights } from "@/utils/dateFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./priceDetailsTable.module.css"
@@ -47,13 +48,9 @@ export function storeSelector(state: DetailsState) {
bedType: state.bedType,
booking: state.booking,
breakfast: state.breakfast,
join: state.guest.join,
membershipNo: state.guest.membershipNo,
packages: state.packages,
roomRate: state.roomRate,
roomPrice: state.roomPrice,
toggleSummaryOpen: state.actions.toggleSummaryOpen,
togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen,
totalPrice: state.totalPrice,
vat: state.vat,
}
@@ -65,20 +62,8 @@ export default function PriceDetailsTable({
const intl = useIntl()
const lang = useLang()
const {
bedType,
booking,
breakfast,
join,
membershipNo,
packages,
roomPrice,
roomRate,
toggleSummaryOpen,
togglePriceDetailsModalOpen,
totalPrice,
vat,
} = useEnterDetailsStore(storeSelector)
const { bedType, booking, breakfast, roomPrice, totalPrice, vat } =
useEnterDetailsStore(storeSelector)
// TODO: Update for Multiroom later
const { adults, children } = booking.rooms[0]
@@ -98,10 +83,11 @@ export default function PriceDetailsTable({
<Row
key={night.format("YYMMDD")}
label={dt(night).locale(lang).format("ddd, D MMM YYYY")}
value={intl.formatNumber(roomPrice.perNight.local.price, {
currency: roomPrice.perNight.local.currency,
style: "currency",
})}
value={formatPrice(
intl,
roomPrice.perNight.local.price,
roomPrice.perNight.local.currency
)}
/>
)
})}
@@ -110,10 +96,7 @@ export default function PriceDetailsTable({
<TableSection>
<Row
label={bedType.description}
value={intl.formatNumber(0, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
value={formatPrice(intl, 0, roomPrice.perStay.local.currency)}
/>
</TableSection>
) : null}
@@ -125,12 +108,10 @@ export default function PriceDetailsTable({
{ id: "booking.adults.breakfasts" },
{ totalAdults: adults, totalBreakfasts: nights.length }
)}
value={intl.formatNumber(
value={formatPrice(
intl,
parseInt(breakfast.localPrice.totalPrice),
{
currency: breakfast.localPrice.currency,
style: "currency",
}
breakfast.localPrice.currency
)}
/>
{children?.length ? (
@@ -142,10 +123,7 @@ export default function PriceDetailsTable({
totalBreakfasts: nights.length,
}
)}
value={intl.formatNumber(0, {
currency: breakfast.localPrice.currency,
style: "currency",
})}
value={formatPrice(intl, 0, breakfast.localPrice.currency)}
/>
) : null}
</TableSection>
@@ -154,17 +132,11 @@ export default function PriceDetailsTable({
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
<Row
label={intl.formatMessage({ id: "booking.vat.excl" })}
value={intl.formatNumber(priceExclVat, {
currency: totalPrice.local.currency,
style: "currency",
})}
value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
/>
<Row
label={intl.formatMessage({ id: "booking.vat" }, { vat })}
value={intl.formatNumber(vatAmount, {
currency: totalPrice.local.currency,
style: "currency",
})}
value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
/>
<tr className={styles.row}>
<td>
@@ -174,10 +146,11 @@ export default function PriceDetailsTable({
</td>
<td className={styles.price}>
<Body textTransform="bold">
{intl.formatNumber(totalPrice.local.price, {
currency: totalPrice.local.currency,
style: "currency",
})}
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency
)}
</Body>
</td>
</tr>

72
components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -18,7 +18,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 { getNights } from "@/utils/dateFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import Modal from "../../Modal"
import PriceDetailsTable from "../PriceDetailsTable"
@@ -148,10 +148,11 @@ export default function SummaryUI({
<div className={styles.entry}>
<Body color="uiTextHighContrast">{roomType}</Body>
<Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
{intl.formatNumber(roomPrice.perStay.local.price, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
{formatPrice(
intl,
roomPrice.perStay.local.price,
roomPrice.perStay.local.currency
)}
</Body>
</div>
<Caption color="uiTextMediumContrast">
@@ -196,10 +197,11 @@ export default function SummaryUI({
</div>
<Body color="uiTextHighContrast">
{intl.formatNumber(parseInt(roomPackage.localPrice.price), {
currency: roomPackage.localPrice.currency,
style: "currency",
})}
{formatPrice(
intl,
parseInt(roomPackage.localPrice.price),
roomPackage.localPrice.currency
)}
</Body>
</div>
))
@@ -209,10 +211,7 @@ export default function SummaryUI({
<Body color="uiTextHighContrast">{bedType.description}</Body>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
</Body>
</div>
) : null}
@@ -227,10 +226,7 @@ export default function SummaryUI({
</Caption>
</div>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
</Body>
</div>
) : null}
@@ -242,10 +238,7 @@ export default function SummaryUI({
</Body>
</div>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
</Body>
</div>
) : null}
@@ -255,10 +248,7 @@ export default function SummaryUI({
{intl.formatMessage({ id: "No breakfast" })}
</Body>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: roomPrice.perStay.local.currency,
style: "currency",
})}
{formatPrice(intl, 0, roomPrice.perStay.local.currency)}
</Body>
</div>
) : null}
@@ -275,10 +265,11 @@ export default function SummaryUI({
)}
</Caption>
<Body color="uiTextHighContrast">
{intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
currency: breakfast.localPrice.currency,
style: "currency",
})}
{formatPrice(
intl,
parseInt(breakfast.localPrice.totalPrice),
breakfast.localPrice.currency
)}
</Body>
</div>
{children?.length ? (
@@ -290,10 +281,7 @@ export default function SummaryUI({
)}
</Caption>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: breakfast.localPrice.currency,
style: "currency",
})}
{formatPrice(intl, 0, breakfast.localPrice.currency)}
</Body>
</div>
) : null}
@@ -331,18 +319,20 @@ export default function SummaryUI({
</div>
<div>
<Body textTransform="bold">
{intl.formatNumber(totalPrice.local.price, {
currency: totalPrice.local.currency,
style: "currency",
})}
{formatPrice(
intl,
totalPrice.local.price,
totalPrice.local.currency
)}
</Body>
{totalPrice.requested && (
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{intl.formatNumber(totalPrice.requested.price, {
currency: totalPrice.requested.currency,
style: "currency",
})}
{formatPrice(
intl,
totalPrice.requested.price,
totalPrice.requested.currency
)}
</Caption>
)}
</div>

2
components/HotelReservation/HotelCard/index.tsx
View File

@@ -15,7 +15,7 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import getSingleDecimal from "@/utils/numberFormatting"
import { getSingleDecimal } from "@/utils/numberFormatting"
import ReadMore from "../ReadMore"
import TripAdvisorChip from "../TripAdvisorChip"

2
components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -10,7 +10,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import getSingleDecimal from "@/utils/numberFormatting"
import { getSingleDecimal } from "@/utils/numberFormatting"
import ReadMore from "../../ReadMore"
import TripAdvisorChip from "../../TripAdvisorChip"

42
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
View File

@@ -10,6 +10,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 } from "@/utils/numberFormatting"
import styles from "./rateSummary.module.css"
@@ -48,9 +49,6 @@ export default function RateSummary({
(pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
)
const petRoomPrice = petRoomPackage?.localPrice.totalPrice ?? null
const petRoomCurrency = petRoomPackage?.localPrice.currency ?? null
const checkInDate = new Date(roomsAvailability.checkInDate)
const checkOutDate = new Date(roomsAvailability.checkOutDate)
const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
@@ -106,22 +104,33 @@ export default function RateSummary({
color={isUserLoggedIn ? "red" : "uiTextHighContrast"}
textAlign="right"
>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
{formatPrice(
intl,
priceToShow.localPrice.pricePerStay,
priceToShow.localPrice.currency
)}
</Subtitle>
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{priceToShow?.requestedPrice?.pricePerStay}{" "}
{priceToShow?.requestedPrice?.currency}
</Body>
{priceToShow?.requestedPrice ? (
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{formatPrice(
intl,
priceToShow.requestedPrice.pricePerStay,
priceToShow.requestedPrice.currency
)}
</Body>
) : null}
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
{formatPrice(
intl,
priceToShow.localPrice.pricePerStay,
priceToShow.localPrice.currency
)}
</Subtitle>
<Footnote
color="uiTextMediumContrast"
@@ -130,14 +139,19 @@ export default function RateSummary({
{summaryPriceTex}
</Footnote>
</div>
{isPetRoomSelected && (
{isPetRoomSelected && petRoomPackage?.localPrice && (
<div className={styles.petInfo}>
<Body
color="uiTextHighContrast"
textTransform="bold"
textAlign="right"
>
+ {petRoomPrice} {petRoomCurrency}
+{" "}
{formatPrice(
intl,
parseInt(petRoomPackage.localPrice.totalPrice),
petRoomPackage.localPrice.currency
)}
</Body>
<Body color="uiTextMediumContrast" textAlign="right">
{intl.formatMessage({ id: "Pet charge" })}

17
components/HotelReservation/SelectRate/SelectionCard/index.tsx
View File

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./selectionCard.module.css"
@@ -29,15 +30,17 @@ export default function SelectionCard({
<div>
<Caption color="burgundy" className={styles.price}>
{/* TODO: Handle currency and this whole line of text in a better way through intl */}
{price} {currency}/{intl.formatMessage({ id: "night" })}
</Caption>
<Caption color="burgundy" className={styles.membersPrice}>
{/* TODO: Handle currency and this whole line of text in a better way through intl */}
{intl.formatMessage({ id: "Members" })} {membersPrice} {currency}/
{formatPrice(intl, price, currency)}/
{intl.formatMessage({ id: "night" })}
</Caption>
{membersPrice && (
<Caption color="burgundy" className={styles.membersPrice}>
{intl.formatMessage({ id: "Members" })}{" "}
{formatPrice(intl, membersPrice, currency)}/
{intl.formatMessage({ id: "night" })}
</Caption>
)}
</div>
</div>
)

3
components/HotelReservation/SignupPromo/Desktop.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./signupPromo.module.css"
@@ -18,7 +19,7 @@ export default function SignupPromoDesktop({
return null
}
const { amount, currency } = memberPrice
const price = intl.formatNumber(amount, { currency, style: "currency" })
const price = formatPrice(intl, amount, currency)
return memberPrice ? (
<div className={styles.memberDiscountBannerDesktop}>

9
components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
View File

@@ -3,11 +3,13 @@ import {
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useCallback, useState } from "react"
import { useIntl } from "react-intl"
import { useHotelsMapStore } from "@/stores/hotels-map"
import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting"
import HotelMarker from "../../Markers/HotelMarker"
@@ -16,6 +18,7 @@ import styles from "./hotelListingMapContent.module.css"
import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
const intl = useIntl()
const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } =
useHotelsMapStore()
@@ -55,6 +58,7 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
{hotelPins.map((pin) => {
const isActiveOrHovered =
activeHotelPin === pin.name || hoveredHotelPin === pin.name
const hotelPrice = pin.memberPrice ?? pin.publicPrice
return (
<AdvancedMarker
key={pin.name}
@@ -93,7 +97,10 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
color={isActiveOrHovered ? "white" : "baseTextHighContrast"}
>
<span>
{pin.memberPrice} {pin.currency}
{/* TODO: Handle when no price is available */}
{hotelPrice
? formatPrice(intl, hotelPrice, pin.currency)
: "N/A"}
</span>
</Body>
</span>

7
i18n/dictionaries/da.json
View File

@@ -288,7 +288,7 @@
"Number of parking spots": "Antal parkeringspladser: {number}",
"OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
"On your journey": "På din rejse",
"Only pay {amount} {currency}": "Betal kun {amount} {currency}",
"Only pay {amount}": "Betal kun {amount}",
"Open": "Åben",
"Open gift(s)": "Åbne {amount, plural, one {gave} other {gaver}}",
"Open image gallery": "Åbn billedgalleri",
@@ -512,8 +512,8 @@
"booking.vat": "Moms {vat}%",
"booking.vat.excl": "Pris ekskl. moms",
"booking.vat.incl": "Pris inkl. moms",
"breakfast.price": "{amount} {currency}/nat per voksen",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/nat per voksen",
"breakfast.price": "{amount}/nat per voksen",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/nat per voksen",
"by": "inden",
"characters": "tegn",
"filters.nohotel.heading": "Ingen rum matchede dine filtre.",
@@ -546,7 +546,6 @@
"to": "til",
"uppercase letter": "stort bogstav",
"{amount} out of {total}": "{amount} ud af {total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} slutter med {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

7
i18n/dictionaries/de.json
View File

@@ -287,7 +287,7 @@
"Number of parking spots": "Anzahl der Parkplätze: {number}",
"OTHER PAYMENT METHODS": "ANDERE BEZAHLMETHODE",
"On your journey": "Auf deiner Reise",
"Only pay {amount} {currency}": "Nur bezahlen {amount} {currency}",
"Only pay {amount}": "Nur bezahlen {amount}",
"Open": "Offen",
"Open gift(s)": "{amount, plural, one {Geschenk} other {Geschenke}} öffnen",
"Open image gallery": "Bildergalerie öffnen",
@@ -511,8 +511,8 @@
"booking.vat": "MwSt. {vat}%",
"booking.vat.excl": "Preis ohne MwSt.",
"booking.vat.incl": "Preis inkl. MwSt.",
"breakfast.price": "{amount} {currency}/Nacht pro Erwachsenem",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/Nacht pro Erwachsenem",
"breakfast.price": "{amount}/Nacht pro Erwachsenem",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/Nacht pro Erwachsenem",
"by": "bis",
"characters": "figuren",
"filters.nohotel.heading": "Kein Zimmer entspricht Ihren Filtern.",
@@ -545,7 +545,6 @@
"to": "zu",
"uppercase letter": "großbuchstabe",
"{amount} out of {total}": "{amount} von {total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} endet mit {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

7
i18n/dictionaries/en.json
View File

@@ -309,7 +309,7 @@
"Number of parking spots": "Number of parking spots: {number}",
"OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
"On your journey": "On your journey",
"Only pay {amount} {currency}": "Only pay {amount} {currency}",
"Only pay {amount}": "Only pay {amount}",
"Open": "Open",
"Open gift(s)": "Open {amount, plural, one {gift} other {gifts}}",
"Open image gallery": "Open image gallery",
@@ -555,8 +555,8 @@
"booking.vat": "VAT {vat}%",
"booking.vat.excl": "Price excluding VAT",
"booking.vat.incl": "Price including VAT",
"breakfast.price": "{amount} {currency}/night per adult",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/night per adult",
"breakfast.price": "{amount}/night per adult",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/night per adult",
"by": "by",
"characters": "characters",
"filters.nohotel.heading": "No hotels match your filters",
@@ -592,7 +592,6 @@
"to": "to",
"uppercase letter": "uppercase letter",
"{amount} out of {total}": "{amount} out of {total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} ending with {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

7
i18n/dictionaries/fi.json
View File

@@ -288,7 +288,7 @@
"Number of parking spots": "Pysäköintipaikkojen määrä: {number}",
"OTHER PAYMENT METHODS": "MUISE KORT",
"On your journey": "Matkallasi",
"Only pay {amount} {currency}": "Vain maksaa {amount} {currency}",
"Only pay {amount}": "Vain maksaa {amount}",
"Open": "Avata",
"Open gift(s)": "{amount, plural, one {Avoin lahja} other {Avoimet lahjat}}",
"Open image gallery": "Avaa kuvagalleria",
@@ -510,8 +510,8 @@
"booking.vat": "ALV {vat}%",
"booking.vat.excl": "ALV ei sisälly hintaan",
"booking.vat.incl": "ALV sisältyy hintaan",
"breakfast.price": "{amount} {currency}/yötä aikuista kohti",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/yötä aikuista kohti",
"breakfast.price": "{amount}/yötä aikuista kohti",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/yötä aikuista kohti",
"by": "mennessä",
"characters": "hahmoja",
"filters.nohotel.heading": "Yksikään huone ei vastannut suodattimiasi",
@@ -544,7 +544,6 @@
"to": "to",
"uppercase letter": "iso kirjain",
"{amount} out of {total}": "{amount}/{total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} päättyen {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

7
i18n/dictionaries/no.json
View File

@@ -287,7 +287,7 @@
"Number of parking spots": "Antall parkeringsplasser: {number}",
"OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
"On your journey": "På reisen din",
"Only pay {amount} {currency}": "Bare betal {amount} {currency}",
"Only pay {amount}": "Bare betal {amount}",
"Open": "Åpen",
"Open gift(s)": "{amount, plural, one {Åpen gave} other {Åpnen gaver}}",
"Open image gallery": "Åpne bildegalleri",
@@ -510,8 +510,8 @@
"booking.vat": "mva {vat}%",
"booking.vat.excl": "Pris exkludert mva",
"booking.vat.incl": "Pris inkludert mva",
"breakfast.price": "{amount} {currency}/natt per voksen",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/natt per voksen",
"breakfast.price": "{amount}/natt per voksen",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/natt per voksen",
"by": "innen",
"characters": "tegn",
"filters.nohotel.heading": "Ingen rom samsvarte med filtrene dine",
@@ -544,7 +544,6 @@
"to": "til",
"uppercase letter": "stor bokstav",
"{amount} out of {total}": "{amount} av {total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} slutter med {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

7
i18n/dictionaries/sv.json
View File

@@ -287,7 +287,7 @@
"Number of parking spots": "Antal parkeringsplatser: {number}",
"OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
"On your journey": "På din resa",
"Only pay {amount} {currency}": "Betala endast {amount} {currency}",
"Only pay {amount}": "Betala endast {amount}",
"Open": "Öppna",
"Open gift(s)": "Öppna {amount, plural, one {gåva} other {gåvor}}",
"Open image gallery": "Öppna bildgalleri",
@@ -510,8 +510,8 @@
"booking.vat": "Moms {vat}%",
"booking.vat.excl": "Pris exkl. VAT",
"booking.vat.incl": "Pris inkl. VAT",
"breakfast.price": "{amount} {currency}/natt per vuxen",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/natt per vuxen",
"breakfast.price": "{amount}/natt per vuxen",
"breakfast.price.free": "<strikethrough>{amount}</strikethrough> <free>0 {currency}</free>/natt per vuxen",
"by": "innan",
"characters": "tecken",
"filters.nohotel.heading": "Inga rum matchade dina filter",
@@ -546,7 +546,6 @@
"types": "typer",
"uppercase letter": "stor bokstav",
"{amount} out of {total}": "{amount} av {total}",
"{amount} {currency}": "{amount} {currency}",
"{card} ending with {cardno}": "{card} som slutar på {cardno}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}"
}

26
utils/numberFormatting.ts
View File

@@ -1,8 +1,32 @@
import type { IntlShape } from "react-intl"
/**
* Function to parse number with single decimal if any
* @param n
* @returns number in float type with single digit decimal if any
*/
export default function getSingleDecimal(n: Number | string) {
export function getSingleDecimal(n: Number | string) {
return parseFloat(Number(n).toFixed(1))
}
/**
* Function to parse number for i18n format for prices with currency
* @param intl - react-intl object
* @param price - number to be formatted
* @param currency - currency code
* @returns localized and formatted number in string type with currency
*/
export function formatPrice(
intl: IntlShape,
price: number,
currency?: string | null
) {
if (!currency) {
return intl.formatNumber(price)
}
return intl.formatNumber(price, {
style: "currency",
currency,
minimumFractionDigits: 0,
})
}