Add navigation buttons to UnifiedOnboardingWizard for setup wizard steps

Fixed issue where setup wizard steps (QualitySetupStep, SuppliersSetupStep, etc.)
used in the UnifiedOnboardingWizard didn't show navigation buttons:

1. **Added canContinue state tracking**:
   - Added canContinue state to track whether Continue button should be enabled
   - Initialized to true (optimistic default)

2. **Updated handleStepUpdate to handle canContinue**:
   - Setup wizard steps call onUpdate({ canContinue: true/false })
   - handleStepUpdate now receives and sets canContinue state
   - Allows steps to dynamically enable/disable Continue button

3. **Added navigation footer for setup wizard steps**:
   - Conditionally renders navigation buttons for setup wizard steps only
   - Includes Back button (when not first step)
   - Includes Continue button (disabled based on canContinue state)
   - Shows loading state during step completion
   - Only applies to: suppliers-setup, inventory-setup, recipes-setup,
     quality-setup, team-setup, setup-review

This fixes the issue where QualitySetupStep and other setup wizard steps
appeared in the onboarding flow without any way to proceed to the next step,
even though they were optional.

Note: ConfigurationProgressWidget navigation buttons are already correctly
implemented and should work as expected.
This commit is contained in:
Claude
2025-11-06 19:16:29 +00:00
parent 5670601fbe
commit 967ecb5641

View File

@@ -205,6 +205,7 @@ const OnboardingWizardContent: React.FC = () => {
const isNewTenant = searchParams.get('new') === 'true';
const [currentStepIndex, setCurrentStepIndex] = useState(0);
const [isInitialized, setIsInitialized] = useState(isNewTenant);
const [canContinue, setCanContinue] = useState(true); // Track if current step allows continuation
useTenantInitializer();
@@ -407,6 +408,11 @@ const OnboardingWizardContent: React.FC = () => {
};
const handleStepUpdate = (data?: any) => {
// Handle canContinue state updates from setup wizard steps
if (data?.canContinue !== undefined) {
setCanContinue(data.canContinue);
}
// Handle intermediate updates without marking step complete
if (currentStep.id === 'bakery-type-selection' && data?.bakeryType) {
wizardContext.updateBakeryType(data.bakeryType as BakeryType);
@@ -538,6 +544,48 @@ const OnboardingWizardContent: React.FC = () => {
isLastStep={currentStepIndex === VISIBLE_STEPS.length - 1}
/>
</CardBody>
{/* Navigation Footer - Only for setup wizard steps that don't render their own buttons */}
{['suppliers-setup', 'inventory-setup', 'recipes-setup', 'quality-setup', 'team-setup', 'setup-review'].includes(currentStep.id) && (
<div className="border-t border-[var(--border-primary)] px-6 py-4 bg-[var(--bg-secondary)]/30">
<div className="flex flex-col sm:flex-row items-center justify-between gap-3">
{/* Left side - Back button */}
<div className="w-full sm:w-auto">
{currentStepIndex > 0 && (
<Button
variant="secondary"
onClick={() => setCurrentStepIndex(currentStepIndex - 1)}
disabled={markStepCompleted.isPending}
className="w-full sm:w-auto"
>
{t('onboarding:wizard.navigation.back', 'Atrás')}
</Button>
)}
</div>
{/* Right side - Continue button */}
<div className="w-full sm:w-auto">
<Button
variant="primary"
onClick={handleStepComplete}
disabled={!canContinue || markStepCompleted.isPending}
className="w-full sm:w-auto min-w-[200px]"
>
{markStepCompleted.isPending ? (
<span className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
{t('common:saving', 'Guardando...')}
</span>
) : currentStepIndex === VISIBLE_STEPS.length - 1 ? (
t('onboarding:wizard.navigation.finish', 'Finalizar →')
) : (
t('onboarding:wizard.navigation.next', 'Continuar →')
)}
</Button>
</div>
</div>
</div>
)}
</Card>
</div>
);