From f4d924e45fa83a2ae714f84f8b6fd70aa5800ac8 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 1 Nov 2024 12:51:08 +0100 Subject: [PATCH 1/4] fix(sw-350): Fixed styling issues and error modal issue --- components/BookingWidget/MobileToggleButton/index.tsx | 4 ++-- components/DatePicker/date-picker.module.css | 1 + .../FormContent/Search/SearchList/index.tsx | 10 ++++++++-- .../Forms/BookingWidget/FormContent/Search/index.tsx | 6 +++++- .../GuestsRoomsPicker/guests-rooms-picker.module.css | 1 + 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx index 9159ef400..80026ff93 100644 --- a/components/BookingWidget/MobileToggleButton/index.tsx +++ b/components/BookingWidget/MobileToggleButton/index.tsx @@ -80,7 +80,7 @@ export default function MobileToggleButton({ {!locationAndDateIsSet && ( <>
- + {intl.formatMessage({ id: "Where to" })} @@ -91,7 +91,7 @@ export default function MobileToggleButton({
- + {intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } diff --git a/components/DatePicker/date-picker.module.css b/components/DatePicker/date-picker.module.css index b2e23cd41..ee9034648 100644 --- a/components/DatePicker/date-picker.module.css +++ b/components/DatePicker/date-picker.module.css @@ -14,6 +14,7 @@ outline: none; padding: 0; width: 100%; + text-align: left; } .body { diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx index a8736e69d..978bf877a 100644 --- a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx @@ -29,17 +29,23 @@ export default function SearchList({ }: SearchListProps) { const intl = useIntl() const [hasMounted, setHasMounted] = useState(false) + const [isFormSubmitted, setIsFormSubmitted] = useState(false) const { clearErrors, - formState: { errors }, + formState: { errors, isSubmitted }, } = useFormContext() const searchError = errors["search"] + useEffect(() => { + setIsFormSubmitted(isSubmitted) // Update form submission state + }, [isSubmitted]) + useEffect(() => { let timeoutID: ReturnType | null = null if (searchError && searchError.message === "Required") { timeoutID = setTimeout(() => { clearErrors("search") + setIsFormSubmitted(false) // magic number originates from animation // 5000ms delay + 120ms exectuion }, 5120) @@ -60,7 +66,7 @@ export default function SearchList({ return null } - if (searchError) { + if (searchError && isFormSubmitted) { if (typeof searchError.message === "string") { if (!isOpen) { if (searchError.message === "Required") { diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx index 5461426a7..c3de24662 100644 --- a/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -128,7 +128,11 @@ export default function Search({ locations }: SearchProps) { }) => (