169 lines
5.8 KiB
TypeScript
169 lines
5.8 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import { countriesMap } from "@/constants/countries"
|
|
import { Lang, languages } from "@/constants/languages"
|
|
import { profileEdit } from "@/constants/routes/myPages"
|
|
import { getProfile } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import CommunicationSlot from "@/components/MyPages/myprofile/communication/communication"
|
|
import CreditCardSlot from "@/components/MyPages/myprofile/creditCards/creditCards"
|
|
import Header from "@/components/Profile/Header"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
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 { getLang } from "@/i18n/serverContext"
|
|
import { isValidCountry } from "@/utils/countries"
|
|
import { isValidLang } from "@/utils/languages"
|
|
|
|
import styles from "./profile.module.css"
|
|
|
|
export default async function Profile() {
|
|
const intl = await getIntl()
|
|
const lang = getLang()
|
|
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)
|
|
}
|
|
|
|
const displayNames = {
|
|
language: new Intl.DisplayNames([lang], { type: "language" }),
|
|
region: new Intl.DisplayNames([lang], { type: "region" }),
|
|
}
|
|
|
|
if (user.address.country) {
|
|
const countryCode = isValidCountry(user.address.country)
|
|
? countriesMap[user.address.country]
|
|
: null
|
|
const localizedCountry = countryCode
|
|
? displayNames.region.of(countryCode)
|
|
: user.address.country
|
|
addressParts.push(localizedCountry)
|
|
}
|
|
|
|
const addressOutput =
|
|
addressParts.length > 0
|
|
? addressParts.join(", ")
|
|
: intl.formatMessage({
|
|
defaultMessage: "N/A",
|
|
})
|
|
|
|
const userLang = isValidLang(user.language) ? user.language : Lang.en
|
|
const localizedLanguage = displayNames.language.of(userLang)
|
|
const normalizedLanguage = localizedLanguage
|
|
? localizedLanguage.charAt(0).toUpperCase() + localizedLanguage.slice(1)
|
|
: languages[userLang]
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.container}>
|
|
<Header>
|
|
<div>
|
|
<Title as="h4" color="red" level="h1" textTransform="capitalize">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Welcome",
|
|
})}
|
|
</Title>
|
|
<Title
|
|
data-hj-suppress
|
|
as="h4"
|
|
color="burgundy"
|
|
level="h2"
|
|
textTransform="capitalize"
|
|
>
|
|
{user.name}
|
|
</Title>
|
|
</div>
|
|
<Button asChild intent="primary" size="small" theme="base">
|
|
<Link prefetch={false} color="none" href={profileEdit[lang]}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Edit profile",
|
|
})}
|
|
</Link>
|
|
</Button>
|
|
</Header>
|
|
<div className={styles.profile}>
|
|
<div className={styles.info}>
|
|
<div className={styles.item}>
|
|
<MaterialIcon
|
|
icon="calendar_month"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Date of Birth",
|
|
})}
|
|
</Body>
|
|
<Body color="burgundy">{user.dateOfBirth}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<MaterialIcon icon="phone" color="Icon/Interactive/Default" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Phone number",
|
|
})}
|
|
</Body>
|
|
<Body color="burgundy">{user.phoneNumber}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<MaterialIcon icon="globe" color="Icon/Interactive/Default" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Language",
|
|
})}
|
|
</Body>
|
|
<Body color="burgundy">{normalizedLanguage}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<MaterialIcon icon="mail" color="Icon/Interactive/Default" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Email",
|
|
})}
|
|
</Body>
|
|
<Body color="burgundy">{user.email}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<MaterialIcon
|
|
icon="location_on"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Address",
|
|
})}
|
|
</Body>
|
|
<Body color="burgundy">{addressOutput}</Body>
|
|
</div>
|
|
<div className={styles.item}>
|
|
<MaterialIcon icon="lock" color="Icon/Interactive/Default" />
|
|
<Body color="burgundy" textTransform="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Password",
|
|
})}
|
|
</Body>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<Body color="burgundy">**********</Body>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider color="burgundy" opacity={8} />
|
|
<CreditCardSlot />
|
|
{/* <MembershipCardSlot /> */}
|
|
<CommunicationSlot />
|
|
</section>
|
|
</>
|
|
)
|
|
}
|