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/MyPagesMenu/index.tsx

@@ -10,7 +10,7 @@ import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import { getInitials } from "@/utils/user"
+import {type  FriendsMembership,getInitials  } from "@/utils/user"
 
 import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
@@ -19,11 +19,22 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 import styles from "./myPagesMenu.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
-import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
+import type { User } from "@/types/user"
+import type { MyPagesLink } from "@/components/MyPages/menuItems"
+import type { LoyaltyLevel } from "@/server/routers/contentstack/loyaltyLevel/output"
+
+export type MyPagesMenuProps = {
+  primaryLinks: MyPagesLink[]
+  secondaryLinks: MyPagesLink[]
+  user: Pick<User, "firstName" | "lastName">
+  membership?: FriendsMembership | null
+  membershipLevel: LoyaltyLevel | null
+}
 
 export default function MyPagesMenu({
   membership,
-  navigation,
+  primaryLinks,
+  secondaryLinks,
   user,
   membershipLevel,
 }: MyPagesMenuProps) {
@@ -65,7 +76,8 @@ export default function MyPagesMenu({
         <div className={styles.dropdown}>
           <MyPagesMenuContent
             membershipLevel={membershipLevel}
-            navigation={navigation}
+            primaryLinks={primaryLinks}
+            secondaryLinks={secondaryLinks}
             user={user}
             membership={membership}
             toggleOpenStateFn={() =>

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>
+  )
+}

components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -1,13 +1,14 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
-import {
-  getMembershipLevelSafely,
-  getMyPagesNavigation,
-  getName,
-} from "@/lib/trpc/memoizedRequests"
+import { getMembershipLevelSafely, getName } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import LoginButton from "@/components/LoginButton"
+import {
+  getPrimaryLinks,
+  getSecondaryLinks,
+} from "@/components/MyPages/menuItems"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import Avatar from "../Avatar"
 import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
@@ -18,12 +19,15 @@ import MyPagesMobileMenu, {
 import styles from "./myPagesMenuWrapper.module.css"
 
 export default async function MyPagesMenuWrapper() {
-  const [intl, myPagesNavigation, user, membership] = await Promise.all([
-    getIntl(),
-    getMyPagesNavigation(),
-    getName(),
-    getMembershipLevelSafely(),
-  ])
+  const lang = getLang()
+  const [intl, user, membership, primaryLinks, secondaryLinks] =
+    await Promise.all([
+      getIntl(),
+      getName(),
+      getMembershipLevelSafely(),
+      getPrimaryLinks({ lang }),
+      getSecondaryLinks({ lang }),
+    ])
 
   const membershipLevel = membership?.membershipLevel
     ? await serverClient().contentstack.loyaltyLevels.byLevel({
@@ -38,13 +42,15 @@ export default async function MyPagesMenuWrapper() {
           <MyPagesMenu
             membershipLevel={membershipLevel}
             membership={membership}
-            navigation={myPagesNavigation}
+            primaryLinks={primaryLinks}
+            secondaryLinks={secondaryLinks}
             user={user}
           />
           <MyPagesMobileMenu
             membershipLevel={membershipLevel}
             membership={membership}
-            navigation={myPagesNavigation}
+            primaryLinks={primaryLinks}
+            secondaryLinks={secondaryLinks}
             user={user}
           />
         </>

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -17,12 +17,13 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 import styles from "./myPagesMobileMenu.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
-import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
+import type { MyPagesMenuProps } from "../MyPagesMenu"
 
 export default function MyPagesMobileMenu({
   membershipLevel,
   membership,
-  navigation,
+  primaryLinks,
+  secondaryLinks,
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
@@ -65,7 +66,8 @@ export default function MyPagesMobileMenu({
           <MyPagesMenuContent
             membershipLevel={membershipLevel}
             membership={membership}
-            navigation={navigation}
+            primaryLinks={primaryLinks}
+            secondaryLinks={secondaryLinks}
             user={user}
             toggleOpenStateFn={() =>
               toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)