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) => (