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/MyPages/DigitalTeamMemberCard/Client.tsx

@@ -1,9 +1,7 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -19,68 +17,56 @@ import type { User } from "@scandic-hotels/trpc/types/user"
 
 interface DigitalTeamMemberCardClientProps {
   user: User
+  children: React.ReactElement
 }
 
 export default function DigitalTeamMemberCardClient({
   user,
+  children,
 }: DigitalTeamMemberCardClientProps) {
   const intl = useIntl()
-  const [isOpen, setIsOpen] = useState(false)
 
   const { release, request } = useWakeLock({
     reacquireOnPageVisible: true,
   })
 
-  function onToggle(modalState: boolean) {
-    setIsOpen(modalState)
-    if (modalState) {
-      request()
+  function onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      request() // Acquire wake lock when modal opens
     } else {
-      release()
+      release() // Release wake lock when modal closes
     }
   }
 
   return (
-    <>
-      <Button
-        className={styles.button}
-        onPress={() => onToggle(true)}
-        variant="Tertiary"
-        typography="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>
-      </Button>
-      <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
-        <DigitalTeamMemberCardContent user={user} />
+    <Modal
+      trigger={children}
+      className={styles.modal}
+      onOpenChange={onOpenChange}
+    >
+      <DigitalTeamMemberCardContent user={user} />
 
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.footer}>
-            {intl.formatMessage({
-              defaultMessage:
-                "Book discounted stays for yourself, family and friends!",
-            })}
-          </p>
-        </Typography>
-        <ButtonLink
-          href="https://scandic.fuseuniversal.com/topics/73727"
-          target="_blank"
-          variant="Tertiary"
-          typography="Body/Supporting text (caption)/smBold"
-        >
-          <span className={styles.link}>
-            {intl.formatMessage({
-              defaultMessage: "Check out all your benefits",
-            })}
-            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </span>
-        </ButtonLink>
-      </Modal>
-    </>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.footer}>
+          {intl.formatMessage({
+            defaultMessage:
+              "Book discounted stays for yourself, family and friends!",
+          })}
+        </p>
+      </Typography>
+      <ButtonLink
+        href="https://scandic.fuseuniversal.com/topics/73727"
+        target="_blank"
+        variant="Tertiary"
+        typography="Body/Supporting text (caption)/smBold"
+      >
+        <span className={styles.link}>
+          {intl.formatMessage({
+            defaultMessage: "Check out all your benefits",
+          })}
+          <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+        </span>
+      </ButtonLink>
+    </Modal>
   )
 }