gitfor/platform

import { useQuery } from "@tanstack/react-query";
import { useLocation, useRouter } from "@tanstack/react-router";
import { getAccountNotices } from "~/fns/notices";
import type { AccountNotice, QuotaNotice } from "~/fns/notices";
import { useEffect, useState } from "react";
import { useEmailUnverified, useViewer } from "~/hooks/use-viewer";
import { useAction } from "~/hooks/use-action";
import { resendVerificationEmail } from "~/fns/account-security";
import { VERIFY_EMAIL_PATH } from "~/lib/email-verification";
import { NagBanner } from "~/ui/NagBanner";
import { safeDecode } from "~/lib/safe-decode";

const NOTICE_STALE_MS = 5 * 60 * 1000;

export const ACCOUNT_NOTICES_KEY = "account-notices";

function QuotaBanner({ notice }: { notice: QuotaNotice }) {
  const whose = notice.accountKind === "org" ? notice.accountName : "You";
  const title = notice.spend
    ? `${whose} reached ${notice.accountKind === "org" ? "its" : "your"} monthly spending limit`
    : `${whose} used all of ${notice.accountKind === "org" ? "its" : "your"} ${notice.plan} ${notice.meterLabel.toLowerCase()} this month`;
  const body = notice.spend
    ? "Usage that costs money is paused until next month or until the limit is raised."
    : notice.canUpgrade
      ? `Upgrade to Pro for more, or buy prepaid credit${notice.rate ? ` (${notice.rate})` : ""}.`
      : notice.rate
        ? `More is ${notice.rate}; add credit or raise the spending limit.`
        : "It resets at the start of next month.";
  return (
    <NagBanner
      id={notice.id}
      tone={notice.spend ? "danger" : "warning"}
      title={title}
      action={{
        label: notice.canUpgrade ? "Upgrade" : "Billing",
        to: notice.billingPath,
      }}
      snoozeDays={1}
    >
      {body}