From 74358c1a4ebc951cbcfb438677bad3145820aa39 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Mon, 5 May 2025 11:02:33 +0200 Subject: [PATCH 1/4] feat(LOY-195): digital team member card button on my pages overview --- .../digitalTeamMemberCard.module.css | 31 ++++++++++++++++ .../DigitalTeamMemberCard/index.tsx | 37 +++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css create mode 100644 apps/scandic-web/components/DigitalTeamMemberCard/index.tsx diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css new file mode 100644 index 000000000..c3b6fe4b9 --- /dev/null +++ b/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css @@ -0,0 +1,31 @@ +.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 { + outline: none; + 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); +} diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/index.tsx b/apps/scandic-web/components/DigitalTeamMemberCard/index.tsx new file mode 100644 index 000000000..78281966e --- /dev/null +++ b/apps/scandic-web/components/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 ( + + ) +} From 9b224598378e3da5feb9b8cbe99d2a742fa7b600 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Tue, 6 May 2025 14:50:35 +0200 Subject: [PATCH 2/4] feat(LOY-196): add modal to dtmc button containing card --- .../digitalTeamMemberCard.module.css | 31 ----- .../DigitalTeamMemberCard/index.tsx | 37 ------ .../MyPages/DigitalTeamMemberCard/Client.tsx | 114 ++++++++++++++++++ .../digitalTeamMemberCard.module.css | 79 +++++++++++- .../MyPages/DigitalTeamMemberCard/index.tsx | 28 +---- 5 files changed, 198 insertions(+), 91 deletions(-) delete mode 100644 apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css delete mode 100644 apps/scandic-web/components/DigitalTeamMemberCard/index.tsx create mode 100644 apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css deleted file mode 100644 index c3b6fe4b9..000000000 --- a/apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.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 { - outline: none; - 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); -} diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/index.tsx b/apps/scandic-web/components/DigitalTeamMemberCard/index.tsx deleted file mode 100644 index 78281966e..000000000 --- a/apps/scandic-web/components/DigitalTeamMemberCard/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -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 ( - - ) -} diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx new file mode 100644 index 000000000..5d28f2ee3 --- /dev/null +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx @@ -0,0 +1,114 @@ +"use client" + +import { Button } from "react-aria-components" +import { useIntl } from "react-intl" + +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import Modal from "@/components/Modal" + +import styles from "./digitalTeamMemberCard.module.css" + +import type { User } from "@/types/user" + +interface DigitalTeamMemberCardClientProps { + user: User +} + +export default function DigitalTeamMemberCardClient({ + user, +}: DigitalTeamMemberCardClientProps) { + const intl = useIntl() + + return ( + + + + {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */} + + {intl.formatMessage({ + defaultMessage: "Show Team Member Card", + })} + + + + } + > + +

+ {intl.formatMessage({ defaultMessage: "Scandic Family" })} +

+ +
+
+
+ + + {intl.formatMessage({ defaultMessage: "Team Member" })} + + + + {/* TODO: Should display country of employment */} + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + SWE + +
+
+
+ + {/* TODO: Should display employee number */} +
{user.membershipNumber}
+ + + + +
+ + +
+ {user.firstName} {user.lastName} +
+ +
+
+ + + {/* TODO: Should display department of employment */} + {/* eslint-disable formatjs/no-literal-string-in-jsx */} + Haymarket by Scandic + {/* eslint-enable */} + + + + {/* TODO: Should display current state of employment */} + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + Employee + +
+
+
+ +
+ {intl.formatMessage({ + defaultMessage: + "Book discounted stays for yourself, family and friends!", + })} +
+ + + ) +} diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css index ce4f6aa0a..8c0224e80 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css @@ -1,4 +1,4 @@ -.card { +.button { padding: var(--Space-x2) var(--Space-x15); border-radius: var(--Corner-radius-md); border: 0; @@ -28,3 +28,80 @@ align-items: center; gap: var(--Space-x1); } + +.title { + color: var(--Text-Accent-Primary); +} + +.card { + position: relative; + overflow: hidden; + border-radius: var(--Corner-radius-lg); + box-shadow: 0 2px 1px rgb(255 255 255 / 11%) inset; + padding: var(--Space-x2); + height: 400px; + width: 327px; + max-width: 100%; + color: var(--Text-Brand-OnPrimary-3-Accent); + background-color: var(--Surface-Brand-Primary-1-OnSurface-Default); + + &::before { + content: ""; + position: absolute; + z-index: 2; + bottom: 158px; + left: 132px; + width: 360px; + height: 360px; + opacity: 0.3; + background: #e9aba3; + box-shadow: 192px 192px 192px; + border-radius: 9999px; + filter: blur(96px); + } + + &::after { + content: ""; + position: absolute; + z-index: 1; + top: 60px; + left: -210px; + width: 2465px; + height: 459px; + background-image: url("/_static/img/scandic-logotype.svg"); + background-repeat: no-repeat; + opacity: 0.2; + } +} + +.content { + position: relative; + z-index: 3; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.employeeNumber { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--Base-Text-Inverted); +} + +.top, +.bottom { + display: flex; + justify-content: space-between; +} + +.middle { + display: flex; + flex-direction: column; + gap: 50px; +} + +.footer { + text-align: center; +} diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/index.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/index.tsx index 78281966e..00bdf018f 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/index.tsx +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/index.tsx @@ -1,11 +1,6 @@ -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 DigitalTeamMemberCardClient from "./Client" import type { User } from "@/types/user" @@ -13,25 +8,14 @@ interface DigitalTeamMemberCardProps { user: User } -export default async function DigitalTeamMemberCard( - // TODO: Make a check whether user is eligible for benefits or not - _props: DigitalTeamMemberCardProps -) { +export default async function DigitalTeamMemberCard({ + user, +}: DigitalTeamMemberCardProps) { if (!env.ENABLE_DTMC) { return null } - const intl = await getIntl() + // TODO: Make a check whether user is eligible for benefits or not - return ( - - ) + return } From 8ca0aee25eca7e428678ce7b2af4136cdf0764b3 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Wed, 7 May 2025 10:32:32 +0200 Subject: [PATCH 3/4] fix(LOY-196): replace employee number with dummy value add support for className to modal --- apps/scandic-web/components/Modal/index.tsx | 11 ++++++++--- apps/scandic-web/components/Modal/modal.ts | 1 + .../MyPages/DigitalTeamMemberCard/Client.tsx | 4 +++- .../digitalTeamMemberCard.module.css | 6 ++++++ 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/apps/scandic-web/components/Modal/index.tsx b/apps/scandic-web/components/Modal/index.tsx index 19eb3e8e8..cd4a9be32 100644 --- a/apps/scandic-web/components/Modal/index.tsx +++ b/apps/scandic-web/components/Modal/index.tsx @@ -1,5 +1,6 @@ "use client" +import { cx } from "class-variance-authority" import { motion } from "framer-motion" import { type PropsWithChildren, useEffect, useState } from "react" import { @@ -40,6 +41,7 @@ function InnerModal({ subtitle, withActions, hideHeader, + className, }: PropsWithChildren) { const intl = useIntl() @@ -67,7 +69,7 @@ function InnerModal({ ) { const [animation, setAnimation] = useState( AnimationStateEnum.visible @@ -163,6 +166,7 @@ export default function Modal({ subtitle={subtitle} withActions={withActions} hideHeader={hideHeader} + className={className} > {children} @@ -185,6 +189,7 @@ export default function Modal({ title={title} subtitle={subtitle} withActions={withActions} + className={className} > {children} diff --git a/apps/scandic-web/components/Modal/modal.ts b/apps/scandic-web/components/Modal/modal.ts index a86764a88..48e7d2dde 100644 --- a/apps/scandic-web/components/Modal/modal.ts +++ b/apps/scandic-web/components/Modal/modal.ts @@ -14,6 +14,7 @@ export type ModalProps = { subtitle?: string withActions?: boolean hideHeader?: boolean + className?: string } & ( | { trigger: JSX.Element; isOpen?: never; onToggle?: never } | { diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx index 5d28f2ee3..c18f8be54 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx @@ -36,6 +36,7 @@ export default function DigitalTeamMemberCardClient({ } + className={styles.modal} >

@@ -60,7 +61,8 @@ export default function DigitalTeamMemberCardClient({
{/* TODO: Should display employee number */} -
{user.membershipNumber}
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} +
123 456
 Date: Wed, 7 May 2025 10:48:08 +0200 Subject: [PATCH 4/4] fix(LOY-196): change svg color to be derived from css and variables instead --- .../components/MyPages/DigitalTeamMemberCard/Client.tsx | 2 +- .../DigitalTeamMemberCard/digitalTeamMemberCard.module.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx index c18f8be54..bad0ecc96 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx @@ -69,10 +69,10 @@ export default function DigitalTeamMemberCardClient({ height="42" fill="none" xmlns="http://www.w3.org/2000/svg" + className={styles.icon} >