feat: SW-276 Implemented child age validation

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx

@@ -12,6 +12,7 @@ type ChildSelectorProps = {
   index: number
   availableBedTypes?: ChildBed[]
   updateChild: (child: Child, index: number) => void
+  childAgeError: boolean
 }
 
 export default function ChildInfoSelector({
@@ -23,6 +24,7 @@ export default function ChildInfoSelector({
     { label: "In extra bed", value: 2 },
   ],
   updateChild = (child: Child, index: number) => {},
+  childAgeError,
 }: ChildSelectorProps) {
   const intl = useIntl()
   const ageLabel = intl.formatMessage({ id: "Age" })
@@ -55,29 +57,38 @@ export default function ChildInfoSelector({
 
   return (
     <>
-      <Select
-        size={2}
-        items={ageList}
-        label={ageLabel}
-        aria-label={ageLabel}
-        value={child.age}
-        onSelect={(key) => {
-          handleOnSelect(key, "age")
-        }}
-        name="age"
-      />
-      {child.age !== -1 ? (
+      <div>
         <Select
-          items={availableBedTypes}
-          label={bedLabel}
-          aria-label={bedLabel}
-          value={child.bed}
+          required={true}
+          items={ageList}
+          label={ageLabel}
+          aria-label={ageLabel}
+          value={child.age}
           onSelect={(key) => {
-            handleOnSelect(key, "bed")
+            handleOnSelect(key, "age")
           }}
-          name="bed"
+          name="age"
+          placeholder={ageLabel}
         />
-      ) : null}
+        {childAgeError && child.age < 0 ? (
+          <span>Child Age is required</span>
+        ) : null}
+      </div>
+      <div>
+        {child.age !== -1 ? (
+          <Select
+            items={availableBedTypes}
+            label={bedLabel}
+            aria-label={bedLabel}
+            value={child.bed}
+            onSelect={(key) => {
+              handleOnSelect(key, "bed")
+            }}
+            name="bed"
+            placeholder={bedLabel}
+          />
+        ) : null}
+      </div>
     </>
   )
 }