feat(app): improve payment and paywall UX

src/app/subscription/subscription-screen.tsx

@@ -14,7 +14,7 @@
  *   7. 主操作按钮
  *   8. 协议复选框
  */
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Checkbox, MobileShell } from "@/app/_components/core";
 import { AppConstants } from "@/core/app_constants";
@@ -32,6 +32,7 @@ import {
   SubscriptionBenefitsCard,
   SubscriptionCheckoutButton,
   SubscriptionPaymentMethod,
+  SubscriptionPaymentSuccessDialog,
   SubscriptionPlanCard,
   SubscriptionUserRow,
 } from "./components";
@@ -61,6 +62,9 @@ export function SubscriptionScreen({
   const paymentDispatch = usePaymentDispatch();
   const refreshedPaidOrderRef = useRef<string | null>(null);
   const resumedPendingOrderRef = useRef<string | null>(null);
+  const successDialogShownOrderRef = useRef<string | null>(null);
+  const [showPaymentSuccessDialog, setShowPaymentSuccessDialog] =
+    useState(false);
 
   useEffect(() => {
     if (payment.status === "idle") {
@@ -75,6 +79,14 @@ export function SubscriptionScreen({
     userDispatch({ type: "UserFetch" });
   }, [payment.currentOrderId, payment.isPaid, userDispatch]);
 
+  useEffect(() => {
+    if (!payment.isPaid || !payment.currentOrderId) return;
+    if (successDialogShownOrderRef.current === payment.currentOrderId) return;
+
+    successDialogShownOrderRef.current = payment.currentOrderId;
+    setShowPaymentSuccessDialog(true);
+  }, [payment.currentOrderId, payment.isPaid]);
+
   useEffect(() => {
     const canInspectPendingOrder =
       payment.status === "ready" ||
@@ -296,6 +308,12 @@ export function SubscriptionScreen({
             }
           />
         </div>
+
+        <SubscriptionPaymentSuccessDialog
+          open={showPaymentSuccessDialog}
+          subscriptionType={subscriptionType}
+          onClose={() => setShowPaymentSuccessDialog(false)}
+        />
       </div>
     </MobileShell>
   );