@reeboot/strapi-payment-plugin 0.0.6 → 0.0.8

package/dist/_chunks/{Orders-65mNfu2i.mjs → Orders-DdJqI1HB.mjs}

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Box, Typography, Table, Thead, Tr, Th, Tbody, Td, Flex, Badge, Loader, EmptyStateLayout, Button, Card, Grid, TextInput, SingleSelect, SingleSelectOption, Pagination } from "@strapi/design-system";
+import { Box, Typography, Table, Thead, Tr, Th, Tbody, Td, Flex, Badge, Loader, EmptyStateLayout, Button, Card, Grid, TextInput, SingleSelect, SingleSelectOption, Pagination, PreviousLink, PageLink, NextLink } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
+import { P as PLUGIN_ID } from "./index-CB6TMitx.mjs";
 const OrderList = ({ orders, onOrderClick, compact = false }) => {
   const { formatMessage } = useIntl();
-  console.log("Orders:", orders);
   const formatCurrency = (amount, currency = "usd") => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -14,29 +13,24 @@ const OrderList = ({ orders, onOrderClick, compact = false }) => {
     }).format(amount);
   };
   const getStatusBadge = (status, type) => {
-    const configs = {
-      order: {
-        pending: { color: "warning", label: "Pending" },
-        processing: { color: "info", label: "Processing" },
-        shipped: { color: "secondary", label: "Shipped" },
-        delivered: { color: "success", label: "Delivered" },
-        cancelled: { color: "danger", label: "Cancelled" },
-        refunded: { color: "neutral", label: "Refunded" }
-      },
-      payment: {
-        unpaid: { color: "danger", label: "Unpaid" },
-        paid: { color: "success", label: "Paid" },
-        partially_paid: { color: "warning", label: "Partially Paid" },
-        refunded: { color: "neutral", label: "Refunded" }
-      }
+    const orderVariants = {
+      pending: { variant: "warning", label: "Pending" },
+      processing: { variant: "secondary", label: "Processing" },
+      shipped: { variant: "secondary", label: "Shipped" },
+      delivered: { variant: "success", label: "Delivered" },
+      completed: { variant: "success", label: "Completed" },
+      cancelled: { variant: "danger", label: "Cancelled" },
+      failed: { variant: "danger", label: "Failed" },
+      refunded: { variant: "neutral", label: "Refunded" }
     };
-    let config;
-    if (type === "order") {
-      config = configs.order[status] || configs.order.pending;
-    } else {
-      config = configs.payment[status] || configs.payment.unpaid;
-    }
-    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", backgroundColor: config.color, children: config.label });
+    const paymentVariants = {
+      unpaid: { variant: "danger", label: "Unpaid" },
+      paid: { variant: "success", label: "Paid" },
+      partially_paid: { variant: "warning", label: "Partially Paid" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const config = type === "order" ? orderVariants[status] || orderVariants.pending : paymentVariants[status] || paymentVariants.unpaid;
+    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", variant: config.variant, children: config.label });
   };
   const handleOrderClick = (order) => {
     if (onOrderClick) {
@@ -61,49 +55,17 @@ const OrderList = ({ orders, onOrderClick, compact = false }) => {
         onClick: () => handleOrderClick(order),
         style: { cursor: onOrderClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontFamily: "monospace",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: order.order_number
-            }
-          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", fontFamily: "monospace", children: order.order_number }) }),
           /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                textColor: "neutral800",
-                fontWeight: compact ? "normal" : "bold",
-                fontSize: compact ? "0.875rem" : "1rem",
-                children: order.customerName || "Unknown"
-              }
-            ),
-            compact && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontSize: "0.75rem", children: order.customerEmail })
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: compact ? "normal" : "bold", children: order.customerName || "Unknown" }),
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: order.customerEmail })
           ] }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: [
-                order.items ? order.items.length : 0,
-                " ",
-                order.items && order.items.length === 1 ? "item" : "items"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: formatCurrency(order.total_amount, order.currency)
-            }
-          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Typography, { textColor: "neutral600", children: [
+            order.items ? order.items.length : 0,
+            " ",
+            order.items && order.items.length === 1 ? "item" : "items"
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(order.total_amount, order.currency) }) }),
           /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.order_status, "order") }),
           /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.paymentStatus, "payment") })
         ]
