feat(WEB-220): label translations

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -1,11 +1,3 @@
-.content {
-  display: grid;
-  padding-bottom: var(--Spacing-x9);
-  padding-left: var(--Spacing-x0);
-  padding-right: var(--Spacing-x0);
-  position: relative;
-}
-
 .blocks {
   display: grid;
   gap: var(--Spacing-x5);
@@ -14,16 +6,9 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .content {
-    gap: var(--Spacing-x9);
-    grid-template-columns: 25rem 1fr;
-    padding-left: var(--Spacing-x3);
-    padding-right: var(--Spacing-x3);
-  }
-
   .blocks {
     gap: var(--Spacing-x7);
     padding-left: var(--Spacing-x0);
     padding-right: var(--Spacing-x0);
   }
-}
+}

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,8 +1,7 @@
-import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
 import Content from "@/components/MyPages/AccountPage/Content"
-import Sidebar from "@/components/MyPages/Sidebar"
+import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
@@ -12,17 +11,14 @@ export default async function MyPages({
   params,
 }: PageArgs<LangParams & { path: string[] }>) {
   const accountPage = await serverClient().contentstack.accountPage.get()
-
+  const { formatMessage } = await getIntl()
   return (
-    <section className={styles.content}>
-      <Sidebar lang={params.lang} />
-      <main className={styles.blocks}>
-        {accountPage.content.length ? (
-          <Content lang={params.lang} content={accountPage.content} />
-        ) : (
-          <p>{_("No content published")}</p>
-        )}
-      </main>
-    </section>
+    <main className={styles.blocks}>
+      {accountPage.content.length ? (
+        <Content lang={params.lang} content={accountPage.content} />
+      ) : (
+        <p>{formatMessage({ id: "No content published" })}</p>
+      )}
+    </main>
   )
 }

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -8,3 +8,20 @@
   grid-template-rows: auto 1fr;
   min-height: 100dvh;
 }
