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

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

@@ -44,7 +44,16 @@ async function PointsColumn({
title, title,
subtitle, subtitle,
}: PointsColumnProps) { }: 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 ( return (
<article className={styles.article}> <article className={styles.article}>
@@ -59,7 +68,7 @@ async function PointsColumn({
})} })}
</Body> </Body>
<Title color="white" level="h2" textAlign="center"> <Title color="white" level="h2" textAlign="center">
{points ?? nights ?? "N/A"} {number()}
</Title> </Title>
{subtitle ? ( {subtitle ? (
<Body color="white" textAlign="center"> <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 { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import { formatNumber } from "@/utils/format"
import { awardPointsVariants } from "./awardPointsVariants" import { awardPointsVariants } from "./awardPointsVariants"
@@ -34,7 +33,7 @@ export default function AwardPoints({
return ( return (
<Body textTransform="bold" className={classNames}> <Body textTransform="bold" className={classNames}>
{isCalculated {isCalculated
? formatNumber(awardPoints) ? intl.formatNumber(awardPoints)
: intl.formatMessage({ id: "Points being calculated" })} : intl.formatMessage({ id: "Points being calculated" })}
</Body> </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 Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { formatNumber } from "@/utils/format"
import styles from "./summary.module.css" import styles from "./summary.module.css"
@@ -106,7 +105,9 @@ export default function Summary({
{intl.formatMessage( {intl.formatMessage(
{ id: "{amount} {currency}" }, { id: "{amount} {currency}" },
{ {
amount: formatNumber(parseInt(room.localPrice.price ?? "0")), amount: intl.formatNumber(
parseInt(room.localPrice.price ?? "0")
),
currency: room.localPrice.currency, currency: room.localPrice.currency,
} }
)} )}
@@ -202,7 +203,7 @@ export default function Summary({
{intl.formatMessage( {intl.formatMessage(
{ id: "{amount} {currency}" }, { id: "{amount} {currency}" },
{ {
amount: formatNumber(totalPrice.local), amount: intl.formatNumber(totalPrice.local),
currency: room.localPrice.currency, currency: room.localPrice.currency,
} }
)} )}
@@ -212,7 +213,7 @@ export default function Summary({
{intl.formatMessage( {intl.formatMessage(
{ id: "{amount} {currency}" }, { id: "{amount} {currency}" },
{ {
amount: formatNumber(totalPrice.euro), amount: intl.formatNumber(totalPrice.euro),
currency: room.euroPrice.currency, currency: room.euroPrice.currency,
} }
)} )}

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

@@ -1,6 +1,6 @@
.header { .header {
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Spacing-x1) var(--Spacing-x5);
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: baseline; 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)
}