From c916e990f4bb0f77803fd428c0218144ff3982ef Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 23 Mar 2025 18:55:25 -0600
Subject: [PATCH] feat: add ManageSubscriptionButton component to LicenseCard
 for improved subscription management

---
 .../license/view/components/index.tsx         | 31 +++++++++++++++++++
 .../app/[locale]/license/view/page.tsx        | 10 ++----
 2 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 apps/website/app/[locale]/license/view/components/index.tsx

diff --git a/apps/website/app/[locale]/license/view/components/index.tsx b/apps/website/app/[locale]/license/view/components/index.tsx
new file mode 100644
index 0000000..0dfc243
--- /dev/null
+++ b/apps/website/app/[locale]/license/view/components/index.tsx
@@ -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>
+	);
+};
diff --git a/apps/website/app/[locale]/license/view/page.tsx b/apps/website/app/[locale]/license/view/page.tsx
index ea19245..726903d 100644
--- a/apps/website/app/[locale]/license/view/page.tsx
+++ b/apps/website/app/[locale]/license/view/page.tsx
@@ -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>