feat(dashboard): W8 cleanup — Team CTA, Update payment, Paused pill, pause/resume client (#57)

mastermanas805 · web-flow · commit b079f6aceff3 · 2026-05-14T10:35:55.000+05:30
* feat(dashboard): W8 dashboard-cleanup

- Team CTA: 'Coming soon' → mailto enterprise@ on Marketing + Pricing pages.
- Update payment method: wire BillingPage button to POST /api/v1/billing/update-payment
  (returns Razorpay short_url; falls back to mailto on error).
- Paused pill on ResourceDetailPage header + ResourcesPage row.
- ResourceStatus union expanded to include 'paused' and 'reaped'.
- pauseResource / resumeResource / updatePaymentMethod client helpers.
- ContractLines panel updated to reflect actual API surface.

* test(dashboard): update live-ContractLine count for W8 surface
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -329,6 +329,27 @@ export async function inviteMember(_body: { email: string; role: string }): Prom
   return { ok: true }
 }
 
+// ─── Resource pause / resume (LIVE — Pro+ tier) ────────────────────────
+// Pause keeps the data + connection_url but stops counting the resource
+// against the per-team count quota; storage still counts. Resume flips
+// status back to active. 402 means the team is on a tier that doesn't
+// include pause/resume; surface the agent_action upgrade copy.
+export async function pauseResource(id: string): Promise<{ ok: true; resource: Resource }> {
+  const r = await call<{ ok: boolean; resource: any }>(
+    `/api/v1/resources/${encodeURIComponent(id)}/pause`,
+    { method: 'POST' },
+  )
+  return { ok: true, resource: adaptResource(r.resource) }
+}
+
+export async function resumeResource(id: string): Promise<{ ok: true; resource: Resource }> {
+  const r = await call<{ ok: boolean; resource: any }>(
+    `/api/v1/resources/${encodeURIComponent(id)}/resume`,
+    { method: 'POST' },
+  )
+  return { ok: true, resource: adaptResource(r.resource) }
+}
+
 // ─── Resources (LIVE) ───────────────────────────────────────────────────
 type ResourceListResp = { ok: boolean; items: any[]; total: number }
 type ResourceGetResp = { ok: boolean; item: any }
@@ -1071,6 +1092,21 @@ export async function cancelSubscription(): Promise<{ ok: true }> {
   return { ok: true }
 }
 
+// updatePaymentMethod — LIVE. POST /api/v1/billing/update-payment returns a
+// Razorpay short_url the customer can hit to swap their saved card without
+// going through support. Previously the BillingPage "Update" button was a
+// mailto:support@ link because the comment in BillingPage.tsx claimed "no
+// self-serve update-payment endpoint exists" — but the api shipped this
+// handler (billing.go:1082 UpdatePaymentMethodAPI) so the dashboard should
+// just call it.
+export async function updatePaymentMethod(): Promise<{ ok: true; short_url: string }> {
+  const r = await call<{ ok: boolean; short_url: string }>(
+    '/api/v1/billing/update-payment',
+    { method: 'POST' },
+  )
+  return { ok: true, short_url: r.short_url }
+}
+
 // ─── Vault (LIVE — listing keys works, value reveal lives on detail) ────
 type VaultListResp = { ok: boolean; keys: string[] }
 
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -16,7 +16,7 @@ export type ResourceType =
   | 'webhook'
   | 'deploy'
 
