Improve cart and dark mode UX
- Clear cart when customer logs out - Hide cart bag button for non-authenticated users (only show for logged-in customers) - Fix dark mode text visibility in all form inputs (input/textarea/select elements) Addresses user request: cart should clear on logout and only be accessible to logged-in customers. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
c8dc3467f9
commit
0cc072fda4
@@ -20,7 +20,7 @@ export default function CartPage() {
|
|||||||
window.location.href = '/checkout';
|
window.location.href = '/checkout';
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!mounted) return null; // avoid a hydration mismatch on first paint
|
if (!mounted) return null;
|
||||||
|
|
||||||
if (items.length === 0) {
|
if (items.length === 0) {
|
||||||
return (
|
return (
|
||||||
@@ -163,9 +163,6 @@ export default function CartPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full max-w-xs">
|
<div className="w-full max-w-xs">
|
||||||
<div className="mb-4 rounded border border-splash-blue/40 bg-splash-blue/5 px-3 py-2 text-xs text-muted">
|
|
||||||
Your cart will be saved. You can log in or continue as a guest to complete your order.
|
|
||||||
</div>
|
|
||||||
<button
|
<button
|
||||||
onClick={handleCheckout}
|
onClick={handleCheckout}
|
||||||
className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
|
className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
|
||||||
|
|||||||
@@ -24,6 +24,11 @@
|
|||||||
body {
|
body {
|
||||||
@apply bg-paper text-ink font-body antialiased transition-colors duration-200;
|
@apply bg-paper text-ink font-body antialiased transition-colors duration-200;
|
||||||
}
|
}
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
@apply text-ink;
|
||||||
|
}
|
||||||
::selection {
|
::selection {
|
||||||
@apply bg-splash-pink text-paper;
|
@apply bg-splash-pink text-paper;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export default async function Header() {
|
|||||||
<AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
|
<AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
|
||||||
</div>
|
</div>
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
<CartButton />
|
{customer && <CartButton />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
import { useCart } from '@/lib/cartStore';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Logs out the user when they close/leave the page
|
* Logs out the user when they close/leave the page
|
||||||
* Works for both admin and customer sessions
|
* Works for both admin and customer sessions
|
||||||
*/
|
*/
|
||||||
export default function LogoutOnUnload() {
|
export default function LogoutOnUnload() {
|
||||||
|
const clearCart = useCart((s) => s.clear);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleUnload = () => {
|
const handleUnload = () => {
|
||||||
|
// Clear cart on logout
|
||||||
|
clearCart();
|
||||||
// Use sendBeacon to reliably send logout even when page is closing
|
// Use sendBeacon to reliably send logout even when page is closing
|
||||||
// This doesn't wait for a response, which is fine for logout
|
// This doesn't wait for a response, which is fine for logout
|
||||||
navigator.sendBeacon('/api/logout');
|
navigator.sendBeacon('/api/logout');
|
||||||
@@ -21,7 +26,7 @@ export default function LogoutOnUnload() {
|
|||||||
window.removeEventListener('beforeunload', handleUnload);
|
window.removeEventListener('beforeunload', handleUnload);
|
||||||
window.removeEventListener('unload', handleUnload);
|
window.removeEventListener('unload', handleUnload);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [clearCart]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user