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

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

@@ -5,8 +5,9 @@
 }
 
 .childInfoContainer {
-  display: flex;
-  gap: 20px;
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 2fr;
 }
 
 .textCenter {

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx

@@ -17,6 +17,7 @@ export default function ChildSelector({
   roomChildren = [],
   adultCount = 1,
   updateChildren = (children: Child[]) => {},
+  childAgeError,
 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
@@ -59,19 +60,32 @@ export default function ChildSelector({
   }
   roomChildren.forEach((child, index) => {
     let types: typeof availableBedTypes = []
+    let selectedBed: boolean = false
     if (
       child.age <= 5 &&
       (availableInAdultsBed > 0 || childInAdultsBedIndices.indexOf(index) != -1)
     ) {
       types.push(availableBedTypes[0])
+      if (child.bed == 0) {
+        selectedBed = true
+      }
     }
     if (child.age < 3) {
       types.push(availableBedTypes[1])
+      if (child.bed == 1) {
+        selectedBed = true
+      }
     }
     if (child.age > 2) {
       types.push(availableBedTypes[2])
+      if (child.bed == 2) {
+        selectedBed = true
+      }
     }
     childBedTypes[index] = types
+    if (!selectedBed) {
+      child.bed = types[0].value
+    }
   })
 
   return (
@@ -93,6 +107,7 @@ export default function ChildSelector({
             child={child}
             availableBedTypes={childBedTypes[index]}
             updateChild={updateChildInfo}
+            childAgeError={childAgeError}
           />
         </div>
       ))}

components/GuestsRoomsPicker/GuestsRoomPicker/guests-room-picker.module.css

@@ -1,5 +1,4 @@
 .container {
-  width: 280px;
   display: grid;
   gap: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x1);

components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx

@@ -17,6 +17,7 @@ export default function GuestsRoomPicker({
   handleOnSelect = (selected: GuestsRoom, index: number) => {},
   room = { adults: 1, children: [] },
   index = 1,
+  childAgeError,
 }: GuestsRoomPickerProps) {
   const intl = useIntl()
   const roomLabel = intl.formatMessage({ id: "Room" })
@@ -41,6 +42,7 @@ export default function GuestsRoomPicker({
         roomChildren={room.children}
         adultCount={room.adults}
         updateChildren={updateChildren}
+        childAgeError={childAgeError}
       />
     </section>
   )