@@ -116,32 +78,29 @@ const Orders = () => {
   const { formatMessage } = useIntl();
   const { get } = useFetchClient();
   const [orders, setOrders] = useState([]);
-  const [filteredOrders, setFilteredOrders] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(25);
+  const pageSize = 25;
   const [totalCount, setTotalCount] = useState(0);
   const [filters, setFilters] = useState({
     order_status: "",
     paymentStatus: "",
-    dateRange: { from: null, to: null },
     search: "",
     currency: ""
   });
   useEffect(() => {
     fetchOrders();
-  }, [currentPage, pageSize, filters]);
-  useEffect(() => {
-    applyFilters();
-  }, [orders, filters]);
+  }, [currentPage, filters]);
   const fetchOrders = async () => {
     try {
       setLoading(true);
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         pageSize: pageSize.toString(),
-        ...filters.order_status && { order_status: filters.order_status }
+        ...filters.order_status && { order_status: filters.order_status },
+        ...filters.search && { search: filters.search },
+        ...filters.currency && { currency: filters.currency }
       });
       const { data } = await get(`/${PLUGIN_ID}/admin/orders?${queryParams}`);
       if (data.success && data.data) {
@@ -154,7 +113,7 @@ const Orders = () => {
           items: Array.isArray(o.items) ? o.items : []
         }));
         setOrders(formattedOrders);
-        setTotalCount(data.meta.pagination.total);
+        setTotalCount(data.meta?.pagination?.total || 0);
       }
       setLoading(false);
     } catch (err) {
@@ -162,38 +121,7 @@ const Orders = () => {
       setLoading(false);
     }
   };
