@reeboot/strapi-payment-plugin 0.0.5 → 0.0.7

package/README.md

@@ -139,6 +139,27 @@ export default () => ({
 });
 ```
 
+### Webhook Raw Body Support (CRITICAL)
+
+For Stripe webhook signature verification to work, you **must** configure Strapi's body parser middleware to preserve the raw request body. 
+
+Update `config/middlewares.ts` in your Strapi project:
+
+```typescript
+export default [
+  // ... other middlewares
+  {
+    name: 'strapi::body',
+    config: {
+      includeUnparsed: true,
+    },
+  },
+  // ... other middlewares
+];
+```
+
+Without `includeUnparsed: true`, the webhook verification will fail with an error: "No signatures found matching the expected signature for payload".
+
 ## 🚀 Quick Start
 
 ### 1. Create a Payment Intent

package/dist/_chunks/{Analytics-CQmAVKsq.mjs → Analytics-CncK5kn-.mjs}

@@ -4,7 +4,7 @@ import { Box, Typography, Flex, ProgressBar, Grid, Loader, EmptyStateLayout, But
 import { Download, ArrowClockwise, TrendUp, ChartPie, CheckCircle, User } from "@strapi/icons";
 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 AnalyticsChart = ({ data, currency = "usd", type }) => {
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("en-US", {
@@ -225,8 +225,7 @@ const Analytics = () => {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
-        title: "Error loading analytics",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsx(Button, { onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -277,7 +276,7 @@ const Analytics = () => {
           /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: "success", children: /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Badge, { size: "S", variant: "success", children: /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
               /* @__PURE__ */ jsx(TrendUp, { width: "12px", height: "12px" }),
               analyticsData.revenue.growth,
               "%"
@@ -285,7 +284,7 @@ const Analytics = () => {
             /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "vs prev period" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ChartPie, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsx(Box, { padding: 2, background: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ChartPie, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
       /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderLeft: "4px solid #0F9D58" }, children: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
@@ -299,7 +298,7 @@ const Analytics = () => {
             { total: analyticsData.payments.total }
           ) })
         ] }),
-        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsx(CheckCircle, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsx(Box, { padding: 2, background: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsx(CheckCircle, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
       /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderLeft: "4px solid #9C27B0" }, children: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
@@ -307,7 +306,7 @@ const Analytics = () => {
           /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Per successful payment" })
         ] }),
-        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(User, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsx(Box, { padding: 2, background: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(User, { width: "24px", height: "24px" }) })
       ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 4, children: [

package/dist/_chunks/{Analytics-CLjtRWYA.js → Analytics-c8KBuG3k.js}

@@ -6,7 +6,7 @@ const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-CHEgJ7e5.js");
+const index = require("./index-D-fFikb8.js");
 const AnalyticsChart = ({ data, currency = "usd", type }) => {
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("en-US", {
@@ -227,8 +227,7 @@ const Analytics = () => {
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
-        title: "Error loading analytics",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -279,7 +278,7 @@ const Analytics = () => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", backgroundColor: "success", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", variant: "success", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(icons.TrendUp, { width: "12px", height: "12px" }),
               analyticsData.revenue.growth,
               "%"
@@ -287,7 +286,7 @@ const Analytics = () => {
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "vs prev period" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChartPie, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChartPie, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%", borderLeft: "4px solid #0F9D58" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
@@ -301,7 +300,7 @@ const Analytics = () => {
             { total: analyticsData.payments.total }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%", borderLeft: "4px solid #9C27B0" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
@@ -309,7 +308,7 @@ const Analytics = () => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Per successful payment" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, { width: "24px", height: "24px" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, { width: "24px", height: "24px" }) })
       ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, marginBottom: 4, children: [

package/dist/_chunks/{App-DXN62SV6.mjs → App-B5AB8Omu.mjs}

@@ -4,13 +4,13 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Flex, Divider, Box, Searchbar, Loader } from "@strapi/design-system";
 import { SubNav } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
-const Dashboard = React.lazy(() => import("./Dashboard-CuHC-dit.mjs").then((m) => ({ default: m.Dashboard })));
-const Payments = React.lazy(() => import("./Payments-FnhoV_2B.mjs").then((m) => ({ default: m.Payments })));
-const Orders = React.lazy(() => import("./Orders-65mNfu2i.mjs").then((m) => ({ default: m.Orders })));
-const Customers = React.lazy(() => import("./Customers-BQzVBQDT.mjs").then((m) => ({ default: m.Customers })));
-const Analytics = React.lazy(() => import("./Analytics-CQmAVKsq.mjs").then((m) => ({ default: m.Analytics })));
-const Settings = React.lazy(() => import("./Settings-EoLSuZLe.mjs").then((m) => ({ default: m.Settings })));
+import { P as PLUGIN_ID } from "./index-CB6TMitx.mjs";
+const Dashboard = React.lazy(() => import("./Dashboard-DAjD8Q_6.mjs").then((m) => ({ default: m.Dashboard })));
+const Payments = React.lazy(() => import("./Payments-DFL-Cwgy.mjs").then((m) => ({ default: m.Payments })));
+const Orders = React.lazy(() => import("./Orders-DdJqI1HB.mjs").then((m) => ({ default: m.Orders })));
+const Customers = React.lazy(() => import("./Customers-BVk2gx7w.mjs").then((m) => ({ default: m.Customers })));
+const Analytics = React.lazy(() => import("./Analytics-CncK5kn-.mjs").then((m) => ({ default: m.Analytics })));
+const Settings = React.lazy(() => import("./Settings-SALxClBu.mjs").then((m) => ({ default: m.Settings })));
 const App = () => {
   const { formatMessage } = useIntl();
   const [searchValue, setSearchValue] = useState("");

package/dist/_chunks/{App-Dk7XtjNA.js → App-Cih9sWu1.js}

@@ -6,15 +6,15 @@ const reactRouterDom = require("react-router-dom");
 const reactIntl = require("react-intl");
 const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-CHEgJ7e5.js");
+const index = require("./index-D-fFikb8.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
-const Dashboard = React__default.default.lazy(() => Promise.resolve().then(() => require("./Dashboard-UUwohHZa.js")).then((m) => ({ default: m.Dashboard })));
-const Payments = React__default.default.lazy(() => Promise.resolve().then(() => require("./Payments-TOnygGIW.js")).then((m) => ({ default: m.Payments })));
-const Orders = React__default.default.lazy(() => Promise.resolve().then(() => require("./Orders-CitNCdWE.js")).then((m) => ({ default: m.Orders })));
-const Customers = React__default.default.lazy(() => Promise.resolve().then(() => require("./Customers-BNDi4QBH.js")).then((m) => ({ default: m.Customers })));
-const Analytics = React__default.default.lazy(() => Promise.resolve().then(() => require("./Analytics-CLjtRWYA.js")).then((m) => ({ default: m.Analytics })));
-const Settings = React__default.default.lazy(() => Promise.resolve().then(() => require("./Settings-BJtDagUs.js")).then((m) => ({ default: m.Settings })));
+const Dashboard = React__default.default.lazy(() => Promise.resolve().then(() => require("./Dashboard-CEif4jQn.js")).then((m) => ({ default: m.Dashboard })));
+const Payments = React__default.default.lazy(() => Promise.resolve().then(() => require("./Payments-VzDGbK4W.js")).then((m) => ({ default: m.Payments })));
+const Orders = React__default.default.lazy(() => Promise.resolve().then(() => require("./Orders-DZXb54VO.js")).then((m) => ({ default: m.Orders })));
+const Customers = React__default.default.lazy(() => Promise.resolve().then(() => require("./Customers-CZWOnN26.js")).then((m) => ({ default: m.Customers })));
+const Analytics = React__default.default.lazy(() => Promise.resolve().then(() => require("./Analytics-c8KBuG3k.js")).then((m) => ({ default: m.Analytics })));
+const Settings = React__default.default.lazy(() => Promise.resolve().then(() => require("./Settings-B1tR3WOm.js")).then((m) => ({ default: m.Settings })));
 const App = () => {
   const { formatMessage } = reactIntl.useIntl();
   const [searchValue, setSearchValue] = React.useState("");

package/dist/_chunks/{Customers-BQzVBQDT.mjs → Customers-BVk2gx7w.mjs}

@@ -1,9 +1,9 @@
 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 CustomerList = ({ customers, onCustomerClick, compact = false }) => {
   const { formatMessage } = useIntl();
   const formatCurrency = (amount, currency = "usd") => {
@@ -20,7 +20,7 @@ const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
     });
   };
   const getCustomerStatusBadge = (isActive) => {
-    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
+    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", variant: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
   };
   const getCustomerName = (customer) => {
     if (customer.first_name && customer.last_name) {
@@ -51,43 +51,13 @@ const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
         style: { cursor: onCustomerClick ? "pointer" : "default" },
         children: [
           /* @__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: getCustomerName(customer)
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", fontSize: "0.75rem", children: customer.stripe_customer_id }),
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: compact ? "normal" : "bold", children: getCustomerName(customer) }),
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", children: customer.stripe_customer_id }),
             !compact && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: customer.email })
           ] }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: formatCurrency(customer.totalSpent, customer.currency)
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: customer.paymentCount
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never"
-            }
-          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(customer.totalSpent, customer.currency) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: customer.paymentCount }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never" }) }),
           /* @__PURE__ */ jsx(Td, { children: getCustomerStatusBadge(customer.isActive) })
         ]
       },
@@ -99,24 +69,19 @@ const Customers = () => {
   const { formatMessage } = useIntl();
   const { get } = useFetchClient();
   const [customers, setCustomers] = useState([]);
-  const [filteredCustomers, setFilteredCustomers] = 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({
     search: "",
     country: "",
-    isActive: "",
-    registrationDateRange: { from: null, to: null }
+    isActive: ""
   });
   useEffect(() => {
     fetchCustomers();
-  }, [currentPage, pageSize, filters]);
-  useEffect(() => {
-    applyFilters();
-  }, [customers, filters]);
+  }, [currentPage, filters]);
   const fetchCustomers = async () => {
     try {
       setLoading(true);
@@ -138,7 +103,7 @@ const Customers = () => {
           tags: []
         }));
         setCustomers(formattedCustomers);
-        setTotalCount(data.meta.pagination.total);
+        setTotalCount(data.meta?.pagination?.total || 0);
       }
       setLoading(false);
     } catch (err) {
@@ -146,38 +111,7 @@ const Customers = () => {
       setLoading(false);
     }
   };
-  const applyFilters = () => {
-    let filtered = [...customers];
-    if (filters.search) {
-      const searchLower = filters.search.toLowerCase();
-      filtered = filtered.filter(
-        (customer) => customer.email.toLowerCase().includes(searchLower) || `${customer.first_name} ${customer.last_name}`.toLowerCase().includes(searchLower) || customer.stripe_customer_id && customer.stripe_customer_id.toLowerCase().includes(searchLower)
-      );
-    }
-    if (filters.isActive) {
-      const isActive = filters.isActive === "active";
-      filtered = filtered.filter((customer) => customer.isActive === isActive);
-    }
-    if (filters.country) {
-      filtered = filtered.filter(
-        (customer) => customer.address?.country === filters.country
-      );
-    }
-    if (filters.registrationDateRange.from) {
-      filtered = filtered.filter(
-        (customer) => new Date(customer.registrationDate) >= filters.registrationDateRange.from
-      );
-    }
-    if (filters.registrationDateRange.to) {
-      filtered = filtered.filter(
-        (customer) => new Date(customer.registrationDate) <= filters.registrationDateRange.to
-      );
-    }
-    setFilteredCustomers(filtered);
-  };
-  const handleCustomerClick = (customer) => {
-    console.log("Clicked customer:", customer);
-  };
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
   const formatDate = (dateString) => {
     try {
       return new Date(dateString).toLocaleDateString("en-US", {
@@ -185,7 +119,7 @@ const Customers = () => {
         month: "short",
         day: "numeric"
       });
-    } catch (e) {
+    } catch {
       return "Invalid Date";
     }
   };
@@ -194,26 +128,20 @@ const Customers = () => {
     setCurrentPage(1);
   };
   const clearFilters = () => {
-    setFilters({
-      search: "",
-      country: "",
-      isActive: "",
-      registrationDateRange: { from: null, to: null }
-    });
+    setFilters({ search: "", country: "", isActive: "" });
     setCurrentPage(1);
   };
   const exportCustomers = () => {
     const csvContent = [
-      ["Customer ID", "Email", "First Name", "Last Name", "Total Spent", "Payment Count", "Last Payment", "Status", "Registration Date"],
-      ...filteredCustomers.map((customer) => [
+      ["Customer ID", "Email", "First Name", "Last Name", "Total Spent", "Payment Count", "Last Payment", "Registration Date"],
+      ...customers.map((customer) => [
         customer.stripe_customer_id || "",
         customer.email,
         customer.first_name || "",
         customer.last_name || "",
-        (customer.totalSpent || 0 / 100).toString(),
+        (customer.totalSpent || 0).toString(),
         (customer.paymentCount || 0).toString(),
         customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never",
-        customer.isActive ? "Active" : "Inactive",
         customer.registrationDate ? formatDate(customer.registrationDate) : ""
       ])
     ].map((row) => row.join(",")).join("\n");
@@ -225,10 +153,6 @@ const Customers = () => {
     a.click();
     window.URL.revokeObjectURL(url);
   };
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedCustomers = filteredCustomers.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(filteredCustomers.length / pageSize);
   if (loading && customers.length === 0) {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
@@ -236,8 +160,7 @@ const Customers = () => {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
-        title: "Error loading customers",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsx(Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -260,6 +183,7 @@ const Customers = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(
         TextInput,
         {
+          label: formatMessage({ id: "payment-plugin.customers.search.label", defaultMessage: "Search" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.search.placeholder",
             defaultMessage: "Search customers..."
@@ -271,6 +195,7 @@ const Customers = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
         SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.customers.status.label", defaultMessage: "Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.status.placeholder",
             defaultMessage: "All Statuses"
@@ -287,6 +212,7 @@ const Customers = () => {
       /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
         SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.customers.country.label", defaultMessage: "Country" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.country.placeholder",
             defaultMessage: "All Countries"
@@ -303,31 +229,38 @@ const Customers = () => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.customers.clearFilters", defaultMessage: "Clear" }) }) }) })
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Flex, { gap: 2, alignItems: "flex-end", height: "100%", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.customers.clearFilters", defaultMessage: "Clear" }) }) }) })
     ] }) }) }),
     /* @__PURE__ */ jsx(Box, { marginTop: 4, marginBottom: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
-      { id: "payment-plugin.customers.results", defaultMessage: "Showing {start}-{end} of {total} customers" },
-      {
-        start: startIndex + 1,
-        end: Math.min(endIndex, filteredCustomers.length),
-        total: filteredCustomers.length
-      }
+      { id: "payment-plugin.customers.results", defaultMessage: "{total} customers" },
+      { total: totalCount }
     ) }) }),
-    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
-      CustomerList,
-      {
-        customers: paginatedCustomers,
-        onCustomerClick: handleCustomerClick
-      }
-    ) }),
-    totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        currentPage,
-        pageCount: totalPages,
-        onPageChange: setCurrentPage
-      }
-    ) })
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CustomerList, { customers }) }),
+    totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxs(Pagination, { activePage: currentPage, pageCount: totalPages, label: "Customers 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 {