bbcabfa0ba
feat (SW-2864): Move booking router to trpc package * Add env to trpc package * Add eslint to trpc package * Apply lint rules * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * WIP first step * update internal imports in trpc * Fix most errors in scandic-web Just 100 left... * Move Props type out of trpc * Fix CategorizedFilters types * Move more schemas in hotel router * Fix deps * fix getNonContentstackUrls * Fix import error * Fix entry error handling * Fix generateMetadata metrics * Fix alertType enum * Fix duplicated types * lint:fix * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package * Fix broken imports * Move booking router to trpc package * Merge branch 'master' into feat/sw-2864-move-hotels-router-to-trpc-package Approved-by: Linus Flood
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
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 Avatar from "../Avatar"
|
|
import MainMenuButton from "../MainMenuButton"
|
|
import MyPagesMenuContent, { useMyPagesNavigation } from "../MyPagesMenuContent"
|
|
|
|
import styles from "./myPagesMenu.module.css"
|
|
|
|
import type { LoyaltyLevel } from "@scandic-hotels/trpc/routers/contentstack/loyaltyLevel/output"
|
|
import type { FriendsMembership, User } from "@scandic-hotels/trpc/types/user"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
|
|
export type MyPagesMenuProps = {
|
|
user: Pick<User, "firstName" | "lastName">
|
|
membership?: FriendsMembership | null
|
|
membershipLevel: LoyaltyLevel | null
|
|
}
|
|
|
|
export default function MyPagesMenu({
|
|
user,
|
|
membership,
|
|
membershipLevel,
|
|
}: MyPagesMenuProps) {
|
|
const intl = useIntl()
|
|
const myPagesMenuRef = useRef<HTMLDivElement>(null)
|
|
|
|
// Preload navigation content
|
|
useMyPagesNavigation()
|
|
|
|
const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isMyPagesMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
|
|
}
|
|
})
|
|
|
|
useClickOutside(myPagesMenuRef, isMyPagesMenuOpen, () => {
|
|
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
|
|
})
|
|
|
|
return (
|
|
<div className={styles.myPagesMenu} ref={myPagesMenuRef}>
|
|
<MainMenuButton
|
|
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
|
|
>
|
|
<Avatar initials={getInitials(user.firstName, user.lastName)} />
|
|
<Body textTransform="bold" color="baseTextHighContrast" asChild>
|
|
<span data-hj-suppress>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Hi {firstName}!",
|
|
},
|
|
{ firstName: user.firstName }
|
|
)}
|
|
</span>
|
|
</Body>
|
|
<MaterialIcon
|
|
icon="keyboard_arrow_down"
|
|
size={20}
|
|
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
|
|
color="Icon/Interactive/Accent"
|
|
/>
|
|
</MainMenuButton>
|
|
{isMyPagesMenuOpen ? (
|
|
<div className={styles.dropdown}>
|
|
<MyPagesMenuContent
|
|
membershipLevel={membershipLevel}
|
|
user={user}
|
|
membership={membership}
|
|
toggleOpenStateFn={() =>
|
|
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
|
|
}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function MyPagesMenuSkeleton() {
|
|
return (
|
|
<div className={styles.myPagesMenu}>
|
|
<MainMenuButton>
|
|
<Avatar />
|
|
<SkeletonShimmer width="10ch" />
|
|
<MaterialIcon
|
|
icon="keyboard_arrow_down"
|
|
size={20}
|
|
className={`${styles.chevron}`}
|
|
color="Icon/Interactive/Accent"
|
|
/>
|
|
</MainMenuButton>
|
|
</div>
|
|
)
|
|
}
|