87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
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 ButtonLink from "@/components/ButtonLink"
|
|
import Modal from "@/components/Modal"
|
|
import useWakeLock from "@/hooks/useWakeLock"
|
|
|
|
import DigitalTeamMemberCardContent from "./Content"
|
|
|
|
import styles from "./digitalTeamMemberCard.module.css"
|
|
|
|
import type { User } from "@scandic-hotels/trpc/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)}
|
|
variant="Tertiary"
|
|
typography="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>
|
|
</Button>
|
|
<Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
|
|
<DigitalTeamMemberCardContent user={user} />
|
|
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.footer}>
|
|
{intl.formatMessage({
|
|
defaultMessage:
|
|
"Book discounted stays for yourself, family and friends!",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<ButtonLink
|
|
href="https://scandic.fuseuniversal.com/topics/73727"
|
|
target="_blank"
|
|
variant="Tertiary"
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
>
|
|
<span className={styles.link}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Check out all your benefits",
|
|
})}
|
|
<MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
|
|
</span>
|
|
</ButtonLink>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|