Fixed billing ui

frontend/src/App.tsx

@@ -2253,53 +2253,59 @@ function App() {
     }
   };
 
+  const saveWorkspaceSettings = async () => {
+    const response = await apiFetch('/workspace', authToken, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        ...workspaceForm,
+        billingPlan: workspaceForm.workspaceType === 'rescue' ? undefined : workspaceForm.billingPlan,
+        billingInterval: workspaceForm.workspaceType === 'rescue' ? undefined : workspaceForm.billingInterval,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(await readErrorMessage(response, 'Unable to save flock settings.'));
+    }
+
+    const data = (await readJsonSafely<{ workspace?: Workspace }>(response)) ?? {};
+
+    if (!data.workspace) {
+      throw new Error('Unable to save flock settings.');
+    }
+
+    const savedWorkspace = data.workspace;
+
+    setWorkspace(savedWorkspace);
+    setAuthSession((current) =>
+      current
+        ? {
+            ...current,
+            activeWorkspace: savedWorkspace,
+            workspaces: current.workspaces.map((entry) =>
+              entry.workspace.id === savedWorkspace.id ? { ...entry, workspace: savedWorkspace } : entry,
+            ),
+          }
+        : current,
+    );
+    setWorkspaceForm({
+      name: savedWorkspace.name,
+      workspaceType: savedWorkspace.workspaceType,
+      billingEmail: savedWorkspace.billingEmail ?? '',
+      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 {
-      const response = await apiFetch('/workspace', authToken, {
+      await saveWorkspaceSettings();
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          ...workspaceForm,
-          billingPlan: workspaceForm.workspaceType === 'rescue' ? undefined : workspaceForm.billingPlan,
-          billingInterval: workspaceForm.workspaceType === 'rescue' ? undefined : workspaceForm.billingInterval,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(await readErrorMessage(response, 'Unable to save flock settings.'));
-      }
-
-      const data = (await readJsonSafely<{ workspace?: Workspace }>(response)) ?? {};
-
-      if (!data.workspace) {
-        throw new Error('Unable to save flock settings.');
-      }
-
-      const savedWorkspace = data.workspace;
-
-      setWorkspace(savedWorkspace);
-      setAuthSession((current) =>
-        current
-          ? {
-              ...current,
-              activeWorkspace: savedWorkspace,
-              workspaces: current.workspaces.map((entry) =>
-                entry.workspace.id === savedWorkspace.id ? { ...entry, workspace: savedWorkspace } : entry,
-              ),
-            }
-          : current,
-      );
-      setWorkspaceForm({
-        name: savedWorkspace.name,
-        workspaceType: savedWorkspace.workspaceType,
-        billingEmail: savedWorkspace.billingEmail ?? '',
-        billingPlan: isHouseholdPlan(savedWorkspace.billingPlan) ? savedWorkspace.billingPlan : 'household_basic',
-        billingInterval: savedWorkspace.billingInterval,
-      });
     } 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}>
+                <div className="billing-inline-action">
-                  {savingWorkspace ? 'Saving billing...' : 'Save billing settings'}
+                  <div>
-                </button>
+                    <strong>{workspace?.stripeSubscriptionId ? 'Manage household billing' : 'Start household subscription'}</strong>
-              </form>
+                    <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>
+                  ) : (
+                    <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;