Files
web/components/BookingWidget/index.tsx
Hrishikesh Vaipurkar 1dfcd144fb SW-65 Moved type to /types
2024-08-07 14:02:39 +02:00

63 lines
1.8 KiB
TypeScript

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { dt } from "@/lib/dt"
import Button from "../TempDesignSystem/Button"
import { bookingWidgetSchema } from "./schema"
import styles from "./bookingWidget.module.css"
import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
export function BookingWidget() {
const methods = useForm<BookingWidgetSchema>({
defaultValues: {
search: {
stayType: "",
stayValue: "",
},
nights: {
// UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
// This is specifically to handle timezones falling in different dates.
fromDate: dt().utc().format("DD/MM/YYYY"),
toDate: dt().utc().add(1, "day").format("DD/MM/YYYY"),
},
bookingCode: "",
redemption: false,
voucher: false,
rooms: [
{
adults: 1,
childs: [],
},
],
},
mode: "all",
resolver: zodResolver(bookingWidgetSchema),
reValidateMode: "onChange",
})
function onSubmit(data: BookingWidgetSchema) {
console.log(data)
// Parse data and route accordignly to Select hotel or select room-rate page
console.log("to be routing")
}
return (
<div id="booking-widget" className={styles.container}>
<form onSubmit={methods.handleSubmit(onSubmit)} className={styles.form}>
<FormProvider {...methods}>
<div>Search</div>
<div>Nights</div>
<div>Rooms</div>
<div>Bonus code</div>
<div>Bonus cheque or reward nights</div>
<Button type="submit">Search</Button>
</FormProvider>
</form>
</div>
)
}