-  const applyFilters = () => {
-    let filtered = [...orders];
-    if (filters.search) {
-      const searchLower = filters.search.toLowerCase();
-      filtered = filtered.filter(
-        (order) => order.order_number && order.order_number.toLowerCase().includes(searchLower) || order.customerEmail && order.customerEmail.toLowerCase().includes(searchLower) || order.customerName && order.customerName.toLowerCase().includes(searchLower)
-      );
-    }
-    if (filters.order_status) {
-      filtered = filtered.filter((order) => order.order_status === filters.order_status);
-    }
-    if (filters.paymentStatus) {
-      filtered = filtered.filter((order) => order.paymentStatus === filters.paymentStatus);
-    }
-    if (filters.currency) {
-      filtered = filtered.filter((order) => order.currency === filters.currency);
-    }
-    if (filters.dateRange.from) {
-      filtered = filtered.filter(
-        (order) => new Date(order.createdAt) >= filters.dateRange.from
-      );
-    }
-    if (filters.dateRange.to) {
-      filtered = filtered.filter(
-        (order) => new Date(order.createdAt) <= filters.dateRange.to
-      );
-    }
-    setFilteredOrders(filtered);
-  };
-  const handleOrderClick = (order) => {
-    console.log("Clicked order:", order);
-  };
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -208,19 +136,13 @@ const Orders = () => {
     setCurrentPage(1);
   };
   const clearFilters = () => {
-    setFilters({
-      order_status: "",
-      paymentStatus: "",
-      dateRange: { from: null, to: null },
-      search: "",
-      currency: ""
-    });
+    setFilters({ order_status: "", paymentStatus: "", search: "", currency: "" });
     setCurrentPage(1);
   };
   const exportOrders = () => {
     const csvContent = [
       ["Order Number", "Customer Email", "Customer Name", "Status", "Payment Status", "Total Amount", "Currency", "Date"],
-      ...filteredOrders.map((order) => [
+      ...orders.map((order) => [
         order.order_number || "",
         order.customerEmail || "",
         order.customerName || "",
@@ -239,10 +161,6 @@ const Orders = () => {
     a.click();
     window.URL.revokeObjectURL(url);
   };
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(filteredOrders.length / pageSize);
   if (loading && orders.length === 0) {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
@@ -250,8 +168,7 @@ const Orders = () => {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
-        title: "Error loading orders",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsx(Button, { onClick: fetchOrders, children: formatMessage({ id: "payment-plugin.orders.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -267,13 +184,14 @@ const Orders = () => {
       ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: exportOrders, children: formatMessage({ id: "payment-plugin.orders.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsx(Button, { onClick: fetchOrders })
+        /* @__PURE__ */ jsx(Button, { onClick: fetchOrders, children: formatMessage({ id: "payment-plugin.orders.refresh", defaultMessage: "Refresh" }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
       /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsx(
         TextInput,
         {
+          label: formatMessage({ id: "payment-plugin.orders.search.label", defaultMessage: "Search" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.search.placeholder",
             defaultMessage: "Search orders..."
@@ -285,6 +203,7 @@ const Orders = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
         SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.status.label", defaultMessage: "Order Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.status.placeholder",
             defaultMessage: "All Statuses"
@@ -295,8 +214,7 @@ const Orders = () => {
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.orders.all", defaultMessage: "All" }) }),
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "pending", children: formatMessage({ id: "payment-plugin.orders.pending", defaultMessage: "Pending" }) }),
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "processing", children: formatMessage({ id: "payment-plugin.orders.processing", defaultMessage: "Processing" }) }),
-            /* @__PURE__ */ jsx(SingleSelectOption, { value: "shipped", children: formatMessage({ id: "payment-plugin.orders.shipped", defaultMessage: "Shipped" }) }),
-            /* @__PURE__ */ jsx(SingleSelectOption, { value: "delivered", children: formatMessage({ id: "payment-plugin.orders.delivered", defaultMessage: "Delivered" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "completed", children: formatMessage({ id: "payment-plugin.orders.completed", defaultMessage: "Completed" }) }),
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "cancelled", children: formatMessage({ id: "payment-plugin.orders.cancelled", defaultMessage: "Cancelled" }) })
           ]
         }
@@ -304,9 +222,10 @@ const Orders = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
         SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.paymentStatus.label", defaultMessage: "Payment Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.paymentStatus.placeholder",
-            defaultMessage: "All Payment Statuses"
+            defaultMessage: "All"
           }),
           value: filters.paymentStatus,
           onChange: (value) => handleFilterChange("paymentStatus", value),
@@ -322,6 +241,7 @@ const Orders = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
         SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.currency.label", defaultMessage: "Currency" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.currency.placeholder",
             defaultMessage: "All Currencies"
@@ -336,31 +256,38 @@ const Orders = () => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.orders.clearFilters", defaultMessage: "Clear" }) }) }) })
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsx(Flex, { gap: 2, alignItems: "flex-end", height: "100%", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.orders.clearFilters", defaultMessage: "Clear" }) }) }) })
     ] }) }) }),
     /* @__PURE__ */ jsx(Box, { marginTop: 4, marginBottom: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
-      { id: "payment-plugin.orders.results", defaultMessage: "Showing {start}-{end} of {total} orders" },
-      {
-        start: startIndex + 1,
-        end: Math.min(endIndex, filteredOrders.length),
-        total: filteredOrders.length
-      }
+      { id: "payment-plugin.orders.results", defaultMessage: "{total} orders" },
+      { total: totalCount }
     ) }) }),
-    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
-      OrderList,
-      {
-        orders: paginatedOrders,
-        onOrderClick: handleOrderClick
-      }
-    ) }),
-    totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        currentPage,
-        pageCount: totalPages,
-        onPageChange: setCurrentPage
-      }
-    ) })
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(OrderList, { orders }) }),
+    totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxs(Pagination, { activePage: currentPage, pageCount: totalPages, label: "Orders pagination", children: [
+      /* @__PURE__ */ jsx(
+        PreviousLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.max(1, p - 1))
+        }
+      ),
+      Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => /* @__PURE__ */ jsx(
+        PageLink,
+        {
+          number: page,
+          as: "button",
+          onClick: () => setCurrentPage(page)
+        },
+        page
+      )),
+      /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1))
+        }
+      )
+    ] }) }) })
   ] });
 };
 export {

package/dist/_chunks/{PaymentList-B0CAzInT.mjs → PaymentList-3HWK7PMz.mjs}

@@ -10,7 +10,6 @@ const PaymentList = ({
   compact = false
 }) => {
   const { formatMessage } = useIntl();
-  console.log("Payments:", payments);
   const formatCurrency = (amount, currency = "usd") => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -26,14 +25,14 @@ const PaymentList = ({
   };
   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" }
+      succeeded: { variant: "success", label: "Success" },
+      pending: { variant: "warning", label: "Pending" },
+      failed: { variant: "danger", label: "Failed" },
+      refunded: { variant: "secondary", label: "Refunded" },
+      canceled: { variant: "neutral", label: "Canceled" }
     };
     const config = statusConfig[status] || statusConfig.pending;
-    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", backgroundColor: config.color, children: config.label });
+    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", variant: config.variant, children: config.label });
   };
   const handlePaymentClick = (payment) => {
     if (onPaymentClick) {
@@ -64,42 +63,18 @@ const PaymentList = ({
               {
                 textColor: "neutral800",
                 fontWeight: compact ? "normal" : "bold",
-                fontSize: compact ? "0.875rem" : "1rem",
-                children: payment.customerName || "Unknown -"
+                children: payment.customerName || "Unknown"
               }
             ),
-            !compact && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: payment.customerEmail }),
-            compact && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontSize: "0.75rem", children: payment.customerEmail })
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: payment.customerEmail })
           ] }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: formatCurrency(payment.amount, payment.currency)
