@reeboot/strapi-payment-plugin 0.0.4 → 0.0.6

package/dist/_chunks/{Payments-DSDJ-HWm.mjs → Payments-FnhoV_2B.mjs}

@@ -1,14 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Dialog, Typography, Flex, Box, Button, TextInput, Textarea, Alert, Divider, Loader, EmptyStateLayout, Card, Grid, SingleSelect, SingleSelectOption, Table, Thead, Tr, Th, Tbody, Td, Pagination, Badge } from "@strapi/design-system";
+import { Modal, Typography, Flex, Box, Button, TextInput, SingleSelect, SingleSelectOption, Textarea, Alert, Grid, Divider, Table, Tbody, Tr, Td, Badge, Loader, EmptyStateLayout, Card, Pagination } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-DS_PYNkf.mjs";
+import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
+import { P as PaymentList } from "./PaymentList-B0CAzInT.mjs";
 const RefundModal = ({ payment, onClose, onSuccess }) => {
   const { formatMessage } = useIntl();
   const { post } = useFetchClient();
   const [refundAmount, setRefundAmount] = useState(payment.amount);
-  const [reason, setReason] = useState("");
+  const [reason, setReason] = useState("requested_by_customer");
+  const [notes, setNotes] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const formatCurrency = (amount, currency = "usd") => {
@@ -31,7 +33,10 @@ const RefundModal = ({ payment, onClose, onSuccess }) => {
       }
       const { data } = await post(`/${PLUGIN_ID}/admin/payments/${payment.id}/refund`, {
         amount: refundAmount,
-        reason: reason || "Requested by customer"
+        reason,
+        metadata: {
+          admin_notes: notes
+        }
       });
       if (data.success) {
         onSuccess();
@@ -45,28 +50,28 @@ const RefundModal = ({ payment, onClose, onSuccess }) => {
     }
   };
   const handlePartialRefund = (percentage) => {
-    setRefundAmount(Math.round(payment.amount * percentage / 100));
+    setRefundAmount(parseFloat((payment.amount * (percentage / 100)).toFixed(2)));
   };
   const handleFullRefund = () => {
     setRefundAmount(payment.amount);
   };
-  return /* @__PURE__ */ jsxs(Dialog, { onClose, title: formatMessage({ id: "payment-plugin.refund.title", defaultMessage: "Process Refund" }), children: [
-    /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: formatMessage({ id: "payment-plugin.refund.header", defaultMessage: "Process Refund" }) }) }),
-    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+  return /* @__PURE__ */ jsx(Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({ id: "payment-plugin.refund.title", defaultMessage: "Process Refund" }) }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: formatMessage({ id: "payment-plugin.refund.paymentInfo", defaultMessage: "Payment Information" }) }),
         /* @__PURE__ */ jsxs(Box, { marginTop: 2, children: [
-          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", display: "block", children: [
             formatMessage({ id: "payment-plugin.refund.customer", defaultMessage: "Customer" }),
             ": ",
             payment.customerEmail
           ] }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", display: "block", children: [
             formatMessage({ id: "payment-plugin.refund.originalAmount", defaultMessage: "Original Amount" }),
             ": ",
             formatCurrency(payment.amount, payment.currency)
           ] }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", display: "block", children: [
             formatMessage({ id: "payment-plugin.refund.description", defaultMessage: "Description" }),
             ": ",
             payment.description || "N/A"
