feat(app): improve payment and paywall UX

src/app/subscription/components/index.ts

@@ -8,6 +8,7 @@ export * from "./subscription-benefits-card";
 export * from "./subscription-checkout-button";
 export * from "./subscription-cta-button";
 export * from "./subscription-payment-method";
+export * from "./subscription-payment-success-dialog";
 export * from "./subscription-plan-card";
 export * from "./subscription-user-row";
 export * from "./stripe-payment-dialog";

src/app/subscription/components/subscription-payment-success-dialog.module.css

@@ -0,0 +1,72 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.dialog {
+  width: 100%;
+  max-width: 380px;
+  border-radius: 32px;
+  background: var(--color-page-background, #ffffff);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
+  padding: 28px 20px 20px;
+  text-align: center;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 58px;
+  height: 58px;
+  margin-bottom: 16px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff67e0 0%, #f657a0 100%);
+  color: #ffffff;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1;
+  box-shadow: 0 8px 18px rgba(247, 89, 168, 0.28);
+}
+
+.title {
+  margin: 0 0 8px;
+  color: var(--color-text-foreground, #171717);
+  font-size: var(--font-size-22, 22px);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.content {
+  margin: 0;
+  color: #393939;
+  font-size: var(--font-size-md, 14px);
+  line-height: 1.5;
+}
+
+.button {
+  width: 100%;
+  min-height: 48px;
+  margin-top: 22px;
+  border: 0;
+  border-radius: 999px;
+  background:
+    linear-gradient(269deg, #ff67e0 0%, rgba(254, 104, 224, 0.5) 20%, rgba(252, 105, 223, 0.79) 66%, #f96ade 100%),
+    linear-gradient(#f657a0, #f657a0);
+  background-blend-mode: normal, normal;
+  box-shadow: 0 5px 7px rgba(247, 89, 168, 0.31);
+  color: #ffffff;
+  cursor: pointer;
+  font-size: var(--font-size-lg, 16px);
+  font-weight: 700;
+}
+
+.button:active {
+  transform: translateY(1px);
+}

src/app/subscription/components/subscription-payment-success-dialog.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import styles from "./subscription-payment-success-dialog.module.css";
+
+export interface SubscriptionPaymentSuccessDialogProps {
+  open: boolean;
+  subscriptionType: "vip" | "voice";
+  onClose: () => void;
+}
+
+export function SubscriptionPaymentSuccessDialog({
+  open,
+  subscriptionType,
+  onClose,
+}: SubscriptionPaymentSuccessDialogProps) {
+  if (!open) return null;
+
+  const content =
+    subscriptionType === "voice"
+      ? "Your voice package purchase was completed successfully."
+      : "Your VIP membership has been activated successfully.";
+
+  return (
+    <div
+      className={styles.overlay}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="subscription-payment-success-title"
+    >
+      <div className={styles.dialog}>
+        <div className={styles.badge} aria-hidden="true">
+          ✓
+        </div>
+        <h2 id="subscription-payment-success-title" className={styles.title}>
+          Payment successful
+        </h2>
+        <p className={styles.content}>{content}</p>
+        <button type="button" className={styles.button} onClick={onClose}>
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}

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>
   );