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

feat(wizard): optimize step 3 layout and add category navigation
Some checks failed
Staging Build / build (push) Failing after 28s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-10 22:50:24 +02:00
parent be3b0f615d
commit ed654f542c
3 changed files with 229 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
shop/components/wizard/step-billing.tsx
View File

@@ -49,22 +49,47 @@ export function StepBilling({
: 'border-white/5 bg-white/5 hover:border-white/20'
}`}
>
<div>
<div className="flex items-center gap-3 mb-3">
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
<CreditCard className="w-6 h-6" />
<div className="flex flex-col justify-between h-full">
<div>
<div className="flex items-center gap-3 mb-3">
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
<CreditCard className="w-6 h-6" />
</div>
<h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3>
</div>
<h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3>
<p className="text-slate-400 text-sm">
Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren.
</p>
</div>
<p className="text-slate-400 text-sm">
Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren.
</p>
{selectedBillingInterval === 'one_time' && (
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
<Check className="w-4 h-4" />
</div>
)}
{selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && (
<div
onClick={(e) => e.stopPropagation()}
className="mt-4 pt-4 border-t border-white/5 space-y-2 cursor-default"
>
<Label htmlFor="last-license-date" className="text-white text-xs font-medium flex items-center gap-2">
<Calendar className="w-3.5 h-3.5 text-primary" />
Datum der letzten CASPOS-Lizenz
</Label>
<Input
id="last-license-date"
type="date"
value={lastLicenseDate}
onChange={e => setLastLicenseDate(e.target.value)}
className="bg-[#0b1329] border-white/10 text-white text-xs h-8 focus:border-primary"
/>
<p className="text-[10px] text-slate-500">
Ermöglicht automatische Ermittlung von Update-Gebühren.
</p>
</div>
)}
</div>
{selectedBillingInterval === 'one_time' && (
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
<Check className="w-4 h-4" />
</div>
)}
</div>
{/* Option 2: Abo */}
@@ -92,26 +117,6 @@ export function StepBilling({
</div>
)}
</div>
</div>
{/* Alte Lizenznummereingabe / Datum vorerst ausgeblendet */}
{/* {selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && (
<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3 mt-6 max-w-md animate-in fade-in slide-in-from-top-2 duration-300">
<Label htmlFor="last-license-date" className="text-white font-medium flex items-center gap-2">
<Calendar className="w-4 h-4 text-primary" />
Datum der letzten CASPOS-Lizenz (falls vorhanden)
</Label>
<Input
id="last-license-date"
type="date"
value={lastLicenseDate}
onChange={e => setLastLicenseDate(e.target.value)}
className="bg-[#0b1329] border-white/10 text-white focus:border-primary"
/>
<p className="text-xs text-slate-400">
Falls dieser Kunde bereits Lizenzen besitzt, tragen Sie das Datum der letzten Lizenzierung ein. Damit werden die korrekten Update-Gebühren ermittelt.
</p>
</div>
)} */}
</CardContent>
<CardFooter className="flex justify-between border-t border-white/10 pt-6">
<Button variant="ghost" className="text-white" onClick={prevStep}>