@reeboot/strapi-payment-plugin 0.0.1 → 0.0.3

package/dist/_chunks/Customers-BpFzfglV.js

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const reactIntl = require("react-intl");
+const admin = require("@strapi/strapi/admin");
+const index = require("./index-BqqrpI6D.js");
+const Customers = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get } = admin.useFetchClient();
+  const [customers, setCustomers] = React.useState([]);
+  const [filteredCustomers, setFilteredCustomers] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(25);
+  const [totalCount, setTotalCount] = React.useState(0);
+  const [filters, setFilters] = React.useState({
+    search: "",
+    country: "",
+    isActive: "",
+    registrationDateRange: { from: null, to: null }
+  });
+  React.useEffect(() => {
+    fetchCustomers();
+  }, [currentPage, pageSize, filters]);
+  React.useEffect(() => {
+    applyFilters();
+  }, [customers, filters]);
+  const fetchCustomers = async () => {
+    try {
+      setLoading(true);
+      const queryParams = new URLSearchParams({
+        page: currentPage.toString(),
+        pageSize: pageSize.toString(),
+        ...filters.search && { email: filters.search }
+      });
+      const { data } = await get(`/${index.PLUGIN_ID}/admin/customers?${queryParams}`);
+      if (data.success && data.data) {
+        const formattedCustomers = data.data.map((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,
+          registrationDate: c.createdAt,
+          isActive: true,
+          tags: []
+        }));
+        setCustomers(formattedCustomers);
+        setTotalCount(data.meta.pagination.total);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch 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.firstName} ${customer.lastName}`.toLowerCase().includes(searchLower) || customer.stripeCustomerId.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 formatCurrency = (amount, currency = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  };
+  const formatDate = (dateString) => {
+    try {
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch (e) {
+      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);
+  };
+  const clearFilters = () => {
+    setFilters({
+      search: "",
+      country: "",
+      isActive: "",
+      registrationDateRange: { from: null, to: null }
+    });
+    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.stripeCustomerId,
+        customer.email,
+        customer.firstName || "",
+        customer.lastName || "",
+        (customer.totalSpent / 100).toString(),
+        customer.paymentCount.toString(),
+        customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never",
+        customer.isActive ? "Active" : "Inactive",
+        formatDate(customer.registrationDate)
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `customers-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    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__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.EmptyStateLayout,
+      {
+        title: "Error loading customers",
+        subtitle: error,
+        action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.customers.title", defaultMessage: "Customers" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.customers.subtitle",
+          defaultMessage: "Manage and view customer information"
+        }) })
+      ] }),
+      /* @__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.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.search.placeholder",
+            defaultMessage: "Search customers..."
+          }),
+          value: filters.search,
+          onChange: (e) => handleFilterChange("search", e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.status.placeholder",
+            defaultMessage: "All Statuses"
+          }),
+          value: filters.isActive,
+          onChange: (value) => handleFilterChange("isActive", value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.customers.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "active", children: formatMessage({ id: "payment-plugin.customers.active", defaultMessage: "Active" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "inactive", children: formatMessage({ id: "payment-plugin.customers.inactive", defaultMessage: "Inactive" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.country.placeholder",
+            defaultMessage: "All Countries"
+          }),
+          value: filters.country,
+          onChange: (value) => handleFilterChange("country", value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.customers.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "US", children: "United States" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "CA", children: "Canada" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "GB", children: "United Kingdom" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "DE", children: "Germany" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "FR", children: "France" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.customers.clearFilters", defaultMessage: "Clear" }) }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, marginBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
+      { id: "payment-plugin.customers.results", defaultMessage: "Showing {start}-{end} of {total} customers" },
+      {
+        start: startIndex + 1,
+        end: Math.min(endIndex, filteredCustomers.length),
+        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)) })
+    ] }) }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Pagination,
+      {
+        currentPage,
+        pageCount: totalPages,
+        onPageChange: setCurrentPage
+      }
+    ) })
+  ] });
+};
+exports.Customers = Customers;

package/dist/_chunks/Customers-C6FH7-zG.mjs

@@ -0,0 +1,273 @@
+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 { useIntl } from "react-intl";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID } from "./index-DS_PYNkf.mjs";
+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 [totalCount, setTotalCount] = useState(0);
+  const [filters, setFilters] = useState({
+    search: "",
+    country: "",
+    isActive: "",
+    registrationDateRange: { from: null, to: null }
+  });
+  useEffect(() => {
+    fetchCustomers();
+  }, [currentPage, pageSize, filters]);
+  useEffect(() => {
+    applyFilters();
+  }, [customers, filters]);
+  const fetchCustomers = async () => {
+    try {
+      setLoading(true);
+      const queryParams = new URLSearchParams({
+        page: currentPage.toString(),
+        pageSize: pageSize.toString(),
+        ...filters.search && { email: filters.search }
+      });
+      const { data } = await get(`/${PLUGIN_ID}/admin/customers?${queryParams}`);
+      if (data.success && data.data) {
+        const formattedCustomers = data.data.map((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,
+          registrationDate: c.createdAt,
+          isActive: true,
+          tags: []
+        }));
+        setCustomers(formattedCustomers);
+        setTotalCount(data.meta.pagination.total);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch 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.firstName} ${customer.lastName}`.toLowerCase().includes(searchLower) || customer.stripeCustomerId.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 formatCurrency = (amount, currency = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  };
+  const formatDate = (dateString) => {
+    try {
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch (e) {
+      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);
+  };
+  const clearFilters = () => {
+    setFilters({
+      search: "",
+      country: "",
+      isActive: "",
+      registrationDateRange: { from: null, to: null }
+    });
+    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.stripeCustomerId,
+        customer.email,
+        customer.firstName || "",
+        customer.lastName || "",
+        (customer.totalSpent / 100).toString(),
+        customer.paymentCount.toString(),
+        customer.lastPaymentDate ? formatDate(customer.lastPaymentDate) : "Never",
+        customer.isActive ? "Active" : "Inactive",
+        formatDate(customer.registrationDate)
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `customers-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    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, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, 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(
+      EmptyStateLayout,
+      {
+        title: "Error loading customers",
+        subtitle: error,
+        action: /* @__PURE__ */ jsx(Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, 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" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.customers.subtitle",
+          defaultMessage: "Manage and view customer information"
+        }) })
+      ] }),
+      /* @__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(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.search.placeholder",
+            defaultMessage: "Search customers..."
+          }),
+          value: filters.search,
+          onChange: (e) => handleFilterChange("search", e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
+        SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.status.placeholder",
+            defaultMessage: "All Statuses"
+          }),
+          value: filters.isActive,
+          onChange: (value) => handleFilterChange("isActive", value),
+          children: [
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.customers.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "active", children: formatMessage({ id: "payment-plugin.customers.active", defaultMessage: "Active" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "inactive", children: formatMessage({ id: "payment-plugin.customers.inactive", defaultMessage: "Inactive" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsxs(
+        SingleSelect,
+        {
+          placeholder: formatMessage({
+            id: "payment-plugin.customers.country.placeholder",
+            defaultMessage: "All Countries"
+          }),
+          value: filters.country,
+          onChange: (value) => handleFilterChange("country", value),
+          children: [
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.customers.all", defaultMessage: "All" }) }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "US", children: "United States" }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "CA", children: "Canada" }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "GB", children: "United Kingdom" }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "DE", children: "Germany" }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "FR", children: "France" })
+          ]
+        }
+      ) }),
+      /* @__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(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
+      }
+    ) }) }),
+    /* @__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)) })
+    ] }) }) }),
+    totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        currentPage,
+        pageCount: totalPages,
+        onPageChange: setCurrentPage
+      }
+    ) })
+  ] });
+};
+export {
+  Customers
+};