import React, { Component } from 'react'; import { action } from 'mobx'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import _ from 'lodash'; import InputField from 'ui/components/forms/InputField'; import DateInputField from 'ui/components/forms/DateInputField'; import CustomField from 'ui/_pages/profile/CustomField'; import asForm from 'ui/components/forms/asForm'; import LoadingLayout from 'ui/layouts/LoadingLayout'; import withCustomComponent from 'ui/components/withCustomComponent'; import moment from 'moment-timezone'; import { TimeInputField } from 'ui/components/forms/TimeInputField'; @withCustomComponent('PersonalDetailSection') @withTranslation() @inject('appStore', 'authStore') @observer class PersonalDetailSection extends Component { constructor(props) { super(props); this.state = { availableHours: [], }; this.setAvailableHours = this.setAvailableHours.bind(this); this.updateTourDate = this.updateTourDateHour.bind(this); } @action updateTourDateHour(hour) { let newTourDate = this.props.customer.TourDate; // need to create a date to account for various hour formats let hourDate = moment('1971/08/25 ' + hour); newTourDate.setHours(hourDate.get('hour')); newTourDate.setMinutes(hourDate.get('minute')); this.props.customer.TourDate = newTourDate; } componentDidMount() { const { authStore, appStore, customer } = this.props; authStore .loadTourCustomFields() .then(() => authStore.validateCustomer()) .catch((err) => { appStore.setPopMessage('Error: ' + err); }); const availableHours = this.setAvailableHours(); if (availableHours.length) { this.updateTourDateHour(availableHours[0]); this.setState({ selectedHour: availableHours[0] }); } } setAvailableHours() { const { configuration, business } = this.props.appStore; const { customer, setIsValidDate } = this.props; let tourTimeSlots = [], dayTimeSlots; if (configuration['PublicWebSite.Tour.TimeSlots.Enabled']) { try { tourTimeSlots = JSON.parse( configuration['PublicWebSite.Tour.TimeSlots'] ); } catch {} // time slots for selected day dayTimeSlots = tourTimeSlots.filter( (t) => t.DayOfWeek == customer.TourDate?.getDay() ); // sort chronologically dayTimeSlots.sort((a, b) => new Date(a.FromTime) - new Date(b.FromTime)); } else { dayTimeSlots = [ { FromTime: new Date('1976-01-01T00:00'), ToTime: new Date('1976-01-01T23:30'), }, ]; } const availableHours = []; if (dayTimeSlots.length) { setIsValidDate(true); for (let i = 0; i < dayTimeSlots.length; i++) { const dayTimeSlot = dayTimeSlots[i]; let fromTime = moment.utc(dayTimeSlot.FromTime).local(); let toTime = moment.utc(dayTimeSlot.ToTime).local(); fromTime = moment.utc(fromTime).tz(business.SimpleTimeZone.Iana); toTime = moment.utc(toTime).tz(business.SimpleTimeZone.Iana); if (i > 0) { const prevDayTimeSlots = dayTimeSlots[i - 1]; const prevDayTimeSlotsToTime = moment .utc(prevDayTimeSlots.ToTime) .local(); // if two time slots overlap, skip to next time slot if (fromTime.isSame(prevDayTimeSlotsToTime)) { fromTime.add(30, 'minutes'); } } while (fromTime.isBefore(toTime)) { availableHours.push(fromTime.format('LT')); fromTime.add(30, 'minutes'); } } } else { setIsValidDate(false); } this.setState({ availableHours }); return availableHours; } render() { const { componentName, customer, updateProperty, t, authStore, appStore } = this.props; const { business, configuration } = appStore; const { tourCustomFields, hasLoadedTourCustomFields } = authStore; if (!hasLoadedTourCustomFields) return ; const timeSlotsEnabled = configuration['PublicWebSite.Tour.TimeSlots.Enabled']; const customFields = _(tourCustomFields) .groupBy('GroupName') .map(function (fields, name) { return { name, fields, }; }) .value(); return ( <>

{t('Tour date and time')}

{t( 'We would love to show you {{Name}}. Please let us know when you are available and we will do our best to receive you on that date and time.', { Name: t(business.Name) } )}

{!timeSlotsEnabled && (

)} {timeSlotsEnabled && ( <> {' '}

{ updateProperty(key, value); const availableHours = this.setAvailableHours(value); if (availableHours.length) { this.updateTourDateHour(availableHours[0]); this.setState({ selectedHour: availableHours[0] }); } }} customProps={{ min: new Date(), }} />

{!this.state.availableHours.length && ( {t( 'Sorry, there are no available times on the day you selected.' )} )} {this.state.availableHours.map((hour, i) => ( { this.setState({ selectedHour: hour }); this.updateTourDateHour(e.target.value); }} autocomplete="off" /> {hour} ))}

)}

{customFields.map((group, i) => (

{group.name !== 'null' ? group.name : t('Other Details')}

{group.fields.map((field, i) => (

))}

); } } export default asForm(PersonalDetailSection, 'customer');

Articles