@reeboot/strapi-payment-plugin 0.0.3 → 0.0.5

package/dist/_chunks/Dashboard-CuHC-dit.mjs

@@ -0,0 +1,311 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Flex, Loader, EmptyStateLayout, Button, Typography, Grid, Card, Badge } from "@strapi/design-system";
+import { Plus, PriceTag, ShoppingCart, ArrowClockwise, ChartPie } from "@strapi/icons";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { useIntl } from "react-intl";
+import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
+import { loadStripe } from "@stripe/stripe-js";
+import { P as PaymentList } from "./PaymentList-B0CAzInT.mjs";
+const Dashboard = () => {
+  const { formatMessage } = useIntl();
+  const { get, post } = useFetchClient();
+  const [stats, setStats] = useState(null);
+  const [recentPayments, setRecentPayments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [creatingTest, setCreatingTest] = useState(false);
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+  const fetchDashboardData = async () => {
+    try {
+      setLoading(true);
+      const { data } = await get(`/${PLUGIN_ID}/admin/dashboard`);
+      if (data.success && data.data) {
+        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
+        });
+        const formattedPayments = data.data.recentTransactions.map((p) => ({
+          ...p,
+          id: p.documentId,
+          customerEmail: p.customer?.email || "N/A",
+          customerName: p.customer ? `${p.customer.first_name || ""} ${p.customer.last_name || ""}`.trim() : void 0
+        }));
+        setRecentPayments(formattedPayments);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch dashboard data");
+      setLoading(false);
+    }
+  };
+  const createTestPayment = async () => {
+    try {
+      setCreatingTest(true);
+      const { data } = await post(`/${PLUGIN_ID}/admin/create-sample-payment`);
+      if (!data.success) throw new Error(data.error?.message || "Failed to process payment");
+      const { publishableKey, clientSecret } = data.data;
+      if (!publishableKey) {
+        throw new Error("Stripe publishable key not configured. Please configure it in plugin settings.");
+      }
+      if (!clientSecret) {
+        throw new Error("Client secret not returned from server");
+      }
+      const stripe = await loadStripe(publishableKey);
+      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"
+      });
+      const existingModal = document.getElementById("stripe-payment-modal");
+      if (existingModal) {
+        document.body.removeChild(existingModal);
+      }
+      const modal = document.createElement("div");
+      modal.id = "stripe-payment-modal";
+      Object.assign(modal.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100vw",
+        height: "100vh",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: "9999"
+      });
+      const container = document.createElement("div");
+      Object.assign(container.style, {
+        background: "#fff",
+        padding: "2rem",
+        borderRadius: "8px",
+        minWidth: "400px",
+        maxWidth: "500px",
+        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";
+      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";
+      form.appendChild(paymentContainer);
+      const buttonContainer = document.createElement("div");
+      buttonContainer.style.display = "flex";
+      buttonContainer.style.gap = "1rem";
+      buttonContainer.style.marginTop = "1rem";
+      const submitButton = document.createElement("button");
+      submitButton.type = "submit";
+      submitButton.textContent = "Loading...";
+      submitButton.disabled = true;
+      Object.assign(submitButton.style, {
+        flex: "1",
+        padding: "0.75rem",
+        background: "#635bff",
+        color: "white",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "not-allowed",
+        fontSize: "16px",
+        fontWeight: "500",
+        transition: "background 0.2s",
+        opacity: "0.7"
+      });
+      const cancelButton = document.createElement("button");
+      cancelButton.type = "button";
+      cancelButton.textContent = "Cancel";
+      Object.assign(cancelButton.style, {
+        padding: "0.75rem 1.5rem",
+        background: "#f3f4f6",
+        color: "#374151",
+        border: "1px solid #d1d5db",
+        borderRadius: "4px",
+        cursor: "pointer",
+        fontSize: "16px",
+        fontWeight: "500",
+        transition: "background 0.2s"
+      });
+      cancelButton.onclick = () => {
+        document.body.removeChild(modal);
+        paymentElement.unmount();
+      };
+      buttonContainer.appendChild(submitButton);
+      buttonContainer.appendChild(cancelButton);
+      form.appendChild(buttonContainer);
+      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.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"
+          });
+          if (result.error) {
+            alert(`Payment failed: ${result.error.message}`);
+            submitButton.disabled = false;
+            submitButton.textContent = "Pay $25.00";
+          } else if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
+            alert("Payment successful! ✓");
+            document.body.removeChild(modal);
+            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");
+      setCreatingTest(false);
+    }
+  };
+  const formatCurrency = (amount, currency = "USD") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency
+    }).format(amount);
+  };
+  if (loading) {
+    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, { children: /* @__PURE__ */ jsx(
+      EmptyStateLayout,
+      {
+        title: "Error loading dashboard",
+        subtitle: error,
+        action: /* @__PURE__ */ jsx(Button, { onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  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.dashboard.title", defaultMessage: "Payment Dashboard" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.dashboard.subtitle",
+          defaultMessage: "Overview of your payment operations"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: createTestPayment,
+          loading: creatingTest,
+          variant: "secondary",
+          startIcon: /* @__PURE__ */ jsx(Plus, {}),
+          children: formatMessage({ id: "payment-plugin.dashboard.initPayment", defaultMessage: "Initialize Sample Payment" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 8, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.totalRevenue", defaultMessage: "Total Revenue" }) }),
+          /* @__PURE__ */ jsx(Box, { padding: 2, background: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(PriceTag, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(stats?.totalRevenue || 0) }),
+        /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Active" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.totalPayments", defaultMessage: "Total Payments" }) }),
+          /* @__PURE__ */ jsx(Box, { padding: 2, background: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ShoppingCart, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats?.totalPayments || 0 }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Live" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.successRate", defaultMessage: "Success Rate" }) }),
+          /* @__PURE__ */ jsx(Box, { padding: 2, background: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ArrowClockwise, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "alpha", fontWeight: "bold", children: [
+          stats ? Math.round(stats.successfulPayments / stats.totalPayments * 100) : 0,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Good" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.averageOrderValue", defaultMessage: "AVO" }) }),
+          /* @__PURE__ */ jsx(Box, { padding: 2, background: "warning100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ChartPie, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(stats?.averageOrderValue || 0) }),
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: "Calculated" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: "payment-plugin.dashboard.recentPayments", defaultMessage: "Recent Payments" }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Latest transactions from your customers" })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", children: formatMessage({ id: "payment-plugin.dashboard.viewAll", defaultMessage: "View All" }) })
+      ] }),
+      /* @__PURE__ */ jsx(PaymentList, { payments: recentPayments, compact: true })
+    ] }) })
+  ] });
+};
+export {
+  Dashboard
+};

