feat: integrate Radix UI dialog component for server IP removal in LicenseCard

apps/website/app/[locale]/license/view/components/index.tsx

@@ -1,7 +1,19 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Loader2, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 import { SERVER_LICENSE_URL } from "../page";
-
 interface Props {
 	customerId: string;
 }
@@ -29,3 +41,67 @@ export const ManageSubscriptionButton = ({ customerId }: Props) => {
 		</button>
 	);
 };
+
+interface RemoveServerIpProps {
+	licenseKey: string;
+	serverIp: string;
+}
+export const RemoveServerIpButton = ({
+	licenseKey,
+	serverIp,
+}: RemoveServerIpProps) => {
+	const [loading, setLoading] = useState(false);
+	const removeServerIp = async () => {
+		setLoading(true);
+		const response = await fetch(
+			`${SERVER_LICENSE_URL}/license/remove-server`,
+			{
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ licenseKey, serverIp }),
+			},
+		);
+		const result = await response.json();
+
+		if (result.success) {
+			toast.success("Server IP removed successfully");
+		} else {
+			toast.error(result.error);
+		}
+
+		window.location.reload();
+	};
+	return (
+		<Dialog>
+			<DialogTrigger>
+				<Button variant="ghost" size="icon">
+					<Trash2 className="w-4 h-4 text-red-500" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
+						This action cannot be undone. This will remove the server IP from
+						the license.
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button
+						variant="destructive"
+						disabled={loading}
+						onClick={removeServerIp}
+					>
+						{loading ? (
+							<Loader2 className="w-4 h-4 animate-spin" />
+						) : (
+							"Remove Server IP"
+						)}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -1,5 +1,6 @@
+import { CopyButton } from "@/components/ui/copy-button";
 import Link from "next/link";
-import { ManageSubscriptionButton } from "./components";
+import { ManageSubscriptionButton, RemoveServerIpButton } from "./components";
 
 export const SERVER_LICENSE_URL =
 	process.env.NODE_ENV === "development"
@@ -19,7 +20,12 @@ const LicenseCard = ({ license, stripeSuscription }: any) => {
 							<p className="text-sm font-semibold text-muted-foreground">
 								License Key
 							</p>
-							<p className="text-foreground break-all">{license.licenseKey}</p>
+							<p className="text-foreground break-all flex gap-2">
+								{license.licenseKey}{" "}
+								<div className="relative [&>button]:relative [&>button]:right-0 [&>button]:top-0">
+									<CopyButton text={license.licenseKey} />
+								</div>
+							</p>
 						</div>
 						<div>
 							<p className="text-sm font-semibold text-muted-foreground">
@@ -29,7 +35,11 @@ const LicenseCard = ({ license, stripeSuscription }: any) => {
 								<div className="space-y-1">
 									{license.serverIps.map((ip: string, index: number) => (
 										<p key={ip} className="text-foreground">
-											{ip}
+											{ip}{" "}
+											<RemoveServerIpButton
+												licenseKey={license.licenseKey}
+												serverIp={ip}
+											/>
 										</p>
 									))}
 								</div>
@@ -81,6 +91,15 @@ const LicenseCard = ({ license, stripeSuscription }: any) => {
 								{stripeSuscription.billingType}
 							</p>
 						</div>
+
+						<div>
+							<p className="text-sm font-semibold text-muted-foreground">
+								Type
+							</p>
+							<p className="text-foreground capitalize">
+								{stripeSuscription.type}
+							</p>
+						</div>
 					</div>
 				</div>
 

apps/website/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-1.5 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};

apps/website/package.json

@@ -17,6 +17,7 @@
 		"@prettier/plugin-xml": "^3.4.1",
 		"@radix-ui/react-accordion": "^1.2.1",
 		"@radix-ui/react-avatar": "^1.1.1",
+		"@radix-ui/react-dialog": "^1.1.6",
 		"@radix-ui/react-scroll-area": "^1.2.0",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",