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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user