weewoo

components/forms/pricing-tiers.tsx

@@ -6,7 +6,10 @@ import { Trash, PlusCircle } from "lucide-react";
 
 interface PricingTiersProps {
   pricing: any[];
-  handleTierChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+  handleTierChange: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => void;
   handleRemoveTier: (index: number) => void;
   handleAddTier: () => void;
 }
@@ -26,17 +29,17 @@ export const PricingTiers = ({
           <Input
             name="minQuantity"
             type="number"
-            min="1"
             placeholder="Min Quantity"
-            value={tier.minQuantity}
+            value={tier.minQuantity === 0 ? "" : tier.minQuantity} // ✅ Show empty string when 0
             onChange={(e) => handleTierChange(e, index)}
             className="h-8 text-sm px-2 flex-1"
           />
+
           <Input
             name="pricePerUnit"
             type="number"
             placeholder="Price per unit"
-            value={tier.pricePerUnit}
+            value={tier.pricePerUnit === 0 ? "" : tier.pricePerUnit} // ✅ Show empty string when 0
             onChange={(e) => handleTierChange(e, index)}
             className="h-8 text-sm px-2 flex-1"
           />

components/modals/product-modal.tsx

@@ -35,8 +35,6 @@ export const ProductModal: React.FC<ProductModalProps> = ({
   categories,
   editing,
   handleChange,
-  handleTieredPricingChange,
-  handleAddTier,
   handleRemoveTier,
   setProductData,
 }) => {
@@ -59,9 +57,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
     setLocalCategories(categories);
   }, [categories]);
 
-  /**
+
-   * 2) When user selects a file, store it and create an objectURL for preview
-   */
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) {
@@ -72,12 +68,10 @@ export const ProductModal: React.FC<ProductModalProps> = ({
     }
 
     // For preview
-    console.log(file)
     const objectUrl = URL.createObjectURL(file);
     setSelectedFile(file);
     setImagePreview(objectUrl);
 
-    // Optionally, load the image to calculate dimensions
     const image = new Image();
     image.onload = () => {
       const aspectRatio = image.naturalWidth / image.naturalHeight;
@@ -88,9 +82,13 @@ export const ProductModal: React.FC<ProductModalProps> = ({
     image.src = objectUrl;
   };
 
-  /**
+  const handleAddTier = () => {
-   * 3) On 'Save', call the parent onSave(productData, selectedFile)
+    setProductData((prev) => ({
-   */
+      ...prev,
+      pricing: [...prev.pricing, { minQuantity: 0, pricePerUnit: 0 }], 
+    }));
+  };
+  
   const handleSave = async () => {
     if (!productData.category) {
       toast.error("Please select or add a category");
@@ -107,6 +105,19 @@ export const ProductModal: React.FC<ProductModalProps> = ({
     setLocalCategories((prev) => [...prev, newCategory]);
   };
 
+  const handleTierChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const { name, value } = e.target;
+
+    setProductData((prev) => ({
+      ...prev,
+      pricing: prev.pricing.map((tier, i) =>
+        i === index
+          ? { ...tier, [name]: value === "" ? 0 : Number(value) } 
+          : tier
+      ),
+    }));
+  };
+
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="max-w-6xl">
@@ -133,7 +144,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
             />
             <PricingTiers
               pricing={productData.pricing}
-              handleTierChange={handleTieredPricingChange}
+              handleTierChange={handleTierChange}
               handleRemoveTier={handleRemoveTier}
               handleAddTier={handleAddTier}
             />