refactor(router): centralize app route transitions

src/app/subscription/return/page.tsx

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

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

@@ -1,16 +1,12 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
 
-import {
-  consumeSubscriptionExitUrl,
-  peekSubscriptionExplicitExitUrl,
-} from "@/lib/navigation/subscription_exit";
 import {
   clearPendingPaymentOrder,
   getPendingPaymentOrderForType,
 } from "@/lib/payment/pending_payment_order";
+import { useAppNavigator } from "@/router/use-app-navigator";
 import {
   usePaymentDispatch,
   usePaymentState,
@@ -33,7 +29,7 @@ export function useSubscriptionPaymentFlow({
   returnTo,
   initialPayChannel,
 }: UseSubscriptionPaymentFlowInput) {
-  const router = useRouter();
+  const navigator = useAppNavigator();
   const userDispatch = useUserDispatch();
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
@@ -148,22 +144,13 @@ export function useSubscriptionPaymentFlow({
   }, [payment.currentOrderId, payment.isPaid, payment.status]);
 
   const handleBackClick = () => {
-    void (async () => {
-      router.replace(await consumeSubscriptionExitUrl(returnTo));
-    })();
+    navigator.exitSubscription(returnTo);
   };
 
   const handlePaymentSuccessClose = () => {
-    void (async () => {
-      setShowPaymentSuccessDialog(false);
-      paymentDispatch({ type: "PaymentReset" });
-      const pendingExitUrl = await peekSubscriptionExplicitExitUrl();
-      if (pendingExitUrl) {
-        router.replace(pendingExitUrl);
-        return;
-      }
-      router.replace(await consumeSubscriptionExitUrl(returnTo));
-    })();
+    setShowPaymentSuccessDialog(false);
+    paymentDispatch({ type: "PaymentReset" });
+    navigator.exitSubscriptionAfterSuccess(returnTo);
   };
 
   return {