Phase8: Auto bill credit card

src/components/admin/billing/org-payment-mode-list.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+
+interface OrgEntry {
+  zitadelOrgId: string;
+  companyName: string | null;
+  country: string | null;
+  hasSavedCard: boolean;
+  cardLabel: string | null;
+  payByInvoice: boolean;
+  autoChargeEnabled: boolean;
+}
+
+interface Props {
+  orgs: OrgEntry[];
+}
+
+/**
+ * Inline toggles for pay_by_invoice and auto_charge_enabled per
+ * org. Each toggle round-trips to /api/admin/billing/orgs/[orgId]
+ * /payment-mode and then router.refresh() so the server-fetched
+ * state stays canonical (avoids drift between optimistic UI and
+ * the DB).
+ *
+ * Phase 9b-2.
+ */
+export function OrgPaymentModeList({ orgs }: Props) {
+  const t = useTranslations("adminBilling");
+  const router = useRouter();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState("");
+
+  const toggle = async (
+    orgId: string,
+    patch: { payByInvoice?: boolean; autoChargeEnabled?: boolean }
+  ) => {
+    setError("");
+    setBusy(orgId);
+    try {
+      const res = await fetch(
+        `/api/admin/billing/orgs/${encodeURIComponent(orgId)}/payment-mode`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(patch),
+        }
+      );
+      const j = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  if (orgs.length === 0) {
+    return (
+      <Card>
+        <div className="p-6 text-center text-text-secondary text-sm">
+          {t("orgsEmpty")}
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      {error && (
+        <div className="text-sm text-error border-b border-error/30 bg-error/10 px-4 py-2">
+          {error}
+        </div>
+      )}
+      <table className="w-full text-sm">
+        <thead className="text-xs text-text-muted text-left">
+          <tr>
+            <th className="pb-2 pl-3 pr-4">{t("orgsColCustomer")}</th>
+            <th className="pb-2 pr-4">{t("orgsColCard")}</th>
+            <th className="pb-2 pr-4 text-center">
+              {t("orgsColPayByInvoice")}
+            </th>
+            <th className="pb-2 pr-4 text-center">
+              {t("orgsColAutoCharge")}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {orgs.map((o) => (
+            <tr key={o.zitadelOrgId} className="border-t border-border">
+              <td className="py-2 pl-3 pr-4">
+                <div className="font-medium">
+                  {o.companyName ?? (
+                    <span className="font-mono text-xs">{o.zitadelOrgId}</span>
+                  )}
+                </div>
+                {o.country && (
+                  <div className="text-xs text-text-muted">{o.country}</div>
+                )}
+              </td>
+              <td className="py-2 pr-4 text-xs">
+                {o.hasSavedCard ? (
+                  <span className="font-mono">{o.cardLabel}</span>
+                ) : (
+                  <span className="text-text-muted">
+                    {t("orgsNoSavedCard")}
+                  </span>
+                )}
+              </td>
+              <td className="py-2 pr-4 text-center">
+                <label className="inline-flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={o.payByInvoice}
+                    disabled={busy === o.zitadelOrgId}
+                    onChange={(e) =>
+                      toggle(o.zitadelOrgId, {
+                        payByInvoice: e.target.checked,
+                      })
+                    }
+                  />
+                  <span className="text-xs">
+                    {o.payByInvoice
+                      ? t("orgsPayByInvoiceOn")
+                      : t("orgsPayByInvoiceOff")}
+                  </span>
+                </label>
+              </td>
+              <td className="py-2 pr-4 text-center">
+                <label className="inline-flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={o.autoChargeEnabled}
+                    disabled={busy === o.zitadelOrgId || o.payByInvoice}
+                    onChange={(e) =>
+                      toggle(o.zitadelOrgId, {
+                        autoChargeEnabled: e.target.checked,
+                      })
+                    }
+                  />
+                  <span className="text-xs">
+                    {o.autoChargeEnabled
+                      ? t("orgsAutoChargeOn")
+                      : t("orgsAutoChargeOff")}
+                  </span>
+                </label>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
+}

src/components/onboarding/wizard.tsx

@@ -183,6 +183,11 @@ export function OnboardingWizard({
   const [step, setStep] = useState<Step>(isEditing ? "configure" : "welcome");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
+  // Phase 9b: 402 from the onboarding endpoint indicates the org
+  // needs to set up auto-pay before ordering. We render a tailored
+  // error block with a clickable link to /settings/billing rather
+  // than the generic red message.
+  const [autoPayRequired, setAutoPayRequired] = useState(false);
   const [advancedOpen, setAdvancedOpen] = useState(false);
   // In edit mode we already have soulMd/agentsMd from the request;
   // skip the workspace-defaults round trip that would overwrite them.
@@ -430,6 +435,7 @@ export function OnboardingWizard({
 
     setSubmitting(true);
     setError("");
+    setAutoPayRequired(false);
 
     try {
       // Build secrets payload — only for packages that require them
@@ -476,11 +482,40 @@ export function OnboardingWizard({
         }),
       });
 
+      // Phase 9b: 402 means the org needs to set up auto-pay
+      // before ordering. Surface a friendly message with a link to
+      // /settings/billing instead of the generic submission error.
+      if (res.status === 402) {
+        const data = await res.json().catch(() => ({}));
+        if (data?.code === "auto_pay_required") {
+          setAutoPayRequired(true);
+          setError(t("autoPayRequiredError"));
+          return;
+        }
+        throw new Error(data.error || "Submission failed");
+      }
+
       if (!res.ok) {
         const data = await res.json();
         throw new Error(data.error || "Submission failed");
       }
 
+      // Phase 9b: if the server initiated a setup-fee Checkout, the
+      // response carries a `checkoutUrl`. Redirect the browser
+      // directly — Stripe Checkout is the next step. The
+      // tenant_requests row is already inserted in 'pending_payment'
+      // status; on successful Checkout, the webhook flips it to
+      // 'pending' and admin sees it.
+      const data = await res.json().catch(() => ({}));
+      if (data?.checkoutUrl) {
+        // Don't reset submitting=false — let the redirect happen
+        // with the spinner still active so the button stays
+        // disabled.
+        window.location.href = data.checkoutUrl;
+        return;
+      }
+
+      // Zero-fee path or PATCH edit — same behaviour as before.
       onComplete();
     } catch (err: any) {
       setError(err.message);
@@ -1226,11 +1261,35 @@ export function OnboardingWizard({
             </div>
 
             <p className="text-xs text-text-muted">{t("confirmNote")}</p>
+
+            {/* Phase 9b: order-time setup-fee notice. The exact
+                amount is determined server-side at submit (the
+                platform_pricing table is the authority), but the
+                customer should know that *some* charge happens on
+                the next click. Wording is neutral about the amount
+                — we don't want to mis-display a stale figure. */}
+            <div className="text-xs rounded-md border border-accent/30 bg-accent/10 text-text-secondary px-3 py-3 mt-4">
+              <strong className="block text-text-primary mb-1">
+                {t("setupFeeNoticeHeading")}
+              </strong>
+              {t("setupFeeNoticeBody")}
+            </div>
           </div>
 
           {error && (
             <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mt-4">
               {error}
+              {autoPayRequired && (
+                <>
+                  {" "}
+                  <a
+                    href="/settings/billing"
+                    className="underline font-medium text-red-300 hover:text-red-200"
+                  >
+                    {t("autoPaySetupLink")}
+                  </a>
+                </>
+              )}
             </div>
           )}
 

src/components/settings/saved-card-section.tsx

@@ -15,6 +15,14 @@ interface Props {
    * is disabled by their billing mode.
    */
   isPayByInvoice: boolean;
+  /**
+   * Personal-account flag from the session. Personal accounts are
+   * single-user B2C tenants and don't have the bank-transfer
+   * affordance — they pay by card or not at all. We hide the
+   * "Bank transfer is available on request" hint for these accounts
+   * to keep the messaging unambiguous.
+   */
+  isPersonal: boolean;
 }
 
 const BRAND_LABELS: Record<string, string> = {
@@ -41,7 +49,11 @@ const BRAND_LABELS: Record<string, string> = {
  * lands here and the new card info needs to load. We also strip
  * the query param so a page reload doesn't re-trigger.
  */
-export function SavedCardSection({ config, isPayByInvoice }: Props) {
+export function SavedCardSection({
+  config,
+  isPayByInvoice,
+  isPersonal,
+}: Props) {
   const t = useTranslations("settingsBilling");
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -125,6 +137,18 @@ export function SavedCardSection({ config, isPayByInvoice }: Props) {
           <p className="text-sm text-text-secondary mb-4">
             {t("savedCardEmptyBody")}
           </p>
+          {/* Phase 9: prominent policy notice. Auto-pay is the
+              expected default — emphasise that failure to keep a
+              chargeable card on file may result in tenant suspension.
+              Sits above the CTA so it's seen before the click. */}
+          <div className="text-sm rounded-md border border-warning/40 bg-warning/10 text-warning px-4 py-3 mb-4">
+            <strong className="block mb-1">
+              {t("savedCardAutoPayRequiredHeading")}
+            </strong>
+            <span className="text-text-secondary">
+              {t("savedCardAutoPayRequiredBody")}
+            </span>
+          </div>
           {error && (
             <div className="text-sm text-error mb-3">{error}</div>
           )}
@@ -135,15 +159,20 @@ export function SavedCardSection({ config, isPayByInvoice }: Props) {
           >
             {busy === "setup" ? t("savedCardRedirecting") : t("savedCardSetupBtn")}
           </button>
-          <p className="text-xs text-text-muted mt-4">
-            {t("savedCardBankTransferHint")}{" "}
-            <a
-              href="/support"
-              className="text-accent hover:underline"
-            >
-              {t("savedCardBankTransferLink")}
-            </a>
-          </p>
+          {/* Bank-transfer hint shown only for company accounts.
+              Personal (B2C) accounts pay by card only — surfacing
+              the alternative would only confuse. */}
+          {!isPersonal && (
+            <p className="text-xs text-text-muted mt-4">
+              {t("savedCardBankTransferHint")}{" "}
+              <a
+                href="/support"
+                className="text-accent hover:underline"
+              >
+                {t("savedCardBankTransferLink")}
+              </a>
+            </p>
+          )}
         </div>
       </Card>
     );
@@ -211,6 +240,16 @@ export function SavedCardSection({ config, isPayByInvoice }: Props) {
           </div>
         )}
 
+        {/* If the card is on file but the customer has actively
+            disabled auto-pay, surface the suspension-risk reminder.
+            Not shown when admin has flipped them to pay-by-invoice —
+            that's a different deal and the note above explains it. */}
+        {!isPayByInvoice && !autoChargeOn && (
+          <div className="text-xs rounded-md border border-warning/40 bg-warning/10 text-warning px-3 py-2 mb-3">
+            {t("savedCardAutoPayDisabledNote")}
+          </div>
+        )}
+
         {error && <div className="text-sm text-error mb-3">{error}</div>}
 
         <div className="flex gap-2 flex-wrap">
@@ -245,15 +284,18 @@ export function SavedCardSection({ config, isPayByInvoice }: Props) {
           </button>
         </div>
 
-        <p className="text-xs text-text-muted mt-4">
-          {t("savedCardBankTransferHint")}{" "}
-          <a
-            href="/support"
-            className="text-accent hover:underline"
-          >
-            {t("savedCardBankTransferLink")}
-          </a>
-        </p>
+        {/* Bank-transfer hint shown only for company accounts. */}
+        {!isPersonal && (
+          <p className="text-xs text-text-muted mt-4">
+            {t("savedCardBankTransferHint")}{" "}
+            <a
+              href="/support"
+              className="text-accent hover:underline"
+            >
+              {t("savedCardBankTransferLink")}
+            </a>
+          </p>
+        )}
       </div>
     </Card>
   );