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/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>
+  )
+}