feat: grid layout, global claim/qty toggles, admin access link, swaddle image
- Public wishlist now renders as responsive 3-col grid instead of list - Subtitle supports line breaks (whitespace-pre-line) - claimingEnabled and showQuantity moved to global site settings (not per-item); toggled in admin Configurações panel; claim API enforces server-side - Admin dashboard shows admin access link with copy button - Settings API exposes and persists the two new boolean settings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano Belisario
@@ -3,7 +3,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import DOMPurify from 'dompurify';
|
||||
import { authApi, wishlistsApi, itemsApi, claimingApi, type Wishlist, type Item } from '@/lib/api';
|
||||
import { authApi, wishlistsApi, itemsApi, claimingApi, settingsApi, type Wishlist, type Item, type Settings } from '@/lib/api';
|
||||
import Header from '@/components/header';
|
||||
import GuestGuard from '@/components/guest-guard';
|
||||
|
||||
@@ -19,6 +19,7 @@ function PublicWishlistContent() {
|
||||
const params = useParams();
|
||||
const [wishlist, setWishlist] = useState<Wishlist | null>(null);
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const [siteSettings, setSiteSettings] = useState<Settings>({ siteTitle: '', homepageSubtext: '', claimingEnabled: true, showQuantity: true });
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
@@ -54,6 +55,7 @@ function PublicWishlistContent() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
settingsApi.getSettings().then(setSiteSettings).catch(() => {});
|
||||
fetchWishlist();
|
||||
}, [params.slug]);
|
||||
|
||||
@@ -192,176 +194,175 @@ function PublicWishlistContent() {
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredItems.map((item) => {
|
||||
const myClaim = myClaimFor(item);
|
||||
const maxForMe = item.remainingQuantity + (myClaim?.quantity ?? 0);
|
||||
const showQuantitySummary = item.quantity > 1;
|
||||
const showQuantitySummary = item.quantity > 1 && siteSettings.showQuantity;
|
||||
const sold = item.remainingQuantity === 0 && !myClaim;
|
||||
const canClaim = siteSettings.claimingEnabled;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-all duration-300 overflow-hidden"
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-all duration-300 overflow-hidden flex flex-col"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row">
|
||||
{/* Left: Image */}
|
||||
{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"
|
||||
/>
|
||||
{/* Top: Image */}
|
||||
{item.imageUrl && (
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={item.imageUrl}
|
||||
alt={item.name}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Middle: Item Details */}
|
||||
<div className="flex-1 p-5">
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{item.name}
|
||||
</h3>
|
||||
{item.price != null && (
|
||||
<p className="text-base font-semibold text-indigo-600 dark:text-indigo-400 mb-1">
|
||||
{new Intl.NumberFormat('pt-BR', { style: 'currency', currency: item.currency || 'BRL' }).format(item.price)}
|
||||
</p>
|
||||
)}
|
||||
{showQuantitySummary && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
{item.claimedQuantity} de {item.quantity} reservados
|
||||
</p>
|
||||
)}
|
||||
{item.description && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Existing claims list */}
|
||||
{item.claims.length > 0 && (
|
||||
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-1 mt-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
{item.claims.map((c) => {
|
||||
const isMine = c.guest.id === currentGuestId;
|
||||
const canCancel = isMine || isAdmin;
|
||||
return (
|
||||
<li key={c.id} className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<span className="font-medium">{isMine ? 'Você' : 'Reservado'}</span>
|
||||
{item.quantity > 1 && (
|
||||
<span className="text-gray-500"> · {c.quantity} un.</span>
|
||||
)}
|
||||
{c.note && isMine && (
|
||||
<span className="block text-xs italic text-gray-500">
|
||||
"{c.note}"
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{canCancel && (
|
||||
<button
|
||||
onClick={() => handleUnclaim(item.id, isMine ? undefined : c.guest.id)}
|
||||
disabled={isUnclaiming}
|
||||
className="text-xs text-red-600 hover:underline disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom: Action Area */}
|
||||
<div className="p-5 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
|
||||
{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-sm px-3 py-2 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors cursor-pointer border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<span className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">
|
||||
{url.label}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Middle: Item Details */}
|
||||
<div className="flex-1 p-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{item.name}
|
||||
</h3>
|
||||
{item.price != null && (
|
||||
<p className="text-lg font-semibold text-indigo-600 dark:text-indigo-400 mb-1">
|
||||
{new Intl.NumberFormat('pt-BR', { style: 'currency', currency: item.currency || 'BRL' }).format(item.price)}
|
||||
</p>
|
||||
)}
|
||||
{showQuantitySummary && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-3">
|
||||
{item.claimedQuantity} de {item.quantity} reservados
|
||||
</p>
|
||||
)}
|
||||
{item.description && (
|
||||
<p className="text-base text-gray-600 dark:text-gray-300 mb-4">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Existing claims list */}
|
||||
{item.claims.length > 0 && (
|
||||
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-1 mt-4 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
{item.claims.map((c) => {
|
||||
const isMine = c.guest.id === currentGuestId;
|
||||
const canCancel = isMine || isAdmin;
|
||||
return (
|
||||
<li key={c.id} className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<span className="font-medium">{isMine ? 'Você' : 'Reservado'}</span>
|
||||
{item.quantity > 1 && (
|
||||
<span className="text-gray-500"> · {c.quantity} un.</span>
|
||||
)}
|
||||
{c.note && isMine && (
|
||||
<span className="block text-xs italic text-gray-500">
|
||||
"{c.note}"
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{canCancel && (
|
||||
<button
|
||||
onClick={() => handleUnclaim(item.id, isMine ? undefined : c.guest.id)}
|
||||
disabled={isUnclaiming}
|
||||
className="text-xs text-red-600 hover:underline disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Action Area */}
|
||||
<div className="md:w-80 md:flex-shrink-0 p-6 bg-gray-50 dark:bg-gray-900/50 border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 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-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors cursor-pointer border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<span className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">
|
||||
{url.label}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
{!canClaim ? (
|
||||
<div className="bg-gray-100 dark:bg-gray-700 rounded p-3 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Reservas desativadas
|
||||
</div>
|
||||
) : sold ? (
|
||||
<div className="bg-gray-100 dark:bg-gray-700 rounded p-3 text-center text-sm text-gray-700 dark:text-gray-300">
|
||||
Esgotado
|
||||
</div>
|
||||
) : claimingItemId === item.id ? (
|
||||
<form onSubmit={(e) => handleSubmitClaim(e, item.id)} className="space-y-3">
|
||||
{claimError && (
|
||||
<div className="p-2 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded text-xs">
|
||||
{claimError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto">
|
||||
{sold ? (
|
||||
<div className="bg-gray-100 dark:bg-gray-700 rounded p-3 text-center text-sm text-gray-700 dark:text-gray-300">
|
||||
Esgotado
|
||||
{item.quantity > 1 && siteSettings.showQuantity && (
|
||||
<div>
|
||||
<label htmlFor={`claim-qty-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Quantidade (máx {maxForMe}):
|
||||
</label>
|
||||
<input
|
||||
id={`claim-qty-${item.id}`}
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxForMe}
|
||||
value={claimQty}
|
||||
onChange={(e) => setClaimQty(Math.max(1, Math.min(maxForMe, Number(e.target.value) || 1)))}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
) : claimingItemId === item.id ? (
|
||||
<form onSubmit={(e) => handleSubmitClaim(e, item.id)} className="space-y-3">
|
||||
{claimError && (
|
||||
<div className="p-2 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded text-xs">
|
||||
{claimError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.quantity > 1 && (
|
||||
<div>
|
||||
<label htmlFor={`claim-qty-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Quantidade (máx {maxForMe}):
|
||||
</label>
|
||||
<input
|
||||
id={`claim-qty-${item.id}`}
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxForMe}
|
||||
value={claimQty}
|
||||
onChange={(e) => setClaimQty(Math.max(1, Math.min(maxForMe, Number(e.target.value) || 1)))}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Deixe uma nota (opcional):
|
||||
</label>
|
||||
<textarea
|
||||
id={`claim-note-${item.id}`}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white resize-none"
|
||||
value={claimNote}
|
||||
onChange={(e) => setClaimNote(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isClaiming}
|
||||
className="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 font-medium disabled:opacity-50 transition-colors cursor-pointer"
|
||||
>
|
||||
{isClaiming ? 'Reservando...' : (myClaim ? 'Atualizar reserva' : 'Confirmar reserva')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setClaimingItemId(null)}
|
||||
className="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleStartClaim(item)}
|
||||
className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
|
||||
>
|
||||
{myClaim ? 'Atualizar reserva' : 'Reservar'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Deixe uma nota (opcional):
|
||||
</label>
|
||||
<textarea
|
||||
id={`claim-note-${item.id}`}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white resize-none"
|
||||
value={claimNote}
|
||||
onChange={(e) => setClaimNote(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isClaiming}
|
||||
className="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 font-medium disabled:opacity-50 transition-colors cursor-pointer"
|
||||
>
|
||||
{isClaiming ? 'Reservando...' : (myClaim ? 'Atualizar reserva' : 'Confirmar reserva')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setClaimingItemId(null)}
|
||||
className="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleStartClaim(item)}
|
||||
className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
|
||||
>
|
||||
{myClaim ? 'Atualizar reserva' : 'Reservar'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user