feat: SW-276 Updated UI as per design

2024-10-14 08:50:55 +02:00
parent b8f7f91fb4
commit cefed89ae5
9 changed files with 97 additions and 100 deletions
--- a/components/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -5,11 +5,9 @@ import { useIntl } from "react-intl"

 import { useGuestsRoomsStore } 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 Counter from "../Counter"
 import ChildInfoSelector from "./ChildInfoSelector"

 import styles from "./child-selector.module.css"
@@ -34,7 +32,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
        age: -1,
        bed: -1,
      })
-      trigger()
+      trigger("rooms")
    }
  }
  function decreaseChildrenCount(roomIndex: number) {
@@ -51,39 +49,17 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
        <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>
+        <Counter
+          count={children.length}
+          handleOnDecrease={() => {
+            decreaseChildrenCount(roomIndex)
+          }}
+          handleOnIncrease={() => {
+            increaseChildrenCount(roomIndex)
+          }}
+          disableDecrease={children.length == 0}
+          disableIncrease={children.length == 5}
+        />
      </section>
      {children.map((child, index) => (
        <ChildInfoSelector