feat: SW-276 Implemented Store usage

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -0,0 +1,131 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { guestsRoomsStore } from "@/stores/guests-rooms"
+
+import Select from "@/components/TempDesignSystem/Select"
+
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import {
+  ChildBed,
+  ChildInfoSelectorProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildInfoSelector({
+  child = { age: -1, bed: -1 },
+  index = 0,
+  roomIndex = 0,
+}: ChildInfoSelectorProps) {
+  const intl = useIntl()
+  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 } = guestsRoomsStore().rooms[roomIndex]
+  const {
+    isValidated,
+    updateChildAge,
+    updateChildBed,
+    increaseChildInAdultsBed,
+    decreaseChildInAdultsBed,
+  } = guestsRoomsStore()
+
+  const ageList = [
+    { label: "0", value: 0 },
+    { label: "1", value: 1 },
+    { label: "2", value: 2 },
+    { label: "3", value: 3 },
+    { label: "4", value: 4 },
+    { label: "5", value: 5 },
+    { label: "6", value: 6 },
+    { label: "7", value: 7 },
+    { label: "8", value: 8 },
+    { label: "9", value: 9 },
+    { label: "10", value: 10 },
+    { label: "11", value: 11 },
+    { label: "12", value: 12 },
+  ]
+
+  function updateSelectedAge(age: number) {
+    updateChildAge(age, roomIndex, index)
+    setValue(`rooms.${roomIndex}.children.${index}.age`, age, {
+      shouldTouch: true,
+    })
+    const availableBedTypes = getAvailableBeds(age)
+    updateSelectedBed(availableBedTypes[0].value)
+  }
+
+  function updateSelectedBed(bed: number) {
+    if (bed == BedTypeEnum["In adults bed"] && childrenInAdultsBed < adults) {
+      increaseChildInAdultsBed(roomIndex)
+    } else if (child.bed == BedTypeEnum["In adults bed"]) {
+      decreaseChildInAdultsBed(roomIndex)
+    }
+    updateChildBed(bed, roomIndex, index)
+    setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
+  }
+
+  const allBedTypes: ChildBed[] = [
+    {
+      label: intl.formatMessage({ id: "In adults bed" }),
+      value: BedTypeEnum["In adults bed"],
+    },
+    {
+      label: intl.formatMessage({ id: "In crib" }),
+      value: BedTypeEnum["In crib"],
+    },
+    {
+      label: intl.formatMessage({ id: "In extra bed" }),
+      value: BedTypeEnum["In extra bed"],
+    },
+  ]
+
+  function getAvailableBeds(age: number) {
+    let availableBedTypes: ChildBed[] = []
+    if (age <= 5 && (adults > childrenInAdultsBed || child.bed === 0)) {
+      availableBedTypes.push(allBedTypes[0])
+    }
+    if (age < 3) {
+      availableBedTypes.push(allBedTypes[1])
+    }
+    if (age > 2) {
+      availableBedTypes.push(allBedTypes[2])
+    }
+    return availableBedTypes
+  }
+
+  return (
+    <>
+      <div>
+        <Select
+          required={true}
+          items={ageList}
+          label={ageLabel}
+          aria-label={ageLabel}
+          value={child.age}
+          onSelect={(key) => {
+            updateSelectedAge(parseInt(key.toString()))
+          }}
+          name={`rooms.${roomIndex}.children.${index}.age`}
+          placeholder={ageLabel}
+        />
+        {isValidated && child.age < 0 ? <span>{ageReqdErrMsg}</span> : null}
+      </div>
+      <div>
+        {child.age !== -1 ? (
+          <Select
+            items={getAvailableBeds(child.age)}
+            label={bedLabel}
+            aria-label={bedLabel}
+            value={child.bed}
+            onSelect={(key) => {
+              updateSelectedBed(parseInt(key.toString()))
+            }}
+            name={`rooms.${roomIndex}.children.${index}.age`}
+            placeholder={bedLabel}
+          />
+        ) : null}
+      </div>
+    </>
+  )
+}

components/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  align-items: center;
+}
+
+.childInfoContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 2fr;
+}
+
+.textCenter {
+  text-align: center;
+}

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>
+      ))}
+    </>
+  )
+}