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({
+export default function ThankYouPage() {
-  params: { locale },
+  const params = useParams();
-}: {
+  const locale = params.locale as string;
-  params: { locale: string };
-}) {
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
-  return {
-    title: t("title"),
-    description: t("subtitle"),
-  };
-}
 
-export default async function ThankYouPage({
+  // Confetti ao carregar página
-  params: { locale },
+  useEffect(() => {
-}: {
+    confetti({
-  params: { locale: string };
+      particleCount: 100,
-}) {
+      spread: 70,
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
+      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">
+              <div className="relative">
-                <Heart className="w-16 h-16 text-primary animate-pulse" />
+                <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 {
+                  } else if (
-                    // Fallback para copiar link
+                    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)
+      // Salvar no cache para frontend detectar via polling
-      // O frontend salva pixIds confirmados em localStorage via evento do servidor
+      markAsPaid(pixQrCode.id, donationRecord);
-      // Isso permite detecção em tempo real sem polling na API
 
       // TODO: Quando implementar banco de dados, salvar aqui:
       // await db.donations.create(donationRecord);

components/donation-card.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Textarea } from "@/components/ui/textarea";
+import confetti from "canvas-confetti";
 import {
   Heart,
   Coffee,
@@ -68,6 +69,17 @@ export function DonationCard({
 
   const Icon = icons[icon];
 
+  // Confetti ao abrir modal de agradecimento
+  useEffect(() => {
+    if (showThankYouModal) {
+      confetti({
+        particleCount: 100,
+        spread: 70,
+        origin: { y: 0.6 },
+      });
+    }
+  }, [showThankYouModal]);
+
   // Atualizar timer e verificar pagamento automaticamente
   useEffect(() => {
     if (!pixData?.expiresAt || !pixData?.pixId) {
@@ -95,28 +107,37 @@ export function DonationCard({
       }
     };
 
-    // Verificar pagamento via localStorage
+    // Verificar pagamento via API
-    const checkPaymentConfirmation = () => {
+    const checkPaymentConfirmation = async () => {
-      const savedPixId = localStorage.getItem("currentPixId");
+      if (!pixData?.pixId) return;
-      const confirmedPixIds = localStorage.getItem("confirmedPixIds");
 
-      if (savedPixId && confirmedPixIds) {
+      try {
-        try {
+        const response = await fetch(
-          const confirmed = JSON.parse(confirmedPixIds);
+          `/api/donations/status?pixId=${pixData.pixId}`
-          if (confirmed.includes(savedPixId)) {
+        );
-            console.log("✅ Pagamento confirmado!");
+        const data = await response.json();
-            setPaymentConfirmed(true);
+
-            setTimeout(() => {
+        if (data.paid) {
-              setShowPixModal(false);
+          console.log("✅ Pagamento confirmado!");
-              setShowThankYouModal(true);
+          setPaymentConfirmed(true);
-              // Limpar
+
-              localStorage.removeItem("currentPixId");
+          // Confetti celebration!
-            }, 1000);
+          confetti({
-            clearInterval(timerInterval);
+            particleCount: 100,
-          }
+            spread: 70,
-        } catch (e) {
+            origin: { y: 0.6 },
-          console.error("Erro ao verificar pagamento:", e);
+          });
+
+          setTimeout(() => {
+            setShowPixModal(false);
+            setShowThankYouModal(true);
+            // Limpar localStorage
+            localStorage.removeItem("currentPixId");
+          }, 1000);
+          clearInterval(timerInterval);
         }
+      } catch (error) {
+        console.error("Erro ao verificar pagamento:", error);
       }
     };
 

lib/payment-cache.ts

@@ -0,0 +1,47 @@
+// Cache simples em memória (Map) para armazenar status de pagamentos
+// Em produção, trocar por Redis ou banco de dados
+
+interface PaymentStatus {
+  paid: boolean;
+  paidAt?: string;
+  amount: number;
+  anonymous: boolean;
+  customer?: any;
+}
+
+const paymentCache = new Map<string, PaymentStatus>();
+
+export function markAsPaid(
+  pixId: string,
+  data: {
+    paidAt: string;
+    amount: number;
+    anonymous: boolean;
+    customer?: any;
+  }
+) {
+  paymentCache.set(pixId, {
+    paid: true,
+    paidAt: data.paidAt,
+    amount: data.amount,
+    anonymous: data.anonymous,
+    customer: data.customer,
+  });
+
+  console.log(`✅ Pagamento marcado como pago no cache: ${pixId}`);
+
+  // Limpar após 1 hora
+  setTimeout(() => {
+    paymentCache.delete(pixId);
+    console.log(`🗑️ Cache expirado para: ${pixId}`);
+  }, 3600000);
+}
+
+export function getPaymentStatus(pixId: string): PaymentStatus | undefined {
+  return paymentCache.get(pixId);
+}
+
+// Limpar cache expirado periodicamente (a cada 5 minutos)
+setInterval(() => {
+  console.log(`📊 Cache atual: ${paymentCache.size} pagamentos armazenados`);
+}, 300000);

package.json

@@ -19,6 +19,8 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@types/canvas-confetti": "^1.9.0",
+    "canvas-confetti": "^1.9.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cobe": "^0.6.5",

pnpm-lock.yaml

@@ -35,6 +35,12 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
+      canvas-confetti:
+        specifier: ^1.9.4
+        version: 1.9.4
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -892,6 +898,9 @@ packages:
   '@tailwindcss/[email protected]':
     resolution: {integrity: sha512-IZh8IT76KujRz6d15wZw4eoeViT4TqmzVWNNfpuNCTKiaZUwgr5vtPqO4HjuYDyx3MgGR5qgPt1HMzTeLJyA3g==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -940,6 +949,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==}
+
   [email protected]:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
@@ -2100,6 +2112,8 @@ snapshots:
       postcss: 8.5.6
       tailwindcss: 4.1.15
 
+  '@types/[email protected]': {}
+
   '@types/[email protected]': {}
 
   '@types/[email protected]': {}
@@ -2144,6 +2158,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       clsx: 2.1.1