feat(WEB-170): edit profile view

components/MyPages/Blocks/UpcomingStays/Stay/index.tsx

@@ -36,7 +36,7 @@ export default function Stay({
         />
       </div>
       <footer className={styles.footer}>
-        <Title as="h4" level="h3" uppercase>
+        <Title as="h5" level="h3" uppercase>
           {hotel}
         </Title>
         <section className={styles.container}>

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link"
 import Stay from "./Stay"
 import Title from "@/components/MyPages/Title"
 
@@ -5,7 +6,6 @@ import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
 import type { StaysProps } from "@/types/components/myPages/myPage/stays"
-import Link from "next/link"
 
 export default function UpcomingStays({
   lang,

components/MyPages/Sidebar/Client.tsx

@@ -1,46 +0,0 @@
-"use client"
-import { usePathname } from "next/navigation"
-
-import Link from "@/components/TempDesignSystem/Link"
-
-import type { LangParams } from "@/types/params"
-
-export default function ClientSidebar({ lang }: LangParams) {
-  const pathname = usePathname()
-  return (
-    <>
-      <Link
-        currentPath={pathname}
-        href={`/${lang}/my-pages`}
-        variant="sidebar"
-      >
-        My Pages
-      </Link>
-      <Link currentPath={pathname} href="#" variant="sidebar">
-        My Stays
-      </Link>
-      <Link currentPath={pathname} href="#" variant="sidebar">
-        My Points
-      </Link>
-      <Link currentPath={pathname} href="#" variant="sidebar">
-        My Benefits
-      </Link>
-      {/* <Link currentPath={pathname} href="#" variant="sidebar">
-          My Challenges
-        </Link>
-        <Link currentPath={pathname} href="#" variant="sidebar">
-          My Favourites
-        </Link> */}
-      <Link currentPath={pathname} href="#" variant="sidebar">
-        About Scandic Friends
-      </Link>
-      <Link
-        currentPath={pathname}
-        href={`/${lang}/my-pages/profile`}
-        variant="sidebar"
-      >
-        My Profile
-      </Link>
-    </>
-  )
-}

components/MyPages/Sidebar/helpers.ts

@@ -0,0 +1,30 @@
+import { PageLinkEnum } from "@/types/requests/myPages/navigation"
+import type {
+  NavigationItem,
+  MenuItem,
+  PageLink,
+} from "@/types/requests/myPages/navigation"
+
+function getURL(node: PageLink) {
+  switch (node.__typename) {
+    case PageLinkEnum.ContentPage:
+      return node.web.url
+    case PageLinkEnum.AccountPage:
+    case PageLinkEnum.LoyaltyPage:
+      return node.url
+  }
+}
+
+export function mapMenuItems(navigationItems: NavigationItem[]) {
+  return navigationItems.map(({ item }): MenuItem => {
+    const { node } = item.pageConnection.edges[0]
+
+    return {
+      linkText: item.link_text || node.title,
+      lang: node.system.locale,
+      subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
+      uid: node.system.uid,
+      url: `/${node.system.locale}/${getURL(node)}`.replaceAll("//+", "/"),
+    }
+  })
+}

components/MyPages/Sidebar/index.tsx

@@ -1,37 +1,51 @@
+import { mapMenuItems } from "./helpers"
+import { request } from "@/lib/graphql/request"
+import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
+
 import { Fragment } from "react"
 import { LogOut } from "react-feather"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
 
+import type { GetNavigationMyPagesData } from "@/types/requests/myPages/navigation"
 import type { SidebarProps } from "@/types/requests/myPages/navigation"
 
-export default function Sidebar({ menuItems }: SidebarProps) {
+export default async function Sidebar({ lang }: SidebarProps) {
+  const response = await request<GetNavigationMyPagesData>(
+    GetNavigationMyPages,
+    {
+      locale: lang,
+    }
+  )
+  // navigation_my_pages is of type Single, hence the hard [0]
+  const navigation = response.data.all_navigation_my_pages.items[0]
+  const menuItems = mapMenuItems(navigation.items)
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         {menuItems.map((item) => (
           <Fragment key={item.uid}>
-            <Link variant={"sidebar"} href={item.url}>
+            <Link href={item.url} variant="sidebar">
               {item.linkText}
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
-                return (
-                  <Link
-                    key={subItem.uid}
-                    href={subItem.url}
-                    variant={"sidebar"}
-                  >
-                    {subItem.linkText}
-                  </Link>
-                )
-              })
+                  return (
+                    <Link
+                      key={subItem.uid}
+                      href={subItem.url}
+                      variant="sidebar"
+                    >
+                      {subItem.linkText}
+                    </Link>
+                  )
+                })
               : null}
           </Fragment>
         ))}
 
-        <Link className={styles.link} href="/api/auth/signout">
+        <Link href="/api/auth/signout" variant="sidebar">
           Log out <LogOut height={16} width={16} />
         </Link>
       </nav>

components/MyPages/Sidebar/sidebar.module.css

@@ -2,6 +2,7 @@
   align-self: flex-start;
   display: none;
   position: sticky;
+  /* Based on header and breadcrumbs height, and gap */
   top: 14.6rem;
 }
 
@@ -17,4 +18,4 @@
   .sidebar {
     display: block;
   }
-}
+}