feat(LOY-195): digital team member card button on my pages overview

apps/scandic-web/.env.local.example

@@ -57,6 +57,7 @@ NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE="false"
 ENABLE_BOOKING_WIDGET="false"
 ENABLE_BOOKING_WIDGET_HOTELRESERVATION_PATH="false"
 ENABLE_SURPRISES="true"
+ENABLE_DTMC="true"
 
 SHOW_SITE_WIDE_ALERT="false"
 SHOW_SIGNUP_FLOW="true"

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

@@ -1,5 +1,6 @@
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
+import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -30,9 +31,10 @@ export default async function Overview({
         link={link}
         preamble={subtitle}
         title={title}
-        headingAs={"h3"}
+        headingAs="h3"
-        headingLevel={"h1"}
+        headingLevel="h1"
       />
+      <DigitalTeamMemberCard user={user} />
       <Hero color="red">
         <Friend membership={user.membership} name={user.name}>
           <MembershipNumber color="burgundy" membership={user.membership} />

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

@@ -0,0 +1,30 @@
+.card {
+  padding: var(--Space-x2) var(--Space-x15);
+  border-radius: var(--Corner-radius-md);
+  border: 0;
+  cursor: pointer;
+  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  color: var(--Text-Brand-OnPrimary-3-Accent);
+
+  &:focus,
+  &:hover {
+    background:
+      linear-gradient(
+        0deg,
+        rgb(255 255 255 / 10%) 0%,
+        rgb(255 255 255 / 10%) 100%
+      ),
+      var(--Surface-Brand-Primary-1-OnSurface-Default);
+  }
+  &:disabled {
+    background: var(--Surface-UI-Fill-Disabled);
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+.text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x1);
+}

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

@@ -0,0 +1,37 @@
+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 type { User } from "@/types/user"
+
+interface DigitalTeamMemberCardProps {
+  user: User
+}
+
+export default async function DigitalTeamMemberCard(
+  // TODO: Make a check whether user is eligible for benefits or not
+  _props: DigitalTeamMemberCardProps
+) {
+  if (!env.ENABLE_DTMC) {
+    return null
+  }
+
+  const intl = await getIntl()
+
+  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>
+  )
+}

apps/scandic-web/env/server.ts

@@ -126,6 +126,13 @@ const _env = createEnv({
       // transform to boolean
       .transform((s) => s === "true")
       .default("false"),
+    ENABLE_DTMC: z
+      .string()
+      // only allow "true" or "false"
+      .refine((s) => s === "true" || s === "false")
+      // transform to boolean
+      .transform((s) => s === "true")
+      .default("false"),
     SHOW_SITE_WIDE_ALERT: z
       .string()
       // only allow "true" or "false"
@@ -267,6 +274,7 @@ const _env = createEnv({
     USE_NEW_REWARD_MODEL: process.env.USE_NEW_REWARD_MODEL,
     ENABLE_BOOKING_WIDGET: process.env.ENABLE_BOOKING_WIDGET,
     ENABLE_SURPRISES: process.env.ENABLE_SURPRISES,
+    ENABLE_DTMC: process.env.ENABLE_DTMC,
     SHOW_SITE_WIDE_ALERT: process.env.SHOW_SITE_WIDE_ALERT,
     SENTRY_ENVIRONMENT: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
     SENTRY_SERVER_SAMPLERATE: process.env.SENTRY_SERVER_SAMPLERATE,

packages/design-system/lib/fonts.css

@@ -269,7 +269,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-a03ed056.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-481ed751.woff2)
     format('woff2');
 }
 

scripts/material-symbols-update.mjs

@@ -120,6 +120,7 @@ const icons = [
   'hot_tub',
   'houseboat',
   'hvac',
+  'id_card',
   'imagesmode',
   'info',
   'iron',