-export type ResourceStatus = 'active' | 'expired' | 'tombstoned' | 'deleted'
+export type ResourceStatus = 'active' | 'paused' | 'expired' | 'tombstoned' | 'deleted' | 'reaped'
 
 export interface Resource {
   id: string
diff --git a/src/pages/BillingPage.test.tsx b/src/pages/BillingPage.test.tsx
@@ -817,14 +817,22 @@ describe('BillingPage — §10.8 leak fixes', () => {
     expect(container.textContent?.toLowerCase()).not.toContain('running')
   })
 
-  it('exposes the Update payment-method action as a mailto link, not a dead button', async () => {
+  it('exposes the Update payment-method action as a clickable button (self-serve, not a dead mailto)', async () => {
     mockTier = 'pro'
     mockHappyBilling()
     render(<BillingPage />)
     await waitForLoaded()
+    // The button is wired to POST /api/v1/billing/update-payment which
+    // returns a Razorpay short_url; on api error the component falls back
+    // to a support mailto. Either way the data-testid is present.
     const link = screen.getByTestId('contact-support-update-payment') as HTMLAnchorElement
     expect(link.tagName).toBe('A')
-    expect(link.href.toLowerCase()).toContain('mailto:support@instanode.dev')
+    // The button starts in interactive mode: clickable href="#" with an
+    // onClick handler. Only after a failed API call does it degrade to a
+    // mailto. So the default-state assertion is "not a dead anchor in the
+    // sense of pointing somewhere; it has an onclick handler".
+    expect(link.href.toLowerCase()).not.toContain('mailto:')
+    expect(link.textContent?.toLowerCase()).toContain('update')
   })
 })
 
diff --git a/src/pages/BillingPage.tsx b/src/pages/BillingPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import { ROBanner, TierPill } from '../components/Common'
 import { UpgradeButton } from '../components/UpgradeButton'
 import { PricingGrid } from '../components/PricingGrid'
@@ -383,16 +383,12 @@ export function BillingPage() {
               auto-renews{' '}
               {billing.current_period_end && new Date(billing.current_period_end).toLocaleDateString()}
             </span>
-            {/* No self-serve "update payment method" endpoint exists. Route
-                the click through support, matching the cancel pattern. */}
-            <a
-              className="btn btn-sm btn-ghost"
-              style={{ marginLeft: 'auto' }}
-              href="mailto:support@instanode.dev?subject=Update%20payment%20method"
-              data-testid="contact-support-update-payment"
-            >
-              Update
-            </a>
+            {/* Self-serve "update payment method" is wired: api/billing.go
+                exposes POST /api/v1/billing/update-payment which returns a
+                Razorpay short_url. Falls back to support mailto on error
+                (rate limit, billing not configured, network) so customers
+                still have an escalation path. */}
+            <UpdatePaymentButton />
           </div>
         </div>
       </section>
@@ -553,6 +549,60 @@ function isWarn(used: number, limit: number): boolean {
   return used / limit >= 0.8
 }
 
+// UpdatePaymentButton — invokes POST /api/v1/billing/update-payment, which
+// returns a Razorpay-managed short_url the customer can hit to swap their
+// saved card. On any error the button silently falls back to a mailto
+// link so the customer is never stuck. data-testid mirrors the previous
+// support-route id so existing Playwright assertions on click-target still
+// pass — the underlying href just resolves to a real Razorpay session now.
+function UpdatePaymentButton() {
+  const [pending, setPending] = useState(false)
+  const [errored, setErrored] = useState(false)
+
+  async function onClick(e: ReactMouseEvent<HTMLAnchorElement>) {
+    e.preventDefault()
+    if (pending) return
+    setPending(true)
+    setErrored(false)
+    try {
+      const r = await api.updatePaymentMethod()
+      if (r.short_url) {
+        window.location.href = r.short_url
+        return
+      }
+      setErrored(true)
+    } catch {
+      setErrored(true)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  if (errored) {
+    return (
+      <a
+        className="btn btn-sm btn-ghost"
+        style={{ marginLeft: 'auto' }}
+        href="mailto:support@instanode.dev?subject=Update%20payment%20method"
+        data-testid="contact-support-update-payment"
+      >
+        Contact support
+      </a>
+    )
+  }
+  return (
+    <a
+      className="btn btn-sm btn-ghost"
+      style={{ marginLeft: 'auto', pointerEvents: pending ? 'none' : 'auto', opacity: pending ? 0.6 : 1 }}
+      href="#"
+      onClick={onClick}
+      data-testid="contact-support-update-payment"
+    >
+      {pending ? 'Opening…' : 'Update'}
+    </a>
+  )
+}
+
 // formatAsOf — renders a server-side ISO timestamp as a human-friendly
 // "Ns ago" string for the cached-usage footnote. Under a minute is in
 // seconds; older snapshots switch to minutes / hours. Clock skew (negative
diff --git a/src/pages/MarketingPage.tsx b/src/pages/MarketingPage.tsx
@@ -123,14 +123,18 @@ const PLANS: Plan[] = [
     tagline: 'For the engineering org with envs, vault, and an audit trail.',
     price: '$199',
     freq: '/ mo',
-    comingSoon: true,
     features: [
       'Everything in Pro, with larger per-resource limits',
-      'Multi-seat workspace · RBAC + audit log',
-      'SSO / SAML · 99.9% SLA',
+      'Multi-seat workspace · RBAC + audit log (rolling out)',
+      'SSO / SAML · 99.9% SLA (on roadmap)',
       'Dedicated node pools · priority support',
     ],
-    cta: { label: 'Coming soon', href: '#', variant: 'disabled' },
+    // Multi-seat / RBAC / SSO UI is still being built (flagged inline in
+    // the `features` list as "rolling out" / "on roadmap"). The Razorpay
+    // yearly plan and dedicated-infra k8s plumbing both exist, so Team
+    // is sellable via enterprise@ today. Replacing the dead `#` anchor
+    // with a real mailto unblocks procurement conversations.
+    cta: { label: 'Contact sales →', href: 'mailto:enterprise@instanode.dev?subject=Team%20tier%20inquiry', variant: 'primary' },
   },
 ]
 
@@ -406,7 +410,8 @@ export function MarketingPage() {
             </h2>
             <p className="mkt-section-sub">
               Anonymous is the funnel. Hobby pays for the side project. Pro unlocks the
-              multi-env workflow. Team (coming soon) is for the company that ships every day.
+              multi-env workflow. Team is for the company that ships every day — talk to us
+              about your needs.
             </p>
           </div>
 
diff --git a/src/pages/PricingPage.tsx b/src/pages/PricingPage.tsx
@@ -64,9 +64,15 @@ const TIERS: {
     name: 'Team',
     monthly: { price: '$199', sub: '/ mo' },
     yearly: { price: '$165.83', sub: '/ mo billed yearly', saveLabel: 'save $398/yr' },
-    cta: 'Coming soon',
-    ctaHrefMonthly: '#',
-    comingSoon: true,
+    // Self-serve checkout for Team is still being wired (multi-seat / RBAC
+    // UI). The Razorpay yearly plan and dedicated-infra k8s plumbing both
+    // exist, so the tier is sellable via enterprise@ today. Dropping
+    // `comingSoon` so the CTA renders as a clickable mailto link instead of
+    // a disabled span; per-feature SOON markers in the matrix below still
+    // flag the specific gaps (SSO, RBAC, audit-export) honestly.
+    cta: 'Contact sales →',
+    ctaHrefMonthly: 'mailto:enterprise@instanode.dev?subject=Team%20tier%20inquiry',
+    ctaHrefYearly: 'mailto:enterprise@instanode.dev?subject=Team%20tier%20annual%20inquiry',
   },
 ]
 
diff --git a/src/pages/ResourceDetailPage.test.tsx b/src/pages/ResourceDetailPage.test.tsx
@@ -108,8 +108,11 @@ describe('ResourceDetailPage — API contract panel', () => {
       expect(screen.getByText('API contract')).toBeTruthy()
     })
 
-    // Four rows with status="live" — GET, POST rotate, DELETE, GET metrics.
+    // Eight rows with status="live": GET resource, POST rotate-credentials,
+    // POST pause, POST resume, POST provision-twin, GET credentials, DELETE,
+    // GET metrics (W8 surfaces the full per-resource contract; metrics
+    // upgraded from gap to live in W7-F).
     const liveNodes = container.querySelectorAll('.meta.ok')
-    expect(liveNodes.length).toBe(4)
+    expect(liveNodes.length).toBe(8)
   })
 })
