import { useState } from 'react' import { Alert, Button, ControlLabel, FormControl, FormGroup, } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { getUserFacingMessage, postJSON, } from '../../../infrastructure/fetch-json' import getMeta from '../../../utils/meta' import { ExposedSettings } from '../../../../../types/exposed-settings' import useAsync from '../../../shared/hooks/use-async' import { useUserContext } from '../../../shared/context/user-context' function AccountInfoSection() { const { t } = useTranslation() const { hasAffiliationsFeature } = getMeta( 'ol-ExposedSettings' ) as ExposedSettings const isExternalAuthenticationSystemUsed = getMeta( 'ol-isExternalAuthenticationSystemUsed' ) as boolean const shouldAllowEditingDetails = getMeta( 'ol-shouldAllowEditingDetails' ) as boolean const { first_name: initialFirstName, last_name: initialLastName, email: initialEmail, } = useUserContext() const [email, setEmail] = useState(initialEmail) const [firstName, setFirstName] = useState(initialFirstName) const [lastName, setLastName] = useState(initialLastName) const { isLoading, isSuccess, isError, error, runAsync } = useAsync() const [isFormValid, setIsFormValid] = useState(true) const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value) setIsFormValid(event.target.validity.valid) } const handleFirstNameChange = ( event: React.ChangeEvent ) => { setFirstName(event.target.value) } const handleLastNameChange = (event: React.ChangeEvent) => { setLastName(event.target.value) } const canUpdateEmail = !hasAffiliationsFeature && !isExternalAuthenticationSystemUsed const canUpdateNames = shouldAllowEditingDetails const handleSubmit = (event: React.FormEvent) => { event.preventDefault() if (!isFormValid) { return } runAsync( postJSON('/user/settings', { body: { email: canUpdateEmail ? email : undefined, first_name: canUpdateNames ? firstName : undefined, last_name: canUpdateNames ? lastName : undefined, }, }) ).catch(() => {}) } return ( <>

{t('update_account_info')}

{hasAffiliationsFeature ? null : ( )} {isSuccess ? ( {t('thanks_settings_updated')} ) : null} {isError ? ( {getUserFacingMessage(error)} ) : null} {canUpdateEmail || canUpdateNames ? ( ) : null} ) } type ReadOrWriteFormGroupProps = { id: string type: string label: string value?: string handleChange: (event: any) => void canEdit: boolean required: boolean } function ReadOrWriteFormGroup({ id, type, label, value, handleChange, canEdit, required, }: ReadOrWriteFormGroupProps) { const [validationMessage, setValidationMessage] = useState('') const handleInvalid = ( event: React.InvalidEvent ) => { event.preventDefault() } const handleChangeAndValidity = ( event: React.ChangeEvent ) => { handleChange(event) setValidationMessage(event.target.validationMessage) } if (!canEdit) { return ( {label} ) } return ( {label} {validationMessage ? ( {validationMessage} ) : null} ) } export default AccountInfoSection