feat(payments): add check payment service for update payment status

mpsalunggg · mpsalunggg · commit b7ac775cf257 · 2025-11-08T20:10:25.000+07:00
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -60,17 +60,17 @@ export default async function LocaleRootLayout(props: Readonly<Props>) {
     <html lang={locale} suppressHydrationWarning>
       <body className={`${sora.className}`}>
         <NextIntlClientProvider messages={messages}>
-          <DialogProvider>
-            <TanstackProvider>
+          <TanstackProvider>
+            <DialogProvider>
               <AuthProvider payload={payload}>
                 <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
                   {children}
                 </ThemeProvider>
               </AuthProvider>
-            </TanstackProvider>
-            <Toaster />
-            <DialogGlobal />
-          </DialogProvider>
+              <Toaster />
+              <DialogGlobal />
+            </DialogProvider>
+          </TanstackProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/src/domains/Events.ts b/src/domains/Events.ts
@@ -132,3 +132,10 @@ export type AdminEventResponseType = Omit<EventFormType, "image"> & {
   author: string;
   file_name: string;
 };
+
+export type CheckPaymentResponse = {
+  transaction_no: string;
+  status: string;
+  paid_at: Date;
+  payment_method: string;
+};
diff --git a/src/features/events/components/EventCheckStatusModal.tsx b/src/features/events/components/EventCheckStatusModal.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/Button";
+import { useDialog } from "@/contexts";
+import { Check, CreditCard, HelpCircle } from "lucide-react";
+import { ReactNode } from "react";
+
+type Props = {
+  status?: string;
+  transaction_no?: string;
+};
+
+const statusIconMap: Record<string, ReactNode> = {
+  paid: <Check className="h-20 w-20 text-green-500" />,
+  pending: <CreditCard className="h-20 w-20 text-yellow-500" />,
+};
+
+const EventCheckStatusModal = ({ status = "", transaction_no = "" }: Props) => {
+  const { closeDialog } = useDialog();
+
+  const icon = statusIconMap[status] ?? <HelpCircle className="h-20 w-20 text-gray-400" />;
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 py-8 text-center">
+      {icon}
+
+      <div className="space-y-1">
+        <p className="text-xl font-semibold capitalize">{status || "Unknown"}</p>
+        {transaction_no && (
+          <p className="text-muted-foreground text-sm">
+            Transaction No: <span className="font-medium">{transaction_no}</span>
+          </p>
+        )}
+      </div>
+
+      <Button variant="outline" onClick={closeDialog}>
+        Kembali
+      </Button>
+    </div>
+  );
+};
+
+export default EventCheckStatusModal;
diff --git a/src/features/events/components/EventDetailModal.tsx b/src/features/events/components/EventDetailModal.tsx
@@ -13,13 +13,16 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import { Check, X, UserCheck, CreditCard, CheckCircle2, Calendar, User } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/Button";
+import { useRegistEvent } from "../hooks/useRegistEvent";
 
 interface EventDetailModalProps {
   event: UserEventResponse;
 }
 
 export const EventDetailModal = ({ event }: EventDetailModalProps) => {
   const { event_detail, user_detail } = event;
+  const { checkPaymentStatus } = useRegistEvent();
 
   const getActiveStep = () => {
     if (event.status === "SUCCESS") return 3;
@@ -155,7 +158,7 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
         </Stepper>
 
         {event.status === "PENDING" && event.payment_url && (
-          <div className="mt-4 flex items-center justify-center rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
+          <div className="mt-4 flex flex-col items-center justify-center gap-4 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
             <a
               href={event.payment_url}
               target="_blank"
@@ -164,6 +167,14 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
             >
               Click here to complete your payment →
             </a>
+            <Button
+              className="cursor-pointer"
+              onClick={() => {
+                checkPaymentStatus({ transaction_no: event.transaction_no });
+              }}
+            >
+              Check Payment
+            </Button>
           </div>
         )}
       </div>
diff --git a/src/features/events/hooks/useRegistEvent.tsx b/src/features/events/hooks/useRegistEvent.tsx
@@ -4,9 +4,13 @@ import { toast } from "sonner";
 import { uploadsService } from "@/services/uploads";
 import { eventsService } from "@/services/events";
 import { EventType, RegistrationForm } from "@/domains/Events";
+import { useMutation } from "@tanstack/react-query";
+import { useDialog } from "@/contexts";
+import EventCheckStatusModal from "../components/EventCheckStatusModal";
 
-export const useRegistEvent = (data: EventType) => {
+export const useRegistEvent = (data?: EventType) => {
   const t = useTranslations("EventsPage");
+  const { openDialog } = useDialog();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [nameImage, setNameImage] = useState<string | null>("");
   // const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
@@ -63,5 +67,17 @@ export const useRegistEvent = (data: EventType) => {
     }
   };
 
-  return { registEvent, isLoading };
+  const { mutate: checkPaymentStatus } = useMutation({
+    mutationKey: ["checkPaymentStatus"],
+    mutationFn: async ({ transaction_no }: { transaction_no: string }) =>
+      eventsService.checkPaymentStatus(transaction_no),
+    onSuccess: (data) => {
+      openDialog({
+        content: <EventCheckStatusModal status={data?.data?.status} transaction_no={data?.data?.transaction_no} />,
+        size: "sm",
+      });
+    },
+  });
+
+  return { registEvent, isLoading, checkPaymentStatus };
 };
diff --git a/src/features/events/types/userEvent.ts b/src/features/events/types/userEvent.ts
@@ -66,6 +66,7 @@ export interface UserEventResponse {
   user_id: string;
   image_proof_payment: string;
   payment_url: string;
+  transaction_no: string;
   payment_date: string | null;
   status: "PENDING" | "SUCCESS" | "FAILED";
   created_at: string;
diff --git a/src/services/events/index.ts b/src/services/events/index.ts
@@ -1,6 +1,12 @@
 import { HttpResponse } from "@/types/http";
 import { fetcher } from "../instance";
-import { AdminEventResponseType, CreateEventPayload, EventType, RegistrationForm } from "@/domains/Events";
+import {
+  AdminEventResponseType,
+  CheckPaymentResponse,
+  CreateEventPayload,
+  EventType,
+  RegistrationForm,
+} from "@/domains/Events";
 import { UserEventResponse } from "@/features/events/types/userEvent";
 
 export const eventsService = {
@@ -77,4 +83,8 @@ export const eventsService = {
   async updateEventAdmin(id: string, payload: CreateEventPayload): Promise<HttpResponse<null>> {
     return fetcher.put(`/admin/events/${id}`, payload);
   },
+
+  async checkPaymentStatus(transaction_no: string): Promise<HttpResponse<CheckPaymentResponse>> {
+    return fetcher.get(`/transactions/${transaction_no}/status`);
+  },
 };
