import { useState, useEffect, useLayoutEffect } from 'react' import { UserEmailData } from '../../../../../../types/user-email' import getMeta from '../../../../utils/meta' import ReconfirmationInfoSuccess from './reconfirmation-info/reconfirmation-info-success' import ReconfirmationInfoPromptText from './reconfirmation-info/reconfirmation-info-prompt-text' import OLRow from '@/features/ui/components/ol/ol-row' import OLCol from '@/features/ui/components/ol/ol-col' import OLNotification from '@/features/ui/components/ol/ol-notification' import { isBootstrap5 } from '@/features/utils/bootstrap-5' import Icon from '@/shared/components/icon' import { useUserEmailsContext } from '@/features/settings/context/user-email-context' import { FetchError, postJSON } from '@/infrastructure/fetch-json' import { debugConsole } from '@/utils/debugging' import { ssoAvailableForInstitution } from '@/features/settings/utils/sso' import { Trans, useTranslation } from 'react-i18next' import useAsync from '@/shared/hooks/use-async' import { useLocation } from '@/shared/hooks/use-location' import OLButton from '@/features/ui/components/ol/ol-button' import classnames from 'classnames' type ReconfirmationInfoProps = { userEmailData: UserEmailData } function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) { const reconfirmationRemoveEmail = getMeta('ol-reconfirmationRemoveEmail') const reconfirmedViaSAML = getMeta('ol-reconfirmedViaSAML') const { t } = useTranslation() const { samlInitPath } = getMeta('ol-ExposedSettings') const { error, isLoading, isError, isSuccess, runAsync } = useAsync() const { state, setLoading: setUserEmailsContextLoading } = useUserEmailsContext() const [hasSent, setHasSent] = useState(false) const [isPending, setIsPending] = useState(false) const location = useLocation() const ssoAvailable = Boolean( ssoAvailableForInstitution(userEmailData.affiliation?.institution ?? null) ) const handleRequestReconfirmation = () => { if (userEmailData.affiliation?.institution && ssoAvailable) { setIsPending(true) location.assign( `${samlInitPath}?university_id=${userEmailData.affiliation.institution.id}&reconfirm=/user/settings` ) } else { runAsync( postJSON('/user/emails/send-reconfirmation', { body: { email: userEmailData.email, }, }) ).catch(debugConsole.error) } } useEffect(() => { setUserEmailsContextLoading(isLoading) }, [setUserEmailsContextLoading, isLoading]) useLayoutEffect(() => { if (isSuccess) { setHasSent(true) } }, [isSuccess]) const rateLimited = isError && error instanceof FetchError && error.response?.status === 429 if (!userEmailData.affiliation) { return null } if ( userEmailData.samlProviderId && userEmailData.samlProviderId === reconfirmedViaSAML ) { return ( } bs3Props={{ className: 'settings-reconfirm-info small' }} /> ) } if (userEmailData.affiliation.inReconfirmNotificationPeriod) { return ( {isBootstrap5() ? ( {hasSent ? ( ] } /> ) : ( )}
{isError && (
{rateLimited ? t('too_many_requests') : t('generic_something_went_wrong')}
)} } action={ hasSent ? ( <> {isLoading ? ( <> {t('sending')}... ) : ( {t('resend_confirmation_email')} )} ) : ( {isLoading ? ( <> {t('sending')}... ) : ( t('confirm_affiliation') )} ) } /> ) : (
{hasSent ? (
] } />{' '} {isLoading ? ( <> {t('sending')}... ) : ( {t('resend_confirmation_email')} )}
{isError && (
{rateLimited ? t('too_many_requests') : t('generic_something_went_wrong')}
)}
) : ( <>
} />
{isLoading ? ( <> {t('sending')}... ) : ( t('confirm_affiliation') )}
{isError && (
{rateLimited ? t('too_many_requests') : t('generic_something_went_wrong')}
)}
)}
)}
) } return null } export default ReconfirmationInfo