68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
"use client"
|
|
import { useWatch } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import DatePicker from "@/components/DatePicker"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Search from "./Search"
|
|
|
|
import styles from "./formContent.module.css"
|
|
|
|
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
|
|
|
|
export default function FormContent({
|
|
locations,
|
|
}: BookingWidgetFormContentProps) {
|
|
const intl = useIntl()
|
|
const selectedDate = useWatch({ name: "date" })
|
|
|
|
const rooms = intl.formatMessage({ id: "Rooms & Guests" })
|
|
const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
|
|
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
|
|
const reward = intl.formatMessage({ id: "Book reward night" })
|
|
|
|
const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
|
|
|
|
return (
|
|
<div className={styles.input}>
|
|
<div className={styles.where}>
|
|
<Search locations={locations} />
|
|
</div>
|
|
<div className={styles.when}>
|
|
<Caption color="red" textTransform="bold">
|
|
{nights}{" "}
|
|
{nights > 1
|
|
? intl.formatMessage({ id: "nights" })
|
|
: intl.formatMessage({ id: "night" })}
|
|
</Caption>
|
|
<DatePicker />
|
|
</div>
|
|
<div className={styles.rooms}>
|
|
<Caption color="red" textTransform="bold">
|
|
{rooms}
|
|
</Caption>
|
|
<input type="text" placeholder={rooms} />
|
|
</div>
|
|
<div className={styles.vouchers}>
|
|
<Caption color="textMediumContrast" textTransform="bold">
|
|
{vouchers}
|
|
</Caption>
|
|
<input type="text" placeholder={vouchers} />
|
|
</div>
|
|
<div className={styles.options}>
|
|
<div className={styles.option}>
|
|
<input type="checkbox" />
|
|
<Caption color="textMediumContrast">{bonus}</Caption>
|
|
</div>
|
|
<div className={styles.option}>
|
|
<input type="checkbox" />
|
|
<Caption color="textMediumContrast">{reward}</Caption>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|