Simplify the onboardinf flow components
This commit is contained in:
Urtzi Alfaro
@@ -1,226 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { OnboardingWizard, OnboardingStep } from '../../../components/domain/onboarding/OnboardingWizard';
|
||||
import { useOnboarding, useAutoResume } from '../../../hooks/business/onboarding';
|
||||
import { useAuthUser, useIsAuthenticated } from '../../../stores/auth.store';
|
||||
import { LoadingSpinner } from '../../../components/shared/LoadingSpinner';
|
||||
|
||||
// Step Components
|
||||
import { BakerySetupStep } from '../../../components/domain/onboarding/steps/BakerySetupStep';
|
||||
import { SmartInventorySetupStep } from '../../../components/domain/onboarding/steps/SmartInventorySetupStep';
|
||||
import { SuppliersStep } from '../../../components/domain/onboarding/steps/SuppliersStep';
|
||||
import { MLTrainingStep } from '../../../components/domain/onboarding/steps/MLTrainingStep';
|
||||
import { CompletionStep } from '../../../components/domain/onboarding/steps/CompletionStep';
|
||||
|
||||
const OnboardingPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const user = useAuthUser();
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
|
||||
// Use auto-resume functionality
|
||||
const autoResume = useAutoResume();
|
||||
|
||||
// Use the onboarding business hook
|
||||
const {
|
||||
currentStep,
|
||||
steps,
|
||||
data,
|
||||
isLoading,
|
||||
error,
|
||||
nextStep,
|
||||
previousStep,
|
||||
goToStep,
|
||||
updateStepData,
|
||||
validateCurrentStep,
|
||||
createTenant,
|
||||
processSalesFile,
|
||||
createInventoryFromSuggestions,
|
||||
completeOnboarding,
|
||||
clearError,
|
||||
reset
|
||||
} = useOnboarding();
|
||||
|
||||
// Map steps to components
|
||||
const stepComponents: { [key: string]: React.ComponentType<any> } = {
|
||||
'setup': BakerySetupStep,
|
||||
'smart-inventory-setup': SmartInventorySetupStep,
|
||||
'suppliers': SuppliersStep,
|
||||
'ml-training': MLTrainingStep,
|
||||
'completion': CompletionStep
|
||||
};
|
||||
|
||||
// Convert hook steps to OnboardingWizard format
|
||||
const wizardSteps: OnboardingStep[] = steps.map(step => ({
|
||||
id: step.id,
|
||||
title: step.title,
|
||||
description: step.description,
|
||||
component: stepComponents[step.id],
|
||||
isRequired: step.isRequired,
|
||||
validation: step.validation
|
||||
}));
|
||||
|
||||
// Debug logging - only show if there's an error or important state change
|
||||
if (error || isLoading || autoResume.isCheckingResume) {
|
||||
console.log('OnboardingPage Status:', {
|
||||
stepsLength: steps.length,
|
||||
currentStep,
|
||||
isLoading,
|
||||
error,
|
||||
isCheckingResume: autoResume.isCheckingResume,
|
||||
});
|
||||
}
|
||||
|
||||
const handleStepChange = (stepIndex: number, stepData: any) => {
|
||||
const stepId = steps[stepIndex]?.id;
|
||||
if (stepId) {
|
||||
updateStepData(stepId, stepData);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = async (): Promise<boolean> => {
|
||||
try {
|
||||
const success = await nextStep();
|
||||
return success;
|
||||
} catch (error) {
|
||||
console.error('Error in handleNext:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevious = (): boolean => {
|
||||
return previousStep();
|
||||
};
|
||||
|
||||
const handleComplete = async (allData: any): Promise<void> => {
|
||||
try {
|
||||
await completeOnboarding();
|
||||
} catch (error) {
|
||||
console.error('Error in handleComplete:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Redirect if user is not authenticated
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) {
|
||||
navigate('/auth/login');
|
||||
}
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
// Clear error when user navigates away or when component mounts
|
||||
useEffect(() => {
|
||||
// Clear any existing errors when the page loads
|
||||
if (error) {
|
||||
console.log('🧹 Clearing existing error on mount:', error);
|
||||
clearError();
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (error) {
|
||||
clearError();
|
||||
}
|
||||
};
|
||||
}, [clearError]); // Include clearError in dependencies
|
||||
|
||||
// Show loading while processing or checking for saved progress
|
||||
// Add a safety timeout - if checking resume takes more than 10 seconds, proceed anyway
|
||||
const [loadingTimeoutReached, setLoadingTimeoutReached] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLoading || autoResume.isCheckingResume) {
|
||||
const timeout = setTimeout(() => {
|
||||
console.warn('⚠️ Loading timeout reached, proceeding with onboarding');
|
||||
setLoadingTimeoutReached(true);
|
||||
}, 10000); // 10 second timeout
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
} else {
|
||||
setLoadingTimeoutReached(false);
|
||||
}
|
||||
}, [isLoading, autoResume.isCheckingResume]);
|
||||
|
||||
if ((isLoading || autoResume.isCheckingResume) && !loadingTimeoutReached) {
|
||||
const message = autoResume.isCheckingResume
|
||||
? "Verificando progreso guardado..."
|
||||
: "Procesando...";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
<div className="mt-4 text-lg text-gray-600">{message}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error state with better recovery options
|
||||
if (error && !loadingTimeoutReached) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center max-w-md">
|
||||
<h2 className="text-xl font-semibold text-red-600 mb-4">Error en Onboarding</h2>
|
||||
<p className="text-gray-600 mb-4">{error}</p>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log('🔄 User clicked retry - clearing error');
|
||||
clearError();
|
||||
}}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Continuar con el Onboarding
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log('🔄 User clicked reset');
|
||||
reset();
|
||||
}}
|
||||
className="w-full px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
|
||||
>
|
||||
Reiniciar Desde el Principio
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-4">
|
||||
Si el problema persiste, recarga la página
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Safety check: ensure we have valid steps and current step
|
||||
if (wizardSteps.length === 0) {
|
||||
console.error('❌ No wizard steps available, this should not happen');
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold text-red-600 mb-4">Error de Configuración</h2>
|
||||
<p className="text-gray-600 mb-4">No se pudieron cargar los pasos del onboarding.</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Recargar Página
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<OnboardingWizard
|
||||
steps={wizardSteps}
|
||||
currentStep={currentStep}
|
||||
data={data}
|
||||
onStepChange={handleStepChange}
|
||||
onNext={handleNext}
|
||||
onPrevious={handlePrevious}
|
||||
onComplete={handleComplete}
|
||||
onGoToStep={goToStep}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingPage;
|
||||
Reference in New Issue
Block a user