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

chore: clean up order-wizard layout text and spacing
All checks were successful
Staging Build / build (push) Successful in 2m32s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-09 23:08:10 +02:00
parent c7a4b2a9c9
commit fb9b522e74
1 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -561,7 +561,7 @@ export function OrderWizard({
setBasketItems(prev => [...prev, currentItem]) setBasketItems(prev => [...prev, currentItem])
setModuleQuantities({}) setModuleQuantities({})
setDeviceName('') setDeviceName('')
// Reset selections // Reset selections
const resetSels: Record<string, CategorySelection> = {} const resetSels: Record<string, CategorySelection> = {}
categories.forEach(cat => { categories.forEach(cat => {
@@ -663,7 +663,7 @@ export function OrderWizard({
Für wen bestellen Sie? Für wen bestellen Sie?
</CardTitle> </CardTitle>
<CardDescription className="text-slate-300"> <CardDescription className="text-slate-300">
Wählen Sie einen Endkunden aus Ihrem CRM oder legen Sie einen neuen an. Wählen Sie einen Endkunden aus oder legen Sie einen neuen an.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
@@ -1023,20 +1023,19 @@ export function OrderWizard({
<div key={product.id} className="relative"> <div key={product.id} className="relative">
<Label <Label
onClick={() => !disabled && selectProduct(cat.id, product.id)} onClick={() => !disabled && selectProduct(cat.id, product.id)}
className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${ className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${disabled
disabled
? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed' ? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
: isChecked : isChecked
? 'border-primary bg-primary/5 cursor-pointer' ? 'border-primary bg-primary/5 cursor-pointer'
: 'border-white/5 bg-white/5 hover:bg-white/10 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} 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"
/> />
<span className="font-bold text-base text-white">{product.name}</span> <span className="font-bold text-base text-white">{product.name}</span>
@@ -1083,37 +1082,36 @@ export function OrderWizard({
/> />
<Label <Label
htmlFor={disabled ? undefined : `${cat.id}-${product.id}`} 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 ${ className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
disabled
? 'opacity-50 cursor-not-allowed' ? 'opacity-50 cursor-not-allowed'
: 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer' : '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>
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}> <span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'} {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
</span>
</div>
<span className="text-primary font-semibold text-sm">
{new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
}).format(product.base_price)}{' '}
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
</span> </span>
</div> </div>
<span className="text-primary font-semibold text-sm"> {product.description && (
{new Intl.NumberFormat('de-DE', { <span className="text-sm text-slate-300 mt-1">{product.description}</span>
style: 'currency', )}
currency: 'EUR', {product.modules && product.modules.length > 0 && (
}).format(product.base_price)}{' '} <span className="text-xs text-slate-500 mt-1">
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span> {product.modules.length} optionale Module verfügbar
</span> </span>
</div> )}
{product.description && ( </Label>
<span className="text-sm text-slate-300 mt-1">{product.description}</span> </div>
)}
{product.modules && product.modules.length > 0 && (
<span className="text-xs text-slate-500 mt-1">
{product.modules.length} optionale Module verfügbar
</span>
)}
</Label>
</div>
) )
})} })}
</RadioGroup> </RadioGroup>