feat(SW-184): my pages menu mobile/desktop functionality

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -2,113 +2,54 @@
 
 import { useIntl } from "react-intl"
 
-import { logout } from "@/constants/routes/handleAuth"
-import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon, ChevronDownIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import { ChevronDownIcon } from "@/components/Icons"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 import { getInitials } from "@/utils/user"
 
+import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
-import Avatar from "./Avatar"
+import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
 import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
-// 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 { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
 
-  if (!navigation) {
-    return null
-  }
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isMyPagesMenuOpen) {
+      toggleMyPagesMenu()
+    }
+  })
 
-  return user ? (
+  return (
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <span className={styles.userName}>
+        <Subtitle type="two" className={styles.userName}>
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
-        </span>
+        </Subtitle>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
       </MainMenuButton>
-      <nav
+      <div
         className={`${styles.dropdown} ${isMyPagesMenuOpen ? 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={toggleMyPagesMenu}
-                      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>
+        <MyPagesMenuContent
+          navigation={navigation}
+          user={user}
+          toggleOpenStateFn={toggleMyPagesMenu}
+        />
+      </div>
     </div>
-  ) : (
-    <Link
-      href={myPages[lang]}
-      className={styles.loginLink}
-      aria-label={intl.formatMessage({ id: "Log in/Join" })}
-    >
-      <Avatar />
-      <span className={styles.userName}>
-        {intl.formatMessage({ id: "Log in/Join" })}
-      </span>
-    </Link>
   )
 }