Files
web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
2024-11-14 13:25:44 +01:00

76 lines
1.9 KiB
TypeScript

import { MembershipLevelEnum } from "@/constants/membershipLevels"
import {
getMembershipLevelSafely,
getMyPagesNavigation,
getName,
} from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
import LoginButton from "@/components/LoginButton"
import { getIntl } from "@/i18n"
import Avatar from "../Avatar"
import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
import MyPagesMobileMenu, {
MyPagesMobileMenuSkeleton,
} from "../MyPagesMobileMenu"
import styles from "./myPagesMenuWrapper.module.css"
export default async function MyPagesMenuWrapper() {
const [intl, myPagesNavigation, user, membership] = await Promise.all([
getIntl(),
getMyPagesNavigation(),
getName(),
getMembershipLevelSafely(),
])
const membershipLevel = membership?.membershipLevel
? await serverClient().contentstack.loyaltyLevels.byLevel({
level: MembershipLevelEnum[membership.membershipLevel],
})
: null
return (
<>
{user ? (
<>
<MyPagesMenu
membershipLevel={membershipLevel}
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
<MyPagesMobileMenu
membershipLevel={membershipLevel}
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
</>
) : (
<LoginButton
className={styles.loginLink}
aria-label={intl.formatMessage({ id: "Log in/Join" })}
position="top menu"
trackingId="loginStartNewTopMenu"
>
<Avatar />
<span className={styles.loginText}>
{intl.formatMessage({ id: "Log in/Join" })}
</span>
</LoginButton>
)}
</>
)
}
export function MyPagesMenuWrapperSkeleton() {
return (
<div>
<MyPagesMenuSkeleton />
<MyPagesMobileMenuSkeleton />
</div>
)
}