refactor(payment): share launch flow

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

@@ -1,19 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-
-import {
-  getPaymentUrl,
-  getStripeClientSecret,
-  isEzpayPayment,
-  launchEzpayRedirect,
-} from "@/lib/payment/payment_launch";
+import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
 import { ROUTES } from "@/router/routes";
 import {
   usePaymentDispatch,
   usePaymentState,
 } from "@/stores/payment/payment-context";
-import { AppEnvUtil, Logger } from "@/utils";
+import { Logger } from "@/utils";
 
 import { StripePaymentDialog } from "../subscription/components/stripe-payment-dialog";
 import dialogStyles from "../subscription/components/stripe-payment-dialog.module.css";
@@ -34,80 +27,16 @@ export function TipCheckoutButton({
 }: TipCheckoutButtonProps) {
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
-  const launchedNonceRef = useRef(0);
-  const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
-    string | null
-  >(null);
-  const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
-
-  useEffect(() => {
-    if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
-      return;
-    }
-
-    launchedNonceRef.current = payment.launchNonce;
-    const clientSecret = getStripeClientSecret(payment.payParams);
-    if (clientSecret) return;
-
-    const paymentUrl = getPaymentUrl(payment.payParams);
-    if (paymentUrl) {
-      const isEzpay = isEzpayPayment(payment.payParams);
-
-      if (!AppEnvUtil.isProduction() && isEzpay) {
-        log.debug("[tip-checkout] ezpay confirmation required", {
-          orderId: payment.currentOrderId,
-          paymentUrl,
-        });
-        return;
-      }
-
-      if (isEzpay) {
-        void launchEzpayRedirect({
-          orderId: payment.currentOrderId,
-          paymentUrl,
-          subscriptionType: "tip",
-          onFailed: (errorMessage) =>
-            paymentDispatch({ type: "PaymentLaunchFailed", errorMessage }),
-        });
-        return;
-      }
-
-      window.location.href = paymentUrl;
-      return;
-    }
-
-    paymentDispatch({
-      type: "PaymentLaunchFailed",
-      errorMessage:
-        "Payment parameters did not include a supported URL or Stripe client secret.",
-    });
-  }, [
-    payment.currentOrderId,
-    payment.launchNonce,
-    payment.payParams,
+  const paymentLaunch = usePaymentLaunchFlow({
+    log,
+    logScope: "tip-checkout",
+    payment,
     paymentDispatch,
-  ]);
+    subscriptionType: "tip",
+  });
 
   const isLoading =
     isAuthLoading || payment.isCreatingOrder || payment.isPollingOrder;
-  const stripeClientSecret = payment.payParams
-    ? getStripeClientSecret(payment.payParams)
-    : null;
-  const shouldShowStripeDialog =
-    stripeClientSecret !== null &&
-    stripeClientSecret !== hiddenStripeClientSecret &&
-    !payment.isPaid;
-  const ezpayPaymentUrl = payment.payParams
-    ? getPaymentUrl(payment.payParams)
-    : null;
-  const shouldShowEzpayConfirmDialog =
-    !AppEnvUtil.isProduction() &&
-    payment.payParams &&
-    isEzpayPayment(payment.payParams) &&
-    ezpayPaymentUrl &&
-    payment.currentOrderId
-      ? true
-      : false;
   const label = payment.isPollingOrder
     ? "Processing payment..."
     : payment.isCreatingOrder
@@ -116,43 +45,6 @@ export function TipCheckoutButton({
         ? "Thanks for the coffee"
         : "Order and Buy";
 
-  const handleStripeClose = () => {
-    if (stripeClientSecret) {
-      setHiddenStripeClientSecret(stripeClientSecret);
-    }
-    if (payment.orderStatus !== "paid") {
-      paymentDispatch({ type: "PaymentReset" });
-    }
-  };
-
-  const handleStripeConfirmed = () => {
-    if (stripeClientSecret) {
-      setHiddenStripeClientSecret(stripeClientSecret);
-    }
-  };
-
-  const handleEzpayConfirm = () => {
-    if (!payment.currentOrderId || !ezpayPaymentUrl) return;
-    setIsConfirmingEzpay(true);
-    void launchEzpayRedirect({
-      orderId: payment.currentOrderId,
-      paymentUrl: ezpayPaymentUrl,
-      subscriptionType: "tip",
-      onFailed: (errorMessage) => {
-        setIsConfirmingEzpay(false);
-        paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
-      },
-    });
-  };
-
-  const handleEzpayCancel = () => {
-    log.debug("[tip-checkout] ezpay confirmation cancelled", {
-      orderId: payment.currentOrderId,
-    });
-    setIsConfirmingEzpay(false);
-    paymentDispatch({ type: "PaymentReset" });
-  };
-
   return (
     <>
       <button
@@ -168,20 +60,20 @@ export function TipCheckoutButton({
           {payment.errorMessage}
         </p>
       ) : null}
-      {shouldShowEzpayConfirmDialog ? (
+      {paymentLaunch.shouldShowEzpayConfirmDialog ? (
         <EzpayRedirectConfirmDialog
           orderId={payment.currentOrderId ?? ""}
-          isConfirming={isConfirmingEzpay}
-          onCancel={handleEzpayCancel}
-          onConfirm={handleEzpayConfirm}
+          isConfirming={paymentLaunch.isConfirmingEzpay}
+          onCancel={paymentLaunch.handleEzpayCancel}
+          onConfirm={paymentLaunch.handleEzpayConfirm}
         />
       ) : null}
-      {shouldShowStripeDialog ? (
+      {paymentLaunch.shouldShowStripeDialog && paymentLaunch.stripeClientSecret ? (
         <StripePaymentDialog
-          clientSecret={stripeClientSecret}
+          clientSecret={paymentLaunch.stripeClientSecret}
           returnPath={ROUTES.tip}
-          onClose={handleStripeClose}
-          onConfirmed={handleStripeConfirmed}
+          onClose={paymentLaunch.handleStripeClose}
+          onConfirmed={paymentLaunch.handleStripeConfirmed}
         />
       ) : null}
     </>