fix(subscription): allow return route prerendering

src/app/subscription/return/__tests__/page.test.tsx

@@ -0,0 +1,14 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: vi.fn() }),
+}));
+
+import SubscriptionReturnPage from "../page";
+
+describe("SubscriptionReturnPage", () => {
+  it("renders outside CharacterProvider", () => {
+    expect(() => renderToStaticMarkup(<SubscriptionReturnPage />)).not.toThrow();
+  });
+});

src/app/subscription/return/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 import { MobileShell } from "@/app/_components/core";
 import {
@@ -8,12 +9,11 @@ import {
   getPendingPaymentOrder,
 } from "@/lib/payment/pending_payment_order";
 import { ROUTES } from "@/router/routes";
-import { useAppNavigator } from "@/router/use-app-navigator";
 
 type ReturnStatus = "loading" | "missing";
 
 export default function SubscriptionReturnPage() {
-  const navigator = useAppNavigator();
+  const router = useRouter();
   const [status, setStatus] = useState<ReturnStatus>("loading");
 
   useEffect(() => {
@@ -24,7 +24,7 @@ export default function SubscriptionReturnPage() {
       if (cancelled) return;
 
       if (result.success && result.data !== null) {
-        navigator.replace(buildPendingPaymentSubscriptionUrl(result.data));
+        router.replace(buildPendingPaymentSubscriptionUrl(result.data));
         return;
       }
 
@@ -35,7 +35,7 @@ export default function SubscriptionReturnPage() {
     return () => {
       cancelled = true;
     };
-  }, [navigator]);
+  }, [router]);
 
   return (
     <MobileShell>
@@ -62,7 +62,7 @@ export default function SubscriptionReturnPage() {
         {status === "missing" ? (
           <button
             type="button"
-            onClick={() => navigator.replace(ROUTES.subscription)}
+            onClick={() => router.replace(ROUTES.subscription)}
             style={{
               marginTop: "0.5rem",
               padding: "0.75rem 1.5rem",

src/app/subscription/use-subscription-payment-flow.ts

@@ -1,12 +1,16 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 
 import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow";
-import { useAppNavigator } from "@/router/use-app-navigator";
 import type { PayChannel } from "@/data/schemas/payment";
 import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
-import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
+import {
+  consumeSubscriptionExitUrl,
+  resolveSubscriptionSuccessExitUrl,
+  type SubscriptionReturnTo,
+} from "@/lib/navigation/subscription_exit";
 
 import type { SubscriptionType } from "./subscription-screen.helpers";
 
@@ -25,7 +29,7 @@ export function useSubscriptionPaymentFlow({
   initialPayChannel,
   characterSlug = DEFAULT_CHARACTER_SLUG,
 }: UseSubscriptionPaymentFlowInput) {
-  const navigator = useAppNavigator();
+  const router = useRouter();
   const { payment, paymentDispatch } = usePaymentRouteFlow({
     initialPayChannel,
     paymentType: subscriptionType,
@@ -44,13 +48,21 @@ export function useSubscriptionPaymentFlow({
   }, [payment.currentOrderId, payment.isPaid]);
 
   const handleBackClick = () => {
-    navigator.exitSubscription(returnTo, characterSlug);
+    void (async () => {
+      router.replace(
+        await consumeSubscriptionExitUrl(returnTo, characterSlug),
+      );
+    })();
   };
 
   const handlePaymentSuccessClose = () => {
     setShowPaymentSuccessDialog(false);
     paymentDispatch({ type: "PaymentReset" });
-    navigator.exitSubscriptionAfterSuccess(returnTo, characterSlug);
+    void (async () => {
+      router.replace(
+        await resolveSubscriptionSuccessExitUrl(returnTo, characterSlug),
+      );
+    })();
   };
 
   return {