Merged in feat/sw-2333-package-and-sas-i18n (pull request #2538)

feat(SW-2333): I18n for multiple apps and packages * Set upp i18n in partner-sas * Adapt lokalise workflow to monorepo * Fix layout props Approved-by: Linus Flood
2025-07-10 07:00:03 +00:00
parent 2c0e8965e2
commit 233c685e52
31 changed files with 48133 additions and 210 deletions
--- a/apps/partner-sas/app/ClientComponent.tsx
+++ b/apps/partner-sas/app/ClientComponent.tsx
@@ -1,9 +1,12 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 "use client"
+import { useIntl } from "react-intl"
+
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { trpc } from "@scandic-hotels/trpc/client"

 export function ClientComponent() {
+  const intl = useIntl()
  const { data, isLoading } = trpc.autocomplete.destinations.useQuery({
    lang: Lang.en,
    includeTypes: ["hotels"],
@@ -15,6 +18,10 @@ export function ClientComponent() {
      <p>client component</p>
      <p>Data: {JSON.stringify(data?.hits?.hotels[0]?.name)}</p>
      <p>Is loading: {isLoading ? "Yes" : "No"}</p>
+      <p>Translated text: </p>
+      {intl.formatMessage({
+        defaultMessage: "All-day breakfast",
+      })}
    </div>
  )
 }
--- a/apps/partner-sas/app/layout.tsx
+++ b/apps/partner-sas/app/layout.tsx
@@ -3,8 +3,13 @@ import "@scandic-hotels/design-system/fonts.css"
 import "@/public/_static/css/design-system-new-deprecated.css"
 import "./globals.css"

+import { Lang } from "@scandic-hotels/common/constants/language"
 import { TrpcProvider } from "@scandic-hotels/trpc/Provider"

+import { getMessages } from "../i18n"
+import ClientIntlProvider from "../i18n/Provider"
+import { setLang } from "../i18n/serverContext"
+
 import type { Metadata } from "next"

 export const metadata: Metadata = {
@@ -12,11 +17,24 @@ export const metadata: Metadata = {
  description: "Generated by create next app",
 }

-export default function RootLayout({
-  children,
-}: Readonly<{
+type LangParams = {
+  lang: Lang
+}
+
+type RootLayoutProps = {
  children: React.ReactNode
-}>) {
+  params: Promise<LangParams>
+}
+
+export default async function RootLayout(props: RootLayoutProps) {
+  // const params = await props.params
+  const params = { lang: Lang.sv }
+
+  const { children } = props
+
+  setLang(params.lang)
+  const messages = await getMessages(params.lang)
+
  return (
    <html lang="en">
      <head>
@@ -26,8 +44,14 @@ export default function RootLayout({
        <link rel="stylesheet" href="/_static/css/scandic.css" />
      </head>
      <body className="scandic">
-        {/* TODO handle onError */}
-        <TrpcProvider>{children}</TrpcProvider>
+        <ClientIntlProvider
+          defaultLocale={Lang.en}
+          locale={params.lang}
+          messages={messages}
+        >
+          {/* TODO handle onError */}
+          <TrpcProvider>{children}</TrpcProvider>
+        </ClientIntlProvider>
      </body>
    </html>
  )
--- a/apps/partner-sas/app/page.tsx
+++ b/apps/partner-sas/app/page.tsx
@@ -4,11 +4,13 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import { serverClient } from "@/lib/trpc"

+import { getIntl } from "../i18n"
 import { ClientComponent } from "./ClientComponent"

 import styles from "./page.module.css"

 export default async function Home() {
+  const intl = await getIntl()
  const caller = await serverClient()
  const destinations = await caller.autocomplete.destinations({
    lang: Lang.en,
@@ -24,6 +26,9 @@ export default async function Home() {
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>hello world with data: {hotel}</p>
        </Typography>
+        <Typography>
+          <p>{intl.formatMessage({ defaultMessage: "Map of the city" })}</p>
+        </Typography>
        <hr />
        <ClientComponent />
        <hr />