fix: address PR review comments - i18n, routing, error handling, type safety

Agent-Logs-Url: https://github.com/hammercode-dev/hammercode-web/sessions/3d9c5db3-7c5a-4dde-8b64-6d63b5002423

Co-authored-by: morizkay <26421928+morizkay@users.noreply.github.com>

Author: Copilot

src/features/events/components/ColumnsUserEventList.tsx

@@ -52,7 +52,9 @@ function ViewEventButton({ event }: { event: UserEventResponse }) {
   const router = useRouter();
 
   const handleViewDetails = () => {
-    router.push(`/my-events/${event.order_no}`);
+    if (event.order_no) {
+      router.push(`/my-events/${event.order_no}`);
+    }
   };
 
   return (

src/features/events/hooks/useRegistEvent.tsx

@@ -4,8 +4,10 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "@/contexts";
 import EventCheckStatusModal from "../components/EventCheckStatusModal";
 import { useRouter } from "@/lib/navigation";
+import { useTranslations } from "next-intl";
 
 export const useRegistEvent = () => {
+  const t = useTranslations("EventsPage.Hook");
   const router = useRouter();
   const { openDialog, closeDialog } = useDialog();
   const queryClient = useQueryClient();
@@ -15,10 +17,16 @@ export const useRegistEvent = () => {
     mutationFn: ({ event_id }: { event_id: number }) => eventsService.registerEvent(event_id),
     onSuccess: (data) => {
       toast.success(data?.message);
-      router.push(`/my-events/${data.data.order_no}`);
+      const orderNo = data?.data?.order_no;
+      if (orderNo) {
+        router.push(`/my-events/${orderNo}`);
+      } else {
+        router.push("/my-events");
+      }
     },
     onError: (error) => {
-      toast.error(error?.message);
+      const message = error?.message || t("register-error");
+      toast.error(message);
     },
   });
 

src/features/events/pages/UserEventDetailPage.tsx

@@ -1,18 +1,21 @@
 "use client";
 
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
+import { useRouter } from "@/lib/navigation";
 import { ArrowLeft } from "lucide-react";
+import { useTranslations } from "next-intl";
 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 t = useTranslations("MyEventDetailPage");
   const router = useRouter();
   const params = useParams();
 
-  const transactionId = params?.transactionId as string;
-  const { data: paymentData, isLoading } = useGetPaymentDetail(transactionId);
+  const order_no = params?.transactionId as string;
+  const { data: paymentData, isLoading, isError } = useGetPaymentDetail(order_no);
 
   if (isLoading) {
     return (
@@ -22,17 +25,17 @@ const UserEventDetailPage = () => {
     );
   }
 
-  if (!paymentData?.data) {
+  if (isError || !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.
+          <h1 className="mb-4 text-2xl font-bold">{t("not-found-title")}</h1>
+          <p className="mb-8 text-gray-600">
+            {t("not-found-description")}
           </p>
           <Button onClick={() => router.push("/my-events")}>
             <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to My Events
+            {t("back-to-my-events")}
           </Button>
         </div>
       </div>
@@ -44,12 +47,12 @@ const UserEventDetailPage = () => {
       <div className="mb-6">
         <Button variant="outline" onClick={() => router.push("/my-events")}>
           <ArrowLeft className="mr-2 h-4 w-4" />
-          Back to My Events
+          {t("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>
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <h1 className="mb-6 text-2xl font-bold">{t("event-details")}</h1>
         <EventDetailModal event={eventData} />
       </div>
     </div>

src/features/events/types/userEvent.ts

@@ -60,10 +60,10 @@ export interface EventDetailForUser {
 }
 
 export interface UserEventResponse {
-  id?: number;
-  order_no?: string;
-  event_id?: number;
-  user_id?: string;
+  id: number;
+  order_no: string;
+  event_id: number;
+  user_id: string;
   payment_url: string;
   transaction_no: string;
   payment_date: string | null;

src/locales/en.json

@@ -147,6 +147,9 @@
   "EventsPage": {
     "title": "Events",
     "description": "Join the fun events and have an unforgettable experience!",
+    "Hook": {
+      "register-error": "Failed to register event"
+    },
     "EventDetail": {
       "organized-by": "Organized By:",
       "desc-title": "Description",
@@ -229,6 +232,13 @@
     "title": "My Events",
     "description": "List of registered events"
   },
+  "MyEventDetailPage": {
+    "not-found-title": "Transaction Not Found",
+    "not-found-description": "The transaction you are looking for does not exist or has been removed.",
+    "back-to-my-events": "Back to My Events",
+    "event-details": "Event Details",
+    "load-error": "Failed to load transaction details"
+  },
   "MyBlogPage": {
     "title": "My Blogs",
     "description": "List of post and blog article",

src/locales/id.json

@@ -147,6 +147,9 @@
   "EventsPage": {
     "title": "Acara",
     "description": "Ayo ikuti berbagai acara seru dan dapatkan pengalaman tak terlupakan!",
+    "Hook": {
+      "register-error": "Gagal mendaftar event"
+    },
     "EventDetail": {
       "organized-by": "Diselenggarakan Oleh:",
       "desc-title": "Deskripsi",
@@ -229,6 +232,13 @@
     "title": "Event Saya",
     "description": "Daftar event yang sudah diregistrasi"
   },
+  "MyEventDetailPage": {
+    "not-found-title": "Transaksi Tidak Ditemukan",
+    "not-found-description": "Transaksi yang Anda cari tidak ada atau telah dihapus.",
+    "back-to-my-events": "Kembali ke Event Saya",
+    "event-details": "Detail Event",
+    "load-error": "Gagal memuat detail transaksi"
+  },
   "MyBlogPage": {
     "title": "Blog Saya",
     "description": "Daftar postingan dan artikel blog",