refactor(payment): share checkout dialogs

2026-07-14 18:23:08 +08:00
parent 0033625866
commit 5bec04a970
8 changed files with 187 additions and 148 deletions
@@ -0,0 +1,118 @@
+"use client";
+
+import { useId, type ReactNode } from "react";
+
+import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
+
+import { LazyStripePaymentDialog } from "./lazy-stripe-payment-dialog";
+import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
+
+type PaymentLaunchDialogFlow = Pick<
+  PaymentLaunchFlow,
+  | "handleEzpayCancel"
+  | "handleEzpayConfirm"
+  | "handleStripeClose"
+  | "handleStripeConfirmed"
+  | "isConfirmingEzpay"
+  | "shouldShowEzpayConfirmDialog"
+  | "shouldShowStripeDialog"
+  | "stripeClientSecret"
+>;
+
+export interface PaymentLaunchDialogsProps {
+  currentOrderId: string | null;
+  externalCheckoutAnalyticsKey: string;
+  ezpayDescription: ReactNode;
+  launch: PaymentLaunchDialogFlow;
+  stripeReturnPath?: string;
+}
+
+export function PaymentLaunchDialogs({
+  currentOrderId,
+  externalCheckoutAnalyticsKey,
+  ezpayDescription,
+  launch,
+  stripeReturnPath,
+}: PaymentLaunchDialogsProps) {
+  return (
+    <>
+      {launch.shouldShowEzpayConfirmDialog ? (
+        <EzpayRedirectConfirmDialog
+          orderId={currentOrderId ?? ""}
+          description={ezpayDescription}
+          externalCheckoutAnalyticsKey={externalCheckoutAnalyticsKey}
+          isConfirming={launch.isConfirmingEzpay}
+          onCancel={launch.handleEzpayCancel}
+          onConfirm={launch.handleEzpayConfirm}
+        />
+      ) : null}
+      {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
+        <LazyStripePaymentDialog
+          clientSecret={launch.stripeClientSecret}
+          returnPath={stripeReturnPath}
+          onClose={launch.handleStripeClose}
+          onConfirmed={launch.handleStripeConfirmed}
+        />
+      ) : null}
+    </>
+  );
+}
+
+interface EzpayRedirectConfirmDialogProps {
+  description: ReactNode;
+  externalCheckoutAnalyticsKey: string;
+  isConfirming: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  orderId: string;
+}
+
+function EzpayRedirectConfirmDialog({
+  description,
+  externalCheckoutAnalyticsKey,
+  isConfirming,
+  onCancel,
+  onConfirm,
+  orderId,
+}: EzpayRedirectConfirmDialogProps) {
+  const titleId = useId();
+
+  return (
+    <div
+      className={styles.overlay}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className={styles.dialog}>
+        <div className={styles.header}>
+          <h2 id={titleId} className={styles.title}>
+            Continue to GCash?
+          </h2>
+          <p className={styles.content}>{description}</p>
+          <p className={styles.content}>Order No. {orderId}</p>
+        </div>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.secondary}`}
+            disabled={isConfirming}
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            data-analytics-key={externalCheckoutAnalyticsKey}
+            data-analytics-label="Continue to external checkout"
+            className={`${styles.button} ${styles.primary}`}
+            disabled={isConfirming}
+            onClick={onConfirm}
+          >
+            {isConfirming ? "Opening..." : "Continue"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}