From 00a5465485f66bbf6cc240abbdf944a7f6255ebf Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 14 Aug 2024 18:46:07 +0200
Subject: [PATCH] feat(SW-240): refactor booking widget

---
 .../BookingWidget/bookingWidget.module.css    |  57 +-------
 components/BookingWidget/index.tsx            | 128 +-----------------
 .../FormContent/formContent.module.css        |  45 ++++++
 .../Forms/BookingWidget/FormContent/index.tsx |  90 ++++++++++++
 .../Forms/BookingWidget/form.module.css       |   7 +
 components/Forms/BookingWidget/index.tsx      |  61 +++++++++
 .../{ => Forms}/BookingWidget/schema.ts       |   0
 types/components/bookingWidget/index.ts       |   2 +-
 8 files changed, 209 insertions(+), 181 deletions(-)
 create mode 100644 components/Forms/BookingWidget/FormContent/formContent.module.css
 create mode 100644 components/Forms/BookingWidget/FormContent/index.tsx
 create mode 100644 components/Forms/BookingWidget/form.module.css
 create mode 100644 components/Forms/BookingWidget/index.tsx
 rename components/{ => Forms}/BookingWidget/schema.ts (100%)

diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css
index d256d451a..629a9523e 100644
--- a/components/BookingWidget/bookingWidget.module.css
+++ b/components/BookingWidget/bookingWidget.module.css
@@ -1,63 +1,8 @@
 .container {
   border-top: 1px solid var(--Base-Border-Subtle);
+  box-shadow: 0px 16px 24px 0px #00000014;
 }
 
-.form {
-  display: flex;
-  justify-content: space-between;
-  max-width: 1432px;
-  padding: var(--Spacing-x2) var(--Spacing-x5);
-}
-
-.input {
-  display: flex;
-  gap: var(--Spacing-x2);
-  width: 100%;
-  max-width: 1250px;
-}
-
-.button {
-  width: 118px;
-  justify-content: center;
-}
-
-.bodyFontSize {
-  font-size: var(--typography-Caption-Bold-Desktop-fontSize);
-}
-
-.border {
-  border-right: 1px solid var(--Base-Surface-Subtle-Normal);
-}
-
-.where {
-  width: 100%;
-  max-width: 280px;
-  height: 100%;
-  max-height: 46px;
-}
-
-.when,
-.rooms {
-  width: 100%;
-  max-width: 240px;
-}
-
-.vouchers {
-  width: 100%;
-  max-width: 200px;
-}
-
-.options {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 158px;
-}
-
-/**
-* Update the styles after mobile UX is ready
-*/
-
 @media screen and (max-width: 1367px) {
   .container {
     display: none;
diff --git a/components/BookingWidget/index.tsx b/components/BookingWidget/index.tsx
index b9efb5e69..5d4bc4dbd 100644
--- a/components/BookingWidget/index.tsx
+++ b/components/BookingWidget/index.tsx
@@ -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>
   )
 }
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
new file mode 100644
index 000000000..5bcbc15c8
--- /dev/null
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -0,0 +1,45 @@
+.input {
+  display: flex;
+  gap: var(--Spacing-x2);
+  width: 100%;
+  max-width: 1250px;
+}
+
+.button {
+  width: 118px;
+  justify-content: center;
+}
+
+.bodyFontSize {
+  font-size: var(--typography-Caption-Bold-Desktop-fontSize);
+}
+
+.border {
+  border-right: 1px solid var(--Base-Surface-Subtle-Normal);
+}
+
+.where {
+  display: flex;
+  gap: var(--Spacing-x-quarter);
+  flex-direction: column;
+  width: 100%;
+  max-width: 280px;
+}
+
+.when,
+.rooms {
+  width: 100%;
+  max-width: 240px;
+}
+
+.vouchers {
+  width: 100%;
+  max-width: 200px;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 158px;
+}
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
new file mode 100644
index 000000000..8ae011a21
--- /dev/null
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./formContent.module.css"
+
+export default function FormContent() {
+  const intl = useIntl()
+
+  const where = intl.formatMessage({ id: "Where to" })
+  const when = intl.formatMessage({ id: "When" })
+  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 search = intl.formatMessage({ id: "Find hotels" })
+
+  return (
+    <>
+      <div className={styles.input}>
+        <div className={`${styles.where} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {where}
+          </Body>
+        </div>
+        <div className={`${styles.when} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {when}
+          </Body>
+        </div>
+        <div className={`${styles.rooms} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {rooms}
+          </Body>
+        </div>
+        <div className={`${styles.vouchers} ${styles.border}`}>
+          <Body
+            color="textMediumContrast"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {vouchers}
+          </Body>
+        </div>
+        <div className={styles.options}>
+          <div>
+            <Body color="textMediumContrast" className={styles.bodyFontSize}>
+              {bonus}
+            </Body>
+          </div>
+          <div>
+            <Body color="textMediumContrast" className={styles.bodyFontSize}>
+              {reward}
+            </Body>
+          </div>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        size="small"
+        theme="base"
+        intent="primary"
+        className={styles.button}
+      >
+        <Body
+          color="white"
+          textTransform="bold"
+          className={styles.bodyFontSize}
+        >
+          {search}
+        </Body>
+      </Button>
+    </>
+  )
+}
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css
new file mode 100644
index 000000000..67a91b3c0
--- /dev/null
+++ b/components/Forms/BookingWidget/form.module.css
@@ -0,0 +1,7 @@
+.form {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1432px;
+  padding: var(--Spacing-x2) var(--Spacing-x5);
+}
diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx
new file mode 100644
index 000000000..6d1c43cd9
--- /dev/null
+++ b/components/Forms/BookingWidget/index.tsx
@@ -0,0 +1,61 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+
+import { dt } from "@/lib/dt"
+
+import FormContent from "./FormContent"
+import { bookingWidgetSchema } from "./schema"
+
+import styles from "./form.module.css"
+
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+
+const formId = "booking-widget"
+
+export default function Form() {
+  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 (
+    <form
+      onSubmit={methods.handleSubmit(onSubmit)}
+      className={styles.form}
+      id={formId}
+    >
+      <FormProvider {...methods}>
+        <FormContent />
+      </FormProvider>
+    </form>
+  )
+}
diff --git a/components/BookingWidget/schema.ts b/components/Forms/BookingWidget/schema.ts
similarity index 100%
rename from components/BookingWidget/schema.ts
rename to components/Forms/BookingWidget/schema.ts
diff --git a/types/components/bookingWidget/index.ts b/types/components/bookingWidget/index.ts
index d6032dc3b..1998e3778 100644
--- a/types/components/bookingWidget/index.ts
+++ b/types/components/bookingWidget/index.ts
@@ -1,5 +1,5 @@
 import { z } from "zod"
 
-import { bookingWidgetSchema } from "@/components/BookingWidget/schema"
+import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 
 export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>