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">

components/Forms/BookingWidget/index.tsx

@@ -37,11 +37,11 @@ export default function Form({ locations }: BookingWidgetFormProps) {
       location: sessionStorageSearchData
         ? encodeURIComponent(sessionStorageSearchData)
         : undefined,
-      nights: {
+      date: {
         // 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"),
+        from: dt().utc().format("YYYY-MM-DD"),
+        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
       },
       bookingCode: "",
       redemption: false,

components/Forms/BookingWidget/schema.ts

@@ -4,10 +4,9 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export const bookingWidgetSchema = z.object({
   search: z.string({ coerce: true }).min(1, "Required"),
-  nights: z.object({
-    // Update this as required once started working with Date picker in Nights component
-    fromDate: z.string(),
-    toDate: z.string(),
+  date: z.object({
+    from: z.string(),
+    to: z.string(),
   }),
   location: z.string().refine(
     (value) => {