scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/best-friend-hero (pull request #338)

Browse Source 
Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg
This commit is contained in:
Matilda Landström
2024-07-12 06:45:44 +00:00
parent c1892ace66
commit 801a041404
48 changed files with 595 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/MyPages/Blocks/Overview/Friend/index.tsx
View File

@@ -1,30 +1,39 @@
import { membershipLevels } from "@/constants/membershipLevels"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import { getMembership, isHighestMembership } from "@/utils/user"
import MembershipLevel from "./MemberShipLevel"
import { MembershipNumberProps } from "./MemershipNumber/membershipNumber"
import MembershipLevel from "./MembershipLevel"
import MembershipNumber from "./MemershipNumber"
import styles from "./friend.module.css"
import type { UserProps } from "@/types/components/myPages/user"
export default async function Friend({ user }: UserProps) {
export default async function Friend({
user,
color,
}: UserProps & Pick<MembershipNumberProps, "color">) {
const { formatMessage } = await getIntl()
const membership = getMembership(user.memberships)
if (!membership?.membershipLevel) {
return null
}
const isHighestLevel = isHighestMembership(membership.membershipLevel)
return (
<section className={styles.friend}>
<header className={styles.header}>
<BiroScript className={styles.levelLabel} color="pale">
{formatMessage({ id: "Current level" })}:
</BiroScript>
<Body color="white" textTransform="bold" textAlign="center">
{formatMessage(
isHighestLevel
? { id: "Highest level" }
: { id: "Your current level" }
)}
</Body>
{membership ? (
<MembershipLevel
level={membershipLevels[membership.membershipLevel]}
@@ -35,12 +44,7 @@ export default async function Friend({ user }: UserProps) {
<Title className={styles.name} color="pale" level="h3">
{user.name}
</Title>
<div className={styles.membershipContainer}>
<Caption color="pale">
{formatMessage({ id: "Membership ID" })}:{" "}
{membership ? membership.membershipNumber : "N/A"}
</Caption>
</div>
<MembershipNumber membership={membership} color={color} />
</div>
</section>
)