diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 5c681927b5..eb8a8f3c49 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -6,7 +6,7 @@ import { cn } from "~/utils/cn";
const variantClasses = {
basic:
"bg-background-bright border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
- dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50"
+ dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
};
type Variant = keyof typeof variantClasses;
@@ -111,11 +111,13 @@ export function InfoIconTooltip({
buttonClassName,
contentClassName,
variant = "basic",
+ disableHoverableContent = false,
}: {
content: React.ReactNode;
buttonClassName?: string;
contentClassName?: string;
variant?: Variant;
+ disableHoverableContent?: boolean;
}) {
return (
);
}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-alerts/route.tsx
index eb0a8138b0..c4f8762639 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-alerts/route.tsx
@@ -24,12 +24,13 @@ import { Label } from "~/components/primitives/Label";
import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
import { Paragraph } from "~/components/primitives/Paragraph";
import { TextLink } from "~/components/primitives/TextLink";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
import { prisma } from "~/db.server";
import { featuresForRequest } from "~/features.server";
import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
import { getBillingAlerts, setBillingAlert } from "~/services/platform.v3.server";
import { requireUserId } from "~/services/session.server";
-import { formatCurrency } from "~/utils/numberFormatter";
+import { formatCurrency, formatNumber } from "~/utils/numberFormatter";
import {
docsPath,
OrganizationParamsSchema,
@@ -183,6 +184,8 @@ export default function Page() {
const checkboxLevels = [0.75, 0.9, 1.0, 2.0, 5.0];
+ const spikeAlertLevels = [10.0, 20.0, 50.0, 100.0];
+
useEffect(() => {
if (alerts.emails.length > 0) {
requestIntent(form.ref.current ?? undefined, list.append(emails.name));
@@ -272,6 +275,39 @@ export default function Page() {
))}
{alertLevels.error}
+
+
+
+
+
+ {spikeAlertLevels.map((level) => (
+
+ {formatNumber(level * 100)}%{" "}
+
+ ({formatCurrency(Number(dollarAmount) * level, false)})
+
+
+ }
+ defaultChecked={
+ alerts.alertLevels.includes(level) ||
+ !spikeAlertLevels.some((l) => alerts.alertLevels.includes(l))
+ }
+ className="pr-0"
+ />
+ ))}
+
{emailFields.map((email, index) => (