docs(pwa): plan fix (keypad reduce) + gitignore tsbuildinfo

Co-Authored-By: claude-flow <ruv@ruv.net>

docs/superpowers/plans/2026-06-18-premium-driver-pwa.md

@@ -536,7 +536,8 @@ const MAX_DIGITS = 6;
 export function keypadReduce(current: string, key: string): string {
   if (key === "back") return current.slice(0, -1);
   if (!/^\d$/.test(key)) return current;
-  if (current === "" && key === "0") return "";       // no leading zero
+  if (current === "0") return key === "0" ? "0" : key;  // replace leading zero
+  if (current === "" && key === "0") return "";          // no leading zero from empty
   if (current.length >= MAX_DIGITS) return current;
   return current + key;
 }

driver-pwa/frontend/.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 .env
 .env.local
+*.tsbuildinfo

driver-pwa/frontend/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Премиум Водитель",
+  "short_name": "Премиум",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#F3EEE3",
+  "theme_color": "#F3EEE3",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
+  ]
+}

driver-pwa/frontend/scripts/gen-icons.mjs

@@ -0,0 +1,76 @@
+// Генерация PWA-иконок «Премиум Водитель» без сторонних либ (zlib PNG-энкодер).
+// Дизайн: кремовый фон #F3EEE3, тёмная скруглённая плитка #1C1B19,
+// внутри белая «карта» #F6F2E9 с тёмной полосой (финансовый мотив). Без жёлтого/текста.
+import zlib from "node:zlib";
+import fs from "node:fs";
+import path from "node:path";
+
+const CREAM = [243, 238, 227];
+const INK = [28, 27, 25];
+const CARD = [246, 242, 233];
+
+function crc32(buf) {
+  let c = ~0;
+  for (let i = 0; i < buf.length; i++) {
+    c ^= buf[i];
+    for (let k = 0; k < 8; k++) c = (c >>> 1) ^ (0xedb88320 & -(c & 1));
+  }
+  return (~c) >>> 0;
+}
+function chunk(type, data) {
+  const t = Buffer.from(type, "ascii");
+  const len = Buffer.alloc(4); len.writeUInt32BE(data.length, 0);
+  const body = Buffer.concat([t, data]);
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(body), 0);
+  return Buffer.concat([len, body, crc]);
+}
+function encodePng(N, rgba) {
+  const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(N, 0); ihdr.writeUInt32BE(N, 4); ihdr[8] = 8; ihdr[9] = 6;
+  const stride = N * 4;
+  const raw = Buffer.alloc(N * (stride + 1));
+  for (let y = 0; y < N; y++) {
+    raw[y * (stride + 1)] = 0;
+    rgba.copy(raw, y * (stride + 1) + 1, y * stride, y * stride + stride);
+  }
+  return Buffer.concat([sig, chunk("IHDR", ihdr), chunk("IDAT", zlib.deflateSync(raw)), chunk("IEND", Buffer.alloc(0))]);
+}
+function inRoundRect(px, py, x0, y0, x1, y1, r) {
+  if (px < x0 || px >= x1 || py < y0 || py >= y1) return false;
+  const cx = px < x0 + r ? x0 + r : px >= x1 - r ? x1 - r : px;
+  const cy = py < y0 + r ? y0 + r : py >= y1 - r ? y1 - r : py;
+  const dx = px - cx, dy = py - cy;
+  return dx * dx + dy * dy <= r * r;
+}
+
+function draw(N) {
+  const buf = Buffer.alloc(N * N * 4);
+  // tile (centered ~64%)
+  const tile = Math.round(N * 0.64), tx0 = Math.round((N - tile) / 2), ty0 = tx0;
+  const tx1 = tx0 + tile, ty1 = ty0 + tile, tr = Math.round(tile * 0.24);
+  // card inside tile
+  const cw = Math.round(tile * 0.62), ch = Math.round(tile * 0.42);
+  const cx0 = Math.round((N - cw) / 2), cy0 = Math.round((N - ch) / 2);
+  const cx1 = cx0 + cw, cy1 = cy0 + ch, cr = Math.round(ch * 0.18);
+  // stripe near top of card
+  const sy0 = cy0 + Math.round(ch * 0.22), sy1 = sy0 + Math.round(ch * 0.14);
+  for (let y = 0; y < N; y++) {
+    for (let x = 0; x < N; x++) {
+      let col = CREAM;
+      if (inRoundRect(x, y, tx0, ty0, tx1, ty1, tr)) col = INK;
+      if (inRoundRect(x, y, cx0, cy0, cx1, cy1, cr)) col = CARD;
+      if (x >= cx0 && x < cx1 && y >= sy0 && y < sy1) col = INK;
+      const o = (y * N + x) * 4;
+      buf[o] = col[0]; buf[o + 1] = col[1]; buf[o + 2] = col[2]; buf[o + 3] = 255;
+    }
+  }
+  return encodePng(N, buf);
+}
+
+const dir = path.resolve("public/icons");
+fs.mkdirSync(dir, { recursive: true });
+for (const N of [192, 512]) {
+  fs.writeFileSync(path.join(dir, `icon-${N}.png`), draw(N));
+  console.log(`wrote icon-${N}.png`);
+}

