Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-15 20:25:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update billing component to manage server quantities for hobby and startup tiers

Browse Source 
- Replaced single server quantity state with separate states for hobby and startup server quantities.
- Adjusted calculations and UI elements to reflect the new state management for each tier.
- Ensured proper handling of server quantity in pricing calculations and button states.
This commit is contained in:
Mauricio Siu
2026-03-17 23:11:50 -06:00
parent cccee05173
commit 0c22041623
3 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
View File

@@ -91,7 +91,8 @@ export const ShowBilling = () => {
api.stripe.upgradeSubscription.useMutation();
const utils = api.useUtils();
const [serverQuantity, setServerQuantity] = useState(3);
const [hobbyServerQuantity, setHobbyServerQuantity] = useState(1);
const [startupServerQuantity, setStartupServerQuantity] = useState(STARTUP_SERVERS_INCLUDED);
const [isAnnual, setIsAnnual] = useState(false);
const [upgradeTier, setUpgradeTier] = useState<"hobby" | "startup" | null>(
null,
@@ -111,6 +112,12 @@ export const ShowBilling = () => {
productId: string,
) => {
const stripe = await stripePromise;
const serverQuantity =
tier === "startup"
? startupServerQuantity
: tier === "hobby"
? hobbyServerQuantity
: hobbyServerQuantity;
if (data && data.subscriptions.length === 0) {
createCheckoutSession({
tier,
@@ -679,7 +686,7 @@ export const ShowBilling = () => {
<p className="text-2xl font-semibold text-foreground">
$
{calculatePriceHobby(
serverQuantity,
hobbyServerQuantity,
isAnnual,
).toFixed(2)}
/{isAnnual ? "yr" : "mo"}
@@ -692,7 +699,7 @@ export const ShowBilling = () => {
<p className="text-xs text-muted-foreground mt-2">
$
{(
calculatePriceHobby(serverQuantity, true) / 12
calculatePriceHobby(hobbyServerQuantity, true) / 12
).toFixed(2)}
/mo
</p>
@@ -724,19 +731,19 @@ export const ShowBilling = () => {
Servers:
</span>
<Button
disabled={serverQuantity <= 1}
disabled={hobbyServerQuantity <= 1}
variant="outline"
size="icon"
onClick={() =>
setServerQuantity((q) => Math.max(1, q - 1))
setHobbyServerQuantity((q) => Math.max(1, q - 1))
}
>
<MinusIcon className="h-4 w-4" />
</Button>
<NumberInput
value={serverQuantity}
value={hobbyServerQuantity}
onChange={(e) =>
setServerQuantity(
setHobbyServerQuantity(
Math.max(
1,
Number(
@@ -750,7 +757,7 @@ export const ShowBilling = () => {
<Button
variant="outline"
size="icon"
onClick={() => setServerQuantity((q) => q + 1)}
onClick={() => setHobbyServerQuantity((q) => q + 1)}
>
<PlusIcon className="h-4 w-4" />
</Button>
@@ -775,7 +782,7 @@ export const ShowBilling = () => {
onClick={() =>
handleCheckout("hobby", data!.hobbyProductId!)
}
disabled={serverQuantity < 1}
disabled={hobbyServerQuantity < 1}
>
Get Started
</Button>
@@ -806,7 +813,7 @@ export const ShowBilling = () => {
<p className="text-2xl font-semibold text-foreground">
$
{calculatePriceStartup(
serverQuantity,
startupServerQuantity,
isAnnual,
).toFixed(2)}
/{isAnnual ? "yr" : "mo"}
@@ -819,7 +826,7 @@ export const ShowBilling = () => {
<p className="text-xs text-muted-foreground mt-2">
$
{(
calculatePriceStartup(serverQuantity, true) / 12
calculatePriceStartup(startupServerQuantity, true) / 12
).toFixed(2)}
/mo
</p>
@@ -856,13 +863,13 @@ export const ShowBilling = () => {
<div className="flex items-center gap-2">
<Button
disabled={
serverQuantity <= STARTUP_SERVERS_INCLUDED
startupServerQuantity <= STARTUP_SERVERS_INCLUDED
}
variant="outline"
size="icon"
className="h-8 w-8"
onClick={() =>
setServerQuantity((q) =>
setStartupServerQuantity((q) =>
Math.max(STARTUP_SERVERS_INCLUDED, q - 1),
)
}
@@ -870,9 +877,9 @@ export const ShowBilling = () => {
<MinusIcon className="h-4 w-4" />
</Button>
<NumberInput
value={serverQuantity}
value={startupServerQuantity}
onChange={(e) =>
setServerQuantity(
setStartupServerQuantity(
Math.max(
STARTUP_SERVERS_INCLUDED,
Number(
@@ -887,7 +894,7 @@ export const ShowBilling = () => {
variant="outline"
size="icon"
className="h-8 w-8"
onClick={() => setServerQuantity((q) => q + 1)}
onClick={() => setStartupServerQuantity((q) => q + 1)}
>
<PlusIcon className="h-4 w-4" />
</Button>
@@ -917,7 +924,7 @@ export const ShowBilling = () => {
)
}
disabled={
serverQuantity < STARTUP_SERVERS_INCLUDED
startupServerQuantity < STARTUP_SERVERS_INCLUDED
}
>
Get Started
@@ -1009,7 +1016,7 @@ export const ShowBilling = () => {
<p className="text-2xl font-semibold tracking-tight text-primary ">
${" "}
{calculatePrice(
serverQuantity,
hobbyServerQuantity,
isAnnual,
).toFixed(2)}{" "}
USD
@@ -1018,7 +1025,7 @@ export const ShowBilling = () => {
<p className="text-base font-semibold tracking-tight text-muted-foreground">
${" "}
{(
calculatePrice(serverQuantity, isAnnual) / 12
calculatePrice(hobbyServerQuantity, isAnnual) / 12
).toFixed(2)}{" "}
/ Month USD
</p>
@@ -1026,7 +1033,7 @@ export const ShowBilling = () => {
) : (
<p className="text-2xl font-semibold tracking-tight text-primary ">
${" "}
{calculatePrice(serverQuantity, isAnnual).toFixed(
{calculatePrice(hobbyServerQuantity, isAnnual).toFixed(
2,
)}{" "}
USD
@@ -1071,26 +1078,26 @@ export const ShowBilling = () => {
<div className="flex flex-col gap-2 mt-4">
<div className="flex items-center gap-2 justify-center">
<span className="text-sm text-muted-foreground">
{serverQuantity} Servers
{hobbyServerQuantity} Servers
</span>
</div>
<div className="flex items-center space-x-2">
<Button
disabled={serverQuantity <= 1}
disabled={hobbyServerQuantity <= 1}
variant="outline"
onClick={() => {
if (serverQuantity <= 1) return;
if (hobbyServerQuantity <= 1) return;
setServerQuantity(serverQuantity - 1);
setHobbyServerQuantity(hobbyServerQuantity - 1);
}}
>
<MinusIcon className="h-4 w-4" />
</Button>
<NumberInput
value={serverQuantity}
value={hobbyServerQuantity}
onChange={(e) => {
setServerQuantity(
setHobbyServerQuantity(
e.target.value as unknown as number,
);
}}
@@ -1099,7 +1106,7 @@ export const ShowBilling = () => {
<Button
variant="outline"
onClick={() => {
setServerQuantity(serverQuantity + 1);
setHobbyServerQuantity(hobbyServerQuantity + 1);
}}
>
<PlusIcon className="h-4 w-4" />
@@ -1125,7 +1132,7 @@ export const ShowBilling = () => {
onClick={async () => {
handleCheckout("legacy", product.id);
}}
disabled={serverQuantity < 1}
disabled={hobbyServerQuantity < 1}
>
Subscribe
</Button>

25
apps/dokploy/server/api/routers/stripe.ts
View File

@@ -21,7 +21,12 @@ import {
STARTUP_PRODUCT_ID,
WEBSITE_URL,
} from "@/server/utils/stripe";
import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc";
import {
adminProcedure,
createTRPCRouter,
protectedProcedure,
withPermission,
} from "../trpc";
export const stripeRouter = createTRPCRouter({
/** Returns the current billing plan for the user's organization. Used to gate features like chat (Startup only). */
@@ -314,16 +319,18 @@ export const stripeRouter = createTRPCRouter({
return { ok: true };
}),
canCreateMoreServers: adminProcedure.query(async ({ ctx }) => {
const user = await findUserById(ctx.user.ownerId);
const servers = await findServersByUserId(user.id);
canCreateMoreServers: withPermission("server", "create").query(
async ({ ctx }) => {
const user = await findUserById(ctx.user.ownerId);
const servers = await findServersByUserId(user.id);
if (!IS_CLOUD) {
return true;
}
if (!IS_CLOUD) {
return true;
}
return servers.length < user.serversQuantity;
}),
return servers.length < user.serversQuantity;
},
),
getInvoices: adminProcedure.query(async ({ ctx }) => {
const user = await findUserById(ctx.user.ownerId);

2
packages/server/src/lib/auth.ts
View File

@@ -116,7 +116,7 @@ const { handler, api } = betterAuth({
emailAndPassword: {
enabled: true,
autoSignIn: !IS_CLOUD,
requireEmailVerification: IS_CLOUD,
requireEmailVerification: IS_CLOUD && process.env.NODE_ENV === "production",
password: {
async hash(password) {
return bcrypt.hashSync(password, 10);