Rework billing

frontend/src/pages/relays/RelayDetail.tsx

@@ -2,7 +2,7 @@ import { useParams } from "@solidjs/router"
 import { createMemo, createResource, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
-import PaymentDialog from "@/components/PaymentDialog"
+import PaymentSetup from "@/components/PaymentSetup"
 import RelayDetailCard from "@/components/RelayDetailCard"
 import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
@@ -21,7 +21,7 @@ export default function RelayDetail() {
   const [members] = createResource(relayUrl, getRelayMembers)
   const loading = useMinLoading(() => relay.loading && !relay())
   const [activity] = useRelayActivity(relayId)
-  const { busy, handleDeactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
+  const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
   return (
     <PageContainer>
@@ -35,7 +35,9 @@ export default function RelayDetail() {
               currentMembers={members.length}
               editHref={`/relays/${params.id}/edit`}
               onDeactivate={handleDeactivate}
+              onReactivate={handleReactivate}
               deactivating={busy()}
+              reactivating={busy()}
               onUpdatePlan={handleUpdatePlan}
               {...toggles}
             />
@@ -43,15 +45,10 @@ export default function RelayDetail() {
           </div>
         )}
       </Show>
-      <Show when={pendingInvoice()}>
-        {(invoice) => (
-          <PaymentDialog
-            invoice={invoice()}
-            open={true}
-            onClose={clearPendingInvoice}
-          />
-        )}
-      </Show>
+      <PaymentSetup
+        open={needsPaymentSetup()}
+        onClose={clearNeedsPaymentSetup}
+      />
     </PageContainer>
   )
 }

frontend/src/pages/relays/RelayList.tsx

@@ -34,10 +34,7 @@ export default function RelayList() {
         <select value={status()} onChange={e => setStatus(e.currentTarget.value)} class="border border-gray-300 rounded-lg px-3 py-2 bg-white">
           <option value="all">All statuses</option>
           <option value="active">Active</option>
-          <option value="pending">Pending</option>
-          <option value="deactivated">Deactivated</option>
-          <option value="provisioning_failed">Provisioning failed</option>
-          <option value="suspended">Suspended</option>
+          <option value="inactive">Inactive</option>
         </select>
       </div>
       <ResourceState loading={loading()} error={relays.error} loadingText="Loading relays..." errorText="Failed to load relays." />

frontend/src/pages/relays/RelayNew.tsx

@@ -2,13 +2,13 @@ import { createSignal } from "solid-js"
 import { useNavigate } from "@solidjs/router"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
-import PaymentDialog from "@/components/PaymentDialog"
+import PaymentSetup from "@/components/PaymentSetup"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
-import { checkPendingInvoice, createRelayForActiveTenant, type Invoice } from "@/lib/hooks"
+import { createRelayForActiveTenant, tenantNeedsPaymentSetup } from "@/lib/hooks"
 
 export default function RelayNew() {
   const navigate = useNavigate()
-  const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
+  const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
   let createdRelayId = ""
 
   async function handleSubmit(values: RelayFormValues) {
@@ -16,9 +16,9 @@ export default function RelayNew() {
     createdRelayId = relay.id
 
     if (values.plan !== "free") {
-      const invoice = await checkPendingInvoice()
-      if (invoice) {
-        setPendingInvoice(invoice)
+      const needs = await tenantNeedsPaymentSetup()
+      if (needs) {
+        setShowPaymentSetup(true)
         return
       }
     }
@@ -27,7 +27,7 @@ export default function RelayNew() {
   }
 
   function handleDialogClose() {
-    setPendingInvoice(undefined)
+    setShowPaymentSetup(false)
     navigate(`/relays/${createdRelayId}`)
   }
 
@@ -41,13 +41,10 @@ export default function RelayNew() {
         submitLabel="Create Relay"
         submittingLabel="Creating..."
       />
-      {pendingInvoice() && (
-        <PaymentDialog
-          invoice={pendingInvoice()!}
-          open={!!pendingInvoice()}
-          onClose={handleDialogClose}
-        />
-      )}
+      <PaymentSetup
+        open={showPaymentSetup()}
+        onClose={handleDialogClose}
+      />
     </PageContainer>
   )
 }