konnosDashboard
EnterpriseCard.tsx104 lines · main
1// @ts-nocheck
2import { Check } from 'lucide-react'
3import { PricingInformation } from 'shared-data'
4import { Button, cn } from 'ui'
5
6import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
7import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
8
9export interface EnterpriseCardProps {
10 plan: PricingInformation
11 isCurrentPlan: boolean
12}
13
14export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
15 const { data: selectedOrganization } = useSelectedOrganizationQuery()
16 const orgSlug = selectedOrganization?.slug
17
18 const features = plan.features
19 const currentPlan = selectedOrganization?.plan.name
20
21 const { mutate: sendEvent } = useSendEventMutation()
22
23 return (
24 <div
25 key={plan.id}
26 className={cn(
27 'grid grid-cols-1 md:grid-cols-3 border rounded-md bg-studio',
28 'py-4 col-span-12 justify-between gap-x-8'
29 )}
30 >
31 <div className="flex flex-col justify-center px-4">
32 <div className="flex items-center space-x-2">
33 <p className={cn('text-brand text-sm uppercase')}>{plan.name}</p>
34 {isCurrentPlan ? (
35 <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
36 Current plan
37 </div>
38 ) : plan.nameBadge ? (
39 <div className="text-xs bg-surface-200 text-brand rounded-sm px-2 py-0.5">
40 {plan.nameBadge}
41 </div>
42 ) : null}
43 </div>
44
45 <p className="text-sm mt-2 mb-4">{plan.description}</p>
46
47 <Button
48 block
49 asChild
50 type="default"
51 size="tiny"
52 onClick={() =>
53 sendEvent({
54 action: 'studio_pricing_plan_cta_clicked',
55 properties: { selectedPlan: 'Enterprise', currentPlan },
56 groups: { organization: orgSlug ?? 'Unknown' },
57 })
58 }
59 >
60 <a href={plan.href} className="hidden md:block" target="_blank">
61 {plan.cta}
62 </a>
63 </Button>
64 </div>
65
66 <div className="flex flex-col justify-center col-span-2 px-4 md:px-0">
67 <ul
68 role="list"
69 className="text-xs text-foreground-light md:grid md:grid-cols-2 md:gap-x-10"
70 >
71 {features.map((feature) => (
72 <li
73 key={typeof feature === 'string' ? feature : feature[0]}
74 className="flex items-center py-2 first:mt-0"
75 >
76 <Check className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
77 <span className="text-foreground mb-0 ml-3 ">
78 {typeof feature === 'string' ? feature : feature[0]}
79 </span>
80 </li>
81 ))}
82 </ul>
83
84 <Button
85 block
86 asChild
87 type="default"
88 size="tiny"
89 onClick={() =>
90 sendEvent({
91 action: 'studio_pricing_plan_cta_clicked',
92 properties: { selectedPlan: 'Enterprise', currentPlan },
93 groups: { organization: orgSlug ?? 'Unknown' },
94 })
95 }
96 >
97 <a href={plan.href} className="visible md:hidden mt-8" target="_blank">
98 {plan.cta}
99 </a>
100 </Button>
101 </div>
102 </div>
103 )
104}