feat(SW-350): Implemented tooltip and booking widget tablet design

2024-10-04 10:00:52 +02:00
parent 04406d3865
commit aee9e94f7a
17 changed files with 530 additions and 137 deletions
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -1,85 +1,93 @@
 "use client"
+import React from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"

 import DatePicker from "@/components/DatePicker"
-import { InfoCircleIcon } from "@/components/Icons"
+import { SearchIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import Search from "./Search"
+import Voucher from "./Voucher"

 import styles from "./formContent.module.css"
-import tempStyles from "./Search/search.module.css" // TODO: Remove this when Rooms and Voucher is implemented
+import inputStyles from "./Search/search.module.css"

 import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"

 export default function FormContent({
  locations,
+  formId,
+  formState,
 }: BookingWidgetFormContentProps) {
  const intl = useIntl()
  const selectedDate = useWatch({ name: "date" })

  const rooms = intl.formatMessage({ id: "Guests & Rooms" })
-  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
-  const addVouchers = intl.formatMessage({ id: "Add code" })
-  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}>
-        <Search locations={locations} />
-      </div>
-      <div className={styles.when}>
-        <Caption color="red" textTransform="bold">
-          {intl.formatMessage(
-            { id: "booking.nights" },
-            { totalNights: nights }
-          )}
-        </Caption>
-        <DatePicker />
-      </div>
-      <div className={styles.rooms}>
-        <Caption color="red" textTransform="bold">
-          {rooms}
-        </Caption>
-        <Body asChild>
-          <input type="text" placeholder={rooms} className={tempStyles.input} />
-        </Body>
-      </div>
-      <div className={styles.vouchers}>
-        <div className={styles.vouchersHeader}>
-          <Caption color="disabled" textTransform="bold">
-            {vouchers}
-          </Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
+    <>
+      <div className={styles.input}>
+        <div className={styles.inputContainer}>
+          <div className={styles.where}>
+            <Search locations={locations} />
+          </div>
+          <div className={styles.when}>
+            <Caption color="red" textTransform="bold">
+              {intl.formatMessage(
+                { id: "booking.nights" },
+                { totalNights: nights }
+              )}
+            </Caption>
+            <DatePicker />
+          </div>
+          <div className={styles.rooms}>
+            <Caption color="red" textTransform="bold">
+              {rooms}
+            </Caption>
+            <Body asChild>
+              <input
+                type="text"
+                placeholder={rooms}
+                className={inputStyles.input}
+              />
+            </Body>
+          </div>
+        </div>
+        <div className={styles.voucherContainer}>
+          <Voucher />
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            className={styles.button}
+            disabled={!formState.isValid}
+            form={formId}
+            intent="primary"
+            theme="base"
+            type="submit"
+          >
+            <Caption
+              color="white"
+              textTransform="bold"
+              className={styles.buttonText}
+            >
+              {intl.formatMessage({ id: "Search" })}
+            </Caption>
+            <div className={styles.icon}>
+              <SearchIcon color="white" width={28} height={28} />
+            </div>
+          </Button>
        </div>
-        <Body asChild>
-          <input
-            type="text"
-            placeholder={addVouchers}
-            className={tempStyles.input}
-            disabled
-          />
-        </Body>
      </div>
-      <div className={styles.options}>
-        <label className={styles.option}>
-          <input type="checkbox" disabled className={styles.checkbox} />
-          <Caption color="disabled">{bonus}</Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
-        </label>
-        <label className={styles.option}>
-          <input type="checkbox" disabled className={styles.checkbox} />
-          <Caption color="disabled">{reward}</Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
-        </label>
+      <div className={styles.voucherRow}>
+        <Voucher />
      </div>
-    </div>
+    </>
  )
 }