feat: add mobile ui to calendar

2024-09-27 17:44:36 +02:00
parent 73eddcf4b7
commit 1380dec6e3
32 changed files with 1005 additions and 296 deletions
--- a/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/components/BookingWidget/MobileToggleButton/index.tsx
@@ -0,0 +1,102 @@
+"use client"
+import { useEffect, useState } from "react"
+import { useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import { EditIcon, SearchIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import useLang from "@/hooks/useLang"
+
+import styles from "./button.module.css"
+
+import type {
+  BookingWidgetSchema,
+  BookingWidgetToggleButtonProps,
+} from "@/types/components/bookingWidget"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
+
+export default function MobileToggleButton({
+  openMobileSearch,
+}: BookingWidgetToggleButtonProps) {
+  const [hasMounted, setHasMounted] = useState(false)
+  const intl = useIntl()
+  const lang = useLang()
+  const d = useWatch({ name: "date" })
+  const location = useWatch({ name: "location" })
+  const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" })
+
+  const parsedLocation: Location | null = location
+    ? JSON.parse(decodeURIComponent(location))
+    : null
+
+  const nights = dt(d.to).diff(dt(d.from), "days")
+
+  const selectedFromDate = dt(d.from).locale(lang).format("D MMM")
+  const selectedToDate = dt(d.to).locale(lang).format("D MMM")
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
+  }
+
+  if (parsedLocation && d) {
+    const totalRooms = rooms.length
+    const totalAdults = rooms.reduce((acc, room) => {
+      if (room.adults) {
+        acc = acc + room.adults
+      }
+      return acc
+    }, 0)
+    return (
+      <div className={styles.complete} onClick={openMobileSearch} role="button">
+        <div>
+          <Caption color="red">{parsedLocation.name}</Caption>
+          <Caption>
+            {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
+              { id: "booking.nights" },
+              { totalNights: nights }
+            )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
+          </Caption>
+        </div>
+        <div className={styles.icon}>
+          <EditIcon color="white" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.partial} onClick={openMobileSearch} role="button">
+      <div>
+        <Caption color="red">{intl.formatMessage({ id: "Where to" })}</Caption>
+        <Body color="uiTextPlaceholder">
+          {parsedLocation
+            ? parsedLocation.name
+            : intl.formatMessage({ id: "Destination" })}
+        </Body>
+      </div>
+      <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
+      <div>
+        <Caption color="red">
+          {intl.formatMessage(
+            { id: "booking.nights" },
+            { totalNights: nights }
+          )}
+        </Caption>
+        <Body>
+          {selectedFromDate} - {selectedToDate}
+        </Body>
+      </div>
+      <div className={styles.icon}>
+        <SearchIcon color="white" />
+      </div>
+    </div>
+  )
+}