fix(BOOK-325): Added refetch options to user.name query and refactored header

Approved-by: Linus Flood
Approved-by: Matilda Landström

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -1,18 +1,18 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
 
+import { MenuLink } from "../MenuLink"
+
 import styles from "./myPagesMenuContent.module.css"
 
 import type { MyPagesLinkKey } from "@scandic-hotels/trpc/routers/navigation/mypages/MyPagesLink"
@@ -34,10 +34,7 @@ export default function MyPagesMenuContent({
   const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
 
   const membershipPoints = membership?.currentPoints
-  const introClassName =
-    membershipLevel && membershipPoints
-      ? `${styles.intro}`
-      : `${styles.intro} ${styles.noMembership}`
+  const showMembershipInfo = membershipLevel && membershipPoints !== undefined
 
   if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
     return null
@@ -46,7 +43,11 @@ export default function MyPagesMenuContent({
   return (
     <FocusLock returnFocus={true}>
       <nav className={styles.myPagesMenuContent}>
-        <div className={introClassName}>
+        <div
+          className={cx(styles.intro, {
+            [styles.noMembership]: !showMembershipInfo,
+          })}
+        >
           <Typography variant="Title/Subtitle/md" className={styles.userName}>
             <p data-hj-suppress>
               {intl.formatMessage(
@@ -58,32 +59,32 @@ export default function MyPagesMenuContent({
               )}
             </p>
           </Typography>
-          {membershipLevel && membershipPoints ? (
-            <Caption className={styles.friendTypeWrapper}>
-              <span className={styles.friendType}>{membershipLevel.name}</span>
-              <span>
-                {intl.formatMessage(
-                  {
-                    id: "common.pointsAmountPoints",
-                    defaultMessage: "{pointsAmount, number} points",
-                  },
-                  { pointsAmount: membershipPoints }
-                )}
-              </span>
-            </Caption>
+          {showMembershipInfo ? (
+            <div className={styles.friendTypeWrapper}>
+              <Typography variant="Title/Overline/sm">
+                <span className={styles.friendType}>
+                  {membershipLevel.name}
+                </span>
+              </Typography>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span>
+                  {intl.formatMessage(
+                    {
+                      id: "common.pointsAmountPoints",
+                      defaultMessage: "{pointsAmount, number} points",
+                    },
+                    { pointsAmount: membershipPoints }
+                  )}
+                </span>
+              </Typography>
+            </div>
           ) : null}
+          <Divider className={styles.divider} />
         </div>
 
-        <ul className={styles.groups}>
-          <li>
-            <Divider className={styles.divider} />
-
-            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-
-            <Divider className={styles.divider} />
-            <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-          </li>
-        </ul>
+        <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
+        <Divider className={styles.divider} />
+        <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
       </nav>
     </FocusLock>
   )
@@ -100,22 +101,11 @@ function PrimaryLinks({
 
   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}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="CurrentColor"
-            />
-          </Link>
+      {primaryLinks.map(({ text, href }) => (
+        <li key={`${text}-${href}`}>
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
+            {text}
+          </MenuLink>
         </li>
       ))}
     </ul>
@@ -135,35 +125,20 @@ function SecondaryLinks({
 
   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}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="Icon/Interactive/Default"
-            />
-          </Link>
+      {secondaryLinks.map(({ text, href }) => (
+        <li key={`${text}-${href}`}>
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
+            {text}
+          </MenuLink>
         </li>
       ))}
       <li>
-        <Link
-          href={logout[lang]}
-          prefetch={false}
-          variant="menu"
-          className={styles.link}
-        >
+        <MenuLink href={logout[lang]} prefetch={false}>
           {intl.formatMessage({
             id: "common.logOut",
             defaultMessage: "Log out",
           })}
-        </Link>
+        </MenuLink>
       </li>
     </ul>
   )