157 lines
4.2 KiB
TypeScript
157 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import FocusLock from "react-focus-lock"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { logout } from "@/constants/routes/handleAuth"
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./myPagesMenuContent.module.css"
|
|
|
|
import type { MyPagesMenuProps } from "../MyPagesMenu"
|
|
|
|
type Props = MyPagesMenuProps & { toggleOpenStateFn: () => void }
|
|
|
|
export default function MyPagesMenuContent({
|
|
membership,
|
|
toggleOpenStateFn,
|
|
user,
|
|
membershipLevel,
|
|
}: Props) {
|
|
const intl = useIntl()
|
|
const { data: myPagesNavigation } = useMyPagesNavigation()
|
|
|
|
const primaryLinks = myPagesNavigation?.primaryLinks ?? []
|
|
const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
|
|
|
|
const membershipPoints = membership?.currentPoints
|
|
const introClassName =
|
|
membershipLevel && membershipPoints
|
|
? `${styles.intro}`
|
|
: `${styles.intro} ${styles.noMembership}`
|
|
|
|
if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<FocusLock returnFocus={true}>
|
|
<nav className={styles.myPagesMenuContent}>
|
|
<div className={introClassName}>
|
|
<Subtitle type="two" className={styles.userName}>
|
|
{intl.formatMessage(
|
|
{ id: "Hi {firstName}!" },
|
|
{ firstName: user.firstName }
|
|
)}
|
|
</Subtitle>
|
|
{membershipLevel && membershipPoints ? (
|
|
<Caption className={styles.friendTypeWrapper}>
|
|
<span className={styles.friendType}>{membershipLevel.name}</span>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{ id: "{pointsAmount, number} points" },
|
|
{ pointsAmount: membershipPoints }
|
|
)}
|
|
</span>
|
|
</Caption>
|
|
) : null}
|
|
</div>
|
|
|
|
<ul className={styles.groups}>
|
|
<li>
|
|
<Divider color="subtle" className={styles.divider} />
|
|
|
|
<PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
|
|
|
|
<Divider color="subtle" className={styles.divider} />
|
|
<SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</FocusLock>
|
|
)
|
|
}
|
|
|
|
function PrimaryLinks({
|
|
toggleOpenStateFn,
|
|
}: {
|
|
toggleOpenStateFn: () => void
|
|
}) {
|
|
const { data: myPagesNavigation } = useMyPagesNavigation()
|
|
|
|
const primaryLinks = myPagesNavigation?.primaryLinks ?? []
|
|
|
|
return (
|
|
<ul className={styles.menuItems}>
|
|
{primaryLinks.map((link, i) => (
|
|
<li key={link.href + i}>
|
|
<Link
|
|
href={link.href}
|
|
onClick={toggleOpenStateFn}
|
|
variant="menu"
|
|
weight={"bold"}
|
|
className={styles.link}
|
|
>
|
|
{link.text}
|
|
<ArrowRightIcon className={styles.arrow} color="burgundy" />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function SecondaryLinks({
|
|
toggleOpenStateFn,
|
|
}: {
|
|
toggleOpenStateFn: () => void
|
|
}) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const { data: myPagesNavigation } = useMyPagesNavigation()
|
|
|
|
const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
|
|
|
|
return (
|
|
<ul className={styles.menuItems}>
|
|
{secondaryLinks.map((link, i) => (
|
|
<li key={link.href + i}>
|
|
<Link
|
|
href={link.href}
|
|
onClick={toggleOpenStateFn}
|
|
variant="menu"
|
|
className={styles.link}
|
|
>
|
|
{link.text}
|
|
<ArrowRightIcon className={styles.arrow} color="burgundy" />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<Link
|
|
href={logout[lang]}
|
|
prefetch={false}
|
|
variant="menu"
|
|
className={styles.link}
|
|
>
|
|
{intl.formatMessage({ id: "Log out" })}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export const useMyPagesNavigation = () => {
|
|
const lang = useLang()
|
|
return trpc.navigation.myPages.useQuery({
|
|
lang: lang,
|
|
})
|
|
}
|