@reeboot/strapi-payment-plugin 0.0.3 → 0.0.5

package/dist/_chunks/App-Dk7XtjNA.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+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 _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 App = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [searchValue, setSearchValue] = React.useState("");
+  const managementLinks = [
+    {
+      to: `/plugins/${index.PLUGIN_ID}/dashboard`,
+      label: formatMessage({ id: "payment-plugin.dashboard.title", defaultMessage: "Dashboard" })
+    },
+    {
+      to: `/plugins/${index.PLUGIN_ID}/payments`,
+      label: formatMessage({ id: "payment-plugin.payments.title", defaultMessage: "Payments" })
+    },
+    {
+      to: `/plugins/${index.PLUGIN_ID}/orders`,
+      label: formatMessage({ id: "payment-plugin.orders.title", defaultMessage: "Orders" })
+    },
+    {
+      to: `/plugins/${index.PLUGIN_ID}/customers`,
+      label: formatMessage({ id: "payment-plugin.customers.title", defaultMessage: "Customers" })
+    }
+  ];
+  const insightLinks = [
+    {
+      to: `/plugins/${index.PLUGIN_ID}/analytics`,
+      label: formatMessage({ id: "payment-plugin.analytics.title", defaultMessage: "Analytics" })
+    }
+  ];
+  const configLinks = [
+    {
+      to: `/plugins/${index.PLUGIN_ID}/settings`,
+      label: formatMessage({ id: "payment-plugin.settings.title", defaultMessage: "Settings" })
+    }
+  ];
+  const filterLinks = (links) => {
+    return links.filter(
+      (link) => link.label.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  };
+  const filteredManagementLinks = filterLinks(managementLinks);
+  const filteredInsightLinks = filterLinks(insightLinks);
+  const filteredConfigLinks = filterLinks(configLinks);
+  const pluginName = formatMessage({
+    id: "payment-plugin.plugin.name",
+    defaultMessage: "Payment Plugin"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.SubNav.Main, { "aria-label": formatMessage({ id: "payment-plugin.nav.aria", defaultMessage: "Payment navigation" }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(admin.SubNav.Header, { label: pluginName }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { background: "neutral150" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(admin.SubNav.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Searchbar,
+          {
+            name: "searchbar",
+            onClear: () => setSearchValue(""),
+            value: searchValue,
+            onChange: (e) => setSearchValue(e.target.value),
+            clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+            placeholder: formatMessage({ id: "payment-plugin.nav.search.placeholder", defaultMessage: "Search..." }),
+            size: "S",
+            children: formatMessage({ id: "payment-plugin.nav.search.placeholder", defaultMessage: "Search..." })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(admin.SubNav.Sections, { children: [
+          filteredManagementLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(admin.SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.management", defaultMessage: "Management" }), children: filteredManagementLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            admin.SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) }),
+          filteredInsightLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(admin.SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.insights", defaultMessage: "Insights" }), children: filteredInsightLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            admin.SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) }),
+          filteredConfigLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(admin.SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.configuration", defaultMessage: "Configuration" }), children: filteredConfigLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            admin.SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", padding: 5, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }), children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "dashboard", element: /* @__PURE__ */ jsxRuntime.jsx(Dashboard, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "payments", element: /* @__PURE__ */ jsxRuntime.jsx(Payments, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "orders", element: /* @__PURE__ */ jsxRuntime.jsx(Orders, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "customers", element: /* @__PURE__ */ jsxRuntime.jsx(Customers, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "analytics", element: /* @__PURE__ */ jsxRuntime.jsx(Analytics, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "settings", element: /* @__PURE__ */ jsxRuntime.jsx(Settings, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "dashboard", replace: true }) })
+    ] }) }) })
+  ] });
+};
+exports.App = App;

package/dist/_chunks/{Customers-BpFzfglV.js → Customers-BNDi4QBH.js}

@@ -5,7 +5,98 @@ 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-BqqrpI6D.js");
+const index = require("./index-CHEgJ7e5.js");
+const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  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"
+    });
+  };
+  const getCustomerStatusBadge = (isActive) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
+  };
+  const getCustomerName = (customer) => {
+    if (customer.first_name && customer.last_name) {
+      return `${customer.first_name} ${customer.last_name}`;
+    }
+    return customer.email;
+  };
+  const handleCustomerClick = (customer) => {
+    if (onCustomerClick) {
+      onCustomerClick(customer);
+    }
+  };
+  if (customers.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.customerList.empty", defaultMessage: "No customers found" }) }) });
+  }
+  return /* @__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: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.customer", defaultMessage: "Customer" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.totalSpent", defaultMessage: "Total Spent" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.payments", defaultMessage: "Payments" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.lastPayment", defaultMessage: "Last Payment" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.status", defaultMessage: "Status" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: customers.map((customer) => /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Tr,
+      {
+        onClick: () => handleCustomerClick(customer),
+        style: { cursor: onCustomerClick ? "pointer" : "default" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                textColor: "neutral800",
+                fontWeight: compact ? "normal" : "bold",
+                fontSize: compact ? "0.875rem" : "1rem",
+                children: getCustomerName(customer)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", fontSize: "0.75rem", children: customer.stripe_customer_id }),
+            !compact && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", children: customer.email })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Typography,
+            {
+              textColor: "neutral800",
+              fontWeight: "bold",
+              fontSize: compact ? "0.875rem" : "1rem",
+              children: formatCurrency(customer.totalSpent, customer.currency)
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Typography,
+            {
+              textColor: "neutral600",
+              fontSize: compact ? "0.75rem" : "0.875rem",
+              children: customer.paymentCount
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Typography,
+            {
+              textColor: "neutral600",
+              fontSize: compact ? "0.75rem" : "0.875rem",
+              children: customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCustomerStatusBadge(customer.isActive) })
+        ]
+      },
+      customer.id
+    )) })
+  ] });
+};
 const Customers = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { get } = admin.useFetchClient();
@@ -39,12 +130,8 @@ const Customers = () => {
       const { data } = await get(`/${index.PLUGIN_ID}/admin/customers?${queryParams}`);
       if (data.success && data.data) {
         const formattedCustomers = data.data.map((c) => ({
+          ...c,
           id: c.documentId,
-          stripeCustomerId: c.stripe_customer_id,
-          email: c.email,
-          firstName: c.firstName,
-          lastName: c.lastName,
-          phone: c.phone,
           totalSpent: c.totalSpent || 0,
           currency: "usd",
           paymentCount: c.paymentCount || 0,
@@ -66,7 +153,7 @@ const Customers = () => {
     if (filters.search) {
       const searchLower = filters.search.toLowerCase();
       filtered = filtered.filter(
-        (customer) => customer.email.toLowerCase().includes(searchLower) || `${customer.firstName} ${customer.lastName}`.toLowerCase().includes(searchLower) || customer.stripeCustomerId.toLowerCase().includes(searchLower)
+        (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) {
@@ -90,11 +177,8 @@ const Customers = () => {
     }
     setFilteredCustomers(filtered);
   };
-  const formatCurrency = (amount, currency = "usd") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.toUpperCase()
-    }).format(amount);
+  const handleCustomerClick = (customer) => {
+    console.log("Clicked customer:", customer);
   };
   const formatDate = (dateString) => {
     try {
@@ -107,9 +191,6 @@ const Customers = () => {
       return "Invalid Date";
     }
   };
-  const getCustomerStatusBadge = (isActive) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
-  };
   const handleFilterChange = (key, value) => {
     setFilters((prev) => ({ ...prev, [key]: value }));
     setCurrentPage(1);
@@ -127,15 +208,15 @@ const Customers = () => {
     const csvContent = [
       ["Customer ID", "Email", "First Name", "Last Name", "Total Spent", "Payment Count", "Last Payment", "Status", "Registration Date"],
       ...filteredCustomers.map((customer) => [
-        customer.stripeCustomerId,
+        customer.stripe_customer_id || "",
         customer.email,
-        customer.firstName || "",
-        customer.lastName || "",
-        (customer.totalSpent / 100).toString(),
-        customer.paymentCount.toString(),
+        customer.first_name || "",
+        customer.last_name || "",
+        (customer.totalSpent || 0 / 100).toString(),
+        (customer.paymentCount || 0).toString(),
         customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never",
         customer.isActive ? "Active" : "Inactive",
-        formatDate(customer.registrationDate)
+        customer.registrationDate ? formatDate(customer.registrationDate) : ""
       ])
     ].map((row) => row.join(",")).join("\n");
     const blob = new Blob([csvContent], { type: "text/csv" });
@@ -151,10 +232,10 @@ const Customers = () => {
   const paginatedCustomers = filteredCustomers.slice(startIndex, endIndex);
   const totalPages = Math.ceil(filteredCustomers.length / pageSize);
   if (loading && customers.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, {}) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { 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(
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
         title: "Error loading customers",
@@ -163,7 +244,7 @@ const Customers = () => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { 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.customers.title", defaultMessage: "Customers" }) }),
@@ -174,7 +255,7 @@ const Customers = () => {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: exportCustomers, children: formatMessage({ id: "payment-plugin.customers.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.customers.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.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: [
@@ -234,32 +315,13 @@ const Customers = () => {
         total: filteredCustomers.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.customers.customer", defaultMessage: "Customer" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.contact", defaultMessage: "Contact" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.totalSpent", defaultMessage: "Total Spent" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.payments", defaultMessage: "Payments" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.lastPayment", defaultMessage: "Last Payment" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.status", defaultMessage: "Status" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.registration", defaultMessage: "Registered" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: paginatedCustomers.map((customer) => /* @__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: customer.firstName && customer.lastName ? `${customer.firstName} ${customer.lastName}` : customer.email }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", children: customer.stripeCustomerId })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: customer.email }),
-          customer.phone && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", children: customer.phone })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(customer.totalSpent, customer.currency) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: customer.paymentCount }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCustomerStatusBadge(customer.isActive) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatDate(customer.registrationDate) }) })
-      ] }, customer.id)) })
-    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      CustomerList,
+      {
+        customers: paginatedCustomers,
+        onCustomerClick: handleCustomerClick
+      }
+    ) }),
     totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Pagination,
       {

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

@@ -1,9 +1,100 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Box, Flex, Loader, EmptyStateLayout, Button, Typography, Card, Grid, TextInput, SingleSelect, SingleSelectOption, Table, Thead, Tr, Th, Tbody, Td, Pagination, Badge } from "@strapi/design-system";
+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 { 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";
+const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
+  const { formatMessage } = useIntl();
+  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"
+    });
+  };
+  const getCustomerStatusBadge = (isActive) => {
+    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
+  };
+  const getCustomerName = (customer) => {
+    if (customer.first_name && customer.last_name) {
+      return `${customer.first_name} ${customer.last_name}`;
+    }
+    return customer.email;
+  };
+  const handleCustomerClick = (customer) => {
+    if (onCustomerClick) {
+      onCustomerClick(customer);
+    }
+  };
+  if (customers.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { padding: 4, textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.customerList.empty", defaultMessage: "No customers found" }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.customer", defaultMessage: "Customer" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.totalSpent", defaultMessage: "Total Spent" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.payments", defaultMessage: "Payments" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.lastPayment", defaultMessage: "Last Payment" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.customerList.status", defaultMessage: "Status" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: customers.map((customer) => /* @__PURE__ */ jsxs(
+      Tr,
+      {
+        onClick: () => handleCustomerClick(customer),
+        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 }),
+            !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: getCustomerStatusBadge(customer.isActive) })
+        ]
+      },
+      customer.id
+    )) })
+  ] });
+};
 const Customers = () => {
   const { formatMessage } = useIntl();
   const { get } = useFetchClient();
@@ -37,12 +128,8 @@ const Customers = () => {
       const { data } = await get(`/${PLUGIN_ID}/admin/customers?${queryParams}`);
       if (data.success && data.data) {
         const formattedCustomers = data.data.map((c) => ({
+          ...c,
           id: c.documentId,
-          stripeCustomerId: c.stripe_customer_id,
-          email: c.email,
-          firstName: c.firstName,
-          lastName: c.lastName,
-          phone: c.phone,
           totalSpent: c.totalSpent || 0,
           currency: "usd",
           paymentCount: c.paymentCount || 0,
@@ -64,7 +151,7 @@ const Customers = () => {
     if (filters.search) {
       const searchLower = filters.search.toLowerCase();
       filtered = filtered.filter(
-        (customer) => customer.email.toLowerCase().includes(searchLower) || `${customer.firstName} ${customer.lastName}`.toLowerCase().includes(searchLower) || customer.stripeCustomerId.toLowerCase().includes(searchLower)
+        (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) {
@@ -88,11 +175,8 @@ const Customers = () => {
     }
     setFilteredCustomers(filtered);
   };
-  const formatCurrency = (amount, currency = "usd") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.toUpperCase()
-    }).format(amount);
+  const handleCustomerClick = (customer) => {
+    console.log("Clicked customer:", customer);
   };
   const formatDate = (dateString) => {
     try {
@@ -105,9 +189,6 @@ const Customers = () => {
       return "Invalid Date";
     }
   };
-  const getCustomerStatusBadge = (isActive) => {
-    return /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
-  };
   const handleFilterChange = (key, value) => {
     setFilters((prev) => ({ ...prev, [key]: value }));
     setCurrentPage(1);
@@ -125,15 +206,15 @@ const Customers = () => {
     const csvContent = [
       ["Customer ID", "Email", "First Name", "Last Name", "Total Spent", "Payment Count", "Last Payment", "Status", "Registration Date"],
       ...filteredCustomers.map((customer) => [
-        customer.stripeCustomerId,
+        customer.stripe_customer_id || "",
         customer.email,
-        customer.firstName || "",
-        customer.lastName || "",
-        (customer.totalSpent / 100).toString(),
-        customer.paymentCount.toString(),
+        customer.first_name || "",
+        customer.last_name || "",
+        (customer.totalSpent || 0 / 100).toString(),
+        (customer.paymentCount || 0).toString(),
         customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never",
         customer.isActive ? "Active" : "Inactive",
-        formatDate(customer.registrationDate)
+        customer.registrationDate ? formatDate(customer.registrationDate) : ""
       ])
     ].map((row) => row.join(",")).join("\n");
     const blob = new Blob([csvContent], { type: "text/csv" });
@@ -149,10 +230,10 @@ const Customers = () => {
   const paginatedCustomers = filteredCustomers.slice(startIndex, endIndex);
   const totalPages = Math.ceil(filteredCustomers.length / pageSize);
   if (loading && customers.length === 0) {
-    return /* @__PURE__ */ jsx(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
         title: "Error loading customers",
@@ -161,7 +242,7 @@ const Customers = () => {
       }
     ) });
   }
-  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.customers.title", defaultMessage: "Customers" }) }),
@@ -172,7 +253,7 @@ const Customers = () => {
       ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: exportCustomers, children: formatMessage({ id: "payment-plugin.customers.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.customers.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsx(Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.refresh", defaultMessage: "Refresh" }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
@@ -232,32 +313,13 @@ const Customers = () => {
         total: filteredCustomers.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.customers.customer", defaultMessage: "Customer" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.contact", defaultMessage: "Contact" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.totalSpent", defaultMessage: "Total Spent" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.payments", defaultMessage: "Payments" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.lastPayment", defaultMessage: "Last Payment" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.status", defaultMessage: "Status" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.customers.registration", defaultMessage: "Registered" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(Tbody, { children: paginatedCustomers.map((customer) => /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: customer.firstName && customer.lastName ? `${customer.firstName} ${customer.lastName}` : customer.email }),
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", children: customer.stripeCustomerId })
-        ] }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: customer.email }),
-          customer.phone && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: customer.phone })
-        ] }) }),
-        /* @__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) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatDate(customer.registrationDate) }) })
-      ] }, customer.id)) })
-    ] }) }) }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
+      CustomerList,
+      {
+        customers: paginatedCustomers,
+        onCustomerClick: handleCustomerClick
+      }
+    ) }),
     totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
       Pagination,
       {