Files
web/apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
Chuma Mcphoy (We Ahead) a9868dac9c Merged in feat/LOY-203-connected-state-employee-benefits (pull request #2496)
feat(LOY-203): Enable Opening Team Member Card from Employee Benefits Page When Connected

* feat(LOY-203): add support for opening team member card modal from employee benefits page when connected

* fix(LOY-203): add id_card to  material symbol icons

* fix(LOY-203): remove uneeded dtmc btb style


Approved-by: Erik Tiekstra
Approved-by: Linus Flood
2025-07-02 11:50:27 +00:00

71 lines
2.3 KiB
TypeScript

import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { env } from "@/env/server"
import { getProfile } from "@/lib/trpc/memoizedRequests"
import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import { getIntl } from "@/i18n"
import Hero from "./Friend/Hero"
import MembershipNumber from "./Friend/MembershipNumber"
import Friend from "./Friend"
import Stats from "./Stats"
import styles from "./overview.module.css"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default async function Overview({
link,
subtitle,
title,
}: AccountPageComponentProps) {
const intl = await getIntl()
const user = await getProfile()
if (!user || "error" in user) {
return null
}
return (
<SectionContainer>
{env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null}
<SectionHeader
link={link}
preamble={subtitle}
title={title}
headingAs="h3"
headingLevel="h1"
/>
<DigitalTeamMemberCard user={user}>
<TeamMemberCardTrigger
className={styles.teamMemberCardButton}
variant="Tertiary"
color="Primary"
typography="Body/Paragraph/mdBold"
>
<>
<MaterialIcon icon="id_card" size={24} color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Show Team Member Card",
})}
</>
</TeamMemberCardTrigger>
</DigitalTeamMemberCard>
<Hero color="red">
<Friend membership={user.membership} name={user.name}>
<MembershipNumber color="burgundy" membership={user.membership} />
</Friend>
<Divider className={styles.divider} color="peach" />
<Stats user={user} />
</Hero>
<SectionLink link={link} variant="mobile" />
</SectionContainer>
)
}