From 7df27e67b0d3800611c951b9ace5e0a6c50861b9 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 23 Mar 2025 13:34:48 -0600
Subject: [PATCH] feat: improve error handling and user feedback

---
 .../app/[locale]/license/success/page.tsx     | 71 +++++++++++++++++--
 1 file changed, 65 insertions(+), 6 deletions(-)

diff --git a/apps/website/app/[locale]/license/success/page.tsx b/apps/website/app/[locale]/license/success/page.tsx
index e8c4451..be30376 100644
--- a/apps/website/app/[locale]/license/success/page.tsx
+++ b/apps/website/app/[locale]/license/success/page.tsx
@@ -1,10 +1,16 @@
 "use client";
-import { Container } from "@/components/Container";
 import { SERVER_LICENSE_URL } from "@/components/pricing";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import confetti from "canvas-confetti";
 import copy from "copy-to-clipboard";
-import { CheckCircle2, Copy, Loader2, Mail, Terminal } from "lucide-react";
+import {
+	CheckCircle2,
+	Copy,
+	Loader2,
+	Mail,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import Link from "next/link";
 import { redirect, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -51,7 +57,6 @@ export default function LicenseSuccess() {
 	}, [sessionId]);
 
 	useEffect(() => {
-		// Launch confetti when the page loads
 		if (data) {
 			confetti({
 				particleCount: 150,
@@ -70,10 +75,64 @@ export default function LicenseSuccess() {
 	return (
 		<div className="relative min-h-screen bg-gradient-to-b from-black via-zinc-900 to-black">
 			<div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" />
-			{loading ? (
+
+			{loading || error ? (
 				<div className="relative pt-48 pb-28">
 					<div className="mx-auto max-w-4xl text-center flex justify-center items-center h-full">
-						<Loader2 className="h-16 w-16 text-zinc-500 animate-spin" />
+						{loading ? (
+							<Loader2 className="h-16 w-16 text-zinc-500 animate-spin" />
+						) : (
+							<div className="flex flex-col gap-4">
+								<p className="text-zinc-400 text-sm">
+									Something went wrong, please try again {error}{" "}
+									<Button
+										variant="outline"
+										size="icon"
+										onClick={() => {
+											window.location.reload();
+										}}
+									>
+										<RefreshCcw className="h-4 w-4" />
+									</Button>
+									<br />
+									Please contact us on Discord or email
+								</p>
+								<div className="flex justify-center items-center gap-2">
+									<Link
+										href="mailto:support@dokploy.com"
+										className={buttonVariants({
+											variant: "outline",
+											size: "sm",
+											className:
+												"rounded-full bg-[#5965F2]  hover:bg-[#4A55E0]",
+										})}
+									>
+										Send Email
+									</Link>
+									<Button
+										className="rounded-full bg-[#5965F2]  hover:bg-[#4A55E0]"
+										asChild
+									>
+										<Link
+											href="https://discord.gg/2tBnJ3jDJc"
+											aria-label="Dokploy on GitHub"
+											target="_blank"
+											className="flex flex-row items-center gap-2 text-white"
+										>
+											<svg
+												role="img"
+												className="h-6 w-6 fill-white"
+												viewBox="0 0 24 24"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+											</svg>
+											Discord
+										</Link>
+									</Button>
+								</div>
+							</div>
+						)}
 					</div>
 				</div>
 			) : (