import { useCallback, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { postJSON } from '../../../../infrastructure/fetch-json' import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context' import { Institution } from './managed-institutions' import { RowLink } from './row-link' import { debugConsole } from '@/utils/debugging' type ManagedInstitutionProps = { institution: Institution } export default function ManagedInstitution({ institution, }: ManagedInstitutionProps) { const { t } = useTranslation() const [subscriptionChanging, setSubscriptionChanging] = useState(false) const { updateManagedInstitution } = useSubscriptionDashboardContext() const changeInstitutionalEmailSubscription = useCallback( (e, institutionId: Institution['v1Id']) => { const updateSubscription = async (institutionId: Institution['v1Id']) => { setSubscriptionChanging(true) try { const data = await postJSON( `/institutions/${institutionId}/emailSubscription` ) institution.metricsEmail.optedOutUserIds = data updateManagedInstitution(institution) } catch (error) { debugConsole.error(error) } setSubscriptionChanging(false) } e.preventDefault() updateSubscription(institutionId) }, [institution, updateManagedInstitution] ) return (

]} // eslint-disable-line react/jsx-key values={{ institutionName: institution.name || '', }} />

Monthly metrics emails: {subscriptionChanging ? ( ) : ( )}


) }