321 lines
15 KiB
TypeScript
321 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import DOMPurify from 'dompurify';
|
|
import { wishlistsApi, itemsApi, claimingApi, settingsApi, type Wishlist, type Item, type Settings } from '@/lib/api';
|
|
import Header from '@/components/header';
|
|
import PasswordLockGuard from '@/components/password-lock-guard';
|
|
|
|
export default function Home() {
|
|
const [wishlist, setWishlist] = useState<Wishlist | null>(null);
|
|
const [items, setItems] = useState<Item[]>([]);
|
|
const [showClaimed, setShowClaimed] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [settings, setSettings] = useState<Settings>({ siteTitle: 'Chá do Martin', homepageSubtext: 'Escolha um presente da lista!' });
|
|
|
|
const [claimingItemId, setClaimingItemId] = useState<string | null>(null);
|
|
const [claimNote, setClaimNote] = useState('');
|
|
const [isClaiming, setIsClaiming] = useState(false);
|
|
const [claimError, setClaimError] = useState('');
|
|
const [justClaimedItemId, setJustClaimedItemId] = useState<string | null>(null);
|
|
const [justClaimedNote, setJustClaimedNote] = useState('');
|
|
|
|
const [isUnclaiming, setIsUnclaiming] = useState(false);
|
|
const [unclaimError, setUnclaimError] = useState('');
|
|
|
|
useEffect(() => {
|
|
bootstrap();
|
|
}, []);
|
|
|
|
const bootstrap = async () => {
|
|
try {
|
|
const [settingsData, wishlists] = await Promise.all([
|
|
settingsApi.getSettings().catch(() => null),
|
|
wishlistsApi.getAllPublic(),
|
|
]);
|
|
if (settingsData) setSettings(settingsData);
|
|
|
|
if (wishlists.length === 0) {
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
const primary = wishlists[0];
|
|
setWishlist(primary);
|
|
const itemsData = await itemsApi.getAll(primary.id);
|
|
setItems(itemsData.sort((a, b) => a.sortOrder - b.sortOrder));
|
|
} catch (error) {
|
|
console.error('Failed to load home page:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const refetchItems = async () => {
|
|
if (!wishlist) return;
|
|
const itemsData = await itemsApi.getAll(wishlist.id);
|
|
setItems(itemsData.sort((a, b) => a.sortOrder - b.sortOrder));
|
|
};
|
|
|
|
const handleClaimItem = (itemId: string) => {
|
|
setClaimingItemId(itemId);
|
|
setClaimError('');
|
|
setClaimNote('');
|
|
setJustClaimedItemId(null);
|
|
};
|
|
|
|
const handleSubmitClaim = async (e: React.FormEvent, itemId: string) => {
|
|
e.preventDefault();
|
|
setIsClaiming(true);
|
|
setClaimError('');
|
|
try {
|
|
await claimingApi.claim(itemId, undefined, claimNote);
|
|
setJustClaimedItemId(itemId);
|
|
setJustClaimedNote(claimNote);
|
|
setClaimingItemId(null);
|
|
setClaimNote('');
|
|
await refetchItems();
|
|
} catch (err: any) {
|
|
setClaimError(err.message || 'Erro ao reservar item');
|
|
} finally {
|
|
setIsClaiming(false);
|
|
}
|
|
};
|
|
|
|
const handleUnclaim = async (itemId: string) => {
|
|
if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) return;
|
|
setIsUnclaiming(true);
|
|
setUnclaimError('');
|
|
try {
|
|
await claimingApi.unclaim(itemId);
|
|
await refetchItems();
|
|
} catch (err: any) {
|
|
setUnclaimError(err.message || 'Erro ao cancelar reserva');
|
|
} finally {
|
|
setIsUnclaiming(false);
|
|
}
|
|
};
|
|
|
|
const filteredItems = showClaimed
|
|
? items
|
|
: items.filter((item) => !item.claimedAt || item.id === justClaimedItemId);
|
|
|
|
const formatPrice = (price: number | null, currency: string) => {
|
|
if (!price) return null;
|
|
return new Intl.NumberFormat('pt-BR', {
|
|
style: 'currency',
|
|
currency: currency || 'BRL',
|
|
}).format(price);
|
|
};
|
|
|
|
return (
|
|
<PasswordLockGuard>
|
|
<div className="min-h-screen bg-cosmic">
|
|
<Header
|
|
title={settings.siteTitle}
|
|
subtitle={wishlist?.description || settings.homepageSubtext}
|
|
imageUrl={wishlist?.imageUrl || undefined}
|
|
maxWidth="max-w-5xl"
|
|
/>
|
|
|
|
<div className="max-w-5xl mx-auto py-12 sm:px-6 lg:px-8">
|
|
<div className="px-4 sm:px-0">
|
|
{isLoading ? (
|
|
<div className="text-center py-12">
|
|
<p className="text-[color:var(--muted)]">Carregando...</p>
|
|
</div>
|
|
) : !wishlist ? (
|
|
<div className="text-center py-12 bg-card rounded-2xl shadow-soft">
|
|
<p className="text-[color:var(--muted)]">Nenhuma lista disponível ainda</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{wishlist.preferences && (
|
|
<div className="mb-8 bg-card rounded-2xl shadow-soft p-6">
|
|
<h2 className="text-xl font-bold text-[color:var(--ink)] mb-3">
|
|
Interesses e Preferências
|
|
</h2>
|
|
<div
|
|
className="prose prose-indigo dark:prose-invert max-w-none text-[color:var(--ink-soft)] [&_a]:text-[color:var(--accent)] [&_a]:hover:underline"
|
|
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(wishlist.preferences) }}
|
|
onClick={(e) => {
|
|
const target = e.target as HTMLElement;
|
|
if (target.tagName === 'A') {
|
|
e.preventDefault();
|
|
window.open((target as HTMLAnchorElement).href, '_blank', 'noopener,noreferrer');
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={showClaimed}
|
|
onChange={(e) => setShowClaimed(e.target.checked)}
|
|
className="h-4 w-4 rounded border-[color:var(--border)] accent-[color:var(--accent)]"
|
|
/>
|
|
<span className="ml-2 text-sm text-[color:var(--ink-soft)]">Mostrar itens reservados</span>
|
|
</label>
|
|
<div className="text-sm text-[color:var(--muted)]">
|
|
{filteredItems.length} de {items.length} itens
|
|
</div>
|
|
</div>
|
|
|
|
{filteredItems.length === 0 ? (
|
|
<div className="text-center py-12 bg-card rounded-2xl shadow-soft">
|
|
<p className="text-[color:var(--muted)]">
|
|
{showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{filteredItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="bg-card rounded-2xl shadow-soft hover:shadow-lifted transition-all duration-300 overflow-hidden"
|
|
>
|
|
<div className="flex flex-col md:flex-row">
|
|
{item.imageUrl && (
|
|
<div className="md:w-48 md:flex-shrink-0">
|
|
<img
|
|
src={item.imageUrl}
|
|
alt={item.name}
|
|
className="w-full h-48 md:h-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 p-6">
|
|
<h3 className="text-2xl font-bold text-[color:var(--ink)] mb-3">
|
|
{item.name}
|
|
</h3>
|
|
{item.description && (
|
|
<p className="text-base text-[color:var(--ink-soft)] mb-4">
|
|
{item.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="md:w-80 md:flex-shrink-0 p-6 bg-card-soft border-t md:border-t-0 md:border-l border-[color:var(--border)] flex flex-col">
|
|
<div className="mb-4">
|
|
{item.purchaseUrls && item.purchaseUrls.length > 0 && (
|
|
<div className="space-y-2">
|
|
{item.purchaseUrls.map((url, idx) => (
|
|
<a
|
|
key={idx}
|
|
href={url.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-between text-base px-4 py-3 rounded-xl hover:bg-[color:var(--accent-soft)] transition-colors cursor-pointer border border-[color:var(--border)]"
|
|
>
|
|
<span className="text-[color:var(--accent)] font-medium">
|
|
{url.label}
|
|
</span>
|
|
<span className="text-[color:var(--ink)] font-bold text-lg">
|
|
{item.price && formatPrice(item.price, item.currency)}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-auto">
|
|
{justClaimedItemId === item.id ? (
|
|
<div className="bg-[color:var(--success-soft)] border border-[color:var(--success-border)] rounded-xl p-4">
|
|
<div className="flex items-center justify-center mb-2">
|
|
<div className="w-12 h-12 bg-[color:var(--success)] rounded-full flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p className="text-center text-lg font-semibold text-[color:var(--ink)] mb-1">
|
|
Item reservado!
|
|
</p>
|
|
<p className="text-center text-sm text-[color:var(--ink-soft)] mb-2">
|
|
O status está confirmado.
|
|
</p>
|
|
{justClaimedNote && (
|
|
<p className="text-center text-xs text-[color:var(--ink-soft)] italic">
|
|
Sua nota: "{justClaimedNote}"
|
|
</p>
|
|
)}
|
|
</div>
|
|
) : item.claimedAt ? (
|
|
<div className="bg-[color:var(--success-soft)] border border-[color:var(--success-border)] rounded-xl p-3">
|
|
{item.claimedByNote && (
|
|
<p className="text-xs text-[color:var(--success-ink)] mt-1">
|
|
Nota: {item.claimedByNote}
|
|
</p>
|
|
)}
|
|
{item.isPurchased && (
|
|
<p className="text-xs text-[color:var(--success-ink)] mt-1 font-medium">
|
|
✓ Comprado
|
|
</p>
|
|
)}
|
|
{showClaimed && (
|
|
<button
|
|
onClick={() => handleUnclaim(item.id)}
|
|
disabled={isUnclaiming}
|
|
className="mt-3 w-full px-4 py-2 bg-rose-400 text-white rounded-xl hover:bg-rose-500 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
|
|
>
|
|
{isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : claimingItemId === item.id ? (
|
|
<form onSubmit={(e) => handleSubmitClaim(e, item.id)} className="space-y-3">
|
|
{claimError && (
|
|
<div className="p-2 bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 rounded text-xs">
|
|
{claimError}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-[color:var(--ink-soft)] mb-1">
|
|
Deixe uma nota (opcional):
|
|
</label>
|
|
<textarea
|
|
id={`claim-note-${item.id}`}
|
|
rows={3}
|
|
placeholder="Ex: 'Vou comprar na semana que vem' ou 'Achei uma boa promoção'"
|
|
className="w-full px-3 py-2 text-sm border border-[color:var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] resize-none"
|
|
value={claimNote}
|
|
onChange={(e) => setClaimNote(e.target.value)}
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={isClaiming}
|
|
className="w-full px-4 py-2 bg-[color:var(--success)] text-white rounded-xl hover:brightness-105 font-medium disabled:opacity-50 transition-all cursor-pointer"
|
|
>
|
|
{isClaiming ? 'Reservando...' : 'Confirmar reserva'}
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<button
|
|
onClick={() => handleClaimItem(item.id)}
|
|
className="w-full px-4 py-2 bg-[color:var(--accent)] text-white rounded-xl hover:brightness-110 font-medium transition-all cursor-pointer shadow-soft"
|
|
>
|
|
Vou dar este presente
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PasswordLockGuard>
|
|
);
|
|
}
|