feat: add mobile ui to calendar

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

@@ -1,45 +1,80 @@
-.input {
-  display: flex;
-  gap: var(--Spacing-x2);
-}
-
-.input input[type="text"] {
-  border: none;
-  height: 24px;
-}
-
-.rooms,
-.vouchers,
-.when,
-.where {
-  border-right: 1px solid var(--Base-Surface-Subtle-Normal);
-  width: 100%;
-}
-
-.rooms,
-.when {
-  max-width: 240px;
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-}
-
-.vouchers {
-  max-width: 200px;
-  padding: var(--Spacing-x1) 0;
-}
-
-.where {
-  max-width: 280px;
-  position: relative;
-}
-
 .options {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  max-width: 158px;
 }
 
 .option {
   display: flex;
-}
+}
+
+@media screen and (max-width: 1366px) {
+  .input {
+    display: grid;
+    gap: var(--Spacing-x2);
+  }
+
+  .rooms,
+  .vouchers,
+  .when,
+  .where {
+    background-color: var(--Base-Background-Primary-Normal);
+    border-radius: var(--Corner-radius-Medium);
+  }
+
+  .rooms,
+  .vouchers,
+  .when {
+    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  }
+
+  .options {
+    gap: var(--Spacing-x2);
+    margin-top: var(--Spacing-x2);
+  }
+
+  .option {
+    gap: var(--Spacing-x2);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .input {
+    display: flex;
+    gap: var(--Spacing-x2);
+  }
+
+  .rooms,
+  .vouchers,
+  .when,
+  .where {
+    border-right: 1px solid var(--Base-Surface-Subtle-Normal);
+    width: 100%;
+  }
+
+  .input input[type="text"] {
+    border: none;
+    height: 24px;
+  }
+
+  .rooms,
+  .when {
+    max-width: 240px;
+    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  }
+
+  .vouchers {
+    max-width: 200px;
+    padding: var(--Spacing-x1) 0;
+  }
+
+  .where {
+    max-width: 280px;
+    position: relative;
+  }
+
+  .options {
+    max-width: 158px;
+  }
+}

components/Forms/BookingWidget/FormContent/index.tsx

@@ -19,8 +19,8 @@ export default function FormContent({
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
 
-  const rooms = intl.formatMessage({ id: "Rooms & Guests" })
-  const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
+  const rooms = intl.formatMessage({ id: "Guests & Rooms" })
+  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
   const bonus = intl.formatMessage({ id: "Use bonus cheque" })
   const reward = intl.formatMessage({ id: "Book reward night" })
 
@@ -47,20 +47,20 @@ export default function FormContent({
         <input type="text" placeholder={rooms} />
       </div>
       <div className={styles.vouchers}>
-        <Caption color="textMediumContrast" textTransform="bold">
+        <Caption color="uiTextMediumContrast" textTransform="bold">
           {vouchers}
         </Caption>
         <input type="text" placeholder={vouchers} />
       </div>
       <div className={styles.options}>
-        <div className={styles.option}>
+        <label className={styles.option}>
           <input type="checkbox" />
           <Caption color="textMediumContrast">{bonus}</Caption>
-        </div>
-        <div className={styles.option}>
+        </label>
+        <label className={styles.option}>
           <input type="checkbox" />
           <Caption color="textMediumContrast">{reward}</Caption>
-        </div>
+        </label>
       </div>
     </div>
   )

components/Forms/BookingWidget/form.module.css

@@ -1,15 +1,36 @@
 .section {
   align-items: center;
-  display: flex;
+  display: grid;
   margin: 0 auto;
   max-width: var(--max-width-navigation);
-}
-
-.form {
   width: 100%;
 }
 
-.button {
-  width: 118px;
-  justify-content: center;
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: 100%;
+}
+
+@media screen and (max-width: 1366px) {
+  .form {
+    align-self: flex-start;
+  }
+
+  .button {
+    align-self: flex-end;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    display: flex;
+  }
+
+  .button {
+    justify-content: center;
+    width: 118px;
+  }
 }

components/Forms/BookingWidget/index.tsx

@@ -1,22 +1,17 @@
 "use client"
-import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
-import { FormProvider, useForm } from "react-hook-form"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { dt } from "@/lib/dt"
-
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import FormContent from "./FormContent"
-import { bookingWidgetSchema } from "./schema"
 
 import styles from "./form.module.css"
 
 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidget"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 const formId = "booking-widget"
 
@@ -24,40 +19,8 @@ export default function Form({ locations }: BookingWidgetFormProps) {
   const intl = useIntl()
   const router = useRouter()
 
-  const sessionStorageSearchData =
-    typeof window !== "undefined"
-      ? sessionStorage.getItem("searchData")
-      : undefined
-  const initialSelectedLocation: Location | undefined = sessionStorageSearchData
-    ? JSON.parse(sessionStorageSearchData)
-    : undefined
-  const methods = useForm<BookingWidgetSchema>({
-    defaultValues: {
-      search: initialSelectedLocation?.name ?? "",
-      location: sessionStorageSearchData
-        ? encodeURIComponent(sessionStorageSearchData)
-        : undefined,
-      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.
-        from: dt().utc().format("YYYY-MM-DD"),
-        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
-      },
-      bookingCode: "",
-      redemption: false,
-      voucher: false,
-      rooms: [
-        {
-          adults: 1,
-          childs: [],
-        },
-      ],
-    },
-    shouldFocusError: false,
-    mode: "all",
-    resolver: zodResolver(bookingWidgetSchema),
-    reValidateMode: "onChange",
-  })
+  const { formState, handleSubmit, register } =
+    useFormContext<BookingWidgetSchema>()
 
   function onSubmit(data: BookingWidgetSchema) {
     data.location = JSON.parse(decodeURIComponent(data.location))
@@ -70,25 +33,24 @@ export default function Form({ locations }: BookingWidgetFormProps) {
   return (
     <section className={styles.section}>
       <form
-        onSubmit={methods.handleSubmit(onSubmit)}
+        onSubmit={handleSubmit(onSubmit)}
         className={styles.form}
         id={formId}
       >
-        <FormProvider {...methods}>
-          <input {...methods.register("location")} type="hidden" />
-          <FormContent locations={locations} />
-        </FormProvider>
+        <input {...register("location")} type="hidden" />
+        <FormContent locations={locations} />
       </form>
       <Button
-        type="submit"
+        className={styles.button}
+        disabled={!formState.isValid}
         form={formId}
+        intent="primary"
         size="small"
         theme="base"
-        intent="primary"
-        className={styles.button}
+        type="submit"
       >
         <Caption color="white" textTransform="bold">
-          {intl.formatMessage({ id: "Find hotels" })}
+          {intl.formatMessage({ id: "Search" })}
         </Caption>
       </Button>
     </section>

components/Forms/BookingWidget/schema.ts

@@ -29,7 +29,7 @@ export const bookingWidgetSchema = z.object({
     // This will be updated when working in guests component
     z.object({
       adults: z.number().default(1),
-      childs: z.array(
+      children: z.array(
         z.object({
           age: z.number(),
           bed: z.number(),