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') && (

)}

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

)}

{showAvatarField && (

{t( 'File smaller than 10MB and at least 400px by 400px.' )}

)}

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

)} {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('CityName') && (

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

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

)}

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

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

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

)}

{saveCustomer && (

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

)}

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

Get in touch with us

Contact details