@reeboot/strapi-payment-plugin 0.0.5 → 0.0.7

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

@@ -5,7 +5,7 @@ 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-CHEgJ7e5.js");
+const index = require("./index-D-fFikb8.js");
 const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
   const { formatMessage } = reactIntl.useIntl();
   const formatCurrency = (amount, currency = "usd") => {
@@ -22,7 +22,7 @@ const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
     });
   };
   const getCustomerStatusBadge = (isActive) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", backgroundColor: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", variant: isActive ? "success" : "neutral", children: isActive ? "Active" : "Inactive" });
   };
   const getCustomerName = (customer) => {
     if (customer.first_name && customer.last_name) {
@@ -53,43 +53,13 @@ const CustomerList = ({ customers, onCustomerClick, compact = false }) => {
         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 }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: compact ? "normal" : "bold", children: getCustomerName(customer) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", fontFamily: "monospace", 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: /* @__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) })
         ]
       },
@@ -101,24 +71,19 @@ 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 pageSize = 25;
   const [totalCount, setTotalCount] = React.useState(0);
   const [filters, setFilters] = React.useState({
     search: "",
     country: "",
-    isActive: "",
-    registrationDateRange: { from: null, to: null }
+    isActive: ""
   });
   React.useEffect(() => {
     fetchCustomers();
-  }, [currentPage, pageSize, filters]);
-  React.useEffect(() => {
-    applyFilters();
-  }, [customers, filters]);
+  }, [currentPage, filters]);
   const fetchCustomers = async () => {
     try {
       setLoading(true);
@@ -140,7 +105,7 @@ const Customers = () => {
           tags: []
         }));
         setCustomers(formattedCustomers);
-        setTotalCount(data.meta.pagination.total);
+        setTotalCount(data.meta?.pagination?.total || 0);
       }
       setLoading(false);
     } catch (err) {
@@ -148,38 +113,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", {
@@ -187,7 +121,7 @@ const Customers = () => {
         month: "short",
         day: "numeric"
       });
-    } catch (e) {
+    } catch {
       return "Invalid Date";
     }
   };
@@ -196,26 +130,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");
@@ -227,10 +155,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__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
   }
