feat: add initial datepicker, no ui/ux

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -42,4 +42,4 @@
 
 .option {
   display: flex;
-}
+}

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,6 +1,10 @@
 "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"
@@ -13,11 +17,15 @@ export default function FormContent({
   locations,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
-  const when = intl.formatMessage({ id: "When" })
+  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}>
@@ -25,9 +33,12 @@ export default function FormContent({
       </div>
       <div className={styles.when}>
         <Caption color="red" textTransform="bold">
-          {when}
+          {nights}{" "}
+          {nights > 1
+            ? intl.formatMessage({ id: "nights" })
+            : intl.formatMessage({ id: "night" })}
         </Caption>
-        <input type="text" placeholder={when} />
+        <DatePicker />
       </div>
       <div className={styles.rooms}>
         <Caption color="red" textTransform="bold">