+
+.content {
+  display: grid;
+  padding-bottom: var(--Spacing-x9);
+  padding-left: var(--Spacing-x0);
+  padding-right: var(--Spacing-x0);
+  position: relative;
+}
+
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Spacing-x9);
+    grid-template-columns: 25rem 1fr;
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
+  }
+}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,3 +1,5 @@
+import Sidebar from "@/components/MyPages/Sidebar"
+
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
@@ -5,13 +7,17 @@ import { LangParams, LayoutArgs } from "@/types/params"
 export default async function MyPagesLayout({
   breadcrumbs,
   children,
+  params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>> & {
   breadcrumbs: React.ReactNode
 }) {
   return (
     <section className={styles.layout}>
       {breadcrumbs}
-      {children}
+      <section className={styles.content}>
+        <Sidebar lang={params.lang} />
+        {children}
+      </section>
     </section>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx

@@ -1,6 +1,7 @@
 "use client"
+import { useIntl } from "react-intl"
+
 import { profile } from "@/constants/routes/myPages"
-import { _ } from "@/lib/translation"
 import { useProfileStore } from "@/stores/edit-profile"
 
 import Button from "@/components/TempDesignSystem/Button"
@@ -9,26 +10,31 @@ import Link from "@/components/TempDesignSystem/Link"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default function EditProfile({ params }: PageArgs<LangParams>) {
+  const { formatMessage } = useIntl()
   const isPending = useProfileStore((store) => store.pending)
   const isValid = useProfileStore((store) => store.valid)
+
+  const cancel = formatMessage({ id: "Cancel" })
+  const save = formatMessage({ id: "Save" })
   return (
     <>
       <Button
-        aria-label="Cancel"
+        aria-label={cancel}
         asChild
         form="edit-profile"
         size="small"
         type="reset"
       >
-        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
+        <Link href={profile[params.lang]}>{cancel}</Link>
       </Button>
       <Button
+        aria-label={save}
         disabled={!isValid || isPending}
         form="edit-profile"
         size="small"
         type="submit"
       >
-        {_("Save")}
+        {save}
       </Button>
     </>
   )

app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx

@@ -1,15 +1,18 @@
 import { profileEdit } from "@/constants/routes/myPages"
-import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default function ProfileView({ params }: PageArgs<LangParams>) {
+export default async function ProfileView({ params }: PageArgs<LangParams>) {
+  const { formatMessage } = await getIntl()
   return (
     <Button asChild size="small">
-      <Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
+      <Link href={profileEdit[params.lang]}>
+        {formatMessage({ id: "Edit" })}
+      </Link>
     </Button>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx

@@ -12,5 +12,5 @@ export default function ContentTypeLayout({
 }: React.PropsWithChildren<
   LayoutArgs<LangParams & ContentTypeParams & UIDParams>
 >) {
-  return <div className={styles.layout}>{children}</div>
+  return <section className={styles.layout}>{children}</section>
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -14,10 +14,10 @@ export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   switch (params.contentType) {
-    case "loyalty-page":
-      return <LoyaltyPage />
     case "content-page":
       return <ContentPage />
+    case "loyalty-page":
+      return <LoyaltyPage />
     default:
       const type: never = params.contentType
       console.error(`Unsupported content type given: ${type}`)

app/[lang]/(live)/error.tsx

@@ -2,6 +2,7 @@
 
 import { useParams, usePathname } from "next/navigation"
 import { useEffect } from "react"
+import { useIntl } from "react-intl"
 
 import { findLang } from "@/constants/languages"
 import { login } from "@/constants/routes/handleAuth"
@@ -16,6 +17,7 @@ export default function Error({
 }: {
   error: Error & { digest?: string }
 }) {
+  const intl = useIntl()
   const params = useParams<LangParams>()
 
   useEffect(() => {
@@ -32,8 +34,12 @@ export default function Error({
   const lang = findLang(pathname)
 
   return (
-    <div className={styles.layout}>
-      <div className={styles.content}>{lang}: Something went wrong!</div>
-    </div>
+    <section
+      className={styles.layout}
+    >
+      <div className={styles.content}>
+        {lang}: {intl.formatMessage({ id: "Something went wrong!" })}
+      </div>
+    </section>
   )
 }

app/[lang]/(live)/layout.tsx

@@ -9,6 +9,8 @@ import AdobeScript from "@/components/Current/AdobeScript"
 import Footer from "@/components/Current/Footer"
 import Header from "@/components/Current/Header"
 import VwoScript from "@/components/Current/VwoScript"
+import { getIntl } from "@/i18n"
+import ServerIntlProvider from "@/i18n/Provider"
 
 import type { Metadata } from "next"
 
@@ -28,6 +30,7 @@ export default async function RootLayout({
     languageSwitcher: React.ReactNode
   }
 >) {
+  const { defaultLocale, locale, messages } = await getIntl()
   return (
     <html lang={params.lang}>
       <head>
@@ -50,11 +53,16 @@ export default async function RootLayout({
         <VwoScript />
       </head>
       <body>
-        <TrpcProvider lang={params.lang}>
-          <Header lang={params.lang} languageSwitcher={languageSwitcher} />
-          {children}
-          <Footer />
-        </TrpcProvider>
+        <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
+          <TrpcProvider lang={params.lang}>
+            <Header
+              lang={params.lang}
+              languageSwitcher={languageSwitcher}
+            />
+            {children}
+            <Footer />
+          </TrpcProvider>
+        </ServerIntlProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();
         `}</Script>

app/[lang]/(live)/not-found.tsx

@@ -1,8 +1,11 @@
-export default function NotFound() {
+import { getIntl } from "@/i18n"
+
+export default async function NotFound() {
+  const { formatMessage } = await getIntl()
   return (
     <main>
-      <h1>Not found</h1>
-      <p>Could not find requested resource</p>
+      <h1>{formatMessage({ id: "Not found" })}</h1>
+      <p>{formatMessage({ id: "Could not find requested resource" })}</p>
     </main>
   )
 }

app/[lang]/(live-current)/layout.tsx

@@ -7,6 +7,8 @@ import Footer from "@/components/Current/Footer"
 import Header from "@/components/Current/Header"
 import LangPopup from "@/components/Current/LangPopup"
 import SkipToMainContent from "@/components/SkipToMainContent"
+import { getIntl } from "@/i18n"
+import ServerIntlProvider from "@/i18n/Provider"
 
 import type { Metadata } from "next"
 
@@ -19,13 +21,14 @@ export const metadata: Metadata = {
   title: "Scandic Hotels New Web",
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
   params,
   languageSwitcher,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & { languageSwitcher: React.ReactNode }
 >) {
+  const { defaultLocale, locale, messages } = await getIntl()
   return (
     <html lang={params.lang}>
       <head>
@@ -78,9 +81,11 @@ export default function RootLayout({
       </head>
       <body className="theme-00Corecolours theme-X0Oldcorecolours">
         <LangPopup lang={params.lang} />
-        <SkipToMainContent lang={params.lang} />
-        <Header lang={params.lang} languageSwitcher={languageSwitcher} />
-        {children}
+        <SkipToMainContent />
+        <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
+          <Header lang={params.lang} languageSwitcher={languageSwitcher} />
+          {children}
+        </ServerIntlProvider>
         <Footer />
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

app/[lang]/(live-current)/not-found.tsx

@@ -1,8 +1,11 @@
-export default function NotFound() {
+import { getIntl } from "@/i18n"
+
+export default async function NotFound() {
+  const { formatMessage } = await getIntl()
   return (
     <main>
-      <h1>Not found</h1>
-      <p>Could not find requested resource</p>
+      <h1>{formatMessage({ id: "Not found" })}</h1>
+      <p>{formatMessage({ id: "Could not find requested resource" })}</p>
     </main>
   )
 }

app/[lang]/(preview-current)/layout.tsx

@@ -51,7 +51,7 @@ export default function RootLayout({
       <body>
         <InitLivePreview />
         <LangPopup lang={params.lang} />
-        <SkipToMainContent lang={params.lang} />
+        <SkipToMainContent />
         {children}
         <Footer />
       </body>