feat(LOY-196): add modal to dtmc button containing card

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/index.tsx

@@ -1,11 +1,6 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
 import { env } from "@/env/server"
 
-import { getIntl } from "@/i18n"
-
-import styles from "./digitalTeamMemberCard.module.css"
+import DigitalTeamMemberCardClient from "./Client"
 
 import type { User } from "@/types/user"
 
@@ -13,25 +8,14 @@ interface DigitalTeamMemberCardProps {
   user: User
 }
 
-export default async function DigitalTeamMemberCard(
-  // TODO: Make a check whether user is eligible for benefits or not
-  _props: DigitalTeamMemberCardProps
-) {
+export default async function DigitalTeamMemberCard({
+  user,
+}: DigitalTeamMemberCardProps) {
   if (!env.ENABLE_DTMC) {
     return null
   }
 
-  const intl = await getIntl()
+  // TODO: Make a check whether user is eligible for benefits or not
 
-  return (
-    <button className={styles.card} type="button">
-      <Typography variant="Body/Paragraph/mdBold">
-        <span className={styles.text}>
-          {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
-          <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
-          {intl.formatMessage({ defaultMessage: "Show Team Member Card" })}
-        </span>
-      </Typography>
-    </button>
-  )
+  return <DigitalTeamMemberCardClient user={user} />
 }