chore(debug): auth

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

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

app/[lang]/(live)/(protected)/my-pages2/@breadcrumbs/benefits/default.tsx

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

app/[lang]/(live)/(protected)/my-pages2/@breadcrumbs/benefits/page.tsx

@@ -0,0 +1,17 @@
+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)/my-pages2/@breadcrumbs/default.tsx

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

app/[lang]/(live)/(protected)/my-pages2/@breadcrumbs/overview/default.tsx

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

app/[lang]/(live)/(protected)/my-pages2/@breadcrumbs/overview/page.tsx

@@ -0,0 +1,17 @@
+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)/my-pages2/@breadcrumbs/profile/[...catchAll]/page.tsx

@@ -0,0 +1,17 @@
+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)/my-pages2/@breadcrumbs/profile/page.tsx

@@ -0,0 +1,17 @@
+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)/my-pages2/@breadcrumbs/stays/default.tsx

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

app/[lang]/(live)/(protected)/my-pages2/@breadcrumbs/stays/page.tsx

@@ -0,0 +1,17 @@
+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)/my-pages2/_constants.ts

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

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

@@ -0,0 +1,27 @@
+.layout {
+  --header-height: 4.5rem;
+
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  grid-template-rows: var(--header-height) auto 1fr;
+  min-height: 100dvh;
+}
+
+.content {
+  display: grid;
+  padding-bottom: 7.7rem;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+@media screen and (min-width: 950px) {
+  .content {
+    gap: 10rem;
+    grid-template-columns: 25rem 1fr;
+    padding-bottom: 17.5rem;
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+    padding-top: 5.8rem;
+  }
+}

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

@@ -0,0 +1,26 @@
+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)/my-pages2/page.module.css

