diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 2397c91..0de5786 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -166,7 +166,8 @@ "Bash(git commit -m 'Fix: Show approved designs in customer account so they can order *)", "Bash(git commit -m 'Fix: Link approved designs to review page, not personalization *)", "Bash(git commit -m 'Feat: Show estimated delivery date on design review page *)", - "Bash(git commit -m 'Fix: Approve & Add to Bag button not working *)" + "Bash(git commit -m 'Fix: Approve & Add to Bag button not working *)", + "Bash(git commit -m 'Feat: Add checkout options modal after adding design to bag *)" ] } } diff --git a/src/app/designs/[id]/review/page.tsx b/src/app/designs/[id]/review/page.tsx index 90ca3d6..5ce6314 100644 --- a/src/app/designs/[id]/review/page.tsx +++ b/src/app/designs/[id]/review/page.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; import { useCart } from '@/lib/cartStore'; interface DesignApproval { @@ -26,11 +27,13 @@ interface DesignApproval { } export default function DesignReviewPage({ params }: { params: { id: string } }) { + const router = useRouter(); const [design, setDesign] = useState(null); const [loading, setLoading] = useState(true); const [approving, setApproving] = useState(false); const [changingMessage, setChangingMessage] = useState(''); const [sendingChanges, setSendingChanges] = useState(false); + const [showCheckoutOptions, setShowCheckoutOptions] = useState(false); const addItem = useCart((s) => s.addItem); useEffect(() => { @@ -73,7 +76,7 @@ export default function DesignReviewPage({ params }: { params: { id: string } }) designHeightCm: null, }); - alert('Design approved! Added to your bag.'); + setShowCheckoutOptions(true); } else { alert('Failed to approve design. Please try again.'); } @@ -212,6 +215,32 @@ export default function DesignReviewPage({ params }: { params: { id: string } }) + + {/* Checkout Options Modal */} + {showCheckoutOptions && ( +
+
+

✓ Design approved!

+

+ Your design has been added to your bag. What would you like to do next? +

+
+ + +
+
+
+ )} ); }