import { useState } from 'react' import { useTranslation } from 'react-i18next' import { getUserFacingMessage, postJSON, } from '../../../infrastructure/fetch-json' import getMeta from '../../../utils/meta' import useAsync from '../../../shared/hooks/use-async' import { useUserContext } from '../../../shared/context/user-context' import OLButton from '@/features/ui/components/ol/ol-button' import OLNotification from '@/features/ui/components/ol/ol-notification' import OLFormGroup from '@/features/ui/components/ol/ol-form-group' import OLFormLabel from '@/features/ui/components/ol/ol-form-label' import OLFormControl from '@/features/ui/components/ol/ol-form-control' import FormText from '@/features/ui/components/bootstrap-5/form/form-text' function AccountInfoSection() { const { t } = useTranslation() const { hasAffiliationsFeature } = getMeta('ol-ExposedSettings') const isExternalAuthenticationSystemUsed = getMeta( 'ol-isExternalAuthenticationSystemUsed' ) const shouldAllowEditingDetails = getMeta('ol-shouldAllowEditingDetails') 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 ? ( ) : null} {isError ? ( ) : null} {canUpdateEmail || canUpdateNames ? ( {t('update')} ) : null} ) } type ReadOrWriteFormGroupProps = { id: string type: string label: string value?: string handleChange: (event: any) => void canEdit: boolean maxLength?: number required: boolean } function ReadOrWriteFormGroup({ id, type, label, value, handleChange, canEdit, maxLength, 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} )} ) } export default AccountInfoSection