feat(SW-453) added filter options

2024-10-24 08:35:34 +02:00
parent aea963740b
commit fc63a8e5ca
16 changed files with 138 additions and 120 deletions
@@ -1,32 +1,93 @@
 "use client"

+import { zodResolver } from "@hookform/resolvers/zod"
+import { useRef } from "react"
+import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

-import Checkbox from "@/components/TempDesignSystem/Checkbox"
+import { roomFilterSchema } from "@/server/routers/hotels/schemas/room"
+
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

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

-import { RoomFilterProps } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import {
+  RoomFilterFormData,
+  RoomFilterProps,
+} from "@/types/components/hotelReservation/selectRate/roomFilter"

 function RoomFilter({ numberOfRooms }: RoomFilterProps) {
  const intl = useIntl()
+  const methods = useForm<RoomFilterFormData>({
+    defaultValues: {
+      allergyFriendly: false,
+      petFriendly: false,
+      accessibility: false,
+    },
+    mode: "all",
+    reValidateMode: "onChange",
+    resolver: zodResolver(roomFilterSchema),
+  })
+
+  const formRef = useRef<HTMLFormElement | null>(null)
+  const { watch, setValue } = methods
+  const petFriendly = watch("petFriendly")
+  const allergyFriendly = watch("allergyFriendly")
+
+  const onSubmit = (data: RoomFilterFormData) => {
+    if (data.petFriendly) {
+      setValue("allergyFriendly", false)
+    } else if (data.allergyFriendly) {
+      setValue("petFriendly", false)
+    }
+    console.log("Form submitted with data:", data)
+  }
+
  return (
    <div className={styles.container}>
      <Body color="uiTextHighContrast">
-        {numberOfRooms}{" "}
-        {intl.formatMessage(
-          { id: "Room types available" },
-          { numberOfRooms: numberOfRooms }
-        )}
+        {intl.formatMessage({ id: "Room types available" }, { numberOfRooms })}
      </Body>
-      <div className={styles.roomsFilter}>
-        <div>
-          <Checkbox name="accessibilty" />
-          <Caption color="uiTextHighContrast">Accessibility room</Caption>
-        </div>
-      </div>
+      <FormProvider {...methods}>
+        <form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>
+          <div className={styles.roomsFilter}>
+            <Checkbox
+              name="accessibility"
+              onChange={() => formRef.current?.requestSubmit()}
+            >
+              <Caption color="uiTextHighContrast">
+                {intl.formatMessage({ id: "Accessibility room" })}
+              </Caption>
+            </Checkbox>
+            <Checkbox
+              name="petFriendly"
+              onChange={() => {
+                setValue("petFriendly", !petFriendly)
+                formRef.current?.requestSubmit()
+              }}
+              registerOptions={{ disabled: allergyFriendly }}
+            >
+              <Caption color="uiTextHighContrast">
+                {intl.formatMessage({ id: "Pet room" })}
+              </Caption>
+            </Checkbox>
+            <Checkbox
+              name="allergyFriendly"
+              onChange={() => {
+                setValue("allergyFriendly", !allergyFriendly)
+                formRef.current?.requestSubmit()
+              }}
+              registerOptions={{ disabled: petFriendly }}
+            >
+              <Caption color="uiTextHighContrast">
+                {intl.formatMessage({ id: "Allergy room" })}
+              </Caption>
+            </Checkbox>
+          </div>
+        </form>
+      </FormProvider>
    </div>
  )
 }
@@ -3,3 +3,9 @@
  flex-direction: row;
  justify-content: space-between;
 }
+
+.roomsFilter {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x3);
+}