diff --git a/components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css b/components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css index a35254d1c..60c4c8711 100644 --- a/components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css +++ b/components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css @@ -3,13 +3,3 @@ justify-content: space-between; align-items: center; } -.counterContainer { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 20px; -} -.counterBtn { - width: 40px; - height: 40px; -} diff --git a/components/GuestsRoomsPicker/AdultSelector/index.tsx b/components/GuestsRoomsPicker/AdultSelector/index.tsx index d95258c5e..b821aa224 100644 --- a/components/GuestsRoomsPicker/AdultSelector/index.tsx +++ b/components/GuestsRoomsPicker/AdultSelector/index.tsx @@ -5,11 +5,10 @@ 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 styles from "./adult-selector.module.css" import { BedTypeEnum } from "@/types/components/bookingWidget/enums" @@ -60,39 +59,17 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) { {adultsLabel} -
- - - {adults} - - -
+ { + decreaseAdultsCount(roomIndex) + }} + handleOnIncrease={() => { + increaseAdultsCount(roomIndex) + }} + disableDecrease={adults == 1} + disableIncrease={adults == 6} + /> ) } diff --git a/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css b/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css index c7391016a..530babb64 100644 --- a/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css +++ b/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css @@ -3,19 +3,10 @@ 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; diff --git a/components/GuestsRoomsPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/ChildSelector/index.tsx index eee62bcd0..44542c392 100644 --- 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) { {childrenLabel} -
- - - {children.length} - - -
+ { + decreaseChildrenCount(roomIndex) + }} + handleOnIncrease={() => { + increaseChildrenCount(roomIndex) + }} + disableDecrease={children.length == 0} + disableIncrease={children.length == 5} + /> {children.map((child, index) => ( + + + {count} + + + + ) +} diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index ab603eb8a..1ad432836 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -56,12 +56,6 @@ a.text { outline: none; } -.elevated, -a.elevated { - border: none; - box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1); -} - /* VARIANTS */ .default, a.default { diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts index f87d399f1..77abd40e4 100644 --- a/components/TempDesignSystem/Button/variants.ts +++ b/components/TempDesignSystem/Button/variants.ts @@ -10,7 +10,6 @@ export const buttonVariants = cva(styles.btn, { secondary: styles.secondary, tertiary: styles.tertiary, text: styles.text, - elevated: styles.elevated, }, size: { small: styles.small, diff --git a/types/components/bookingWidget/guestsRoomsPicker.ts b/types/components/bookingWidget/guestsRoomsPicker.ts index a7b0bec48..5b3b7b3e2 100644 --- a/types/components/bookingWidget/guestsRoomsPicker.ts +++ b/types/components/bookingWidget/guestsRoomsPicker.ts @@ -34,3 +34,11 @@ export type ChildInfoSelectorProps = { index: number roomIndex: number } + +export interface CounterProps { + count: number + handleOnIncrease: () => void + handleOnDecrease: () => void + disableIncrease: boolean + disableDecrease: boolean +}