driver-pwa/frontend/src/api/driver.ts

@@ -15,6 +15,7 @@ export const TopupSchema = z.object({
   order_id: z.string(), pay_url: z.string(), commission: z.number(), total: z.number(),
 });
 export const PaymentStateSchema = z.object({ order_id: z.string(), status: z.string() });
+export const CommissionSchema = z.object({ rate: z.number() });
 export const PaymentsSchema = z.object({
   payments: z.array(z.object({
     order_id: z.string(), bucket: z.string(), amount: z.number(), commission: z.number(),
@@ -35,3 +36,5 @@ export const getPaymentState = async (orderId: string) =>
   PaymentStateSchema.parse(await api.get(`driver/payment/${orderId}`).json());
 export const getPayments = async () =>
   PaymentsSchema.parse(await api.get("driver/payments").json());
+export const getCommission = async () =>
+  CommissionSchema.parse(await api.get("driver/commission").json());

driver-pwa/frontend/src/components/AppHeader.tsx

@@ -1,12 +1,7 @@
-export function AppHeader({ initials }: { initials?: string }) {
+export function AppHeader() {
   return (
-    <header className="flex items-center justify-between mb-4">
+    <header className="mb-4">
       <span className="text-sm font-bold">Премиум Водитель</span>
-      {initials && (
-        <span className="w-7 h-7 rounded-full bg-ink text-cream text-[10px] font-bold flex items-center justify-center">
-          {initials}
-        </span>
-      )}
     </header>
   );
 }

driver-pwa/frontend/src/hooks/usePaymentStatus.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPaymentState } from "@/api/driver";
+
+const TERMINAL = new Set(["PAID", "CONFIRMED", "REJECTED", "REVERSED", "REFUNDED", "CANCELED", "AUTH_FAIL"]);
+
+export function usePaymentStatus(orderId: string) {
+  return useQuery({
+    queryKey: ["payment", orderId],
+    queryFn: () => getPaymentState(orderId),
+    refetchInterval: (q) => (q.state.data && TERMINAL.has(q.state.data.status) ? false : 1500),
+  });
+}

driver-pwa/frontend/src/pages/BalancePage.test.tsx

@@ -32,4 +32,16 @@ describe("BalancePage", () => {
     expect(screen.getAllByText("−3 200 ₽").length).toBeGreaterThan(0);
     expect(screen.getByRole("button", { name: /Пополнить/i })).toBeInTheDocument();
   });
+
+  it("shows an error state when balance fails to load", async () => {
+    const driver = await import("@/api/driver");
+    (driver.getBalance as any).mockRejectedValueOnce(new Error("boom"));
+    // re-render fresh
+    const { QueryClient, QueryClientProvider } = await import("@tanstack/react-query");
+    const { MemoryRouter } = await import("react-router-dom");
+    const { render, screen } = await import("@testing-library/react");
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(<QueryClientProvider client={qc}><MemoryRouter><BalancePage /></MemoryRouter></QueryClientProvider>);
+    expect(await screen.findByText(/Не удалось загрузить/i)).toBeInTheDocument();
+  });
 });

driver-pwa/frontend/src/pages/BalancePage.tsx

@@ -10,14 +10,14 @@ import { Spinner } from "@/components/Spinner";
 export function BalancePage() {
   const nav = useNavigate();
   const clear = useAuth((s) => s.clear);
-  const { data, isLoading } = useQuery({ queryKey: ["balance"], queryFn: getBalance });
+  const { data, isLoading, isError, refetch } = useQuery({ queryKey: ["balance"], queryFn: getBalance });
 
   const accounts = data?.accounts ?? [];
   const totalDebt = accounts.filter((a) => a.balance < 0).reduce((s, a) => s + a.balance, 0);
 
   return (
     <div>
-      <AppHeader initials="" />
+      <AppHeader />
       <div className="card p-4 mb-4 text-center">
         <p className="text-muted text-xs mb-1">Общий долг</p>
         <p className={`text-2xl font-extrabold ${totalDebt < 0 ? "text-neg" : ""}`}>{formatMoney(totalDebt)}</p>
@@ -25,6 +25,11 @@ export function BalancePage() {
 
       {isLoading ? (
         <div className="flex justify-center py-10"><Spinner /></div>
+      ) : isError ? (
+        <div className="text-center py-8">
+          <p className="text-muted text-sm mb-3">Не удалось загрузить баланс</p>
+          <button className="btn-ghost" onClick={() => refetch()}>Повторить</button>
+        </div>
       ) : (
         <div className="mb-4">
           {accounts.map((a) => (

driver-pwa/frontend/src/pages/HistoryPage.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("@/api/driver", () => ({
+  getPayments: vi.fn(async () => ({ payments: [
+    { order_id: "o1", bucket: "Долг аренда", amount: 1000, commission: 52, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: "2026-06-18T09:01:00Z" },
+  ] })),
+}));
+import { HistoryPage } from "./HistoryPage";
+
+function wrap() {
+  const qc = new QueryClient();
+  return render(<QueryClientProvider client={qc}><MemoryRouter><HistoryPage /></MemoryRouter></QueryClientProvider>);
+}
+
+describe("HistoryPage", () => {
+  it("lists payments with amount + status", async () => {
+    wrap();
+    expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
+    expect(screen.getByText("1 000 ₽")).toBeInTheDocument();
+    expect(screen.getByText(/Оплачено/i)).toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/pages/HistoryPage.tsx

@@ -1 +1,41 @@
-export function HistoryPage() { return null; }
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { getPayments } from "@/api/driver";
+import { formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+
+const STATUS_RU: Record<string, string> = {
+  PAID: "Оплачено", NEW: "Ожидает", FORM: "Ожидает", CONFIRMED: "Оплачено", REJECTED: "Отклонён",
+};
+
+export function HistoryPage() {
+  const nav = useNavigate();
+  const { data, isLoading, isError } = useQuery({ queryKey: ["payments"], queryFn: getPayments });
+  const rows = data?.payments ?? [];
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav("/")}>‹ Назад</button>
+      <h1 className="text-lg font-extrabold mb-4">История пополнений</h1>
+      {isLoading ? (
+        <div className="flex justify-center py-10"><Spinner /></div>
+      ) : isError ? (
+        <p className="text-muted text-sm">Не удалось загрузить историю</p>
+      ) : rows.length === 0 ? (
+        <p className="text-muted text-sm">Пока нет пополнений</p>
+      ) : (
+        rows.map((p) => (
+          <div key={p.order_id} className="flex justify-between items-center py-3 border-b border-line">
+            <div>
+              <p className="text-sm">{p.bucket}</p>
+              <p className="text-muted text-xs">
+                {p.created_at ? new Date(p.created_at).toLocaleDateString("ru-RU") : ""} · {STATUS_RU[p.status] ?? p.status}
+              </p>
+            </div>
+            <b>{formatMoney(p.amount)}</b>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/LoginPage.tsx

@@ -28,8 +28,13 @@ export function LoginPage() {
       }
       setChannel(r.channel);
       setStep("code");
-    } catch (err: any) {
-      toast.error(err?.response?.status === 404 ? "Номер не найден. Обратитесь в парк." : "Не удалось отправить код");
+    } catch (err: unknown) {
+      const status = (err as { response?: { status?: number } })?.response?.status;
+      const msg =
+        status === 404 ? "Номер не найден. Обратитесь в парк." :
+        status === 429 ? "Слишком часто. Попробуйте позже." :
+        "Не удалось отправить код";
+      toast.error(msg);
     } finally {
       setBusy(false);
     }

driver-pwa/frontend/src/pages/OnboardingPage.test.tsx

@@ -14,4 +14,10 @@ describe("OnboardingPage", () => {
     expect(screen.getByRole("link", { name: /MAX/i })).toHaveAttribute("href", "https://max.ru/b?start=x");
     expect(screen.getByRole("button", { name: /запросить код/i })).toBeInTheDocument();
   });
+  it("renders only Telegram when max is absent", () => {
+    sessionStorage.setItem("pp-onboarding", JSON.stringify({ tg: "https://t.me/ppdriver_bot?start=x", phone: "9143054400" }));
+    render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
+    expect(screen.getByRole("link", { name: /Telegram/i })).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /MAX/i })).toBeNull();
+  });
 });

driver-pwa/frontend/src/pages/OnboardingPage.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 export function OnboardingPage() {
   const nav = useNavigate();
   const raw = sessionStorage.getItem("pp-onboarding");
-  const data = raw ? (JSON.parse(raw) as { tg: string; max: string; phone: string }) : null;
+  const data = raw ? (JSON.parse(raw) as { tg?: string; max?: string; phone: string }) : null;
   if (!data) return null;
 
   return (
@@ -12,12 +12,16 @@ export function OnboardingPage() {
       <p className="text-muted text-sm mb-8">
         Чтобы получать код входа, откройте бот и нажмите «Старт». Затем вернитесь и запросите код снова.
       </p>
+      {data.tg && (
         <a href={data.tg} target="_blank" rel="noopener" className="btn-primary mb-3 no-underline block">
           Подключить Telegram
         </a>
+      )}
+      {data.max && (
         <a href={data.max} target="_blank" rel="noopener" className="btn-ghost mb-6 no-underline block">
           Подключить MAX
         </a>
+      )}
       <button className="btn-ghost" onClick={() => nav("/login")}>
         Я подключил — запросить код
       </button>

driver-pwa/frontend/src/pages/PaymentPage.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Routes, Route } from "react-router-dom";
+
+const states = ["FORM", "PAID"];
+vi.mock("@/api/driver", () => ({
+  getPaymentState: vi.fn(async () => ({ order_id: "o9", status: states.shift() ?? "PAID" })),
+}));
+import { PaymentPage } from "./PaymentPage";
+
+function wrap() {
+  const qc = new QueryClient();
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={[{ pathname: "/pay/o9", state: { payUrl: "https://qr.nspk.ru/x", total: 1052, bucket: "Долг аренда", base: 1000 } }]}>
+        <Routes><Route path="/pay/:orderId" element={<PaymentPage />} /></Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("PaymentPage", () => {
+  it("shows pay button and flips to success on PAID", async () => {
+    wrap();
+    expect(screen.getByRole("link", { name: /Оплатить/i })).toHaveAttribute("href", "https://qr.nspk.ru/x");
+    await waitFor(() => expect(screen.getByText(/Оплачено/i)).toBeInTheDocument(), { timeout: 3000 });
+  });
+});

driver-pwa/frontend/src/pages/PaymentPage.tsx

@@ -1 +1,42 @@
-export function PaymentPage() { return null; }
+import { useEffect } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { Check } from "lucide-react";
+import { formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+import { usePaymentStatus } from "@/hooks/usePaymentStatus";
+
+export function PaymentPage() {
+  const { orderId = "" } = useParams();
+  const nav = useNavigate();
+  const qc = useQueryClient();
+  const st = (useLocation().state as { payUrl?: string; total?: number; bucket?: string; base?: number } | null) ?? {};
+  const { data } = usePaymentStatus(orderId);
+  const paid = data?.status === "PAID";
+
+  useEffect(() => {
+    if (paid) qc.invalidateQueries({ queryKey: ["balance"] });
+  }, [paid, qc]);
+
+  if (paid) {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-pos text-white flex items-center justify-center mb-3"><Check size={28} /></span>
+        <p className="text-lg font-extrabold">Оплачено</p>
+        <p className="text-muted text-xs mt-1">{st.bucket} пополнен на {formatMoney(st.base ?? 0)}</p>
+        <button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-10 flex flex-col items-center text-center">
+      <span className="w-12 h-12 rounded-xl2 bg-ink text-cream flex items-center justify-center font-extrabold mb-4">СБП</span>
+      <p className="text-lg font-extrabold">{formatMoney(st.total ?? 0)}</p>
+      <p className="text-muted text-xs mb-6">{st.bucket}</p>
+      <a className="btn-primary no-underline" href={st.payUrl} target="_blank" rel="noopener">Оплатить</a>
+      <p className="text-muted text-xs mt-2">Откроется ваше приложение банка</p>
+      <div className="flex items-center gap-2 mt-6 text-muted text-xs"><Spinner /> Ожидаем оплату…</div>
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/TopupPage.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("@/api/driver", () => ({
+  topup: vi.fn(async () => ({ order_id: "o9", pay_url: "https://qr.nspk.ru/x", commission: 52, total: 1052 })),
+  getCommission: vi.fn(async () => ({ rate: 0.052 })),
+}));
+import { TopupPage } from "./TopupPage";
+import * as driver from "@/api/driver";
+
+const wrap = () => {
+  const qc = new QueryClient();
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter><TopupPage /></MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe("TopupPage", () => {
+  it("keypad builds amount, shows total, and submits topup", async () => {
+    wrap();
+    await userEvent.click(screen.getByRole("button", { name: "1" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    expect(screen.getByTestId("amount").textContent).toBe("1 000 ₽");
+    expect(screen.getByTestId("total").textContent).toContain("1 052");
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenCalledWith("Долг аренда", 1000, "qr");
+  });
+});

driver-pwa/frontend/src/pages/TopupPage.tsx

@@ -1 +1,84 @@
-export function TopupPage() { return null; }
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Delete } from "lucide-react";
+import { toast } from "sonner";
+import { topup, getCommission } from "@/api/driver";
+import { keypadReduce, withCommission } from "@/lib/amount";
+import { formatMoney } from "@/lib/format";
+import { Segment } from "@/components/Segment";
+import { Spinner } from "@/components/Spinner";
+
+const QUICK = ["500", "1000", "2000"];
+const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "·", "0", "back"];
+
+export function TopupPage() {
+  const nav = useNavigate();
+  const loc = useLocation();
+  const bucket = (loc.state as { bucket?: string } | null)?.bucket ?? "Долг аренда";
+  const [raw, setRaw] = useState("");
+  const [method, setMethod] = useState("qr");
+  const [busy, setBusy] = useState(false);
+  const { data: commission } = useQuery({ queryKey: ["commission"], queryFn: getCommission });
+  const rate = commission?.rate ?? 0.052; // fallback only while loading
+
+  const base = raw ? parseInt(raw, 10) : 0;
+  const { commission: fee, total } = withCommission(base, rate);
+
+  function press(k: string) {
+    if (k === "·") return;
+    setRaw((r) => keypadReduce(r, k));
+  }
+
+  async function pay() {
+    if (base <= 0) return;
+    setBusy(true);
+    try {
+      const r = await topup(bucket, base, method as "qr" | "card");
+      nav(`/pay/${r.order_id}`, { state: { payUrl: r.pay_url, total: r.total, bucket, base } });
+    } catch {
+      toast.error("Не удалось создать платёж");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav(-1)}>‹ {bucket}</button>
+      <p data-testid="amount" className="text-3xl font-extrabold text-center mt-2">{formatMoney(base)}</p>
+      <p data-testid="total" className="text-muted text-xs text-center mb-3">
+        к оплате {formatMoney(total)} (комиссия {formatMoney(fee)})
+      </p>
+
+      <div className="flex gap-1.5 mb-3">
+        {QUICK.map((q) => (
+          <button key={q} className="flex-1 py-2 rounded-xl2 text-xs bg-surface border border-line" onClick={() => setRaw(q)}>
+            {q}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-3 gap-2 mb-4">
+        {KEYS.map((k) => (
+          <button
+            key={k}
+            aria-label={k}
+            className="bg-surface border border-line rounded-xl2 py-3 text-lg font-semibold flex items-center justify-center"
+            onClick={() => press(k)}
+          >
+            {k === "back" ? <Delete size={18} /> : k}
+          </button>
+        ))}
+      </div>
+
+      <div className="mb-4">
+        <Segment value={method} onChange={setMethod} options={[{ value: "qr", label: "СБП" }, { value: "card", label: "Картой" }]} />
+      </div>
+
+      <button className="btn-primary" disabled={busy || base <= 0} onClick={pay}>
+        {busy ? <Spinner /> : "Оплатить"}
+      </button>
+    </div>
+  );
+}