diff --git a/src/app/[locale]/(public)/(user)/my-events/[transactionId]/page.tsx b/src/app/[locale]/(public)/(user)/my-events/[transactionId]/page.tsx new file mode 100644 index 0000000..3b9c0ef --- /dev/null +++ b/src/app/[locale]/(public)/(user)/my-events/[transactionId]/page.tsx @@ -0,0 +1,5 @@ +import { UserEventDetailPage } from "@/features/events/pages"; + +export default async function MyEventDetailPage() { + return ; +} diff --git a/src/features/events/components/ColumnsUserEventList.tsx b/src/features/events/components/ColumnsUserEventList.tsx index 3c73773..cb3222e 100644 --- a/src/features/events/components/ColumnsUserEventList.tsx +++ b/src/features/events/components/ColumnsUserEventList.tsx @@ -4,9 +4,8 @@ import { Button } from "@/components/ui/Button"; import { formatDateEvent } from "@/lib/format"; import { ColumnDef } from "@tanstack/react-table"; import { Eye } from "lucide-react"; -import { useDialog } from "@/contexts/dialogContext"; -import { EventDetailModal } from "./EventDetailModal"; import { UserEventResponse } from "../types/userEvent"; +import { useRouter } from "@/lib/navigation"; export const columnsUserEventList: ColumnDef[] = [ { @@ -50,15 +49,10 @@ export const columnsUserEventList: ColumnDef[] = [ ]; function ViewEventButton({ event }: { event: UserEventResponse }) { - const { openDialog } = useDialog(); + const router = useRouter(); const handleViewDetails = () => { - openDialog({ - title: "Event Details", - content: , - size: "xl", - className: "h-[80%]", - }); + router.push(`/my-events/${event.order_no}`); }; return ( diff --git a/src/features/events/components/EventFormRegistration.tsx b/src/features/events/components/EventFormRegistration.tsx index 2918b76..a3bd3a1 100644 --- a/src/features/events/components/EventFormRegistration.tsx +++ b/src/features/events/components/EventFormRegistration.tsx @@ -28,7 +28,6 @@ const EventFormRegistration = ({ data }: { data: EventType }) => { defaultValues: { name: "", email: "", - // phone_number: "", }, }); diff --git a/src/features/events/hooks/useRegistEvent.tsx b/src/features/events/hooks/useRegistEvent.tsx index 8c55c2e..fda1552 100644 --- a/src/features/events/hooks/useRegistEvent.tsx +++ b/src/features/events/hooks/useRegistEvent.tsx @@ -1,76 +1,21 @@ -// import { useState } from "react"; -// import { useTranslations } from "next-intl"; import { toast } from "sonner"; import { eventsService } from "@/services/events"; -// import { EventType } from "@/domains/Events"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useDialog } from "@/contexts"; import EventCheckStatusModal from "../components/EventCheckStatusModal"; +import { useRouter } from "@/lib/navigation"; export const useRegistEvent = () => { - // const t = useTranslations("EventsPage"); + const router = useRouter(); const { openDialog, closeDialog } = useDialog(); const queryClient = useQueryClient(); - // const [isLoading, setIsLoading] = useState(false); - // const [nameImage, setNameImage] = useState(""); - // const [isDialogOpen, setIsDialogOpen] = useState(false); - // const registEvent = async (formData: RegistrationForm) => { - // setIsLoading(true); - - // try { - // const { image_proof_payment, ...registDetails } = formData; - - // interface NewPayload extends RegistrationForm { - // event_id: number; - // } - - // let registPayload: NewPayload = { - // event_id: 0, - // image_proof_payment: "", - // ...registDetails, - // }; - - // if (!nameImage) { - // console.log("image proof payment", image_proof_payment); - // const { - // data: { file_name: uploadedImageFileName }, - // } = await uploadsService.uploadImage(image_proof_payment as File, "event"); - - // setNameImage(uploadedImageFileName); - // registPayload = { - // ...registDetails, - // image_proof_payment: uploadedImageFileName as string, - // event_id: data?.id as number, - // }; - // } else { - // registPayload = { - // ...registDetails, - // image_proof_payment: nameImage as string, - // event_id: data?.id as number, - // }; - // } - - // const res = await eventsService.registerEvent(registPayload); - - // toast.success(`${t("EventRegistration.success.title")}`, { - // description: `${t("EventRegistration.success.description")} ${res.data.order_no}`, - // }); - // setNameImage(""); - // setIsLoading(false); - // } catch (error) { - // // console.log(error); - // toast.error(t("EventRegistration.failure.title"), { - // description: error instanceof Error ? error.message : t("EventRegistration.failure.description"), - // }); - // setIsLoading(false); - // } - // }; const { mutate: registerEvent, isPending: isPendingRegister } = useMutation({ mutationKey: ["registerEvent"], mutationFn: ({ event_id }: { event_id: number }) => eventsService.registerEvent(event_id), onSuccess: (data) => { toast.success(data?.message); + router.push(`/my-events/${data.data.order_no}`); }, onError: (error) => { toast.error(error?.message); diff --git a/src/features/events/pages/UserEventDetailPage.tsx b/src/features/events/pages/UserEventDetailPage.tsx new file mode 100644 index 0000000..ca32e30 --- /dev/null +++ b/src/features/events/pages/UserEventDetailPage.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { useParams, useRouter } from "next/navigation"; +import { ArrowLeft } from "lucide-react"; +import { Button } from "@/components/ui/Button"; +import { EventDetailModal } from "../components/EventDetailModal"; +import { useGetPaymentDetail } from "../hooks/useEvent"; +import Loader from "@/components/common/Loader"; + +const UserEventDetailPage = () => { + const router = useRouter(); + const params = useParams(); + + const transactionId = params?.transactionId as string; + const { data: paymentData, isLoading } = useGetPaymentDetail(transactionId); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (!paymentData?.data) { + return ( +
+
+

Transaction Not Found

+

+ The transaction you are looking for does not exist or has been removed. +

+ +
+
+ ); + } + const eventData = paymentData.data; + return ( +
+
+ +
+ +
+

Event Details

+ +
+
+ ); +}; + +export default UserEventDetailPage; diff --git a/src/features/events/pages/index.ts b/src/features/events/pages/index.ts index 14bcfbc..b725210 100644 --- a/src/features/events/pages/index.ts +++ b/src/features/events/pages/index.ts @@ -4,3 +4,4 @@ export { default as AdminEventUpdatePage } from "./AdminEventUpdatePage"; export { default as PublicEventListPage } from "./PublicEventListPage"; export { default as PublicEventDetailPage } from "./PublicEventDetailPage"; export { default as UserEventPage } from "./UserEventPage"; +export { default as UserEventDetailPage } from "./UserEventDetailPage"; diff --git a/src/features/events/types.ts b/src/features/events/types.ts index 452e401..a646335 100644 --- a/src/features/events/types.ts +++ b/src/features/events/types.ts @@ -1,3 +1,5 @@ +import { EventDetailForUser, UserDetail } from "./types/userEvent"; + type EventTypes = "Workshop" | "TechTalk" | "dll"; type EventStatus = "open" | "soon" | "closed"; @@ -27,22 +29,15 @@ export type EventInfoType = { }; export type PaymentDetailResponse = { + id?: number; + event_id?: number; + user_id?: string; order_no: string; transaction_no: string; payment_date: string; status: string; - event_detail: { - title: string; - date: Date; - type: string; - location: string; - duration: string; - price: number; - session_type: string; - }; - user_detail: { - fullname: string; - email: string; - phone_number: string; - }; + payment_url: string; + created_at: string; + event_detail: EventDetailForUser; + user_detail: UserDetail; }; diff --git a/src/features/events/types/userEvent.ts b/src/features/events/types/userEvent.ts index 60a1708..39692cf 100644 --- a/src/features/events/types/userEvent.ts +++ b/src/features/events/types/userEvent.ts @@ -60,15 +60,14 @@ export interface EventDetailForUser { } export interface UserEventResponse { - id: number; - order_no: string; - event_id: number; - user_id: string; - image_proof_payment: string; + id?: number; + order_no?: string; + event_id?: number; + user_id?: string; payment_url: string; transaction_no: string; payment_date: string | null; - status: "PENDING" | "SUCCESS" | "FAILED" | "EXPIRED"; + status: string; created_at: string; event_detail: EventDetailForUser; user_detail: UserDetail;