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

apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx

@@ -1,13 +1,16 @@
 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"
@@ -23,6 +26,7 @@ export default async function Overview({
   subtitle,
   title,
 }: AccountPageComponentProps) {
+  const intl = await getIntl()
   const user = await getProfile()
   if (!user || "error" in user) {
     return null
@@ -38,7 +42,21 @@ export default async function Overview({
         headingAs="h3"
         headingLevel="h1"
       />
-      <DigitalTeamMemberCard user={user} />
+      <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} />

apps/scandic-web/components/Blocks/DynamicContent/Overview/overview.module.css

@@ -2,6 +2,16 @@
   margin-top: var(--Spacing-x2);
 }
 
+.teamMemberCardButton {
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Brand-OnPrimary-3-Accent);
+
+  &:focus,
+  &:not(:disabled):hover {
+    color: var(--Text-Brand-OnPrimary-3-Accent);
+  }
+}
+
 @media screen and (max-width: 767px) {
   .container {
     /* Full-width override styling */