@@ -74,77 +79,165 @@ const RefundModal = ({ payment, onClose, onSuccess }) => {
         ] })
       ] }),
       /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", marginBottom: 2, children: formatMessage({ id: "payment-plugin.refund.quickOptions", defaultMessage: "Quick Options" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", marginBottom: 2, display: "block", children: formatMessage({ id: "payment-plugin.refund.quickOptions", defaultMessage: "Quick Options" }) }),
         /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
           /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleFullRefund, children: formatMessage({ id: "payment-plugin.refund.full", defaultMessage: "Full Refund" }) }),
           /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => handlePartialRefund(50), children: formatMessage({ id: "payment-plugin.refund.half", defaultMessage: "50% Refund" }) }),
           /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => handlePartialRefund(25), children: formatMessage({ id: "payment-plugin.refund.quarter", defaultMessage: "25% Refund" }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            label: formatMessage({ id: "payment-plugin.refund.amount", defaultMessage: "Refund Amount" }),
-            placeholder: formatCurrency(payment.amount, payment.currency),
-            value: (refundAmount / 100).toString(),
-            onChange: (e) => {
-              const value = parseFloat(e.target.value) || 0;
-              setRefundAmount(Math.round(value * 100));
-            },
-            hint: formatMessage(
-              { id: "payment-plugin.refund.maxAmount", defaultMessage: "Maximum: {amount}" },
-              { amount: formatCurrency(payment.amount, payment.currency) }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", textColor: "neutral600", marginTop: 1, children: [
-          formatMessage({ id: "payment-plugin.refund.inCents", defaultMessage: "Amount in cents" }),
-          ": ",
-          refundAmount
-        ] })
-      ] }),
       /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-        Textarea,
