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

feat: add ManageSubscriptionButton component to LicenseCard for improved subscription management

Browse Source
This commit is contained in:
Mauricio Siu
2025-03-23 18:55:25 -06:00
parent a20205fdee
commit c916e990f4
2 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/website/app/[locale]/license/view/components/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client";
import { SERVER_LICENSE_URL } from "../page";
interface Props {
customerId: string;
}
export const ManageSubscriptionButton = ({ customerId }: Props) => {
return (
<button
type="button"
onClick={async () => {
const getSessionId = await fetch(
`${SERVER_LICENSE_URL}/stripe/create-customer-portal-session`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ customerId }),
},
);
const result = await getSessionId.json();
window.open(result.url, "_blank");
}}
className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
>
<span>Manage Subscription</span>
</button>
);
};

10
apps/website/app/[locale]/license/view/page.tsx
View File

@@ -1,5 +1,5 @@
import Link from "next/link";
import { useParams } from "next/navigation";
import { ManageSubscriptionButton } from "./components";
export const SERVER_LICENSE_URL =
process.env.NODE_ENV === "development"
@@ -10,7 +10,6 @@ const LicenseCard = ({ license, stripeSuscription }: any) => {
return (
<div className="bg-card backdrop-blur supports-[backdrop-filter]:bg-card/60 rounded-lg shadow-xl p-6 border border-border h-full">
<div className="space-y-6">
{/* License Information Section */}
<div>
<h2 className="text-xl font-bold text-foreground mb-4">
License Information
@@ -86,12 +85,7 @@ const LicenseCard = ({ license, stripeSuscription }: any) => {
</div>
<div className="pt-4">
<button
type="button"
className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
>
<span>Manage Subscription</span>
</button>
<ManageSubscriptionButton customerId={license.stripeCustomerId} />
</div>
</div>
</div>