From 28c30b2416e8a8c962ca9e77649206a9f17c0108 Mon Sep 17 00:00:00 2001
From: Christian Andolf
Date: Thu, 31 Oct 2024 14:07:21 +0100
Subject: [PATCH 1/2] fix(SW-315): formatting numbers via locale, fixed a few
padding issues
---
.../Overview/Stats/ExpiringPoints/index.tsx | 3 +--
.../Overview/Stats/Points/PointsColumn/index.tsx | 13 +++++++++++--
.../Points/EarnAndBurn/AwardPoints/index.tsx | 3 +--
.../HotelReservation/EnterDetails/Summary/index.tsx | 9 +++++----
components/Section/Header/header.module.css | 2 +-
utils/format.ts | 8 --------
6 files changed, 19 insertions(+), 19 deletions(-)
delete mode 100644 utils/format.ts
diff --git a/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx b/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
index fa21a8c83..9f29dfef5 100644
--- a/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
+++ b/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
@@ -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),
}
)}
diff --git a/components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx b/components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx
index 0d67a14e3..c33fbab8c 100644
--- a/components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx
+++ b/components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx
@@ -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 (
@@ -59,7 +68,7 @@ async function PointsColumn({
})}
diff --git a/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx b/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx
index e32c3c5ca..73c323f2c 100644
--- a/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx
+++ b/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/index.tsx
@@ -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 (
{isCalculated
- ? formatNumber(awardPoints)
+ ? intl.formatNumber(awardPoints)
: intl.formatMessage({ id: "Points being calculated" })}
)
diff --git a/components/HotelReservation/EnterDetails/Summary/index.tsx b/components/HotelReservation/EnterDetails/Summary/index.tsx
index 752f3fd4a..b8d744baa 100644
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -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,
}
)}
diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css
index 48c539418..08a25baf2 100644
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -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;
}
diff --git a/utils/format.ts b/utils/format.ts
deleted file mode 100644
index 7a731f09e..000000000
--- a/utils/format.ts
+++ /dev/null
@@ -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)
-}
From f6b3cf8b92d779e4b03bf61f3ca5c826b43baf8c Mon Sep 17 00:00:00 2001
From: Christian Andolf
Date: Tue, 5 Nov 2024 10:14:52 +0100
Subject: [PATCH 2/2] chore: replace function expression with inline statement
replace destructuring for better static analysis
remove unused variables
---
.../(protected)/my-pages/[...path]/page.tsx | 4 ++--
.../my-pages/profile/@communication/page.tsx | 6 +++---
.../my-pages/profile/@creditCards/page.tsx | 6 +++---
.../profile/@membershipCards/page.tsx | 6 +++---
.../my-pages/profile/@profile/page.tsx | 18 ++++++++---------
.../Friend/MembershipNumber/index.tsx | 4 ++--
.../DynamicContent/Overview/Friend/index.tsx | 4 ++--
.../Stats/Points/PointsColumn/index.tsx | 20 +++++++++----------
.../Overview/Stats/Points/index.tsx | 4 ++--
.../Points/Overview/Points/index.tsx | 6 +++---
.../Previous/EmptyPreviousStays/index.tsx | 4 ++--
.../Stays/ShowMoreButton/index.tsx | 4 ++--
.../Soonest/EmptyUpcomingStays/index.tsx | 8 ++++----
.../Upcoming/EmptyUpcomingStays/index.tsx | 8 ++++----
.../Current/Header/BookingButton/index.tsx | 4 ++--
.../Header/MyPagesMobileDropdown/index.tsx | 4 ++--
components/Current/Header/TopMenu/index.tsx | 6 +++---
components/Footer/Details/index.tsx | 4 ++--
.../MainMenu/MyPagesMenuWrapper/index.tsx | 2 --
components/MyPages/Sidebar/index.tsx | 4 ++--
.../Profile/DeleteCreditCardButton/index.tsx | 8 +++++---
components/SkipToMainContent.tsx | 4 ++--
.../TempDesignSystem/Form/Country/index.tsx | 7 +++----
.../TempDesignSystem/Form/Phone/index.tsx | 4 ++--
components/Webviews/LinkToOverview/index.tsx | 4 ++--
25 files changed, 75 insertions(+), 78 deletions(-)
diff --git a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
index ac3fec31a..528b7b211 100644
--- a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
@@ -18,7 +18,7 @@ export default async function MyPages({
setLang(params.lang)
const accountPageRes = await serverClient().contentstack.accountPage.get()
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
if (!accountPageRes) {
return null
@@ -33,7 +33,7 @@ export default async function MyPages({
{accountPage.content?.length ? (
) : (
- {formatMessage({ id: "No content published" })}
+ {intl.formatMessage({ id: "No content published" })}
)}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
index 43f1d66ef..4341b3ed0 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
@@ -13,15 +13,15 @@ export default async function CommunicationSlot({
}: PageArgs) {
setLang(params.lang)
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
return (
- {formatMessage({ id: "My communication preferences" })}
+ {intl.formatMessage({ id: "My communication preferences" })}
- {formatMessage({
+ {intl.formatMessage({
id: "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
})}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
index 4dbfc1ab4..ea54e71fd 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
@@ -13,17 +13,17 @@ import { LangParams, PageArgs } from "@/types/params"
export default async function CreditCardSlot({ params }: PageArgs) {
setLang(params.lang)
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
const creditCards = await serverClient().user.creditCards()
return (
- {formatMessage({ id: "My payment cards" })}
+ {intl.formatMessage({ id: "My payment cards" })}
- {formatMessage({
+ {intl.formatMessage({
id: "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
})}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
index 693bdc171..913cde993 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
@@ -15,14 +15,14 @@ export default async function MembershipCardSlot({
params,
}: PageArgs) {
setLang(params.lang)
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
const membershipCards = await getMembershipCards()
return (
- {formatMessage({ id: "My membership cards" })}
+ {intl.formatMessage({ id: "My membership cards" })}
{membershipCards &&
@@ -41,7 +41,7 @@ export default async function MembershipCardSlot({
- {formatMessage({ id: "Add new card" })}
+ {intl.formatMessage({ id: "Add new card" })}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
index d858d5943..c12b61810 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
@@ -24,7 +24,7 @@ import { LangParams, PageArgs } from "@/types/params"
export default async function Profile({ params }: PageArgs) {
setLang(params.lang)
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
const user = await getProfile()
if (!user || "error" in user) {
return null
@@ -37,7 +37,7 @@ export default async function Profile({ params }: PageArgs) {
- {formatMessage({ id: "Welcome" })}
+ {intl.formatMessage({ id: "Welcome" })}
{user.name}
@@ -45,7 +45,7 @@ export default async function Profile({ params }: PageArgs) {
- {formatMessage({ id: "Edit profile" })}
+ {intl.formatMessage({ id: "Edit profile" })}
@@ -54,35 +54,35 @@ export default async function Profile({ params }: PageArgs) {
- {formatMessage({ id: "Date of Birth" })}
+ {intl.formatMessage({ id: "Date of Birth" })}
{user.dateOfBirth}
- {formatMessage({ id: "Phone number" })}
+ {intl.formatMessage({ id: "Phone number" })}
{user.phoneNumber}
- {formatMessage({ id: "Language" })}
+ {intl.formatMessage({ id: "Language" })}
{language?.label ?? defaultLanguage}
- {formatMessage({ id: "Email" })}
+ {intl.formatMessage({ id: "Email" })}
{user.email}
- {formatMessage({ id: "Address" })}
+ {intl.formatMessage({ id: "Address" })}
{user.address.streetAddress
@@ -100,7 +100,7 @@ export default async function Profile({ params }: PageArgs
) {
- {formatMessage({ id: "Password" })}
+ {intl.formatMessage({ id: "Password" })}
**********
diff --git a/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx b/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
index 10114c7ac..207533a57 100644
--- a/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
+++ b/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
@@ -13,13 +13,13 @@ export default async function MembershipNumber({
color,
membership,
}: MembershipNumberProps) {
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
const classNames = membershipNumberVariants({ className, color })
return (
- {formatMessage({ id: "Membership ID" })}
+ {intl.formatMessage({ id: "Membership ID" })}
{": "}
diff --git a/components/Blocks/DynamicContent/Overview/Friend/index.tsx b/components/Blocks/DynamicContent/Overview/Friend/index.tsx
index 3f1b30ed1..b499870c6 100644
--- a/components/Blocks/DynamicContent/Overview/Friend/index.tsx
+++ b/components/Blocks/DynamicContent/Overview/Friend/index.tsx
@@ -18,7 +18,7 @@ export default async function Friend({
membership,
name,
}: FriendProps) {
- const { formatMessage } = await getIntl()
+ const intl = await getIntl()
if (!membership?.membershipLevel) {
return null
}
@@ -28,7 +28,7 @@ export default async function Friend({