Add login prompt when non-authenticated users add items to cart

- Create LoginPromptModal component for authentication encouragement
- Check customer authentication before adding items to cart
- Show modal for non-logged-in users with options to create account, log in, or continue as guest
- Allow guests to add items (stored in IndexedDB) while prompting to sign up
- Implemented in both StandardProductView (ready-made products) and DesignCanvas (personalized items)
- Add server action checkCustomerAuth() for authentication checks

Addresses user request: prompt guests to create account or log in when adding items to cart.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-17 22:53:36 +01:00
co-authored by Claude Haiku 4.5
parent 0cc072fda4
commit b7379e379b
4 changed files with 75 additions and 2 deletions
+11 -1
View File
@@ -4,8 +4,10 @@ import { useState } from 'react';
import { v4 as uuid } from 'uuid';
import ProductMockup from './ProductMockup';
import Price from './Price';
import LoginPromptModal from './LoginPromptModal';
import { useCart } from '@/lib/cartStore';
import { getColorName } from '@/lib/colorNames';
import { checkCustomerAuth } from '@/app/actions';
import type { ProductDTO } from '@/lib/types';
export default function StandardProductView({ product }: { product: ProductDTO }) {
@@ -14,6 +16,7 @@ export default function StandardProductView({ product }: { product: ProductDTO }
const [view, setView] = useState<'front' | 'back'>('front');
const [quantity, setQuantity] = useState(1);
const [justAdded, setJustAdded] = useState(false);
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
const addItem = useCart((s) => s.addItem);
const hasBack = Boolean(product.imageUrlBack);
@@ -44,7 +47,12 @@ export default function StandardProductView({ product }: { product: ProductDTO }
return <img src={activePhoto} alt={product.name} className="h-full w-full object-cover" />;
}
const handleAddToBag = () => {
const handleAddToBag = async () => {
const { isAuthenticated } = await checkCustomerAuth();
if (!isAuthenticated) {
setShowLoginPrompt(true);
}
addItem({
cartItemId: uuid(),
productId: product.id,
@@ -182,6 +190,8 @@ export default function StandardProductView({ product }: { product: ProductDTO }
</div>
{justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
</div>
<LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />
</div>
);
}