From f6c464372fb78f3ec8cf138977abdd14aa99270c Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 10:01:54 +0100
Subject: [PATCH] Disable add to bag button if no personalization added and
 show prompt message

---
 src/components/DesignCanvas.tsx | 52 ++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index d4a4ef8..ad4127c 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -845,32 +845,42 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
         </div>
         )}
 
-        <div className="flex items-center gap-4">
-          <div className="flex items-center border border-ink">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center border border-ink">
+              <button
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                className="px-3 py-2 text-sm"
+                aria-label="Decrease quantity"
+              >
+                −
+              </button>
+              <span className="w-10 text-center font-mono text-sm">{quantity}</span>
+              <button
+                onClick={() => setQuantity((q) => q + 1)}
+                className="px-3 py-2 text-sm"
+                aria-label="Increase quantity"
+              >
+                +
+              </button>
+            </div>
             <button
-              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-              className="px-3 py-2 text-sm"
-              aria-label="Decrease quantity"
+              onClick={handleAddToBag}
+              disabled={elementsFront.length === 0 && elementsBack.length === 0}
+              className={`flex-1 px-6 py-3 text-sm font-medium transition-colors ${
+                elementsFront.length === 0 && elementsBack.length === 0
+                  ? 'bg-muted text-muted/50 cursor-not-allowed'
+                  : 'bg-clay text-paper hover:bg-clay-dark'
+              }`}
             >
-              −
-            </button>
-            <span className="w-10 text-center font-mono text-sm">{quantity}</span>
-            <button
-              onClick={() => setQuantity((q) => q + 1)}
-              className="px-3 py-2 text-sm"
-              aria-label="Increase quantity"
-            >
-              +
+              Add to bag — <Price cents={((elementsFront.length > 0 || elementsBack.length > 0) ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
             </button>
           </div>
-          <button
-            onClick={handleAddToBag}
-            className="flex-1 bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
-          >
-            Add to bag — <Price cents={((elementsFront.length > 0 || elementsBack.length > 0) ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
-          </button>
+          {elementsFront.length === 0 && elementsBack.length === 0 && (
+            <p className="text-xs text-splash-pink">Add text or images to personalize your design before adding to bag</p>
+          )}
+          {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
         </div>
-        {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
       </div>
 
       <LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />