fix(subscription): render stripe dialog at screen root

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

@@ -4,8 +4,7 @@
  *
  * 后端当前返回 PaymentIntent clientSecret，因此这里直接用它完成前端确认。
  */
-import { useEffect, useState, type FormEvent } from "react";
+import { useState, type FormEvent } from "react";
-import { createPortal } from "react-dom";
 import {
   Elements,
   PaymentElement,
@@ -36,44 +35,31 @@ export function StripePaymentDialog({
   onClose,
   onConfirmed,
 }: StripePaymentDialogProps) {
-  useEffect(() => {
+  if (!stripePromise) {
-    if (typeof document === "undefined") return;
+    return (
-
+      <div className={styles.overlay} role="alertdialog" aria-modal="true">
-    const prevOverflow = document.body.style.overflow;
+        <div className={styles.dialog}>
-    const handleKeyDown = (event: KeyboardEvent) => {
+          <div className={styles.header}>
-      if (event.key === "Escape") onClose();
+            <h2 className={styles.title}>Payment unavailable</h2>
-    };
+            <p className={styles.content}>
-
+              Stripe publishable key is not configured for this build.
-    document.body.style.overflow = "hidden";
+            </p>
-    document.addEventListener("keydown", handleKeyDown);
+          </div>
-
+          <div className={styles.actions}>
-    return () => {
+            <button
-      document.body.style.overflow = prevOverflow;
+              type="button"
-      document.removeEventListener("keydown", handleKeyDown);
+              className={`${styles.button} ${styles.primary}`}
-    };
+              onClick={onClose}
-  }, [onClose]);
+            >
-
+              OK
-  const dialog = !stripePromise ? (
+            </button>
-    <div className={styles.overlay} role="alertdialog" aria-modal="true">
+          </div>
-      <div className={styles.dialog}>
-        <div className={styles.header}>
-          <h2 className={styles.title}>Payment unavailable</h2>
-          <p className={styles.content}>
-            Stripe publishable key is not configured for this build.
-          </p>
-        </div>
-        <div className={styles.actions}>
-          <button
-            type="button"
-            className={`${styles.button} ${styles.primary}`}
-            onClick={onClose}
-          >
-            OK
-          </button>
         </div>
       </div>
-    </div>
+    );
-  ) : (
+  }
+
+  return (
     <div
       className={styles.overlay}
       role="dialog"
@@ -109,10 +95,6 @@ export function StripePaymentDialog({
       </div>
     </div>
   );
-
-  if (typeof document === "undefined") return null;
-
-  return createPortal(dialog, document.body);
 }
 
 function StripePaymentForm({

src/app/subscription/components/subscription-checkout-button.tsx

@@ -13,7 +13,6 @@ import {
 } from "@/stores/payment/payment-context";
 import { AppEnvUtil, Logger, Result } from "@/utils";
 
-import { StripePaymentDialog } from "./stripe-payment-dialog";
 import dialogStyles from "./stripe-payment-dialog.module.css";
 import { SubscriptionCtaButton } from "./subscription-cta-button";
 import styles from "./subscription-cta-button.module.css";
@@ -35,9 +34,6 @@ export function SubscriptionCheckoutButton({
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
   const launchedNonceRef = useRef(0);
-  const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
-    string | null
-  >(null);
   const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
 
   useEffect(() => {
@@ -98,7 +94,7 @@ export function SubscriptionCheckoutButton({
     payment.isCreatingOrder ||
     payment.isPollingOrder;
   const readyLabel =
-    subscriptionType === "topup" ? "Pay and Top Up" : "Pay and Activiate";
+    subscriptionType === "topup" ? "Pay and Top Up" : "Pay and Activate";
   const agreementLabel =
     subscriptionType === "topup"
       ? "Confirm the agreement and Top Up"
@@ -114,32 +110,9 @@ export function SubscriptionCheckoutButton({
   const handleClick = () => {
     if (disabled || isLoading) return;
     setIsConfirmingEzpay(false);
-    setHiddenStripeClientSecret(null);
     paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
   };
 
-  const handleStripeClose = () => {
-    if (stripeClientSecret) {
-      setHiddenStripeClientSecret(stripeClientSecret);
-    }
-    if (payment.orderStatus !== "paid") {
-      paymentDispatch({ type: "PaymentReset" });
-    }
-  };
-
-  const handleStripeConfirmed = () => {
-    if (stripeClientSecret) {
-      setHiddenStripeClientSecret(stripeClientSecret);
-    }
-  };
-
-  const stripeClientSecret = payment.payParams
-    ? getStripeClientSecret(payment.payParams)
-    : null;
-  const shouldShowStripeDialog =
-    stripeClientSecret !== null &&
-    stripeClientSecret !== hiddenStripeClientSecret &&
-    !payment.isPaid;
   const ezpayPaymentUrl = payment.payParams
     ? getPaymentUrl(payment.payParams)
     : null;
@@ -208,13 +181,6 @@ export function SubscriptionCheckoutButton({
           onConfirm={handleEzpayConfirm}
         />
       ) : null}
-      {shouldShowStripeDialog ? (
-        <StripePaymentDialog
-          clientSecret={stripeClientSecret}
-          onClose={handleStripeClose}
-          onConfirmed={handleStripeConfirmed}
-        />
-      ) : null}
     </>
   );
 }
@@ -366,7 +332,7 @@ function EzpayRedirectConfirmDialog({
   );
 }
 
-function getStripeClientSecret(
+export function getStripeClientSecret(
   payParams: Record<string, unknown>,
 ): string | null {
   const provider = payParams.provider;

src/app/subscription/subscription-screen.tsx

@@ -13,12 +13,14 @@ import { useUserDispatch } from "@/stores/user/user-context";
 import { ROUTES } from "@/router/routes";
 
 import {
+  getStripeClientSecret,
   SubscriptionBackLink,
   SubscriptionCheckoutButton,
   SubscriptionCoinsOfferSection,
   SubscriptionPaymentMethod,
   SubscriptionPaymentSuccessDialog,
   SubscriptionVipOfferSection,
+  StripePaymentDialog,
 } from "./components";
 import styles from "./components/subscription-screen.module.css";
 import {
@@ -49,6 +51,9 @@ export function SubscriptionScreen({
   const refreshedPaidOrderRef = useRef<string | null>(null);
   const resumedPendingOrderRef = useRef<string | null>(null);
   const successDialogShownOrderRef = useRef<string | null>(null);
+  const [hiddenStripeDialogKey, setHiddenStripeDialogKey] = useState<
+    string | null
+  >(null);
   const [showPaymentSuccessDialog, setShowPaymentSuccessDialog] =
     useState(false);
   const canSubscribeVip = subscriptionType === "vip";
@@ -156,6 +161,16 @@ export function SubscriptionScreen({
     payment.isPollingOrder;
   const canActivate =
     selectedPlan !== null && payment.agreed && !isPaymentBusy;
+  const stripeClientSecret = payment.payParams
+    ? getStripeClientSecret(payment.payParams)
+    : null;
+  const stripeDialogKey = stripeClientSecret
+    ? `${payment.launchNonce}:${stripeClientSecret}`
+    : null;
+  const shouldShowStripeDialog =
+    stripeClientSecret !== null &&
+    stripeDialogKey !== hiddenStripeDialogKey &&
+    !payment.isPaid;
 
   const finishPaymentSuccessClose = () => {
     setShowPaymentSuccessDialog(false);
@@ -169,6 +184,21 @@ export function SubscriptionScreen({
     finishPaymentSuccessClose();
   };
 
+  const handleStripeClose = () => {
+    if (stripeDialogKey) {
+      setHiddenStripeDialogKey(stripeDialogKey);
+    }
+    if (payment.orderStatus !== "paid") {
+      paymentDispatch({ type: "PaymentReset" });
+    }
+  };
+
+  const handleStripeConfirmed = () => {
+    if (stripeDialogKey) {
+      setHiddenStripeDialogKey(stripeDialogKey);
+    }
+  };
+
   useEffect(() => {
     if (canSubscribeVip) {
       const firstVipPlanId = vipOfferPlans[0]?.id ?? "";
@@ -212,16 +242,28 @@ export function SubscriptionScreen({
   ]);
 
   return (
-    <MobileShell>
+    <>
-      <div className={styles.shell}>
+      <MobileShell>
-        <header className={styles.header}>
+        <div className={styles.shell}>
-          <SubscriptionBackLink className={styles.backSlot} />
+          <header className={styles.header}>
-        </header>
+            <SubscriptionBackLink className={styles.backSlot} />
+          </header>
 
-        <div className={styles.offerStack}>
+          <div className={styles.offerStack}>
-          {canSubscribeVip ? (
+            {canSubscribeVip ? (
-            <SubscriptionVipOfferSection
+              <SubscriptionVipOfferSection
-              plans={vipOfferPlans}
+                plans={vipOfferPlans}
+                selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
+                onSelectPlan={(planId) =>
+                  paymentDispatch({
+                    type: "PaymentPlanSelected",
+                    planId,
+                  })
+                }
+              />
+            ) : null}
+            <SubscriptionCoinsOfferSection
+              plans={directCoinsPlans}
               selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
               onSelectPlan={(planId) =>
                 paymentDispatch({
@@ -230,80 +272,78 @@ export function SubscriptionScreen({
                 })
               }
             />
-          ) : null}
+          </div>
-          <SubscriptionCoinsOfferSection
-            plans={directCoinsPlans}
-            selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
-            onSelectPlan={(planId) =>
-              paymentDispatch({
-                type: "PaymentPlanSelected",
-                planId,
-              })
-            }
-          />
-        </div>
 
-        <section className={styles.paymentMethodSlot}>
+          <section className={styles.paymentMethodSlot}>
-          <SubscriptionPaymentMethod
+            <SubscriptionPaymentMethod
-            value={payment.payChannel}
+              value={payment.payChannel}
-            disabled={isPaymentBusy}
+              disabled={isPaymentBusy}
-            onChange={(payChannel) =>
+              onChange={(payChannel) =>
-              paymentDispatch({
+                paymentDispatch({
-                type: "PaymentPayChannelChanged",
+                  type: "PaymentPayChannelChanged",
-                payChannel,
+                  payChannel,
-              })
+                })
-            }
+              }
-          />
+            />
-        </section>
+          </section>
 
-        <div className={styles.ctaSlot}>
+          <div className={styles.ctaSlot}>
-          <SubscriptionCheckoutButton
+            <SubscriptionCheckoutButton
-            disabled={!canActivate}
+              disabled={!canActivate}
+              subscriptionType={subscriptionType}
+              returnTo={returnTo}
+            />
+          </div>
+
+          <div className={styles.agreementSlot}>
+            <Checkbox
+              checked={payment.agreed}
+              onChange={(agreed) =>
+                paymentDispatch({
+                  type: "PaymentAgreementChanged",
+                  agreed,
+                })
+              }
+              label={
+                <span className={styles.agreementLabel}>
+                  I agree to the{" "}
+                  <a
+                    href={AppConstants.privacyPolicyUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={styles.agreementLink}
+                  >
+                    VIP Membership Benefits Agreement
+                  </a>{" "}
+                  and{" "}
+                  <a
+                    href={AppConstants.termsOfServiceUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={styles.agreementLink}
+                  >
+                    Automatic renewal Agreement
+                  </a>
+                </span>
+              }
+            />
+          </div>
+
+          <SubscriptionPaymentSuccessDialog
+            open={showPaymentSuccessDialog}
             subscriptionType={subscriptionType}
-            returnTo={returnTo}
+            onClose={handlePaymentSuccessClose}
           />
         </div>
+      </MobileShell>
 
-        <div className={styles.agreementSlot}>
+      {shouldShowStripeDialog ? (
-          <Checkbox
+        <StripePaymentDialog
-            checked={payment.agreed}
+          clientSecret={stripeClientSecret}
-            onChange={(agreed) =>
+          onClose={handleStripeClose}
-              paymentDispatch({
+          onConfirmed={handleStripeConfirmed}
-                type: "PaymentAgreementChanged",
-                agreed,
-              })
-            }
-            label={
-              <span className={styles.agreementLabel}>
-                I agree to the{" "}
-                <a
-                  href={AppConstants.privacyPolicyUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className={styles.agreementLink}
-                >
-                  VIP Membership Benefits Agreement
-                </a>{" "}
-                and{" "}
-                <a
-                  href={AppConstants.termsOfServiceUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className={styles.agreementLink}
-                >
-                  Automatic renewal Agreement
-                </a>
-              </span>
-            }
-          />
-        </div>
-
-        <SubscriptionPaymentSuccessDialog
-          open={showPaymentSuccessDialog}
-          subscriptionType={subscriptionType}
-          onClose={handlePaymentSuccessClose}
         />
-      </div>
+      ) : null}
-    </MobileShell>
+    </>
   );
 }