506 lines
18 KiB
TypeScript
506 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useMemo, useState } from "react";
|
||
import { useNavigate, useParams } from "@/lib/router";
|
||
import { api } from "@/lib/api";
|
||
import type * as Types from "@/lib/types";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import GalleryLightbox, { type GalleryLightboxItem } from "@/components/GalleryLightbox";
|
||
import ProgressiveImage from "@/components/ProgressiveImage";
|
||
import { useToast } from "@/hooks/use-toast";
|
||
import Markdown from "@/components/Markdown";
|
||
import CouponDialogFa from "@/components/CouponDialogFa";
|
||
import {
|
||
formatJalali,
|
||
formatNumberPersian,
|
||
formatToman,
|
||
getEventCardImageUrl,
|
||
getEventHeroImageUrl,
|
||
getEventSeoImageUrl,
|
||
getGalleryImageBlurUrl,
|
||
getGalleryImageFullUrl,
|
||
getGalleryImagePreviewUrl,
|
||
resolveErrorMessage,
|
||
toPersianDigits,
|
||
} from "@/lib/utils";
|
||
import { useAuth } from "@/contexts/AuthContext";
|
||
import { buildAuthPath } from "@/lib/auth-return";
|
||
|
||
const typeLabel: Record<string, string> = {
|
||
online: "آنلاین",
|
||
on_site: "حضوری",
|
||
hybrid: "آنلاین و حضوری",
|
||
};
|
||
|
||
type EventDetailProps = {
|
||
initialEvent?: Types.EventDetailSchema | null;
|
||
};
|
||
|
||
function buildPaymentSnapshot(
|
||
event: Types.EventDetailSchema,
|
||
eventThumb: string | null,
|
||
payload: {
|
||
baseAmount: number;
|
||
discountAmount: number;
|
||
amount: number;
|
||
},
|
||
) {
|
||
return JSON.stringify({
|
||
event_id: event.id,
|
||
slug: event.slug,
|
||
title: event.title,
|
||
thumb: eventThumb,
|
||
base_amount: payload.baseAmount,
|
||
discount_amount: payload.discountAmount,
|
||
amount: payload.amount,
|
||
started_at: new Date().toISOString(),
|
||
success_markdown: event.registration_success_markdown,
|
||
});
|
||
}
|
||
|
||
export default function EventDetail({ initialEvent = null }: EventDetailProps) {
|
||
const { slug } = useParams<{ slug: string }>();
|
||
const { isAuthenticated } = useAuth();
|
||
const navigate = useNavigate();
|
||
const { toast } = useToast();
|
||
|
||
const [event, setEvent] = useState<Types.EventDetailSchema | null>(initialEvent);
|
||
const [eventThumb, setEventThumb] = useState<string | null>(
|
||
initialEvent ? getEventCardImageUrl(initialEvent) : null,
|
||
);
|
||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||
const [loading, setLoading] = useState(!initialEvent);
|
||
const [open, setOpen] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [alreadyRegistered, setAlreadyRegistered] = useState(false);
|
||
const [nowTs, setNowTs] = useState(() => Date.now());
|
||
|
||
const basePrice = Number(event?.price ?? 0);
|
||
const isFree = useMemo(() => basePrice <= 0, [basePrice]);
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
|
||
async function checkRegistration() {
|
||
if (!isAuthenticated || !event?.id) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await api.getRegistrationStatus(event.id);
|
||
if (!cancelled) {
|
||
setAlreadyRegistered(res.is_registered);
|
||
}
|
||
} catch {
|
||
// Ignore registration status failures on the detail page.
|
||
}
|
||
}
|
||
|
||
checkRegistration();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [event?.id, isAuthenticated]);
|
||
|
||
const goSuccess = (registrationId?: string) => {
|
||
if (!event) return;
|
||
const query = registrationId ? `?registration_id=${registrationId}` : "";
|
||
setAlreadyRegistered(true);
|
||
toast({ title: "ثبت‌نام با موفقیت انجام شد!", variant: "success" });
|
||
navigate(`/events/${event.slug}/success${query}`);
|
||
};
|
||
|
||
const handleMainCTA = async () => {
|
||
if (!event) return;
|
||
|
||
if (!isAuthenticated) {
|
||
toast({
|
||
title: "ابتدا وارد شوید",
|
||
description: "برای ثبت‌نام در رویداد باید وارد حساب کاربری خود شوید.",
|
||
variant: "destructive",
|
||
});
|
||
navigate(buildAuthPath(`/events/${event.slug}`));
|
||
return;
|
||
}
|
||
|
||
if (!isFree) {
|
||
setOpen(true);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
const res = await api.registerForEvent(event.id);
|
||
goSuccess(res.ticket_id);
|
||
} catch (error: unknown) {
|
||
const msg = resolveErrorMessage(error, "");
|
||
if (msg.includes("already registered")) {
|
||
setAlreadyRegistered(true);
|
||
toast({ title: "شما قبلاً ثبت‌نام کرده‌اید", variant: "destructive" });
|
||
return;
|
||
}
|
||
toast({
|
||
title: "خطا در ثبت‌نام",
|
||
description: msg || "لطفاً دوباره تلاش کنید.",
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleContinueFromModal = async (coupon?: string, finalAmount?: number) => {
|
||
if (!event) return;
|
||
|
||
if (!isAuthenticated) {
|
||
toast({
|
||
title: "ابتدا وارد شوید",
|
||
description: "برای ثبت‌نام در رویداد باید وارد حساب کاربری خود شوید.",
|
||
variant: "destructive",
|
||
});
|
||
navigate(buildAuthPath(`/events/${event.slug}`));
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
const reg = await api.registerForEvent(event.id, coupon);
|
||
|
||
if (finalAmount === 0) {
|
||
window.sessionStorage.setItem(
|
||
"payment:last",
|
||
buildPaymentSnapshot(event, eventThumb, {
|
||
baseAmount: Number(event.price ?? 0),
|
||
discountAmount: Number(event.price ?? 0),
|
||
amount: 0,
|
||
}),
|
||
);
|
||
await api.ChangeRegistrationStatus(reg.id, "confirmed");
|
||
goSuccess(reg.ticket_id);
|
||
return;
|
||
}
|
||
|
||
const result = await api.createPayment({
|
||
event_id: event.id,
|
||
description: `پرداخت رویداد: ${event.title}`,
|
||
discount_code: (coupon ?? "").trim() || null,
|
||
});
|
||
|
||
if (!result?.start_pay_url || Number(result.amount) === 0) {
|
||
window.sessionStorage.setItem(
|
||
"payment:last",
|
||
buildPaymentSnapshot(event, eventThumb, {
|
||
baseAmount: result.base_amount,
|
||
discountAmount: result.discount_amount ?? result.base_amount,
|
||
amount: 0,
|
||
}),
|
||
);
|
||
goSuccess(reg.ticket_id);
|
||
return;
|
||
}
|
||
|
||
window.sessionStorage.setItem(
|
||
"payment:last",
|
||
buildPaymentSnapshot(event, eventThumb, {
|
||
baseAmount: result.base_amount,
|
||
discountAmount: result.discount_amount,
|
||
amount: result.amount,
|
||
}),
|
||
);
|
||
window.location.href = result.start_pay_url;
|
||
} catch (error: unknown) {
|
||
const msg = resolveErrorMessage(error, "");
|
||
if (msg.includes("already registered")) {
|
||
setAlreadyRegistered(true);
|
||
toast({ title: "شما قبلاً ثبت‌نام کرده‌اید", variant: "destructive" });
|
||
return;
|
||
}
|
||
toast({
|
||
title: "خطا در پردازش پرداخت",
|
||
description: msg || "لطفاً دوباره تلاش کنید.",
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
setSubmitting(false);
|
||
setOpen(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
|
||
async function loadEvent() {
|
||
try {
|
||
if (!slug) return;
|
||
|
||
if (initialEvent && initialEvent.slug === slug) {
|
||
setEvent(initialEvent);
|
||
setEventThumb(getEventCardImageUrl(initialEvent));
|
||
return;
|
||
}
|
||
|
||
const data = await api.getEventBySlug(slug);
|
||
if (cancelled) return;
|
||
setEvent(data);
|
||
setEventThumb(getEventCardImageUrl(data));
|
||
} catch (error: unknown) {
|
||
if (cancelled) return;
|
||
toast({
|
||
title: "خطا در بارگذاری رویداد",
|
||
description: resolveErrorMessage(error, "لطفاً دوباره تلاش کنید."),
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
if (!cancelled) {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
}
|
||
|
||
loadEvent();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [initialEvent, slug, toast]);
|
||
|
||
useEffect(() => {
|
||
const timer = window.setInterval(() => setNowTs(Date.now()), 1000);
|
||
return () => window.clearInterval(timer);
|
||
}, []);
|
||
|
||
const rsTs = useMemo<number | null>(
|
||
() => (event?.registration_start_date ? new Date(event.registration_start_date).getTime() : null),
|
||
[event?.registration_start_date],
|
||
);
|
||
|
||
const deadlineTs = useMemo<number | null>(
|
||
() => (event?.registration_end_date ? new Date(event.registration_end_date).getTime() : null),
|
||
[event?.registration_end_date],
|
||
);
|
||
|
||
const remainingMs = useMemo<number | null>(
|
||
() => (deadlineTs != null ? Math.max(0, deadlineTs - nowTs) : null),
|
||
[deadlineTs, nowTs],
|
||
);
|
||
|
||
const formatCountdownTwoDigit = (value: number) =>
|
||
toPersianDigits(value.toString().padStart(2, "0"));
|
||
const formatCountdownNumber = (value: number) => formatNumberPersian(value);
|
||
|
||
const formatRemainingWords = (ms: number) => {
|
||
const total = Math.max(0, Math.floor(ms / 1000));
|
||
const days = Math.floor(total / 86400);
|
||
const hours = Math.floor((total % 86400) / 3600);
|
||
const minutes = Math.floor((total % 3600) / 60);
|
||
const seconds = total % 60;
|
||
|
||
if (days === 0) {
|
||
return `${formatCountdownTwoDigit(hours)} ساعت و ${formatCountdownTwoDigit(minutes)} دقیقه و ${formatCountdownTwoDigit(seconds)} ثانیه`;
|
||
}
|
||
|
||
return `${formatCountdownNumber(days)} روز و ${formatCountdownTwoDigit(hours)} ساعت و ${formatCountdownTwoDigit(minutes)} دقیقه و ${formatCountdownTwoDigit(seconds)} ثانیه`;
|
||
};
|
||
|
||
const meta = useMemo(() => {
|
||
if (!event) return null;
|
||
const registrationOpen =
|
||
(rsTs == null || nowTs >= rsTs) && (deadlineTs == null || nowTs <= deadlineTs);
|
||
const unlimited = event.capacity == null;
|
||
const remaining = unlimited
|
||
? Number.POSITIVE_INFINITY
|
||
: Math.max(0, (event.capacity || 0) - (event.registration_count || 0));
|
||
const full = !unlimited && remaining <= 0;
|
||
return { registrationOpen, remaining, full };
|
||
}, [deadlineTs, event, nowTs, rsTs]);
|
||
|
||
const galleryItems = useMemo<GalleryLightboxItem[]>(
|
||
() =>
|
||
(event?.gallery_images ?? []).map((image) => ({
|
||
id: image.id,
|
||
alt: image.title || event?.title || "تصویر رویداد",
|
||
title: image.title,
|
||
previewSrc: getGalleryImagePreviewUrl(image),
|
||
blurSrc: getGalleryImageBlurUrl(image),
|
||
fullSrc: getGalleryImageFullUrl(image),
|
||
})),
|
||
[event],
|
||
);
|
||
|
||
if (loading) {
|
||
return <div className="min-h-[60vh] flex items-center justify-center text-muted-foreground">در حال بارگذاری رویداد...</div>;
|
||
}
|
||
|
||
if (!event) {
|
||
return <div className="min-h-[60vh] flex items-center justify-center">رویداد مورد نظر یافت نشد.</div>;
|
||
}
|
||
|
||
const beforeStart = rsTs != null && nowTs < rsTs;
|
||
const ended = deadlineTs !== null && remainingMs === 0;
|
||
const showCountdown = !beforeStart && deadlineTs !== null && (remainingMs ?? 0) > 0;
|
||
|
||
return (
|
||
<div className="container mx-auto px-4 py-8" dir="rtl">
|
||
{beforeStart && (
|
||
<div className="mb-6">
|
||
<div className="rounded-xl border p-4 text-center bg-sky-50 text-sky-900 border-sky-200 dark:bg-sky-900/30 dark:text-sky-100 dark:border-sky-800">
|
||
ثبت‌نام از <strong className="font-semibold">{formatJalali(event.registration_start_date!)}</strong> آغاز می‌شود.
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showCountdown && remainingMs != null && (
|
||
<div className="mb-6">
|
||
<div className="rounded-xl border p-4 text-center bg-emerald-50 text-emerald-900 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-100 dark:border-emerald-800">
|
||
<div className="flex flex-col items-center gap-1 sm:flex-row sm:justify-center">
|
||
<span>زمان باقی‌مانده تا پایان ثبت‌نام:</span>
|
||
<strong className="font-extrabold tracking-wider sm:ms-1">
|
||
{formatRemainingWords(remainingMs)}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{ended && (
|
||
<div className="mb-6">
|
||
<div className="rounded-xl border p-4 text-center bg-rose-50 text-rose-900 border-rose-200 dark:bg-rose-900/30 dark:text-rose-100 dark:border-rose-800">
|
||
مهلت ثبت‌نام به پایان رسیده است.
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<div className="lg:col-span-2">
|
||
<Card className="overflow-hidden">
|
||
<div className="w-full aspect-video overflow-hidden rounded-lg">
|
||
<ProgressiveImage
|
||
src={getEventHeroImageUrl(event)}
|
||
blurSrc={event.absolute_featured_image_thumbnail_url}
|
||
alt={event.title}
|
||
wrapperClassName="h-full w-full"
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
</div>
|
||
|
||
<CardHeader>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<CardTitle className="text-2xl">{event.title}</CardTitle>
|
||
<CardDescription className="mt-1">
|
||
{formatJalali(event.start_time)}
|
||
{event.end_time ? ` تا ${formatJalali(event.end_time)}` : null}
|
||
</CardDescription>
|
||
</div>
|
||
<div className="flex flex-col items-end gap-2">
|
||
<Badge variant="default">{typeLabel[event.event_type] || event.event_type}</Badge>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Markdown content={event.description} justify size="base" />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{galleryItems.length ? (
|
||
<div className="mt-6">
|
||
<h3 className="text-lg font-semibold mb-3">گالری تصاویر</h3>
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||
{galleryItems.map((image, index) => (
|
||
<button
|
||
key={image.id}
|
||
type="button"
|
||
className="overflow-hidden rounded-md text-right transition-transform hover:scale-[1.01] focus:outline-none focus:ring-2 focus:ring-primary/40"
|
||
onClick={() => setLightboxIndex(index)}
|
||
>
|
||
<ProgressiveImage
|
||
src={image.previewSrc}
|
||
blurSrc={image.blurSrc}
|
||
alt={image.alt}
|
||
wrapperClassName="h-36 w-full"
|
||
className="h-36 w-full object-cover"
|
||
/>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="lg:col-span-1">
|
||
<div className="lg:sticky lg:top-24">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base">اطلاعات ثبت‌نام</CardTitle>
|
||
<CardDescription>جزئیات دسترسی به رویداد</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3 text-sm">
|
||
{event.address && <div>آدرس: {event.address}</div>}
|
||
<div>
|
||
ظرفیت کل: {event.capacity == null ? "نامحدود" : formatNumberPersian(event.capacity)}
|
||
</div>
|
||
{meta && event.capacity != null && (
|
||
<div>
|
||
ظرفیت باقی‌مانده:{" "}
|
||
{meta.remaining === Number.POSITIVE_INFINITY
|
||
? "نامحدود"
|
||
: formatNumberPersian(meta.remaining)}
|
||
</div>
|
||
)}
|
||
<div>هزینه حضور: {event.price ? formatToman(event.price) : "رایگان"}</div>
|
||
|
||
<Button
|
||
onClick={handleMainCTA}
|
||
className="w-full mt-2"
|
||
disabled={
|
||
submitting ||
|
||
alreadyRegistered ||
|
||
event.status !== "published" ||
|
||
meta?.full === true ||
|
||
!meta?.registrationOpen
|
||
}
|
||
>
|
||
{event.status !== "published"
|
||
? "ثبت‌نام این رویداد فعال نیست"
|
||
: alreadyRegistered
|
||
? "شما قبلاً ثبت‌نام کرده‌اید"
|
||
: !meta?.registrationOpen
|
||
? "ثبت‌نام هنوز آغاز نشده است"
|
||
: meta?.full
|
||
? "ظرفیت ثبت‌نام تکمیل شده است"
|
||
: submitting
|
||
? "در حال ثبت‌نام..."
|
||
: event.price === 0
|
||
? "ثبت‌نام (رایگان)"
|
||
: "ثبت‌نام و ادامه پرداخت"}
|
||
</Button>
|
||
|
||
{!isFree && (
|
||
<CouponDialogFa
|
||
open={open}
|
||
onOpenChange={setOpen}
|
||
basePrice={basePrice}
|
||
onVerifyCouponRaw={(code) => api.checkDiscountCode(event.id, code)}
|
||
onContinue={handleContinueFromModal}
|
||
/>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<GalleryLightbox
|
||
items={galleryItems}
|
||
open={lightboxIndex !== null}
|
||
initialIndex={lightboxIndex ?? 0}
|
||
onOpenChange={(isOpen) => {
|
||
if (!isOpen) {
|
||
setLightboxIndex(null);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|