chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable sold-out variants in picker; default to first in-stock option

Browse Source 
Sold-out variant buttons now show "Sold Out" and can't be selected.
The picker also defaults to the first in-stock variation instead of
always starting on variations[0], which could be out of stock.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-18 11:08:17 -04:00
parent 904fa91bad
commit f1537402b5
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
estore/src/components/ColorPicker.tsx
View File

@ -50,7 +50,9 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
const [notes, setNotes] = useState(editingEntry?.notes ?? '') const [notes, setNotes] = useState(editingEntry?.notes ?? '')
const [activeImg, setActiveImg] = useState(0) const [activeImg, setActiveImg] = useState(0)
const [userVariationId, setUserVariationId] = useState<string | undefined>( const [userVariationId, setUserVariationId] = useState<string | undefined>(
() => editingEntry?.selectedVariationId ?? product.variations[0]?.id () => editingEntry?.selectedVariationId
?? product.variations.find((v) => v.inventory === null || v.inventory > 0)?.id
?? product.variations[0]?.id
) )
// Vinyl state // Vinyl state
@ -285,21 +287,29 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
<div className="field" style={{ marginBottom: '1.25rem' }}> <div className="field" style={{ marginBottom: '1.25rem' }}>
<label className="label is-small">Size / Option</label> <label className="label is-small">Size / Option</label>
<div className="buttons"> <div className="buttons">
{selectableVariations.map((v) => ( {selectableVariations.map((v) => {
<button const varSoldOut = v.inventory !== null && v.inventory <= 0
key={v.id} return (
type="button" <button
className={`button is-small${v.id === (userVariation?.id) ? ' is-info' : ''}`} key={v.id}
onClick={() => { setUserVariationId(v.id); setActiveImg(0) }} type="button"
> className={`button is-small${v.id === (userVariation?.id) ? ' is-info' : ''}`}
{v.name} disabled={varSoldOut}
{v.priceCents > 0 && ( style={varSoldOut ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
<span style={{ marginLeft: 6, opacity: 0.75, fontSize: '0.78em' }}> onClick={() => { if (!varSoldOut) { setUserVariationId(v.id); setActiveImg(0) } }}
{fmt(v.priceCents)} >
</span> {v.name}
)} {varSoldOut
</button> ? <span style={{ marginLeft: 6, fontSize: '0.78em' }}>Sold Out</span>
))} : v.priceCents > 0 && (
<span style={{ marginLeft: 6, opacity: 0.75, fontSize: '0.78em' }}>
{fmt(v.priceCents)}
</span>
)
}
</button>
)
})}
</div> </div>
</div> </div>
)} )}