+        TextInput,
+        {
+          label: formatMessage({ id: "payment-plugin.refund.amount", defaultMessage: "Refund Amount" }),
+          placeholder: formatCurrency(payment.amount, payment.currency),
+          step: "0.01",
+          value: refundAmount.toString(),
+          onChange: (e) => {
+            const value = parseFloat(e.target.value) || 0;
+            setRefundAmount(value);
+          },
+          hint: formatMessage(
+            { id: "payment-plugin.refund.maxAmount", defaultMessage: "Maximum: {amount}" },
+            { amount: formatCurrency(payment.amount, payment.currency) }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+        SingleSelect,
         {
-          label: formatMessage({ id: "payment-plugin.refund.reason", defaultMessage: "Reason (Optional)" }),
-          placeholder: formatMessage({ id: "payment-plugin.refund.reasonPlaceholder", defaultMessage: "Reason for refund..." }),
+          label: formatMessage({ id: "payment-plugin.refund.reason", defaultMessage: "Reason" }),
           value: reason,
-          onChange: (e) => setReason(e.target.value),
+          onChange: (value) => setReason(value),
+          children: [
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "requested_by_customer", children: formatMessage({ id: "payment-plugin.refund.reason.requested", defaultMessage: "Requested by customer" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "duplicate", children: formatMessage({ id: "payment-plugin.refund.reason.duplicate", defaultMessage: "Duplicate" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "fraudulent", children: formatMessage({ id: "payment-plugin.refund.reason.fraudulent", defaultMessage: "Fraudulent" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: formatMessage({ id: "payment-plugin.refund.notes", defaultMessage: "Internal Notes (Optional)" }),
+          placeholder: formatMessage({ id: "payment-plugin.refund.notesPlaceholder", defaultMessage: "Additional details about this refund..." }),
+          value: notes,
+          onChange: (e) => setNotes(e.target.value),
           rows: 3
         }
       ) }),
-      error && /* @__PURE__ */ jsx(Alert, { severity: "danger", title: formatMessage({ id: "payment-plugin.refund.error", defaultMessage: "Error" }), children: error }),
-      /* @__PURE__ */ jsx(Alert, { severity: "warning", title: formatMessage({ id: "payment-plugin.refund.warning", defaultMessage: "Warning" }), children: formatMessage({
+      error && /* @__PURE__ */ jsx(Alert, { variant: "danger", title: formatMessage({ id: "payment-plugin.refund.error", defaultMessage: "Error" }), children: error }),
+      /* @__PURE__ */ jsx(Alert, { variant: "warning", title: formatMessage({ id: "payment-plugin.refund.warning", defaultMessage: "Warning" }), children: formatMessage({
         id: "payment-plugin.refund.warningMessage",
         defaultMessage: "This action cannot be undone. The refund will be processed immediately."
       }) })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog.Footer, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, disabled: loading, children: formatMessage({ id: "payment-plugin.refund.cancel", defaultMessage: "Cancel" }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, disabled: loading, children: formatMessage({ id: "payment-plugin.refund.cancel", defaultMessage: "Cancel" }) }),
       /* @__PURE__ */ jsx(
         Button,
         {
-          variant: "danger",
+          variant: "danger-light",
           onClick: handleSubmit,
           disabled: loading || refundAmount <= 0 || refundAmount > payment.amount,
           loading,
           children: formatMessage({ id: "payment-plugin.refund.submit", defaultMessage: "Process Refund" })
         }
       )
-    ] }) })
-  ] });
+    ] })
+  ] }) });
 };
 const PaymentCard = ({ payment, onClose }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsxs(Dialog, { onClose, title: formatMessage({ id: "payment-plugin.paymentDetails.title", defaultMessage: "Payment Details" }), children: [
-    /* @__PURE__ */ jsx(Dialog.Header, {}),
-    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
-      /* @__PURE__ */ jsx(Box, {}),
+  console.log("Payment:", payment);
+  const formatCurrency = (amount, currency = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  };
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  };
+  const getStatusBadge = (status) => {
+    const statusConfig = {
+      succeeded: { color: "success", label: "Success" },
+      pending: { color: "warning", label: "Pending" },
+      failed: { color: "danger", label: "Failed" },
+      refunded: { color: "info", label: "Refunded" },
+      canceled: { color: "neutral", label: "Canceled" }
+    };
+    const config = statusConfig[status] || statusConfig.pending;
+    return /* @__PURE__ */ jsx(Badge, { size: "M", backgroundColor: config.color, children: config.label });
+  };
+  return /* @__PURE__ */ jsx(Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({ id: "payment-plugin.paymentDetails.title", defaultMessage: "Payment Details" }) }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", marginBottom: 3, children: formatMessage({ id: "payment-plugin.paymentDetails.basicInfo", defaultMessage: "Basic Information" }) }),
+        /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.paymentDetails.customer", defaultMessage: "Customer" }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "epsilon", fontWeight: "bold", display: "block", children: payment.customerName || "Unknown" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: payment.customerEmail })
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.paymentDetails.amount", defaultMessage: "Amount" }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", display: "block", children: formatCurrency(payment.amount, payment.currency) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.paymentDetails.status", defaultMessage: "Status" }) }),
+            /* @__PURE__ */ jsx(Box, { marginTop: 1, children: getStatusBadge(payment.payment_status) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.paymentDetails.paymentMethod", defaultMessage: "Payment Method" }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "epsilon", display: "block", children: formatMessage({
+              id: `payment-plugin.paymentDetails.${payment.payment_method}`,
+              defaultMessage: payment.payment_method
+            }) })
+          ] }) })
+        ] })
+      ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(Box, {})
-    ] }) })
-  ] });
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", marginBottom: 3, children: formatMessage({ id: "payment-plugin.paymentDetails.transaction", defaultMessage: "Transaction Details" }) }),
+        /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs(Tbody, { children: [
+          /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatMessage({ id: "payment-plugin.paymentDetails.stripeId", defaultMessage: "Stripe Payment ID" }) }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontFamily: "monospace", children: payment.stripe_payment_intent_id }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatMessage({ id: "payment-plugin.paymentDetails.createdAt", defaultMessage: "Created At" }) }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatDate(payment.createdAt) }) })
+          ] }),
+          payment.orderId && /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatMessage({ id: "payment-plugin.paymentDetails.orderId", defaultMessage: "Order ID" }) }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontFamily: "monospace", children: payment.orderId }) })
+          ] })
+        ] }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: "Close" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            navigator.clipboard.writeText(payment.stripe_payment_intent_id || "");
+            alert("Copied to clipboard");
+          },
+          children: "Copy Stripe ID"
+        }
+      )
+    ] })
+  ] }) });
 };
 const Payments = () => {
   const { formatMessage } = useIntl();
@@ -156,11 +249,12 @@ const Payments = () => {
   const [selectedPayment, setSelectedPayment] = useState(null);
   const [showRefundModal, setShowRefundModal] = useState(false);
   const [showPaymentCard, setShowPaymentCard] = useState(false);
+  console.log("payments:", payments);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(25);
   const [totalCount, setTotalCount] = useState(0);
   const [filters, setFilters] = useState({
-    status: "",
+    payment_status: "",
     paymentMethod: "",
     dateRange: { from: null, to: null },
     search: "",
@@ -178,21 +272,15 @@ const Payments = () => {
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         pageSize: pageSize.toString(),
-        ...filters.status && { status: filters.status }
+        ...filters.payment_status && { payment_status: filters.payment_status }
       });
       const { data } = await get(`/${PLUGIN_ID}/admin/payments?${queryParams}`);
       if (data.success && data.data) {
         const formattedPayments = data.data.map((p) => ({
+          ...p,
           id: p.documentId,
-          stripePaymentId: p.stripe_payment_intent_id,
-          amount: p.amount,
-          currency: p.currency,
-          status: p.status,
           customerEmail: p.customer?.email || "N/A",
-          customerName: p.customer ? `${p.customer.firstName || ""} ${p.customer.lastName || ""}`.trim() : "N/A",
-          paymentMethod: p.payment_method || "N/A",
-          createdAt: p.createdAt,
-          updatedAt: p.updatedAt,
+          customerName: p.customer ? `${p.customer.first_name || ""} ${p.customer.last_name || ""}`.trim() : "N/A",
           orderId: p.order?.documentId
         }));
         setPayments(formattedPayments);
@@ -209,14 +297,14 @@ const Payments = () => {
     if (filters.search) {
       const searchLower = filters.search.toLowerCase();
       filtered = filtered.filter(
-        (payment) => payment.customerEmail.toLowerCase().includes(searchLower) || payment.customerName?.toLowerCase().includes(searchLower) || payment.stripePaymentId.toLowerCase().includes(searchLower) || payment.description?.toLowerCase().includes(searchLower)
+        (payment) => payment.customerEmail.toLowerCase().includes(searchLower) || payment.customerName?.toLowerCase().includes(searchLower) || payment.stripe_payment_intent_id && payment.stripe_payment_intent_id.toLowerCase().includes(searchLower) || payment.description?.toLowerCase().includes(searchLower)
       );
     }
-    if (filters.status) {
-      filtered = filtered.filter((payment) => payment.status === filters.status);
+    if (filters.payment_status) {
+      filtered = filtered.filter((payment) => payment.payment_status === filters.payment_status);
     }
     if (filters.paymentMethod) {
-      filtered = filtered.filter((payment) => payment.paymentMethod === filters.paymentMethod);
+      filtered = filtered.filter((payment) => payment.payment_method === filters.paymentMethod);
     }
     if (filters.currency) {
       filtered = filtered.filter((payment) => payment.currency === filters.currency);
@@ -233,12 +321,6 @@ const Payments = () => {
     }
     setFilteredPayments(filtered);
   };
-  const formatCurrency = (amount, currency = "usd") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.toUpperCase()
-    }).format(amount);
-  };
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -248,17 +330,6 @@ const Payments = () => {
       minute: "2-digit"
     });
   };
-  const getStatusBadge = (status) => {
-    const statusConfig = {
-      succeeded: { color: "success", label: "Success" },
-      pending: { color: "warning", label: "Pending" },
-      failed: { color: "danger", label: "Failed" },
-      refunded: { color: "info", label: "Refunded" },
-      canceled: { color: "neutral", label: "Canceled" }
-    };
-    const config = statusConfig[status] || statusConfig.pending;
-    return /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: config.color, children: config.label });
-  };
   const handleRefund = (payment) => {
     setSelectedPayment(payment);
     setShowRefundModal(true);
@@ -273,7 +344,7 @@ const Payments = () => {
   };
   const clearFilters = () => {
     setFilters({
-      status: "",
+      payment_status: "",
       paymentMethod: "",
       dateRange: { from: null, to: null },
       search: "",
@@ -286,12 +357,12 @@ const Payments = () => {
       ["ID", "Stripe Payment ID", "Customer Email", "Amount", "Currency", "Status", "Payment Method", "Date"],
       ...filteredPayments.map((payment) => [
         payment.id,
-        payment.stripePaymentId,
-        payment.customerEmail,
-        (payment.amount / 100).toString(),
+        payment.stripe_payment_intent_id || "",
+        payment.customerEmail || "",
+        payment.amount.toString(),
         payment.currency,
-        payment.status,
-        payment.paymentMethod,
+        payment.payment_status,
+        payment.payment_method || "",
         formatDate(payment.createdAt)
       ])
     ].map((row) => row.join(",")).join("\n");
@@ -320,7 +391,7 @@ const Payments = () => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+  return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.payments.title", defaultMessage: "Payments" }) }),
@@ -331,7 +402,7 @@ const Payments = () => {
       ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: exportPayments, children: formatMessage({ id: "payment-plugin.payments.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.payments.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsx(Button, { onClick: () => fetchPayments(), children: formatMessage({ id: "payment-plugin.payments.refresh", defaultMessage: "Refresh" }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
@@ -353,8 +424,8 @@ const Payments = () => {
             id: "payment-plugin.payments.status.placeholder",
             defaultMessage: "All Statuses"
           }),
-          value: filters.status,
-          onChange: (value) => handleFilterChange("status", value),
+          value: filters.payment_status,
+          onChange: (value) => handleFilterChange("payment_status", value),
           children: [
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.payments.all", defaultMessage: "All" }) }),
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "succeeded", children: formatMessage({ id: "payment-plugin.payments.succeeded", defaultMessage: "Succeeded" }) }),
@@ -408,47 +479,15 @@ const Payments = () => {
         total: filteredPayments.length
       }
     ) }) }),
