konnosDashboard
StripeSyncChangesCard.tsx159 lines · main
1import { EdgeFunctions } from 'icons'
2import { Layers, Loader2, Table } from 'lucide-react'
3import { SchemaInstallationStatus } from 'stripe-experiment-sync/supabase'
4import { Card, CardContent, cn } from 'ui'
5
6import {
7 hasInstallError,
8 hasUninstallError,
9 isInstallDone,
10 isInstalled,
11 isInstalling,
12 isUninstallDone,
13 isUninstalling,
14} from './stripe-sync-status'
15
16type StripeSyncChangesCardProps = {
17 installationStatus: SchemaInstallationStatus
18 className?: string
19 isUpgrade?: boolean
20}
21
22const ListItemClassName = 'flex items-center gap-x-3 py-2 px-3 border-b'
23
24export const StripeSyncChangesCard = ({
25 installationStatus,
26 className,
27 isUpgrade,
28}: StripeSyncChangesCardProps) => {
29 const installed = isInstalled(installationStatus)
30 const installError = hasInstallError(installationStatus)
31 const uninstallError = hasUninstallError(installationStatus)
32 const installInProgress = isInstalling(installationStatus)
33 const uninstallInProgress = isUninstalling(installationStatus)
34 const installDone = isInstallDone(installationStatus)
35 const uninstallDone = isUninstallDone(installationStatus)
36
37 // Special case: installed integration with upgrade available (shown in sheet context)
38 const isInProgress = installInProgress || uninstallInProgress
39 const isInstalledWithUpgrade = installed && isUpgrade
40
41 const title = isInstalledWithUpgrade
42 ? 'This integration will upgrade your Briven project:'
43 : uninstallDone || installError
44 ? 'This integration will modify your Briven project:'
45 : isInProgress
46 ? 'This integration is modifying your Briven project:'
47 : installDone || installed || uninstallError
48 ? 'This integration has modified your Briven project:'
49 : ''
50
51 const dbLine = isInstalledWithUpgrade
52 ? 'Upgrades the database schema named'
53 : uninstallDone || installError
54 ? 'Creates a new database schema named'
55 : installInProgress
56 ? isUpgrade
57 ? 'Upgrading database schema named'
58 : 'Creating a new database schema named'
59 : installDone || installed || uninstallError
60 ? 'Created a new database schema named'
61 : uninstallInProgress
62 ? 'Dropping database schema named'
63 : ''
64
65 const tableAndViewLine = isInstalledWithUpgrade
66 ? 'Upgrades tables and views in the'
67 : uninstallDone || installError
68 ? 'Creates tables and views in the'
69 : installInProgress
70 ? isUpgrade
71 ? 'Upgrading tables and views in the'
72 : 'Creating tables and views in the'
73 : installDone || installed || uninstallError
74 ? 'Created tables and views in the'
75 : uninstallInProgress
76 ? 'Dropping tables and views in the'
77 : ''
78
79 const edgeFunctionsLine = isInstalledWithUpgrade
80 ? 'Upgrades Edge Functions to handle incoming webhooks from Stripe'
81 : uninstallDone || installError
82 ? 'Deploys Edge Functions to handle incoming webhooks from Stripe'
83 : installInProgress
84 ? isUpgrade
85 ? 'Upgrading Edge Functions to handle incoming webhooks from Stripe'
86 : 'Deploying Edge Functions to handle incoming webhooks from Stripe'
87 : installDone || installed || uninstallError
88 ? 'Deployed Edge Functions to handle incoming webhooks from Stripe'
89 : uninstallInProgress
90 ? 'Undeploying Edge Functions to handle incoming webhooks from Stripe'
91 : ''
92
93 const scheduleLine = isInstalledWithUpgrade
94 ? 'Upgrades automatic Stripe data syncs using Briven Queues'
95 : uninstallDone || installError
96 ? 'Schedules automatic Stripe data syncs using Briven Queues'
97 : installInProgress
98 ? isUpgrade
99 ? 'Upgrading automatic Stripe data syncs using Briven Queues'
100 : 'Scheduling automatic Stripe data syncs using Briven Queues'
101 : installDone || installed || uninstallError
102 ? 'Scheduled automatic Stripe data syncs using Briven Queues'
103 : uninstallInProgress
104 ? 'Unscheduling automatic Stripe data syncs using Briven Queues'
105 : ''
106
107 return (
108 <div className="flex flex-col gap-y-4">
109 <h4>{title}</h4>
110 <Card className={cn(className)}>
111 <CardContent className="p-0">
112 <ul className="text-foreground-light text-sm">
113 <li className={ListItemClassName}>
114 {isInProgress ? (
115 <Loader2 size={16} className="animate-spin" />
116 ) : (
117 <Table size={16} strokeWidth={1.5} className="text-foreground-lighter shrink-0" />
118 )}
119 <span>
120 {dbLine} <code className="text-code-inline">stripe</code>
121 </span>
122 </li>
123 <li className={ListItemClassName}>
124 {isInProgress ? (
125 <Loader2 size={16} className="animate-spin" />
126 ) : (
127 <Table size={16} strokeWidth={1.5} className="text-foreground-lighter shrink-0" />
128 )}
129 <span>
130 {tableAndViewLine} <code className="text-code-inline">stripe</code> schema for
131 synced Stripe data
132 </span>
133 </li>
134 <li className={ListItemClassName}>
135 {isInProgress ? (
136 <Loader2 size={16} className="animate-spin" />
137 ) : (
138 <EdgeFunctions
139 size={16}
140 strokeWidth={1.5}
141 className="text-foreground-lighter shrink-0"
142 />
143 )}
144 <span>{edgeFunctionsLine}</span>
145 </li>
146 <li className="flex items-center gap-x-3 py-2 px-3">
147 {isInProgress ? (
148 <Loader2 size={16} className="animate-spin" />
149 ) : (
150 <Layers size={16} strokeWidth={1.5} className="text-foreground-lighter shrink-0" />
151 )}
152 <span>{scheduleLine}</span>
153 </li>
154 </ul>
155 </CardContent>
156 </Card>
157 </div>
158 )
159}