konnosDashboard
UpgradeToPro.tsx69 lines · main
1import { ReactNode } from 'react'
2import { cn } from 'ui'
3import { Admonition } from 'ui-patterns'
4
5import { DocsButton } from './DocsButton'
6import { UpgradePlanButton } from './UpgradePlanButton'
7
8interface UpgradeToProProps {
9 icon?: ReactNode
10 primaryText: string
11 secondaryText: string
12 plan?: 'Pro' | 'Team' | 'Enterprise'
13 addon?: 'pitr' | 'customDomain' | 'ipv4' | 'spendCap' | 'computeSize'
14 /** Used in the default message template for request upgrade dialog, e.g: "Upgrade to ..." */
15 featureProposition?: string
16 /** As an override for the button text in both upgrade + request to upgrade scenario */
17 buttonText?: string
18 /** Where the upgrade interest is coming from */
19 source?: string
20 disabled?: boolean
21 fullWidth?: boolean
22 layout?: 'vertical' | 'horizontal'
23 variant?: 'default' | 'primary'
24 className?: string
25 docsUrl?: string
26}
27
28export const UpgradeToPro = ({
29 icon,
30 primaryText,
31 secondaryText,
32 plan: planToUpgrade = 'Pro',
33 addon,
34 featureProposition,
35 buttonText,
36 source = 'upgrade',
37 disabled = false,
38 fullWidth = false,
39 layout = 'horizontal',
40 variant = 'primary',
41 className,
42 docsUrl,
43}: UpgradeToProProps) => {
44 return (
45 <Admonition
46 type="default"
47 icon={icon}
48 layout={layout}
49 title={primaryText}
50 description={secondaryText}
51 className={cn(fullWidth && 'border-0 rounded-none border-b', className)}
52 actions={
53 <>
54 <UpgradePlanButton
55 plan={planToUpgrade}
56 addon={addon}
57 source={source}
58 featureProposition={featureProposition}
59 disabled={disabled}
60 variant={variant}
61 >
62 {buttonText}
63 </UpgradePlanButton>
64 {!!docsUrl && <DocsButton href={docsUrl} />}
65 </>
66 }
67 />
68 )
69}