71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Trash, PlusCircle } from "lucide-react";
|
|
|
|
interface PricingTiersProps {
|
|
pricing: any[];
|
|
handleTierChange: (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
index: number
|
|
) => void;
|
|
handleRemoveTier: (index: number) => void;
|
|
handleAddTier: () => void;
|
|
}
|
|
|
|
export const PricingTiers = ({
|
|
pricing,
|
|
handleTierChange,
|
|
handleRemoveTier,
|
|
handleAddTier,
|
|
}: PricingTiersProps) => (
|
|
<div>
|
|
<h3 className="text-sm font-medium">Tiered Pricing</h3>
|
|
|
|
{pricing?.length > 0 ? (
|
|
pricing.map((tier, index) => (
|
|
<div key={tier._id || index} className="flex items-center gap-2 mt-2">
|
|
<Input
|
|
name="minQuantity"
|
|
type="number"
|
|
placeholder="Min Quantity"
|
|
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 === 0 ? "" : tier.pricePerUnit} // ✅ Show empty string when 0
|
|
onChange={(e) => handleTierChange(e, index)}
|
|
className="h-8 text-sm px-2 flex-1"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-red-500 hover:bg-red-100"
|
|
onClick={() => handleRemoveTier(index)}
|
|
>
|
|
<Trash className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>
|
|
)}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-2"
|
|
onClick={handleAddTier}
|
|
>
|
|
<PlusCircle className="w-4 h-4 mr-1" />
|
|
Add Tier
|
|
</Button>
|
|
</div>
|
|
);
|