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-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>
+  );
+}