fix: remove guest picker store

2024-11-12 16:45:25 +01:00
parent 58678244fc
commit ca3819f7cc
17 changed files with 368 additions and 597 deletions
--- a/components/GuestsRoomsPicker/index.tsx
+++ b/components/GuestsRoomsPicker/index.tsx
@@ -1,37 +1,64 @@
 "use client"

-import { useCallback, useEffect, useRef, useState } from "react"
-import { Button, DialogTrigger, Popover } from "react-aria-components"
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  Modal,
+  Popover,
+} from "react-aria-components"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { useGuestsRoomsStore } from "@/stores/guests-rooms"
-
-import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema"
 import Body from "@/components/TempDesignSystem/Text/Body"

-import Dialog from "./Dialog"
+import PickerForm from "./Form"

 import styles from "./guests-rooms-picker.module.css"

-export default function GuestsRoomsPickerForm({
-  name = "rooms",
+import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPickerForm() {
+  const { watch } = useFormContext()
+
+  const rooms = watch("rooms") as GuestsRoom[]
+
+  return (
+    <>
+      <DialogTrigger>
+        <Trigger rooms={rooms} className={styles.triggerMobile} />
+        <Modal className="my-modal">
+          <Dialog className={styles.pickerContainerMobile}>
+            {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
+      <DialogTrigger>
+        <Trigger rooms={rooms} className={styles.triggerDesktop} />
+        <Popover placement="bottom start" offset={22}>
+          <Dialog className={styles.pickerContainerDesktop}>
+            {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+    </>
+  )
+}
+
+function Trigger({
+  rooms,
+  className,
 }: {
-  name: string
+  rooms: GuestsRoom[]
+  className: string
 }) {
  const intl = useIntl()

-  const { rooms, adultCount, childCount } = useGuestsRoomsStore((state) => ({
-    rooms: state.rooms,
-    adultCount: state.adultCount,
-    childCount: state.childCount,
-  }))
-
  return (
-    <DialogTrigger>
-      <Button className={styles.btn} type="button">
-        <Body className={styles.body} asChild>
-          <span>
+    <Button className={`${className} ${styles.btn}`} type="button">
+      <Body>
+        {rooms.map((room, i) => (
+          <span key={i}>
            {intl.formatMessage(
              { id: "booking.rooms" },
              { totalRooms: rooms.length }
@@ -39,21 +66,18 @@ export default function GuestsRoomsPickerForm({
            {", "}
            {intl.formatMessage(
              { id: "booking.adults" },
-              { totalAdults: adultCount }
+              { totalAdults: room.adults }
            )}
-            {childCount > 0
+            {room.child.length > 0
              ? ", " +
                intl.formatMessage(
                  { id: "booking.children" },
-                  { totalChildren: childCount }
+                  { totalChildren: room.child.length }
                )
              : null}
          </span>
-        </Body>
-      </Button>
-      <Popover>
-        <Dialog />
-      </Popover>
-    </DialogTrigger>
+        ))}
+      </Body>
+    </Button>
  )
 }