-    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.customer", defaultMessage: "Customer" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.amount", defaultMessage: "Amount" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.status", defaultMessage: "Status" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.method", defaultMessage: "Method" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.date", defaultMessage: "Date" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.actions", defaultMessage: "Actions" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(Tbody, { children: paginatedPayments.map((payment) => /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: payment.customerName || "Unknown -" }),
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: payment.customerEmail })
-        ] }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(payment.amount, payment.currency) }) }),
-        /* @__PURE__ */ jsx(Td, { children: getStatusBadge(payment.status) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage({
-          id: `payment-plugin.payments.${payment.paymentMethod}`,
-          defaultMessage: payment.paymentMethod
-        }) }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatDate(payment.createdAt) }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              onClick: () => handleViewDetails(payment),
-              startIcon: /* @__PURE__ */ jsx("span", { children: "👁️" }),
-              children: formatMessage({ id: "payment-plugin.payments.view", defaultMessage: "View details" })
-            }
-          ),
-          payment.status === "succeeded" && /* @__PURE__ */ jsx(
-            Button,
-            {
-              onClick: () => handleRefund(payment),
-              startIcon: /* @__PURE__ */ jsx("span", { children: "💸" }),
-              children: formatMessage({ id: "payment-plugin.payments.refund", defaultMessage: "Refund" })
-            }
-          )
-        ] }) })
-      ] }, payment.id)) })
-    ] }) }) }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
+      PaymentList,
+      {
+        payments: paginatedPayments,
+        onPaymentClick: (payment) => handleViewDetails(payment),
+        onRefund: (payment) => handleRefund(payment),
+        onViewDetails: (payment) => handleViewDetails(payment)
+      }
+    ) }),
     totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
       Pagination,
       {