Made size selection required if size options exist

shopstr-eng · Sep 11, 2024 · ece4dbd · ece4dbd
1 parent 239dbde
commit ece4dbd
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/components/utility-components/checkout-card.tsx b/components/utility-components/checkout-card.tsx
@@ -47,6 +47,7 @@ export default function CheckoutCard({
   const [selectedSize, setSelectedSize] = useState<string | undefined>(
     undefined,
   );
+  const [hasSizes, setHasSizes] = useState(false);
 
   const toggleExpand = () => {
     setIsExpanded(!isExpanded);
@@ -83,6 +84,16 @@ export default function CheckoutCard({
     }
   }, [selectedImage]);
 
+  useEffect(() => {
+    setHasSizes(
+      !!(
+        sizes &&
+        sizes.length > 0 &&
+        sizes.some((size) => (sizeQuantities?.get(size) || 0) > 0)
+      ),
+    );
+  }, [sizes, sizeQuantities]);
+
   const toggleBuyNow = () => {
     setIsBeingPaid(!isBeingPaid);
   };
@@ -230,8 +241,13 @@ export default function CheckoutCard({
               </div>
               <div className="flex w-full gap-2">
                 <Button
-                  className={SHOPSTRBUTTONCLASSNAMES}
+                  className={`${SHOPSTRBUTTONCLASSNAMES} ${
+                    hasSizes && !selectedSize
+                      ? "cursor-not-allowed opacity-50"
+                      : ""
+                  }`}
                   onClick={toggleBuyNow}
+                  disabled={hasSizes && !selectedSize}
                 >
                   Buy Now
                 </Button>