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/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

@@ -2,26 +2,28 @@ import React from "react"
 
 import { signup } from "@scandic-hotels/common/constants/routes/signup"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { isValidSession } from "@scandic-hotels/trpc/utils/session"
 
 import { dtmcLogin } from "@/constants/routes/dtmc"
 import { login } from "@/constants/routes/handleAuth"
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import { auth } from "@/auth"
 import ButtonLink from "@/components/ButtonLink"
+import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
+import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { isEmployeeLinked } from "@/utils/user"
 
 import styles from "./callToActions.module.css"
 
 export default async function EmployeeBenefitsCallToActions() {
-  const session = await auth()
+  const user = await getProfileSafely()
   const intl = await getIntl()
   const lang = await getLang()
 
   const loginAndLinkURL = `${login[lang]}?redirectTo=${encodeURIComponent(dtmcLogin[lang])}`
 
-  if (!isValidSession(session)) {
+  if (!user) {
     return (
       <>
         <div className={styles.container}>
@@ -57,9 +59,24 @@ export default async function EmployeeBenefitsCallToActions() {
     )
   }
 
-  // -- TODO [LOY-196] --
-  // Handle case of authed user and already connected work account.
-  // Show member card modal.
+  if (isEmployeeLinked(user)) {
+    return (
+      <div className={styles.container}>
+        <DigitalTeamMemberCard user={user}>
+          <TeamMemberCardTrigger
+            size="Medium"
+            variant="Tertiary"
+            color="Primary"
+            typography="Body/Paragraph/mdBold"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Show Team Member Card",
+            })}
+          </TeamMemberCardTrigger>
+        </DigitalTeamMemberCard>
+      </div>
+    )
+  }
 
   return (
     <div className={styles.container}>