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

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

@@ -1,8 +1,21 @@
 .container {
-  display: grid;
-  grid-template-columns: repeat(4, auto);
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
+.captionBold {
+  font-weight: 600;
+}
+.counterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+}
+.counterBtn {
+  width: 40px;
+  height: 40px;
+}
 
 .childInfoContainer {
   display: grid;
@@ -10,6 +23,8 @@
   grid-template-columns: 1fr 2fr;
 }
 
-.textCenter {
-  text-align: center;
+.error {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
 }

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -1,9 +1,13 @@
+"use client"
+
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { guestsRoomsStore } from "@/stores/guests-rooms"
 
+import { MinusIcon, PlusIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import ChildInfoSelector from "./ChildInfoSelector"
@@ -40,31 +44,50 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   return (
     <>
       <section className={styles.container}>
-        <Caption>{childrenLabel}</Caption>
-        <Button
-          intent="text"
-          size="small"
-          onClick={() => decreaseChildrenCount(roomIndex)}
-        >
-          -
-        </Button>
-        <span className={styles.textCenter}>{children.length}</span>
-        <Button
-          intent="text"
-          size="small"
-          onClick={() => increaseChildrenCount(roomIndex)}
-        >
-          +
-        </Button>
+        <Caption color="uiTextHighContrast" textTransform="bold">
+          {childrenLabel}
+        </Caption>
+        <div className={styles.counterContainer}>
+          <Button
+            className={styles.counterBtn}
+            intent="elevated"
+            onClick={() => {
+              decreaseChildrenCount(roomIndex)
+            }}
+            size="small"
+            theme="base"
+            variant="icon"
+            wrapping={true}
+            disabled={children.length == 0}
+          >
+            <MinusIcon color="burgundy" />
+          </Button>
+          <Body color="textHighContrast" textAlign="center">
+            {children.length}
+          </Body>
+          <Button
+            className={styles.counterBtn}
+            onClick={() => {
+              increaseChildrenCount(roomIndex)
+            }}
+            intent="elevated"
+            variant="icon"
+            theme="base"
+            wrapping={true}
+            size="small"
+            disabled={children.length == 5}
+          >
+            <PlusIcon color="burgundy" />
+          </Button>
+        </div>
       </section>
       {children.map((child, index) => (
-        <div key={index} className={styles.childInfoContainer}>
-          <ChildInfoSelector
-            roomIndex={roomIndex}
-            index={index}
-            child={child}
-          />
-        </div>
+        <ChildInfoSelector
+          roomIndex={roomIndex}
+          index={index}
+          child={child}
+          key={index}
+        />
       ))}
     </>
   )