scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SW-276 Implemented child age validation

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-09-18 13:24:35 +02:00
parent 24f7bc290d
commit a7167dde6a
10 changed files with 110 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/GuestsRoomsPicker/index.tsx
View File

@@ -1,9 +1,10 @@
"use client"
import { useEffect, useRef, useState } from "react"
import { useCallback, useEffect, useRef, useState } from "react"
import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema"
import Body from "@/components/TempDesignSystem/Text/Body"
import GuestsRoomsPicker from "./GuestsRoomsPicker"
@@ -20,6 +21,7 @@ export default function GuestsRoomsPickerForm({
}: GuestsRoomsFormProps) {
const intl = useIntl()
const [isOpen, setIsOpen] = useState(false)
const [isAgeError, setIsAgeError] = useState(false)
const selectedGuests = useWatch({ name })
const { register, setValue } = useFormContext()
const ref = useRef<HTMLDivElement | null>(null)
@@ -28,19 +30,29 @@ export default function GuestsRoomsPickerForm({
}
function handleSelectGuest(selected: GuestsRoom[]) {
setValue(name, selected)
setIsAgeError(false)
}
const closePicker = useCallback(() => {
const guestRoomsValidData = guestRoomsSchema.safeParse(selectedGuests)
if (guestRoomsValidData.success) {
setIsOpen(false)
} else {
setIsAgeError(true)
}
}, [selectedGuests])
useEffect(() => {
function handleClickOutside(evt: Event) {
const target = evt.target as HTMLElement
if (ref.current && target && !ref.current.contains(target)) {
setIsOpen(false)
closePicker()
}
}
document.addEventListener("click", handleClickOutside)
return () => {
document.removeEventListener("click", handleClickOutside)
}
}, [setIsOpen])
}, [closePicker])
let selectedAdultsCount = 0
let selectedChildrenCount = 0
@@ -51,33 +63,34 @@ export default function GuestsRoomsPickerForm({
})
const selectedRoomsCount = selectedGuests.length
const childCountLabel =
(selectedChildrenCount > 1
selectedChildrenCount > 1
? intl.formatMessage({ id: "Children" })
: intl.formatMessage({ id: "Child" })) + ", "
: intl.formatMessage({ id: "Child" })
return (
<div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button">
<Body className={styles.body}>
{selectedAdultsCount}{" "}
{selectedAdultsCount > 1
? intl.formatMessage({ id: "Adults" })
: intl.formatMessage({ id: "Adult" })}{" "}
{", "}
{selectedChildrenCount > 0
? selectedChildrenCount + " " + childCountLabel
: null}
{selectedRoomsCount}{" "}
{selectedRoomsCount > 1
? intl.formatMessage({ id: "Rooms" })
: intl.formatMessage({ id: "Room" })}
{", "}
{selectedAdultsCount}{" "}
{selectedAdultsCount > 1
? intl.formatMessage({ id: "Adults" })
: intl.formatMessage({ id: "Adult" })}
{selectedChildrenCount > 0
? ", " + selectedChildrenCount + " " + childCountLabel
: null}
</Body>
</button>
<div aria-modal className={styles.hideWrapper} role="dialog">
<GuestsRoomsPicker
handleOnSelect={handleSelectGuest}
initialSelected={selectedGuests}
closePicker={handleOnClick}
closePicker={closePicker}
childAgeError={isAgeError}
/>
</div>
</div>