Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: disable incompatible sub-products in wizard and prevent bottom-up reset

Browse Source
This commit is contained in:
DanielS
2026-07-09 22:22:04 +02:00
parent 13981970f5
commit d1cc6b5d5f
1 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
shop/components/order-wizard.tsx
View File

@@ -203,6 +203,19 @@ export function OrderWizard({
) )
}, [categories, selectedBillingInterval]) }, [categories, selectedBillingInterval])
const isProductDisabled = (product: Product, currentCategoryId: string) => {
const baseCategoryId = visibleCategories[0]?.id
if (!baseCategoryId || currentCategoryId === baseCategoryId) return false
const baseProductId = selections[baseCategoryId]?.productId
if (!baseProductId) return false
const baseProduct = products.find(p => p.id === baseProductId)
if (!baseProduct) return false
return baseProduct.exclusions?.includes(product.id) || product.exclusions?.includes(baseProductId)
}
// Per-category selection map: categoryId -> { productId, productIds, moduleIds } // Per-category selection map: categoryId -> { productId, productIds, moduleIds }
const [selections, setSelections] = useState<Record<string, CategorySelection>>(() => { const [selections, setSelections] = useState<Record<string, CategorySelection>>(() => {
const initInterval = initialOrder?.order_data?.billing_cycle ?? 'monthly' const initInterval = initialOrder?.order_data?.billing_cycle ?? 'monthly'
@@ -970,20 +983,24 @@ export function OrderWizard({
<div className="grid gap-3"> <div className="grid gap-3">
{catProducts.map(product => { {catProducts.map(product => {
const isChecked = sel?.productIds?.includes(product.id) ?? false const isChecked = sel?.productIds?.includes(product.id) ?? false
const disabled = isProductDisabled(product, cat.id)
return ( return (
<div key={product.id} className="relative"> <div key={product.id} className="relative">
<Label <Label
onClick={() => selectProduct(cat.id, product.id)} onClick={() => !disabled && selectProduct(cat.id, product.id)}
className={`flex flex-col items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${ className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${
isChecked disabled
? 'border-primary bg-primary/5' ? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
: 'border-white/5 bg-white/5 hover:bg-white/10' : isChecked
? 'border-primary bg-primary/5 cursor-pointer'
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
}`} }`}
> >
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Checkbox <Checkbox
checked={isChecked} checked={isChecked}
disabled={disabled}
onCheckedChange={() => {}} // onClick on label handles it onCheckedChange={() => {}} // onClick on label handles it
className="border-white/20 data-[state=checked]:bg-primary" className="border-white/20 data-[state=checked]:bg-primary"
/> />
@@ -1019,17 +1036,24 @@ export function OrderWizard({
onValueChange={id => selectProduct(cat.id, id)} onValueChange={id => selectProduct(cat.id, id)}
className="grid gap-3" className="grid gap-3"
> >
{catProducts.map(product => ( {catProducts.map(product => {
<div key={product.id} className="relative"> const disabled = isProductDisabled(product, cat.id)
<RadioGroupItem return (
value={product.id} <div key={product.id} className="relative">
id={`${cat.id}-${product.id}`} <RadioGroupItem
className="peer sr-only" value={product.id}
/> id={`${cat.id}-${product.id}`}
<Label disabled={disabled}
htmlFor={`${cat.id}-${product.id}`} className="peer sr-only"
className="flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer transition-all" />
> <Label
htmlFor={disabled ? undefined : `${cat.id}-${product.id}`}
className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${
disabled
? 'opacity-50 cursor-not-allowed'
: 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
}`}
>
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-bold text-base text-white">{product.name}</span> <span className="font-bold text-base text-white">{product.name}</span>