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/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -1,5 +1,4 @@
 "use client"
-import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -12,71 +11,129 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
-import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
-import type { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import type { ReactNode } from "react"
 
-type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
+import type { MyPagesLink } from "@/components/MyPages/menuItems"
 
 export default function MyPagesMobileDropdown({
-  navigation,
+  primaryLinks,
+  secondaryLinks,
 }: {
-  navigation: Navigation
+  primaryLinks: MyPagesLink[]
+  secondaryLinks: MyPagesLink[]
 }) {
   const intl = useIntl()
-  const lang = useLang()
   const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
 
-  if (!navigation) {
+  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
     return null
   }
 
+  const handleOnClick = () => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
+
   return (
     <nav
       className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? styles.navigationMenuIsOpen : ""}`}
     >
-      <Title className={styles.heading} textTransform="capitalize" level="h5">
-        {navigation.title}
+      <Title textTransform="capitalize" level="h5">
+        <div className={styles.heading}>
+          {intl.formatMessage({ id: "My pages" })}
+        </div>
       </Title>
-      {navigation.menuItems.map((menuItem, idx) => (
-        <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-          <div className={styles.dividerWrapper}>
-            <Divider color="subtle" />
-          </div>
-          <ul className={styles.dropdownWrapper}>
-            <ul className={styles.dropdownLinks}>
-              {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={() =>
-                      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
-                    }
-                  >
-                    {link.linkText}
-                  </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>
-          </ul>
-        </Fragment>
-      ))}
+
+      <List>
+        <PrimaryLinks
+          primaryLinks={primaryLinks}
+          handleOnClick={handleOnClick}
+        />
+      </List>
+      <List>
+        <SecondaryLinks
+          secondaryLinks={secondaryLinks}
+          handleOnClick={handleOnClick}
+        />
+      </List>
     </nav>
   )
 }
+
+function List({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div className={styles.dividerWrapper}>
+        <Divider color="subtle" />
+      </div>
+      <ul className={styles.dropdownWrapper}>
+        <ul className={styles.dropdownLinks}>{children}</ul>
+      </ul>
+    </>
+  )
+}
+
+function PrimaryLinks({
+  primaryLinks,
+  handleOnClick,
+}: {
+  primaryLinks: MyPagesLink[]
+  handleOnClick: () => void
+}) {
+  return (
+    <>
+      {primaryLinks.map((link, i) => (
+        <li key={link.href + i}>
+          <Link
+            href={link.href}
+            partialMatch
+            size={"regular"}
+            variant="myPageMobileDropdown"
+            color="burgundy"
+            onClick={handleOnClick}
+          >
+            {link.text}
+          </Link>
+        </li>
+      ))}
+    </>
+  )
+}
+function SecondaryLinks({
+  secondaryLinks,
+  handleOnClick,
+}: {
+  secondaryLinks: MyPagesLink[]
+  handleOnClick: () => void
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <>
+      {secondaryLinks.map((link, i) => (
+        <li key={link.href + i}>
+          <Link
+            href={link.href}
+            partialMatch
+            size={"small"}
+            variant="myPageMobileDropdown"
+            color="burgundy"
+            onClick={handleOnClick}
+          >
+            {link.text}
+          </Link>
+        </li>
+      ))}
+      <li>
+        <Link
+          href={logout[lang]}
+          prefetch={false}
+          size="small"
+          color="burgundy"
+          variant="myPageMobileDropdown"
+        >
+          {intl.formatMessage({ id: "Log out" })}
+        </Link>
+      </li>
+    </>
+  )
+}