refactor(router): introduce app navigation manager

src/app/chat/hooks/use-first-recharge-offer-banner.ts

@@ -1,10 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 
 import type { LoginStatus } from "@/data/dto/auth";
-import { ROUTE_BUILDERS } from "@/router/routes";
+import { useAppNavigator } from "@/router/use-app-navigator";
 import { usePaymentDispatch, usePaymentState } from "@/stores/payment";
 import { useUserState } from "@/stores/user/user-context";
 import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
@@ -55,7 +54,7 @@ export function useFirstRechargeOfferBanner({
   historyLoaded,
   loginStatus,
 }: UseFirstRechargeOfferBannerInput): UseFirstRechargeOfferBannerOutput {
-  const router = useRouter();
+  const navigator = useAppNavigator();
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
   const userState = useUserState();
@@ -127,15 +126,7 @@ export function useFirstRechargeOfferBanner({
   }
 
   function claim(): void {
-    const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      userState.currentUser?.countryCode,
-    );
-    router.push(
-      ROUTE_BUILDERS.subscription("vip", {
-        payChannel: defaultPayChannel,
-        returnTo: "chat",
-      }),
-    );
+    navigator.openSubscription({ type: "vip", returnTo: "chat" });
   }
 
   return {