import { useParams } from 'common'
import { useMemo } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
import { useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
import { useInstallOAuthIntegrationMutation } from '@/data/marketplace/install-oauth-integration-mutation'
interface InstallOAuthIntegrationButtonProps {
integration: IntegrationDefinition
}
export function InstallOAuthIntegrationButton({ integration }: InstallOAuthIntegrationButtonProps) {
const { ref: projectRef } = useParams()
const { data: apiKeys, isLoading: isApiKeysLoading } = useAPIKeysQuery(
{ projectRef, reveal: false },
{ enabled: !!projectRef }
)
const { mutate: installOAuthIntegration, isPending: isInstalling } =
useInstallOAuthIntegrationMutation({
onSuccess: (data) => {
if ('redirectUrl' in data) {
if (!data.redirectUrl) {
toast.error('Failed to redirect because redirect URL is invalid')
return
}
window.location.href = data.redirectUrl
} else {
toast.error('Failed to start integration installation')
}
},
})
const isLoading =
integration.installIdentificationMethod === 'secret_key_prefix' && isApiKeysLoading
const isIntegrationInstalled = useMemo(() => {
if (!integration) return false
const prefix = integration.secretKeyPrefix
if (integration.installIdentificationMethod !== 'secret_key_prefix' || !prefix) return false
if (isApiKeysLoading || !apiKeys) return false
return apiKeys.some((k) => k.type === 'secret' && k.name.startsWith(prefix))
}, [apiKeys, integration, isApiKeysLoading])
const handleInstallClick = async () => {
if (!integration || !projectRef) return
if (integration.installUrlType === 'post') {
if (!integration.listingId) return toast.error('Listing ID is required')
installOAuthIntegration({ projectRef, id: integration.listingId })
} else {
window.location.href = integration.installUrl ?? '/'
}
}
return (
<>
{isIntegrationInstalled ? (
) : (
)}
>
)
}