import { useState, useEffect } from 'react' import { useTranslation, Trans } from 'react-i18next' import Cell from './cell' import Layout from './add-email/layout' import Input, { DomainInfo } from './add-email/input' import AddAnotherEmailBtn from './add-email/add-another-email-btn' import InstitutionFields from './add-email/institution-fields' import SsoLinkingInfo from './add-email/sso-linking-info' import AddNewEmailBtn from './add-email/add-new-email-btn' import useAsync from '../../../../shared/hooks/use-async' import { useUserEmailsContext } from '../../context/user-email-context' import { ssoAvailableForDomain } from '../../utils/sso' import { postJSON } from '../../../../infrastructure/fetch-json' import { University } from '../../../../../../types/university' import { CountryCode } from '../../data/countries-list' import { isValidEmail } from '../../../../shared/utils/email' import getMeta from '../../../../utils/meta' import { ReCaptcha2 } from '../../../../shared/components/recaptcha-2' import { useRecaptcha } from '../../../../shared/hooks/use-recaptcha' import OLCol from '@/features/ui/components/ol/ol-col' import { bsVersion } from '@/features/utils/bootstrap-5' function AddEmail() { const { t } = useTranslation() const [isFormVisible, setIsFormVisible] = useState( () => window.location.hash === '#add-email' ) const [newEmail, setNewEmail] = useState('') const [newEmailMatchedDomain, setNewEmailMatchedDomain] = useState(null) const [countryCode, setCountryCode] = useState(null) const [universities, setUniversities] = useState< Partial> >({}) const [universityName, setUniversityName] = useState('') const [role, setRole] = useState('') const [department, setDepartment] = useState('') const { isLoading, isError, error, runAsync } = useAsync() const { state, setLoading: setUserEmailsContextLoading, getEmails, } = useUserEmailsContext() const emailAddressLimit = getMeta('ol-emailAddressLimit') || 10 const { ref: recaptchaRef, getReCaptchaToken } = useRecaptcha() useEffect(() => { setUserEmailsContextLoading(isLoading) }, [setUserEmailsContextLoading, isLoading]) const handleShowAddEmailForm = () => { setIsFormVisible(true) } const handleEmailChange = (value: string, domain?: DomainInfo) => { setNewEmail(value) setNewEmailMatchedDomain(domain || null) } const getSelectedKnownUniversityId = (): number | undefined => { if (countryCode) { return universities[countryCode]?.find( ({ name }) => name === universityName )?.id } return newEmailMatchedDomain?.university.id } const handleAddNewEmail = () => { const selectedKnownUniversityId = getSelectedKnownUniversityId() const knownUniversityData = selectedKnownUniversityId && { university: { id: selectedKnownUniversityId, }, role, department, } const unknownUniversityData = universityName && !selectedKnownUniversityId && { university: { name: universityName, country_code: countryCode, }, role, department, } runAsync( (async () => { const token = await getReCaptchaToken() await postJSON('/user/emails', { body: { email: newEmail, ...knownUniversityData, ...unknownUniversityData, 'g-recaptcha-response': token, }, }) })() ) .then(() => { getEmails() }) .catch(() => {}) } if (!isFormVisible) { return ( {state.data.emailCount >= emailAddressLimit ? ( ]} // eslint-disable-line react/jsx-key /> ) : ( )} ) } const InputComponent = ( <> ) if (!isValidEmail(newEmail)) { return (
{InputComponent}
{t('start_by_adding_your_email')}
) } const isSsoAvailableForDomain = newEmailMatchedDomain && ssoAvailableForDomain(newEmailMatchedDomain) return (
{InputComponent} {!isSsoAvailableForDomain ? (
) : null}
{!isSsoAvailableForDomain ? ( ) : (
)}
) } export default AddEmail