Open checkout modal from locked course cards on dashboard

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/app/(student)/dashboard/page.tsx

@@ -5,17 +5,8 @@ import { prisma } from "@/lib/prisma";
 import Link from "next/link";
 import { ArchetypeBanner } from "@/components/student/archetype-banner";
 import { ToolboxPromoCard } from "@/components/tools/ToolboxPromoCard";
-
-// Продаваемая линейка курсов → лендинг продукта. Курсы из этого списка,
-// которых нет у студента, показываются на дашборде заблюренными карточками
-// со ссылкой на лендинг (апселл). Легаси/обычные версии сюда не входят.
-const STORE_LINKS: Record<string, string> = {
-  "second-brain-vault": "https://second-brain.ru/sb-vault",
-  "obsidian-full": "https://obsidian.second-brain.ru/",
-  "claude-obsidian": "https://second-brain.ru/claude-obsidian",
-  "zotero-full": "https://zotero.second-brain.ru/",
-  "obsidian-ai": "https://obsidianai.second-brain.ru/",
-};
+import { StoreShowcase } from "@/components/student/store-showcase";
+import { STORE_CATALOG } from "@/lib/store-catalog";
 
 export default async function StudentDashboard() {
   const session = await auth.api.getSession({ headers: await headers() });
@@ -70,7 +61,7 @@ export default async function StudentDashboard() {
     "zotero-full": "zotero", // ВВ Zotero ← обычный Zotero
   };
   const storeCourses = await prisma.course.findMany({
-    where: { slug: { in: Object.keys(STORE_LINKS) }, published: true },
+    where: { slug: { in: Object.keys(STORE_CATALOG) }, published: true },
     select: { id: true, slug: true, title: true, description: true, coverImage: true },
   });
   const locked = storeCourses.filter(
@@ -175,55 +166,10 @@ export default async function StudentDashboard() {
       )}
 
       {locked.length > 0 && (
-        <div className="mt-10">
-          <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
-            Другие курсы Second Brain
-          </p>
-          <div className="grid gap-4 sm:grid-cols-2">
-            {locked.map((course) => (
-              <a
-                key={course.id}
-                href={STORE_LINKS[course.slug]}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="card-aubade p-0 overflow-hidden flex flex-col relative group"
-              >
-                {/* Overlay: замок + призыв, поверх размытого контента */}
-                <div
-                  className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 transition-opacity"
-                  style={{ backgroundColor: "color-mix(in srgb, var(--background) 55%, transparent)" }}
-                >
-                  <span className="text-2xl">🔒</span>
-                  <span
-                    className="text-sm font-bold px-4 py-2"
-                    style={{ border: "2px solid var(--foreground)", backgroundColor: "var(--accent)", color: "var(--foreground)" }}
-                  >
-                    Открыть курс →
-                  </span>
-                </div>
-                {/* Размытый контент карточки */}
-                <div className="flex flex-col flex-1" style={{ filter: "blur(1.8px)", opacity: 0.82, pointerEvents: "none" }}>
-                  {course.coverImage ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img src={course.coverImage} alt={course.title} className="w-full aspect-video object-cover" />
-                  ) : (
-                    <div className="w-full aspect-video flex items-center justify-center text-4xl" style={{ backgroundColor: "var(--color-surface)" }}>
-                      📚
-                    </div>
-                  )}
-                  <div className="p-4 flex-1 flex flex-col gap-2">
-                    <h2 className="font-bold text-lg leading-tight">{course.title}</h2>
-                    {course.description && (
-                      <p className="text-sm line-clamp-3" style={{ color: "var(--muted-foreground)" }}>
-                        {course.description}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </a>
-            ))}
-          </div>
-        </div>
+        <StoreShowcase
+          courses={locked}
+          buyer={{ name: session.user.name, email: session.user.email }}
+        />
       )}
 
       {expired.length > 0 && (

src/components/student/store-checkout-modal.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
+import {
+  PAY_METHODS_URL,
+  PAY_ORDER_URL,
+  type StoreCatalogEntry,
+} from "@/lib/store-catalog";
+
+export interface LockedCourse {
+  id: string;
+  slug: string;
+  title: string;
+  description: string | null;
+  coverImage: string | null;
+}
+
+interface PayMethod {
+  id: string;
+  label: string;
+  provider: string;
+  kind: "online" | "manual";
+}
+
+interface Props {
+  course: LockedCourse;
+  entry: StoreCatalogEntry;
+  buyer: { name: string; email: string };
+  onClose: () => void;
+}
+
+function formatRub(v: number) {
+  return `${v.toLocaleString("ru-RU")} ₽`;
+}
+
+const inputStyle: CSSProperties = {
+  width: "100%",
+  border: "2px solid var(--border)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  padding: "0.5rem 0.6rem",
+  fontSize: "14px",
+  fontFamily: "inherit",
+  outline: "none",
+};
+
+export function StoreCheckoutModal({ course, entry, buyer, onClose }: Props) {
+  const [selectedSku, setSelectedSku] = useState(entry.tariffs[0].sku);
+  const [methods, setMethods] = useState<PayMethod[] | null>(null);
+  const [method, setMethod] = useState("robokassa");
+  const [otherOpen, setOtherOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  const multiTariff = entry.tariffs.length > 1;
+  const currentMethod = methods?.find((m) => m.id === method);
+
+  // Payment methods dropdown, same source as the landings. On any failure the
+  // hidden method=robokassa keeps the checkout fully functional.
+  useEffect(() => {
+    fetch(PAY_METHODS_URL, { signal: AbortSignal.timeout(5000) })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("bad status"))))
+      .then((data: { methods?: PayMethod[] }) => {
+        const ms = data?.methods ?? [];
+        if (ms.length >= 2) {
+          setMethods(ms);
+          setMethod((cur) => (cur === "robokassa" ? ms[0].id : cur));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // Lock body scroll while the modal is open
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  // Focus the dialog on open, restore focus on close
+  useEffect(() => {
+    const prev = document.activeElement as HTMLElement | null;
+    dialogRef.current?.focus();
+    return () => prev?.focus();
+  }, []);
+
+  // Coming back from the payment page via bfcache must not leave the
+  // submit button stuck in the "submitting" state.
+  useEffect(() => {
+    const onPageShow = (e: PageTransitionEvent) => {
+      if (e.persisted) setSubmitting(false);
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, []);
+
+  // Minimal focus trap: keep Tab cycling inside the dialog
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key !== "Tab" || !dialogRef.current) return;
+    const focusables = dialogRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusables.length === 0) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  const labelClass = "block text-xs font-bold uppercase tracking-widest mb-1.5";
+  const primary = methods?.[0];
+  const rest = methods?.slice(1) ?? [];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center px-4"
+      style={{ background: "rgba(50,50,50,0.45)" }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        className="w-full max-w-md max-h-[90dvh] overflow-y-auto p-6 space-y-4"
+        style={{
+          background: "var(--background)",
+          border: "2px solid var(--foreground)",
+          boxShadow: "6px 6px 0 0 var(--foreground)",
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2">
+          <p
+            className="text-xs font-bold uppercase tracking-widest"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            Покупка курса
+          </p>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Закрыть"
+            className="-mt-3 -mr-3 flex h-11 w-11 items-center justify-center"
+            style={{ color: "var(--muted-foreground)", fontSize: "22px", lineHeight: 1 }}
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="flex items-start gap-3">
+          {course.coverImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={course.coverImage}
+              alt=""
+              className="w-24 aspect-video object-cover flex-shrink-0"
+              style={{ border: "2px solid var(--border)" }}
+            />
+          ) : (
+            <div
+              className="w-24 aspect-video flex items-center justify-center text-xl flex-shrink-0"
+              style={{ backgroundColor: "var(--color-surface)", border: "2px solid var(--border)" }}
+            >
+              📚
+            </div>
+          )}
+          <h2 id={titleId} className="font-bold text-lg leading-tight">
+            {course.title}
+          </h2>
+        </div>
+
+        {course.description && (
+          <p className="text-sm line-clamp-4" style={{ color: "var(--muted-foreground)" }}>
+            {course.description}
+          </p>
+        )}
+
+        <form method="POST" action={PAY_ORDER_URL} onSubmit={() => setSubmitting(true)}>
+          <input type="hidden" name="name" value={buyer.name} />
+          <input type="hidden" name="email" value={buyer.email} />
+          <input type="hidden" name="method" value={method} />
+          {!multiTariff && <input type="hidden" name="sku" value={entry.tariffs[0].sku} />}
+
+          {/* Tariff */}
+          <div className="mb-4">
+            <span className={labelClass} style={{ color: "var(--muted-foreground)" }}>
+              Тариф
+            </span>
+            {multiTariff ? (
+              <div className="space-y-2">
+                {entry.tariffs.map((t) => (
+                  <label
+                    key={t.sku}
+                    className="flex items-start gap-3 p-3 cursor-pointer min-h-[44px]"
+                    style={{
+                      border:
+                        "2px solid " +
+                        (selectedSku === t.sku ? "var(--foreground)" : "var(--border)"),
+                      background: selectedSku === t.sku ? "var(--accent)" : "transparent",
+                    }}
+                  >
+                    <input
+                      type="radio"
+                      name="sku"
+                      value={t.sku}
+                      checked={selectedSku === t.sku}
+                      onChange={() => setSelectedSku(t.sku)}
+                      className="mt-1"
+                      style={{ accentColor: "var(--foreground)" }}
+                    />
+                    <span className="flex-1">
+                      <span className="flex items-baseline justify-between gap-2">
+                        <span className="text-sm font-bold">{t.label}</span>
+                        <span className="text-sm font-bold whitespace-nowrap">
+                          {formatRub(t.priceRub)}
+                        </span>
+                      </span>
+                      {t.includes && (
+                        <span
+                          className="block text-xs mt-0.5"
+                          style={{ color: "var(--muted-foreground)" }}
+                        >
+                          {t.includes}
+                        </span>
+                      )}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <p className="font-bold text-lg">{formatRub(entry.tariffs[0].priceRub)}</p>
+            )}
+          </div>
+
+          {/* Payment method — rendered only when the list actually loaded */}
+          {methods && primary && rest.length > 0 && (
+            <div className="mb-4">
+              <span className={labelClass} style={{ color: "var(--muted-foreground)" }}>
+                Способ оплаты
+              </span>
+              <div className="space-y-2">
+                <label className="flex items-center gap-3 p-2 cursor-pointer min-h-[44px]">
+                  <input
+                    type="radio"
+                    name="method_ui"
+                    checked={!otherOpen}
+                    onChange={() => {
+                      setOtherOpen(false);
+                      setMethod(primary.id);
+                    }}
+                    style={{ accentColor: "var(--foreground)" }}
+                  />
+                  <span className="text-sm">
+                    <span className="font-bold">{primary.label}</span>{" "}
+                    <span style={{ color: "var(--muted-foreground)" }}>{primary.provider}</span>
+                  </span>
+                </label>
+                <label className="flex items-center gap-3 p-2 cursor-pointer min-h-[44px]">
+                  <input
+                    type="radio"
+                    name="method_ui"
+                    checked={otherOpen}
+                    onChange={() => {
+                      setOtherOpen(true);
+                      setMethod(rest[0].id);
+                    }}
+                    style={{ accentColor: "var(--foreground)" }}
+                  />
+                  <span className="text-sm">Другой способ</span>
+                </label>
+                {otherOpen && (
+                  <select
+                    value={method}
+                    onChange={(e) => setMethod(e.target.value)}
+                    aria-label="Другой способ оплаты"
+                    style={inputStyle}
+                    onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
+                    onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
+                  >
+                    {rest.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {m.label} — {m.provider}
+                      </option>
+                    ))}
+                  </select>
+                )}
+                {currentMethod?.kind === "manual" && (
+                  <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+                    Счёт выставим вручную — доступ откроется после подтверждения оплаты.
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Promo code */}
+          <div className="mb-4">
+            <label
+              className={labelClass}
+              style={{ color: "var(--muted-foreground)" }}
+              htmlFor={`${titleId}-promo`}
+            >
+              Промокод
+            </label>
+            <input
+              id={`${titleId}-promo`}
+              type="text"
+              name="promo_code"
+              maxLength={40}
+              autoComplete="off"
+              placeholder="Если есть"
+              style={inputStyle}
+              onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
+              onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
+            />
+          </div>
+
+          <p className="text-xs mb-3" style={{ color: "var(--muted-foreground)" }}>
+            Доступ придёт на <span className="font-bold">{buyer.email}</span>
+          </p>
+
+          <button
+            type="submit"
+            disabled={submitting}
+            className="btn-aubade btn-aubade-accent w-full min-h-[44px] text-sm"
+          >
+            {submitting ? "Переходим к оплате…" : "Перейти к оплате →"}
+          </button>
+        </form>
+
+        {/* Footer */}
+        <div className="space-y-2 pt-1">
+          <a
+            href={entry.landingUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm underline inline-block"
+            style={{ color: "var(--foreground)" }}
+          >
+            Подробнее о курсе на сайте →
+          </a>
+          <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+            Сумма на странице оплаты отобразится в тенге (₸). Доступ откроется автоматически
+            после оплаты.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/student/store-showcase.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { STORE_CATALOG } from "@/lib/store-catalog";
+import { StoreCheckoutModal, type LockedCourse } from "./store-checkout-modal";
+
+interface Props {
+  courses: LockedCourse[];
+  buyer: { name: string; email: string };
+}
+
+// Blurred card body shared by both the modal-trigger button and the
+// fallback landing link.
+function CardBody({ course }: { course: LockedCourse }) {
+  return (
+    <>
+      {/* Overlay: замок + призыв, поверх размытого контента */}
+      <div
+        className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 transition-opacity"
+        style={{ backgroundColor: "color-mix(in srgb, var(--background) 55%, transparent)" }}
+      >
+        <span className="text-2xl">🔒</span>
+        <span
+          className="text-sm font-bold px-4 py-2"
+          style={{
+            border: "2px solid var(--foreground)",
+            backgroundColor: "var(--accent)",
+            color: "var(--foreground)",
+          }}
+        >
+          Подробнее →
+        </span>
+      </div>
+      {/* Размытый контент карточки */}
+      <div
+        className="flex flex-col flex-1"
+        style={{ filter: "blur(1.8px)", opacity: 0.82, pointerEvents: "none" }}
+      >
+        {course.coverImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={course.coverImage}
+            alt={course.title}
+            className="w-full aspect-video object-cover"
+          />
+        ) : (
+          <div
+            className="w-full aspect-video flex items-center justify-center text-4xl"
+            style={{ backgroundColor: "var(--color-surface)" }}
+          >
+            📚
+          </div>
+        )}
+        <div className="p-4 flex-1 flex flex-col gap-2">
+          <h2 className="font-bold text-lg leading-tight">{course.title}</h2>
+          {course.description && (
+            <p className="text-sm line-clamp-3" style={{ color: "var(--muted-foreground)" }}>
+              {course.description}
+            </p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function StoreShowcase({ courses, buyer }: Props) {
+  const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
+
+  const selected = courses.find((c) => c.slug === selectedSlug);
+  const selectedEntry = selected ? STORE_CATALOG[selected.slug] : undefined;
+
+  const cardClass = "card-aubade p-0 overflow-hidden flex flex-col relative group";
+
+  return (
+    <div className="mt-10">
+      <p
+        className="text-xs font-bold uppercase tracking-widest mb-3"
+        style={{ color: "var(--muted-foreground)" }}
+      >
+        Другие курсы Second Brain
+      </p>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {courses.map((course) => {
+          const entry = STORE_CATALOG[course.slug];
+          if (!entry || entry.tariffs.length === 0) {
+            // Fallback: no catalog entry → keep the old landing link
+            return (
+              <a
+                key={course.id}
+                href={entry?.landingUrl ?? "https://second-brain.ru"}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={cardClass}
+              >
+                <CardBody course={course} />
+              </a>
+            );
+          }
+          return (
+            <button
+              key={course.id}
+              type="button"
+              aria-haspopup="dialog"
+              onClick={() => setSelectedSlug(course.slug)}
+              className={`${cardClass} text-left w-full cursor-pointer`}
+            >
+              <CardBody course={course} />
+            </button>
+          );
+        })}
+      </div>
+
+      {selected && selectedEntry && (
+        <StoreCheckoutModal
+          course={selected}
+          entry={selectedEntry}
+          buyer={buyer}
+          onClose={() => setSelectedSlug(null)}
+        />
+      )}
+    </div>
+  );
+}

src/lib/store-catalog.ts

@@ -0,0 +1,87 @@
+// Storefront catalog for the dashboard upsell modal.
+//
+// SKUs and prices DUPLICATE payment-router/products.yaml (and the landing
+// pages) — the server always charges the catalog price by SKU, so a stale
+// price here is a display bug, not a money bug. When a price changes:
+// products.yaml → landing → this file.
+
+export interface StoreTariff {
+  sku: string; // must match payment-router/products.yaml
+  label: string;
+  priceRub: number; // display only; the charge is resolved server-side
+  includes?: string; // short "what's inside" caption under the label
+}
+
+export interface StoreCatalogEntry {
+  landingUrl: string;
+  tariffs: StoreTariff[];
+}
+
+export const PAY_ORDER_URL = "https://obsidian.second-brain.ru/pay/order";
+export const PAY_METHODS_URL = "https://obsidian.second-brain.ru/pay/methods";
+
+// Keys = course slugs shown as locked cards on the student dashboard.
+// Only tariffs of the course's "native" landing are listed — cross-bundles
+// from other landings would confuse the choice.
+export const STORE_CATALOG: Record<string, StoreCatalogEntry> = {
+  "second-brain-vault": {
+    landingUrl: "https://second-brain.ru/sb-vault",
+    tariffs: [{ sku: "sb-vault", label: "Second Brain Vault", priceRub: 2990 }],
+  },
+  "claude-obsidian": {
+    landingUrl: "https://second-brain.ru/claude-obsidian",
+    tariffs: [{ sku: "claude-obsidian", label: "Claude + Obsidian", priceRub: 4990 }],
+  },
+  "obsidian-full": {
+    landingUrl: "https://obsidian.second-brain.ru/",
+    tariffs: [
+      {
+        sku: "obsidian-pro",
+        label: "Obsidian + AI",
+        priceRub: 14990,
+        includes: "Включает курс «Obsidian + AI» и Second Brain Vault",
+      },
+      {
+        sku: "obsidian-architect",
+        label: "Архитектор знаний",
+        priceRub: 17990,
+        includes: "Плюс курс «Zotero. Всё включено»",
+      },
+    ],
+  },
+  "zotero-full": {
+    landingUrl: "https://zotero.second-brain.ru/",
+    tariffs: [
+      {
+        sku: "zotero-analyst",
+        label: "Аналитик",
+        priceRub: 10990,
+        includes: "Включает курс «Obsidian. Всё включено»",
+      },
+      {
+        sku: "zotero-max",
+        label: "Второй мозг на максималках",
+        priceRub: 17990,
+        includes: "Плюс курс «Obsidian + AI» и Second Brain Vault",
+      },
+    ],
+  },
+  "obsidian-ai": {
+    landingUrl: "https://obsidianai.second-brain.ru/",
+    tariffs: [
+      { sku: "obsidianai-base", label: "База", priceRub: 6990 },
+      {
+        sku: "obsidianai-expert",
+        label: "AI Эксперт",
+        priceRub: 14990,
+        includes: "Включает курс «Obsidian. Всё включено» и Second Brain Vault",
+      },
+      {
+        sku: "obsidianai-researcher",
+        label: "AI Исследователь",
+        priceRub: 17990,
+        includes: "Плюс курс «Zotero. Всё включено»",
+      },
+    ],
+  },
+};