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

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

@@ -663,7 +663,7 @@ export function OrderWizard({
Für wen bestellen Sie?
</CardTitle>
<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>
</CardHeader>
<CardContent className="space-y-6">
@@ -1023,20 +1023,19 @@ export function OrderWizard({
<div key={product.id} className="relative">
<Label
onClick={() => !disabled && selectProduct(cat.id, product.id)}
className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${
disabled
className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${disabled
? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
: 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 items-center gap-3">
<Checkbox
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"
/>
<span className="font-bold text-base text-white">{product.name}</span>
@@ -1083,37 +1082,36 @@ export function OrderWizard({
/>
<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
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 items-center gap-2">
<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)}`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
<div className="flex justify-between w-full items-center">
<div className="flex items-center gap-2">
<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)}`}>
{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>
</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>
</div>
{product.description && (
<span className="text-sm text-slate-300 mt-1">{product.description}</span>
)}
{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>
{product.description && (
<span className="text-sm text-slate-300 mt-1">{product.description}</span>
)}
{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>