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 */

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] --
+  if (isEmployeeLinked(user)) {
-  // Handle case of authed user and already connected work account.
+    return (
-  // Show member card modal.
+      <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}>

apps/scandic-web/components/DigitalTeamMemberCard/Trigger.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { type ComponentProps } from "react"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+
+interface TeamMemberCardTriggerProps extends ComponentProps<typeof Button> {
+  children: React.ReactNode
+}
+
+export function TeamMemberCardTrigger({
+  children,
+  ...props
+}: TeamMemberCardTriggerProps) {
+  return <Button {...props}>{children}</Button>
+}

apps/scandic-web/components/Modal/index.tsx

@@ -136,6 +136,7 @@ export default function Modal({
   trigger,
   isOpen,
   onToggle,
+  onOpenChange,
   title,
   subtitle,
   children,
@@ -185,11 +186,12 @@ export default function Modal({
 
   return (
     <DialogTrigger
-      onOpenChange={(isOpen) =>
+      onOpenChange={(isOpen) => {
         setAnimation(
           isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
         )
-      }
+        onOpenChange?.(isOpen)
+      }}
     >
       {trigger}
       <AnimatePresence>

apps/scandic-web/components/Modal/modal.ts

@@ -16,11 +16,17 @@ export type ModalProps = {
   hideHeader?: boolean
   className?: string
 } & (
-  | { trigger: JSX.Element; isOpen?: never; onToggle?: never }
+  | {
+      trigger: JSX.Element
+      isOpen?: never
+      onToggle?: never
+      onOpenChange?: (open: boolean) => void
+    }
   | {
       trigger?: never
       isOpen: boolean
       onToggle: (open: boolean) => void
+      onOpenChange?: never
     }
 )
 

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) {
+  function onOpenChange(isOpen: boolean) {
-    setIsOpen(modalState)
+    if (isOpen) {
-    if (modalState) {
+      request() // Acquire wake lock when modal opens
-      request()
     } else {
-      release()
+      release() // Release wake lock when modal closes
     }
   }
 
   return (
-    <>
+    <Modal
-      <Button
+      trigger={children}
-        className={styles.button}
+      className={styles.modal}
-        onPress={() => onToggle(true)}
+      onOpenChange={onOpenChange}
-        variant="Tertiary"
+    >
-        typography="Body/Paragraph/mdBold"
+      <DigitalTeamMemberCardContent user={user} />
-      >
-        <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} />
 
-        <Typography variant="Body/Paragraph/mdRegular">
+      <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.footer}>
+        <p className={styles.footer}>
-            {intl.formatMessage({
+          {intl.formatMessage({
-              defaultMessage:
+            defaultMessage:
-                "Book discounted stays for yourself, family and friends!",
+              "Book discounted stays for yourself, family and friends!",
-            })}
+          })}
-          </p>
+        </p>
-        </Typography>
+      </Typography>
-        <ButtonLink
+      <ButtonLink
-          href="https://scandic.fuseuniversal.com/topics/73727"
+        href="https://scandic.fuseuniversal.com/topics/73727"
-          target="_blank"
+        target="_blank"
-          variant="Tertiary"
+        variant="Tertiary"
-          typography="Body/Supporting text (caption)/smBold"
+        typography="Body/Supporting text (caption)/smBold"
-        >
+      >
-          <span className={styles.link}>
+        <span className={styles.link}>
-            {intl.formatMessage({
+          {intl.formatMessage({
-              defaultMessage: "Check out all your benefits",
+            defaultMessage: "Check out all your benefits",
-            })}
+          })}
-            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+          <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </span>
+        </span>
-        </ButtonLink>
+      </ButtonLink>
-      </Modal>
+    </Modal>
-    </>
   )
 }

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css

@@ -1,20 +1,3 @@
-.button {
-  border-radius: var(--Corner-radius-md);
-  color: var(--Text-Brand-OnPrimary-3-Accent);
-
-  &:focus,
-  &:not(:disabled):hover {
-    color: var(--Text-Brand-OnPrimary-3-Accent);
-  }
-}
-
-.text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--Space-x1);
-}
-
 .title {
   color: var(--Text-Accent-Primary);
 }

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

@@ -8,10 +8,12 @@ import type { User } from "@scandic-hotels/trpc/types/user"
 
 interface DigitalTeamMemberCardProps {
   user: User
+  children: React.ReactElement
 }
 
 export default async function DigitalTeamMemberCard({
   user,
+  children,
 }: DigitalTeamMemberCardProps) {
   if (!env.ENABLE_DTMC) {
     return null
@@ -21,5 +23,9 @@ export default async function DigitalTeamMemberCard({
   if (!hasEmploymentData) {
     return null
   }
-  return <DigitalTeamMemberCardClient user={user} />
+  return (
+    <DigitalTeamMemberCardClient user={user}>
+      {children}
+    </DigitalTeamMemberCardClient>
+  )
 }

packages/design-system/lib/components/Icons/MaterialIcon/MaterialSymbol/consts.ts

@@ -1551,6 +1551,7 @@ export const SymbolCodepointsArray = [
   'hvac',
   'ice_skating',
   'icecream',
+  'id_card',
   'ifl',
   'iframe',
   'iframe_off',