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 { useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '../../ui/Button';
|
import { Button } from '../../ui/Button';
|
||||||
@@ -167,15 +167,24 @@ const OnboardingWizardContent: React.FC = () => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
// Filter visible steps based on wizard context
|
// Filter visible steps based on wizard context
|
||||||
const getVisibleSteps = (): StepConfig[] => {
|
// useMemo ensures VISIBLE_STEPS recalculates when wizard context state changes
|
||||||
return ALL_STEPS.filter(step => {
|
// 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.isConditional) return true;
|
||||||
if (!step.condition) return true;
|
if (!step.condition) return true;
|
||||||
return step.condition(wizardContext);
|
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 isNewTenant = searchParams.get('new') === 'true';
|
||||||
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
||||||
@@ -286,16 +295,6 @@ const OnboardingWizardContent: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [userProgress, isInitialized, currentStepIndex, isNewTenant, VISIBLE_STEPS]);
|
}, [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 currentStep = VISIBLE_STEPS[currentStepIndex];
|
||||||
|
|
||||||
const handleStepComplete = async (data?: any) => {
|
const handleStepComplete = async (data?: any) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user