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

Merged in fix/SW-350-ui-comments (pull request #817)

Browse Source 
fix/SW-350-ui-comments

Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2024-11-04 14:51:36 +00:00
parent 19163c59c2 cac1a6891e
commit ccca27d2e6
12 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -80,7 +80,7 @@ export default function MobileToggleButton({
{!locationAndDateIsSet && (
<>
<div>
<Caption color="red">
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to" })}
</Caption>
<Body color="uiTextPlaceholder">
@@ -91,7 +91,7 @@ export default function MobileToggleButton({
</div>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption color="red">
<Caption type="bold" color="red">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }

10
components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
View File

@@ -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)
}, [isSubmitted])
useEffect(() => {
let timeoutID: ReturnType<typeof setTimeout> | 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") {

24
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -48,13 +48,10 @@ export default function Search({ locations }: SearchProps) {
dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
}
function handleOnChange(
evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
) {
const value = evt.currentTarget.value
if (value) {
function dispatchInputValue(inputValue: string) {
if (inputValue) {
dispatch({
payload: { search: value },
payload: { search: inputValue },
type: ActionType.SEARCH_LOCATIONS,
})
} else {
@@ -62,6 +59,14 @@ export default function Search({ locations }: SearchProps) {
}
}
function handleOnChange(
evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
) {
const newValue = evt.currentTarget.value
setValue(name, newValue)
dispatchInputValue(value)
}
function handleOnFocus(evt: FocusEvent<HTMLInputElement>) {
const searchValue = evt.currentTarget.value
if (searchValue) {
@@ -114,6 +119,7 @@ export default function Search({ locations }: SearchProps) {
inputValue={value}
itemToString={(value) => (value ? value.name : "")}
onSelect={handleOnSelect}
onInputValueChange={(inputValue) => dispatchInputValue(inputValue)}
>
{({
closeMenu,
@@ -128,7 +134,11 @@ export default function Search({ locations }: SearchProps) {
}) => (
<div className={styles.container}>
<label {...getLabelProps({ htmlFor: name })} className={styles.label}>
<Caption color={isOpen ? "uiTextActive" : "red"} asChild>
<Caption
type="bold"
color={isOpen ? "uiTextActive" : "red"}
asChild
>
<span>
{state.searchData?.type === "hotels"
? state.searchData?.relationships?.city?.name

6
components/Forms/BookingWidget/index.tsx
View File

@@ -65,11 +65,7 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
id={formId}
>
<input {...register("location")} type="hidden" />
<FormContent
locations={locations}
formId={formId}
formState={formState}
/>
<FormContent locations={locations} formId={formId} />
</form>
</section>
)

2
components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
View File

@@ -27,7 +27,7 @@ export default function GuestsRoomsPicker({
id: "Disabled booking options header",
})
const disabledBookingOptionsText = intl.formatMessage({
id: "Disabled booking options text",
id: "Disabled adding room",
})
const addRoomLabel = intl.formatMessage({ id: "Add Room" })