131 lines
4.5 KiB
TypeScript
131 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
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 useWakeLock from "@/hooks/useWakeLock"
|
|
|
|
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()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
const { release, request } = useWakeLock({
|
|
reacquireOnPageVisible: true,
|
|
})
|
|
|
|
function onToggle(modalState: boolean) {
|
|
setIsOpen(modalState)
|
|
if (modalState) {
|
|
request()
|
|
} else {
|
|
release()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button className={styles.button} onPress={() => onToggle(true)}>
|
|
<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>
|
|
<Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
|
|
<Typography variant="Title/xs">
|
|
<h2 className={styles.title}>
|
|
{intl.formatMessage({ defaultMessage: "Scandic Family" })}
|
|
</h2>
|
|
</Typography>
|
|
<div className={styles.card}>
|
|
<div className={styles.content}>
|
|
<div className={styles.top}>
|
|
<Typography variant="Tag/sm">
|
|
<span>
|
|
{intl.formatMessage({ defaultMessage: "Team Member" })}
|
|
</span>
|
|
</Typography>
|
|
<Typography variant="Tag/sm">
|
|
{/* TODO: Should display country of employment */}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>SWE</span>
|
|
</Typography>
|
|
</div>
|
|
<div className={styles.middle}>
|
|
<div className={styles.employeeNumber}>
|
|
<Typography variant="Title/sm">
|
|
{/* TODO: Should display employee number */}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<div>123 456</div>
|
|
</Typography>
|
|
<svg
|
|
width="42"
|
|
height="42"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={styles.icon}
|
|
>
|
|
<path
|
|
d="M3.5 35V12.288C3.5 8.933 3.5 7 4.268 7c.912 0 1.569 1.156 3.17 3.978l11.374 20.044C20.413 33.844 21.041 35 21.982 35c.768 0 .768-1.933.768-5.288V7M28 22.75h10.5M29.016 8.016c1.355-1.355 7.113-1.355 8.468 0 1.355 1.355 1.355 7.113 0 8.468-1.355 1.355-7.114 1.355-8.468 0-1.355-1.355-1.355-7.113 0-8.468Z"
|
|
strokeWidth="2.625"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<Typography variant="Title/md">
|
|
<div>
|
|
{user.firstName} {user.lastName}
|
|
</div>
|
|
</Typography>
|
|
</div>
|
|
<div className={styles.bottom}>
|
|
<Typography variant="Tag/sm">
|
|
<span>
|
|
{/* TODO: Should display department of employment */}
|
|
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
|
|
Haymarket by Scandic
|
|
{/* eslint-enable */}
|
|
</span>
|
|
</Typography>
|
|
<Typography variant="Tag/sm">
|
|
{/* TODO: Should display current state of employment */}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>Employee</span>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<div className={styles.footer}>
|
|
{intl.formatMessage({
|
|
defaultMessage:
|
|
"Book discounted stays for yourself, family and friends!",
|
|
})}
|
|
</div>
|
|
</Typography>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|