"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 membership?: FriendsMembership | null membershipLevel: LoyaltyLevel | null } export default function MyPagesMenu({ user, membership, membershipLevel, }: MyPagesMenuProps) { const intl = useIntl() const myPagesMenuRef = useRef(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 (
toggleDropdown(DropdownTypeEnum.MyPagesMenu)} > {intl.formatMessage( { defaultMessage: "Hi {firstName}!", }, { firstName: user.firstName } )} {isMyPagesMenuOpen ? (
toggleDropdown(DropdownTypeEnum.MyPagesMenu) } />
) : null}
) } export function MyPagesMenuSkeleton() { return (
) }