873183ec2f
* fix: findLang only returns acceptable languages * fix: fallback to use header x-lang if we haven't setLang yet * fix: languageSchema, allow uppercase Approved-by: Linus Flood
123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import { languages, languageSelect } from "@/constants/languages"
|
|
import { profileEdit } from "@/constants/routes/myPages"
|
|
import { getProfile } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import {
|
|
CalendarIcon,
|
|
EmailIcon,
|
|
GlobeIcon,
|
|
LocationIcon,
|
|
LockIcon,
|
|
PhoneIcon,
|
|
} from "@/components/Icons"
|
|
import Header from "@/components/Profile/Header"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./page.module.css"
|
|
|
|
import type { LangParams, PageArgs } from "@/types/params"
|
|
|
|
export default async function Profile({ params }: PageArgs<LangParams>) {
|
|
const intl = await getIntl()
|
|
const user = await getProfile()
|
|
if (!user || "error" in user) {
|
|
return null
|
|
}
|
|
|
|
const addressParts = []
|
|
if (user.address.streetAddress) {
|
|
addressParts.push(user.address.streetAddress)
|
|
}
|
|
|
|
if (user.address.city) {
|
|
addressParts.push(user.address.city)
|
|
}
|
|
|
|
if (user.address.country) {
|
|
addressParts.push(user.address.country)
|
|
}
|
|
|
|
const addressOutput =
|
|
addressParts.length > 0
|
|
? addressParts.join(", ")
|
|
: intl.formatMessage({ id: "N/A" })
|
|
|
|
const defaultLanguage = languages[params.lang]
|
|
const language = languageSelect.find((l) => l.value === user.language)
|
|
return (
|
|
<>
|
|
<Header>
|
|
<hgroup>
|
|
<Title as="h4" color="red" level="h1" textTransform="capitalize">
|
|
{intl.formatMessage({ id: "Welcome" })}
|
|
</Title>
|
|
<Title
|
|
data-hj-suppress
|
|
as="h4"
|
|
color="burgundy"
|
|
level="h2"
|
|
textTransform="capitalize"
|
|
>
|
|
{user.name}
|
|
</Title>
|
|
</hgroup>
|
|
<Button asChild intent="primary" size="small" theme="base">
|
|
<Link prefetch={false} color="none" href={profileEdit[params.lang]}>
|
|
{intl.formatMessage({ id: "Edit profile" })}
|
|
</Link>
|
|
</Button>
|
|
</Header>
|
|
<section className={styles.profile}>
|
|
<article className={styles.info}>
|
|
<div className={styles.item}>
|
|
<CalendarIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Date of Birth" })}
|
|
</Body>
|
|
<Body color="burgundy">{user.dateOfBirth}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<PhoneIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Phone number" })}
|
|
</Body>
|
|
<Body color="burgundy">{user.phoneNumber}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<GlobeIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Language" })}
|
|
</Body>
|
|
<Body color="burgundy">{language?.label ?? defaultLanguage}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<EmailIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Email" })}
|
|
</Body>
|
|
<Body color="burgundy">{user.email}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<LocationIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Address" })}
|
|
</Body>
|
|
<Body color="burgundy">{addressOutput}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<LockIcon color="burgundy" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({ id: "Password" })}
|
|
</Body>
|
|
<Body color="burgundy">**********</Body>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|