Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useEffect, useRef, useState } from 'react';
import { navigate } from 'gatsby';
import { Button } from 'ag-ems-ui-library';
import { useTranslation } from 'react-i18next';
import { format, getNextDay, isLater, now, removeQueryParam, setQueryParam } from '../../helpers';
import { DataRangeDates } from '../DataRange';
import { Location } from '../Location';
const styles = require('./Booking.module.css');
export const BookingForm = ({ slug, locations }) => {
const { t } = useTranslation()
const [locationId, setLocationId] = useState(locations.length === 1 ? locations[0].value : '');
const [start, setStart] = useState<string | Date>(format(now, 'yyyy-MM-dd'));
const [end, setEnd] = useState<string | Date>(format(getNextDay(now), 'yyyy-MM-dd'));
const firstTime = useRef(true);
const onStartChange = (value: string | Date) => {
setStart(value);
Iif (isLater(value, end)) {
setEnd(format(getNextDay(value), 'yyyy-MM-dd'));
}
}
const handleSubmit = (event) => {
event.preventDefault();
navigate(`/${slug}/${locationId ?? ''}?startDate=${start}&endDate=${end}`);
}
useEffect(() => {
const url = typeof window !== 'undefined' ? new URL(window.location.href) : null;
const location = url?.searchParams.get('location');
const startDate = url?.searchParams.get('startDate');
const endDate = url?.searchParams.get('endDate');
location && setLocationId(location);
startDate && setStart(startDate);
endDate && setEnd(endDate);
locationId ? setQueryParam('location', locationId) : null;
}, []);
useEffect(() => {
Iif (!firstTime.current) {
locationId ? setQueryParam('location', locationId) : removeQueryParam('location');
setQueryParam('startDate', start as string);
setQueryParam('endDate', end as string);
}
firstTime.current = false;
}, [locationId, start, end]);
return (
<form className={styles.BookingForm} onSubmit={handleSubmit}>
<div className={styles.BookingFormRow}>
<Location
classes={styles.BookingFormLocation}
locations={locations}
value={locationId}
onChange={setLocationId}
dropdownMobile={true}
submitText={t('confirm')}
placeholder={t('parking.location')}
label={t('parking.location')}
/>
</div>
<div className={styles.BookingFormRow}>
<DataRangeDates
classes={styles.BookingFormDates}
startDate={start}
endDate={end}
selectStartDate={onStartChange}
selectEndDate={setEnd}
label={true}
startLabel={t('entry')}
endLabel={t('exit')}
confirmText={t('confirm')}
dialogClasses={styles.BookingDatesDialog}
/>
</div>
<div className={`${styles.BookingFormSubmit}`}>
<Button value={t('search')} sizing="lg" variant="ks-primary" fullWidth={true} />
</div>
</form>
)
} |