Fixed billing ui

frontend/src/App.tsx

@@ -2253,12 +2253,7 @@ function App() {
     }
   };
 
-  const handleWorkspaceSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setError('');
-    setSavingWorkspace(true);
-
-    try {
+  const saveWorkspaceSettings = async () => {
     const response = await apiFetch('/workspace', authToken, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
@@ -2300,6 +2295,17 @@ function App() {
       billingPlan: isHouseholdPlan(savedWorkspace.billingPlan) ? savedWorkspace.billingPlan : 'household_basic',
       billingInterval: savedWorkspace.billingInterval,
     });
+
+    return savedWorkspace;
+  };
+
+  const handleWorkspaceSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError('');
+    setSavingWorkspace(true);
+
+    try {
+      await saveWorkspaceSettings();
     } catch (workspaceError) {
       setError(workspaceError instanceof Error ? workspaceError.message : 'Unable to save flock settings.');
     } finally {
@@ -2406,12 +2412,17 @@ function App() {
 
     setError('');
     setBillingRedirecting(true);
+    setSavingWorkspace(true);
 
     try {
+      const savedWorkspace = await saveWorkspaceSettings();
+      const billingPlan = isHouseholdPlan(savedWorkspace.billingPlan) ? savedWorkspace.billingPlan : workspaceForm.billingPlan;
+      const billingInterval = savedWorkspace.billingInterval;
+
       const response = await apiFetch('/billing/checkout-session', authToken, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ billingPlan: workspace.billingPlan, billingInterval: workspace.billingInterval }),
+        body: JSON.stringify({ billingPlan, billingInterval }),
       });
 
       if (!response.ok) {
@@ -2428,6 +2439,7 @@ function App() {
     } catch (billingError) {
       setError(billingError instanceof Error ? billingError.message : 'Unable to start Stripe checkout.');
       setBillingRedirecting(false);
+      setSavingWorkspace(false);
     }
   };
 
@@ -3410,7 +3422,7 @@ function App() {
               </div>
             </div>
             {workspace?.workspaceType !== 'rescue' ? (
-              <form className="form-panel" onSubmit={handleWorkspaceSubmit}>
+              <div className="form-panel">
                 <label>
                   Household plan
                   <select
@@ -3451,10 +3463,33 @@ function App() {
                     placeholder="Optional for billing and account management"
                   />
                 </label>
-                <button className="primary-button" type="submit" disabled={savingWorkspace}>
-                  {savingWorkspace ? 'Saving billing...' : 'Save billing settings'}
+                <div className="billing-inline-action">
+                  <div>
+                    <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.'
+                        : 'Continue to Stripe with the selected plan and frequency. Billing is tracked separately for each household flock.'}
+                    </span>
+                  </div>
+                  {activeMembership?.role === 'owner' || activeMembership?.role === 'assistant' ? (
+                    <button
+                      className="primary-button"
+                      type="button"
+                      onClick={workspace?.stripeSubscriptionId ? handleOpenBillingPortal : handleStartBillingCheckout}
+                      disabled={billingRedirecting || savingWorkspace || !workspace}
+                    >
+                      {billingRedirecting || savingWorkspace
+                        ? 'Opening Stripe...'
+                        : workspace?.stripeSubscriptionId
+                          ? 'Manage billing'
+                          : 'Start subscription'}
                     </button>
-              </form>
+                  ) : (
+                    <small className="muted">Ask a flock owner or assistant to manage billing for this flock.</small>
+                  )}
+                </div>
+              </div>
             ) : null}
             <div className="summary-grid">
               <article className="summary-card">
@@ -3508,32 +3543,6 @@ function App() {
                     : 'Current bird count in this flock.'}
                 </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>
 

frontend/src/index.css

@@ -492,6 +492,25 @@ textarea {
   flex-wrap: wrap;
 }
 
+.billing-inline-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding-top: 0.25rem;
+}
+
+.billing-inline-action div {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.billing-inline-action span {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
 .overview-alert-actions {
   align-items: center;
   justify-content: end;