feat(thank-you-page): convert to client component with confetti and UI enhancements

- Changed from server to client component to enable interactive features like confetti animation
- Removed server-side translations and hardcoded Portuguese text for simplicity
- Added confetti effect on page load and improved success icon with animations
- Updated buttons and share functionality for better user experience
- This enhances the donation thank you page with celebratory elements and client-side interactivity

app/[locale]/apoiar/obrigado/page.tsx

@@ -1,28 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import confetti from "canvas-confetti";
 import Header from "@/components/Header";
 import { Button } from "@/components/ui/button";
 import { BlurFade } from "@/components/ui/blur-fade";
 import { Heart, Share2, Home } from "lucide-react";
-import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { locale: string };
-}) {
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
-  return {
-    title: t("title"),
-    description: t("subtitle"),
-  };
-}
+export default function ThankYouPage() {
+  const params = useParams();
+  const locale = params.locale as string;
 
-export default async function ThankYouPage({
-  params: { locale },
-}: {
-  params: { locale: string };
-}) {
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
+  // Confetti ao carregar página
+  useEffect(() => {
+    confetti({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 },
+    });
+  }, []);
 
   return (
     <div className="min-h-screen">
@@ -31,25 +29,33 @@ export default async function ThankYouPage({
       <div className="container mx-auto px-4 py-20">
         <BlurFade delay={0.1}>
           <div className="max-w-2xl mx-auto text-center">
-            {/* Ícone de coração animado */}
+            {/* Ícone de sucesso animado */}
             <div className="flex justify-center mb-8">
-              <div className="p-6 rounded-full bg-primary/10 border border-primary/20">
-                <Heart className="w-16 h-16 text-primary animate-pulse" />
+              <div className="relative">
+                <div className="absolute inset-0 bg-green-500/20 rounded-full animate-ping" />
+                <div className="relative p-6 rounded-full bg-green-500/10 border-4 border-green-500">
+                  <Heart
+                    className="w-20 h-20 text-green-500"
+                    fill="currentColor"
+                  />
+                </div>
               </div>
             </div>
 
             {/* Título e subtítulo */}
             <h1 className="text-4xl md:text-5xl font-bold mb-4">
-              {t("title")}
+              Muito Obrigado! 🎉
             </h1>
             <p className="text-xl text-muted-foreground mb-8">
-              {t("subtitle")}
+              Sua doação foi confirmada com sucesso!
             </p>
 
             {/* Mensagem de agradecimento */}
             <div className="p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg mb-8">
               <p className="text-lg leading-relaxed text-muted-foreground">
-                {t("message")}
+                Sua generosidade nos ajuda a continuar desenvolvendo e mantendo
+                o Tibia Trade Pagodera. Cada contribuição faz toda a diferença
+                para nossa comunidade!
               </p>
             </div>
 
@@ -58,30 +64,43 @@ export default async function ThankYouPage({
               <Link href={`/${locale}`}>
                 <Button size="lg" className="w-full sm:w-auto">
                   <Home className="mr-2 h-5 w-5" />
-                  {t("back")}
+                  Voltar ao Início
+                </Button>
+              </Link>
+
+              <Link href={`/${locale}/apoiar`}>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  <Heart className="mr-2 h-5 w-5" />
+                  Fazer Outra Doação
                 </Button>
               </Link>
 
               <Button
                 size="lg"
-                variant="outline"
+                variant="secondary"
                 className="w-full sm:w-auto"
                 onClick={() => {
-                  if (navigator.share) {
+                  if (typeof navigator !== "undefined" && navigator.share) {
                     navigator.share({
                       title: "Tibia Trade Pagodera",
-                      text: "Conheça o marketplace mais seguro para negociar itens no servidor Pagodera!",
+                      text: "Acabei de fazer uma doação para o Tibia Trade Pagodera! Ajude também!",
                       url: window.location.origin,
                     });
-                  } else {
-                    // Fallback para copiar link
+                  } else if (
+                    typeof navigator !== "undefined" &&
+                    navigator.clipboard
+                  ) {
                     navigator.clipboard.writeText(window.location.origin);
                     alert("Link copiado para a área de transferência!");
                   }
                 }}
               >
                 <Share2 className="mr-2 h-5 w-5" />
-                {t("share")}
+                Compartilhar
               </Button>
             </div>
 

app/api/donations/status/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getPaymentStatus } from "@/lib/payment-cache";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const pixId = searchParams.get("pixId");
+
+    if (!pixId) {
+      return NextResponse.json(
+        { error: "pixId é obrigatório" },
+        { status: 400 }
+      );
+    }
+
+    const status = getPaymentStatus(pixId);
+
+    return NextResponse.json({
+      pixId,
+      paid: status?.paid || false,
+      paidAt: status?.paidAt,
+      amount: status?.amount,
+      anonymous: status?.anonymous,
+    });
+  } catch (error) {
+    console.error("Erro ao verificar status do pagamento:", error);
+    return NextResponse.json(
+      { error: "Erro ao verificar status" },
+      { status: 500 }
+    );
+  }
+}

app/api/webhooks/abacatepay/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { abacatePay } from "@/lib/abacatepay";
+import { markAsPaid } from "@/lib/payment-cache";
 
 export async function POST(request: NextRequest) {
   try {
@@ -74,9 +75,8 @@ export async function POST(request: NextRequest) {
 
       console.log("📝 Registro de pagamento:", donationRecord);
 
-      // Registar pixId confirmado (para frontend detectar via localStorage)
-      // O frontend salva pixIds confirmados em localStorage via evento do servidor
-      // Isso permite detecção em tempo real sem polling na API
+      // Salvar no cache para frontend detectar via polling
+      markAsPaid(pixQrCode.id, donationRecord);
 
       // TODO: Quando implementar banco de dados, salvar aqui:
       // await db.donations.create(donationRecord);