@@ -0,0 +1,15 @@
+.blocks {
+  display: grid;
+  gap: 4.2rem;
+  padding-top: 4rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+@media screen and (min-width: 950px) {
+  .blocks {
+    gap: 6.4rem;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { redirect } from "next/navigation"
+
+import { myPages, overview } from "@/constants/routes/myPages"
+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 MyPages({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  if (!searchParams.uri) {
+    throw new Error("Bad URI")
+  }
+
+  const myPagesRoot = myPages[params.lang].replace(`/${params.lang}`, "")
+  if (searchParams.uri === myPagesRoot) {
+    redirect(overview[params.lang])
+  }
+  const accountPage = await serverClient().contentstack.accountPage.get({
+    url: searchParams.uri,
+    lang: params.lang,
+  })
+
+  return (
+    <MaxWidth className={styles.blocks} tag="main">
+      <Content lang={params.lang} content={accountPage.content} />
+    </MaxWidth>
+  )
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@communication/[...catchAll]/page.tsx

@@ -0,0 +1,5 @@
+import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences"
+
+export default function Communication() {
+  return <CommunicationPreferences />
+}

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

@@ -0,0 +1,5 @@
+import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences"
+
+export default function Communication() {
+  return <CommunicationPreferences />
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@creditCards/[...catchAll]/page.tsx

@@ -0,0 +1,5 @@
+import CreditCards from "@/components/MyProfile/CreditCards"
+
+export default function CreditCardSlot() {
+  return <CreditCards />
+}

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

@@ -0,0 +1,5 @@
+import CreditCards from "@/components/MyProfile/CreditCards"
+
+export default function CreditCardSlot() {
+  return <CreditCards />
+}

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

@@ -0,0 +1,38 @@
+"use client"
+import { profile } from "@/constants/routes/myPages"
+import { _ } from "@/lib/translation"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function EditProfile({ params }: PageArgs<LangParams>) {
+  const isPending = useProfileStore((store) => store.pending)
+  const isValid = useProfileStore((store) => store.valid)
+  return (
+    <>
+      <Button
+        aria-label="Cancel"
+        asChild
+        bgcolor="white"
+        form="edit-profile"
+        size="small"
+        type="reset"
+      >
+        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
+      </Button>
+      <Button
+        bgcolor="quarternary"
+        disabled={!isValid || isPending}
+        form="edit-profile"
+        size="small"
+        type="submit"
+        weight="regular"
+      >
+        {_("Save")}
+      </Button>
+    </>
+  )
+}

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

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

app/[lang]/(live)/(protected)/my-pages2/profile/@membershipCard/[...catchAll]/page.tsx

@@ -0,0 +1,5 @@
+import MembershipCard from "@/components/MyProfile/MembershipCard"
+
+export default function MembershipCardSlot() {
+  return <MembershipCard />
+}

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

@@ -0,0 +1,5 @@
+import MembershipCard from "@/components/MyProfile/MembershipCard"
+
+export default function MembershipCardSlot() {
+  return <MembershipCard />
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@password/[...catchAll]/page.tsx

@@ -0,0 +1,5 @@
+import Password from "@/components/MyProfile/Password"
+
+export default function PasswordSlot() {
+  return <Password />
+}

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

@@ -0,0 +1,5 @@
+import Password from "@/components/MyProfile/Password"
+
+export default function PasswordSlot() {
+  return <Password />
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@profile/default.tsx

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

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

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

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

@@ -0,0 +1,5 @@
+import EditProfile from "@/components/MyProfile/Profile/Edit"
+
+export default function EditProfileSlot() {
+  return <EditProfile />
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@profile/error.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import type { ErrorPage } from "@/types/next/error"
+
+export default function ProfileError({ error }: ErrorPage) {
+  console.error(error)
+  return <h1>Error happened, Profile</h1>
+}

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

@@ -0,0 +1,5 @@
+import Profile from "@/components/MyProfile/Profile"
+
+export default function ProfileInfo() {
+  return <Profile />
+}

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

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

app/[lang]/(live)/(protected)/my-pages2/profile/@view/edit/default.tsx

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

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

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

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

@@ -0,0 +1,15 @@
+import { profileEdit } from "@/constants/routes/myPages"
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function ProfileView({ params }: PageArgs<LangParams>) {
+  return (
+    <Button asChild bgcolor="quarternary" size="small" weight="regular">
+      <Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
+    </Button>
+  )
+}

app/[lang]/(live)/(protected)/my-pages2/profile/@wishes/[...catchAll]/page.tsx

@@ -0,0 +1,5 @@
+import Wishes from "@/components/MyProfile/Wishes"
+
+export default function WishesSlot() {
+  return <Wishes />
+}

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

@@ -0,0 +1,5 @@
+import Wishes from "@/components/MyProfile/Wishes"
+
+export default function WishesSlot() {
+  return <Wishes />
+}

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

@@ -0,0 +1,5 @@
+import "../profileLayout.css"
+
+export default function EditProfilePage() {
+  return null
+}

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

@@ -0,0 +1,33 @@
+import MaxWidth from "@/components/MaxWidth"
+
+import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
+
+export default function ProfileLayout({
+  children,
+  communication,
+  creditCards,
+  edit,
+  membershipCard,
+  password,
+  profile,
+  view,
+  wishes,
+}: React.PropsWithChildren<ProfileLayoutProps>) {
+  return (
+    <MaxWidth className="profile-page" tag="main">
+      <div className="profile-btns">
+        {edit}
+        {view}
+      </div>
+      {profile}
+      {children}
+      <section className="profile-cards">
+        {communication}
+        {wishes}
+        {membershipCard}
+        {creditCards}
+        {password}
+      </section>
+    </MaxWidth>
+  )
+}

app/[lang]/(live)/(protected)/my-pages2/profile/page.tsx

@@ -0,0 +1,5 @@
+import "./profileLayout.css"
+
+export default function ProfilePage() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages2/profile/profileLayout.css

@@ -0,0 +1,27 @@
+/** 
+  * Due to css import issues with parallell routes we are forced to 
+  * use a regular css file and import it in the page.tsx
+  */
+.profile-page {
+  display: grid;
+  gap: 3rem;
+}
+
+.profile-btns {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+  /* Creates the 16px gap from design */
+  top: -1.6rem;
+  /* Moves itself to top of container to avoid calc */
+  transform: translateY(-100%);
+}
+
+.profile-cards {
+  display: grid;
+  gap: 0.4rem;
+  grid-template-columns: 1fr 1fr;
+}

components/MaxWidth/index.tsx

@@ -1,9 +1,6 @@
 "use client"
 import { cva } from "class-variance-authority"
 
-import { Lang } from "@/constants/languages"
-import { trpc } from "@/lib/trpc/client"
-
 import styles from "./maxWidth.module.css"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
@@ -15,10 +12,6 @@ export default function MaxWidth({
   tag = "section",
   ...props
 }: MaxWidthProps) {
-  const d = trpc.contentstack.breadcrumbs.get.useQuery({
-    locale: Lang.en,
-    href: "/my-pages/overview",
-  })
   const Cmp = tag
   return <Cmp className={maxWidthVariants({ className })} {...props} />
 }

constants/routes/myPages.js

@@ -11,7 +11,7 @@
 export const myPages = {
   da: "/da/mine-sider",
   de: "/de/mein-profil",
-  en: "/en/my-pages",
+  en: "/en/my-pages2",
   fi: "/fi/minun-sivujani",
   no: "/no/mine-sider",
   sv: "/sv/mina-sidor",

middlewares/authRequired.ts

@@ -57,7 +57,7 @@ export const middleware = auth(async (request) => {
       searchParams.set("uri", pathNameWithoutLang)
 
       return NextResponse.rewrite(
-        new URL(`/${lang}/my-pages?${searchParams.toString()}`, nextUrl)
+        new URL(`/${lang}/my-pages2?${searchParams.toString()}`, nextUrl)
       )
     }
     return NextResponse.next()

next.config.js

@@ -77,23 +77,23 @@ const nextConfig = {
       beforeFiles: [
         {
           source: benefits.da,
-          destination: "/da/my-pages/benefits",
+          destination: "/da/my-pages2/benefits",
         },
         {
           source: benefits.de,
-          destination: "/de/my-pages/benefits",
+          destination: "/de/my-pages2/benefits",
         },
         {
           source: benefits.fi,
-          destination: "/fi/my-pages/benefits",
+          destination: "/fi/my-pages2/benefits",
         },
         {
           source: benefits.no,
-          destination: "/no/my-pages/benefits",
+          destination: "/no/my-pages2/benefits",
         },
         {
           source: benefits.sv,
-          destination: "/sv/my-pages/benefits",
+          destination: "/sv/my-pages2/benefits",
         },
 
         { source: login.da, destination: "/da/login" },
@@ -102,35 +102,35 @@ const nextConfig = {
         { source: login.no, destination: "/no/login" },
         { source: login.sv, destination: "/sv/login" },
 
-        { source: myPages.da, destination: "/da/my-pages/overview" },
+        { source: myPages.da, destination: "/da/my-pages2/overview" },
-        { source: myPages.de, destination: "/de/my-pages/overview" },
+        { source: myPages.de, destination: "/de/my-pages2/overview" },
-        { source: myPages.fi, destination: "/fi/my-pages/overview" },
+        { source: myPages.fi, destination: "/fi/my-pages2/overview" },
-        { source: myPages.no, destination: "/no/my-pages/overview" },
+        { source: myPages.no, destination: "/no/my-pages2/overview" },
-        { source: myPages.sv, destination: "/sv/my-pages/overview" },
+        { source: myPages.sv, destination: "/sv/my-pages2/overview" },
 
-        { source: overview.da, destination: "/da/my-pages/overview" },
+        { source: overview.da, destination: "/da/my-pages2/overview" },
-        { source: overview.de, destination: "/de/my-pages/overview" },
+        { source: overview.de, destination: "/de/my-pages2/overview" },
-        { source: overview.fi, destination: "/fi/my-pages/overview" },
+        { source: overview.fi, destination: "/fi/my-pages2/overview" },
-        { source: overview.no, destination: "/no/my-pages/overview" },
+        { source: overview.no, destination: "/no/my-pages2/overview" },
-        { source: overview.sv, destination: "/sv/my-pages/overview" },
+        { source: overview.sv, destination: "/sv/my-pages2/overview" },
 
-        { source: profile.da, destination: "/da/my-pages/profile" },
+        { source: profile.da, destination: "/da/my-pages2/profile" },
-        { source: profile.de, destination: "/de/my-pages/profile" },
+        { source: profile.de, destination: "/de/my-pages2/profile" },
-        { source: profile.fi, destination: "/fi/my-pages/profile" },
+        { source: profile.fi, destination: "/fi/my-pages2/profile" },
-        { source: profile.no, destination: "/no/my-pages/profile" },
+        { source: profile.no, destination: "/no/my-pages2/profile" },
-        { source: profile.sv, destination: "/sv/my-pages/profile" },
+        { source: profile.sv, destination: "/sv/my-pages2/profile" },
 
-        { source: profileEdit.da, destination: "/da/my-pages/profile/edit" },
+        { source: profileEdit.da, destination: "/da/my-pages2/profile/edit" },
-        { source: profileEdit.de, destination: "/de/my-pages/profile/edit" },
+        { source: profileEdit.de, destination: "/de/my-pages2/profile/edit" },
-        { source: profileEdit.fi, destination: "/fi/my-pages/profile/edit" },
+        { source: profileEdit.fi, destination: "/fi/my-pages2/profile/edit" },
-        { source: profileEdit.no, destination: "/no/my-pages/profile/edit" },
+        { source: profileEdit.no, destination: "/no/my-pages2/profile/edit" },
-        { source: profileEdit.sv, destination: "/sv/my-pages/profile/edit" },
+        { source: profileEdit.sv, destination: "/sv/my-pages2/profile/edit" },
 
-        { source: stays.da, destination: "/da/my-pages/stays" },
+        { source: stays.da, destination: "/da/my-pages2/stays" },
-        { source: stays.de, destination: "/de/my-pages/stays" },
+        { source: stays.de, destination: "/de/my-pages2/stays" },
-        { source: stays.fi, destination: "/fi/my-pages/stays" },
+        { source: stays.fi, destination: "/fi/my-pages2/stays" },
-        { source: stays.no, destination: "/no/my-pages/stays" },
+        { source: stays.no, destination: "/no/my-pages2/stays" },
-        { source: stays.sv, destination: "/sv/my-pages/stays" },
+        { source: stays.sv, destination: "/sv/my-pages2/stays" },
       ],
     }
   },