125 lines
3.7 KiB
TypeScript
125 lines
3.7 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) => {
|
|
const formatNumber = (num: number) => {
|
|
// For price per unit, show up to 6 decimal places if needed
|
|
return Number(num.toFixed(6)).toString();
|
|
};
|
|
|
|
const formatTotal = (num: number) => {
|
|
// For total price, always show 2 decimal places
|
|
return num.toFixed(2);
|
|
};
|
|
|
|
const calculateTotal = (quantity: number, pricePerUnit: number) => {
|
|
return formatTotal(quantity * pricePerUnit);
|
|
};
|
|
|
|
const handleTotalChange = (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
index: number,
|
|
minQuantity: number
|
|
) => {
|
|
const totalPrice = Number(e.target.value);
|
|
const pricePerUnit = minQuantity > 0 ? totalPrice / minQuantity : 0;
|
|
|
|
const syntheticEvent = {
|
|
target: {
|
|
name: 'pricePerUnit',
|
|
value: formatNumber(pricePerUnit)
|
|
}
|
|
} as React.ChangeEvent<HTMLInputElement>;
|
|
|
|
handleTierChange(syntheticEvent, index);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="text-sm font-medium">Tiered Pricing</h3>
|
|
|
|
{pricing?.length > 0 ? (
|
|
<>
|
|
<div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2 mb-1">
|
|
<div className="text-xs text-muted-foreground">Quantity</div>
|
|
<div className="text-xs text-muted-foreground">Price Per Unit</div>
|
|
<div className="text-xs text-muted-foreground">Total Price</div>
|
|
<div className="w-8" />
|
|
</div>
|
|
|
|
{pricing.map((tier, index) => (
|
|
<div
|
|
key={tier._id || index}
|
|
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2"
|
|
>
|
|
<Input
|
|
name="minQuantity"
|
|
type="number"
|
|
placeholder="Min Quantity"
|
|
value={tier.minQuantity === 0 ? "" : tier.minQuantity}
|
|
onChange={(e) => handleTierChange(e, index)}
|
|
className="h-8 text-sm px-2"
|
|
/>
|
|
|
|
<Input
|
|
name="pricePerUnit"
|
|
type="number"
|
|
placeholder="Price per unit"
|
|
value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)}
|
|
onChange={(e) => handleTierChange(e, index)}
|
|
className="h-8 text-sm px-2"
|
|
/>
|
|
|
|
<Input
|
|
type="number"
|
|
placeholder="Total price"
|
|
value={
|
|
tier.minQuantity && tier.pricePerUnit
|
|
? calculateTotal(tier.minQuantity, tier.pricePerUnit)
|
|
: ""
|
|
}
|
|
onChange={(e) => handleTotalChange(e, index, tier.minQuantity)}
|
|
className="h-8 text-sm px-2"
|
|
/>
|
|
|
|
<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>
|
|
);
|
|
};
|