4103e3fb37
Feat/SW-431 payment flow * feat(SW-431): Update mock hotel data * feat(SW-431): Added route handler and trpc routes * feat(SW-431): List payment methods and handle booking status and redirection * feat(SW-431): Updated booking page to poll for booking status * feat(SW-431): Updated create booking contract * feat(SW-431): small fix * fix(SW-431): Added intl string and sorted dictionaries * fix(SW-431): Changes from PR * fix(SW-431): fixes from PR * fix(SW-431): add todo comments * fix(SW-431): update schema prop Approved-by: Simon.Emanuelsson
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import styles from "./staySection.module.css"
|
|
|
|
import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
|
|
export default function StaySection({ hotel, stay }: StaySectionProps) {
|
|
const intl = useIntl()
|
|
|
|
const nightsText =
|
|
stay.nights > 1
|
|
? intl.formatMessage({ id: "nights" })
|
|
: intl.formatMessage({ id: "night" })
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.card}>
|
|
<Image
|
|
src={hotel.image}
|
|
alt=""
|
|
height={400}
|
|
width={200}
|
|
className={styles.image}
|
|
/>
|
|
<div className={styles.info}>
|
|
<div className={styles.hotel}>
|
|
<ScandicLogoIcon color="red" />
|
|
<Title as="h5" textTransform="capitalize">
|
|
{hotel.name}
|
|
</Title>
|
|
<Caption color="burgundy" className={styles.caption}>
|
|
<span>{hotel.address}</span>
|
|
<span>{hotel.phone}</span>
|
|
</Caption>
|
|
</div>
|
|
<Body className={styles.stay}>
|
|
<span>{`${stay.nights} ${nightsText}`}</span>
|
|
<span className={styles.dates}>
|
|
<span>{stay.start}</span>
|
|
<ArrowRightIcon height={15} width={15} />
|
|
<span>{stay.end}</span>
|
|
</span>
|
|
</Body>
|
|
</div>
|
|
</section>
|
|
<section className={styles.table}>
|
|
<div className={styles.breakfast}>
|
|
<Body color="burgundy">
|
|
{intl.formatMessage({ id: "Breakfast" })}
|
|
</Body>
|
|
<Caption className={styles.caption}>
|
|
<span>{`${intl.formatMessage({ id: "Weekdays" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
|
|
<span>{`${intl.formatMessage({ id: "Weekends" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
|
|
</Caption>
|
|
</div>
|
|
<div className={styles.checkIn}>
|
|
<Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
|
|
<Caption className={styles.caption}>
|
|
<span>{intl.formatMessage({ id: "From" })}</span>
|
|
<span>{hotel.checkIn}</span>
|
|
</Caption>
|
|
</div>
|
|
<div className={styles.checkOut}>
|
|
<Body color="burgundy">
|
|
{intl.formatMessage({ id: "Check out" })}
|
|
</Body>
|
|
<Caption className={styles.caption}>
|
|
<span>{intl.formatMessage({ id: "At latest" })}</span>
|
|
<span>{hotel.checkOut}</span>
|
|
</Caption>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|