Feat: Add checkout options modal after adding design to bag

- Show modal after design is approved and added to bag
- Offer two options: 'Go to Checkout' and 'Keep Shopping'
- 'Go to Checkout' navigates to /checkout
- 'Keep Shopping' closes the modal and lets customer continue

Improved UX - no more confusing confirmation dialogs, just
a clean modal with clear next steps.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

.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 *)"
     ]
   }
 }

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<DesignApproval | null>(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 } })
           </div>
         </div>
       </div>
+
+      {/* Checkout Options Modal */}
+      {showCheckoutOptions && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+          <div className="bg-paper border border-line rounded-lg p-8 max-w-md mx-4 shadow-lg">
+            <h2 className="font-display text-2xl mb-2">✓ Design approved!</h2>
+            <p className="text-sm text-muted mb-6">
+              Your design has been added to your bag. What would you like to do next?
+            </p>
+            <div className="space-y-3">
+              <button
+                onClick={() => router.push('/checkout')}
+                className="w-full bg-clay px-4 py-3 text-sm font-medium text-paper hover:bg-clay-dark rounded"
+              >
+                Go to Checkout
+              </button>
+              <button
+                onClick={() => setShowCheckoutOptions(false)}
+                className="w-full border border-ink px-4 py-3 text-sm font-medium text-ink hover:border-clay hover:bg-clay hover:text-paper rounded"
+              >
+                Keep Shopping
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }