From c3695e783722a005e0af87638881100481e76ffa Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Thu, 11 Jun 2026 13:29:40 -0700
Subject: [PATCH] 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 |  3 +++
 .../[search_space_id]/buy-more/page.tsx       |  6 ++++--
 .../user-settings/purchases/page.tsx          |  2 +-
 .../settings/auto-reload-settings.tsx}        | 21 +++++++------------
 4 files changed, 16 insertions(+), 16 deletions(-)
 rename surfsense_web/{app/dashboard/[search_space_id]/user-settings/components/AutoReloadSettings.tsx => components/settings/auto-reload-settings.tsx} (94%)

diff --git a/surfsense_backend/app/routes/stripe_routes.py b/surfsense_backend/app/routes/stripe_routes.py
index 69dabb311..23dce58cd 100644
--- a/surfsense_backend/app/routes/stripe_routes.py
+++ b/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,
diff --git a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
index da92cbdac..8ea4c1d7d 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
+++ b/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>
 	);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx
index b7468349b..55647fe29 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx
+++ b/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() {
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AutoReloadSettings.tsx b/surfsense_web/components/settings/auto-reload-settings.tsx
similarity index 94%
rename from surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AutoReloadSettings.tsx
rename to surfsense_web/components/settings/auto-reload-settings.tsx
index 9411b06d1..fbb7cbfb9 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AutoReloadSettings.tsx
+++ b/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;
 	}