diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx index 1d79903cf..1460244c1 100644 --- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx +++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx @@ -128,235 +128,235 @@ export const ShowBilling = () => {
- setIsAnnual(e === "annual")} - > - - Monthly - Annual - - - {admin?.user.stripeSubscriptionId && ( -
-

Servers Plan

-

- You have {servers} server on your plan of{" "} - {admin?.user.serversQuantity} servers -

-
- -
- {admin && admin.user.serversQuantity! <= (servers ?? 0) && ( -
- - - You have reached the maximum number of servers you can - create, please upgrade your plan to add more servers. - -
- )} + setIsAnnual(e === "annual")} + > + + Monthly + Annual + + + {admin?.user.stripeSubscriptionId && ( +
+

Servers Plan

+

+ You have {servers} server on your plan of{" "} + {admin?.user.serversQuantity} servers +

+
+ +
+ {admin && admin.user.serversQuantity! <= (servers ?? 0) && ( +
+ + + You have reached the maximum number of servers you can + create, please upgrade your plan to add more servers. +
)} -
- - Need Help? We are here to help you. - - - Join to our Discord server and we will help you. - - +
+ {isLoading ? ( + + Loading... + + + ) : ( + <> + {products?.map((product) => { + const featured = true; + return ( +
+
- - - Join Discord - - -
- {isLoading ? ( - - Loading... - - - ) : ( - <> - {products?.map((product) => { - const featured = true; - return ( -
-
+ Recommended 🚀 +
+ )} + {isAnnual ? ( +
+

+ ${" "} + {calculatePrice( + serverQuantity, + isAnnual, + ).toFixed(2)}{" "} + USD +

+ | +

+ ${" "} + {( + calculatePrice(serverQuantity, isAnnual) / 12 + ).toFixed(2)}{" "} + / Month USD +

+
+ ) : ( +

+ ${" "} + {calculatePrice(serverQuantity, isAnnual).toFixed( + 2, + )}{" "} + USD +

+ )} +

+ {product.name} +

+

+ {product.description} +

+ +
    + {[ + "All the features of Dokploy", + "Unlimited deployments", + "Self-hosted on your own infrastructure", + "Full access to all deployment features", + "Dokploy integration", + "Backups", + "All Incoming features", + ].map((feature) => ( +
  • + + {feature} +
  • + ))} +
+
+
+ + {serverQuantity} Servers + +
+ +
+ + { + setServerQuantity( + e.target.value as unknown as number, + ); + }} + /> + + +
+
0 + ? "justify-between" + : "justify-end", + "flex flex-row items-center gap-2 mt-4", )} > - {isAnnual && ( -
- Recommended 🚀 -
- )} - {isAnnual ? ( -
-

- ${" "} - {calculatePrice( - serverQuantity, - isAnnual, - ).toFixed(2)}{" "} - USD -

- | -

- ${" "} - {( - calculatePrice(serverQuantity, isAnnual) / 12 - ).toFixed(2)}{" "} - / Month USD -

-
- ) : ( -

- ${" "} - {calculatePrice(serverQuantity, isAnnual).toFixed( - 2, - )}{" "} - USD -

- )} -

- {product.name} -

-

- {product.description} -

+ {admin?.user.stripeCustomerId && ( + - { - setServerQuantity( - e.target.value as unknown as number, - ); - }} - /> - - -
-
0 - ? "justify-between" - : "justify-end", - "flex flex-row items-center gap-2 mt-4", - )} + window.open(session.url); + }} > - {admin?.user.stripeCustomerId && ( - + )} - window.open(session.url); - }} - > - Manage Subscription - - )} - - {data?.subscriptions?.length === 0 && ( -
- -
- )} + {data?.subscriptions?.length === 0 && ( +
+
-
- + )} +
- ); - })} - - )} -
+ +
+ ); + })} + + )} +