@reeboot/strapi-payment-plugin 0.0.1 → 0.0.2

package/dist/_chunks/Payments-CIMyOC3n.js

@@ -0,0 +1,489 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const reactIntl = require("react-intl");
+const admin = require("@strapi/strapi/admin");
+const index = require("./index-BTk7a2T5.js");
+const RefundModal = ({ payment, onClose, onSuccess }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { post } = admin.useFetchClient();
+  const [refundAmount, setRefundAmount] = React.useState(payment.amount);
+  const [reason, setReason] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const formatCurrency = (amount, currency = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  };
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      if (refundAmount <= 0) {
+        setError("Refund amount must be greater than 0");
+        return;
+      }
+      if (refundAmount > payment.amount) {
+        setError("Refund amount cannot exceed the original payment amount");
+        return;
+      }
+      const { data } = await post(`/${index.PLUGIN_ID}/admin/payments/${payment.id}/refund`, {
+        amount: refundAmount,
+        reason: reason || "Requested by customer"
+      });
+      if (data.success) {
+        onSuccess();
+      } else {
+        throw new Error(data.error?.message || "Failed to process refund");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handlePartialRefund = (percentage) => {
+    setRefundAmount(Math.round(payment.amount * percentage / 100));
+  };
+  const handleFullRefund = () => {
+    setRefundAmount(payment.amount);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog, { onClose, title: formatMessage({ id: "payment-plugin.refund.title", defaultMessage: "Process Refund" }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", children: formatMessage({ id: "payment-plugin.refund.header", defaultMessage: "Process Refund" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: formatMessage({ id: "payment-plugin.refund.paymentInfo", defaultMessage: "Payment Information" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginTop: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "epsilon", children: [
+            formatMessage({ id: "payment-plugin.refund.customer", defaultMessage: "Customer" }),
+            ": ",
+            payment.customerEmail
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "epsilon", children: [
+            formatMessage({ id: "payment-plugin.refund.originalAmount", defaultMessage: "Original Amount" }),
+            ": ",
+            formatCurrency(payment.amount, payment.currency)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "epsilon", children: [
+            formatMessage({ id: "payment-plugin.refund.description", defaultMessage: "Description" }),
+            ": ",
+            payment.description || "N/A"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", marginBottom: 2, children: formatMessage({ id: "payment-plugin.refund.quickOptions", defaultMessage: "Quick Options" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: handleFullRefund, children: formatMessage({ id: "payment-plugin.refund.full", defaultMessage: "Full Refund" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => handlePartialRefund(50), children: formatMessage({ id: "payment-plugin.refund.half", defaultMessage: "50% Refund" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => handlePartialRefund(25), children: formatMessage({ id: "payment-plugin.refund.quarter", defaultMessage: "25% Refund" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", marginTop: 1, children: [
+          formatMessage({ id: "payment-plugin.refund.inCents", defaultMessage: "Amount in cents" }),
+          ": ",
+          refundAmount
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Textarea,
+        {
+          label: formatMessage({ id: "payment-plugin.refund.reason", defaultMessage: "Reason (Optional)" }),
+          placeholder: formatMessage({ id: "payment-plugin.refund.reasonPlaceholder", defaultMessage: "Reason for refund..." }),
+          value: reason,
+          onChange: (e) => setReason(e.target.value),
+          rows: 3
+        }
+      ) }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { severity: "danger", title: formatMessage({ id: "payment-plugin.refund.error", defaultMessage: "Error" }), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { severity: "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__ */ jsxRuntime.jsx(designSystem.Dialog.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: onClose, disabled: loading, children: formatMessage({ id: "payment-plugin.refund.cancel", defaultMessage: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "danger",
+          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 } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog, { onClose, title: formatMessage({ id: "payment-plugin.paymentDetails.title", defaultMessage: "Payment Details" }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, {})
+    ] }) })
+  ] });
+};
+const Payments = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get } = admin.useFetchClient();
+  const [payments, setPayments] = React.useState([]);
+  const [filteredPayments, setFilteredPayments] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [selectedPayment, setSelectedPayment] = React.useState(null);
+  const [showRefundModal, setShowRefundModal] = React.useState(false);
+  const [showPaymentCard, setShowPaymentCard] = React.useState(false);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(25);
+  const [totalCount, setTotalCount] = React.useState(0);
+  const [filters, setFilters] = React.useState({
+    status: "",
+    paymentMethod: "",
+    dateRange: { from: null, to: null },
+    search: "",
+    currency: ""
+  });
+  React.useEffect(() => {
+    fetchPayments();
+  }, [currentPage, pageSize, filters]);
+  React.useEffect(() => {
+    applyFilters();
+  }, [payments, filters]);
+  const fetchPayments = async () => {
+    try {
+      setLoading(true);
+      const queryParams = new URLSearchParams({
+        page: currentPage.toString(),
+        pageSize: pageSize.toString(),
+        ...filters.status && { status: filters.status }
+      });
+      const { data } = await get(`/${index.PLUGIN_ID}/admin/payments?${queryParams}`);
+      if (data.success && data.data) {
+        const formattedPayments = data.data.map((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,
+          orderId: p.order?.documentId
+        }));
+        setPayments(formattedPayments);
+        setTotalCount(data.meta.pagination.total);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch payments");
+      setLoading(false);
+    }
+  };
+  const applyFilters = () => {
+    let filtered = [...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)
+      );
+    }
+    if (filters.status) {
+      filtered = filtered.filter((payment) => payment.status === filters.status);
+    }
+    if (filters.paymentMethod) {
+      filtered = filtered.filter((payment) => payment.paymentMethod === filters.paymentMethod);
+    }
+    if (filters.currency) {
+      filtered = filtered.filter((payment) => payment.currency === filters.currency);
+    }
+    if (filters.dateRange.from) {
+      filtered = filtered.filter(
+        (payment) => new Date(payment.createdAt) >= filters.dateRange.from
+      );
+    }
+    if (filters.dateRange.to) {
+      filtered = filtered.filter(
+        (payment) => new Date(payment.createdAt) <= filters.dateRange.to
+      );
+    }
+    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",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      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__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", backgroundColor: config.color, children: config.label });
+  };
+  const handleRefund = (payment) => {
+    setSelectedPayment(payment);
+    setShowRefundModal(true);
+  };
+  const handleViewDetails = (payment) => {
+    setSelectedPayment(payment);
+    setShowPaymentCard(true);
+  };
+  const handleFilterChange = (key, value) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+    setCurrentPage(1);
+  };
+  const clearFilters = () => {
+    setFilters({
+      status: "",
+      paymentMethod: "",
+      dateRange: { from: null, to: null },
+      search: "",
+      currency: ""
+    });
+    setCurrentPage(1);
+  };
+  const exportPayments = () => {
+    const csvContent = [
+      ["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.currency,
+        payment.status,
+        payment.paymentMethod,
+        formatDate(payment.createdAt)
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `payments-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedPayments = filteredPayments.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(filteredPayments.length / pageSize);
+  if (loading && payments.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.EmptyStateLayout,
+      {
+        title: "Error loading payments",
+        subtitle: error,
+        action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchPayments, children: formatMessage({ id: "payment-plugin.payments.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.payments.title", defaultMessage: "Payments" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.payments.subtitle",
+          defaultMessage: "Manage and monitor all payment transactions"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: exportPayments, children: formatMessage({ id: "payment-plugin.payments.export", defaultMessage: "Export" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.payments.refresh", defaultMessage: "Refresh" }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.payments.search.placeholder",
+            defaultMessage: "Search payments..."
+          }),
+          value: filters.search,
+          onChange: (e) => handleFilterChange("search", e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.payments.status.placeholder",
+            defaultMessage: "All Statuses"
+          }),
+          value: filters.status,
+          onChange: (value) => handleFilterChange("status", value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.payments.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "succeeded", children: formatMessage({ id: "payment-plugin.payments.succeeded", defaultMessage: "Succeeded" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "pending", children: formatMessage({ id: "payment-plugin.payments.pending", defaultMessage: "Pending" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "failed", children: formatMessage({ id: "payment-plugin.payments.failed", defaultMessage: "Failed" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "refunded", children: formatMessage({ id: "payment-plugin.payments.refunded", defaultMessage: "Refunded" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.payments.paymentMethod.placeholder",
+            defaultMessage: "All Payment Methods"
+          }),
+          value: filters.paymentMethod,
+          onChange: (value) => handleFilterChange("paymentMethod", value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.payments.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "card", children: formatMessage({ id: "payment-plugin.payments.card", defaultMessage: "Card" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "bank_transfer", children: formatMessage({ id: "payment-plugin.payments.bank_transfer", defaultMessage: "Bank Transfer" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "wallet", children: formatMessage({ id: "payment-plugin.payments.wallet", defaultMessage: "Wallet" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.payments.currency.placeholder",
+            defaultMessage: "All Currencies"
+          }),
+          value: filters.currency,
+          onChange: (value) => handleFilterChange("currency", value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.payments.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "usd", children: "USD" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "eur", children: "EUR" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "gbp", children: "GBP" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.payments.clearFilters", defaultMessage: "Clear" }) }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, marginBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
+      { id: "payment-plugin.payments.results", defaultMessage: "Showing {start}-{end} of {total} payments" },
+      {
+        start: startIndex + 1,
+        end: Math.min(endIndex, filteredPayments.length),
+        total: filteredPayments.length
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.customer", defaultMessage: "Customer" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.amount", defaultMessage: "Amount" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.status", defaultMessage: "Status" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.method", defaultMessage: "Method" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.date", defaultMessage: "Date" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.payments.actions", defaultMessage: "Actions" }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: paginatedPayments.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", children: payment.customerName || "Unknown" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", children: payment.customerEmail })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(payment.amount, payment.currency) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(payment.status) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+          id: `payment-plugin.payments.${payment.paymentMethod}`,
+          defaultMessage: payment.paymentMethod
+        }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatDate(payment.createdAt) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleViewDetails(payment),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "👁️" }),
+              children: formatMessage({ id: "payment-plugin.payments.view", defaultMessage: "View details" })
+            }
+          ),
+          payment.status === "succeeded" && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleRefund(payment),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "💸" }),
+              children: formatMessage({ id: "payment-plugin.payments.refund", defaultMessage: "Refund" })
+            }
+          )
+        ] }) })
+      ] }, payment.id)) })
+    ] }) }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Pagination,
+      {
+        currentPage,
+        pageCount: totalPages,
+        onPageChange: setCurrentPage
+      }
+    ) }),
+    showRefundModal && selectedPayment && /* @__PURE__ */ jsxRuntime.jsx(
+      RefundModal,
+      {
+        payment: selectedPayment,
+        onClose: () => {
+          setShowRefundModal(false);
+          setSelectedPayment(null);
+        },
+        onSuccess: () => {
+          setShowRefundModal(false);
+          setSelectedPayment(null);
+          fetchPayments();
+        }
+      }
+    ),
+    showPaymentCard && selectedPayment && /* @__PURE__ */ jsxRuntime.jsx(
+      PaymentCard,
+      {
+        payment: selectedPayment,
+        onClose: () => {
+          setShowPaymentCard(false);
+          setSelectedPayment(null);
+        }
+      }
+    )
+  ] });
+};
+exports.Payments = Payments;