feat: SW-276 SW-565 Updated UI

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -1,9 +1,15 @@
+"use client"
+
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { guestsRoomsStore } from "@/stores/guests-rooms"
 
+import { ErrorCircleIcon } from "@/components/Icons"
 import Select from "@/components/TempDesignSystem/Select"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./child-selector.module.css"
 
 import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
 import {
@@ -96,36 +102,43 @@ export default function ChildInfoSelector({
 
   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 ? (
+      <div key={index} className={styles.childInfoContainer}>
+        <div>
           <Select
-            items={getAvailableBeds(child.age)}
-            label={bedLabel}
-            aria-label={bedLabel}
-            value={child.bed}
+            required={true}
+            items={ageList}
+            label={ageLabel}
+            aria-label={ageLabel}
+            value={child.age}
             onSelect={(key) => {
-              updateSelectedBed(parseInt(key.toString()))
+              updateSelectedAge(parseInt(key.toString()))
             }}
             name={`rooms.${roomIndex}.children.${index}.age`}
-            placeholder={bedLabel}
+            placeholder={ageLabel}
           />
-        ) : 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>
       </div>
+      {isValidated && child.age < 0 ? (
+        <Caption color="red" className={styles.error}>
+          <ErrorCircleIcon color="red" />
+          {intl.formatMessage({ id: "Child age is required" })}
+        </Caption>
+      ) : null}
     </>
   )
 }