diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css b/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css index dd5f45c74..37a120103 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css @@ -1,6 +1,6 @@ .container { display: grid; - grid-template-columns: auto auto auto auto; + grid-template-columns: repeat(4, auto); align-items: center; } diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx b/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx index d3b6a1297..f4bf255b5 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx @@ -15,18 +15,14 @@ export default function AdultSelector({ const adultsLabel = intl.formatMessage({ id: "Adults" }) function decreaseAdults() { - if (adults <= 1) { - return + if (adults > 1) { + updateAdults(adults - 1) } - adults = adults - 1 - updateAdults(adults) } function increaseAdults() { - if (adults > 5) { - return + if (adults < 6) { + updateAdults(adults + 1) } - adults = adults + 1 - updateAdults(adults) } return ( diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx index 483b2b18a..698d74756 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx @@ -39,7 +39,7 @@ export default function ChildInfoSelector({ { label: "12", value: 12 }, ] - function handleOnSelect(selectedKey: any, childInfo: string) { + function handleOnSelect(selectedKey: number, childInfo: string) { if (childInfo == "age") { child.age = selectedKey } else if (childInfo == "bed") { @@ -58,7 +58,7 @@ export default function ChildInfoSelector({ aria-label={ageLabel} value={child.age} onSelect={(key) => { - handleOnSelect(key, "age") + handleOnSelect(parseInt(key.toString()), "age") }} name="age" placeholder={ageLabel} @@ -73,7 +73,7 @@ export default function ChildInfoSelector({ aria-label={bedLabel} value={child.bed} onSelect={(key) => { - handleOnSelect(key, "bed") + handleOnSelect(parseInt(key.toString()), "bed") }} name="bed" placeholder={bedLabel} diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css index cd8dff789..87c1f7767 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css @@ -1,6 +1,6 @@ .container { display: grid; - grid-template-columns: auto auto auto auto; + grid-template-columns: repeat(4, auto); align-items: center; } diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx index 62042dec5..58e79c876 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx @@ -23,19 +23,17 @@ export default function ChildSelector({ const childrenLabel = intl.formatMessage({ id: "Children" }) function decreaseChildren() { - if (roomChildren.length < 1) { - return + if (roomChildren.length > 0) { + roomChildren.pop() + updateChildren(roomChildren) } - roomChildren.pop() - updateChildren(roomChildren) } function increaseChildren() { - if (roomChildren.length > 5) { - return + if (roomChildren.length < 5) { + roomChildren.push({ age: -1, bed: -1 }) + updateChildren(roomChildren) } - roomChildren.push({ age: -1, bed: -1 }) - updateChildren(roomChildren) } function updateChildInfo(child: Child, index: number) { diff --git a/components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx b/components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx index c954a1cae..4cf4ba766 100644 --- a/components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx @@ -1,3 +1,5 @@ +"use client" + import { useIntl } from "react-intl" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" diff --git a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx index 9ca9ce75f..7e8f4cabf 100644 --- a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx @@ -81,10 +81,10 @@ export default function GuestsRoomsPicker({ Remove Room ) : null} */} - + ))} -
+
+ ) } diff --git a/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/components/GuestsRoomsPicker/guests-rooms-picker.module.css index 4994d808c..a00f96ab1 100644 --- a/components/GuestsRoomsPicker/guests-rooms-picker.module.css +++ b/components/GuestsRoomsPicker/guests-rooms-picker.module.css @@ -36,5 +36,5 @@ display: grid; gap: var(--Spacing-x1); grid-template-columns: auto; - margin: 10px 0 0; + margin-top: 10px; }