refactor(payment): share checkout dialogs

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

@@ -5,14 +5,13 @@
  * 包装 `SubscriptionCtaButton` —— 通过 payment 状态机创建后端订单并拉起支付。
  */
 import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
+import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
 import {
   usePaymentDispatch,
   usePaymentState,
 } from "@/stores/payment/payment-context";
 import { Logger } from "@/utils/logger";
 
-import { LazyStripePaymentDialog } from "./lazy-stripe-payment-dialog";
-import { stripePaymentDialogStyles as dialogStyles } from "./stripe-payment-dialog.styles";
 import { SubscriptionCtaButton } from "./subscription-cta-button";
 
 const log = new Logger("SubscriptionCheckoutButton");
@@ -88,77 +87,12 @@ export function SubscriptionCheckoutButton({
           {payment.errorMessage}
         </p>
       ) : null}
-      {paymentLaunch.shouldShowEzpayConfirmDialog ? (
-        <EzpayRedirectConfirmDialog
-          orderId={payment.currentOrderId ?? ""}
-          isConfirming={paymentLaunch.isConfirmingEzpay}
-          onCancel={paymentLaunch.handleEzpayCancel}
-          onConfirm={paymentLaunch.handleEzpayConfirm}
-        />
-      ) : null}
-      {paymentLaunch.shouldShowStripeDialog && paymentLaunch.stripeClientSecret ? (
-        <LazyStripePaymentDialog
-          clientSecret={paymentLaunch.stripeClientSecret}
-          onClose={paymentLaunch.handleStripeClose}
-          onConfirmed={paymentLaunch.handleStripeConfirmed}
-        />
-      ) : null}
+      <PaymentLaunchDialogs
+        currentOrderId={payment.currentOrderId}
+        externalCheckoutAnalyticsKey="subscription.external_checkout"
+        ezpayDescription="Your order has been created. Continue to GCash to finish the payment."
+        launch={paymentLaunch}
+      />
     </>
   );
 }
-
-interface EzpayRedirectConfirmDialogProps {
-  orderId: string;
-  isConfirming: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
-}
-
-function EzpayRedirectConfirmDialog({
-  orderId,
-  isConfirming,
-  onCancel,
-  onConfirm,
-}: EzpayRedirectConfirmDialogProps) {
-  return (
-    <div
-      className={dialogStyles.overlay}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="ezpay-redirect-title"
-    >
-      <div className={dialogStyles.dialog}>
-        <div className={dialogStyles.header}>
-          <h2 id="ezpay-redirect-title" className={dialogStyles.title}>
-            Continue to GCash?
-          </h2>
-          <p className={dialogStyles.content}>
-            Your order has been created. Continue to GCash to finish the
-            payment.
-          </p>
-          <p className={dialogStyles.content}>Order No. {orderId}</p>
-        </div>
-        <div className={dialogStyles.actions}>
-          <button
-            type="button"
-            className={`${dialogStyles.button} ${dialogStyles.secondary}`}
-            disabled={isConfirming}
-            onClick={onCancel}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            data-analytics-key="subscription.external_checkout"
-            data-analytics-label="Continue to external checkout"
-            className={`${dialogStyles.button} ${dialogStyles.primary}`}
-            disabled={isConfirming}
-            onClick={onConfirm}
-          >
-            {isConfirming ? "Opening..." : "Continue"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}