evandro/pagodera
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Evandro Fonseca Junior committed 2025-10-26 22:12:43 -03:00
1 parent ad62dd0de2
commit 8271d1fa31
7 files changed
+191 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/[locale]/apoiar/obrigado/page.tsx
+50 -31
View File
@@ -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
+32
View File
@@ -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
+3 -3
View File
@@ -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);
components/donation-card.tsx
+41 -20
View File
@@ -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
const checkPaymentConfirmation = () => {
const savedPixId = localStorage.getItem("currentPixId");
const confirmedPixIds = localStorage.getItem("confirmedPixIds");
// Verificar pagamento via API
const checkPaymentConfirmation = async () => {
if (!pixData?.pixId) return;
if (savedPixId && confirmedPixIds) {
try {
const confirmed = JSON.parse(confirmedPixIds);
if (confirmed.includes(savedPixId)) {
console.log("✅ Pagamento confirmado!");
setPaymentConfirmed(true);
setTimeout(() => {
setShowPixModal(false);
setShowThankYouModal(true);
// Limpar
localStorage.removeItem("currentPixId");
}, 1000);
clearInterval(timerInterval);
}
} catch (e) {
console.error("Erro ao verificar pagamento:", e);
try {
const response = await fetch(
`/api/donations/status?pixId=${pixData.pixId}`
);
const data = await response.json();
if (data.paid) {
console.log("✅ Pagamento confirmado!");
setPaymentConfirmed(true);
// Confetti celebration!
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
});
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
+47
View File
@@ -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
+2
View File
@@ -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
Generated
+16
View File
@@ -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