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

feat(wizard): add showValidationWarning prop to summary sidebar

Browse Source
This commit is contained in:
DanielS
2026-08-27 00:32:09 +02:00
parent 5ea0719225
commit f68d67de43
3 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -175,6 +175,7 @@ export function OrderWizard({
const [orderNotes, setOrderNotes] = useState<string>('')
const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
const [showValidationWarning, setShowValidationWarning] = useState(false)
useEffect(() => {
if (toast) {
@@ -545,14 +546,21 @@ export function OrderWizard({
}
const nextStep = () => {
if (step === 3 && allCategoriesFilled && productValidationErrors.length === 0) {
const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
if (editingIdx !== null) {
addToBasket()
} else if (basketItems.length === 0 && hasActiveSelection) {
addToBasket()
} else if (isDirtyNewDevice && hasActiveSelection) {
addToBasket()
if (step === 3) {
if (isNextStepDisabled && basketItems.length === 0) {
setShowValidationWarning(true)
return
}
setShowValidationWarning(false)
if (allCategoriesFilled && productValidationErrors.length === 0) {
const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
if (editingIdx !== null) {
addToBasket()
} else if (basketItems.length === 0 && hasActiveSelection) {
addToBasket()
} else if (isDirtyNewDevice && hasActiveSelection) {
addToBasket()
}
}
}
setDirection(1)
@@ -945,7 +953,7 @@ export function OrderWizard({
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
isMissingRequired
? 'animate-eye-catcher bg-red-500/10 border-red-500 text-red-400 font-bold shadow-[0_0_20px_rgba(239,68,68,0.4)]'
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
@@ -1124,6 +1132,7 @@ export function OrderWizard({
addToBasket={addToBasket}
isNextStepDisabled={isNextStepDisabled}
hasActiveSelection={hasActiveSelection}
showValidationWarning={showValidationWarning}
nextStep={nextStep}
prevStep={prevStep}
/>

2
shop/components/wizard/step-software.tsx
View File

@@ -93,7 +93,7 @@ export function StepSoftware({
return (
<div className={`flex items-center gap-3 p-4 rounded-xl border transition-all ${
isMissingRequired
? 'animate-eye-catcher bg-red-500/10 border-red-500 text-red-400 font-bold'
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: 'bg-white/5 border-white/10'
}`}>
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${

13
shop/components/wizard/summary-sidebar.tsx
View File

@@ -45,6 +45,7 @@ interface SummarySidebarProps {
addToBasket: () => void
isNextStepDisabled: boolean
hasActiveSelection: boolean
showValidationWarning?: boolean
nextStep: () => void
prevStep: () => void
}
@@ -77,6 +78,7 @@ export function SummarySidebar({
addToBasket,
isNextStepDisabled,
hasActiveSelection,
showValidationWarning = false,
nextStep,
prevStep,
}: SummarySidebarProps) {
@@ -235,7 +237,7 @@ export function SummarySidebar({
<p>{updatePriceModifier.label}</p>
</div>
)}
{!allCategoriesFilled && (
{!allCategoriesFilled && showValidationWarning && (
<div className="text-xs text-red-400 flex items-start gap-2 bg-red-500/10 p-3 rounded-xl border border-red-500/40 animate-eye-catcher">
<AlertCircle className="w-4 h-4 shrink-0 text-red-400 mt-0.5" />
<div>
@@ -244,6 +246,15 @@ export function SummarySidebar({
</div>
</div>
)}
{!allCategoriesFilled && !showValidationWarning && (
<div className="text-xs text-slate-400 flex items-start gap-2 bg-slate-900/50 p-2.5 rounded-xl border border-white/5">
<AlertCircle className="w-4 h-4 shrink-0 text-slate-500 mt-0.5" />
<div>
<p className="font-semibold text-[11px] text-slate-300">Pflichtkategorien beachten</p>
<p className="text-[11px] text-slate-400">Bitte wählen Sie für die Rot markierten Kategorien ein Produkt aus.</p>
</div>
</div>
)}
{productValidationErrors.map((err, errIdx) => (
<p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />