Add stripe integration

frontend/src/App.tsx

@@ -53,6 +53,8 @@ type Workspace = {
   billingEmail: string | null;
   billingPlan: BillingPlan;
   subscriptionStatus: SubscriptionStatus;
+  stripeCustomerId: string | null;
+  stripeSubscriptionId: string | null;
   rescueVerificationStatus: RescueVerificationStatus;
   createdAt: string;
   updatedAt: string;
@@ -835,6 +837,7 @@ function App() {
   const [savingBird, setSavingBird] = useState(false);
   const [savingWorkspace, setSavingWorkspace] = useState(false);
   const [cancelingRescueRequest, setCancelingRescueRequest] = useState(false);
+  const [billingRedirecting, setBillingRedirecting] = useState(false);
   const [savingWorkspaceMember, setSavingWorkspaceMember] = useState(false);
   const [creatingWorkspace, setCreatingWorkspace] = useState(false);
   const [deletingWorkspace, setDeletingWorkspace] = useState(false);
@@ -2344,6 +2347,68 @@ function App() {
     }
   };
 
+  const handleStartBillingCheckout = async () => {
+    if (!authToken || !workspace) {
+      return;
+    }
+
+    setError('');
+    setBillingRedirecting(true);
+
+    try {
+      const response = await apiFetch('/billing/checkout-session', authToken, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ billingPlan: workspace.billingPlan }),
+      });
+
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, 'Unable to start Stripe checkout.'));
+      }
+
+      const data = (await readJsonSafely<{ url?: string }>(response)) ?? {};
+
+      if (!data.url) {
+        throw new Error('Unable to start Stripe checkout.');
+      }
+
+      window.location.assign(data.url);
+    } catch (billingError) {
+      setError(billingError instanceof Error ? billingError.message : 'Unable to start Stripe checkout.');
+      setBillingRedirecting(false);
+    }
+  };
+
+  const handleOpenBillingPortal = async () => {
+    if (!authToken) {
+      return;
+    }
+
+    setError('');
+    setBillingRedirecting(true);
+
+    try {
+      const response = await apiFetch('/billing/portal-session', authToken, {
+        method: 'POST',
+      });
+
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, 'Unable to open Stripe billing portal.'));
+      }
+
+      const data = (await readJsonSafely<{ url?: string }>(response)) ?? {};
+
+      if (!data.url) {
+        throw new Error('Unable to open Stripe billing portal.');
+      }
+
+      window.location.assign(data.url);
+    } catch (billingError) {
+      setError(billingError instanceof Error ? billingError.message : 'Unable to open Stripe billing portal.');
+      setBillingRedirecting(false);
+    }
+  };
+
   const handleWorkspaceMemberSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError('');
@@ -3375,10 +3440,32 @@ function App() {
                     : 'Current bird count in this flock.'}
                 </span>
               </article>
-              <article className="summary-card">
-                <strong>Stripe integration coming soon</strong>
-                <span>Customer portal, payment method management, invoices, and renewal status will appear here.</span>
-              </article>
+              {workspace?.workspaceType !== 'rescue' ? (
+                <article className="summary-card">
+                  <strong>{workspace?.stripeSubscriptionId ? 'Manage household billing' : 'Start household subscription'}</strong>
+                  <span>
+                    {workspace?.stripeSubscriptionId
+                      ? 'Open Stripe to update payment methods, invoices, cancellation, or plan changes for this flock.'
+                      : 'Start Stripe Checkout for this flock. Billing is tracked separately for each household flock.'}
+                  </span>
+                  {activeMembership?.role === 'owner' || activeMembership?.role === 'assistant' ? (
+                    <button
+                      className="secondary-button"
+                      type="button"
+                      onClick={workspace?.stripeSubscriptionId ? handleOpenBillingPortal : handleStartBillingCheckout}
+                      disabled={billingRedirecting || !workspace}
+                    >
+                      {billingRedirecting
+                        ? 'Opening Stripe...'
+                        : workspace?.stripeSubscriptionId
+                          ? 'Manage billing'
+                          : 'Start subscription'}
+                    </button>
+                  ) : (
+                    <small className="muted">Ask a flock owner or assistant to manage billing for this flock.</small>
+                  )}
+                </article>
+              ) : null}
             </div>
           </article>
 
@@ -3582,7 +3669,7 @@ function App() {
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Separate flock</p>
-                <h2>Add another flock space</h2>
+                <h2>Add an additional flock</h2>
               </div>
               <button
                 className="secondary-button"