scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
+15 -15
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
apps/scandic-web/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+20 -24
View File
@@ -1,30 +1,26 @@
.myPagesMenu {
display: none;
}
.chevron {
transition: transform 0.3s;
@media screen and (min-width: 768px) {
.myPagesMenu {
display: block;
}
.chevron {
transition: transform 0.3s;
}
.chevron.isExpanded {
&.isExpanded {
transform: rotate(180deg);
}
}
.dropdown {
position: absolute;
top: calc(
3.5rem - 2px
); /* 3.5rem is the height of the main menu + bottom padding. */
right: 0;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-lg);
box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
min-width: 20rem;
z-index: var(--menu-overlay-z-index);
.dropdown {
position: absolute;
top: calc(
3.5rem - 2px
); /* 3.5rem is the height of the main menu + bottom padding. */
right: 0;
background-color: var(--Surface-Primary-Default);
border-radius: var(--Corner-radius-lg);
box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
min-width: 20rem;
z-index: var(--menu-overlay-z-index);
}
@media screen and (max-width: 767px) {
.myPagesMenu {
display: none;
}
}