package/dist/_chunks/Dashboard-UUwohHZa.js

@@ -0,0 +1,311 @@
+"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 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 Dashboard = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get, post } = admin.useFetchClient();
+  const [stats, setStats] = React.useState(null);
+  const [recentPayments, setRecentPayments] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [creatingTest, setCreatingTest] = React.useState(false);
+  React.useEffect(() => {
+    fetchDashboardData();
+  }, []);
+  const fetchDashboardData = async () => {
+    try {
+      setLoading(true);
+      const { data } = await get(`/${index.PLUGIN_ID}/admin/dashboard`);
+      if (data.success && data.data) {
+        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
+        });
+        const formattedPayments = data.data.recentTransactions.map((p) => ({
+          ...p,
+          id: p.documentId,
+          customerEmail: p.customer?.email || "N/A",
+          customerName: p.customer ? `${p.customer.first_name || ""} ${p.customer.last_name || ""}`.trim() : void 0
+        }));
+        setRecentPayments(formattedPayments);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch dashboard data");
+      setLoading(false);
+    }
+  };
+  const createTestPayment = async () => {
+    try {
+      setCreatingTest(true);
+      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;
+      if (!publishableKey) {
+        throw new Error("Stripe publishable key not configured. Please configure it in plugin settings.");
+      }
+      if (!clientSecret) {
+        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");
+      }
+      const elements = stripe.elements({
+        clientSecret,
+        appearance: {
+          theme: "stripe"
+        }
+      });
+      const paymentElement = elements.create("payment", {
+        layout: "tabs"
+      });
+      const existingModal = document.getElementById("stripe-payment-modal");
+      if (existingModal) {
+        document.body.removeChild(existingModal);
+      }
+      const modal = document.createElement("div");
+      modal.id = "stripe-payment-modal";
+      Object.assign(modal.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100vw",
+        height: "100vh",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: "9999"
+      });
+      const container = document.createElement("div");
+      Object.assign(container.style, {
+        background: "#fff",
+        padding: "2rem",
+        borderRadius: "8px",
+        minWidth: "400px",
+        maxWidth: "500px",
+        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";
+      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";
+      form.appendChild(paymentContainer);
+      const buttonContainer = document.createElement("div");
+      buttonContainer.style.display = "flex";
+      buttonContainer.style.gap = "1rem";
+      buttonContainer.style.marginTop = "1rem";
+      const submitButton = document.createElement("button");
+      submitButton.type = "submit";
+      submitButton.textContent = "Loading...";
+      submitButton.disabled = true;
+      Object.assign(submitButton.style, {
+        flex: "1",
+        padding: "0.75rem",
+        background: "#635bff",
+        color: "white",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "not-allowed",
+        fontSize: "16px",
+        fontWeight: "500",
+        transition: "background 0.2s",
+        opacity: "0.7"
+      });
+      const cancelButton = document.createElement("button");
+      cancelButton.type = "button";
+      cancelButton.textContent = "Cancel";
+      Object.assign(cancelButton.style, {
+        padding: "0.75rem 1.5rem",
+        background: "#f3f4f6",
+        color: "#374151",
+        border: "1px solid #d1d5db",
+        borderRadius: "4px",
+        cursor: "pointer",
+        fontSize: "16px",
+        fontWeight: "500",
+        transition: "background 0.2s"
+      });
+      cancelButton.onclick = () => {
+        document.body.removeChild(modal);
+        paymentElement.unmount();
+      };
+      buttonContainer.appendChild(submitButton);
+      buttonContainer.appendChild(cancelButton);
+      form.appendChild(buttonContainer);
+      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.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"
+          });
+          if (result.error) {
+            alert(`Payment failed: ${result.error.message}`);
+            submitButton.disabled = false;
+            submitButton.textContent = "Pay $25.00";
+          } else if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
+            alert("Payment successful! ✓");
+            document.body.removeChild(modal);
+            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");
+      setCreatingTest(false);
+    }
+  };
+  const formatCurrency = (amount, currency = "USD") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency
+    }).format(amount);
+  };
+  if (loading) {
+    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, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.EmptyStateLayout,
+      {
+        title: "Error loading dashboard",
+        subtitle: error,
+        action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  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.dashboard.title", defaultMessage: "Payment Dashboard" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.dashboard.subtitle",
+          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.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: [
+        /* @__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.totalRevenue", defaultMessage: "Total Revenue" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.PriceTag, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(stats?.totalRevenue || 0) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "success", children: "Active" })
+      ] }) }) }),
+      /* @__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.totalPayments", defaultMessage: "Total Payments" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ShoppingCart, { width: "1rem", height: "1rem" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: stats?.totalPayments || 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "secondary", children: "Live" })
+      ] }) }) }),
+      /* @__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.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.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.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) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "neutral", children: "Calculated" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__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(PaymentList.PaymentList, { payments: recentPayments, compact: true })
+    ] }) })
+  ] });
+};
+exports.Dashboard = Dashboard;