Add DS-2 checkout modal for locked courses
Form POSTs directly to payment-router /pay/order with the student's email prefilled, so the purchase auto-attaches to the existing account. Payment methods are fetched from /pay/methods with a robokassa fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user