feat(SW-240): refactor booking widget

2024-08-14 18:46:07 +02:00
parent 5a0d1c6d7b
commit 00a5465485
8 changed files with 209 additions and 181 deletions
@@ -1,131 +1,11 @@
-"use client"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { FormProvider, useForm } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import { dt } from "@/lib/dt"
-
-import Button from "../TempDesignSystem/Button"
-import Body from "../TempDesignSystem/Text/Body"
-import { bookingWidgetSchema } from "./schema"
+import Form from "../Forms/BookingWidget"

 import styles from "./bookingWidget.module.css"

-import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
-
 export function BookingWidget() {
-  const intl = useIntl()
-
-  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 className={styles.input}>
-            <div className={`${styles.where} ${styles.border}`}>
-              <Body
-                color="red"
-                textTransform="bold"
-                className={styles.bodyFontSize}
-              >
-                {intl.formatMessage({ id: "Where to" })}
-              </Body>
-            </div>
-            <div className={`${styles.when} ${styles.border}`}>
-              <Body
-                color="red"
-                textTransform="bold"
-                className={styles.bodyFontSize}
-              >
-                {intl.formatMessage({ id: "When" })}
-              </Body>
-            </div>
-            <div className={`${styles.rooms} ${styles.border}`}>
-              <Body
-                color="red"
-                textTransform="bold"
-                className={styles.bodyFontSize}
-              >
-                {intl.formatMessage({ id: "Rooms & Guests" })}
-              </Body>
-            </div>
-            <div className={`${styles.vouchers} ${styles.border}`}>
-              <Body
-                color="textMediumContrast"
-                textTransform="bold"
-                className={styles.bodyFontSize}
-              >
-                {intl.formatMessage({ id: "Booking codes and vouchers" })}
-              </Body>
-            </div>
-            <div className={styles.options}>
-              <div>
-                <Body
-                  color="textMediumContrast"
-                  className={styles.bodyFontSize}
-                >
-                  {intl.formatMessage({ id: "Use bonus cheque" })}
-                </Body>
-              </div>
-              <div>
-                <Body
-                  color="textMediumContrast"
-                  className={styles.bodyFontSize}
-                >
-                  {intl.formatMessage({ id: "Book reward night" })}
-                </Body>
-              </div>
-            </div>
-          </div>
-          <Button
-            type="submit"
-            size="small"
-            theme="base"
-            intent="primary"
-            className={styles.button}
-          >
-            <Body
-              color="white"
-              textTransform="bold"
-              className={styles.bodyFontSize}
-            >
-              {intl.formatMessage({ id: "Find hotels" })}
-            </Body>
-          </Button>
-        </FormProvider>
-      </form>
-    </div>
+    <section className={styles.container}>
+      <Form />
+    </section>
  )
 }