Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Feat(LOY-311) Create avatar design system component

* feat(LOY-311): Creat & use New Avatar Design System Component

* refactor(LOY-311): replace avatar used in app header with design system component

* fix(LOY-311): use correct space vars


Approved-by: Erik Tiekstra

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

@@ -54,6 +54,7 @@ GOOGLE_DYNAMIC_MAP_ID=""
 
 ENABLE_SURPRISES="true"
 ENABLE_DTMC="true"
+ENABLE_NEW_OVERVIEW_SECTION="true"
 
 SHOW_SITE_WIDE_ALERT="false"
 

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

@@ -0,0 +1,58 @@
+import { Avatar } from "@scandic-hotels/design-system/Avatar"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import CopyMembershipIdButton from "@/components/MyPages/CopyMembershipIdButton"
+import { getIntl } from "@/i18n"
+import { getInitials } from "@/utils/user"
+
+import styles from "./userBaseInfo.module.css"
+
+import type { User } from "@scandic-hotels/trpc/types/user"
+
+interface UserBaseInfoProps {
+  user: User
+}
+
+export default async function UserBaseInfo({ user }: UserBaseInfoProps) {
+  const intl = await getIntl()
+  const initials = getInitials(user.firstName, user.lastName)
+
+  return (
+    <div className={styles.container}>
+      <Avatar
+        alt={`${user.firstName} ${user.lastName}`}
+        initials={initials}
+        size="lg"
+      />
+      <div>
+        <Typography variant="Title/smLowCase">
+          <h3 className={styles.fullName}>
+            {user.firstName} {user.lastName}
+          </h3>
+        </Typography>
+        <div className={styles.membershipInfo}>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <span>
+              {intl.formatMessage({
+                defaultMessage: "Membership ID:",
+              })}
+            </span>
+          </Typography>
+          {user.membership?.membershipNumber ? (
+            <CopyMembershipIdButton
+              membershipNumber={user.membership.membershipNumber}
+            />
+          ) : (
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <span className={styles.noMembership}>
+                {intl.formatMessage({
+                  defaultMessage: "N/A",
+                })}
+              </span>
+            </Typography>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/Overview/UserBaseInfo/userBaseInfo.module.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x15);
+}
+
+.fullName {
+  color: var(--Text-Heading);
+  text-transform: capitalize;
+}
+
+.membershipInfo {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--Space-x05);
+  color: var(--Scandic-Red-100);
+}

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

@@ -16,6 +16,7 @@ import Hero from "./Friend/Hero"
 import MembershipNumber from "./Friend/MembershipNumber"
 import Friend from "./Friend"
 import Stats from "./Stats"
+import UserBaseInfo from "./UserBaseInfo"
 
 import styles from "./overview.module.css"
 
@@ -57,6 +58,8 @@ export default async function Overview({
           </>
         </TeamMemberCardTrigger>
       </DigitalTeamMemberCard>
+      {env.ENABLE_NEW_OVERVIEW_SECTION ? <UserBaseInfo user={user} /> : null}
+      {/*TODO: Replace Hero Section Cards with New ones. */}
       <Hero color="red">
         <Friend membership={user.membership} name={user.name}>
           <MembershipNumber color="burgundy" membership={user.membership} />

apps/scandic-web/components/Header/MainMenu/Avatar/avatar.module.css

@@ -1,14 +0,0 @@
-.avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border-radius: var(--Corner-radius-rounded);
-  width: 2rem;
-  height: 2rem;
-  background-color: var(--UI-Grey-40);
-}
-
-.initials {
-  background-color: var(--Base-Icon-Low-contrast);
-}

apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx

@@ -1,28 +0,0 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Image from "@scandic-hotels/design-system/Image"
-
-import styles from "./avatar.module.css"
-
-import type { AvatarProps } from "@/types/components/header/avatar"
-
-export default function Avatar({ image, initials }: AvatarProps) {
-  let classNames = [styles.avatar]
-  let element = <MaterialIcon icon="person" color="Icon/Inverted" />
-  if (image) {
-    classNames.push(styles.image)
-    element = <Image src={image.src} alt={image.alt} width={28} height={28} />
-  } else if (initials) {
-    classNames.push(styles.initials)
-    element = (
-      <Footnote type="label" color="white" textTransform="uppercase" asChild>
-        <span>{initials}</span>
-      </Footnote>
-    )
-  }
-  return (
-    <span data-hj-suppress className={classNames.join(" ")}>
-      {element}
-    </span>
-  )
-}

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -3,6 +3,7 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { Avatar } from "@scandic-hotels/design-system/Avatar"
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
@@ -13,7 +14,6 @@ import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"
 
-import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
 import MyPagesMenuContent, { useMyPagesNavigation } from "../MyPagesMenuContent"
 

apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -4,13 +4,13 @@ import { useSession } from "next-auth/react"
 import { useIntl } from "react-intl"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
+import { Avatar } from "@scandic-hotels/design-system/Avatar"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import LoginButton from "@/components/LoginButton"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
 
-import Avatar from "../Avatar"
 import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
 import MyPagesMobileMenu, {
   MyPagesMobileMenuSkeleton,

apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -5,12 +5,13 @@ import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { Avatar } from "@scandic-hotels/design-system/Avatar"
+
 import useDropdownStore from "@/stores/main-menu"
 
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"
 
-import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
 import MyPagesMenuContent from "../MyPagesMenuContent"
 

apps/scandic-web/components/MyPages/CopyMembershipIdButton/copyMembershipIdButton.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  color: var(--Scandic-Red-100);
+}
+
+.copyButton {
+  min-width: auto;
+  padding: var(--Space-x05);
+}

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

@@ -0,0 +1,56 @@
+"use client"
+
+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"
+
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import styles from "./copyMembershipIdButton.module.css"
+
+interface CopyMembershipIdButtonProps {
+  membershipNumber: string
+}
+
+export default function CopyMembershipIdButton({
+  membershipNumber,
+}: CopyMembershipIdButtonProps) {
+  const intl = useIntl()
+
+  function handleCopy() {
+    try {
+      navigator.clipboard.writeText(membershipNumber)
+      toast.success(
+        intl.formatMessage({
+          defaultMessage: "Membership ID copied to clipboard",
+        })
+      )
+    } catch {
+      toast.error(
+        intl.formatMessage({
+          defaultMessage: "Failed to copy",
+        })
+      )
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        <code data-hj-suppress className={styles.membershipCode}>
+          {membershipNumber}
+        </code>
+      </Typography>
+      <Button
+        onClick={handleCopy}
+        className={styles.copyButton}
+        variant="Text"
+        size="Small"
+      >
+        <MaterialIcon icon="content_copy" color="CurrentColor" />
+      </Button>
+    </div>
+  )
+}

apps/scandic-web/env/server.ts

@@ -160,6 +160,11 @@ export const env = createEnv({
       .refine((s) => s === "1" || s === "0")
       .transform((s) => s === "1")
       .default("1"),
+    ENABLE_NEW_OVERVIEW_SECTION: z
+      .string()
+      .refine((s) => s === "true" || s === "false")
+      .transform((s) => s === "true")
+      .default("false"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -243,6 +248,7 @@ export const env = createEnv({
     DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
     CAMPAIGN_PAGES_ENABLED: process.env.CAMPAIGN_PAGES_ENABLED,
     WEBVIEW_SHOW_OVERVIEW: process.env.WEBVIEW_SHOW_OVERVIEW,
+    ENABLE_NEW_OVERVIEW_SECTION: process.env.ENABLE_NEW_OVERVIEW_SECTION,
   },
 })