119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|