import React, { useState, useEffect } from 'react'; import { inject, observer } from 'mobx-react'; import { withCustomComponent } from 'ui/components/withCustomComponent'; import { withRouter } from 'next/router'; import moment from 'moment'; import DropDownList from 'react-widgets/DropdownList'; import { scrollToAvailableTime } from 'ui/assets/js/application'; let instancesCount = 0 /* Ticket 158587 */ export const TimeInputField = ( inject('appStore')( withRouter( observer( ({ componentName, appStore, value, name, onChange, errors, helpText, classes, containerClasses, id, label, dropUp, allowPastDates, }) => { const [touched, setTouched] = useState(false); const [open, setOpen] = useState(false); const [divId, setDivId] = useState(''); useEffect(() => { instancesCount += 1; setDivId(`time-input-field-${instancesCount}`); }, []); let startTime; const { configuration } = appStore; const currentDate = moment().toDate(); startTime = moment(value).startOf('day').toDate(); const getTimeSlots = () => { let timeSlots = { all: [], past: [] }; let endTime = moment(value).endOf('day'); for ( let tempDate = startTime; moment(tempDate) <= endTime; tempDate = moment(tempDate) .clone() .add( typeof window !== 'undefined' ? window.bookingTimeStep ?? 30 : 30, 'minutes' ) .toDate() ) { const tempDateISO = moment(tempDate).toISOString(); timeSlots.all.push(tempDateISO); if (tempDate < currentDate) { timeSlots.past.push(tempDateISO); } } return timeSlots; }; const onDropdownChange = (dateISO) => { const date = moment(dateISO).toDate(); setTouched(true); if (!value) { onChange(date, null); return; } let currentDate = value ?? new Date(); let clone = moment(currentDate).clone().toDate(); clone.setMinutes(date.getMinutes()); clone.setHours(date.getHours()); onChange(name, clone); }; const onFocus = () => { setTouched(true); }; const timeSlots = getTimeSlots().all; const pastTimeSlots = getTimeSlots().past; const hasErrors = errors && errors.length > 0; const timeIconElement = ( ); const onToggle = () => { const isOpen = !open; setOpen(!open); if(isOpen) { scrollToAvailableTime(divId, pastTimeSlots.length); } } return (

{label && ( {label} )} moment(value).format('LT')} value={value} busy={!timeSlots.length} selectIcon={timeIconElement} containerClassName={`form-group-sm ${containerClasses ? containerClasses : ''} mb-0`} onChange={(val) => onDropdownChange(val)} onFocus={onFocus} /> {hasErrors && (

{errors.join(', ')}

)} {helpText && ( {helpText} )}

); } ) ) ) );