Merged in feature/hardcoded-mypages-links (pull request #1325)

Feature/hardcoded mypages links

* feat: wip use hardcoded links

* Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/hardcoded-mypages-links

* feat: use hardcoded links for my pages to support dynamic links

* cleanup

* code fixes

* refactor: restructure MyPagesMobileDropdown component for improved readability

* use util timeout function


Approved-by: Christian Andolf
Approved-by: Linus Flood

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -14,17 +14,19 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./myPagesMenuContent.module.css"
 
-import type { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
+import type { MyPagesMenuProps } from "../MyPagesMenu"
+
+type Props = MyPagesMenuProps & { toggleOpenStateFn: () => void }
 
 export default function MyPagesMenuContent({
   membership,
-  navigation,
+  primaryLinks,
+  secondaryLinks,
   toggleOpenStateFn,
   user,
   membershipLevel,
-}: MyPagesMenuContentProps) {
+}: Props) {
   const intl = useIntl()
-  const lang = useLang()
   const myPagesMenuContentRef = useTrapFocus()
 
   const membershipPoints = membership?.currentPoints
@@ -32,7 +34,8 @@ export default function MyPagesMenuContent({
     membershipLevel && membershipPoints
       ? `${styles.intro}`
       : `${styles.intro} ${styles.noMembership}`
-  if (!navigation) {
+
+  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
     return null
   }
 
@@ -59,40 +62,81 @@ export default function MyPagesMenuContent({
       </div>
 
       <ul className={styles.groups}>
-        {navigation.menuItems.map((menuItem, idx) => (
-          <li key={`${menuItem.display_sign_out_link}-${idx}`}>
-            <Divider color="subtle" className={styles.divider} />
-            <ul className={styles.menuItems}>
-              {menuItem.links.map((link) => (
-                <li key={link.uid}>
-                  <Link
-                    href={link.originalUrl || link.url}
-                    onClick={toggleOpenStateFn}
-                    variant="menu"
-                    weight={menuItem.display_sign_out_link ? undefined : "bold"}
-                    className={styles.link}
-                  >
-                    {link.linkText}
-                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
-                  </Link>
-                </li>
-              ))}
-              {menuItem.display_sign_out_link ? (
-                <li>
-                  <Link
-                    href={logout[lang]}
-                    prefetch={false}
-                    variant="menu"
-                    className={styles.link}
-                  >
-                    {intl.formatMessage({ id: "Log out" })}
-                  </Link>
-                </li>
-              ) : null}
-            </ul>
-          </li>
-        ))}
+        <li>
+          <Divider color="subtle" className={styles.divider} />
+
+          <PrimaryLinks
+            primaryLinks={primaryLinks}
+            toggleOpenStateFn={toggleOpenStateFn}
+          />
+
+          <Divider color="subtle" className={styles.divider} />
+          <SecondaryLinks
+            secondaryLinks={secondaryLinks}
+            toggleOpenStateFn={toggleOpenStateFn}
+          />
+        </li>
       </ul>
     </nav>
   )
 }
+
+function PrimaryLinks({
+  primaryLinks,
+  toggleOpenStateFn,
+}: Pick<Props, "primaryLinks"> & { toggleOpenStateFn: () => void }) {
+  return (
+    <ul className={styles.menuItems}>
+      {primaryLinks.map((link, i) => (
+        <li key={link.href + i}>
+          <Link
+            href={link.href}
+            onClick={toggleOpenStateFn}
+            variant="menu"
+            weight={"bold"}
+            className={styles.link}
+          >
+            {link.text}
+            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function SecondaryLinks({
+  secondaryLinks,
+  toggleOpenStateFn,
+}: Pick<Props, "secondaryLinks"> & { toggleOpenStateFn: () => void }) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <ul className={styles.menuItems}>
+      {secondaryLinks.map((link, i) => (
+        <li key={link.href + i}>
+          <Link
+            href={link.href}
+            onClick={toggleOpenStateFn}
+            variant="menu"
+            className={styles.link}
+          >
+            {link.text}
+            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+          </Link>
+        </li>
+      ))}
+      <li>
+        <Link
+          href={logout[lang]}
+          prefetch={false}
+          variant="menu"
+          className={styles.link}
+        >
+          {intl.formatMessage({ id: "Log out" })}
+        </Link>
+      </li>
+    </ul>
+  )
+}