refactor(router): introduce app navigation manager

src/app/chat/chat-screen.tsx

@@ -2,18 +2,17 @@
 
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { useRouter } from "next/navigation";
 
 import { useAuthState } from "@/stores/auth/auth-context";
 import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
 import { useUserState } from "@/stores/user/user-context";
 import { ROUTES } from "@/router/routes";
+import { useAppNavigator } from "@/router/use-app-navigator";
 import {
   openChatInExternalBrowser,
   recordExternalBrowserPromptShown,
   resolveExternalBrowserPromptEligibility,
 } from "@/lib/chat/chat_external_browser";
-import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
 
 import { MobileShell } from "@/app/_components/core";
 
@@ -31,7 +30,6 @@ import {
 } from "./components";
 import {
   deriveIsGuest,
-  getChatPaywallNavigationUrl,
   getInsufficientCreditsSubscriptionType,
   isChatDevelopmentEnvironment,
   shouldStartExternalBrowserPrompt,
@@ -45,7 +43,7 @@ export function ChatScreen() {
   const chatDispatch = useChatDispatch();
   const authState = useAuthState();
   const userState = useUserState();
-  const router = useRouter();
+  const navigator = useAppNavigator();
   const [showExternalBrowserDialog, setShowExternalBrowserDialog] =
     useState(false);
   const {
@@ -122,16 +120,10 @@ export function ChatScreen() {
   }
 
   function handleMessageLimitUnlock(): void {
-    const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      userState.currentUser?.countryCode,
-    );
-    router.push(
-      getChatPaywallNavigationUrl(
-        authState.loginStatus,
-        getInsufficientCreditsSubscriptionType(userState.isVip),
-        defaultPayChannel,
-      ),
-    );
+    navigator.openSubscription({
+      type: getInsufficientCreditsSubscriptionType(userState.isVip),
+      returnTo: "chat",
+    });
   }
 
   function handleUnlockVoiceMessage(messageId: string): void {