Function UpsellDialog

packages/web/src/features/billing/upsellDialog.tsx:37–65

({ open, onOpenChange, source, returnPath }: UpsellDialogProps)

}

export function UpsellDialog({ open, onOpenChange, source, returnPath }: UpsellDialogProps) {
    const { data: offers, isPending, isError, refetch } = useOffers();
    const captureEvent = useCaptureEvent();

    useEffect(() => {
        if (open) {
            captureEvent('wa_upsell_dialog_viewed', { source });
        }
    }, [open, source, captureEvent]);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-2xl gap-6 focus:outline-none">
                {isError ? (
                    // Keep the dialog open with a recoverable error state rather than
                    // closing it out from under the user — the built-in close button
                    // is still the dismiss affordance.
                    <UpsellLoadError variant="dialog" onRetry={() => { void refetch(); }} />
                ) : isPending ? (
                    <div className="flex items-center justify-center py-12">
                        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                    </div>
                ) : (
                    <UpsellPanelContent offers={offers} source={source} returnPath={returnPath} variant="dialog" licenseState="free" />
                )}
            </DialogContent>
        </Dialog>
    );
}

interface UpsellLoadErrorProps {
    variant: "dialog" | "inline";