import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, inject } from 'mobx-react'; import { toJS } from 'mobx'; import { withTranslation } from 'react-i18next'; import InputField from 'ui/components/forms/InputField'; import SelectField from 'ui/components/forms/SelectField'; import FileInputField from 'ui/components/forms/FileInputField'; import DateInputField from 'ui/components/forms/DateInputField'; import Link from 'next/link'; import { routes } from 'env/routes'; import TextAreaInputField from 'ui/components/forms/TextAreaInputField'; import CountrySelectField from 'ui/components/forms/CountrySelectField'; import ActionButton from 'ui/components/forms/ActionButton'; import asForm from 'ui/components/forms/asForm'; import { shouldShowField } from 'ui/components/forms/formFieldHelpers'; import { reactionWithOldValue } from 'env/utils/reactionWithOldValue'; import withCustomComponent from 'ui/components/withCustomComponent'; @withCustomComponent('AccountDetailsSection') @withTranslation() @inject('appStore', 'authStore') @observer class AccountDetailsSection extends Component { static propTypes = { customer: PropTypes.object.isRequired, }; constructor(props) { super(props); this.state = { userAlreadyExists: false, }; } componentDidMount() { this.emailReactionDisposer = reactionWithOldValue( () => toJS(this.props.authStore.customer), (customer, oldCustomer) => { if (oldCustomer && customer.Email !== oldCustomer.Email) { this.props.authStore.exists(customer.Email).then((exists) => { this.setState({ userAlreadyExists: exists }); }); } }, { delay: 500 } ); } componentWillUnmount() { this.emailReactionDisposer(); } shouldShowFieldWithCustomer = (fieldName) => { const { customer, appStore } = this.props; const { configuration } = appStore; return shouldShowField(configuration, fieldName, customer); }; render() { const { hideTitle, editableEmail, showAvatarField, appStore, t, saveCustomer, authStore, customer, updateProperty, } = this.props; const { userAlreadyExists, customerValidation } = authStore; const { configuration } = appStore; return ( <>

{!hideTitle && (

{t('Personal details')}

)} {!userAlreadyExists && ( <>

{this.shouldShowFieldWithCustomer('MobilePhone') && (

)}

{showAvatarField && (

{t('Your Photo')}

{t( 'This image will be shown in the members directory and your profile page if you choose to share it with other members. It will also help us recognize you! File smaller than 10MB and at least 400px by 400px.' )}

)}

{this.shouldShowFieldWithCustomer('LandLine') && (

)}

{this.shouldShowFieldWithCustomer('Gender') && (

)} {this.shouldShowFieldWithCustomer('DateOfBirth') && (

)}

)} {this.shouldShowFieldWithCustomer('Email') && (

{!editableEmail && ( {t('Contact us to change your email')} )} {userAlreadyExists && (

{t( 'This email is already taken. If you own this account, please sign in.' )} {t('Sign in')}

)}

)} {saveCustomer && ( saveCustomer()} busy={authStore.isSavingCustomerWithUser} /> )}

{!userAlreadyExists && (

{!hideTitle && (

{t('Personal Address')}

)} <> {this.shouldShowFieldWithCustomer('Address') && (

)}

{this.shouldShowFieldWithCustomer('Country') && (

)} {this.shouldShowFieldWithCustomer('State') && (

)}

{this.shouldShowFieldWithCustomer('CityName') && (

)} {this.shouldShowFieldWithCustomer('PostCode') && (

)}

{this.shouldShowFieldWithCustomer('BillingName') && (

)} {this.shouldShowFieldWithCustomer('TaxIDNumber') && (

)}

{this.shouldShowFieldWithCustomer('ProfileWebsite') && (

)}

{saveCustomer && ( saveCustomer()} busy={authStore.isSavingCustomerWithUser} /> )}

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

Events

Past Events