feat: SW-276 Implemented Store usage

components/GuestsRoomsPicker/index.tsx

@@ -1,9 +1,10 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react"
-import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { guestsRoomsStore } from "@/stores/guests-rooms"
+
 import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -11,35 +12,24 @@ import GuestsRoomsPicker from "./GuestsRoomsPicker"
 
 import styles from "./guests-rooms-picker.module.css"
 
-import {
-  GuestsRoom,
-  GuestsRoomsFormProps,
-} from "@/types/components/bookingWidget/guestsRoomsPicker"
-
-export default function GuestsRoomsPickerForm({
-  name = "rooms",
-}: GuestsRoomsFormProps) {
+export default function GuestsRoomsPickerForm() {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
-  const [isValid, setIsValid] = useState(true)
-  const selectedGuests = useWatch({ name })
-  const { register, setValue } = useFormContext()
+  const guestsData = guestsRoomsStore().rooms
+  const { adultCount, childCount, setIsValidated } = guestsRoomsStore()
   const ref = useRef<HTMLDivElement | null>(null)
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)
   }
-  function handleSelectGuest(selected: GuestsRoom[]) {
-    setValue(name, selected)
-    setIsValid(true)
-  }
   const closePicker = useCallback(() => {
-    const guestRoomsValidData = guestRoomsSchema.safeParse(selectedGuests)
+    const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData)
     if (guestRoomsValidData.success) {
       setIsOpen(false)
+      setIsValidated(false)
     } else {
-      setIsValid(false)
+      setIsValidated(true)
     }
-  }, [selectedGuests])
+  }, [guestsData, setIsValidated, setIsOpen])
 
   useEffect(() => {
     function handleClickOutside(evt: Event) {
@@ -54,16 +44,10 @@ export default function GuestsRoomsPickerForm({
     }
   }, [closePicker])
 
-  let selectedAdultsCount = 0
-  let selectedChildrenCount = 0
-  selectedGuests.forEach((room: GuestsRoom) => {
-    selectedAdultsCount = selectedAdultsCount + room.adults
-    selectedChildrenCount =
-      selectedChildrenCount + (room.children ? room.children.length : 0)
-  })
-  const selectedRoomsCount = selectedGuests.length
+  const selectedRoomsCount = guestsData.length
+
   const childCountLabel =
-    selectedChildrenCount > 1
+    childCount > 1
       ? intl.formatMessage({ id: "Children" })
       : intl.formatMessage({ id: "Child" })
 
@@ -76,22 +60,15 @@ export default function GuestsRoomsPickerForm({
             ? intl.formatMessage({ id: "Rooms" })
             : intl.formatMessage({ id: "Room" })}
           {", "}
-          {selectedAdultsCount}{" "}
-          {selectedAdultsCount > 1
+          {adultCount}{" "}
+          {adultCount > 1
             ? intl.formatMessage({ id: "Adults" })
             : intl.formatMessage({ id: "Adult" })}
-          {selectedChildrenCount > 0
-            ? ", " + selectedChildrenCount + " " + childCountLabel
-            : null}
+          {childCount > 0 ? ", " + childCount + " " + childCountLabel : null}
         </Body>
       </button>
       <div aria-modal className={styles.hideWrapper} role="dialog">
-        <GuestsRoomsPicker
-          handleOnSelect={handleSelectGuest}
-          initialSelected={selectedGuests}
-          closePicker={closePicker}
-          isValid={isValid}
-        />
+        <GuestsRoomsPicker closePicker={closePicker} />
       </div>
     </div>
   )