feat: handling expired status payments

mpsalunggg · mpsalunggg · commit 9f851e8af380 · 2025-11-09T23:46:31.000+07:00
diff --git a/src/features/events/components/ColumnsUserEventList.tsx b/src/features/events/components/ColumnsUserEventList.tsx
@@ -33,7 +33,8 @@ export const columnsUserEventList: ColumnDef<UserEventResponse>[] = [
     header: "Status",
     cell: ({ row }) => {
       const status = row.original.status;
-      const variant = status === "SUCCESS" ? "open" : status === "PENDING" ? "soon" : "closed";
+      const variant =
+        status === "SUCCESS" ? "open" : status === "PENDING" ? "soon" : status === "EXPIRED" ? "closed" : "closed";
       return (
         <div>
           <Badge variant={variant}>{status}</Badge>
diff --git a/src/features/events/components/EventCheckStatusModal.tsx b/src/features/events/components/EventCheckStatusModal.tsx
@@ -1,39 +1,178 @@
 import { Button } from "@/components/ui/Button";
 import { useDialog } from "@/contexts";
-import { Check, CreditCard, HelpCircle } from "lucide-react";
-import { ReactNode } from "react";
+import { Check, CreditCard, HelpCircle, X, AlertCircle, RefreshCcw } from "lucide-react";
+import { ReactNode, useEffect } from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
 
 type Props = {
   status?: string;
   transaction_no?: string;
+  onRefresh?: () => void;
 };
 
-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" />,
+type StatusConfig = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  bgColor: string;
+  textColor: string;
+  borderColor: string;
+  action: "close" | "refresh" | "none";
+  autoClose?: number;
 };
 
-const EventCheckStatusModal = ({ status = "", transaction_no = "" }: Props) => {
+const statusConfigMap: Record<string, StatusConfig> = {
+  SUCCESS: {
+    icon: <Check className="h-16 w-16" />,
+    title: "Payment Successful!",
+    description: "Your payment has been confirmed. You're all set for the event!",
+    bgColor: "bg-green-50 dark:bg-green-950/20",
+    textColor: "text-green-600 dark:text-green-400",
+    borderColor: "border-green-200 dark:border-green-800",
+    action: "close",
+    autoClose: 3000,
+  },
+  PENDING: {
+    icon: <CreditCard className="h-16 w-16" />,
+    title: "Payment Pending",
+    description: "Your payment is still being processed. Please wait a moment and check again.",
+    bgColor: "bg-yellow-50 dark:bg-yellow-950/20",
+    textColor: "text-yellow-600 dark:text-yellow-500",
+    borderColor: "border-yellow-200 dark:border-yellow-800",
+    action: "refresh",
+  },
+  FAILED: {
+    icon: <X className="h-16 w-16" />,
+    title: "Payment Failed",
+    description: "Your payment could not be processed. Please try again or contact support.",
+    bgColor: "bg-red-50 dark:bg-red-950/20",
+    textColor: "text-red-600 dark:text-red-400",
+    borderColor: "border-red-200 dark:border-red-800",
+    action: "close",
+  },
+  EXPIRED: {
+    icon: <AlertCircle className="h-16 w-16" />,
+    title: "Payment Expired",
+    description: "Your payment link has expired. Please register again to get a new payment link.",
+    bgColor: "bg-orange-50 dark:bg-orange-950/20",
+    textColor: "text-orange-600 dark:text-orange-400",
+    borderColor: "border-orange-200 dark:border-orange-800",
+    action: "close",
+  },
+};
+
+const EventCheckStatusModal = ({ status = "", transaction_no = "", onRefresh }: Props) => {
   const { closeDialog } = useDialog();
 
-  const icon = statusIconMap[status] ?? <HelpCircle className="h-20 w-20 text-gray-400" />;
+  const config =
+    statusConfigMap[status.toUpperCase()] ||
+    ({
+      icon: <HelpCircle className="h-16 w-16" />,
+      title: "Unknown Status",
+      description: "We couldn't determine the payment status. Please try again later.",
+      bgColor: "bg-gray-50 dark:bg-gray-950/20",
+      textColor: "text-gray-600 dark:text-gray-400",
+      borderColor: "border-gray-200 dark:border-gray-800",
+      action: "close",
+    } as StatusConfig);
+
+  useEffect(() => {
+    if (config.autoClose && status.toUpperCase() === "SUCCESS") {
+      const timer = setTimeout(() => {
+        closeDialog();
+        onRefresh?.();
+      }, config.autoClose);
+
+      return () => clearTimeout(timer);
+    }
+  }, [config.autoClose, status, closeDialog, onRefresh]);
+
+  const handleAction = () => {
+    if (config.action === "refresh" && onRefresh) {
+      closeDialog();
+      setTimeout(() => {
+        onRefresh();
+      }, 300);
+    } else {
+      closeDialog();
+      if (status.toUpperCase() === "SUCCESS") {
+        onRefresh?.();
+      }
+    }
+  };
 
   return (
-    <div className="flex flex-col items-center justify-center gap-6 py-8 text-center">
-      {icon}
+    <div className="flex flex-col items-center justify-center gap-6 py-6 text-center">
+      <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", duration: 0.5, bounce: 0.4 }}
+        className={cn(
+          "flex items-center justify-center rounded-full p-6",
+          config.bgColor,
+          config.borderColor,
+          "border-2"
+        )}
+      >
+        <motion.div
+          initial={{ rotate: 0 }}
+          animate={{ rotate: [0, 10, -10, 0] }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className={config.textColor}
+        >
+          {config.icon}
+        </motion.div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.2 }}
+        className="space-y-2"
+      >
+        <h3 className="text-xl font-bold">{config.title}</h3>
+        <p className="text-muted-foreground mx-auto max-w-sm text-sm">{config.description}</p>
 
-      <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 className={cn("mt-4 rounded-lg border p-3", config.borderColor, config.bgColor)}>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Transaction Number</p>
+            <p className={cn("font-mono text-sm font-semibold", config.textColor)}>{transaction_no}</p>
+          </div>
+        )}
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0.4 }}
+        className="flex w-full gap-3"
+      >
+        {config.action === "refresh" && (
+          <Button variant="outline" className="flex-1" onClick={handleAction}>
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            Check Again
+          </Button>
         )}
