feat: SW-276 Implemented Guests and rooms picker

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx

@@ -0,0 +1,83 @@
+import { useIntl } from "react-intl"
+
+import Select from "@/components/TempDesignSystem/Select"
+
+import {
+  Child,
+  ChildBed,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+type ChildSelectorProps = {
+  child: Child
+  index: number
+  availableBedTypes?: ChildBed[]
+  updateChild: (child: Child, index: number) => void
+}
+
+export default function ChildInfoSelector({
+  child = { age: -1, bed: -1 },
+  index = 0,
+  availableBedTypes = [
+    { label: "In adults bed", value: 0 },
+    { label: "In crib", value: 1 },
+    { label: "In extra bed", value: 2 },
+  ],
+  updateChild = (child: Child, index: number) => {},
+}: ChildSelectorProps) {
+  const intl = useIntl()
+  const ageLabel = intl.formatMessage({ id: "Age" })
+  const bedLabel = intl.formatMessage({ id: "Bed" })
+
+  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 handleOnSelect(selectedKey: any, childInfo: string) {
+    if (childInfo == "age") {
+      child.age = selectedKey
+    } else if (childInfo == "bed") {
+      child.bed = selectedKey
+    }
+    updateChild(child, index)
+  }
+
+  return (
+    <>
+      <Select
+        size={2}
+        items={ageList}
+        label={ageLabel}
+        aria-label={ageLabel}
+        value={child.age}
+        onSelect={(key) => {
+          handleOnSelect(key, "age")
+        }}
+        name="age"
+      />
+      {child.age !== -1 ? (
+        <Select
+          items={availableBedTypes}
+          label={bedLabel}
+          aria-label={bedLabel}
+          value={child.bed}
+          onSelect={(key) => {
+            handleOnSelect(key, "bed")
+          }}
+          name="bed"
+        />
+      ) : null}
+    </>
+  )
+}

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

@@ -0,0 +1,14 @@
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  align-items: center;
+}
+
+.childInfoContainer {
+  display: flex;
+  gap: 20px;
+}
+
+.textCenter {
+  text-align: center;
+}

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx

@@ -0,0 +1,101 @@
+import { useIntl } from "react-intl"
+
+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 {
+  Child,
+  ChildBed,
+  ChildSelectorProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildSelector({
+  roomChildren = [],
+  adultCount = 1,
+  updateChildren = (children: Child[]) => {},
+}: ChildSelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({ id: "Children" })
+
+  function decreaseChildren() {
+    if (roomChildren.length < 1) {
+      return
+    }
+    roomChildren.pop()
+    updateChildren(roomChildren)
+  }
+
+  function increaseChildren() {
+    if (roomChildren.length > 5) {
+      return
+    }
+    roomChildren.push({ age: -1, bed: -1 })
+    updateChildren(roomChildren)
+  }
+
+  function updateChildInfo(child: Child, index: number) {
+    roomChildren[index] = child
+    updateChildren(roomChildren)
+  }
+
+  const childInAdultsBedIndices: number[] = []
+  let availableInAdultsBed = adultCount
+  const availableBedTypes: ChildBed[] = [
+    { label: intl.formatMessage({ id: "In adults bed" }), value: 0 },
+    { label: intl.formatMessage({ id: "In crib" }), value: 1 },
+    { label: intl.formatMessage({ id: "In extra bed" }), value: 2 },
+  ]
+
+  const childBedTypes: ChildBed[][] = []
+  for (let i = 0; i < roomChildren.length; i++) {
+    if (roomChildren[i].bed == 0 && availableInAdultsBed > 0) {
+      childInAdultsBedIndices.push(i)
+      availableInAdultsBed = availableInAdultsBed - 1
+    }
+  }
+  roomChildren.forEach((child, index) => {
+    let types: typeof availableBedTypes = []
+    if (
+      child.age <= 5 &&
+      (availableInAdultsBed > 0 || childInAdultsBedIndices.indexOf(index) != -1)
+    ) {
+      types.push(availableBedTypes[0])
+    }
+    if (child.age < 3) {
+      types.push(availableBedTypes[1])
+    }
+    if (child.age > 2) {
+      types.push(availableBedTypes[2])
+    }
+    childBedTypes[index] = types
+  })
+
+  return (
+    <>
+      <section className={styles.container}>
+        <Caption>{childrenLabel}</Caption>
+        <Button intent="text" size="small" onClick={decreaseChildren}>
+          -
+        </Button>
+        <span className={styles.textCenter}>{roomChildren.length}</span>
+        <Button intent="text" size="small" onClick={increaseChildren}>
+          +
+        </Button>
+      </section>
+      {roomChildren.map((child, index) => (
+        <div key={index} className={styles.childInfoContainer}>
+          <ChildInfoSelector
+            index={index}
+            child={child}
+            availableBedTypes={childBedTypes[index]}
+            updateChild={updateChildInfo}
+          />
+        </div>
+      ))}
+    </>
+  )
+}