feat: improve structure and error handling

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/benefits/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/benefits/page.tsx

@@ -1,17 +0,0 @@
-import { benefits } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function BenefitsBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = benefits[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/overview/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/overview/page.tsx

@@ -1,17 +0,0 @@
-import { overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function OverviewBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = overview[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/profile/[...catchAll]/page.tsx

@@ -1,17 +0,0 @@
-import { profile } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function ProfileBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = profile[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/profile/page.tsx

@@ -1,17 +0,0 @@
-import { profile } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function ProfileBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = profile[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/stays/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/bypass/@breadcrumbs/stays/page.tsx

@@ -1,17 +0,0 @@
-import { stays } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function StaysBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = stays[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

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

@@ -1,26 +0,0 @@
-import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
-import Header from "@/components/MyPages/Header"
-import Sidebar from "@/components/MyPages/Sidebar"
-
-import styles from "./layout.module.css"
-
-import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
-
-export default async function MyPagesLayout({
-  breadcrumbs,
-  children,
-  params,
-}: React.PropsWithChildren<MyPagesLayoutProps>) {
-  return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
-      <Header lang={params.lang} />
-      {breadcrumbs}
-      <div className={styles.content}>
-        <Sidebar lang={params.lang} />
-        {children}
-      </div>
-    </div>
-  )
-}

app/[lang]/(live)/(protected)/bypass/page.tsx

@@ -1,7 +0,0 @@
-import { auth } from "@/auth"
-
-export default async function ByPass() {
-  const session = await auth()
-
-  return <pre>{JSON.stringify(session, null, 2)}</pre>
-}

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

@@ -17,5 +17,5 @@ export default async function ProtectedLayout({
     redirect(`/${params.lang}/login`)
   }
 
-  return <>{children}</>
+  return children
 }

app/[lang]/(live)/(protected)/logout/route.ts

@@ -11,7 +11,6 @@ export async function GET(request: NextRequest) {
   // If all else fails, always redirect to startpage
   const redirectTo =
     returnUrl ||
-    request.headers.get("x-redirect-to") ||
     request.nextUrl.searchParams.get("redirectTo") ||
     "/"
 

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

@@ -13,25 +13,14 @@ import type { LangParams, PageArgs } from "@/types/params"
 export default async function MyPages({
   params,
 }: PageArgs<LangParams & { path: string[] }>) {
-  const baseUrl = myPages[params.lang].replace(`/${params.lang}`, "")
-  const pathUrl = params.path.join("/")
-
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: `${baseUrl}/${pathUrl}`,
-    lang: params.lang,
-  })
-
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href: `${baseUrl}/${pathUrl}`,
-    locale: params.lang,
-  })
+  const accountPage = await serverClient().contentstack.accountPage.get()
 
   return (
     <>
-      <Breadcrumbs breadcrumbs={breadcrumbs} />
+      <Breadcrumbs />
 
       <div className={styles.content}>
-        <Sidebar lang={params.lang} />
+        <Sidebar />
         <MaxWidth className={styles.blocks} tag="main">
           {accountPage.content.length ? (
             <Content lang={params.lang} content={accountPage.content} />

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

@@ -6,26 +6,13 @@
   position: relative;
 }
 
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding: 1.6rem;
-}
-
 @media screen and (min-width: 950px) {
   .content {
-    gap: 2.7rem;
-    grid-template-columns: 30rem 1fr;
+    gap: 10rem;
+    grid-template-columns: 25rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;
     padding-top: 5.8rem;
   }
-
-  .blocks {
-    gap: 6.4rem;
-    padding-left: 0;
-    padding-right: 0;
-    grid-column: 2 / -1;
-  }
 }

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

@@ -0,0 +1,21 @@
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import Sidebar from "@/components/MyPages/Sidebar"
+
+import styles from "./layout.module.css"
+
+import { LangParams, LayoutArgs, UriParams } from "@/types/params"
+
+export default async function MyPagesURILayout({
+  children,
+}: React.PropsWithChildren<LayoutArgs<LangParams & UriParams>>) {
+  return (
+    <>
+      <Breadcrumbs />
+
+      <div className={styles.content}>
+        <Sidebar />
+        {children}
+      </div>
+    </>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/_constants.ts

@@ -1,16 +0,0 @@
-export const breadcrumbs = {
-  "/my-pages": [
-    {
-      title: "My Pages",
-    },
-  ],
-  "/my-pages/profile": [
-    {
-      href: "/my-pages",
-      title: "My Pages",
-    },
-    {
-      title: "My Profile",
-    },
-  ],
-}

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

@@ -1,19 +1,16 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
-import Header from "@/components/MyPages/Header"
 
 import styles from "./layout.module.css"
 
-import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
+import { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function MyPagesLayout({
   children,
-  params,
-}: React.PropsWithChildren<MyPagesLayoutProps>) {
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (
     <div
       className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
     >
-      <Header lang={params.lang} />
       {children}
     </div>
   )

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

@@ -2,9 +2,19 @@ import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 
 import styles from "./layout.module.css"
 
-export default function LoyaltyPagesLayout({
+import {
+  ContentTypeParams,
+  LangParams,
+  LayoutArgs,
+  UIDParams,
+} from "@/types/params"
+
+export default function ContentTypeLayout({
   children,
-}: React.PropsWithChildren) {
+  params,
+}: React.PropsWithChildren<
+  LayoutArgs<LangParams & ContentTypeParams & UIDParams>
+>) {
   return (
     <div
       className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}

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

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+
+import ContentPage from "@/components/ContentType/ContentPage"
+import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
+
+import {
+  ContentTypeParams,
+  LangParams,
+  PageArgs,
+  UIDParams,
+} from "@/types/params"
+
+export default async function ContentTypePage({
+  params,
+}: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
+  switch (params.contentType) {
+    case "loyalty-page":
+      return <LoyaltyPage />
+    case "content-page":
+      return <ContentPage />
+    default:
+      const type: never = params.contentType
+      console.error(`Unsupported content type given: ${type}`)
+      notFound()
+  }
+}

app/[lang]/(live)/(public)/content-page/page.tsx

@@ -1,3 +0,0 @@
-export default async function ContentPage() {
-  return null
-}

app/[lang]/(live)/(public)/login/route.ts

@@ -3,7 +3,7 @@ import { AuthError } from "next-auth"
 
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
-import { badRequest, internalServerError } from "@/server/errors/next"
+import { internalServerError } from "@/server/errors/next"
 
 import { signIn } from "@/auth"
 
@@ -22,17 +22,15 @@ export async function GET(
     // Normal login request from New web
     redirectTo =
       request.cookies.get("redirectTo")?.value || // Cookie gets set by authRequired middleware
-      request.headers.get("x-redirect-to") ||
       request.nextUrl.searchParams.get("redirectTo") ||
-      ""
+      "/"
 
-    // If above fails, always redirect to startpage
-    if (!redirectTo) {
+    // Make relative URL to absolute URL
+    if (redirectTo.startsWith("/")) {
       if (!env.PUBLIC_URL) {
         throw internalServerError("No value for env.PUBLIC_URL")
       }
-      redirectTo = env.PUBLIC_URL
-      console.log({ login_fallback: redirectTo })
+      redirectTo = new URL(redirectTo, env.PUBLIC_URL).href
     }
 
     // Clean up cookie from authRequired middleware
@@ -104,11 +102,11 @@ export async function GET(
     }
   } catch (error) {
     if (error instanceof AuthError) {
-      console.log({ signInAuthError: error })
+      console.error({ signInAuthError: error })
     } else {
-      console.log({ signInError: error })
+      console.error({ signInError: error })
     }
   }
 
-  return badRequest()
+  return internalServerError()
 }

app/[lang]/(live)/(public)/loyalty-page/page.tsx

@@ -1,39 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import { Blocks } from "@/components/Loyalty/Blocks"
-import Sidebar from "@/components/Loyalty/Sidebar"
-import MaxWidth from "@/components/MaxWidth"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function LoyaltyPage({
-  params,
-  searchParams,
-}: PageArgs<LangParams, UriParams>) {
-  try {
-    if (!searchParams.uri) {
-      throw new Error("Bad URI")
-    }
-
-    const loyaltyPage = await serverClient().contentstack.loyaltyPage.get({
-      href: searchParams.uri,
-      locale: params.lang,
-    })
-
-    return (
-      <section className={styles.content}>
-        {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
-
-        <MaxWidth className={styles.blocks} tag="main">
-          {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
-        </MaxWidth>
-      </section>
-    )
-  } catch (err) {
-    return notFound()
-  }
-}

app/[lang]/(live)/error.module.css

@@ -1,7 +1,6 @@
 .layout {
   --header-height: 4.5rem;
 
-  background-color: var(--Brand-Coffee-Subtle);
   display: grid;
   font-family: var(--ff-fira-sans);
   grid-template-rows: var(--header-height) auto 1fr;

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

@@ -0,0 +1,32 @@
+"use client" // Error components must be Client Components
+
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import { findLang } from "@/constants/languages"
+
+import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
+
+import styles from "./error.module.css"
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  const pathname = usePathname()
+  const lang = findLang(pathname)
+
+  return (
+    <div
+      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
+    >
+      <div className={styles.content}>{lang}: Something went wrong!</div>
+    </div>
+  )
+}

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

@@ -2,11 +2,9 @@ import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
 import Script from "next/script"
-import { SessionProvider } from "next-auth/react"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
-import { auth } from "@/auth"
 import AdobeScript from "@/components/Current/AdobeScript"
 import VwoScript from "@/components/Current/VwoScript"
 
@@ -23,7 +21,6 @@ export default async function RootLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  const session = await auth()
   return (
     <html lang={params.lang}>
       <head>
@@ -46,9 +43,7 @@ export default async function RootLayout({
         <VwoScript />
       </head>
       <body>
-        <SessionProvider basePath="/api/web/auth" session={session}>
-          <TrpcProvider>{children}</TrpcProvider>
-        </SessionProvider>
+        <TrpcProvider>{children}</TrpcProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();
         `}</Script>

app/[lang]/(live)/middleware-error/[status]/page.module.css

@@ -0,0 +1,3 @@
+.layout {
+  font-family: var(--ff-fira-sans);
+}

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

@@ -0,0 +1,17 @@
+import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
+
+import styles from "./page.module.css"
+
+import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
+
+export default function MiddlewareError({
+  params,
+}: LayoutArgs<LangParams & StatusParams>) {
+  return (
+    <div
+      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
+    >
+      Middleware Error {params.lang}: {params.status}
+    </div>
+  )
+}

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

@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
     <main>
-      <h2>Not Found</h2>
+      <h1>Not found</h1>
       <p>Could not find requested resource</p>
     </main>
   )

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

@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
     <main>
-      <h2>Not Found</h2>
+      <h1>Not found</h1>
       <p>Could not find requested resource</p>
     </main>
   )

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

@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
     <main>
-      <h2>Not Found</h2>
+      <h1>Not found</h1>
       <p>Could not find requested resource</p>
     </main>
   )

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

@@ -0,0 +1,20 @@
+import {
+  ContentTypeParams,
+  LangParams,
+  PageArgs,
+  UIDParams,
+} from "@/types/params"
+
+export default async function PreviewPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
+  return (
+    <div>
+      <p>
+        Preview for {params.contentType}:{params.uid} in {params.lang} with
+        params <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
+      </p>
+    </div>
+  )
+}

app/[lang]/(preview)/preview/page.tsx

@@ -1,3 +0,0 @@
-export default async function PreviewPage() {
-  return null
-}

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

@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
     <main>
-      <h2>Not Found</h2>
+      <h1>Not found</h1>
       <p>Could not find requested resource</p>
     </main>
   )