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

feat: improve instantiation of intl

Browse Source
This commit is contained in:
Michael Zetterberg
2025-04-07 07:33:28 +02:00
parent f31b374370
commit 7c82a565ae
11 changed files with 95 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/scandic-web/app/[lang]/(live)/layout.tsx
View File

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script" import Script from "next/script"
import { SessionProvider } from "next-auth/react" import { SessionProvider } from "next-auth/react"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
import { SessionRefresher } from "@/components/Auth/TokenRefresher" import { SessionRefresher } from "@/components/Auth/TokenRefresher"
@@ -19,8 +20,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript" import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking" import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n" import { getMessages } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params" import type { LangParams, LayoutArgs } from "@/types/params"
@@ -35,7 +36,7 @@ export default async function RootLayout({
} }
>) { >) {
setLang(params.lang) setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl() const messages = await getMessages(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -56,7 +57,11 @@ export default async function RootLayout({
</head> </head>
<body className="scandic"> <body className="scandic">
<SessionProvider basePath="/api/web/auth"> <SessionProvider basePath="/api/web/auth">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider> <TrpcProvider>
<RouterTracking /> <RouterTracking />
<SitewideAlert /> <SitewideAlert />
@@ -70,7 +75,7 @@ export default async function RootLayout({
<CookieBotConsent /> <CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider> </TrpcProvider>
</ServerIntlProvider> </ClientIntlProvider>
</SessionProvider> </SessionProvider>
</body> </body>
</html> </html>

16
apps/scandic-web/app/[lang]/(live-current)/layout.tsx
View File

@@ -5,6 +5,8 @@ import "@scandic-hotels/design-system/style.css"
import Script from "next/script" import Script from "next/script"
import { Lang } from "@/constants/languages"
import TokenRefresher from "@/components/Auth/TokenRefresher" import TokenRefresher from "@/components/Auth/TokenRefresher"
import CookieBotConsent from "@/components/CookieBot" import CookieBotConsent from "@/components/CookieBot"
import AdobeScript from "@/components/Current/AdobeScript" import AdobeScript from "@/components/Current/AdobeScript"
@@ -12,8 +14,8 @@ import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup" import LangPopup from "@/components/Current/LangPopup"
import SkipToMainContent from "@/components/SkipToMainContent" import SkipToMainContent from "@/components/SkipToMainContent"
import RouterTracking from "@/components/TrackingSDK/RouterTracking" import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n" import { getMessages } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import type { Metadata } from "next" import type { Metadata } from "next"
@@ -34,7 +36,7 @@ export default async function RootLayout({
LayoutArgs<LangParams> & { header: React.ReactNode } LayoutArgs<LangParams> & { header: React.ReactNode }
>) { >) {
setLang(params.lang) setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl() const messages = await getMessages(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -59,14 +61,18 @@ export default async function RootLayout({
<body className="theme-00Corecolours theme-X0Oldcorecolours"> <body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup /> <LangPopup />
<SkipToMainContent /> <SkipToMainContent />
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<RouterTracking /> <RouterTracking />
{header} {header}
{children} {children}
<Footer /> <Footer />
<TokenRefresher /> <TokenRefresher />
<CookieBotConsent /> <CookieBotConsent />
</ServerIntlProvider> </ClientIntlProvider>
<Script id="page-tracking">{` <Script id="page-tracking">{`
if (typeof _satellite !== "undefined" && typeof _satellite.pageBottom === "function") { if (typeof _satellite !== "undefined" && typeof _satellite.pageBottom === "function") {
_satellite.pageBottom(); _satellite.pageBottom();

15
apps/scandic-web/app/[lang]/(no-layout)/layout.tsx
View File

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script" import Script from "next/script"
import { SessionProvider } from "next-auth/react" import { SessionProvider } from "next-auth/react"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
import { SessionRefresher } from "@/components/Auth/TokenRefresher" import { SessionRefresher } from "@/components/Auth/TokenRefresher"
@@ -16,8 +17,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript" import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking" import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n" import { getMessages } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params" import type { LangParams, LayoutArgs } from "@/types/params"
@@ -27,7 +28,7 @@ export default async function RootLayout({
params, params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) { }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang) setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl() const messages = await getMessages(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -48,7 +49,11 @@ export default async function RootLayout({
</head> </head>
<body className="scandic"> <body className="scandic">
<SessionProvider basePath="/api/web/auth"> <SessionProvider basePath="/api/web/auth">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider> <TrpcProvider>
<RouterTracking /> <RouterTracking />
{children} {children}
@@ -58,7 +63,7 @@ export default async function RootLayout({
<CookieBotConsent /> <CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider> </TrpcProvider>
</ServerIntlProvider> </ClientIntlProvider>
</SessionProvider> </SessionProvider>
</body> </body>
</html> </html>

7
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
View File

@@ -14,8 +14,6 @@ import { getIntl } from "@/i18n"
import { SASModal } from "../components/SASModal" import { SASModal } from "../components/SASModal"
import type { FormatXMLElementFn } from "intl-messageformat"
import type { LangParams, PageArgs, SearchParams } from "@/types/params" import type { LangParams, PageArgs, SearchParams } from "@/types/params"
import type { State } from "../sasUtils" import type { State } from "../sasUtils"
@@ -82,10 +80,7 @@ export default async function SASxScandicLoginPage({
</p> </p>
</Typography> </Typography>
<Footnote textAlign="center"> <Footnote textAlign="center">
{intl.formatMessage< {intl.formatMessage(
React.ReactNode,
FormatXMLElementFn<React.ReactNode>
>(
{ {
id: "If you are not redirected automatically, please <loginLink>click here</loginLink>.", id: "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
}, },

15
apps/scandic-web/app/[lang]/(partner)/layout.tsx
View File

@@ -6,6 +6,7 @@ import "@scandic-hotels/design-system/style.css"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools" import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script" import Script from "next/script"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server" import { env } from "@/env/server"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
@@ -16,8 +17,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript" import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking" import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n" import { getMessages } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params" import type { LangParams, LayoutArgs } from "@/types/params"
@@ -31,7 +32,7 @@ export default async function RootLayout({
} }
setLang(params.lang) setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl() const messages = await getMessages(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -51,7 +52,11 @@ export default async function RootLayout({
`}</Script> `}</Script>
</head> </head>
<body className="scandic"> <body className="scandic">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider> <TrpcProvider>
<RouterTracking /> <RouterTracking />
{children} {children}
@@ -61,7 +66,7 @@ export default async function RootLayout({
<CookieBotConsent /> <CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider> </TrpcProvider>
</ServerIntlProvider> </ClientIntlProvider>
</body> </body>
</html> </html>
) )

15
apps/scandic-web/app/[lang]/webview/layout.tsx
View File

@@ -5,14 +5,15 @@ import "@scandic-hotels/design-system/style.css"
import Script from "next/script" import Script from "next/script"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
import { ToastHandler } from "@/components/TempDesignSystem/Toasts" import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript" import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking" import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n" import { getMessages } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import styles from "./layout.module.css" import styles from "./layout.module.css"
@@ -30,7 +31,7 @@ export default async function RootLayout({
params, params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) { }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang) setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl() const messages = await getMessages(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -42,13 +43,17 @@ export default async function RootLayout({
`}</Script> `}</Script>
</head> </head>
<body className={styles.layout}> <body className={styles.layout}>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider> <TrpcProvider>
<RouterTracking /> <RouterTracking />
{children} {children}
<ToastHandler /> <ToastHandler />
</TrpcProvider> </TrpcProvider>
</ServerIntlProvider> </ClientIntlProvider>
</body> </body>
</html> </html>
) )

7
apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -12,8 +12,6 @@ import SectionWrapper from "../SectionWrapper"
import styles from "./loyaltyLevels.module.css" import styles from "./loyaltyLevels.module.css"
import type { FormatXMLElementFn } from "intl-messageformat"
import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent" import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
import type { LevelCardProps } from "@/types/components/overviewTable" import type { LevelCardProps } from "@/types/components/overviewTable"
@@ -44,10 +42,7 @@ async function LevelCard({ level }: LevelCardProps) {
) )
if (level.required_nights) { if (level.required_nights) {
pointsMsg = intl.formatMessage< pointsMsg = intl.formatMessage(
React.ReactNode,
FormatXMLElementFn<React.ReactNode>
>(
{ {
id: "{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>", id: "{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>",
}, },

20
apps/scandic-web/i18n/Provider.tsx
View File

@@ -2,11 +2,21 @@
import { IntlProvider } from "react-intl" import { IntlProvider } from "react-intl"
import type { ServerIntlProviderProps } from "@/types/i18n" import type { ClientIntlProviderProps } from "@/types/i18n"
export default function ServerIntlProvider({ export default function ClientIntlProvider({
children, children,
intl, locale,
}: ServerIntlProviderProps) { defaultLocale,
return <IntlProvider {...intl}>{children}</IntlProvider> messages,
}: ClientIntlProviderProps) {
return (
<IntlProvider
locale={locale}
defaultLocale={defaultLocale}
messages={messages}
>
{children}
</IntlProvider>
)
} }

42
apps/scandic-web/i18n/index.ts
View File

@@ -1,32 +1,36 @@
import "server-only" import "server-only"
import { createIntl, createIntlCache } from "@formatjs/intl" import { createIntl, createIntlCache } from "@formatjs/intl"
import { headers } from "next/headers"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
import { getLang } from "@/i18n/serverContext"
import type { IntlShape } from "react-intl"
const cache = createIntlCache() const cache = createIntlCache()
export async function initIntl(lang: Lang) { const instances: Partial<Record<Lang, IntlShape>> = {}
return createIntl<React.ReactNode>(
{ export async function getMessages(lang: Lang): Promise<Record<string, string>> {
defaultLocale: Lang.en, return (await import(`./dictionaries/${lang}.json`)).default
locale: lang,
messages: (await import(`./dictionaries/${lang}.json`)).default,
},
cache
)
} }
export async function getIntl(forceLang?: Lang) { export async function getIntl() {
const h = headers() const lang = getLang()
let lang = h.get("x-lang") as Lang
if (!lang) { if (!instances[lang]) {
lang = Lang.en const messages = await getMessages(lang)
instances[lang] = createIntl<React.ReactNode>(
{
defaultLocale: Lang.en,
locale: lang,
messages,
},
cache
)
} }
if (forceLang) { // Exclamation mark can be removed once we update TS to 5.8.2+
return await initIntl(forceLang) return instances[lang]!
}
return await initIntl(lang)
} }

2
apps/scandic-web/server/routers/navigation/mypages/getPrimaryLinks.ts
View File

@@ -19,7 +19,7 @@ export const getPrimaryLinks = cache(
lang: Lang lang: Lang
memberships: Membership[] memberships: Membership[]
}): Promise<MyPagesLink[]> => { }): Promise<MyPagesLink[]> => {
const intl = await getIntl(lang) const intl = await getIntl()
const showSASLink = isScandicXSASActive(memberships) const showSASLink = isScandicXSASActive(memberships)
const [showTeamMemberLink] = await safeTry(showTeamMemberCard()) const [showTeamMemberLink] = await safeTry(showTeamMemberCard())

6
apps/scandic-web/types/i18n.ts
View File

@@ -1,5 +1,5 @@
import type { IntlConfig } from "react-intl" import type { IntlConfig } from "react-intl"
export type ServerIntlProviderProps = React.PropsWithChildren<{ export type ClientIntlProviderProps = React.PropsWithChildren<
intl: IntlConfig Pick<IntlConfig, "defaultLocale" | "locale" | "messages">
}> >