PartnerManagedResource.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import { ExternalLink } from 'lucide-react'
  2. import type { ReactNode } from 'react'
  3. import { Alert, AlertTitle, Button } from 'ui'
  4. import PartnerIcon from './PartnerIcon'
  5. import { useAwsRedirectQuery } from '@/data/integrations/aws-redirect-query'
  6. import { useVercelRedirectQuery } from '@/data/integrations/vercel-redirect-query'
  7. import { MANAGED_BY, ManagedBy } from '@/lib/constants/infrastructure'
  8. interface PartnerManagedResourceProps {
  9. managedBy: ManagedBy
  10. resource: string
  11. title?: string
  12. details?: ReactNode
  13. cta?: {
  14. installationId?: string
  15. organizationSlug?: string
  16. overrideUrl?: string
  17. path?: string
  18. message?: string
  19. }
  20. }
  21. export const PARTNER_TO_NAME = {
  22. [MANAGED_BY.VERCEL_MARKETPLACE]: 'Vercel Marketplace',
  23. [MANAGED_BY.AWS_MARKETPLACE]: 'AWS Marketplace',
  24. [MANAGED_BY.STRIPE_PROJECTS]: 'Stripe Projects',
  25. [MANAGED_BY.BRIVEN]: 'Briven',
  26. } as const
  27. function PartnerManagedResource({
  28. managedBy,
  29. resource,
  30. title,
  31. details,
  32. cta,
  33. }: PartnerManagedResourceProps) {
  34. const ctaEnabled = cta !== undefined
  35. const supportsRedirectCta =
  36. managedBy === MANAGED_BY.VERCEL_MARKETPLACE || managedBy === MANAGED_BY.AWS_MARKETPLACE
  37. // Use appropriate redirect query based on partner
  38. const vercelQuery = useVercelRedirectQuery(
  39. {
  40. installationId: cta?.installationId,
  41. },
  42. {
  43. enabled: ctaEnabled && supportsRedirectCta && managedBy === MANAGED_BY.VERCEL_MARKETPLACE,
  44. }
  45. )
  46. const awsQuery = useAwsRedirectQuery(
  47. {
  48. organizationSlug: cta?.organizationSlug,
  49. },
  50. {
  51. enabled: ctaEnabled && supportsRedirectCta && managedBy === MANAGED_BY.AWS_MARKETPLACE,
  52. }
  53. )
  54. if (managedBy === MANAGED_BY.BRIVEN) return null
  55. const selectedRedirectQuery =
  56. managedBy === MANAGED_BY.VERCEL_MARKETPLACE
  57. ? vercelQuery
  58. : managedBy === MANAGED_BY.AWS_MARKETPLACE
  59. ? awsQuery
  60. : undefined
  61. const redirectBaseUrl = selectedRedirectQuery?.data?.url
  62. const ctaUrl =
  63. cta?.overrideUrl ?? (redirectBaseUrl ? `${redirectBaseUrl}${cta?.path ?? ''}` : undefined)
  64. const showCta = ctaEnabled && Boolean(ctaUrl)
  65. const partnerHeading =
  66. title ??
  67. (managedBy === MANAGED_BY.STRIPE_PROJECTS
  68. ? `${resource} are connected to Stripe`
  69. : `${resource} are managed by ${PARTNER_TO_NAME[managedBy]}`)
  70. return (
  71. <Alert className="flex flex-col items-center gap-y-2 border-0 rounded-none bg-none">
  72. <PartnerIcon organization={{ managed_by: managedBy }} showTooltip={false} size="large" />
  73. <AlertTitle className="text-sm font-normal">{partnerHeading}</AlertTitle>
  74. {details && <div className="text-sm text-foreground-light text-center">{details}</div>}
  75. {showCta && (
  76. <Button asChild type="default" iconRight={<ExternalLink />}>
  77. <a href={ctaUrl} target="_blank" rel="noopener noreferrer">
  78. {cta?.message || `View ${resource} on ${PARTNER_TO_NAME[managedBy]}`}
  79. </a>
  80. </Button>
  81. )}
  82. </Alert>
  83. )
  84. }
  85. export default PartnerManagedResource