feat: add desktop ui to calendar

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -30,6 +30,7 @@
   height: 24px;
   outline: none;
   position: relative;
+  width: 100%;
   z-index: 2;
 }
 

components/Forms/BookingWidget/FormContent/index.tsx

@@ -33,10 +33,10 @@ export default function FormContent({
       </div>
       <div className={styles.when}>
         <Caption color="red" textTransform="bold">
-          {nights}{" "}
-          {nights > 1
-            ? intl.formatMessage({ id: "nights" })
-            : intl.formatMessage({ id: "night" })}
+          {intl.formatMessage(
+            { id: "booking.nights" },
+            { totalNights: nights }
+          )}
         </Caption>
         <DatePicker />
       </div>

components/Forms/BookingWidget/schema.ts

@@ -3,8 +3,9 @@ import { z } from "zod"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export const bookingWidgetSchema = z.object({
-  search: z.string({ coerce: true }).min(1, "Required"),
+  bookingCode: z.string(), // Update this as required when working with booking codes component
   date: z.object({
+    // Update this as required once started working with Date picker in Nights component
     from: z.string(),
     to: z.string(),
   }),
@@ -23,9 +24,7 @@ export const bookingWidgetSchema = z.object({
     },
     { message: "Required" }
   ),
-  bookingCode: z.string(), // Update this as required when working with booking codes component
   redemption: z.boolean().default(false),
-  voucher: z.boolean().default(false),
   rooms: z.array(
     // This will be updated when working in guests component
     z.object({
@@ -38,4 +37,6 @@ export const bookingWidgetSchema = z.object({
       ),
     })
   ),
+  search: z.string({ coerce: true }).min(1, "Required"),
+  voucher: z.boolean().default(false),
 })