feat: update auto-reload settings and enhance payment session creation

- Added currency parameter to the Stripe checkout session for auto-reload setup.
- Integrated AutoReloadSettings component into the BuyMorePage for improved user experience.
- Removed deprecated AutoReloadSettings component from user settings directory.
- Updated import paths for AutoReloadSettings in purchases page to reflect new structure.

surfsense_backend/app/routes/stripe_routes.py

@@ -837,6 +837,9 @@ async def create_auto_reload_setup_session(
         checkout_session = stripe_client.v1.checkout.sessions.create(
             params={
                 "mode": "setup",
+                # Required in setup mode when payment_method_types is omitted
+                # (dynamic payment methods); auto-reload charges are in USD.
+                "currency": "usd",
                 "success_url": success_url,
                 "cancel_url": cancel_url,
                 "customer": customer_id,

surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { AutoReloadSettings } from "@/components/settings/auto-reload-settings";
 import { BuyCreditsContent } from "@/components/settings/buy-credits-content";
 
 export default function BuyMorePage() {
 	return (
-		<div className="flex min-h-[37rem] w-full select-none items-center justify-center">
-			<div className="w-full max-w-md">
+		<div className="flex min-h-[37rem] w-full select-none items-center justify-center py-8">
+			<div className="w-full max-w-md space-y-8">
 				<BuyCreditsContent />
+				<AutoReloadSettings />
 			</div>
 		</div>
 	);

surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx

@@ -1,4 +1,4 @@
-import { AutoReloadSettings } from "../components/AutoReloadSettings";
+import { AutoReloadSettings } from "@/components/settings/auto-reload-settings";
 import { PurchaseHistoryContent } from "../components/PurchaseHistoryContent";
 
 export default function Page() {

surfsense_web/components/settings/auto-reload-settings.tsx

@@ -3,7 +3,7 @@
 import { useQuery as useZeroQuery } from "@rocicorp/zero/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertTriangle, CreditCard, RefreshCw } from "lucide-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -35,6 +35,7 @@ const formatUsd = (micros: number) => `$${(Math.max(0, micros) / 1_000_000).toFi
 export function AutoReloadSettings() {
 	const params = useParams();
 	const router = useRouter();
+	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const queryClient = useQueryClient();
 	const searchSpaceId = Number(params?.search_space_id);
@@ -73,8 +74,8 @@ export function AutoReloadSettings() {
 			toast.info("Card setup canceled.");
 		}
 		// Strip the query param so refreshes don't re-toast.
-		router.replace(`/dashboard/${searchSpaceId}/user-settings/purchases`);
-	}, [searchParams, router, searchSpaceId, queryClient]);
+		router.replace(pathname);
+	}, [searchParams, router, pathname, queryClient]);
 
 	const setupMutation = useMutation({
 		mutationFn: () =>
@@ -102,16 +103,10 @@ export function AutoReloadSettings() {
 		},
 	});
 
-	if (isLoading || !settings) {
-		return (
-			<div className="flex items-center justify-center py-8">
-				<Spinner size="md" className="text-muted-foreground" />
-			</div>
-		);
-	}
-
-	// Server-side feature flag: hide the whole card when auto-reload is off.
-	if (!settings.feature_enabled) {
+	// Render nothing while loading (avoids a spinner flash on pages where the
+	// feature flag turns out to be off) and when auto-reload is disabled
+	// server-side.
+	if (isLoading || !settings || !settings.feature_enabled) {
 		return null;
 	}