Upgrade nudges

import { UpgradeNudge, useBillingOS } from "@billingos/sdk";
import { useQuery } from "@tanstack/react-query";

function NudgeBanner() {
  const { client } = useBillingOS();

  const { data } = useQuery({
    queryKey: ["usage-check"],
    queryFn: () => client!.checkUsage(),
    enabled: !!client,
    refetchInterval: 60000, // Check every minute
  });

  if (!data?.shouldShowNudge || !data.trigger) return null;

  return (
    <UpgradeNudge
      trigger={data.trigger}
      style="banner"
      onUpgrade={(priceId) => {
        router.push(`/pricing?plan=${priceId}`);
      }}
    />
  );
}

// Banner at the top of a page
<UpgradeNudge trigger={trigger} style="banner" />

// Toast notification that auto-dismisses
<UpgradeNudge trigger={trigger} style="toast" autoDismiss={10000} />

// Modal for critical limits
<UpgradeNudge trigger={trigger} style="modal" />

import { UpgradePrompt } from "@billingos/sdk";

<UpgradePrompt
  feature="advanced_analytics"
  title="Unlock advanced analytics"
  description="Get deeper insights with the Pro plan."
  onUpgradeClick={() => router.push("/pricing")}
/>

import { CompactUpgradePrompt } from "@billingos/sdk";

<CompactUpgradePrompt
  feature="custom_reports"
  onUpgradeClick={() => setCheckoutOpen(true)}
/>

import { FeatureGate, UpgradePrompt } from "@billingos/sdk";

<FeatureGate
  feature="custom_reports"
  fallback={
    <UpgradePrompt
      feature="custom_reports"
      title="Custom reports"
      description="Available on Pro and Enterprise plans."
      onUpgradeClick={() => setCheckoutOpen(true)}
    />
  }
>
  <ReportBuilder />
</FeatureGate>