@reeboot/strapi-payment-plugin 0.0.6 → 0.0.8

package/dist/_chunks/{Settings-BJtDagUs.js → Settings-B1tR3WOm.js}

@@ -6,7 +6,7 @@ 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 index = require("./index-D-fFikb8.js");
 const IntegrationModal = ({ onClose, publishableKey }) => {
   const [copied, setCopied] = React.useState(null);
   const copyToClipboard = (text, type) => {
@@ -199,10 +199,13 @@ const Settings = () => {
   const [saving, setSaving] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [success, setSuccess] = React.useState(null);
+  const [testStatus, setTestStatus] = React.useState("idle");
+  const [testMessage, setTestMessage] = React.useState("");
   const [hasChanges, setHasChanges] = React.useState(false);
   const [showIntegrationModal, setShowIntegrationModal] = React.useState(false);
   const [showSecretKey, setShowSecretKey] = React.useState(false);
   const [showWebhookSecret, setShowWebhookSecret] = React.useState(false);
+  const [showResetConfirm, setShowResetConfirm] = React.useState(false);
   React.useEffect(() => {
     fetchSettings();
   }, []);
@@ -211,51 +214,34 @@ const Settings = () => {
       setLoading(true);
       const { data } = await get(`/${index.PLUGIN_ID}/admin/config`);
       if (data.success && data.data) {
-        const backendConfig = data.data;
-        const initialSettings = {
+        const bc = data.data;
+        setSettings({
           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
+            publishableKey: bc.stripe?.publishableKey || "",
+            secretKey: bc.stripe?.secretKey || "",
+            webhookSecret: bc.stripe?.webhookSecret || "",
+            apiVersion: bc.stripe?.apiVersion || "2024-06-20",
+            enabled: bc.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
+            defaultCurrency: bc.payment?.defaultCurrency || "usd",
+            enableRefunds: bc.payment?.enableRefunds ?? true,
+            enablePartialRefunds: bc.payment?.enablePartialRefunds ?? true,
+            refundWindow: bc.payment?.refundWindow || 30,
+            captureMethod: bc.payment?.captureMethod || "automatic"
           },
           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) {
@@ -267,10 +253,7 @@ const Settings = () => {
     if (!settings) return;
     setSettings((prev) => ({
       ...prev,
-      [section]: {
-        ...prev[section],
-        [key]: value
-      }
+      [section]: { ...prev[section], [key]: value }
     }));
     setHasChanges(true);
     setSuccess(null);
@@ -280,14 +263,11 @@ const Settings = () => {
       setSaving(true);
       setError(null);
       if (!settings) return;
-      const payload = {
+      await put(`/${index.PLUGIN_ID}/admin/config`, {
         stripe: settings.stripe,
         payment: settings.payments,
-        logging: {
-          enableWebhookLogging: true
-        }
-      };
-      await put(`/${index.PLUGIN_ID}/admin/config`, payload);
+        logging: { enableWebhookLogging: true }
+      });
       setHasChanges(false);
       setSuccess("Settings saved successfully");
       setTimeout(() => setSuccess(null), 3e3);
@@ -297,32 +277,41 @@ const Settings = () => {
       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);
+      setTestStatus("idle");
       const { data } = await get(`/${index.PLUGIN_ID}/admin/config`);
       if (data.success) {
-        alert("Connection to backend successful!");
+        setTestStatus("success");
+        setTestMessage("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.");
+      setTestStatus("error");
+      setTestMessage("Connection test failed. Check your API keys and server logs.");
     } finally {
       setSaving(false);
+      setTimeout(() => setTestStatus("idle"), 4e3);
     }
   };
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text);
+  };
   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.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Alert,
+      {
+        variant: "danger",
+        closeLabel: formatMessage({ id: "payment-plugin.alert.close", defaultMessage: "Close alert" }),
+        onClose: () => setError(null),
+        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: [
@@ -333,45 +322,46 @@ const Settings = () => {
           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" })
-          }
-        )
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+        hasChanges && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "warning600", children: "Unsaved changes" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => setShowResetConfirm(true), 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 }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Alert,
+      {
+        variant: "danger",
+        closeLabel: formatMessage({ id: "payment-plugin.alert.close", defaultMessage: "Close alert" }),
+        onClose: () => setError(null),
+        children: error
+      }
+    ) }),
+    success && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Alert,
+      {
+        variant: "success",
+        closeLabel: formatMessage({ id: "payment-plugin.alert.close", defaultMessage: "Close alert" }),
+        onClose: () => setSuccess(null),
+        children: success
+      }
+    ) }),
+    testStatus !== "idle" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Alert,
+      {
+        variant: testStatus === "success" ? "success" : "danger",
+        closeLabel: formatMessage({ id: "payment-plugin.alert.close", defaultMessage: "Close alert" }),
+        onClose: () => setTestStatus("idle"),
+        children: testMessage
+      }
+    ) }),
     /* @__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(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" })
@@ -388,10 +378,8 @@ const Settings = () => {
                 designSystem.Button,
                 {
                   variant: "ghost",
-                  onClick: () => {
-                    navigator.clipboard.writeText(settings.stripe.publishableKey);
-                    alert("Copied to clipboard");
-                  },
+                  onClick: () => copyToClipboard(settings.stripe.publishableKey),
+                  "aria-label": "Copy publishable key",
                   children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
                 }
               )
@@ -411,6 +399,7 @@ const Settings = () => {
                   {
                     variant: "ghost",
                     onClick: () => setShowSecretKey(!showSecretKey),
+                    "aria-label": showSecretKey ? "Hide secret key" : "Show secret key",
                     children: showSecretKey ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { width: "1rem", height: "1rem" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, { width: "1rem", height: "1rem" })
                   }
                 ),
@@ -418,10 +407,8 @@ const Settings = () => {
                   designSystem.Button,
                   {
                     variant: "ghost",
-                    onClick: () => {
-                      navigator.clipboard.writeText(settings.stripe.secretKey);
-                      alert("Copied to clipboard");
-                    },
+                    onClick: () => copyToClipboard(settings.stripe.secretKey),
+                    "aria-label": "Copy secret key",
                     children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
                   }
                 )
@@ -442,6 +429,7 @@ const Settings = () => {
                   {
                     variant: "ghost",
                     onClick: () => setShowWebhookSecret(!showWebhookSecret),
+                    "aria-label": showWebhookSecret ? "Hide webhook secret" : "Show webhook secret",
                     children: showWebhookSecret ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { width: "1rem", height: "1rem" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, { width: "1rem", height: "1rem" })
                   }
                 ),
@@ -449,10 +437,8 @@ const Settings = () => {
                   designSystem.Button,
                   {
                     variant: "ghost",
-                    onClick: () => {
-                      navigator.clipboard.writeText(settings.stripe.webhookSecret);
-                      alert("Copied to clipboard");
-                    },
+                    onClick: () => copyToClipboard(settings.stripe.webhookSecret),
+                    "aria-label": "Copy webhook secret",
                     children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, { width: "1rem", height: "1rem" })
                   }
                 )
@@ -476,13 +462,13 @@ const Settings = () => {
             /* @__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)
+                checked: settings.stripe.enabled,
+                onCheckedChange: (checked) => handleSettingChange("stripe", "enabled", checked),
+                "aria-label": formatMessage({ id: "payment-plugin.settings.enabled", defaultMessage: "Enable Stripe Payments" })
               }
             ),
             /* @__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, { fontWeight: "bold", children: formatMessage({ id: "payment-plugin.settings.gatewayStatus", 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." })
             ] })
           ] }) }) })
@@ -539,9 +525,9 @@ const Settings = () => {
             /* @__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)
+                checked: settings.security.requireAuthentication,
+                onCheckedChange: (checked) => handleSettingChange("security", "requireAuthentication", checked),
+                "aria-label": formatMessage({ id: "payment-plugin.settings.requireAuth", defaultMessage: "Require Authentication" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
@@ -553,9 +539,9 @@ const Settings = () => {
             /* @__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)
+                checked: settings.security.enableAuditLog,
+                onCheckedChange: (checked) => handleSettingChange("security", "enableAuditLog", checked),
+                "aria-label": formatMessage({ id: "payment-plugin.settings.auditLog", defaultMessage: "Enable Audit Log" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
@@ -563,10 +549,13 @@ const Settings = () => {
               /* @__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(
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.TextInput,
             {
-              label: formatMessage({ id: "payment-plugin.settings.sessionTimeout", defaultMessage: "Checkout Session Timeout (Minutes)" }),
+              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)
@@ -576,62 +565,69 @@ const Settings = () => {
       ] }) }) }),
       /* @__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" })
-          ] }) })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: [
+          {
+            key: "showPaymentStatus",
+            label: formatMessage({ id: "payment-plugin.settings.showStatus", defaultMessage: "Payment Status" }),
+            hint: "Show status badges in lists",
+            value: settings.ui.showPaymentStatus
+          },
+          {
+            key: "showCustomerInfo",
+            label: formatMessage({ id: "payment-plugin.settings.showCustomerInfo", defaultMessage: "Customer Data" }),
+            hint: "Display sensitive customer info",
+            value: settings.ui.showCustomerInfo
+          },
+          {
+            key: "enableNotifications",
+            label: formatMessage({ id: "payment-plugin.settings.notifications", defaultMessage: "Notifications" }),
+            hint: "Browser alerts for success",
+            value: settings.ui.enableNotifications
+          },
+          {
+            key: "compactView",
+            label: formatMessage({ id: "payment-plugin.settings.compactView", defaultMessage: "Compact Mode" }),
+            hint: "Dense layout for tables",
+            value: settings.ui.compactView
+          }
+        ].map(({ key, label, hint, value }) => /* @__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: value,
+                onCheckedChange: (checked) => handleSettingChange("ui", key, checked),
+                "aria-label": label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: hint })
+        ] }) }, key)) })
       ] }) }) })
     ] }),
+    showResetConfirm && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: () => setShowResetConfirm(false), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", as: "h2", children: formatMessage({ id: "payment-plugin.settings.resetConfirm.title", defaultMessage: "Reset Settings?" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+        id: "payment-plugin.settings.resetConfirm.body",
+        defaultMessage: "This will reload settings from the server and discard all unsaved changes."
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => setShowResetConfirm(false), children: formatMessage({ id: "payment-plugin.settings.cancel", defaultMessage: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "danger-light",
+            onClick: () => {
+              setShowResetConfirm(false);
+              fetchSettings();
+              setHasChanges(false);
+            },
+            children: formatMessage({ id: "payment-plugin.settings.resetConfirm", defaultMessage: "Reset" })
+          }
+        )
+      ] })
+    ] }) }),
     showIntegrationModal && /* @__PURE__ */ jsxRuntime.jsx(
       IntegrationModal,
       {