refactor(app): split page orchestration flows

src/app/subscription/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 
-import { MobileShell } from "@/app/_components/core";
+import { PageLoadingFallback } from "@/app/_components/core";
 
 import { SubscriptionPageClient } from "./subscription-page-client";
 
@@ -14,19 +14,6 @@ export default function SubscriptionPage() {
 
 function SubscriptionFallback() {
   return (
-    <MobileShell>
-      <div
-        style={{
-          minHeight: "60vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "2rem",
-          color: "#666",
-        }}
-      >
-        Loading subscription...
-      </div>
-    </MobileShell>
+    <PageLoadingFallback>Loading subscription...</PageLoadingFallback>
   );
 }

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

@@ -2,16 +2,12 @@
 
 import { useEffect, useRef, useState } from "react";
 
-import {
-  clearPendingPaymentOrder,
-  getPendingPaymentOrderForType,
-} from "@/lib/payment/pending_payment_order";
+import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import {
   usePaymentDispatch,
   usePaymentState,
 } from "@/stores/payment/payment-context";
-import { useUserDispatch } from "@/stores/user/user-context";
 import type { PayChannel } from "@/data/dto/payment";
 
 import type { SubscriptionType } from "./subscription-screen.helpers";
@@ -30,16 +26,20 @@ export function useSubscriptionPaymentFlow({
   initialPayChannel,
 }: UseSubscriptionPaymentFlowInput) {
   const navigator = useAppNavigator();
-  const userDispatch = useUserDispatch();
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
-  const refreshedPaidOrderRef = useRef<string | null>(null);
-  const resumedPendingOrderRef = useRef<string | null>(null);
   const successDialogShownOrderRef = useRef<string | null>(null);
   const initialPayChannelAppliedRef = useRef(false);
   const [showPaymentSuccessDialog, setShowPaymentSuccessDialog] =
     useState(false);
 
+  usePaymentOrderLifecycle({
+    payment,
+    paymentDispatch,
+    paymentType: subscriptionType,
+    shouldResumePendingOrder,
+  });
+
   useEffect(() => {
     if (payment.status === "idle") {
       initialPayChannelAppliedRef.current = true;
@@ -68,13 +68,6 @@ export function useSubscriptionPaymentFlow({
     paymentDispatch,
   ]);
 
-  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]);
-
   useEffect(() => {
     if (!payment.isPaid || !payment.currentOrderId) return;
     if (successDialogShownOrderRef.current === payment.currentOrderId) return;
@@ -83,66 +76,6 @@ export function useSubscriptionPaymentFlow({
     setShowPaymentSuccessDialog(true);
   }, [payment.currentOrderId, payment.isPaid]);
 
-  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(subscriptionType);
-      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,
-    subscriptionType,
-  ]);
-
-  useEffect(() => {
-    if (!payment.currentOrderId) return;
-    if (!payment.isPaid && payment.status !== "failed") return;
-
-    void clearPendingPaymentOrder();
-  }, [payment.currentOrderId, payment.isPaid, payment.status]);
-
   const handleBackClick = () => {
     navigator.exitSubscription(returnTo);
   };