refactor: update UI components and page layouts
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -70,14 +70,14 @@ export default function PublicWishlistPage() {
|
||||
setClaimNote('');
|
||||
fetchWishlist();
|
||||
} catch (err: any) {
|
||||
setClaimError(err.message || 'Failed to claim item');
|
||||
setClaimError(err.message || 'Erro ao reservar item');
|
||||
} finally {
|
||||
setIsClaiming(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnclaim = async (itemId: string) => {
|
||||
if (!confirm('Are you sure you want to unclaim this item?')) {
|
||||
if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@ export default function PublicWishlistPage() {
|
||||
await claimingApi.unclaim(itemId);
|
||||
fetchWishlist();
|
||||
} catch (err: any) {
|
||||
setUnclaimError(err.message || 'Failed to unclaim item');
|
||||
setUnclaimError(err.message || 'Erro ao cancelar reserva');
|
||||
} finally {
|
||||
setIsUnclaiming(false);
|
||||
}
|
||||
@@ -100,16 +100,16 @@ export default function PublicWishlistPage() {
|
||||
|
||||
const formatPrice = (price: number | null, currency: string) => {
|
||||
if (!price) return null;
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: currency || 'USD',
|
||||
currency: currency || 'BRL',
|
||||
}).format(price);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||
<p className="text-gray-600 dark:text-gray-400">Loading...</p>
|
||||
<p className="text-gray-600 dark:text-gray-400">Carregando...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -118,8 +118,8 @@ export default function PublicWishlistPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Wishlist Not Found</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">{error || 'This wishlist does not exist or is not public.'}</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Lista não encontrada</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">{error || 'Esta lista não existe ou não é pública.'}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -155,14 +155,14 @@ export default function PublicWishlistPage() {
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Back to Home
|
||||
Voltar ao início
|
||||
</a>
|
||||
|
||||
{/* Preferences Section */}
|
||||
{wishlist.preferences && (
|
||||
<div className="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
General Interests & Preferences
|
||||
Interesses e Preferências
|
||||
</h2>
|
||||
<div
|
||||
className="prose prose-indigo dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 [&_a]:text-indigo-600 [&_a]:dark:text-indigo-400 [&_a]:hover:underline"
|
||||
@@ -189,11 +189,11 @@ export default function PublicWishlistPage() {
|
||||
onChange={(e) => setShowClaimed(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Show claimed items</span>
|
||||
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens reservados</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{filteredItems.length} of {items.length} items
|
||||
{filteredItems.length} de {items.length} itens
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,7 +201,7 @@ export default function PublicWishlistPage() {
|
||||
{filteredItems.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{showClaimed ? 'No items in this wishlist yet' : 'All items have been claimed!'}
|
||||
{showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
@@ -272,30 +272,30 @@ export default function PublicWishlistPage() {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
Item Claimed!
|
||||
Item reservado!
|
||||
</p>
|
||||
<p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
The status is now locked.
|
||||
O status está confirmado.
|
||||
</p>
|
||||
{justClaimedNote && (
|
||||
<p className="text-center text-xs text-gray-600 dark:text-gray-400 italic">
|
||||
Your Note: "{justClaimedNote}"
|
||||
Sua nota: "{justClaimedNote}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : item.claimedAt ? (
|
||||
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3">
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-200">
|
||||
Claimed by {item.claimedByName}
|
||||
Reservado por {item.claimedByName}
|
||||
</p>
|
||||
{item.claimedByNote && (
|
||||
<p className="text-xs text-green-700 dark:text-green-300 mt-1">
|
||||
Note: {item.claimedByNote}
|
||||
Nota: {item.claimedByNote}
|
||||
</p>
|
||||
)}
|
||||
{item.isPurchased && (
|
||||
<p className="text-xs text-green-700 dark:text-green-300 mt-1 font-medium">
|
||||
✓ Purchased
|
||||
✓ Comprado
|
||||
</p>
|
||||
)}
|
||||
{showClaimed && (
|
||||
@@ -304,7 +304,7 @@ export default function PublicWishlistPage() {
|
||||
disabled={isUnclaiming}
|
||||
className="mt-3 w-full px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
|
||||
>
|
||||
{isUnclaiming ? 'Unclaiming...' : 'Unclaim Item'}
|
||||
{isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -319,12 +319,12 @@ export default function PublicWishlistPage() {
|
||||
|
||||
<div>
|
||||
<label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Add a Note (Optional):
|
||||
Deixe uma nota (opcional):
|
||||
</label>
|
||||
<textarea
|
||||
id={`claim-note-${item.id}`}
|
||||
rows={3}
|
||||
placeholder="Let them know your plans! e.g., 'Buying this next week' or 'Found a great deal online' or 'Need to check the size first'"
|
||||
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-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)}
|
||||
@@ -336,7 +336,7 @@ export default function PublicWishlistPage() {
|
||||
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 ? 'Claiming...' : 'Confirm Claim'}
|
||||
{isClaiming ? 'Reservando...' : 'Confirmar reserva'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -345,7 +345,7 @@ export default function PublicWishlistPage() {
|
||||
onClick={() => handleClaimItem(item.id)}
|
||||
className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
|
||||
>
|
||||
Claim This Item
|
||||
Vou dar este presente
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user