@@ -238,8 +162,7 @@ const Customers = () => {
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
-        title: "Error loading customers",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchCustomers, children: formatMessage({ id: "payment-plugin.customers.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -262,6 +185,7 @@ const Customers = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.TextInput,
         {
+          label: formatMessage({ id: "payment-plugin.customers.search.label", defaultMessage: "Search" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.search.placeholder",
             defaultMessage: "Search customers..."
@@ -273,6 +197,7 @@ const Customers = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.customers.status.label", defaultMessage: "Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.status.placeholder",
             defaultMessage: "All Statuses"
@@ -289,6 +214,7 @@ const Customers = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.customers.country.label", defaultMessage: "Country" }),
           placeholder: formatMessage({
             id: "payment-plugin.customers.country.placeholder",
             defaultMessage: "All Countries"
@@ -305,31 +231,38 @@ const Customers = () => {
           ]
         }
       ) }),
-      /* @__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.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, alignItems: "flex-end", height: "100%", 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
-      }
+      { id: "payment-plugin.customers.results", defaultMessage: "{total} customers" },
+      { total: totalCount }
     ) }) }),
-    /* @__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,
-      {
-        currentPage,
-        pageCount: totalPages,
-        onPageChange: setCurrentPage
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CustomerList, { customers }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Pagination, { activePage: currentPage, pageCount: totalPages, label: "Customers pagination", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.PreviousLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.max(1, p - 1))
+        }
+      ),
+      Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.PageLink,
+        {
+          number: page,
+          as: "button",
+          onClick: () => setCurrentPage(page)
+        },
+        page
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.NextLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1))
+        }
+      )
+    ] }) }) })
   ] });
 };
 exports.Customers = Customers;

package/dist/_chunks/{Dashboard-UUwohHZa.js → Dashboard-CEif4jQn.js}

@@ -6,9 +6,9 @@ const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
 const reactIntl = require("react-intl");
-const index = require("./index-CHEgJ7e5.js");
 const stripeJs = require("@stripe/stripe-js");
-const PaymentList = require("./PaymentList-Dy1BAFoD.js");
+const index = require("./index-D-fFikb8.js");
+const PaymentList = require("./PaymentList-APfyYD1h.js");
 const Dashboard = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { get, post } = admin.useFetchClient();
@@ -17,25 +17,26 @@ const Dashboard = () => {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [creatingTest, setCreatingTest] = React.useState(false);
+  const [testMessage, setTestMessage] = React.useState(null);
   React.useEffect(() => {
     fetchDashboardData();
   }, []);
   const fetchDashboardData = async () => {
     try {
       setLoading(true);
+      setError(null);
       const { data } = await get(`/${index.PLUGIN_ID}/admin/dashboard`);
       if (data.success && data.data) {
+        const total = data.data.summary.totalPayments;
+        const succeeded = data.data.summary.successfulPayments;
+        const failed = data.data.summary.failedPayments;
         setStats({
           totalRevenue: data.data.summary.totalRevenue,
-          totalPayments: data.data.summary.totalPayments,
-          successfulPayments: data.data.summary.successfulPayments,
-          pendingPayments: data.data.summary.totalPayments - data.data.summary.successfulPayments - data.data.summary.failedPayments,
-          failedPayments: data.data.summary.failedPayments,
-          totalCustomers: data.data.topCustomers.length,
-          // Rough estimate
-          totalOrders: data.data.summary.totalPayments,
-          // Rough estimate
-          averageOrderValue: data.data.summary.totalPayments > 0 ? data.data.summary.totalRevenue / data.data.summary.totalPayments : 0
+          totalPayments: total,
+          successfulPayments: succeeded,
+          pendingPayments: Math.max(0, total - succeeded - failed),
+          failedPayments: failed,
+          averageOrderValue: total > 0 ? data.data.summary.totalRevenue / total : 0
         });
         const formattedPayments = data.data.recentTransactions.map((p) => ({
           ...p,
@@ -54,6 +55,7 @@ const Dashboard = () => {
   const createTestPayment = async () => {
     try {
       setCreatingTest(true);
+      setTestMessage(null);
       const { data } = await post(`/${index.PLUGIN_ID}/admin/create-sample-payment`);
       if (!data.success) throw new Error(data.error?.message || "Failed to process payment");
       const { publishableKey, clientSecret } = data.data;
@@ -64,22 +66,14 @@ const Dashboard = () => {
         throw new Error("Client secret not returned from server");
       }
       const stripe = await stripeJs.loadStripe(publishableKey);
-      if (stripe === null) {
-        throw new Error("Failed to load Stripe.js");
-      }
+      if (stripe === null) throw new Error("Failed to load Stripe.js");
       const elements = stripe.elements({
         clientSecret,
-        appearance: {
-          theme: "stripe"
-        }
-      });
-      const paymentElement = elements.create("payment", {
-        layout: "tabs"
+        appearance: { theme: "stripe" }
       });
+      const paymentElement = elements.create("payment", { layout: "tabs" });
       const existingModal = document.getElementById("stripe-payment-modal");
-      if (existingModal) {
-        document.body.removeChild(existingModal);
-      }
+      if (existingModal) document.body.removeChild(existingModal);
       const modal = document.createElement("div");
       modal.id = "stripe-payment-modal";
       Object.assign(modal.style, {
@@ -101,26 +95,19 @@ const Dashboard = () => {
         borderRadius: "8px",
         minWidth: "400px",
         maxWidth: "500px",
-        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
       });
       const title = document.createElement("h2");
       title.textContent = "Test Payment - $25.00";
-      title.style.marginBottom = "1.5rem";
-      title.style.fontSize = "1.25rem";
-      title.style.fontWeight = "600";
-      title.style.color = "#333";
+      title.style.cssText = "margin-bottom:1.5rem;font-size:1.25rem;font-weight:600;color:#333";
       container.appendChild(title);
       const form = document.createElement("form");
       const paymentContainer = document.createElement("div");
-      const elementId = `payment-element-${Date.now()}`;
-      paymentContainer.id = elementId;
-      paymentContainer.style.marginBottom = "1.5rem";
-      paymentContainer.style.minHeight = "200px";
+      paymentContainer.id = `payment-element-${Date.now()}`;
+      paymentContainer.style.cssText = "margin-bottom:1.5rem;min-height:200px";
       form.appendChild(paymentContainer);
       const buttonContainer = document.createElement("div");
-      buttonContainer.style.display = "flex";
-      buttonContainer.style.gap = "1rem";
-      buttonContainer.style.marginTop = "1rem";
+      buttonContainer.style.cssText = "display:flex;gap:1rem;margin-top:1rem";
       const submitButton = document.createElement("button");
       submitButton.type = "submit";
       submitButton.textContent = "Loading...";
@@ -135,7 +122,6 @@ const Dashboard = () => {
         cursor: "not-allowed",
         fontSize: "16px",
         fontWeight: "500",
-        transition: "background 0.2s",
         opacity: "0.7"
       });
       const cancelButton = document.createElement("button");
@@ -149,8 +135,7 @@ const Dashboard = () => {
         borderRadius: "4px",
         cursor: "pointer",
         fontSize: "16px",
-        fontWeight: "500",
-        transition: "background 0.2s"
+        fontWeight: "500"
       });
       cancelButton.onclick = () => {
         document.body.removeChild(modal);
@@ -162,61 +147,46 @@ const Dashboard = () => {
       container.appendChild(form);
       modal.appendChild(container);
       document.body.appendChild(modal);
-      try {
-        console.log("Mounting payment element to container:", paymentContainer);
-        paymentElement.mount(paymentContainer);
-      } catch (e) {
-        console.error("Error mounting payment element:", e);
-        alert("Failed to mount Stripe payment form");
-        document.body.removeChild(modal);
-        return;
-      }
+      paymentElement.mount(paymentContainer);
       paymentElement.on("ready", () => {
-        console.log("Payment Element is ready");
         submitButton.disabled = false;
         submitButton.textContent = "Pay $25.00";
         submitButton.style.cursor = "pointer";
         submitButton.style.opacity = "1";
       });
-      paymentElement.on("loaderror", (event) => {
-        console.error("Payment Element load error:", event);
-        const errorMessage = event?.error?.message || "Unknown error loading Stripe form";
-        alert(`Failed to load payment form: ${errorMessage}. Please check your keys and network.`);
-        document.body.removeChild(modal);
-      });
       setCreatingTest(false);
       form.onsubmit = async (e) => {
         e.preventDefault();
         submitButton.disabled = true;
         submitButton.textContent = "Processing...";
         try {
-          const result = await stripe.confirmPayment({
-            elements,
-            redirect: "if_required"
-          });
+          const result = await stripe.confirmPayment({ elements, redirect: "if_required" });
           if (result.error) {
-            alert(`Payment failed: ${result.error.message}`);
+            const errDiv = document.createElement("p");
+            errDiv.style.cssText = "color:#ef4444;margin-top:0.5rem;font-size:14px";
+            errDiv.textContent = `Payment failed: ${result.error.message}`;
+            form.appendChild(errDiv);
             submitButton.disabled = false;
             submitButton.textContent = "Pay $25.00";
-          } else if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
-            alert("Payment successful! ✓");
+          } else if (result.paymentIntent?.status === "succeeded") {
             document.body.removeChild(modal);
+            setTestMessage({ type: "success", text: "Test payment successful!" });
+            setTimeout(() => setTestMessage(null), 4e3);
             await fetchDashboardData();
           } else {
-            alert("Payment is being processed...");
             submitButton.disabled = false;
             submitButton.textContent = "Pay $25.00";
           }
         } catch (err) {
-          console.error("Payment confirmation error:", err);
-          alert(`Error: ${err instanceof Error ? err.message : "Payment confirmation failed"}`);
           submitButton.disabled = false;
           submitButton.textContent = "Pay $25.00";
         }
       };
     } catch (err) {
-      console.error("Payment initialization error:", err);
-      alert(err instanceof Error ? err.message : "An error occurred during payment initialization");
+      setTestMessage({
+        type: "error",
+        text: err instanceof Error ? err.message : "An error occurred during payment initialization"
+      });
       setCreatingTest(false);
     }
   };
@@ -233,8 +203,7 @@ const Dashboard = () => {
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
-        title: "Error loading dashboard",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -248,16 +217,26 @@ const Dashboard = () => {
           defaultMessage: "Overview of your payment operations"
         }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Button,
-        {
-          onClick: createTestPayment,
-          loading: creatingTest,
-          variant: "secondary",
-          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-          children: formatMessage({ id: "payment-plugin.dashboard.initPayment", defaultMessage: "Initialize Sample Payment" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-end", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: createTestPayment,
+            loading: creatingTest,
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+            children: formatMessage({ id: "payment-plugin.dashboard.initPayment", defaultMessage: "Initialize Sample Payment" })
+          }
+        ),
+        testMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Typography,
+          {
+            variant: "pi",
+            textColor: testMessage.type === "success" ? "success600" : "danger600",
+            children: testMessage.text
+          }
+        )
+      ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, marginBottom: 8, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", gap: 2, children: [
@@ -281,15 +260,12 @@ const Dashboard = () => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.successRate", defaultMessage: "Success Rate" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, { width: "1rem", height: "1rem" }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: [
-          stats ? Math.round(stats.successfulPayments / stats.totalPayments * 100) : 0,
-          "%"
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: stats && stats.totalPayments > 0 ? `${Math.round(stats.successfulPayments / stats.totalPayments * 100)}%` : "0%" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "success", children: "Good" })
       ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.averageOrderValue", defaultMessage: "AVO" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.averageOrderValue", defaultMessage: "Avg. Order Value" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "warning100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChartPie, { width: "1rem", height: "1rem" }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(stats?.averageOrderValue || 0) }),
@@ -302,7 +278,7 @@ const Dashboard = () => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: "payment-plugin.dashboard.recentPayments", defaultMessage: "Recent Payments" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Latest transactions from your customers" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", children: formatMessage({ id: "payment-plugin.dashboard.viewAll", defaultMessage: "View All" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.refresh", defaultMessage: "Refresh" }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(PaymentList.PaymentList, { payments: recentPayments, compact: true })
     ] }) })