feat(frontend): add learning, community, and profile feature components
Cover verified playback, quizzes, skill tree, certificates, events, league, and registration UI.
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Award, Copy, ExternalLink, Loader2, Lock, Package } from "lucide-react";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import type { Certificate, CertificatePhysicalOrder, PhysicalCertSettings } from "@/lib/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/providers";
|
||||
import { cn, formatFaNumber } from "@/lib/utils";
|
||||
|
||||
type MineCertificateResponse = {
|
||||
certificate: Certificate | null;
|
||||
eligible: boolean;
|
||||
physicalOrder: CertificatePhysicalOrder | null;
|
||||
physical: PhysicalCertSettings;
|
||||
};
|
||||
|
||||
const ORDER_LABEL: Record<string, string> = {
|
||||
requested: "درخواست فیزیکی ثبت شد",
|
||||
paid: "پرداخت تأیید شد",
|
||||
shipped: "ارسال شد",
|
||||
cancelled: "درخواست فیزیکی لغو شده",
|
||||
};
|
||||
|
||||
export function ProfileCertificateSlot() {
|
||||
const router = useRouter();
|
||||
const qc = useQueryClient();
|
||||
const [issuing, setIssuing] = useState(false);
|
||||
const autoIssueTried = useRef(false);
|
||||
|
||||
const { data, isLoading, isError, error, refetch } = useQuery({
|
||||
queryKey: ["me", "certificate"],
|
||||
queryFn: () => http.get<MineCertificateResponse>("/api/me/certificate"),
|
||||
});
|
||||
|
||||
const cert = data?.certificate ?? null;
|
||||
const eligible = !!data?.eligible;
|
||||
const physical = data?.physical;
|
||||
const order = data?.physicalOrder;
|
||||
|
||||
// Auto-issue once when the student becomes eligible (same path as /cap).
|
||||
useEffect(() => {
|
||||
if (!eligible || cert || autoIssueTried.current) return;
|
||||
autoIssueTried.current = true;
|
||||
setIssuing(true);
|
||||
void http
|
||||
.post<{ certificate: Certificate }>("/api/me/certificate/issue", {})
|
||||
.then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
|
||||
.catch((e) => toast.error(toUserError(e, "صدور خودکار گواهینامه ممکن نشد — دستی تلاش کنید")))
|
||||
.finally(() => setIssuing(false));
|
||||
}, [eligible, cert, qc]);
|
||||
|
||||
const copyLink = async () => {
|
||||
if (!cert?.publicId) return;
|
||||
const url = `${window.location.origin}/c/${cert.publicId}`;
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
toast.success("لینک گواهینامه کپی شد");
|
||||
} catch {
|
||||
toast.error("کپی ممکن نشد");
|
||||
}
|
||||
};
|
||||
|
||||
const openCert = () => {
|
||||
if (!cert?.publicId) return;
|
||||
router.push(`/c/${cert.publicId}`);
|
||||
};
|
||||
|
||||
const claim = async () => {
|
||||
setIssuing(true);
|
||||
try {
|
||||
const res = await http.post<{ certificate: Certificate }>("/api/me/certificate/issue", {});
|
||||
await qc.invalidateQueries({ queryKey: ["me", "certificate"] });
|
||||
if (res.certificate?.publicId) {
|
||||
router.push(`/c/${res.certificate.publicId}`);
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(toUserError(e, "صدور گواهینامه ممکن نشد"));
|
||||
} finally {
|
||||
setIssuing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const physicalOpen =
|
||||
!!physical?.enabled &&
|
||||
!!cert &&
|
||||
(!order || order.status === "cancelled") &&
|
||||
(!cert.issuedAt ||
|
||||
Date.now() <
|
||||
new Date(cert.issuedAt).getTime() + (physical.windowDays || 30) * 24 * 60 * 60 * 1000);
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label="جایگاه گواهینامه"
|
||||
className="rounded-xl border border-dashed border-border bg-muted/20 p-3"
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary">
|
||||
<Award className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-extrabold">گواهینامه پایان دوره</p>
|
||||
<p className="text-[10px] text-muted-foreground">جایگاه ثابت گواهی شما در پروفایل</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className="space-y-2 py-2 text-xs">
|
||||
<p className="font-medium text-destructive">{toUserError(error)}</p>
|
||||
<Button type="button" size="sm" variant="outline" className="h-8" onClick={() => refetch()}>
|
||||
تلاش دوباره
|
||||
</Button>
|
||||
</div>
|
||||
) : isLoading || (eligible && !cert && issuing) ? (
|
||||
<div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
در حال بارگذاری…
|
||||
</div>
|
||||
) : cert ? (
|
||||
<div className="space-y-2.5">
|
||||
<div className="rounded-lg border border-primary/25 bg-primary/5 px-3 py-2.5">
|
||||
<p className="text-sm font-bold text-foreground">{cert.fullName}</p>
|
||||
<p className="mt-0.5 text-[11px] text-muted-foreground">
|
||||
صادر شده در {new Date(cert.issuedAt).toLocaleDateString("fa-IR")}
|
||||
</p>
|
||||
<p className="mt-1 truncate font-mono text-[10px] text-muted-foreground" dir="ltr">
|
||||
{cert.publicId}
|
||||
</p>
|
||||
</div>
|
||||
{order && order.status !== "cancelled" ? (
|
||||
<p className="text-[11px] font-medium text-muted-foreground">
|
||||
{ORDER_LABEL[order.status] ?? order.status}
|
||||
{order.trackingCode ? ` · کد پیگیری ${order.trackingCode}` : ""}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<Button type="button" size="sm" className="h-8 flex-1" onClick={openCert}>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
مشاهده
|
||||
</Button>
|
||||
<Button type="button" size="sm" variant="outline" className="h-8" onClick={() => void copyLink()}>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
کپی لینک
|
||||
</Button>
|
||||
{physicalOpen ? (
|
||||
<Button type="button" size="sm" variant="outline" className="h-8" onClick={openCert}>
|
||||
<Package className="h-3.5 w-3.5" />
|
||||
فیزیکی
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : eligible ? (
|
||||
<div className="space-y-2.5">
|
||||
<p className="text-[11px] leading-relaxed text-muted-foreground">
|
||||
دوره را تمام کرده‌اید. گواهینامه دیجیتال آمادهٔ صدور است.
|
||||
</p>
|
||||
<Button type="button" size="sm" className="h-8 w-full" disabled={issuing} onClick={() => void claim()}>
|
||||
{issuing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Award className="h-3.5 w-3.5" />}
|
||||
دریافت گواهینامه
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-start gap-2 rounded-lg border border-border/70 bg-background/60 px-3 py-2.5",
|
||||
)}
|
||||
>
|
||||
<Lock className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-[11px] font-bold text-foreground">هنوز صادر نشده</p>
|
||||
<p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
|
||||
با پاس کردن همه درس‌های فعال، گواهینامه همین‌جا نمایش داده می‌شود
|
||||
{physical?.enabled
|
||||
? `؛ در صورت فعال بودن، نسخه فیزیکی (پرداخت آفلاین) تا ${formatFaNumber(physical.windowDays)} روز پس از صدور قابل درخواست است.`
|
||||
: "."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user