feat: SW-276 Implemented Store usage

components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  align-items: center;
+}
+
+.textCenter {
+  text-align: center;
+}

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+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 styles from "./adult-selector.module.css"
+
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
+  const intl = useIntl()
+  const adultsLabel = intl.formatMessage({ id: "Adults" })
+  const { setValue } = useFormContext()
+  const { adults, children } = guestsRoomsStore().rooms[roomIndex]
+  const { increaseAdults, decreaseAdults } = guestsRoomsStore()
+
+  function increaseAdultsCount(roomIndex: number) {
+    if (adults < 6) {
+      increaseAdults(roomIndex)
+      setValue(`rooms.${roomIndex}.adults`, adults + 1)
+    }
+  }
+
+  function decreaseAdultsCount(roomIndex: number) {
+    if (adults > 1) {
+      decreaseAdults(roomIndex)
+      setValue(`rooms.${roomIndex}.adults`, adults - 1)
+      let inAdultsBed = 0
+      let toUpdateIndex = -1
+      children.forEach((child, index) => {
+        if (child.bed == BedTypeEnum["In adults bed"]) {
+          inAdultsBed = inAdultsBed + 1
+          if (inAdultsBed > adults - 1) toUpdateIndex = index
+        }
+      })
+      if (toUpdateIndex != -1) {
+        setValue(
+          `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
+          children[toUpdateIndex].age < 3 ? 1 : 2
+        )
+      }
+    }
+  }
+
+  return (
+    <section className={styles.container}>
+      <Caption>{adultsLabel}</Caption>
+      <Button
+        onClick={() => {
+          decreaseAdultsCount(roomIndex)
+        }}
+        intent="text"
+        size="small"
+      >
+        -
+      </Button>
+      <span className={styles.textCenter}>{adults}</span>
+      <Button
+        onClick={() => {
+          increaseAdultsCount(roomIndex)
+        }}
+        intent="text"
+        size="small"
+      >
+        +
+      </Button>
+    </section>
+  )
+}