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'; import moment from 'moment'; @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, shouldShowContactForm: 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) => { if (customer.Email === this.props.authStore.customer.Email) this.setState({ userAlreadyExists: exists }); }); } }, { delay: 750 } ); const { appStore } = this.props; const shouldShowContactForm = appStore.configuration['SignupForm.ShowContactSection'] == 'true' && (this.shouldShowFieldWithCustomer('Address') || this.shouldShowFieldWithCustomer('Country') || this.shouldShowFieldWithCustomer('State') || this.shouldShowFieldWithCustomer('CityName') || this.shouldShowFieldWithCustomer('PostCode') || this.shouldShowFieldWithCustomer('BillingName') || this.shouldShowFieldWithCustomer('TaxIDNumber') || this.shouldShowFieldWithCustomer('ProfileWebsite')); this.setState({ shouldShowContactForm }); } componentWillUnmount() { this.emailReactionDisposer(); } shouldShowFieldWithCustomer = (fieldName) => { const { customer, appStore } = this.props; const { configuration } = appStore; return shouldShowField(configuration, fieldName, customer); }; showStarIfRequired = (group, fieldName) => { const { appStore } = this.props; const { configuration } = appStore; return configuration[`${group}.${fieldName}`] === '2' ? '*' : ''; }; render() { const { hideTitle, editableEmail, appStore, t, saveCustomer, authStore, customer, updateProperty, } = this.props; const { userAlreadyExists, existingUserUniqueId, customerValidation } = authStore; const { configuration } = appStore; return ( <>

{!hideTitle && (

{t('Personal details')}

)} {!userAlreadyExists && ( <>

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

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

)}

{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 with password')} {' '} {t('or')}{' '} {t('Log in using email link')}

)}

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

{!userAlreadyExists && this.state.shouldShowContactForm && (

{!hideTitle && (

{t('Personal Address')}

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

)}

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

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

)}

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

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

)}

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

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

)}

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

)}

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

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

Get in touch with us