@reeboot/strapi-payment-plugin 0.0.4 → 0.0.6

package/dist/_chunks/Settings-BJtDagUs.js

@@ -0,0 +1,644 @@
+"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 icons = require("@strapi/icons");
+const index = require("./index-CHEgJ7e5.js");
+const IntegrationModal = ({ onClose, publishableKey }) => {
+  const [copied, setCopied] = React.useState(null);
+  const copyToClipboard = (text, type) => {
+    navigator.clipboard.writeText(text);
+    setCopied(type);
+    setTimeout(() => setCopied(null), 2e3);
+  };
+  const installSnippet = `
+# Install required dependencies in your frontend app
+npm install @stripe/stripe-js @stripe/react-stripe-js
+  `.trim();
+  const stripeInitCode = `
+import { loadStripe } from '@stripe/stripe-js';
+
+// Initialize Stripe with your Publishable Key
+const stripePromise = loadStripe('${publishableKey || "YOUR_PUBLISHABLE_KEY"}');
+
+export default stripePromise;
+  `.trim();
+  const checkoutSnippet = `
+const handlePayment = async (amount) => {
+  // 1. Create a Payment Intent on your Strapi backend
+  // Replace YOUR_STRAPI_URL and YOUR_JWT_TOKEN
+  const STRAPI_URL = 'http://localhost:1337';
+  
+  const response = await fetch(\`\${STRAPI_URL}/api/payment-plugin/payments/create-intent\`, {
+    method: 'POST',
+    headers: { 
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer YOUR_JWT_TOKEN' // Required for Strapi Content API
+    },
+    body: JSON.stringify({
+      amount: amount, // Amount in cents (e.g., 2500 for $25.00)
+      currency: 'usd',
+      orderId: 'ORDER_123'
+    })
+  });
+
+  const { data, success } = await response.json();
+  if (!success) throw new Error('Failed to create PaymentIntent');
+
+  return data.clientSecret;
+};
+  `.trim();
+  const elementSnippet = `
+import React, { useState } from 'react';
+import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import stripePromise from './stripe-init'; // From Step 1
+
+const CheckoutForm = ({ clientSecret }) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) return;
+
+    setIsProcessing(true);
+    const result = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: window.location.origin + "/payment-success",
+      },
+    });
+
+    if (result.error) {
+      alert(result.error.message);
+    }
+    setIsProcessing(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <PaymentElement />
+      <button disabled={!stripe || isProcessing} style={{ marginTop: '1rem' }}>
+        {isProcessing ? 'Processing...' : 'Pay Now'}
+      </button>
+    </form>
+  );
+};
+  `.trim();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: "Frontend Integration Guide" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", marginBottom: 4, display: "block", children: "Follow these 4 steps to integrate Stripe payments into your React/Next.js frontend." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { defaultValue: "setup", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "setup", children: "1. Setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "backend", children: "2. Backend" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "frontend", children: "3. Frontend" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "perms", children: "4. Permissions" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginTop: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "setup", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", display: "block", marginBottom: 2, children: "INSTALL DEPENDENCIES" }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { marginBottom: "1rem", fontSize: "0.75rem", overflowX: "auto", padding: "10px", background: "#27272a", color: "#f8fafc", borderRadius: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: installSnippet }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "INITIALIZE STRIPE" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "ghost",
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {}),
+                  onClick: () => copyToClipboard(stripeInitCode, "init"),
+                  children: copied === "init" ? "Copied!" : "Copy"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, fontSize: "0.75rem", overflowX: "auto", padding: "10px", background: "#27272a", color: "#f8fafc", borderRadius: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: stripeInitCode }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "backend", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "GET CLIENT SECRET" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "ghost",
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {}),
+                  onClick: () => copyToClipboard(checkoutSnippet, "backend"),
+                  children: copied === "backend" ? "Copied!" : "Copy"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, fontSize: "0.75rem", overflowX: "auto", padding: "10px", background: "#27272a", color: "#f8fafc", borderRadius: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: checkoutSnippet }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "frontend", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "REACT CHECKOUT FORM" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "ghost",
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {}),
+                  onClick: () => copyToClipboard(elementSnippet, "frontend"),
+                  children: copied === "frontend" ? "Copied!" : "Copy"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, fontSize: "0.75rem", overflowX: "auto", padding: "10px", background: "#27272a", color: "#f8fafc", borderRadius: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: elementSnippet }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "perms", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral100", borderRadius: "4px", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", marginBottom: 2, display: "block", tag: "h3", children: "Crucial: API Permissions" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", marginBottom: 4, display: "block", children: "By default, Strapi blocks all public access to the Content API. You must enable permissions for your frontend to interact with the plugin:" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", display: "block", marginBottom: 1, children: [
+                "1. Go to ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Settings" }),
+                " > ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Users & Permissions Plugin" }),
+                " > ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Roles" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", display: "block", marginBottom: 1, children: [
+                "2. Edit the ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Authenticated" }),
+                " or ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Public" }),
+                " role"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", display: "block", marginBottom: 1, children: [
+                "3. Find the ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Payment-plugin" }),
+                " section"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", display: "block", marginBottom: 1, children: [
+                "4. Enable ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "createPaymentIntent" }),
+                " and ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "confirmPayment" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", display: "block", marginBottom: 1, children: [
+                "5. Click ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Save" }),
+                " at the top right"
+              ] })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Close" }) })
+  ] }) });
+};
+const Settings = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get, put } = admin.useFetchClient();
+  const [settings, setSettings] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(null);
+  const [hasChanges, setHasChanges] = React.useState(false);
+  const [showIntegrationModal, setShowIntegrationModal] = React.useState(false);
+  const [showSecretKey, setShowSecretKey] = React.useState(false);
+  const [showWebhookSecret, setShowWebhookSecret] = React.useState(false);
+  React.useEffect(() => {
+    fetchSettings();
+  }, []);
+  const fetchSettings = async () => {
+    try {
+      setLoading(true);
+      const { data } = await get(`/${index.PLUGIN_ID}/admin/config`);
+      if (data.success && data.data) {
+        const backendConfig = data.data;
+        const initialSettings = {
+          stripe: {
+            publishableKey: backendConfig.stripe?.publishableKey || "",
+            secretKey: backendConfig.stripe?.secretKey || "",
+            webhookSecret: backendConfig.stripe?.webhookSecret || "",
+            apiVersion: backendConfig.stripe?.apiVersion || "2023-10-16",
+            enabled: backendConfig.stripe?.enabled ?? true
+          },
+          payments: {
+            defaultCurrency: backendConfig.payment?.defaultCurrency || "usd",
+            supportedCurrencies: backendConfig.payment?.supportedCurrencies || ["usd"],
+            enableRefunds: backendConfig.payment?.enableRefunds ?? true,
+            enablePartialRefunds: backendConfig.payment?.enablePartialRefunds ?? true,
+            refundWindow: backendConfig.payment?.refundWindow || 30,
+            captureMethod: backendConfig.payment?.captureMethod || "automatic",
+            confirmationMethod: backendConfig.payment?.confirmationMethod || "automatic"
+          },
+          webhooks: {
+            enabled: true,
+            endpoints: {
+              paymentSucceeded: "",
+              paymentFailed: "",
+              refundCreated: "",
+              invoiceCreated: ""
+            },
+            retries: 3,
+            timeout: 30
+          },
+          ui: {
+            showPaymentStatus: true,
+            showCustomerInfo: true,
+            enableNotifications: true,
+            theme: "auto",
+            compactView: false
+          },
+          security: {
+            enableIpFiltering: false,
+            allowedIps: [],
+            requireAuthentication: true,
+            enableAuditLog: true,
+            sessionTimeout: 60
+          }
+        };
+        setSettings(initialSettings);
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch settings");
+      setLoading(false);
+    }
+  };
+  const handleSettingChange = (section, key, value) => {
+    if (!settings) return;
+    setSettings((prev) => ({
+      ...prev,
+      [section]: {
+        ...prev[section],
+        [key]: value
+      }
+    }));
+    setHasChanges(true);
+    setSuccess(null);
+  };
+  const saveSettings = async () => {
+    try {
+      setSaving(true);
+      setError(null);
+      if (!settings) return;
+      const payload = {
+        stripe: settings.stripe,
+        payment: settings.payments,
+        logging: {
+          enableWebhookLogging: true
+        }
+      };
+      await put(`/${index.PLUGIN_ID}/admin/config`, payload);
+      setHasChanges(false);
+      setSuccess("Settings saved successfully");
+      setTimeout(() => setSuccess(null), 3e3);
+    } catch (err) {
+      setError("Failed to save settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const resetSettings = () => {
+    if (confirm("Are you sure you want to reset all settings to default? This action cannot be undone.")) {
+      fetchSettings();
+      setHasChanges(false);
+    }
+  };
+  const testConnection = async () => {
+    try {
+      setSaving(true);
+      const { data } = await get(`/${index.PLUGIN_ID}/admin/config`);
+      if (data.success) {
+        alert("Connection to backend successful!");
+      } else {
+        throw new Error("Failed to connect");
+      }
+    } catch (err) {
+      alert("Connection test failed. Please check your API keys and server logs.");
+    } finally {
+      setSaving(false);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", children: formatMessage({ id: "payment-plugin.settings.loading", defaultMessage: "Loading settings..." }) }) }) });
+  }
+  if (!settings) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", children: formatMessage({ id: "payment-plugin.settings.error", defaultMessage: "Failed to load settings" }) }) });
+  }
+  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.settings.title", defaultMessage: "Payment Settings" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.settings.subtitle",
+          defaultMessage: "Configure your payment plugin settings"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        hasChanges && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "warning600", children: "Unsaved changes" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: resetSettings, children: formatMessage({ id: "payment-plugin.settings.reset", defaultMessage: "Reset" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "secondary",
+            onClick: testConnection,
+            disabled: saving,
+            children: formatMessage({ id: "payment-plugin.settings.testConnection", defaultMessage: "Test Connection" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: saveSettings,
+            disabled: !hasChanges || saving,
+            loading: saving,
+            children: formatMessage({ id: "payment-plugin.settings.save", defaultMessage: "Save Settings" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "tertiary",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Code, {}),
+            onClick: () => setShowIntegrationModal(true),
+            children: formatMessage({ id: "payment-plugin.settings.integration", defaultMessage: "Integration Guide" })
+          }
+        )
+      ] })
+    ] }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", onClose: () => setError(null), children: error }) }),
+    success && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "success", onClose: () => setSuccess(null), children: success }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: "primary600", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Key, { width: "1.5rem", height: "1.5rem" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: "payment-plugin.settings.stripe", defaultMessage: "Stripe API Configuration" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: settings.stripe.enabled ? "success" : "neutral", children: settings.stripe.enabled ? "Stripe Active" : "Stripe Disabled" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.publishableKey", defaultMessage: "Publishable Key" }),
+              placeholder: "pk_test_...",
+              value: settings.stripe.publishableKey,
+              onChange: (e) => handleSettingChange("stripe", "publishableKey", e.target.value),
+              endAction: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "ghost",
+                  onClick: () => {
+                    navigator.clipboard.writeText(settings.stripe.publishableKey);
+                    alert("Copied to clipboard");
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.secretKey", defaultMessage: "Secret Key" }),
+              placeholder: "sk_test_...",
+              value: settings.stripe.secretKey,
+              onChange: (e) => handleSettingChange("stripe", "secretKey", e.target.value),
+              type: showSecretKey ? "text" : "password",
+              endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => setShowSecretKey(!showSecretKey),
+                    children: showSecretKey ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { width: "1rem", height: "1rem" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, { width: "1rem", height: "1rem" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => {
+                      navigator.clipboard.writeText(settings.stripe.secretKey);
+                      alert("Copied to clipboard");
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
+                  }
+                )
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.webhookSecret", defaultMessage: "Webhook Secret" }),
+              placeholder: "whsec_...",
+              value: settings.stripe.webhookSecret,
+              onChange: (e) => handleSettingChange("stripe", "webhookSecret", e.target.value),
+              type: showWebhookSecret ? "text" : "password",
+              endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => setShowWebhookSecret(!showWebhookSecret),
+                    children: showWebhookSecret ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { width: "1rem", height: "1rem" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, { width: "1rem", height: "1rem" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => {
+                      navigator.clipboard.writeText(settings.stripe.webhookSecret);
+                      alert("Copied to clipboard");
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
+                  }
+                )
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.SingleSelect,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.apiVersion", defaultMessage: "API Version" }),
+              value: settings.stripe.apiVersion,
+              onChange: (value) => handleSettingChange("stripe", "apiVersion", value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "2024-06-20", children: "2024-06-20 (Latest)" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "2023-10-16", children: "2023-10-16" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "2023-08-15", children: "2023-08-15" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, background: "neutral100", borderRadius: "4px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Switch,
+              {
+                label: formatMessage({ id: "payment-plugin.settings.enabled", defaultMessage: "Enable Stripe Payments" }),
+                selected: settings.stripe.enabled,
+                onChange: () => handleSettingChange("stripe", "enabled", !settings.stripe.enabled)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.enabled", defaultMessage: "Payment Gateway Status" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.stripe.enabled ? "Your plugin is currently accepting payments through Stripe." : "Stripe payments are disabled. Customers will not be able to checkout." })
+            ] })
+          ] }) }) })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", marginBottom: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Globe, { width: "1.25rem", height: "1.25rem" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: "payment-plugin.settings.payments", defaultMessage: "Default Rules" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.SingleSelect,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.defaultCurrency", defaultMessage: "Default Currency" }),
+              value: settings.payments.defaultCurrency,
+              onChange: (value) => handleSettingChange("payments", "defaultCurrency", value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "usd", children: "USD" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "eur", children: "EUR" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "gbp", children: "GBP" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "cad", children: "CAD" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "aud", children: "AUD" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.SingleSelect,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.captureMethod", defaultMessage: "Capture Method" }),
+              value: settings.payments.captureMethod,
+              onChange: (value) => handleSettingChange("payments", "captureMethod", value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "automatic", children: "Automatic (Direct capture)" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "manual", children: "Manual (Authorize only)" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.refundWindow", defaultMessage: "Max Refund Window (Days)" }),
+              type: "number",
+              value: settings.payments.refundWindow.toString(),
+              onChange: (e) => handleSettingChange("payments", "refundWindow", parseInt(e.target.value) || 0)
+            }
+          ) })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.settings.security", defaultMessage: "Security Settings" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Switch,
+              {
+                label: formatMessage({ id: "payment-plugin.settings.requireAuth", defaultMessage: "Require Authentication" }),
+                selected: settings.security.requireAuthentication,
+                onChange: () => handleSettingChange("security", "requireAuthentication", !settings.security.requireAuthentication)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.requireAuth", defaultMessage: "Public Access Restriction" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.security.requireAuthentication ? "Only authenticated users can initiate payments." : "Public users can initiate payments without login." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Switch,
+              {
+                label: formatMessage({ id: "payment-plugin.settings.auditLog", defaultMessage: "Enable Audit Log" }),
+                selected: settings.security.enableAuditLog,
+                onChange: () => handleSettingChange("security", "enableAuditLog", !settings.security.enableAuditLog)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.auditLog", defaultMessage: "Activity Logging" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Detailed logs of all transaction attempts and configuration changes." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              label: formatMessage({ id: "payment-plugin.settings.sessionTimeout", defaultMessage: "Checkout Session Timeout (Minutes)" }),
+              type: "number",
+              value: settings.security.sessionTimeout.toString(),
+              onChange: (e) => handleSettingChange("security", "sessionTimeout", parseInt(e.target.value) || 60)
+            }
+          ) })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.settings.ui", defaultMessage: "Admin Interface Customization" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: settings.ui.showPaymentStatus,
+                  onChange: (checked) => handleSettingChange("ui", "showPaymentStatus", checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.showStatus", defaultMessage: "Payment Status" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Show status badges in lists" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: settings.ui.showCustomerInfo,
+                  onChange: (checked) => handleSettingChange("ui", "showCustomerInfo", checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.showCustomerInfo", defaultMessage: "Customer Data" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Display sensitive customer info" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: settings.ui.enableNotifications,
+                  onChange: (checked) => handleSettingChange("ui", "enableNotifications", checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.notifications", defaultMessage: "Notifications" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Browser alerts for success" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: settings.ui.compactView,
+                  onChange: (checked) => handleSettingChange("ui", "compactView", checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.compactView", defaultMessage: "Compact Mode" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Dense layout for tables" })
+          ] }) })
+        ] })
+      ] }) }) })
+    ] }),
+    showIntegrationModal && /* @__PURE__ */ jsxRuntime.jsx(
+      IntegrationModal,
+      {
+        publishableKey: settings.stripe.publishableKey,
+        onClose: () => setShowIntegrationModal(false)
+      }
+    )
+  ] });
+};
+exports.Settings = Settings;