g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sort pricing tiers by minQuantity in UI

Browse Source 
Pricing tiers are now displayed sorted by minQuantity, improving clarity for users. Event handlers are updated to use the original index to ensure correct tier manipulation after sorting.
This commit is contained in:
NotII
2025-07-27 00:24:57 +02:00
parent f1e7583219
commit 2452a3c5f6
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/forms/pricing-tiers.tsx
View File

@@ -63,9 +63,16 @@ export const PricingTiers = ({
<div className="w-8" /> <div className="w-8" />
</div> </div>
{pricing.map((tier, index) => ( {[...pricing]
.sort((a, b) => a.minQuantity - b.minQuantity)
.map((tier, sortedIndex) => {
// Find the original index for proper event handling
const originalIndex = pricing.findIndex(p =>
p === tier || (p.minQuantity === tier.minQuantity && p.pricePerUnit === tier.pricePerUnit)
);
return (
<div <div
key={tier._id || index} key={tier._id || originalIndex}
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2" className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2"
> >
<Input <Input
@@ -73,7 +80,7 @@ export const PricingTiers = ({
type="number" type="number"
placeholder="Min Quantity" placeholder="Min Quantity"
value={tier.minQuantity === 0 ? "" : tier.minQuantity} value={tier.minQuantity === 0 ? "" : tier.minQuantity}
onChange={(e) => handleTierChange(e, index)} onChange={(e) => handleTierChange(e, originalIndex)}
className="h-8 text-sm px-2" className="h-8 text-sm px-2"
/> />
@@ -82,7 +89,7 @@ export const PricingTiers = ({
type="number" type="number"
placeholder="Price per unit" placeholder="Price per unit"
value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)} value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)}
onChange={(e) => handleTierChange(e, index)} onChange={(e) => handleTierChange(e, originalIndex)}
className="h-8 text-sm px-2" className="h-8 text-sm px-2"
/> />
@@ -94,7 +101,7 @@ export const PricingTiers = ({
? calculateTotal(tier.minQuantity, tier.pricePerUnit) ? calculateTotal(tier.minQuantity, tier.pricePerUnit)
: "" : ""
} }
onChange={(e) => handleTotalChange(e, index, tier.minQuantity)} onChange={(e) => handleTotalChange(e, originalIndex, tier.minQuantity)}
className="h-8 text-sm px-2" className="h-8 text-sm px-2"
/> />
@@ -102,12 +109,13 @@ export const PricingTiers = ({
variant="ghost" variant="ghost"
size="icon" size="icon"
className="text-red-500 hover:bg-red-100" className="text-red-500 hover:bg-red-100"
onClick={() => handleRemoveTier(index)} onClick={() => handleRemoveTier(originalIndex)}
> >
<Trash className="h-5 w-5" /> <Trash className="h-5 w-5" />
</Button> </Button>
</div> </div>
))} );
})}
</> </>
) : ( ) : (
<p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p> <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>