tapimo 0.14.0 → 0.15.0

package/src/admin/ui/src/routes/organizations_.$orgId.tsx

@@ -12,7 +12,7 @@ import {
   useNavigate,
   useRouter,
 } from '@tanstack/react-router'
-import { Button, Rows, Select } from 'regen-ui'
+import { Button, Fields, Input, Rows, Select } from 'regen-ui'
 import { ArrowLeft, RefreshCw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
@@ -23,7 +23,10 @@ import * as Organizations from '../lib/organizations.js'
 export const Route = createFileRoute('/organizations_/$orgId')({
   validateSearch: Organizations.schema.Search,
   loader: ({ context, params }) =>
-    context.queryClient.ensureQueryData(Organizations.get.options(params.orgId)),
+    Promise.all([
+      context.queryClient.ensureQueryData(Organizations.get.options(params.orgId)),
+      context.queryClient.ensureQueryData(Organizations.getSubsidies.options(params.orgId)),
+    ]),
   component: PageComponent,
   errorComponent: OrganizationError,
 })
@@ -35,9 +38,12 @@ function PageComponent() {
   const period = period_search ?? '7d'
   const disableBillingSource = Organizations.disableBillingSource.useMutation(orgId)
   const enableBillingSource = Organizations.enableBillingSource.useMutation(orgId)
+  const setRoutesSubsidy = Organizations.setRoutesSubsidy.useMutation(orgId)
   const setSponsorshipSubsidy = Organizations.setSponsorshipSubsidy.useMutation(orgId)
   const organizationQuery = useSuspenseQuery(Organizations.get.options(orgId))
   const organization = organizationQuery.data
+  const subsidiesQuery = useSuspenseQuery(Organizations.getSubsidies.options(orgId))
+  const subsidies = subsidiesQuery.data
   const members = useInfiniteQuery(Organizations.members.options(orgId))
   const projects = useInfiniteQuery(Organizations.projects.options(orgId))
   const apiKeys = useQuery(Organizations.apiKeys.options(orgId))
@@ -53,6 +59,7 @@ function PageComponent() {
     organizationQuery,
     projects,
     sponsorship,
+    subsidiesQuery,
     usage,
     webhooks,
   ]
@@ -70,6 +77,7 @@ function PageComponent() {
       organizationQuery.refetch(),
       projects.refetch(),
       sponsorship.refetch(),
+      subsidiesQuery.refetch(),
       usage.refetch(),
       webhooks.refetch(),
     ])
@@ -113,6 +121,7 @@ function PageComponent() {
         <div className="flex flex-wrap items-center justify-between gap-3">
           <h2 className="text-heading-18 text-foreground">Operations</h2>
           <div className="flex items-center gap-3">
+            <Button render={<Link search={{ orgId }} to="/routes" />}>View routes</Button>
             <span aria-live="polite" className="text-label-12 text-foreground-secondary">
               {refreshing && !updateComplete ? (
                 'Updating…'
@@ -200,12 +209,6 @@ function PageComponent() {
           onChange={setBillingSource}
           pending={billingSourcePending}
         />
-        <SponsorshipSubsidyCard
-          error={setSponsorshipSubsidy.error}
-          onSave={(policy) => setSponsorshipSubsidy.mutate(policy)}
-          pending={setSponsorshipSubsidy.isPending}
-          policy={organization.sponsorshipSubsidy}
-        />
         <div className="grid gap-3 md:grid-cols-2">
           <BillingCard
             environment="Production"
@@ -223,8 +226,29 @@ function PageComponent() {
         ) : null}
       </section>
 
+      <section className="flex flex-col gap-3">
+        <h2 className="text-heading-18 text-foreground">Subsidies</h2>
+        <div className="grid items-start gap-3">
+          <SponsorshipSubsidyCard
+            error={setSponsorshipSubsidy.error}
+            onSave={(policy) => setSponsorshipSubsidy.mutate(policy)}
+            pending={setSponsorshipSubsidy.isPending}
+            policy={subsidies.sponsorship}
+          />
+          <RoutesSubsidyCard
+            error={setRoutesSubsidy.error}
+            onSave={(policy) => setRoutesSubsidy.mutate(policy)}
+            pending={setRoutesSubsidy.isPending}
+            policy={subsidies.routes}
+            usage={subsidies.routesUsage}
+          />
+        </div>
+      </section>
+
       <WebhooksCard query={webhooks} />
 
+      <InviteMemberCard orgId={orgId} />
+
       <div className="grid items-start gap-6 lg:grid-cols-2">
         <ResourceList
           empty="No members."
@@ -296,6 +320,76 @@ function PageComponent() {
   )
 }
 
+/** Sends the same organization invitation used by the developer console. */
+function InviteMemberCard(options: InviteMemberCard.Props) {
+  const invite = Organizations.invite.useMutation(options.orgId)
+  const [formKey, setFormKey] = useState(0)
+  const [role, setRole] = useState<Organizations.Member['role']>('member')
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="text-heading-18 text-foreground">Invite member</h2>
+      <Card>
+        <form
+          className="flex flex-col gap-6 p-4"
+          key={formKey}
+          onSubmit={(event) => {
+            event.preventDefault()
+            const email = new FormData(event.currentTarget).get('email')
+            if (typeof email !== 'string' || !email.trim()) return
+            invite.mutate(
+              { email: email.trim(), role },
+              {
+                onSuccess: () => {
+                  setFormKey((key) => key + 1)
+                  setRole('member')
+                },
+              },
+            )
+          }}
+        >
+          <p className="text-copy-13 text-foreground-secondary">
+            Send the standard Tempo invitation. Membership starts after the recipient accepts it.
+          </p>
+          <Fields.Inline>
+            <Input label="Email" name="email" placeholder="dev@example.com" required type="email" />
+            <label className="flex min-w-0 flex-col gap-2">
+              <span className="text-label-13 text-foreground-secondary">Role</span>
+              <Select
+                aria-label="Role"
+                items={memberRoleItems}
+                onChange={(value) => setRole(value as Organizations.Member['role'])}
+                value={role}
+              />
+            </label>
+          </Fields.Inline>
+          <div className="flex items-center justify-end gap-3">
+            {invite.error ? (
+              <p className="mr-auto text-copy-13 text-negative" role="alert">
+                {invite.error.message}
+              </p>
+            ) : invite.isSuccess ? (
+              <p className="mr-auto text-copy-13 text-positive" role="status">
+                Invitation sent.
+              </p>
+            ) : null}
+            <Button loading={invite.isPending} type="submit" variant="primary">
+              Send invitation
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </section>
+  )
+}
+
+declare namespace InviteMemberCard {
+  /** Invitation card properties. */
+  type Props = {
+    /** Organization receiving the invited member. */
+    orgId: string
+  }
+}
+
 function OrganizationError(options: OrganizationError.Props) {
   const router = useRouter()
   const { query } = Route.useSearch()
@@ -663,15 +757,129 @@ export declare namespace BillingSourcesCard {
   }
 }
 
-/** Organization-wide per-project sponsorship subsidy controls. */
+/** Organization-wide Routes subsidy controls. */
+export function RoutesSubsidyCard(options: RoutesSubsidyCard.Props) {
+  const [enabled, setEnabled] = useState(options.policy !== null)
+  const [maxAmount, setMaxAmount] = useState(options.policy?.maxAmount ?? '')
+
+  useEffect(() => {
+    setEnabled(options.policy !== null)
+    setMaxAmount(options.policy?.maxAmount ?? '')
+  }, [options.policy])
+
+  return (
+    <Card>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          if (!enabled) return options.onSave({ enabled: false })
+          return options.onSave({ enabled: true, maxAmount })
+        }}
+      >
+        <div className="flex items-start justify-between gap-4 p-4">
+          <div className="min-w-0">
+            <h3 className="text-label-14 text-foreground">Routes</h3>
+            <p className="mt-1 text-copy-13 text-foreground-secondary">
+              Configure normalized 1:1 delivery for eligible Routes deposits.
+            </p>
+          </div>
+          <Switch.Root
+            aria-label="Routes subsidy"
+            checked={enabled}
+            className="flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-secondary p-0.5 outline-none transition-colors hover:bg-secondary-hover focus-visible:border-focus data-[checked]:bg-invert disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={options.pending}
+            onCheckedChange={setEnabled}
+          >
+            <Switch.Thumb className="block size-4 translate-x-0 rounded-full bg-foreground-secondary transition-transform data-[checked]:translate-x-4 data-[checked]:bg-on-invert" />
+          </Switch.Root>
+        </div>
+        {enabled ? (
+          <div className="border-t border-border p-4">
+            <label className="flex min-w-0 flex-col gap-2">
+              <span className="text-label-13 text-foreground-secondary">
+                Maximum subsidy per transaction
+              </span>
+              <span className="flex h-10 items-center rounded-body border-2 border-transparent bg-secondary px-3 focus-within:border-focus">
+                <span className="text-copy-14 text-foreground-secondary">$</span>
+                <input
+                  aria-label="Maximum subsidy per transaction"
+                  className="min-w-0 flex-1 bg-transparent px-2 text-copy-14 text-foreground outline-none"
+                  disabled={options.pending}
+                  inputMode="decimal"
+                  min="0.000001"
+                  onChange={(event) => setMaxAmount(event.target.value)}
+                  required
+                  step="0.000001"
+                  type="number"
+                  value={maxAmount}
+                />
+              </span>
+              <span className="text-label-12 text-foreground-secondary">
+                Caps the USD gap Tempo covers for each Routes transaction. Production enforcement
+                also requires active Stripe billing.
+              </span>
+            </label>
+          </div>
+        ) : (
+          <p className="border-t border-border p-4 text-copy-13 text-foreground-secondary">
+            The Routes subsidy policy is disabled for this organization.
+          </p>
+        )}
+        <div className="border-t border-border p-4">
+          <p className="mb-3 text-label-12 text-foreground-secondary">
+            Production usage since {core_Format.mediumDate(options.usage.from)}
+          </p>
+          <dl className="grid grid-cols-2 gap-4">
+            <Detail label="Subsidized amount">{Format.money(options.usage.amount, 'usd')}</Detail>
+            <Detail label="Completed deposits">{options.usage.count.toLocaleString()}</Detail>
+          </dl>
+        </div>
+        <p className="border-t border-border p-4 text-copy-13 text-foreground-secondary">
+          When enforcement is enabled, disabling this policy also blocks future Tempo top-ups for
+          previously issued reusable addresses.
+        </p>
+        <div className="flex items-center justify-end gap-3 border-t border-border p-4">
+          {options.error ? (
+            <p className="mr-auto text-copy-13 text-negative" role="alert">
+              {options.error.message}
+            </p>
+          ) : null}
+          <Button loading={options.pending} type="submit">
+            Save policy
+          </Button>
+        </div>
+      </form>
+    </Card>
+  )
+}
+
+export declare namespace RoutesSubsidyCard {
+  /** Routes subsidy control properties. */
+  type Props = {
+    /** Latest mutation error. */
+    error: Error | null
+    /** Saves a replacement policy. */
+    onSave: (policy: Organizations.setRoutesSubsidy.Input) => void
+    /** Whether a policy change is pending. */
+    pending: boolean
+    /** Current organization policy. */
+    policy: Organizations.Subsidies['routes']
+    /** Current-month production usage. */
+    usage: Organizations.Subsidies['routesUsage']
+  }
+}
+
+/** Organization-wide per-attribution sponsorship subsidy controls. */
 export function SponsorshipSubsidyCard(options: SponsorshipSubsidyCard.Props) {
   const [enabled, setEnabled] = useState(options.policy.durationDays !== null)
-  const [projectSpendLimit, setProjectSpendLimit] = useState(options.policy.projectSpendLimit ?? '')
+  const [attributionSpendLimit, setAttributionSpendLimit] = useState(
+    options.policy.attributionSpendLimit ?? '',
+  )
 
   useEffect(() => {
     setEnabled(options.policy.durationDays !== null)
-    setProjectSpendLimit(options.policy.projectSpendLimit ?? '')
-  }, [options.policy.durationDays, options.policy.projectSpendLimit])
+    setAttributionSpendLimit(options.policy.attributionSpendLimit ?? '')
+  }, [options.policy.attributionSpendLimit, options.policy.durationDays])
 
   return (
     <Card>
@@ -679,15 +887,15 @@ export function SponsorshipSubsidyCard(options: SponsorshipSubsidyCard.Props) {
         onSubmit={(event) => {
           event.preventDefault()
           if (!enabled) return options.onSave({ enabled: false })
-          if (!projectSpendLimit) return options.onSave({ enabled: true })
-          return options.onSave({ enabled: true, projectSpendLimit })
+          if (!attributionSpendLimit) return options.onSave({ enabled: true })
+          return options.onSave({ attributionSpendLimit, enabled: true })
         }}
       >
         <div className="flex items-start justify-between gap-4 p-4">
           <div className="min-w-0">
-            <h3 className="text-label-14 text-foreground">Sponsorship subsidy</h3>
+            <h3 className="text-label-14 text-foreground">Sponsorship</h3>
             <p className="mt-1 text-copy-13 text-foreground-secondary">
-              Waive sponsored transaction charges for each project's first 90 days.
+              Waive sponsored transaction charges for each attribution's first 90 days.
             </p>
           </div>
           <Switch.Root
@@ -703,33 +911,35 @@ export function SponsorshipSubsidyCard(options: SponsorshipSubsidyCard.Props) {
         {enabled ? (
           <div className="grid gap-4 border-t border-border p-4 md:grid-cols-2">
             <label className="flex min-w-0 flex-col gap-2">
-              <span className="text-label-13 text-foreground-secondary">Duration per project</span>
+              <span className="text-label-13 text-foreground-secondary">
+                Duration per attribution
+              </span>
               <input
                 className="h-10 rounded-body border-2 border-transparent bg-secondary px-3 text-copy-14 text-foreground-secondary"
                 disabled
                 value="90 days"
               />
               <span className="text-label-12 text-foreground-secondary">
-                Starts with the project's first mainnet sponsorship.
+                Starts with the attribution's first mainnet sponsorship.
               </span>
             </label>
             <label className="flex min-w-0 flex-col gap-2">
               <span className="text-label-13 text-foreground-secondary">
-                Per-project spend cap (optional)
+                Per-attribution spend cap (optional)
               </span>
               <span className="flex h-10 items-center rounded-body border-2 border-transparent bg-secondary px-3 focus-within:border-focus">
                 <span className="text-copy-14 text-foreground-secondary">$</span>
                 <input
-                  aria-label="Per-project spend cap"
+                  aria-label="Per-attribution spend cap"
                   className="min-w-0 flex-1 bg-transparent px-2 text-copy-14 text-foreground outline-none"
                   disabled={options.pending}
                   inputMode="decimal"
                   min="0"
-                  onChange={(event) => setProjectSpendLimit(event.target.value)}
+                  onChange={(event) => setAttributionSpendLimit(event.target.value)}
                   placeholder="No cap"
                   step="0.000001"
                   type="number"
-                  value={projectSpendLimit}
+                  value={attributionSpendLimit}
                 />
               </span>
               <span className="text-label-12 text-foreground-secondary">
@@ -767,7 +977,7 @@ export declare namespace SponsorshipSubsidyCard {
     /** Whether a policy change is pending. */
     pending: boolean
     /** Current organization policy. */
-    policy: Organizations.Detail['sponsorshipSubsidy']
+    policy: Organizations.Subsidies['sponsorship']
   }
 }
 
@@ -929,3 +1139,9 @@ const usagePeriodItems = [
   { label: '7 days', value: '7d' },
   { label: '30 days', value: '30d' },
 ]
+
+const memberRoleItems = [
+  { label: 'Member', value: 'member' },
+  { label: 'Admin', value: 'admin' },
+  { label: 'Owner', value: 'owner' },
+] as const