gitfor/platform

import { useEffect } from "react";
import { Dialog } from "@cloudflare/kumo/components/dialog";
import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { getUpsellInfo, startProCheckout, startTopupCheckout } from "~/fns/billing";
import { useAction } from "~/hooks/use-action";
import { trackEvent } from "~/lib/analytics";
import { formatQuantity } from "~/lib/meters";
import type { MeterDef } from "~/lib/meters";
import { usd } from "~/lib/pricing-display";
import { dismissUpsell, useUpsell } from "~/lib/upsell";
import type { PaymentDetail } from "~/lib/upsell";
import { Button, buttonClass } from "~/ui/Button";
import { useViewer } from "~/hooks/use-viewer";
import { ErrorBanner } from "~/ui/Callout";
import { VerifyEmailHint } from "~/components/VerifyEmailHint";
import { canWriteAsViewer } from "~/lib/email-verification";

function allowance(unit: MeterDef["unit"] | undefined, value: number | null): string {
  if (value === null) return "unlimited";
  if (value === 0) return "none";
  return formatQuantity(unit ?? "count", value);
}

const HEADLINES: Record<PaymentDetail["reason"], string> = {
  plan_limit: "You've reached this month's limit",
  spending_limit: "You've reached your spending limit",
  paid_feature: "This needs a paid plan",
};

function OwnerMustUpgrade({ detail }: { detail: PaymentDetail }) {
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <Dialog.Title className="text-base font-semibold text-kumo-strong">{HEADLINES[detail.reason]}</Dialog.Title>
        <p className="text-sm text-kumo-default">{detail.message}</p>
        <p className="text-sm text-kumo-subtle">
          This limit belongs to the account that owns this work. Ask its owner to upgrade, add credit or raise the
          spending limit.
        </p>