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

fix(SW-315): formatting numbers via locale, fixed a few padding issues

Browse Source
This commit is contained in:
Christian Andolf
2024-10-31 14:07:21 +01:00
parent de5d80ec92
commit 28c30b2416
6 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
View File

@@ -4,7 +4,6 @@ import { dt } from "@/lib/dt"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { formatNumber } from "@/utils/format"
import { getMembership } from "@/utils/user"
import type { UserProps } from "@/types/components/myPages/user"
@@ -27,7 +26,7 @@ export default async function ExpiringPoints({ user }: UserProps) {
{intl.formatMessage(
{ id: "spendable points expiring by" },
{
points: formatNumber(membership.pointsToExpire),
points: intl.formatNumber(membership.pointsToExpire),
date: d.format(dateFormat),
}
)}

13
components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx
View File

@@ -44,7 +44,16 @@ async function PointsColumn({
title,
subtitle,
}: PointsColumnProps) {
const { formatMessage } = await getIntl()
const { formatMessage, formatNumber } = await getIntl()
function number() {
if (typeof points === "number") {
return formatNumber(points)
} else if (typeof nights === "number") {
return formatNumber(nights)
}
return "N/A"
}
return (
<article className={styles.article}>
@@ -59,7 +68,7 @@ async function PointsColumn({
})}
</Body>
<Title color="white" level="h2" textAlign="center">
{points ?? nights ?? "N/A"}
{number()}
</Title>
{subtitle ? (
<Body color="white" textAlign="center">

3
components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx
View File

@@ -1,7 +1,6 @@
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatNumber } from "@/utils/format"
import { awardPointsVariants } from "./awardPointsVariants"
@@ -34,7 +33,7 @@ export default function AwardPoints({
return (
<Body textTransform="bold" className={classNames}>
{isCalculated
? formatNumber(awardPoints)
? intl.formatNumber(awardPoints)
: intl.formatMessage({ id: "Points being calculated" })}
</Body>
)

9
components/HotelReservation/EnterDetails/Summary/index.tsx
View File

@@ -13,7 +13,6 @@ 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 { formatNumber } from "@/utils/format"
import styles from "./summary.module.css"
@@ -106,7 +105,9 @@ export default function Summary({
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: formatNumber(parseInt(room.localPrice.price ?? "0")),
amount: intl.formatNumber(
parseInt(room.localPrice.price ?? "0")
),
currency: room.localPrice.currency,
}
)}
@@ -202,7 +203,7 @@ export default function Summary({
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: formatNumber(totalPrice.local),
amount: intl.formatNumber(totalPrice.local),
currency: room.localPrice.currency,
}
)}
@@ -212,7 +213,7 @@ export default function Summary({
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: formatNumber(totalPrice.euro),
amount: intl.formatNumber(totalPrice.euro),
currency: room.euroPrice.currency,
}
)}

2
components/Section/Header/header.module.css
View File

@@ -1,6 +1,6 @@
.header {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Spacing-x1) var(--Spacing-x5);
grid-template-columns: 1fr;
align-items: baseline;
}

8
utils/format.ts
View File

@@ -1,8 +0,0 @@
import { Lang } from "@/constants/languages"
/// Function to format numbers with space as thousands separator
export function formatNumber(num: number) {
// sv hardcoded to force space on thousands
const formatter = new Intl.NumberFormat(Lang.sv)
return formatter.format(num)
}