import React, { Component } from 'react'; 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'; @withCustomComponent('PersonalDetailSection') @withTranslation() @inject('appStore', 'authStore') @observer class PersonalDetailSection extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { const { authStore, appStore } = this.props; authStore .loadTourCustomFields() .then(() => authStore.validateCustomer()) .catch((err) => { appStore.setPopMessage('Error: ' + err); }); } render() { const { componentName, customer, updateProperty, t, authStore, appStore, } = this.props; const { business } = appStore; const { tourCustomFields, hasLoadedTourCustomFields } = authStore; if (!hasLoadedTourCustomFields) return ; const customFields = _(tourCustomFields) .groupBy('GroupName') .map(function (fields, name) { return { name, fields, }; }) .value(); return ( <>

{t('Tour Date')}

{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: business.Name } )}

{_.range(4).map((d) => { var date = ( moment() < moment('2021-04-17') ? moment('2021-04-17') : moment() ) .startOf('isoWeek') .add(1, 'week') .add(-2, 'day') .add(d, 'week') .add(14, 'hours') return ( <> {' '} ); })}

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

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

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

))}

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