refactor(payment): share checkout dialogs

src/app/tip/tip-checkout-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
+import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
 import type { TipCoffeeType } from "@/lib/tip/tip_coffee";
 import {
   usePaymentDispatch,
@@ -8,8 +9,6 @@ import {
 } from "@/stores/payment/payment-context";
 import { Logger } from "@/utils/logger";
 
-import { LazyStripePaymentDialog } from "../subscription/components/lazy-stripe-payment-dialog";
-import { stripePaymentDialogStyles as dialogStyles } from "../subscription/components/stripe-payment-dialog.styles";
 import styles from "./tip-screen.module.css";
 
 const log = new Logger("TipCheckoutButton");
@@ -67,78 +66,13 @@ export function TipCheckoutButton({
           {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}
-          returnPath={returnPath}
-          onClose={paymentLaunch.handleStripeClose}
-          onConfirmed={paymentLaunch.handleStripeConfirmed}
-        />
-      ) : null}
+      <PaymentLaunchDialogs
+        currentOrderId={payment.currentOrderId}
+        externalCheckoutAnalyticsKey="tip.external_checkout"
+        ezpayDescription="Your coffee order is ready. Continue to GCash to finish the payment."
+        launch={paymentLaunch}
+        stripeReturnPath={returnPath}
+      />
     </>
   );
 }
-
-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="tip-ezpay-redirect-title"
-    >
-      <div className={dialogStyles.dialog}>
-        <div className={dialogStyles.header}>
-          <h2 id="tip-ezpay-redirect-title" className={dialogStyles.title}>
-            Continue to GCash?
-          </h2>
-          <p className={dialogStyles.content}>
-            Your coffee order is ready. 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="tip.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>
-  );
-}