Merged in fix/mypages-clientside-menu (pull request #1344)

Fix/mypages clientside menu

* feat: move mypages menu to client side

* Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/mypages-clientside-menu

* wip

* wip

* wip

* refactor: reorganize MyPages navigation logic and improve type definitions

* refactor: enhance MyPagesMobileDropdown with loading states and skeletons

* refactor: clean up header component and improve myPagesNavigation query structure

* Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/mypages-clientside-menu


Approved-by: Linus Flood

components/MyPages/Sidebar/index.tsx

@@ -1,9 +1,6 @@
 import { logout } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
 
-import {
-  getPrimaryLinks,
-  getSecondaryLinks,
-} from "@/components/MyPages/menuItems"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -30,14 +27,13 @@ export default async function SidebarMyPages() {
 }
 
 async function PrimaryLinks() {
-  const lang = getLang()
-  const links = await getPrimaryLinks({ lang })
+  const nav = await serverClient().navigation.myPages({})
 
   return (
     <>
       <Divider color="beige" />
       <ul className={styles.list}>
-        {links.map((link) => (
+        {nav?.primaryLinks.map((link) => (
           <li key={link.href}>
             <Link
               color="burgundy"
@@ -58,14 +54,15 @@ async function PrimaryLinks() {
 
 async function SecondaryLinks() {
   const lang = getLang()
-  const links = await getSecondaryLinks({ lang })
+
+  const nav = await serverClient().navigation.myPages({})
   const intl = await getIntl()
 
   return (
     <>
       <Divider color="beige" />
       <ul className={styles.list}>
-        {links.map((link) => (
+        {nav?.secondaryLinks.map((link) => (
           <li key={link.href}>
             <Link
               color="burgundy"

components/MyPages/menuItems.ts

@@ -1,101 +0,0 @@
-import * as routes from "@/constants/routes/myPages"
-import { env } from "@/env/server"
-
-import { getIntl } from "@/i18n"
-import { safeTry } from "@/utils/safeTry"
-
-import type { ReactNode } from "react"
-
-import type { Lang } from "../../constants/languages"
-
-export type MyPagesLink = {
-  text: ReactNode
-  href: string
-}
-
-type Args = {
-  lang: Lang
-}
-
-export async function getPrimaryLinks({ lang }: Args): Promise<MyPagesLink[]> {
-  const intl = await getIntl()
-  const scandicSasPromise = safeTry(isScandicXSASActive())
-  const teamMemberPromise = safeTry(showTeamMemberCard())
-
-  const [showSASLink] = await scandicSasPromise
-  const [showTeamMemberLink] = await teamMemberPromise
-
-  const menuItems: MyPagesLink[] = [
-    {
-      text: intl.formatMessage({ id: "Overview" }),
-      href: routes.overview[lang],
-    },
-    {
-      text: intl.formatMessage({ id: "My Points" }),
-      href: routes.points[lang],
-    },
-    {
-      text: intl.formatMessage({ id: "My Stays" }),
-      href: routes.stays[lang],
-    },
-    {
-      text: intl.formatMessage({ id: "My Benefits" }),
-      href: routes.benefits[lang],
-    },
-  ]
-
-  if (showSASLink) {
-    menuItems.push({
-      text: intl.formatMessage({ id: "Scandic ♥ SAS" }),
-      href: routes.scandicXSAS[lang],
-    })
-  }
-
-  if (showTeamMemberLink) {
-    menuItems.push({
-      text: intl.formatMessage({ id: "Team Member Card" }),
-      href: "#",
-    })
-  }
-
-  return menuItems
-}
-
-export async function getSecondaryLinks({
-  lang,
-}: Args): Promise<MyPagesLink[]> {
-  const intl = await getIntl()
-  const menuItems: MyPagesLink[] = [
-    {
-      text: intl.formatMessage({ id: "About Scandic Friends" }),
-      href: routes.scandicFriends[lang],
-    },
-    {
-      text: intl.formatMessage({ id: "My Profile" }),
-      href: routes.profile[lang],
-    },
-  ]
-
-  return menuItems
-}
-
-async function isScandicXSASActive() {
-  async function checkIfLinked() {
-    // TODO: Implement this check
-    return true
-  }
-
-  const isLinked = await checkIfLinked()
-
-  return env.SAS_ENABLED && isLinked
-}
-
-async function showTeamMemberCard() {
-  async function getIsTeamMember() {
-    // TODO: Implement this check
-    return false
-  }
-
-  const isTeamMember = await getIsTeamMember()
-  return isTeamMember
-}