import {Fragment} from 'react'; import type {RouteComponentProps} from 'react-router'; import Alert from 'sentry/components/alert'; import ApiForm from 'sentry/components/forms/apiForm'; import HiddenField from 'sentry/components/forms/fields/hiddenField'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import NarrowLayout from 'sentry/components/narrowLayout'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {useApiQuery} from 'sentry/utils/queryClient'; import {decodeScalar} from 'sentry/utils/queryString'; import {useParams} from 'sentry/utils/useParams'; type RouteParams = { id: string; orgId: string; }; type Props = RouteComponentProps; function UnsubscribeProject({location}: Props) { const signature = decodeScalar(location.query._); const params = useParams(); return (

{t('Unsubscribe')}

); } interface UnsubscribeResponse { displayName: string; slug: string; type: string; viewUrl: string; } type BodyProps = { issueId: string; orgSlug: string; signature?: string; }; function UnsubscribeBody({orgSlug, issueId, signature}: BodyProps) { const endpoint = `/organizations/${orgSlug}/unsubscribe/project/${issueId}/`; const {isLoading, isError, data} = useApiQuery( [endpoint, {query: {_: signature}}], {staleTime: 0} ); if (isLoading) { return ; } if (isError) { return ( {t('There was an error loading unsubscribe data. Your link may have expired.')} ); } return (

{t('Account')}: {data.displayName}

{t( 'You are about to unsubscribe from project notifications for the following project:' )}

{orgSlug} / {data.slug}

{t('You can subscribe to it again by going to your account settings.')}

{ // Use window.location as we're going to an HTML view window.location.assign('/auth/login/'); }} onSubmitSuccess={() => { // Use window.location as we're going to an HTML view window.location.assign('/auth/login/'); }} initialData={{cancel: 1}} >
); } export default UnsubscribeProject;