-      </div>
+        <Button
+          variant={status.toUpperCase() === "SUCCESS" ? "default" : "outline"}
+          className={cn("flex-1", status.toUpperCase() === "SUCCESS" && "bg-green-600 hover:bg-green-700")}
+          onClick={handleAction}
+        >
+          {status.toUpperCase() === "SUCCESS" ? "Great!" : "Close"}
+        </Button>
+      </motion.div>
 
-      <Button variant="outline" onClick={closeDialog}>
-        Kembali
-      </Button>
+      {status.toUpperCase() === "SUCCESS" && config.autoClose && (
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.5 }}
+          className="text-muted-foreground text-xs"
+        >
+          This dialog will close automatically in 3 seconds...
+        </motion.p>
+      )}
     </div>
   );
 };
diff --git a/src/features/events/components/EventDetailModal.tsx b/src/features/events/components/EventDetailModal.tsx
@@ -11,7 +11,7 @@ import {
   StepperDescription,
 } from "@/components/ui/Stepper";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
-import { Check, X, UserCheck, CreditCard, CheckCircle2, Calendar, User } from "lucide-react";
+import { Check, X, UserCheck, CreditCard, CheckCircle2, Calendar, User, AlertCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/Button";
 import { useRegistEvent } from "../hooks/useRegistEvent";
@@ -22,11 +22,12 @@ interface EventDetailModalProps {
 
 export const EventDetailModal = ({ event }: EventDetailModalProps) => {
   const { event_detail, user_detail } = event;
-  const { checkPaymentStatus } = useRegistEvent();
+  const { checkPaymentStatus, isCheckingPayment } = useRegistEvent();
 
   const getActiveStep = () => {
     if (event.status === "SUCCESS") return 3;
     if (event.status === "FAILED") return 3;
+    if (event.status === "EXPIRED") return 3;
     if (event.status === "PENDING") return 2;
     return 1;
   };
@@ -116,14 +117,18 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
                       event.status === "SUCCESS"
                         ? "text-white data-[state=completed]:bg-green-500"
                         : event.status === "FAILED"
-                          ? "bg-red-500 text-white"
-                          : "bg-black text-white"
+                          ? "!bg-red-500 text-white"
+                          : event.status === "EXPIRED"
+                            ? "!bg-red-500 text-white"
+                            : "bg-black text-white"
                     }`}
                   >
                     {event.status === "SUCCESS" ? (
                       <Check className="h-5 w-5" />
                     ) : event.status === "FAILED" ? (
                       <X className="h-5 w-5" />
+                    ) : event.status === "EXPIRED" ? (
+                      <AlertCircle className="h-5 w-5" />
                     ) : (
                       <CheckCircle2 className="h-5 w-5" />
                     )}
@@ -135,7 +140,9 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
                         ? "Payment Success"
                         : event.status === "FAILED"
                           ? "Payment Failed"
-                          : "On Pending"}
+                          : event.status === "EXPIRED"
+                            ? "Payment Expired"
+                            : "On Pending"}
                     </span>
                   </div>
                 </StepperTrigger>
@@ -146,10 +153,18 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
                         ? "bg-green-500/10 text-green-500"
                         : event.status === "FAILED"
                           ? "bg-red-500/10 text-red-500"
-                          : "bg-gray-500/10 text-gray-500 dark:text-gray-400"
+                          : event.status === "EXPIRED"
+                            ? "bg-red-500/10 text-red-500"
+                            : "bg-gray-500/10 text-gray-500 dark:text-gray-400"
                     }`}
                   >
-                    {event.status === "SUCCESS" ? "Completed" : event.status === "FAILED" ? "Failed" : "Pending"}
+                    {event.status === "SUCCESS"
+                      ? "Completed"
+                      : event.status === "FAILED"
+                        ? "Failed"
+                        : event.status === "EXPIRED"
+                          ? "Expired"
+                          : "Pending"}
                   </span>
                 </StepperDescription>
               </div>
@@ -159,21 +174,32 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
 
         {event.status === "PENDING" && event.payment_url && (
           <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"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
-            >
-              Click here to complete your payment →
-            </a>
+            <div className="flex flex-col items-center gap-2">
+              <p className="text-sm font-medium text-blue-900 dark:text-blue-100">Complete Your Payment</p>
+              <a
+                href={event.payment_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+              >
+                Click here to open payment page →
+              </a>
+            </div>
             <Button
-              className="cursor-pointer"
+              className="w-full cursor-pointer"
               onClick={() => {
                 checkPaymentStatus({ transaction_no: event.transaction_no });
               }}
+              disabled={isCheckingPayment}
             >
-              Check Payment
+              {isCheckingPayment ? (
+                <>
+                  <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                  Checking...
+                </>
+              ) : (
+                "Check Payment Status"
+              )}
             </Button>
           </div>
         )}
diff --git a/src/features/events/hooks/useRegistEvent.tsx b/src/features/events/hooks/useRegistEvent.tsx
@@ -4,13 +4,14 @@ 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 { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "@/contexts";
 import EventCheckStatusModal from "../components/EventCheckStatusModal";
 
 export const useRegistEvent = (data?: EventType) => {
   const t = useTranslations("EventsPage");
-  const { openDialog } = useDialog();
+  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);
@@ -67,17 +68,45 @@ export const useRegistEvent = (data?: EventType) => {
     }
   };
 
-  const { mutate: checkPaymentStatus } = useMutation({
+  const { mutate: checkPaymentStatus, isPending: isCheckingPayment } = useMutation({
     mutationKey: ["checkPaymentStatus"],
     mutationFn: async ({ transaction_no }: { transaction_no: string }) =>
       eventsService.checkPaymentStatus(transaction_no),
-    onSuccess: (data) => {
+    onSuccess: (data, variables) => {
+      const paymentStatus = data?.data?.status;
+
       openDialog({
-        content: <EventCheckStatusModal status={data?.data?.status} transaction_no={data?.data?.transaction_no} />,
+        content: (
+          <EventCheckStatusModal
+            status={paymentStatus}
+            transaction_no={data?.data?.transaction_no}
+            onRefresh={() => {
+              closeDialog();
+              setTimeout(() => {
+                checkPaymentStatus({ transaction_no: variables.transaction_no });
+              }, 300);
+            }}
+          />
+        ),
         size: "sm",
       });
+
+      queryClient.invalidateQueries({ queryKey: ["getListMyEvents"] });
+
+      if (paymentStatus?.toUpperCase() === "SUCCESS") {
+        setTimeout(() => {
+          toast.success("Payment verified!", {
+            description: "Your event registration is now confirmed.",
+          });
+        }, 3500);
+      }
+    },
+    onError: () => {
+      toast.error("Failed to check payment status", {
+        description: "Please try again later or contact support if the problem persists.",
+      });
     },
   });
 
-  return { registEvent, isLoading, checkPaymentStatus };
+  return { registEvent, isLoading, checkPaymentStatus, isCheckingPayment };
 };
diff --git a/src/features/events/types/userEvent.ts b/src/features/events/types/userEvent.ts