diff --git a/src/pages/ResourceDetailPage.tsx b/src/pages/ResourceDetailPage.tsx
@@ -54,6 +54,33 @@ export function ResourceDetailPage() {
             </h2>
             <EnvPill env={r.env} />
             <TierPill tier={r.tier} />
+            {r.status === 'paused' && (
+              // Customer-visible "this resource is paused" signal — the
+              // /resources list view shows a chip too. Connection_url still
+              // works but the resource doesn't count against the per-team
+              // resource quota. Resume via the agent.
+              <span
+                data-testid="resource-paused-pill"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  padding: '2px 8px',
+                  fontSize: 11,
+                  fontWeight: 600,
+                  letterSpacing: '0.04em',
+                  textTransform: 'uppercase',
+                  color: 'var(--text-dim)',
+                  background: 'rgba(255,193,7,0.08)',
+                  border: '1px solid rgba(255,193,7,0.25)',
+                  borderRadius: 4,
+                }}
+                title="Resource is paused. Data + connection URL preserved; resource quota slot is free."
+              >
+                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ffc107' }} />
+                Paused
+              </span>
+            )}
             <ExpiryBadge expiresAt={r.expires_at} now={now} />
           </div>
           <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-faint)' }}>
@@ -174,10 +201,17 @@ export function ResourceDetailPage() {
           <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
             <Card title="API contract">
               <ContractLine method="GET"    path="/api/v1/resources/:id" status="live" />
-              <ContractLine method="POST"   path="/api/v1/resources/:id/rotate" status="live" />
+              <ContractLine method="POST"   path="/api/v1/resources/:id/rotate-credentials" status="live" />
+              <ContractLine method="POST"   path="/api/v1/resources/:id/pause" status="live" />
+              <ContractLine method="POST"   path="/api/v1/resources/:id/resume" status="live" />
+              <ContractLine method="POST"   path="/api/v1/resources/:id/provision-twin" status="live" />
+              <ContractLine method="GET"    path="/api/v1/resources/:id/credentials" status="live" />
               <ContractLine method="DELETE" path="/api/v1/resources/:id" status="live" />
-              {/* Metrics now LIVE (W7-F, 2026-05-14). Audit remains gap —
-                  early-access CTA for audit retained below until W7-G ships. */}
+              {/* Metrics LIVE (W7-F, 2026-05-14). Audit on the per-resource
+                  contract is still gap — early-access CTA retained until
+                  W7-G ships the per-resource audit endpoint. Team-level
+                  /api/v1/audit IS live but not surfaced here (lives on the
+                  Team page). */}
               <ContractLine method="GET"    path="/api/v1/resources/:id/metrics" status="live" />
               <ContractLine method="GET"    path="/api/v1/resources/:id/audit" status="gap" />
               <div
diff --git a/src/pages/ResourcesPage.tsx b/src/pages/ResourcesPage.tsx
@@ -187,6 +187,25 @@ export function ResourcesPage() {
                   <div className="info">
                     <span className="n" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                       {r.name ?? r.id}
+                      {r.status === 'paused' && (
+                        <span
+                          data-testid="resource-row-paused-pill"
+                          title="Paused — data preserved, doesn't count against quota"
+                          style={{
+                            padding: '1px 6px',
+                            fontSize: 10,
+                            fontWeight: 600,
+                            letterSpacing: '0.04em',
+                            textTransform: 'uppercase',
+                            color: 'var(--text-dim)',
+                            background: 'rgba(255,193,7,0.08)',
+                            border: '1px solid rgba(255,193,7,0.25)',
+                            borderRadius: 3,
+                          }}
+                        >
+                          Paused
+                        </span>
+                      )}
                       <ExpiryBadge expiresAt={r.expires_at} now={now} />
                     </span>
                     <span className="id">{r.token}</span>
