From 3a17a423ebb0304227ae70994c5687784eb972f5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 09:46:58 +0000
Subject: [PATCH] Fix missing suppliers and ML training steps in onboarding
 flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../onboarding/UnifiedOnboardingWizard.tsx    | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx b/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
index aadde9c3..93be1085 100644
--- a/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
+++ b/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
@@ -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) => {