fix: remove guest picker store

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -3,8 +3,6 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useGuestsRoomsStore } from "@/stores/guests-rooms"
-
 import { ErrorCircleIcon } from "@/components/Icons"
 import Select from "@/components/TempDesignSystem/Select"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -19,6 +17,8 @@ import {
 
 export default function ChildInfoSelector({
   child = { age: -1, bed: -1 },
+  childrenInAdultsBed,
+  adults,
   index = 0,
   roomIndex = 0,
 }: ChildInfoSelectorProps) {
@@ -26,23 +26,7 @@ export default function ChildInfoSelector({
   const ageLabel = intl.formatMessage({ id: "Age" })
   const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
-  const { setValue } = useFormContext()
-  const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
-    (state) => state.rooms[roomIndex]
-  )
-  const {
-    isValidated,
-    updateChildAge,
-    updateChildBed,
-    increaseChildInAdultsBed,
-    decreaseChildInAdultsBed,
-  } = useGuestsRoomsStore((state) => ({
-    isValidated: state.isValidated,
-    updateChildAge: state.updateChildAge,
-    updateChildBed: state.updateChildBed,
-    increaseChildInAdultsBed: state.increaseChildInAdultsBed,
-    decreaseChildInAdultsBed: state.decreaseChildInAdultsBed,
-  }))
+  const { setValue, formState } = useFormContext()
 
   const ageList = Array.from(Array(13).keys()).map((age) => ({
     label: `${age}`,
@@ -50,7 +34,6 @@ export default function ChildInfoSelector({
   }))
 
   function updateSelectedAge(age: number) {
-    updateChildAge(age, roomIndex, index)
     setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
       shouldValidate: true,
     })
@@ -59,12 +42,6 @@ export default function ChildInfoSelector({
   }
 
   function updateSelectedBed(bed: number) {
-    if (bed == ChildBedMapEnum.IN_ADULTS_BED) {
-      increaseChildInAdultsBed(roomIndex)
-    } else if (child.bed == ChildBedMapEnum.IN_ADULTS_BED) {
-      decreaseChildInAdultsBed(roomIndex)
-    }
-    updateChildBed(bed, roomIndex, index)
     setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
   }
 
@@ -97,6 +74,7 @@ export default function ChildInfoSelector({
     return availableBedTypes
   }
 
+  console.log("ALL TJHE ERORRORS", formState.errors)
   return (
     <>
       <div key={index} className={styles.childInfoContainer}>
@@ -131,12 +109,13 @@ export default function ChildInfoSelector({
           ) : null}
         </div>
       </div>
-      {isValidated && child.age < 0 ? (
+
+      {/* {isValidated && child.age < 0 ? (
         <Caption color="red" className={styles.error}>
           <ErrorCircleIcon color="red" />
           {ageReqdErrMsg}
         </Caption>
-      ) : null}
+      ) : null} */}
     </>
   )
 }

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -3,8 +3,6 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useGuestsRoomsStore } from "@/stores/guests-rooms"
-
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Counter from "../Counter"
@@ -13,25 +11,22 @@ import ChildInfoSelector from "./ChildInfoSelector"
 import styles from "./child-selector.module.css"
 
 import { BookingWidgetSchema } from "@/types/components/bookingWidget"
-import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+import { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
-export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
+export default function ChildSelector({
+  roomIndex = 0,
+  currentAdults,
+  childrenInAdultsBed,
+  currentChildren,
+}: SelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
-  const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
-  const children = useGuestsRoomsStore((state) => state.rooms[roomIndex].child)
-  const increaseChildren = useGuestsRoomsStore(
-    (state) => state.increaseChildren
-  )
-  const decreaseChildren = useGuestsRoomsStore(
-    (state) => state.decreaseChildren
-  )
+  const { setValue } = useFormContext<BookingWidgetSchema>()
 
   function increaseChildrenCount(roomIndex: number) {
-    if (children.length < 5) {
-      increaseChildren(roomIndex)
+    if (currentChildren.length < 5) {
       setValue(
-        `rooms.${roomIndex}.child.${children.length}`,
+        `rooms.${roomIndex}.child.${currentChildren.length}`,
         {
           age: -1,
           bed: -1,
@@ -41,9 +36,9 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
     }
   }
   function decreaseChildrenCount(roomIndex: number) {
-    if (children.length > 0) {
-      const newChildrenList = decreaseChildren(roomIndex)
-      setValue(`rooms.${roomIndex}.child`, newChildrenList, {
+    if (currentChildren.length > 0) {
+      currentChildren.pop()
+      setValue(`rooms.${roomIndex}.child`, currentChildren, {
         shouldValidate: true,
       })
     }
@@ -56,23 +51,25 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
           {childrenLabel}
         </Caption>
         <Counter
-          count={children.length}
+          count={currentChildren.length}
           handleOnDecrease={() => {
             decreaseChildrenCount(roomIndex)
           }}
           handleOnIncrease={() => {
             increaseChildrenCount(roomIndex)
           }}
-          disableDecrease={children.length == 0}
-          disableIncrease={children.length == 5}
+          disableDecrease={currentChildren.length == 0}
+          disableIncrease={currentChildren.length == 5}
         />
       </section>
-      {children.map((child, index) => (
+      {currentChildren.map((child, index) => (
         <ChildInfoSelector
           roomIndex={roomIndex}
           index={index}
           child={child}
+          adults={currentAdults}
           key={"child_" + index}
+          childrenInAdultsBed={childrenInAdultsBed}
         />
       ))}
     </>