bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify the onboardinf flow components

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-08 17:19:00 +02:00
parent 201817a1be
commit 2e1e696cb5
32 changed files with 1431 additions and 6366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
frontend/src/pages/app/onboarding/OnboardingPage.tsx
View File

@@ -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;

25
frontend/src/pages/onboarding/OnboardingPage.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { OnboardingWizard } from '../../components/domain/onboarding';
import { PublicLayout } from '../../components/layout';
const OnboardingPage: React.FC = () => {
return (
<PublicLayout
variant="full-width"
maxWidth="full"
headerProps={{
showThemeToggle: true,
showAuthButtons: false,
variant: "minimal"
}}
>
<div className="min-h-screen bg-[var(--bg-primary)] py-8">
<div className="container mx-auto px-4">
<OnboardingWizard />
</div>
</div>
</PublicLayout>
);
};
export default OnboardingPage;

1
frontend/src/pages/onboarding/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as OnboardingPage } from './OnboardingPage';