-            }
-          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(payment.amount, payment.currency) }) }),
           /* @__PURE__ */ jsx(Td, { children: getStatusBadge(payment.payment_status) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: formatMessage({
-                id: `payment-plugin.paymentList.${payment.payment_method}`,
-                defaultMessage: payment.payment_method
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: formatDate(payment.createdAt)
-            }
-          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage({
+            id: `payment-plugin.paymentList.${payment.payment_method}`,
+            defaultMessage: payment.payment_method
+          }) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatDate(payment.createdAt) }) }),
           !compact && /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
             /* @__PURE__ */ jsx(
               Button,

package/dist/_chunks/{PaymentList-Dy1BAFoD.js → PaymentList-APfyYD1h.js}

@@ -11,7 +11,6 @@ const PaymentList = ({
   compact = false
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  console.log("Payments:", payments);
   const formatCurrency = (amount, currency = "usd") => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -27,14 +26,14 @@ const PaymentList = ({
   };
   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" }
+      succeeded: { variant: "success", label: "Success" },
+      pending: { variant: "warning", label: "Pending" },
+      failed: { variant: "danger", label: "Failed" },
+      refunded: { variant: "secondary", label: "Refunded" },
+      canceled: { variant: "neutral", label: "Canceled" }
     };
     const config = statusConfig[status] || statusConfig.pending;
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", backgroundColor: config.color, children: config.label });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", variant: config.variant, children: config.label });
   };
   const handlePaymentClick = (payment) => {
     if (onPaymentClick) {
@@ -65,42 +64,18 @@ const PaymentList = ({
               {
                 textColor: "neutral800",
                 fontWeight: compact ? "normal" : "bold",
-                fontSize: compact ? "0.875rem" : "1rem",
-                children: payment.customerName || "Unknown -"
+                children: payment.customerName || "Unknown"
               }
             ),
-            !compact && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", children: payment.customerEmail }),
-            compact && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", fontSize: "0.75rem", children: payment.customerEmail })
+            /* @__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",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: formatCurrency(payment.amount, payment.currency)
-            }
-          ) }),
+          /* @__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.payment_status) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: formatMessage({
-                id: `payment-plugin.paymentList.${payment.payment_method}`,
-                defaultMessage: payment.payment_method
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: formatDate(payment.createdAt)
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+            id: `payment-plugin.paymentList.${payment.payment_method}`,
+            defaultMessage: payment.payment_method
+          }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatDate(payment.createdAt) }) }),
           !compact && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Button,