refactor(app): split page orchestration flows

src/app/tip/tip-screen.tsx

@@ -5,11 +5,8 @@ import Image from "next/image";
 import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
 import { MobileShell } from "@/app/_components/core";
+import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
 import type { PayChannel } from "@/data/dto/payment";
-import {
-  clearPendingPaymentOrder,
-  getPendingPaymentOrderForType,
-} from "@/lib/payment/pending_payment_order";
 import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import { useAuthState } from "@/stores/auth/auth-context";
@@ -17,7 +14,7 @@ import {
   usePaymentDispatch,
   usePaymentState,
 } from "@/stores/payment/payment-context";
-import { useUserDispatch, useUserState } from "@/stores/user/user-context";
+import { useUserState } from "@/stores/user/user-context";
 
 import { TipCheckoutButton } from "./tip-checkout-button";
 import {
@@ -39,12 +36,9 @@ export function TipScreen({
   const navigator = useAppNavigator();
   const authState = useAuthState();
   const userState = useUserState();
-  const userDispatch = useUserDispatch();
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
   const initialPayChannelAppliedRef = useRef(false);
-  const resumedPendingOrderRef = useRef<string | null>(null);
-  const refreshedPaidOrderRef = useRef<string | null>(null);
   const resolvedInitialPayChannel =
     initialPayChannel ?? navigator.getDefaultPayChannel();
 
@@ -66,6 +60,13 @@ export function TipScreen({
     payment.status === "ready" && !payment.isLoadingPlans && coffeePlan === null;
   const isAuthLoading = !authState.hasInitialized || authState.isLoading;
 
+  usePaymentOrderLifecycle({
+    payment,
+    paymentDispatch,
+    paymentType: "tip",
+    shouldResumePendingOrder,
+  });
+
   useEffect(() => {
     if (payment.status === "idle") {
       initialPayChannelAppliedRef.current = true;
@@ -124,72 +125,6 @@ export function TipScreen({
     paymentDispatch,
   ]);
 
-  useEffect(() => {
-    const canInspectPendingOrder =
-      payment.status === "ready" ||
-      (!shouldResumePendingOrder &&
-        (payment.isPollingOrder ||
-          payment.isPaid ||
-          payment.status === "failed"));
-    if (!canInspectPendingOrder) return;
-
-    let cancelled = false;
-
-    const handlePendingOrder = async () => {
-      const result = await getPendingPaymentOrderForType("tip");
-      if (cancelled || !result.success || result.data === null) return;
-
-      if (!shouldResumePendingOrder) {
-        await clearPendingPaymentOrder();
-        if (
-          payment.currentOrderId === result.data.orderId &&
-          (payment.isPollingOrder ||
-            payment.isPaid ||
-            payment.status === "failed")
-        ) {
-          paymentDispatch({ type: "PaymentReset" });
-        }
-        return;
-      }
-
-      if (payment.currentOrderId === result.data.orderId) return;
-      if (resumedPendingOrderRef.current === result.data.orderId) return;
-
-      resumedPendingOrderRef.current = result.data.orderId;
-      paymentDispatch({
-        type: "PaymentReturned",
-        orderId: result.data.orderId,
-        createdAt: result.data.createdAt,
-      });
-    };
-
-    void handlePendingOrder();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    payment.currentOrderId,
-    payment.isPaid,
-    payment.isPollingOrder,
-    payment.status,
-    paymentDispatch,
-    shouldResumePendingOrder,
-  ]);
-
-  useEffect(() => {
-    if (!payment.currentOrderId) return;
-    if (!payment.isPaid && payment.status !== "failed") return;
-
-    void clearPendingPaymentOrder();
-  }, [payment.currentOrderId, payment.isPaid, payment.status]);
-
-  useEffect(() => {
-    if (!payment.isPaid || !payment.currentOrderId) return;
-    if (refreshedPaidOrderRef.current === payment.currentOrderId) return;
-    refreshedPaidOrderRef.current = payment.currentOrderId;
-    userDispatch({ type: "UserFetch" });
-  }, [payment.currentOrderId, payment.isPaid, userDispatch]);
-
   const handleOrder = () => {
     if (isAuthLoading) return;
     if (!isRealLoginStatus(authState.loginStatus)) {