143 lines
4.1 KiB
TypeScript
143 lines
4.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 GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
|
|
import { SearchIcon } from "@/components/Icons"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Search, { SearchSkeleton } from "./Search"
|
|
import Voucher, { VoucherSkeleton } from "./Voucher"
|
|
|
|
import styles from "./formContent.module.css"
|
|
|
|
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
|
|
|
|
export default function FormContent({
|
|
locations,
|
|
formId,
|
|
onSubmit,
|
|
}: BookingWidgetFormContentProps) {
|
|
const intl = useIntl()
|
|
const selectedDate = useWatch({ name: "date" })
|
|
|
|
const roomsLabel = intl.formatMessage({ id: "Guests & Rooms" })
|
|
|
|
const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.input}>
|
|
<div className={styles.inputContainer}>
|
|
<div className={styles.where}>
|
|
<Search locations={locations} handlePressEnter={onSubmit} />
|
|
</div>
|
|
<div className={styles.when}>
|
|
<Caption color="red" type="bold">
|
|
{nights > 0
|
|
? intl.formatMessage(
|
|
{ id: "booking.nights" },
|
|
{ totalNights: nights }
|
|
)
|
|
: intl.formatMessage({
|
|
id: "Check in",
|
|
})}
|
|
</Caption>
|
|
<DatePicker />
|
|
</div>
|
|
<div className={styles.rooms}>
|
|
<label>
|
|
<Caption color="red" type="bold" asChild>
|
|
<span>{roomsLabel}</span>
|
|
</Caption>
|
|
</label>
|
|
<GuestsRoomsPickerForm />
|
|
</div>
|
|
</div>
|
|
<div className={styles.voucherContainer}>
|
|
<Voucher />
|
|
</div>
|
|
<div className={styles.buttonContainer}>
|
|
<Button
|
|
className={styles.button}
|
|
form={formId}
|
|
intent="primary"
|
|
theme="base"
|
|
type="submit"
|
|
>
|
|
<Caption
|
|
color="white"
|
|
type="bold"
|
|
className={styles.buttonText}
|
|
asChild
|
|
>
|
|
<span>{intl.formatMessage({ id: "Search" })}</span>
|
|
</Caption>
|
|
<span className={styles.icon}>
|
|
<SearchIcon color="white" width={28} height={28} />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className={styles.voucherRow}>
|
|
<Voucher />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function BookingWidgetFormContentSkeleton() {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.input}>
|
|
<div className={styles.inputContainer}>
|
|
<div className={styles.where}>
|
|
<SearchSkeleton />
|
|
</div>
|
|
<div className={styles.when}>
|
|
<Caption color="red" type="bold">
|
|
{intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
|
|
</Caption>
|
|
<SkeletonShimmer />
|
|
</div>
|
|
<div className={styles.rooms}>
|
|
<Caption color="red" type="bold" asChild>
|
|
<span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
|
|
</Caption>
|
|
<SkeletonShimmer />
|
|
</div>
|
|
</div>
|
|
<div className={styles.voucherContainer}>
|
|
<VoucherSkeleton />
|
|
</div>
|
|
<div className={styles.buttonContainer}>
|
|
<Button
|
|
className={styles.button}
|
|
intent="primary"
|
|
theme="base"
|
|
type="submit"
|
|
disabled
|
|
>
|
|
<Caption
|
|
color="white"
|
|
type="bold"
|
|
className={styles.buttonText}
|
|
asChild
|
|
>
|
|
<span>{intl.formatMessage({ id: "Search" })}</span>
|
|
</Caption>
|
|
<span className={styles.icon}>
|
|
<SearchIcon color="white" width={28} height={28} />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|