81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
|
|
import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
|
|
import { useActiveCharacter } from "@/providers/character-provider";
|
|
import {
|
|
usePaymentDispatch,
|
|
usePaymentState,
|
|
} from "@/stores/payment/payment-context";
|
|
import { Logger } from "@/utils/logger";
|
|
|
|
import styles from "./tip-screen.module.css";
|
|
|
|
const log = new Logger("TipCheckoutButton");
|
|
|
|
export interface TipCheckoutButtonProps {
|
|
giftCategory: string | null;
|
|
giftPlanId: string | null;
|
|
disabled?: boolean;
|
|
onOrder: () => void;
|
|
returnPath: string;
|
|
}
|
|
|
|
export function TipCheckoutButton({
|
|
giftCategory,
|
|
giftPlanId,
|
|
disabled = false,
|
|
onOrder,
|
|
returnPath,
|
|
}: TipCheckoutButtonProps) {
|
|
const character = useActiveCharacter();
|
|
const payment = usePaymentState();
|
|
const paymentDispatch = usePaymentDispatch();
|
|
const paymentLaunch = usePaymentLaunchFlow({
|
|
log,
|
|
logScope: "tip-checkout",
|
|
payment,
|
|
paymentDispatch,
|
|
subscriptionType: "tip",
|
|
giftCategory,
|
|
giftPlanId,
|
|
characterSlug: character.slug,
|
|
});
|
|
|
|
const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
|
|
const label = payment.isPollingOrder
|
|
? "Processing payment..."
|
|
: payment.isCreatingOrder
|
|
? "Creating order..."
|
|
: payment.isPaid
|
|
? "Thanks for the coffee"
|
|
: "Order and Buy";
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
data-analytics-key="tip.checkout"
|
|
data-analytics-label="Buy coffee tip"
|
|
className={styles.checkoutButton}
|
|
disabled={disabled || isLoading}
|
|
onClick={onOrder}
|
|
>
|
|
{label}
|
|
</button>
|
|
{payment.errorMessage ? (
|
|
<p className={styles.checkoutError} role="alert">
|
|
{payment.errorMessage}
|
|
</p>
|
|
) : 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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|