31a536b1f7
Feat(SW-1722) mystay multiroom view * feat(SW-1722) View all rooms on my stay * feat(sW-1722) Show linked reservation * feat(SW-1722) merged monorepo * feat(SW-1722) yarn install * feat(SW-1722) removed unused data * feat(SW-1722) Streaming data from the server to the client Approved-by: Niclas Edenvin
125 lines
3.8 KiB
TypeScript
125 lines
3.8 KiB
TypeScript
"use client"
|
|
import { useRouter } from "next/navigation"
|
|
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 useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./room.module.css"
|
|
|
|
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
|
import type { User } from "@/types/user"
|
|
|
|
interface GuestDetailsProps {
|
|
user: User | null
|
|
booking: BookingConfirmation["booking"]
|
|
isMobile?: boolean
|
|
}
|
|
|
|
export default function GuestDetails({
|
|
user,
|
|
booking,
|
|
isMobile = false,
|
|
}: GuestDetailsProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const router = useRouter()
|
|
const containerClass = isMobile
|
|
? styles.guestDetailsMobile
|
|
: styles.guestDetailsDesktop
|
|
|
|
const isMemberBooking =
|
|
booking.guest.membershipNumber === user?.membership?.membershipNumber
|
|
|
|
function handleModifyGuestDetails() {
|
|
if (isMemberBooking) {
|
|
const expirationTime = Date.now() + 10 * 60 * 1000
|
|
localStorage.setItem(
|
|
"myStayReturnRoute",
|
|
JSON.stringify({
|
|
path: window.location.pathname,
|
|
expiry: expirationTime,
|
|
})
|
|
)
|
|
router.push(`/${lang}/scandic-friends/my-pages/profile/edit`)
|
|
} else {
|
|
console.log("not a member booking") // TODO: Implement non-member booking
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={containerClass}>
|
|
{isMemberBooking && (
|
|
<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>
|
|
{isMemberBooking && (
|
|
<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"}
|
|
onClick={handleModifyGuestDetails}
|
|
>
|
|
<EditIcon color="burgundy" width={20} height={20} />
|
|
<Caption color="burgundy">
|
|
{intl.formatMessage({ id: "Modify guest details" })}
|
|
</Caption>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|