aa06a0654d
cleanup profile page html to be valid replace old temp design system components with new ones divider is now correctly an hr element less section elements to be valid html
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./membershipcards.module.css"
|
|
|
|
export default async function MembershipCardSlot() {
|
|
const intl = await getIntl()
|
|
const membershipCards = await getMembershipCards()
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles.content}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h3>
|
|
{intl.formatMessage({
|
|
defaultMessage: "My membership cards",
|
|
})}
|
|
</h3>
|
|
</Typography>
|
|
</div>
|
|
{(membershipCards || []).map((card, idx) => (
|
|
<div className={styles.card} key={idx}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h4 className={styles.subTitle}>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Name: {cardMembershipType}",
|
|
},
|
|
{
|
|
cardMembershipType: card.membershipType,
|
|
}
|
|
)}
|
|
</h4>
|
|
</Typography>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Current Points: {points, number}",
|
|
},
|
|
{ points: card.currentPoints }
|
|
)}
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Member Since: {value}",
|
|
},
|
|
{
|
|
value: card.memberSince,
|
|
}
|
|
)}
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Number: {membershipNumber}",
|
|
},
|
|
{
|
|
membershipNumber: card.membershipNumber,
|
|
}
|
|
)}
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Expiration Date: {expirationDate}",
|
|
},
|
|
{
|
|
expirationDate: card.expirationDate?.split("T")[0],
|
|
}
|
|
)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
<Link href="#" variant="icon">
|
|
<MaterialIcon icon="add_circle" color="CurrentColor" />
|
|
<Body color="burgundy" textTransform="underlined">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Add new card",
|
|
})}
|
|
</Body>
|
|
</Link>
|
|
</section>
|
|
)
|
|
}
|