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

Merged in feature/refactor-lang (pull request #387)

Browse Source 
feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg
This commit is contained in:
Niclas Edenvin
2024-08-14 11:00:20 +00:00
parent 35128dbf44
commit e67212bd94
94 changed files with 378 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/[lang]/(live)/(protected)/layout.tsx
View File

@@ -5,13 +5,11 @@ import { overview } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import { auth } from "@/auth"
import type { LangParams, LayoutArgs } from "@/types/params"
import { getLang } from "@/i18n/serverContext"
export default async function ProtectedLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
}: React.PropsWithChildren) {
const session = await auth()
/**
* Fallback to make sure every route nested in the
@@ -19,16 +17,16 @@ export default async function ProtectedLayout({
*/
const h = headers()
const redirectTo = encodeURIComponent(
h.get("x-url") ?? h.get("x-pathname") ?? overview[params.lang]
h.get("x-url") ?? h.get("x-pathname") ?? overview[getLang()]
)
if (!session) {
redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
}
const user = await serverClient().user.get()
if (!user || "error" in user) {
redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
}
return children

7
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
View File

@@ -1,5 +1,10 @@
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
setLang(params.lang)
export default function AllBreadcrumbs() {
return <Breadcrumbs />
}

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

@@ -4,6 +4,7 @@ import Content from "@/components/MyPages/AccountPage/Content"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
@@ -12,6 +13,8 @@ import type { LangParams, PageArgs } from "@/types/params"
export default async function MyPages({
params,
}: PageArgs<LangParams & { path: string[] }>) {
setLang(params.lang)
const accountPageRes = await serverClient().contentstack.accountPage.get()
const { formatMessage } = await getIntl()
@@ -26,7 +29,7 @@ export default async function MyPages({
<main className={styles.blocks}>
<Title>{accountPage.heading}</Title>
{accountPage.content.length ? (
<Content lang={params.lang} content={accountPage.content} />
<Content content={accountPage.content} />
) : (
<p>{formatMessage({ id: "No content published" })}</p>
)}

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

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

9
app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
View File

@@ -3,10 +3,17 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
export default async function CommunicationSlot() {
import { LangParams, PageArgs } from "@/types/params"
export default async function CommunicationSlot({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>

6
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
View File

@@ -7,10 +7,14 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
export default async function CreditCardSlot() {
import { LangParams, PageArgs } from "@/types/params"
export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const { formatMessage } = await getIntl()
const creditCards = await serverClient().user.creditCards()

8
app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
View File

@@ -5,10 +5,16 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
export default async function MembershipCardSlot() {
import { LangParams, PageArgs } from "@/types/params"
export default async function MembershipCardSlot({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
const { formatMessage } = await getIntl()
const membershipCards = await serverClient().user.membershipCards()

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

@@ -1,8 +1,15 @@
import { serverClient } from "@/lib/trpc/server"
import Form from "@/components/Forms/Edit/Profile"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function EditProfileSlot({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
export default async function EditProfileSlot() {
const user = await serverClient().user.get({ mask: false })
if (!user || "error" in user) {
return null

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

@@ -16,12 +16,14 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang, setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import type { LangParams, PageArgs } from "@/types/params"
import { LangParams, PageArgs } from "@/types/params"
export default async function Profile({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const { formatMessage } = await getIntl()
const user = await serverClient().user.get()
if (!user || "error" in user) {
@@ -40,7 +42,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
</Title>
</hgroup>
<Button asChild intent="primary" size="small" theme="base">
<Link color="none" href={profileEdit[params.lang]}>
<Link color="none" href={profileEdit[getLang()]}>
{formatMessage({ id: "Edit profile" })}
</Link>
</Button>

6
app/[lang]/(live)/(protected)/my-pages/profile/page.tsx
View File

@@ -3,8 +3,12 @@ import "./profileLayout.css"
import { serverClient } from "@/lib/trpc/server"
import TrackingSDK from "@/components/TrackingSDK"
import { setLang } from "@/i18n/serverContext"
export default async function ProfilePage() {
import { LangParams, PageArgs } from "@/types/params"
export default async function ProfilePage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const accountPage = await serverClient().contentstack.accountPage.get()
if (!accountPage) {

7
app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
View File

@@ -1,5 +1,10 @@
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
setLang(params.lang)
export default function PageBreadcrumbs() {
return <Breadcrumbs />
}

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

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
import ContentPage from "@/components/ContentType/ContentPage"
import HotelPage from "@/components/ContentType/HotelPage/HotelPage"
import LoyaltyPage from "@/components/ContentType/LoyaltyPage/LoyaltyPage"
import { setLang } from "@/i18n/serverContext"
import {
ContentTypeParams,
@@ -14,13 +15,15 @@ import {
export default async function ContentTypePage({
params,
}: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
setLang(params.lang)
switch (params.contentType) {
case "content-page":
return <ContentPage />
case "loyalty-page":
return <LoyaltyPage lang={params.lang} />
return <LoyaltyPage />
case "hotel-page":
return <HotelPage lang={params.lang} />
return <HotelPage />
default:
const type: never = params.contentType
console.error(`Unsupported content type given: ${type}`)

4
app/[lang]/(live)/(public)/hotelreservation/page.tsx
View File

@@ -1,5 +1,9 @@
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
return null
}

4
app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
View File

@@ -6,6 +6,7 @@ import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang, setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
@@ -15,10 +16,11 @@ export default async function SelectHotelPage({
params,
}: PageArgs<LangParams>) {
const intl = await getIntl()
setLang(params.lang)
const { attributes } = await serverClient().hotel.getHotel({
hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
language: params.lang,
language: getLang(),
})
const hotels = [attributes]

5
app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
View File

@@ -5,16 +5,19 @@ import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection"
import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import { getLang, setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import { LangParams, PageArgs } from "@/types/params"
export default async function SelectRate({ params }: PageArgs<LangParams>) {
setLang(params.lang)
// TODO: pass the correct hotel ID
const { attributes: hotel } = await serverClient().hotel.getHotel({
hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
language: params.lang,
language: getLang(),
})
const rooms = await serverClient().hotel.getRates({
// TODO: pass the correct hotel ID and all other parameters that should be included in the search

7
app/[lang]/(live)/@header/[...paths]/@languageSwitcher/error.tsx
View File

@@ -1,14 +1,9 @@
"use client"
import { useParams } from "next/navigation"
import { baseUrls } from "@/constants/routes/baseUrls"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { LangParams } from "@/types/params"
export default function Error() {
const params = useParams<LangParams>()
return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
return <LanguageSwitcher urls={baseUrls} />
}

11
app/[lang]/(live)/@header/[...paths]/@languageSwitcher/page.tsx
View File

@@ -1,11 +1,18 @@
import { serverClient } from "@/lib/trpc/server"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function LanguageSwitcherRoute({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
export default async function LanguageSwitcherRoute() {
const data = await serverClient().contentstack.languageSwitcher.get()
if (!data) {
return null
}
return <LanguageSwitcher urls={data.urls} lang={data.lang} />
return <LanguageSwitcher urls={data.urls} />
}

4
app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx
View File

@@ -1,13 +1,15 @@
import { serverClient } from "@/lib/trpc/server"
import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function MyPagesMobileDropdownPage({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
const navigation = await serverClient().contentstack.myPages.navigation.get()
if (!navigation) return null
return <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
return <MyPagesMobileDropdown navigation={navigation} />
}

6
app/[lang]/(live)/@header/[...paths]/layout.tsx
View File

@@ -1,17 +1,13 @@
import Header from "@/components/Current/Header"
import { LangParams, PageArgs } from "@/types/params"
export default function HeaderLayout({
params,
languageSwitcher,
myPagesMobileDropdown,
}: PageArgs<LangParams> & {
}: {
languageSwitcher: React.ReactNode
} & { myPagesMobileDropdown: React.ReactNode }) {
return (
<Header
lang={params.lang}
myPagesMobileDropdown={myPagesMobileDropdown}
languageSwitcher={languageSwitcher}
/>

10
app/[lang]/(live)/@header/page.tsx
View File

@@ -4,18 +4,18 @@ import { serverClient } from "@/lib/trpc/server"
import Header from "@/components/Current/Header"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function HeaderPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const navigation = await serverClient().contentstack.myPages.navigation.get()
return (
<Header
lang={params.lang}
myPagesMobileDropdown={
<MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
}
languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
myPagesMobileDropdown={<MyPagesMobileDropdown navigation={navigation} />}
languageSwitcher={<LanguageSwitcher urls={baseUrls} />}
/>
)
}

8
app/[lang]/(live)/layout.tsx
View File

@@ -11,6 +11,7 @@ import VwoScript from "@/components/Current/VwoScript"
import { preloadUserTracking } from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getLang, setLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -30,11 +31,12 @@ export default async function RootLayout({
header: React.ReactNode
}
>) {
setLang(params.lang)
preloadUserTracking()
const { defaultLocale, locale, messages } = await getIntl()
return (
<html lang={params.lang}>
<html lang={getLang()}>
<head>
<AdobeSDKScript />
<Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
@@ -53,10 +55,10 @@ export default async function RootLayout({
</head>
<body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider lang={params.lang}>
<TrpcProvider>
{header}
{children}
<Footer lang={params.lang} />
<Footer />
</TrpcProvider>
</ServerIntlProvider>
</body>

7
app/[lang]/(live)/middleware-error/404/page.tsx
View File

@@ -1,11 +1,10 @@
import { Lang } from "@/constants/languages"
import NotFound from "@/components/Current/NotFound"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default function NotFoundPage({ params }: PageArgs<LangParams>) {
const lang = params.lang || Lang.en
setLang(params.lang)
return <NotFound lang={lang} />
return <NotFound />
}

6
app/[lang]/(live)/middleware-error/[status]/page.tsx
View File

@@ -1,3 +1,5 @@
import { getLang, setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
@@ -5,9 +7,11 @@ import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
export default function MiddlewareError({
params,
}: LayoutArgs<LangParams & StatusParams>) {
setLang(params.lang)
return (
<div className={styles.layout}>
Middleware Error {params.lang}: {params.status}
Middleware Error {getLang()}: {params.status}
</div>
)
}

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

@@ -1,6 +1,10 @@
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
export default async function NotFound() {
import { LangParams, PageArgs } from "@/types/params"
export default async function NotFound({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const { formatMessage } = await getIntl()
return (
<main>

11
app/[lang]/(live-current)/@languageSwitcher/current-content-page/page.tsx
View File

@@ -1,11 +1,18 @@
import { serverClient } from "@/lib/trpc/server"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function LanguageSwitcherRoute({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
export default async function LanguageSwitcherRoute() {
const data = await serverClient().contentstack.languageSwitcher.get()
if (!data) {
return null
}
return <LanguageSwitcher urls={data.urls} lang={data.lang} />
return <LanguageSwitcher urls={data.urls} />
}

7
app/[lang]/(live-current)/@languageSwitcher/error.tsx
View File

@@ -1,14 +1,9 @@
"use client"
import { useParams } from "next/navigation"
import { baseUrls } from "@/constants/routes/baseUrls"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { LangParams } from "@/types/params"
export default function Error() {
const params = useParams<LangParams>()
return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
return <LanguageSwitcher urls={baseUrls} />
}

5
app/[lang]/(live-current)/@myPagesMobileDropdown/current-content-page/page.tsx
View File

@@ -1,15 +1,18 @@
import { serverClient } from "@/lib/trpc/server"
import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function MyPagesMobileDropdownPage({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
const navigation = await serverClient().contentstack.myPages.navigation.get()
if (!navigation) {
return null
}
return <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
return <MyPagesMobileDropdown navigation={navigation} />
}

7
app/[lang]/(live-current)/@myPagesMobileDropdown/error.tsx
View File

@@ -1,12 +1,7 @@
"use client"
import { useParams } from "next/navigation"
import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
import { LangParams } from "@/types/params"
export default function Error() {
const params = useParams<LangParams>()
return <MyPagesMobileDropdown navigation={null} lang={params.lang} />
return <MyPagesMobileDropdown navigation={null} />
}

9
app/[lang]/(live-current)/current-content-page/page.tsx
View File

@@ -6,6 +6,7 @@ import { request } from "@/lib/graphql/request"
import ContentPage from "@/components/Current/ContentPage"
import Tracking from "@/components/Current/Tracking"
import { getLang, setLang } from "@/i18n/serverContext"
import type { LangParams, PageArgs, UriParams } from "@/types/params"
import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -15,6 +16,8 @@ export default async function CurrentContentPage({
params,
searchParams,
}: PageArgs<LangParams, UriParams>) {
setLang(params.lang)
try {
if (!searchParams.uri) {
throw new Error("Bad URI")
@@ -23,10 +26,10 @@ export default async function CurrentContentPage({
const response = await request<GetCurrentBlockPageData>(
GetCurrentBlockPage,
{
locale: params.lang,
locale: getLang(),
url: searchParams.uri,
},
{ tags: [`${searchParams.uri}-${params.lang}`] }
{ tags: [`${searchParams.uri}-${getLang()}`] }
)
if (!response.data?.all_current_blocks_page?.total) {
@@ -46,7 +49,7 @@ export default async function CurrentContentPage({
const pageData = response.data.all_current_blocks_page.items[0]
const trackingData = {
lang: params.lang,
lang: getLang(),
publishedDate: pageData.system.updated_at,
createdDate: pageData.system.created_at,
pageId: pageData.system.uid,

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

@@ -10,6 +10,7 @@ import LangPopup from "@/components/Current/LangPopup"
import SkipToMainContent from "@/components/SkipToMainContent"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getLang, setLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -31,9 +32,11 @@ export default async function RootLayout({
myPagesMobileDropdown: React.ReactNode
}
>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
return (
<html lang={params.lang}>
<html lang={getLang()}>
<head>
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/core.css" />
@@ -44,7 +47,7 @@ export default async function RootLayout({
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
data-culture={getLang()}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
/>
@@ -60,16 +63,15 @@ export default async function RootLayout({
/>
</head>
<body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup lang={params.lang} />
<LangPopup />
<SkipToMainContent />
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<Header
lang={params.lang}
myPagesMobileDropdown={myPagesMobileDropdown}
languageSwitcher={languageSwitcher}
/>
{children}
<Footer lang={params.lang} />
<Footer />
</ServerIntlProvider>
<Script id="page-tracking">{`
typeof _satellite !== "undefined" && _satellite.pageBottom();

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

@@ -1,13 +1,5 @@
"use client"
import { useParams } from "next/navigation"
import NotFound from "@/components/Current/NotFound"
import { LangParams } from "@/types/params"
export default function NotFoundPage() {
const { lang } = useParams<LangParams>()
return <NotFound lang={lang} />
return <NotFound />
}

5
app/[lang]/(preview)/layout.tsx
View File

@@ -1,4 +1,5 @@
import InitLivePreview from "@/components/Current/LivePreview"
import { getLang, setLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -13,8 +14,10 @@ export default function RootLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang)
return (
<html lang={params.lang}>
<html lang={getLang()}>
<body>
<InitLivePreview />
{children}

8
app/[lang]/(preview)/preview/[contentType]/[uid]/page.tsx
View File

@@ -1,3 +1,5 @@
import { getLang, setLang } from "@/i18n/serverContext"
import {
ContentTypeParams,
LangParams,
@@ -9,11 +11,13 @@ export default async function PreviewPage({
params,
searchParams,
}: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
setLang(params.lang)
return (
<div>
<p>
Preview for {params.contentType}:{params.uid} in {params.lang} with
params <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
Preview for {params.contentType}:{params.uid} in {getLang()} with params{" "}
<pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
</p>
</div>
)

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

@@ -4,6 +4,7 @@ import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"
import InitLivePreview from "@/components/Current/LivePreview"
import SkipToMainContent from "@/components/SkipToMainContent"
import { getLang, setLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -20,8 +21,10 @@ export default function RootLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang)
return (
<html lang={params.lang}>
<html lang={getLang()}>
<head>
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/core.css" />
@@ -30,10 +33,10 @@ export default function RootLayout({
</head>
<body>
<InitLivePreview />
<LangPopup lang={params.lang} />
<LangPopup />
<SkipToMainContent />
{children}
<Footer lang={params.lang} />
<Footer />
</body>
</html>
)

8
app/[lang]/(preview-current)/preview-current/page.tsx
View File

@@ -5,14 +5,18 @@ import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphq
import ContentPage from "@/components/Current/ContentPage"
import LoadingSpinner from "@/components/Current/LoadingSpinner"
import { getLang, setLang } from "@/i18n/serverContext"
import type { LangParams, PageArgs, PreviewParams } from "@/types/params"
import type { PageArgs, PreviewParams } from "@/types/params"
import { LangParams } from "@/types/params"
import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
export default async function CurrentPreviewPage({
params,
searchParams,
}: PageArgs<LangParams, PreviewParams>) {
setLang(params.lang)
try {
ContentstackLivePreview.setConfigFromParams(searchParams)
@@ -22,7 +26,7 @@ export default async function CurrentPreviewPage({
const response = await previewRequest<GetCurrentBlockPageData>(
GetCurrentBlockPage,
{ locale: params.lang, url: searchParams.uri }
{ locale: getLang(), url: searchParams.uri }
)
if (!response.data?.all_current_blocks_page?.total) {

8
app/[lang]/webview/[contentType]/[uid]/page.tsx
View File

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
import AccountPage from "@/components/ContentType/Webviews/AccountPage"
import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage"
import { getLang, setLang } from "@/i18n/serverContext"
import {
ContentTypeWebviewParams,
@@ -15,6 +16,7 @@ import {
export default async function ContentTypePage({
params,
}: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
setLang(params.lang)
const user = await serverClient().user.get()
if (!user) {
@@ -26,15 +28,15 @@ export default async function ContentTypePage({
case "unauthorized": // fall through
case "forbidden": // fall through
case "token_expired":
redirect(`/${params.lang}/webview/refresh`)
redirect(`/${getLang()}/webview/refresh`)
}
}
switch (params.contentType) {
case "loyalty-page":
return <LoyaltyPage lang={params.lang} />
return <LoyaltyPage />
case "account-page":
return <AccountPage lang={params.lang} />
return <AccountPage />
default:
const type: never = params.contentType
console.error(`Unsupported content type given: ${type}`)

7
app/[lang]/webview/layout.tsx
View File

@@ -8,6 +8,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getLang, setLang } from "@/i18n/serverContext"
import styles from "./layout.module.css"
@@ -23,9 +24,11 @@ export default async function RootLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
return (
<html lang={params.lang}>
<html lang={getLang()}>
<head>
<AdobeSDKScript />
<Script id="ensure-adobeDataLayer">{`
@@ -34,7 +37,7 @@ export default async function RootLayout({
</head>
<body className={styles.layout}>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider lang={params.lang}>{children}</TrpcProvider>
<TrpcProvider>{children}</TrpcProvider>
</ServerIntlProvider>
</body>
</html>

7
app/[lang]/webview/refresh/page.tsx
View File

@@ -1,8 +1,13 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
export default function Refresh() {
import { LangParams, PageArgs } from "@/types/params"
export default function Refresh({ params }: PageArgs<LangParams>) {
setLang(params.lang)
return (
<div className={styles.container}>
<LoadingSpinner />

8
components/ContentType/HotelPage/HotelPage.tsx
View File

@@ -1,5 +1,7 @@
import { serverClient } from "@/lib/trpc/server"
import { getLang } from "@/i18n/serverContext"
import AmenitiesList from "./AmenitiesList"
import IntroSection from "./IntroSection"
import { Rooms } from "./Rooms"
@@ -7,9 +9,7 @@ import TabNavigation from "./TabNavigation"
import styles from "./hotelPage.module.css"
import type { LangParams } from "@/types/params"
export default async function HotelPage({ lang }: LangParams) {
export default async function HotelPage() {
const hotelPageIdentifierData =
await serverClient().contentstack.hotelPage.get()
@@ -19,7 +19,7 @@ export default async function HotelPage({ lang }: LangParams) {
const { attributes, roomCategories } = await serverClient().hotel.getHotel({
hotelId: hotelPageIdentifierData.hotel_page_id,
language: lang,
language: getLang(),
include: ["RoomCategories"],
})

10
components/ContentType/LoyaltyPage/LoyaltyPage.tsx
View File

@@ -8,9 +8,7 @@ import TrackingSDK from "@/components/TrackingSDK"
import styles from "./loyaltyPage.module.css"
import type { LangParams } from "@/types/params"
export default async function LoyaltyPage({ lang }: LangParams) {
export default async function LoyaltyPage() {
const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
if (!loyaltyPageRes) {
@@ -23,14 +21,12 @@ export default async function LoyaltyPage({ lang }: LangParams) {
<>
<section className={styles.content}>
{loyaltyPage.sidebar.length ? (
<Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
<Sidebar blocks={loyaltyPage.sidebar} />
) : null}
<MaxWidth className={styles.blocks} tag="main">
<Title>{loyaltyPage.heading}</Title>
{loyaltyPage.blocks ? (
<Blocks blocks={loyaltyPage.blocks} lang={lang} />
) : null}
{loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
</MaxWidth>
</section>

12
components/ContentType/Webviews/AccountPage.tsx
View File

@@ -8,12 +8,11 @@ import MaxWidth from "@/components/MaxWidth"
import Content from "@/components/MyPages/AccountPage/Webview/Content"
import TrackingSDK from "@/components/TrackingSDK"
import LinkToOverview from "@/components/Webviews/LinkToOverview"
import { getLang } from "@/i18n/serverContext"
import styles from "./accountPage.module.css"
import { LangParams } from "@/types/params"
export default async function MyPages({ lang }: LangParams) {
export default async function MyPages() {
const accountPageRes = await serverClient().contentstack.accountPage.get()
if (!accountPageRes) {
@@ -22,13 +21,14 @@ export default async function MyPages({ lang }: LangParams) {
const { tracking, accountPage } = accountPageRes
const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]
const linkToOverview =
`/${getLang()}/webview${accountPage.url}` !== overview[getLang()]
return (
<>
<MaxWidth className={styles.blocks} tag="main">
{linkToOverview ? <LinkToOverview lang={lang} /> : null}
<Content lang={lang} content={accountPage.content} />
{linkToOverview ? <LinkToOverview /> : null}
<Content content={accountPage.content} />
</MaxWidth>
<TrackingSDK pageData={tracking} />

8
components/ContentType/Webviews/LoyaltyPage.tsx
View File

@@ -8,9 +8,7 @@ import LinkToOverview from "@/components/Webviews/LinkToOverview"
import styles from "./loyaltyPage.module.css"
import { LangParams } from "@/types/params"
export default async function AboutScandicFriends({ lang }: LangParams) {
export default async function AboutScandicFriends() {
const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
if (!loyaltyPageRes) {
@@ -21,10 +19,10 @@ export default async function AboutScandicFriends({ lang }: LangParams) {
return (
<>
<section className={styles.content}>
<LinkToOverview lang={lang} />
<LinkToOverview />
<MaxWidth tag="main" className={styles.blocks}>
<Title>{loyaltyPage.heading}</Title>
<Blocks blocks={loyaltyPage.blocks} lang={lang} />
<Blocks blocks={loyaltyPage.blocks} />
</MaxWidth>
</section>

9
components/Current/Footer/index.tsx
View File

@@ -1,15 +1,16 @@
import { serverClient } from "@/lib/trpc/server"
import Image from "@/components/Image"
import { getLang } from "@/i18n/serverContext"
import Navigation from "./Navigation"
import styles from "./footer.module.css"
import { LangParams } from "@/types/params"
export default async function Footer({ lang }: LangParams) {
const footerData = await serverClient().contentstack.base.footer({ lang })
export default async function Footer() {
const footerData = await serverClient().contentstack.base.footer({
lang: getLang(),
})
if (!footerData) {
return null
}

7
components/Current/Header/LanguageSwitcher/Desktop/index.tsx
View File

@@ -4,15 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react"
import { Lang, languages } from "@/constants/languages"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import styles from "./desktop.module.css"
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Desktop({
currentLanguage,
urls,
}: LanguageSwitcherProps) {
export default function Desktop({ urls }: LanguageSwitcherProps) {
const currentLanguage = useLang()
const [isOpen, setIsOpen] = useState(false)
const divRef = useRef<HTMLDivElement>(null)

8
components/Current/Header/LanguageSwitcher/Mobile/index.tsx
View File

@@ -3,14 +3,14 @@ import { useState } from "react"
import { Lang, languages } from "@/constants/languages"
import useLang from "@/hooks/useLang"
import styles from "./mobile.module.css"
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Mobile({
currentLanguage,
urls,
}: LanguageSwitcherProps) {
export default function Mobile({ urls }: LanguageSwitcherProps) {
const currentLanguage = useLang()
const [isOpen, setIsOpen] = useState(false)
function toggleOpen() {

12
components/Current/Header/LanguageSwitcher/index.tsx
View File

@@ -1,19 +1,15 @@
import Desktop from "./Desktop"
import Mobile from "./Mobile"
import { LangParams } from "@/types/params"
import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
type LanguageSwitcherProps = { urls: LanguageSwitcherData }
export default function LanguageSwitcher({
urls,
lang,
}: LanguageSwitcherProps) {
export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
return (
<>
<Desktop currentLanguage={lang} urls={urls} />
<Mobile currentLanguage={lang} urls={urls} />
<Desktop urls={urls} />
<Mobile urls={urls} />
</>
)
}

18
components/Current/Header/LoginButton.tsx
View File

@@ -7,26 +7,24 @@ import { login } from "@/constants/routes/handleAuth"
import Link from "@/components/TempDesignSystem/Link"
import { LinkProps } from "@/components/TempDesignSystem/Link/link"
import useLang from "@/hooks/useLang"
import { trackLoginClick } from "@/utils/tracking"
import { TrackingPosition } from "@/types/components/tracking"
import { LangParams } from "@/types/params"
export default function LoginButton({
className,
position,
trackingId,
lang,
children,
color = "black",
}: PropsWithChildren<
LangParams & {
className: string
trackingId: string
position: TrackingPosition
color?: LinkProps["color"]
}
>) {
}: PropsWithChildren<{
className: string
trackingId: string
position: TrackingPosition
color?: LinkProps["color"]
}>) {
const lang = useLang()
const pathName = usePathname()
useEffect(() => {

4
components/Current/Header/MainMenu/index.tsx
View File

@@ -8,6 +8,7 @@ import useDropdownStore from "@/stores/main-menu"
import Image from "@/components/Image"
import Avatar from "@/components/MyPages/Avatar"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { trackClick } from "@/utils/tracking"
import BookingButton from "../BookingButton"
@@ -27,9 +28,9 @@ export function MainMenu({
myPagesMobileDropdown,
bookingHref,
user,
lang,
}: MainMenuProps) {
const intl = useIntl()
const lang = useLang()
const {
isHamburgerMenuOpen,
@@ -111,7 +112,6 @@ export function MainMenu({
position="hamburger menu"
trackingId="loginStartHamburgerMenu"
className={styles.mobileLinkButton}
lang={lang}
>
{intl.formatMessage({ id: "Log in" })}
</LoginButton>

5
components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -2,7 +2,6 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
import { logout } from "@/constants/routes/handleAuth"
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
import useDropdownStore from "@/stores/main-menu"
@@ -10,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
import styles from "./my-pages-mobile-dropdown.module.css"
@@ -17,12 +17,11 @@ type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
export default function MyPagesMobileDropdown({
navigation,
lang,
}: {
navigation: Navigation
lang: Lang | null
}) {
const { formatMessage } = useIntl()
const lang = useLang()
const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
useDropdownStore()

7
components/Current/Header/TopMenu/index.tsx
View File

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import LoginButton from "../LoginButton"
@@ -19,7 +20,6 @@ export default async function TopMenu({
homeHref,
links,
languageSwitcher,
lang,
}: TopMenuProps) {
const { formatMessage } = await getIntl()
const user = await serverClient().user.name()
@@ -47,7 +47,7 @@ export default async function TopMenu({
<>
{user ? (
<Link
href={logout[lang]}
href={logout[getLang()]}
className={styles.sessionLink}
prefetch={false}
>
@@ -56,7 +56,7 @@ export default async function TopMenu({
) : null}
<div className={styles.loginSeparator} />
<Link
href={logout[lang]}
href={logout[getLang()]}
className={styles.sessionLink}
prefetch={false}
>
@@ -68,7 +68,6 @@ export default async function TopMenu({
position="hamburger menu"
trackingId="loginStartTopMeny"
className={`${styles.sessionLink} ${styles.loginLink}`}
lang={lang}
>
{formatMessage({ id: "Log in" })}
</LoginButton>

13
components/Current/Header/index.tsx
View File

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
import { auth } from "@/auth"
import { BookingWidget } from "@/components/BookingWidget"
import { getLang } from "@/i18n/serverContext"
import { MainMenu } from "./MainMenu"
import OfflineBanner from "./OfflineBanner"
@@ -11,17 +12,15 @@ import TopMenu from "./TopMenu"
import styles from "./header.module.css"
import { LangParams } from "@/types/params"
export default async function Header({
lang,
languageSwitcher,
myPagesMobileDropdown,
}: LangParams & { languageSwitcher: React.ReactNode } & {
}: {
languageSwitcher: React.ReactNode
myPagesMobileDropdown: React.ReactNode
}) {
const data = await serverClient().contentstack.base.header({
lang,
lang: getLang(),
})
const user = await serverClient().user.name()
@@ -35,7 +34,7 @@ export default async function Header({
return null
}
const homeHref = homeHrefs[env.NODE_ENV][lang]
const homeHref = homeHrefs[env.NODE_ENV][getLang()]
const { frontpage_link_text, logo, menu, top_menu } = data
const topMenuMobileLinks = top_menu.links
@@ -50,7 +49,6 @@ export default async function Header({
homeHref={homeHref}
links={top_menu.links}
languageSwitcher={languageSwitcher}
lang={lang}
/>
<MainMenu
frontpageLinkText={frontpage_link_text}
@@ -62,7 +60,6 @@ export default async function Header({
myPagesMobileDropdown={myPagesMobileDropdown}
bookingHref={homeHref}
user={user}
lang={lang}
/>
{hideBookingWidget ? null : <BookingWidget />}
</header>

6
components/Current/LangPopup/index.tsx
View File

@@ -2,7 +2,9 @@ import { headers } from "next/headers"
import { Lang, localeToLang } from "@/constants/languages"
export default function LangPopup({ lang }: { lang: Lang }) {
import { getLang } from "@/i18n/serverContext"
export default function LangPopup() {
const headersList = headers()
const preferedLang = headersList.get("Accept-Language") ?? ""
@@ -14,7 +16,7 @@ export default function LangPopup({ lang }: { lang: Lang }) {
const langOfChoice: Lang = localeToLang[preferedLang as Lang]
if (langOfChoice === lang) {
if (langOfChoice === getLang()) {
return null
}

8
components/Current/NotFound/index.tsx
View File

@@ -1,11 +1,11 @@
import { getLang } from "@/i18n/serverContext"
import { texts } from "./Texts"
import styles from "./notFound.module.css"
import { LangParams } from "@/types/params"
export default function NotFound({ lang }: LangParams) {
const infoTexts = texts[lang]
export default function NotFound() {
const infoTexts = texts[getLang()]
return (
<div className={styles.container}>
<div className={styles.content}>

6
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -8,6 +8,7 @@ import { membershipLevels } from "@/constants/membershipLevels"
import Image from "@/components/Image"
import Select from "@/components/TempDesignSystem/Select"
import useLang from "@/hooks/useLang"
import { getMembership } from "@/utils/user"
import DA from "./data/DA.json"
@@ -33,7 +34,6 @@ import {
OverviewTableProps,
OverviewTableReducerAction,
} from "@/types/components/loyalty/blocks"
import { LangParams } from "@/types/params"
import type { User } from "@/types/user"
const levelsTranslations = {
@@ -127,9 +127,9 @@ function reducer(state: any, action: OverviewTableReducerAction) {
export default function OverviewTable({
activeMembership,
lang,
}: OverviewTableProps & LangParams) {
}: OverviewTableProps) {
const intl = useIntl()
const lang = useLang()
const levelsData = levelsTranslations[lang]
const [selectionState, dispatch] = useReducer(
reducer,

13
components/Loyalty/Blocks/DynamicContent/index.tsx
View File

@@ -17,12 +17,8 @@ import type {
DynamicContentProps,
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
import { LangParams } from "@/types/params"
async function DynamicComponentBlock({
component,
lang,
}: DynamicComponentProps & LangParams) {
async function DynamicComponentBlock({ component }: DynamicComponentProps) {
const membershipLevel = await serverClient().user.membershipLevel()
switch (component) {
case LoyaltyComponentEnum.how_it_works:
@@ -30,7 +26,7 @@ async function DynamicComponentBlock({
case LoyaltyComponentEnum.loyalty_levels:
return <LoyaltyLevels />
case LoyaltyComponentEnum.overview_table:
return <OverviewTable activeMembership={membershipLevel} lang={lang} />
return <OverviewTable activeMembership={membershipLevel} />
default:
return null
}
@@ -39,8 +35,7 @@ async function DynamicComponentBlock({
export default function DynamicContent({
dynamicContent,
firstItem,
lang,
}: DynamicContentProps & LangParams) {
}: DynamicContentProps) {
const displayHeader = !!(
dynamicContent.link ||
dynamicContent.subtitle ||
@@ -63,7 +58,7 @@ export default function DynamicContent({
topTitle={firstItem}
/>
) : null}
<DynamicComponentBlock component={dynamicContent.component} lang={lang} />
<DynamicComponentBlock component={dynamicContent.component} />
{displayHeader && (
<SectionLink link={dynamicContent.link} variant="mobile" />
)}

12
components/Loyalty/Blocks/WebView/index.tsx
View File

@@ -1,15 +1,15 @@
import JsonToHtml from "@/components/JsonToHtml"
import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import { getLang } from "@/i18n/serverContext"
import { modWebviewLink } from "@/utils/webviews"
import CardsGrid from "../CardsGrid"
import type { BlocksProps } from "@/types/components/loyalty/blocks"
import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
import { LangParams } from "@/types/params"
export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
export function Blocks({ blocks }: BlocksProps) {
return blocks.map((block, idx) => {
const firstItem = idx === 0
switch (block.__typename) {
@@ -35,7 +35,10 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
link: block.dynamic_content.link
? {
...block.dynamic_content.link,
href: modWebviewLink(block.dynamic_content.link.href, lang),
href: modWebviewLink(
block.dynamic_content.link.href,
getLang()
),
}
: undefined,
}
@@ -45,13 +48,12 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
dynamicContent={dynamicContent}
firstItem={firstItem}
key={`${block.dynamic_content.title}-${idx}`}
lang={lang}
/>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
...shortcut,
url: modWebviewLink(shortcut.url, lang),
url: modWebviewLink(shortcut.url, getLang()),
}))
return (
<Shortcuts

4
components/Loyalty/Blocks/index.tsx
View File

@@ -6,9 +6,8 @@ import CardsGrid from "./CardsGrid"
import type { BlocksProps } from "@/types/components/loyalty/blocks"
import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
import { LangParams } from "@/types/params"
export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
export function Blocks({ blocks }: BlocksProps) {
return blocks.map((block, idx) => {
const firstItem = idx === 0
switch (block.__typename) {
@@ -27,7 +26,6 @@ export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
dynamicContent={block.dynamic_content}
firstItem={firstItem}
key={`${block.dynamic_content.title}-${idx}`}
lang={lang}
/>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:

5
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -14,12 +14,10 @@ import Contact from "./Contact"
import styles from "./joinLoyalty.module.css"
import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
import { LangParams } from "@/types/params"
export default async function JoinLoyaltyContact({
block,
lang,
}: JoinLoyaltyContactProps & LangParams) {
}: JoinLoyaltyContactProps) {
const { formatMessage } = await getIntl()
const user = await serverClient().user.name()
@@ -55,7 +53,6 @@ export default async function JoinLoyaltyContact({
<Body>{formatMessage({ id: "Already a friend?" })}</Body>
<LoginButton
className={styles.link}
lang={lang}
trackingId="loginJoinLoyalty"
position="join scandic friends sidebar"
color="burgundy"

14
components/Loyalty/Sidebar/index.tsx
View File

@@ -10,12 +10,8 @@ import {
SidebarTypenameEnum,
} from "@/types/components/loyalty/enums"
import { SidebarProps } from "@/types/components/loyalty/sidebar"
import { LangParams } from "@/types/params"
export default function SidebarLoyalty({
blocks,
lang,
}: SidebarProps & LangParams) {
export default function SidebarLoyalty({ blocks }: SidebarProps) {
return (
<aside className={styles.aside}>
{blocks.map((block, idx) => {
@@ -37,18 +33,12 @@ export default function SidebarLoyalty({
<JoinLoyaltyContact
block={block.join_loyalty_contact}
key={`${block.__typename}-${idx}`}
lang={lang}
/>
)
case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent:
switch (block.dynamic_content.component) {
case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
return (
<SidebarMyPages
key={`${block.__typename}-${idx}`}
lang={lang}
/>
)
return <SidebarMyPages key={`${block.__typename}-${idx}`} />
default:
return null
}

6
components/MyPages/AccountPage/Content.tsx
View File

@@ -7,6 +7,7 @@ import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
import { getLang } from "@/i18n/serverContext"
import { removeMultipleSlashes } from "@/utils/url"
import PointsOverview from "../Blocks/Points/Overview"
@@ -47,7 +48,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
}
}
export default function Content({ lang, content }: ContentProps) {
export default function Content({ content }: ContentProps) {
return content.map((item, idx) => {
switch (item.__typename) {
case ContentEntries.AccountPageContentDynamicContent:
@@ -57,14 +58,13 @@ export default function Content({ lang, content }: ContentProps) {
item.dynamic_content.link.linkConnection.edges[0].node
.original_url ||
removeMultipleSlashes(
`/${lang}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
`/${getLang()}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
),
text: item.dynamic_content.link.link_text,
}
: null
const componentProps = {
lang,
title: item.dynamic_content.title,
// TODO: rename preamble to subtitle in Contentstack?
subtitle: item.dynamic_content.preamble,

6
components/MyPages/AccountPage/Webview/Content.tsx
View File

@@ -1,6 +1,7 @@
import JsonToHtml from "@/components/JsonToHtml"
import Overview from "@/components/MyPages/Blocks/Overview"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import { getLang } from "@/i18n/serverContext"
import { removeMultipleSlashes } from "@/utils/url"
import { modWebviewLink } from "@/utils/webviews"
@@ -39,7 +40,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
}
}
export default function Content({ lang, content }: ContentProps) {
export default function Content({ content }: ContentProps) {
return (
<>
{content.map((item, idx) => {
@@ -62,7 +63,6 @@ export default function Content({ lang, content }: ContentProps) {
: null
const componentProps = {
lang,
title: item.dynamic_content.title,
// TODO: rename preamble to subtitle in Contentstack?
subtitle: item.dynamic_content.preamble,
@@ -79,7 +79,7 @@ export default function Content({ lang, content }: ContentProps) {
const shortcuts = item.shortcuts.shortcuts.map((shortcut) => {
return {
...shortcut,
url: modWebviewLink(shortcut.url, lang),
url: modWebviewLink(shortcut.url, getLang()),
}
})
return (

7
components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
View File

@@ -6,20 +6,19 @@ import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getLang } from "@/i18n/serverContext"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
import { getMembership } from "@/utils/user"
import styles from "./current.module.css"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import type { LangParams } from "@/types/params"
export default async function CurrentBenefitsBlock({
title,
subtitle,
link,
lang,
}: AccountPageComponentProps & LangParams) {
}: AccountPageComponentProps) {
const user = await serverClient().user.get()
// TAKE NOTE: we need clarification on how benefits stack from different levels
// in order to determine if a benefit is specific to a level or if it is a cumulative benefit
@@ -35,7 +34,7 @@ export default async function CurrentBenefitsBlock({
const currentLevel = getMembershipLevelObject(
user.memberships[0].membershipLevel as MembershipLevelEnum,
lang
getLang()
)
if (!currentLevel) {
// TODO: handle this case?

4
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

@@ -11,6 +11,7 @@ import Grids from "@/components/TempDesignSystem/Grids"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
import styles from "./next.module.css"
@@ -20,7 +21,6 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
export default async function NextLevelBenefitsBlock({
title,
subtitle,
lang,
link,
}: AccountPageComponentProps) {
const { formatMessage } = await getIntl()
@@ -30,7 +30,7 @@ export default async function NextLevelBenefitsBlock({
}
const nextLevel = getMembershipLevelObject(
user.memberships[0].nextLevel as MembershipLevelEnum,
lang
getLang()
)
if (!nextLevel) {
// TODO: handle this case, when missing or when user is top level?

6
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -1,5 +1,6 @@
import { MembershipLevelEnum } from "@/constants/membershipLevels"
import { getLang } from "@/i18n/serverContext"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
import { getMembership } from "@/utils/user"
@@ -7,13 +8,12 @@ import PointsContainer from "./Container"
import { NextLevelPointsColumn, YourPointsColumn } from "./PointsColumn"
import { UserProps } from "@/types/components/myPages/user"
import { LangParams } from "@/types/params"
export default async function Points({ user, lang }: UserProps & LangParams) {
export default async function Points({ user }: UserProps) {
const membership = getMembership(user.memberships)
const nextLevel = getMembershipLevelObject(
membership?.nextLevel as MembershipLevelEnum,
lang
getLang()
)
return (

5
components/MyPages/Blocks/Overview/Stats/index.tsx
View File

@@ -6,12 +6,11 @@ import Points from "./Points"
import styles from "./stats.module.css"
import type { UserProps } from "@/types/components/myPages/user"
import type { LangParams } from "@/types/params"
export default function Stats({ user, lang }: UserProps & LangParams) {
export default function Stats({ user }: UserProps) {
return (
<section className={styles.stats}>
<Points user={user} lang={lang} />
<Points user={user} />
<Divider variant="default" color="pale" />
<ExpiringPoints user={user} />
</section>

7
components/MyPages/Blocks/Overview/index.tsx
View File

@@ -4,6 +4,7 @@ import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Divider from "@/components/TempDesignSystem/Divider"
import { getLang } from "@/i18n/serverContext"
import Hero from "./Friend/Hero"
import Friend from "./Friend"
@@ -12,14 +13,12 @@ import Stats from "./Stats"
import styles from "./overview.module.css"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import type { LangParams } from "@/types/params"
export default async function Overview({
link,
subtitle,
title,
lang,
}: AccountPageComponentProps & LangParams) {
}: AccountPageComponentProps) {
const user = await serverClient().user.get()
if (!user || "error" in user) {
return null
@@ -31,7 +30,7 @@ export default async function Overview({
<Hero color="red">
<Friend user={user} color="burgundy" />
<Divider className={styles.divider} color="peach" />
<Stats user={user} lang={lang} />
<Stats user={user} />
</Hero>
<SectionLink link={link} variant="mobile" />
</SectionContainer>

9
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx
View File

@@ -1,6 +1,7 @@
import { dt } from "@/lib/dt"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import AwardPoints from "./AwardPoints"
@@ -8,15 +9,17 @@ import styles from "./row.module.css"
import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
export default async function Row({ transaction, lang }: RowProps) {
export default async function Row({ transaction }: RowProps) {
const { formatMessage } = await getIntl()
const description =
transaction.hotelName && transaction.city
? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
: `${transaction.nights} ${formatMessage({ id: "nights" })}`
const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
const arrival = dt(transaction.checkinDate)
.locale(getLang())
.format("DD MMM YYYY")
const departure = dt(transaction.checkoutDate)
.locale(lang)
.locale(getLang())
.format("DD MMM YYYY")
return (
<tr className={styles.tr}>

3
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
View File

@@ -15,7 +15,7 @@ const tableHeadings = [
"Points",
]
export default async function DesktopTable({ lang, transactions }: TableProps) {
export default async function DesktopTable({ transactions }: TableProps) {
const { formatMessage } = await getIntl()
return (
<div className={styles.container}>
@@ -35,7 +35,6 @@ export default async function DesktopTable({ lang, transactions }: TableProps) {
<tbody>
{transactions.map((transaction) => (
<Row
lang={lang}
key={transaction.confirmationNumber}
transaction={transaction}
/>

5
components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx
View File

@@ -3,12 +3,13 @@ import { dt } from "@/lib/dt"
import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./mobile.module.css"
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
export default async function MobileTable({ lang, transactions }: TableProps) {
export default async function MobileTable({ transactions }: TableProps) {
const { formatMessage } = await getIntl()
return (
<div className={styles.container}>
@@ -32,7 +33,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
<td className={`${styles.td} ${styles.transactionDetails}`}>
<span className={styles.transactionDate}>
{dt(transaction.checkinDate)
.locale(lang)
.locale(getLang())
.format("DD MMM YYYY")}
</span>
{transaction.hotelName && transaction.city ? (

5
components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
View File

@@ -10,7 +10,6 @@ import MobileTable from "./Mobile"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default async function EarnAndBurn({
lang,
link,
subtitle,
title,
@@ -23,8 +22,8 @@ export default async function EarnAndBurn({
return (
<SectionContainer>
<SectionHeader title={title} link={link} subtitle={subtitle} />
<MobileTable lang={lang} transactions={transactions.data} />
<DesktopTable lang={lang} transactions={transactions.data} />
<MobileTable transactions={transactions.data} />
<DesktopTable transactions={transactions.data} />
<SectionLink link={link} variant="mobile" />
</SectionContainer>
)

6
components/MyPages/Blocks/Points/Overview/index.tsx
View File

@@ -12,14 +12,12 @@ import Stats from "../../Overview/Stats"
import styles from "./overview.module.css"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import type { LangParams } from "@/types/params"
export default async function PointsOverview({
link,
subtitle,
title,
lang,
}: AccountPageComponentProps & LangParams) {
}: AccountPageComponentProps) {
const user = await serverClient().user.get()
if (!user || "error" in user) {
return null
@@ -31,7 +29,7 @@ export default async function PointsOverview({
<Hero color="burgundy">
<Friend user={user} color="red" />
<Divider className={styles.divider} color="peach" />
<Stats user={user} lang={lang} />
<Stats user={user} />
</Hero>
<SectionLink link={link} variant="mobile" />
</SectionContainer>

7
components/MyPages/Blocks/Stays/Previous/Client.tsx
View File

@@ -16,7 +16,6 @@ import type {
export default function ClientPreviousStays({
initialPreviousStays,
lang,
}: PreviousStaysClientProps) {
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.user.stays.previous.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientPreviousStays({
<ListContainer>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
lang={lang}
stay={stay}
/>
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
))}
</Grids.Stackable>
{hasNextPage ? (

6
components/MyPages/Blocks/Stays/Previous/index.tsx
View File

@@ -10,7 +10,6 @@ import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default async function PreviousStays({
lang,
title,
subtitle,
link,
@@ -23,10 +22,7 @@ export default async function PreviousStays({
<SectionContainer>
<SectionHeader title={title} subtitle={subtitle} link={link} />
{initialPreviousStays.data.length ? (
<ClientPreviousStays
initialPreviousStays={initialPreviousStays}
lang={lang}
/>
<ClientPreviousStays initialPreviousStays={initialPreviousStays} />
) : (
<EmptyPreviousStaysBlock />
)}

7
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./emptyUpcomingStays.module.css"
import { LangParams } from "@/types/params"
export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
export default async function EmptyUpcomingStaysBlock() {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
</Title>
</div>
<Link
href={homeHrefs[env.NODE_ENV][lang]}
href={homeHrefs[env.NODE_ENV][getLang()]}
className={styles.link}
color="peach80"
>

9
components/MyPages/Blocks/Stays/Soonest/index.tsx
View File

@@ -11,7 +11,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default async function SoonestStays({
lang,
title,
subtitle,
link,
@@ -27,15 +26,11 @@ export default async function SoonestStays({
{response.data.length ? (
<Grids.Stackable>
{response.data.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
lang={lang}
stay={stay}
/>
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
))}
</Grids.Stackable>
) : (
<EmptyUpcomingStaysBlock lang={lang} />
<EmptyUpcomingStaysBlock />
)}
<SectionLink link={link} variant="mobile" />
</SectionContainer>

4
components/MyPages/Blocks/Stays/StayCard/index.tsx
View File

@@ -5,12 +5,14 @@ import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
import styles from "./stay.module.css"
import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
export default function StayCard({ stay, lang }: StayCardProps) {
export default function StayCard({ stay }: StayCardProps) {
const lang = useLang()
const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
stay.attributes

7
components/MyPages/Blocks/Stays/Upcoming/Client.tsx
View File

@@ -16,7 +16,6 @@ import type {
export default function ClientUpcomingStays({
initialUpcomingStays,
lang,
}: UpcomingStaysClientProps) {
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.user.stays.upcoming.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientUpcomingStays({
<ListContainer>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
lang={lang}
stay={stay}
/>
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
))}
</Grids.Stackable>
{hasNextPage ? (

7
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./emptyUpcomingStays.module.css"
import { LangParams } from "@/types/params"
export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
export default async function EmptyUpcomingStaysBlock() {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
</Title>
</div>
<Link
href={homeHrefs[env.NODE_ENV][lang]}
href={homeHrefs[env.NODE_ENV][getLang()]}
className={styles.link}
color="peach80"
>

8
components/MyPages/Blocks/Stays/Upcoming/index.tsx
View File

@@ -10,7 +10,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default async function UpcomingStays({
lang,
title,
subtitle,
link,
@@ -23,12 +22,9 @@ export default async function UpcomingStays({
<SectionContainer>
<SectionHeader title={title} subtitle={subtitle} link={link} />
{initialUpcomingStays.data.length ? (
<ClientUpcomingStays
initialUpcomingStays={initialUpcomingStays}
lang={lang}
/>
<ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
) : (
<EmptyUpcomingStaysBlock lang={lang} />
<EmptyUpcomingStaysBlock />
)}
<SectionLink link={link} variant="mobile" />
</SectionContainer>

7
components/MyPages/Sidebar/index.tsx
View File

@@ -7,12 +7,11 @@ import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./sidebar.module.css"
import type { LangParams } from "@/types/params"
export default async function SidebarMyPages({ lang }: LangParams) {
export default async function SidebarMyPages() {
const navigation = await serverClient().contentstack.myPages.navigation.get()
const { formatMessage } = await getIntl()
if (!navigation) {
@@ -43,7 +42,7 @@ export default async function SidebarMyPages({ lang }: LangParams) {
<li>
<Link
color="burgundy"
href={logout[lang]}
href={logout[getLang()]}
prefetch={false}
size="small"
variant="sidebar"

7
components/Webviews/LinkToOverview/index.tsx
View File

@@ -4,15 +4,14 @@ import { overview } from "@/constants/routes/webviews"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./linkToOverview.module.css"
import type { LangParams } from "@/types/params"
export default async function LinkToOverview({ lang }: LangParams) {
export default async function LinkToOverview() {
const { formatMessage } = await getIntl()
return (
<Link className={styles.overviewLink} href={overview[lang]}>
<Link className={styles.overviewLink} href={overview[getLang()]}>
<ArrowLeft height={20} width={20} />{" "}
{formatMessage({ id: "Go back to overview" })}
</Link>

12
hooks/useLang.ts Normal file
View File

@@ -0,0 +1,12 @@
"use client"
import { useParams } from "next/navigation"
import { LangParams } from "@/types/params"
/**
* A hook to get the current lang from the URL
*/
export default function useLang() {
const { lang } = useParams<LangParams>()
return lang
}

17
i18n/i18n.md Normal file
View File

@@ -0,0 +1,17 @@
# Internationalization
## The `lang` route parameter
All page paths starts with a language parameter, e.g. `/sv/utforska-scandic/wi-fi`.
### Get the language in a client component
We have a hook called `useLang` that directly returns the `lang` parameter from the path.
### Get the language in a server component
In order to not prop drill that all the way from a page we use React's `cache` in a way that resembles React`s context, but on the server side.
For this to work we must set the language with `setLang` on all root layouts and pages, including pages in parallel routes. Then we can use `getLang` in the components where we need the language.
This was inspired by [server-only-context](https://github.com/manvalls/server-only-context)

22
i18n/serverContext.ts Normal file
View File

@@ -0,0 +1,22 @@
import { cache } from "react"
import { Lang } from "@/constants/languages"
const getRef = cache(() => ({ current: Lang.en }))
/**
* Set the language for the current request
*
* It works kind of like React's context,
* but on the server side, per request.
*
* @param newLang
*/
export const setLang = (newLang: Lang) => {
getRef().current = newLang
}
/**
* Get the global language set for the current request
*/
export const getLang = () => getRef().current

10
lib/trpc/Provider.tsx
View File

@@ -14,9 +14,9 @@ import { env } from "@/env/client"
import { SessionExpiredError } from "@/server/errors/trpc"
import { transformer } from "@/server/transformer"
import { trpc } from "./client"
import useLang from "@/hooks/useLang"
import { LangParams } from "@/types/params"
import { trpc } from "./client"
function initializeTrpcClient() {
// Locally we set nextjs to run on port to 3000 so that we always guarantee
@@ -41,10 +41,8 @@ function initializeTrpcClient() {
})
}
export default function TrpcProvider({
children,
lang,
}: React.PropsWithChildren<LangParams>) {
export default function TrpcProvider({ children }: React.PropsWithChildren) {
const lang = useLang()
const [queryClient] = useState(
() =>
new QueryClient({

3
types/components/current/header/mainMenu.ts
View File

@@ -1,5 +1,3 @@
import { Lang } from "@/constants/languages"
import type { Image } from "@/types/image"
import type {
CurrentHeaderLink,
@@ -17,5 +15,4 @@ export type MainMenuProps = {
myPagesMobileDropdown: React.ReactNode | null
bookingHref: string
user: Pick<User, "firstName" | "lastName"> | null
lang: Lang
}

3
types/components/current/header/topMenu.ts
View File

@@ -1,5 +1,3 @@
import { Lang } from "@/constants/languages"
import type { TopMenuHeaderLink } from "@/types/requests/currentHeader"
export type TopMenuProps = {
@@ -7,5 +5,4 @@ export type TopMenuProps = {
homeHref: string
links: TopMenuHeaderLink[]
languageSwitcher: React.ReactNode | null
lang: Lang
}

1
types/components/current/languageSwitcher.ts
View File

@@ -8,6 +8,5 @@ export type LanguageSwitcherLink = {
}
export type LanguageSwitcherProps = {
currentLanguage: Lang
urls: LanguageSwitcherData
}

4
types/components/loyalty/sidebar.ts
View File

@@ -6,11 +6,11 @@ import {
import { LangParams } from "@/types/params"
export type SidebarProps = LangParams & {
export type SidebarProps = {
blocks: Sidebar[]
}
export type JoinLoyaltyContactProps = LangParams & {
export type JoinLoyaltyContactProps = {
block: JoinLoyaltyContact["join_loyalty_contact"]
}

3
types/components/myPages/myPage/accountPage.ts
View File

@@ -9,18 +9,15 @@ export type AccountPageContentProps = {
title: string | null
subtitle: string | null
link?: { href: string; text: string }
lang: Lang
}
}
export type AccountPageComponentProps = {
lang: Lang
title: string | null
subtitle: string | null
link?: { href: string; text: string }
}
export type ContentProps = {
lang: Lang
content: AccountPageContentItem[]
}

2
types/components/myPages/myPage/earnAndBurn.ts
View File

@@ -24,12 +24,10 @@ export type EarnAndBurnProps = {
}
export interface TableProps {
lang: Lang
transactions: Transactions
}
export interface RowProps {
lang: Lang
transaction: Transaction
}

7
types/components/myPages/stays/previous.ts
View File

@@ -6,10 +6,11 @@ export type PreviousStaysResponse = Awaited<
>
export type PreviousStaysNonNullResponseObject =
NonNullable<PreviousStaysResponse>
export type PreviousStays = NonNullable<PreviousStaysNonNullResponseObject>["data"]
export type PreviousStay = NonNullable<PreviousStaysNonNullResponseObject>["data"][number]
export type PreviousStays =
NonNullable<PreviousStaysNonNullResponseObject>["data"]
export type PreviousStay =
NonNullable<PreviousStaysNonNullResponseObject>["data"][number]
export interface PreviousStaysClientProps {
lang: Lang
initialPreviousStays: PreviousStaysNonNullResponseObject
}

2
types/components/myPages/stays/stayCard.ts
View File

@@ -1,7 +1,5 @@
import type { Lang } from "@/constants/languages"
import type { Stay } from "@/server/routers/user/output"
export type StayCardProps = {
lang: Lang
stay: Stay
}

7
types/components/myPages/stays/upcoming.ts
View File

@@ -6,10 +6,11 @@ export type UpcomingStaysResponse = Awaited<
>
export type UpcomingStaysNonNullResponseObject =
NonNullable<UpcomingStaysResponse>
export type UpcomingStays = NonNullable<UpcomingStaysNonNullResponseObject>["data"]
export type UpcomingStay = NonNullable<UpcomingStaysNonNullResponseObject>["data"][number]
export type UpcomingStays =
NonNullable<UpcomingStaysNonNullResponseObject>["data"]
export type UpcomingStay =
NonNullable<UpcomingStaysNonNullResponseObject>["data"][number]
export interface UpcomingStaysClientProps {
lang: Lang
initialUpcomingStays: UpcomingStaysNonNullResponseObject
}