feat: SW-276 Implemented Guests and rooms picker

2024-09-12 11:30:56 +02:00
parent f4be831a78
commit 24f7bc290d
19 changed files with 605 additions and 4 deletions
--- a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/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}
+    </>
+  )
+}