feat: SW-276 Implemented Store usage

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -0,0 +1,68 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { guestsRoomsStore } from "@/stores/guests-rooms"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import ChildInfoSelector from "./ChildInfoSelector"
+
+import styles from "./child-selector.module.css"
+
+import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({ id: "Children" })
+  const { setValue } = useFormContext()
+  const children = guestsRoomsStore().rooms[roomIndex].children
+  const { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore()
+
+  function updateChildrenCount(direction: string, roomIndex: number) {
+    if (direction == "up" && children.length < 5) {
+      increaseChildren(roomIndex)
+      setValue(`rooms.${roomIndex}.children.${children.length}`, {
+        age: -1,
+        bed: -1,
+      })
+    } else if (children.length > 0) {
+      decreaseChildren(roomIndex)
+      let newChildrenList = JSON.parse(JSON.stringify(children))
+      newChildrenList.pop()
+      setValue(`rooms.${roomIndex}.children`, newChildrenList)
+    }
+  }
+
+  return (
+    <>
+      <section className={styles.container}>
+        <Caption>{childrenLabel}</Caption>
+        <Button
+          intent="text"
+          size="small"
+          onClick={() => updateChildrenCount("down", roomIndex)}
+        >
+          -
+        </Button>
+        <span className={styles.textCenter}>{children.length}</span>
+        <Button
+          intent="text"
+          size="small"
+          onClick={() => updateChildrenCount("up", roomIndex)}
+        >
+          +
+        </Button>
+      </section>
+      {children.map((child, index) => (
+        <div key={index} className={styles.childInfoContainer}>
+          <ChildInfoSelector
+            roomIndex={roomIndex}
+            index={index}
+            child={child}
+          />
+        </div>
+      ))}
+    </>
+  )
+}