Function UpsellPanel

packages/web/src/features/billing/upsellDialog.tsx:161–197

({ source, returnPath, className, licenseState = 'free', title, description, loadingVariant = 'skeleton' }: UpsellPanelProps)

}

export function UpsellPanel({ source, returnPath, className, licenseState = 'free', title, description, loadingVariant = 'skeleton' }: UpsellPanelProps) {
    const { data: offers, isPending, isError, refetch } = useOffers();

    if (isError) {
        return <UpsellLoadError variant="inline" onRetry={() => { void refetch(); }} className={className} />;
    }

    if (isPending || !offers) {
        if (loadingVariant === 'spinner') {
            return (
                <div className={cn("flex items-center justify-center py-12", className)} aria-busy="true">
                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                </div>
            );
        }
        return (
            <div className={cn("flex flex-col gap-6", className)} aria-busy="true">
                <div className="flex flex-col gap-2">
                    <Skeleton className="h-6 w-6 rounded-full" />
                    <Skeleton className="h-6 w-48" />
                    <Skeleton className="h-5 w-72" />
                </div>
                <Skeleton className="h-64 w-full" />
                <div className="flex flex-col-reverse items-center gap-2 sm:flex-row sm:justify-end sm:gap-4">
                    <Skeleton className="h-10 w-32" />
                    <Skeleton className="h-10 w-32" />
                </div>
            </div>
        );
    }

    return (
        <div className={cn("flex flex-col gap-6", className)}>
            <UpsellPanelContent offers={offers} source={source} returnPath={returnPath} variant="inline" licenseState={licenseState} titleOverride={title} descriptionOverride={description} />
        </div>
    );
}

interface UpsellPanelContentProps {
    offers: OffersResponse;