8616e4ab76
Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { DiamondIcon, EditIcon } from "@/components/Icons"
|
|
import MembershipLevelIcon from "@/components/Levels/Icon"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./room.module.css"
|
|
|
|
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
|
import type { User } from "@/types/user"
|
|
|
|
export default function GuestDetails({
|
|
user,
|
|
booking,
|
|
isMobile = false,
|
|
}: {
|
|
user: User | null
|
|
booking: BookingConfirmation["booking"]
|
|
isMobile?: boolean
|
|
}) {
|
|
const intl = useIntl()
|
|
const containerClass = isMobile
|
|
? styles.guestDetailsMobile
|
|
: styles.guestDetailsDesktop
|
|
|
|
return (
|
|
<div className={containerClass}>
|
|
{user?.membership && (
|
|
<div className={styles.userDetails}>
|
|
<div className={styles.row}>
|
|
<div className={styles.rowTitle}>
|
|
<Caption
|
|
type="bold"
|
|
color="burgundy"
|
|
textTransform="uppercase"
|
|
textAlign="center"
|
|
>
|
|
{intl.formatMessage({ id: "Your member tier" })}
|
|
</Caption>
|
|
</div>
|
|
<MembershipLevelIcon
|
|
level={user.membership.membershipLevel}
|
|
color="red"
|
|
height={isMobile ? "40" : "20"}
|
|
width={isMobile ? "80" : "40"}
|
|
/>
|
|
</div>
|
|
<div className={styles.totalPoints}>
|
|
{isMobile && (
|
|
<div className={styles.totalPointsIcon}>
|
|
<DiamondIcon color="uiTextHighContrast" />
|
|
</div>
|
|
)}
|
|
<Caption
|
|
type="bold"
|
|
color="uiTextHighContrast"
|
|
textTransform="uppercase"
|
|
>
|
|
{intl.formatMessage({ id: "Total points" })}
|
|
</Caption>
|
|
|
|
<Body color="uiTextHighContrast" className={styles.totalPointsText}>
|
|
{user.membership.currentPoints}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className={styles.guest}>
|
|
<Body textTransform="bold" color="uiTextHighContrast">
|
|
{booking.guest.firstName} {booking.guest.lastName}
|
|
</Body>
|
|
{user?.membership && (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "Member no." })}{" "}
|
|
{user.membership.membershipNumber}
|
|
</Body>
|
|
)}
|
|
<Caption color="uiTextHighContrast">{booking.guest.email}</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{booking.guest.phoneNumber}
|
|
</Caption>
|
|
</div>
|
|
<Button
|
|
variant="icon"
|
|
color="burgundy"
|
|
intent={isMobile ? "secondary" : "text"}
|
|
>
|
|
<EditIcon color="burgundy" width={20} height={20} />
|
|
<Caption color="burgundy">
|
|
{intl.formatMessage({ id: "Modify guest details" })}
|
|
</Caption>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|