feat: create detail event page, my-events page

Author: mpsalunggg

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 <UserEventDetailPage />;
+}

src/features/events/components/EventFormRegistration.tsx

@@ -28,7 +28,6 @@ const EventFormRegistration = ({ data }: { data: EventType }) => {
     defaultValues: {
       name: "",
       email: "",
-      // phone_number: "",
     },
   });
 

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<boolean>(false);
-  // const [nameImage, setNameImage] = useState<string | null>("");
-  // const [isDialogOpen, setIsDialogOpen] = useState<boolean>(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);

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 (
+      <div className="flex min-h-screen items-center justify-center">
+        <Loader />
+      </div>
+    );
+  }
+
+  if (!paymentData?.data) {
+    return (
+      <div className="container mx-auto max-w-3xl px-4 py-8">
+        <div className="text-center">
+          <h1 className="mb-4 text-2xl font-bold">Transaction Not Found</h1>
+          <p className="mb-8 text-gray-600 dark:text-gray-400">
+            The transaction you are looking for does not exist or has been removed.
+          </p>
+          <Button onClick={() => router.push("/my-events")}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to My Events
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  const eventData = paymentData.data;
+  return (
+    <div className="container mx-auto max-w-4xl px-4 py-8">
+      <div className="mb-6">
+        <Button variant="outline" onClick={() => router.push("/my-events")}>
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back to My Events
+        </Button>
+      </div>
+
+      <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+        <h1 className="mb-6 text-2xl font-bold">Event Details</h1>
+        <EventDetailModal event={eventData} />
+      </div>
+    </div>
+  );
+};
+
+export default UserEventDetailPage;

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";

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

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;