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 { ManagedInstitution as Institution } from '../../../../../../types/subscription/dashboard/managed-institution' import { RowLink } from './row-link' import { debugConsole } from '@/utils/debugging' import getMeta from '@/utils/meta' import OLButton from '@/features/ui/components/ol/ol-button' 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 || '', }} shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} />

Monthly metrics emails: {subscriptionChanging ? ( ) : ( changeInstitutionalEmailSubscription(e, institution.v1Id) } > {institution.metricsEmail.optedOutUserIds.includes( getMeta('ol-user_id')! ) ? t('subscribe') : t('unsubscribe')} )}


) }