fix: refactor navigation of webview pages and add redirect to refresh

app/[lang]/webview/about-scandic-friends/page.tsx

@@ -1,26 +0,0 @@
-import "@/app/globals.css"
-import "@scandic-hotels/design-system/style.css"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function AboutScandicFriends({
-  params,
-}: PageArgs<LangParams, UriParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: "/my-pages/overview",
-    lang: params.lang,
-  })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}

app/[lang]/webview/layout.module.css

@@ -1,6 +1,6 @@
 .layout {
   padding-bottom: 7.7rem;
   font-family: var(--ff-fira-sans);
-
+  background-color: var(--Brand-Coffee-Subtle);
   min-height: 100dvh;
 }

app/[lang]/webview/layout.tsx

@@ -1,3 +1,6 @@
+import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"
+
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 
 import styles from "./layout.module.css"

app/[lang]/webview/loyalty-page/page.tsx

@@ -0,0 +1,44 @@
+import { notFound, redirect } 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 AboutScandicFriends({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  if (!searchParams.uri) {
+    return notFound()
+  }
+
+  const loyaltyPage = await serverClient({
+    onError() {
+      const returnUrl = new URLSearchParams({
+        returnurl: `${params.lang}/webview/${searchParams.uri}`,
+      })
+
+      const refreshUrl = `/${params.lang}/webview/refresh?${returnUrl.toString()}`
+      redirect(refreshUrl)
+    },
+  }).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">
+        <Blocks blocks={loyaltyPage.blocks} />
+      </MaxWidth>
+    </section>
+  )
+}

app/[lang]/webview/my-pages/benefits/page.tsx

@@ -1,26 +0,0 @@
-import "@/app/globals.css"
-import "@scandic-hotels/design-system/style.css"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./benefits.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function MyPages({
-  params,
-}: PageArgs<LangParams, UriParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: "/my-pages/benefits",
-    lang: params.lang,
-  })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}

app/[lang]/webview/my-pages/overview/overview.module.css

@@ -1,6 +0,0 @@
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}

app/[lang]/webview/my-pages/overview/page.tsx

@@ -1,26 +0,0 @@
-import "@/app/globals.css"
-import "@scandic-hotels/design-system/style.css"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./overview.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function MyPages({
-  params,
-}: PageArgs<LangParams, UriParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: "/my-pages/overview",
-    lang: params.lang,
-  })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}

app/[lang]/webview/my-pages/page.tsx

@@ -0,0 +1,67 @@
+import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"
+
+import { notFound, redirect } from "next/navigation"
+
+import { Lang } from "@/constants/languages"
+import { overview } from "@/constants/routes/webviews"
+import { _ } from "@/lib/translation"
+import { serverClient } from "@/lib/trpc/server"
+
+import MaxWidth from "@/components/MaxWidth"
+import Content from "@/components/MyPages/AccountPage/Webview/Content"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/Title"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs, UriParams } from "@/types/params"
+
+function getLink(lang: Lang, uri: string) {
+  if (uri === overview[lang]) {
+    return {
+      title: _("Go to points"),
+      href: `/${lang}/webview/my-pages/points`,
+    }
+  } else {
+    return {
+      title: _("Go to membership overview"),
+      href: `/${lang}/webview/my-pages/overview`,
+    }
+  }
+}
+
+export default async function MyPages({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  if (!searchParams.uri) {
+    return notFound()
+  }
+
+  const accountPage = await serverClient({
+    onError() {
+      const returnUrl = new URLSearchParams({
+        returnurl: `${params.lang}/webview/${searchParams.uri}`,
+      })
+
+      const refreshUrl = `/${params.lang}/webview/refresh?${returnUrl.toString()}`
+      redirect(refreshUrl)
+    },
+  }).contentstack.accountPage.get({
+    url: searchParams.uri,
+    lang: params.lang,
+  })
+
+  const link = getLink(params.lang, searchParams.uri)
+
+  return (
+    <MaxWidth className={styles.blocks} tag="main">
+      <header>
+        <Title as="h2">{_("Welcome")}</Title>
+        <Link href={link.href}>{link.title}</Link>
+      </header>
+      <Content lang={params.lang} content={accountPage.content} />
+    </MaxWidth>
+  )
+}

app/[lang]/webview/my-pages/points/page.tsx

@@ -1,27 +0,0 @@
-import "@/app/globals.css"
-import "@scandic-hotels/design-system/style.css"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./points.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function Points({
-  params,
-}: PageArgs<LangParams, UriParams>) {
-  // const accountPage = await serverClient().contentstack.accountPage.get({
-  //   url: "/my-pages/points",
-  //   lang: params.lang,
-  // })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <p>POINTS</p>
-      {/* <Content lang={params.lang} content={accountPage.content} /> */}
-    </MaxWidth>
-  )
-}

app/[lang]/webview/my-pages/points/points.module.css

@@ -1,6 +0,0 @@
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}