import { useQuery } from '@tanstack/react-query' import { useParams } from 'common' import { LogOut } from 'lucide-react' import Head from 'next/head' import { useRouter } from 'next/router' import { useEffect } from 'react' import { Button } from 'ui' import { Admonition, ShimmeringLoader } from 'ui-patterns' import { InterstitialAccountRow, InterstitialLayout, LogoPair, PartnerLogo, BrivenLogo, } from '@/components/layouts/InterstitialLayout' import { ButtonTooltip } from '@/components/ui/ButtonTooltip' import { useConfirmAccountRequestMutation } from '@/data/partners/stripe-projects-confirm-mutation' import { accountRequestQueryOptions } from '@/data/partners/stripe-projects-query' import { withAuth } from '@/hooks/misc/withAuth' import { useSignOut } from '@/lib/auth' import { BASE_PATH } from '@/lib/constants' import { buildStudioPageTitle } from '@/lib/page-title' import { useProfileNameAndPicture } from '@/lib/profile' import type { NextPageWithLayout } from '@/types' const PAGE_TITLE = buildStudioPageTitle({ section: 'Authorize Stripe Projects', brand: 'Briven' }) const StripeProjectsLoginPage: NextPageWithLayout = () => { const router = useRouter() const { ar_id } = useParams() const signOut = useSignOut() const { username, primaryEmail, avatarUrl } = useProfileNameAndPicture() const { data: accountRequest, isPending: isQueryPending, isSuccess: isQuerySuccess, isError: isQueryError, error, } = useQuery({ ...accountRequestQueryOptions({ arId: ar_id }), enabled: typeof ar_id !== 'undefined', }) const { mutate: confirmAccountRequest, isPending: isConfirmationPending, isSuccess: isConfirmationSuccess, } = useConfirmAccountRequestMutation() useEffect(() => { if (!router.isReady) return if (!ar_id) { router.push('/404') } }, [router.isReady, ar_id, router]) const handleApprove = async () => { if (!ar_id || isConfirmationPending) return confirmAccountRequest({ arId: ar_id }) } const linkedOrg = accountRequest?.linked_organization const emailMatches = accountRequest?.email_matches ?? false const displayName = primaryEmail ?? username ?? accountRequest?.email ?? '' const isPending = router.isReady && isQueryPending const isConfirmed = isConfirmationSuccess const isConfirming = isConfirmationPending const isSuccess = isQuerySuccess const isError = isQueryError const showAuthorizationState = isSuccess && !isConfirmed const interstitialDescription = isConfirmed ? undefined : 'This will create an organization on your behalf in Briven' return ( <> {PAGE_TITLE} } right={} /> } title="Authorize Stripe Projects" description={interstitialDescription} >
{isPending && (
)} {isConfirmed && (

You can now close this tab.

)} {showAuthorizationState && !emailMatches && (
You're signed in to a different account. Sign out and sign back in as{' '} {accountRequest?.email}. Then return to Stripe to restart the request. } />
)} {showAuthorizationState && emailMatches && linkedOrg && (
{linkedOrg.name} is already linked to this Stripe account, and just needs to be confirmed. } />
)} {showAuthorizationState && emailMatches && !linkedOrg && (
signOut()} icon={ } tooltip={{ content: { side: 'top', text: 'Sign out', }, }} /> } />
)} {isError && (
)}
) } export default withAuth(StripeProjectsLoginPage)