refactor(payment): centralize route lifecycle

src/app/tip/tip-screen.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Image from "next/image";
 import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
 import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
-import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
 import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
+import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow";
 import type { PayChannel } from "@/data/dto/payment";
 import {
   behaviorAnalytics,
@@ -22,10 +22,6 @@ import {
 } from "@/lib/tip/tip_coffee";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import { useAuthState } from "@/stores/auth/auth-context";
-import {
-  usePaymentDispatch,
-  usePaymentState,
-} from "@/stores/payment/payment-context";
 
 import { TipCheckoutButton } from "./tip-checkout-button";
 import {
@@ -57,15 +53,18 @@ export function TipScreen({
 }: TipScreenProps) {
   const navigator = useAppNavigator();
   const authState = useAuthState();
-  const payment = usePaymentState();
-  const paymentDispatch = usePaymentDispatch();
-  const initialPayChannelAppliedRef = useRef(false);
   const [selectedCoffeeType, setSelectedCoffeeType] =
     useState<TipCoffeeType>(coffeeType);
   const coffeeOption = getTipCoffeeOption(selectedCoffeeType);
   const returnPath = buildTipCoffeePath(selectedCoffeeType);
   const resolvedInitialPayChannel =
     initialPayChannel ?? navigator.getDefaultPayChannel();
+  const { payment, paymentDispatch } = usePaymentRouteFlow({
+    catalog: "tip",
+    initialPayChannel: resolvedInitialPayChannel,
+    paymentType: "tip",
+    shouldResumePendingOrder,
+  });
 
   const coffeeTiers = useMemo(
     () =>
@@ -113,39 +112,6 @@ export function TipScreen({
     payment.status !== "ready" || payment.isLoadingPlans || isPaymentBusy;
   const isAuthLoading = !authState.hasInitialized || authState.isLoading;
 
-  usePaymentOrderLifecycle({
-    payment,
-    paymentDispatch,
-    paymentType: "tip",
-    shouldResumePendingOrder,
-  });
-
-  useEffect(() => {
-    if (payment.status === "idle") {
-      initialPayChannelAppliedRef.current = true;
-      paymentDispatch({
-        type: "PaymentInit",
-        catalog: "tip",
-        payChannel: resolvedInitialPayChannel,
-      });
-      return;
-    }
-
-    if (!initialPayChannelAppliedRef.current && payment.status === "ready") {
-      initialPayChannelAppliedRef.current = true;
-      if (payment.payChannel === resolvedInitialPayChannel) return;
-      paymentDispatch({
-        type: "PaymentPayChannelChanged",
-        payChannel: resolvedInitialPayChannel,
-      });
-    }
-  }, [
-    payment.payChannel,
-    payment.status,
-    paymentDispatch,
-    resolvedInitialPayChannel,
-  ]);
-
   useEffect(() => {
     if (payment.isLoadingPlans || payment.isCreatingOrder || payment.isPollingOrder) {
       return;