chore: cleanup

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -1,24 +1,29 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
-import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon } from "@/components/Icons"
+import { ArrowRightIcon, ChevronDownIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
+import { getInitials } from "@/utils/user"
+
+import MainMenuButton from "../MainMenuButton"
+import Avatar from "./Avatar"
 
 import styles from "./myPagesMenu.module.css"
 
-type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
-export default function MyPagesMenu({
-  navigation,
-}: {
-  navigation: Navigation
-}) {
-  const { formatMessage } = useIntl()
+// This component is mostly the same as MyPagesMobileDropdown, but with a
+// different name and some different styles. Should probably be refactored in
+// a later stage to fit the design from Figma better.
+
+export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
+  const intl = useIntl()
   const lang = useLang()
   const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
     useDropdownStore()
@@ -27,55 +32,79 @@ export default function MyPagesMenu({
     return null
   }
 
-  return (
-    <nav
-      className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
-    >
-      <div className={styles.friendTypeWrapper}>
-        <span className={styles.friendType}>Loyal friend</span>
-        <span className={styles.friendPoints}>12 350 points</span>
-      </div>
-      <ul className={styles.groups}>
-        {navigation.menuItems.map((menuItem, idx) => (
-          <li
-            key={`${menuItem.display_sign_out_link}-${idx}`}
-            id={`${menuItem.display_sign_out_link}-${idx}`}
-            className={styles.group}
-          >
-            <ul className={styles.menuItems}>
-              {menuItem.links.map((link) => (
-                <li key={link.uid}>
-                  <Link
-                    href={link.originalUrl || link.url}
-                    partialMatch
-                    size={menuItem.display_sign_out_link ? "small" : "regular"}
-                    variant="myPageMobileDropdown"
-                    color="burgundy"
-                    onClick={toggleMyPagesMobileMenu}
-                    className={styles.link}
-                  >
-                    {link.linkText}
-                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
-                  </Link>
-                </li>
-              ))}
-              {menuItem.display_sign_out_link && lang ? (
-                <li>
-                  <Link
-                    href={logout[lang]}
-                    prefetch={false}
-                    size="small"
-                    color="burgundy"
-                    variant="myPageMobileDropdown"
-                  >
-                    {formatMessage({ id: "Log out" })}
-                  </Link>
-                </li>
-              ) : null}
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </nav>
+  return user ? (
+    <>
+      <MainMenuButton
+        className={styles.button}
+        onClick={toggleMyPagesMobileMenu}
+      >
+        <Avatar initials={getInitials(user.firstName, user.lastName)} />
+        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <ChevronDownIcon
+          className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+          color="red"
+        />
+      </MainMenuButton>
+      <nav
+        className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+      >
+        {/* TODO: Get information from API/ContentStack, check with design team if this information is needed here. */}
+        <div className={styles.friendTypeWrapper}>
+          <span className={styles.friendType}>Loyal friend</span>
+          <span className={styles.friendPoints}>12 350 points</span>
+        </div>
+
+        <ul className={styles.groups}>
+          {navigation.menuItems.map((menuItem, idx) => (
+            <li
+              key={`${menuItem.display_sign_out_link}-${idx}`}
+              className={styles.group}
+            >
+              <ul className={styles.menuItems}>
+                {menuItem.links.map((link) => (
+                  <li key={link.uid}>
+                    <Link
+                      href={link.originalUrl || link.url}
+                      partialMatch
+                      size={
+                        menuItem.display_sign_out_link ? "small" : "regular"
+                      }
+                      variant="myPageMobileDropdown"
+                      color="burgundy"
+                      onClick={toggleMyPagesMobileMenu}
+                      className={styles.link}
+                    >
+                      {link.linkText}
+                      <ArrowRightIcon
+                        className={styles.arrow}
+                        color="burgundy"
+                      />
+                    </Link>
+                  </li>
+                ))}
+                {menuItem.display_sign_out_link && lang ? (
+                  <li>
+                    <Link
+                      href={logout[lang]}
+                      prefetch={false}
+                      size="small"
+                      color="burgundy"
+                      variant="myPageMobileDropdown"
+                    >
+                      {intl.formatMessage({ id: "Log out" })}
+                    </Link>
+                  </li>
+                ) : null}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  ) : (
+    <Link href={myPages[lang]} className={styles.link}>
+      <Avatar />
+      {intl.formatMessage({ id: "Log in/Join" })}
+    </Link>
   )
 }