Skip to content

chore: quantity addons #1697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mxkaske merged 7 commits into from
Jan 4, 2026
Merged

chore: quantity addons #1697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8beba66
wip: quantity addons
mxkaske Jan 3, 2026
b43bfb8
refactor: quantiy selector in modal
mxkaske Jan 3, 2026
f38715c
wip: stripe quantity
mxkaske Jan 3, 2026
fff7a9f
fix: spacing
mxkaske Jan 3, 2026
bfc1bdb
fix: default value
mxkaske Jan 4, 2026
404edaf
page add on
thibaultleouay Jan 4, 2026
b2041e7
ci: apply automated fixes
autofix-ci[bot] Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions apps/dashboard/src/app/(dashboard)/settings/billing/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export function Client() {

if (!workspace) return null;

const addons = allPlans[workspace.plan].addons;
const planAddons = allPlans[workspace.plan].addons;

return (
<SectionGroup>
Expand Down Expand Up @@ -179,24 +179,31 @@ export function Client() {
</FormCardDescription>
</FormCardHeader>
<div className="flex flex-col gap-2 pt-4">
{/* TODO: redirect to stripe product */}
{addons["email-domain-protection"] ? (
{planAddons["email-domain-protection"] ? (
<BillingAddons
label="Magic Link (Auth)"
description="Only allow user with a given email domain to access the status page."
addon="email-domain-protection"
workspace={workspace}
/>
) : null}
{addons["white-label"] ? (
{planAddons["white-label"] ? (
<BillingAddons
label="White Label"
description="Remove the 'powered by openstatus.dev' footer from your status pages."
addon="white-label"
workspace={workspace}
/>
) : null}
{Object.keys(addons).length === 0 ? (
{planAddons["status-pages"] ? (
<BillingAddons
label="Status Pages"
description="Create and manage status pages for your workspace."
addon="status-pages"
workspace={workspace}
/>
) : null}
{Object.keys(planAddons).length === 0 ? (
<EmptyStateContainer>
<EmptyStateTitle>No add-ons available</EmptyStateTitle>
</EmptyStateContainer>
Expand Down
263 changes: 193 additions & 70 deletions apps/dashboard/src/components/content/billing-addons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,18 @@ import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { useCookieState } from "@/hooks/use-cookie-state";

import { ButtonGroup } from "@/components/ui/button-group";
import { useTRPC } from "@/lib/trpc/client";
import type { RouterOutputs } from "@openstatus/api";
import { allPlans } from "@openstatus/db/src/schema/plan/config";
import type { Addons } from "@openstatus/db/src/schema/plan/schema";
import { getAddonPriceConfig } from "@openstatus/db/src/schema/plan/utils";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { isTRPCClientError } from "@trpc/client";
import { Check } from "lucide-react";
import { useState, useTransition } from "react";
import { Check, MinusIcon, PlusIcon } from "lucide-react";
import { useEffect, useState, useTransition } from "react";
import { toast } from "sonner";
import { Input } from "../ui/input";

type Workspace = RouterOutputs["workspace"]["get"];

Expand All @@ -32,6 +35,12 @@ interface BillingAddonsProps {
workspace: Workspace;
}

interface PriceConfig {
value: number;
currency: string;
locale: string;
}

export function BillingAddons({
label,
description,
Expand All @@ -52,24 +61,39 @@ export function BillingAddons({
},
}),
);

const plan = workspace.plan;
const value = workspace.limits[addon];
const defaultLimit = allPlans[workspace.plan].limits[addon];
const workspaceLimit = workspace.limits[addon];
const defaultValue =
typeof workspaceLimit === "number" && typeof defaultLimit === "number"
? // current value - default value to evaluate the difference
workspaceLimit - defaultLimit
: workspaceLimit;
const [value, setValue] = useState<number | boolean>(defaultValue);
const price = getAddonPriceConfig(plan, addon, currency);

// Reset value when modal opens
useEffect(() => {
if (open) {
setValue(defaultValue);
}
}, [open, defaultValue]);

function submitAction() {
startTransition(async () => {
try {
// toggle the value if it's a boolean otherwise use the value
const newValue = typeof value === "boolean" ? !value : value;
const promise = checkoutSessionMutation.mutateAsync({
workspaceSlug: workspace.slug,
feature: addon,
remove: value,
value: newValue,
});
toast.promise(promise, {
loading: "Updating...",
success: () => {
setOpen(false);
return value ? "Removed" : "Added";
return "Billing information updated";
},
error: (error) => {
if (isTRPCClientError(error)) {
Expand All @@ -84,78 +108,177 @@ export function BillingAddons({
}
});
}
const hasAddon =
typeof defaultValue === "number"
? defaultValue > 0
: defaultValue !== defaultLimit;
const isQuantity = typeof value === "number";

return (
<div className="flex flex-col gap-2">
<div className="flex flex-col justify-between gap-1.5 sm:flex-row">
<div className="space-y-0.5 text-sm">
<Label>{label}</Label>
<div className="truncate text-muted-foreground">{description}</div>
</div>
<div className="flex items-center gap-2">
{value ? <Check className="size-4 text-success" /> : null}
<span className="font-mono text-foreground text-sm">
{price
? new Intl.NumberFormat(price.locale, {
style: "currency",
currency: price.currency,
}).format(price.value)
: "N/A"}
/mo.
</span>
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialog open={open} onOpenChange={setOpen}>
<div className="flex flex-col gap-2">
<div className="grid grid-cols-3 gap-1.5 lg:grid-cols-5">
<div className="col-span-3 space-y-0.5 text-sm">
<Label>{label}</Label>
<div className="text-muted-foreground">{description}</div>
</div>
<div className="flex items-center gap-1.5">
<span className="font-mono text-foreground text-sm">
{formatPrice(price)}
{isQuantity ? "/mo./each" : "/mo."}
</span>
{hasAddon && !isQuantity ? (
<Check className="size-4 text-success" />
) : null}
{hasAddon && isQuantity ? (
<span className="font-mono text-success">+{defaultValue}</span>
) : null}
</div>
<div className="col-span-2 flex items-center justify-end gap-1.5 lg:col-span-1">
<AlertDialogTrigger asChild>
<Button size="sm" variant="secondary">
{value ? "Remove" : "Add"}
{getButtonLabel(hasAddon, value)}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{label}</AlertDialogTitle>
<AlertDialogDescription>
{value ? (
<>
{label} will be removed from your subscription. You will
save{" "}
{price
? new Intl.NumberFormat(price.locale, {
style: "currency",
currency: price.currency,
}).format(price.value)
: "N/A"}
/mo. on your next billing cycle.
</>
) : (
<>
{label} will be added to your subscription. You will be
charged an additional{" "}
{price
? new Intl.NumberFormat(price.locale, {
style: "currency",
currency: price.currency,
}).format(price.value)
: "N/A"}
/mo. on your next billing cycle.
</>
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault();
submitAction();
}}
disabled={isPending}
>
{isPending ? "Updating..." : value ? "Remove" : "Add"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
</div>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{label}</AlertDialogTitle>
<AlertDialogDescription>
{getDialogDescription(label, price, value, hasAddon)}
</AlertDialogDescription>
</AlertDialogHeader>
{isQuantity &&
typeof value === "number" &&
typeof defaultLimit === "number" ? (
<QuantityControl
value={value}
setValue={setValue}
defaultLimit={defaultLimit}
/>
) : null}
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault();
submitAction();
}}
disabled={
isPending ||
(typeof value === "number" &&
typeof defaultValue === "number" &&
value === defaultValue)
}
>
{getButtonLabel(hasAddon, value, isPending)}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}

// NOTE: could move to lib/formatter.ts
function formatPrice(price: PriceConfig | null) {
if (!price) return "N/A";
return new Intl.NumberFormat(price.locale, {
style: "currency",
currency: price.currency,
}).format(price.value);
}

function getButtonLabel(
hasAddon: boolean,
value: number | boolean,
isPending = false,
) {
if (isPending) return "Updating...";

const isBoolean = typeof value === "boolean";
const isQuantity = typeof value === "number";

if (isQuantity) return "Update";

if (isBoolean) {
return hasAddon ? "Remove" : "Add";
}

return null;
}

function getDialogDescription(
label: string,
price: PriceConfig | null,
value: number | boolean,
hasAddon: boolean,
) {
const formattedPrice = formatPrice(price);
const isBoolean = typeof value === "boolean";
const isQuantity = typeof value === "number";
const priceSuffix = isQuantity ? "/mo./each" : "/mo.";

if (isBoolean) {
if (hasAddon) {
return `${label} will be removed from your subscription. You will save ${formattedPrice}${priceSuffix} on your next billing cycle.`;
}
return `${label} will be added to your subscription. You will be charged an additional ${formattedPrice}${priceSuffix} on your next billing cycle.`;
}

if (isQuantity) {
return `${label} will be updated to ${value} on your next billing cycle. You will be charged ${formattedPrice}${priceSuffix} on your next billing cycle.`;
}
}

function QuantityControl({
value,
setValue,
defaultLimit,
}: {
value: number;
setValue: (value: number) => void;
defaultLimit: number | boolean;
}) {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = Number.parseInt(e.target.value);
if (Number.isNaN(newValue)) {
setValue(typeof defaultLimit === "number" ? defaultLimit : 0);
} else {
setValue(
Math.max(typeof defaultLimit === "number" ? defaultLimit : 0, newValue),
);
}
};

return (
<div className="flex items-center justify-center gap-2 py-2">
<ButtonGroup aria-label="Quantity" className="h-fit">
<Button
variant="outline"
size="icon"
onClick={() => setValue(value - 1)}
disabled={value <= 0}
>
<MinusIcon />
</Button>
<Input
type="number"
value={value}
className="w-16 text-right"
step={1}
min={0}
onChange={handleChange}
/>
<Button
variant="outline"
size="icon"
onClick={() => setValue(value + 1)}
>
<PlusIcon />
</Button>
</ButtonGroup>
</div>
);
}
Loading
Loading