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

Approved-by: Linus Flood
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-11-13 06:33:47 +00:00
parent 3a45e6cfe3
commit c4b564998c
27 changed files with 395 additions and 347 deletions

View File

@@ -1,10 +1,10 @@
"use client"
import { cx } from "class-variance-authority"
import { useRef } from "react"
import { useIntl } from "react-intl"
import { Avatar } from "@scandic-hotels/design-system/Avatar"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
@@ -56,24 +56,24 @@ export default function MyPagesMenu({
return (
<div className={styles.myPagesMenu} ref={myPagesMenuRef}>
<MainMenuButton
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
onPress={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
<Body textTransform="bold" color="baseTextHighContrast" asChild>
<span data-hj-suppress>
{intl.formatMessage(
{
id: "myPages.hiFirstName",
defaultMessage: "Hi {firstName}!",
},
{ firstName: user.firstName }
)}
</span>
</Body>
<span data-hj-suppress>
{intl.formatMessage(
{
id: "myPages.hiFirstName",
defaultMessage: "Hi {firstName}!",
},
{ firstName: user.firstName }
)}
</span>
<MaterialIcon
icon="keyboard_arrow_down"
size={20}
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
className={cx(styles.chevron, {
[styles.isExpanded]: isMyPagesMenuOpen,
})}
color="CurrentColor"
/>
</MainMenuButton>
@@ -96,7 +96,7 @@ export default function MyPagesMenu({
export function MyPagesMenuSkeleton() {
return (
<div className={styles.myPagesMenu}>
<MainMenuButton>
<MainMenuButton isLoading>
<Avatar />
<SkeletonShimmer width="10ch" />
<MaterialIcon