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

Architect navigation buttons correctly: move from wizard-level to step-level

Browse Source 
Fixed the navigation architecture to follow proper onboarding patterns:

**ARCHITECTURE CHANGE:**
- REMOVED: External navigation footer from UnifiedOnboardingWizard (Back + Continue buttons at wizard level)
- ADDED: Internal Continue buttons inside each setup wizard step component

**WHY THIS MATTERS:**
1. Onboarding should NEVER show Back buttons (users cannot go back)
2. Each step should be self-contained with its own Continue button
3. Setup wizard steps are reused in both contexts:
   - SetupWizard (/app/setup): Uses external StepNavigation component
   - UnifiedOnboardingWizard: Steps now render their own buttons

**CHANGES MADE:**

1. UnifiedOnboardingWizard.tsx:
   - Removed navigation footer (lines 548-588)
   - Now passes canContinue prop to steps
   - Steps are responsible for their own navigation

2. All setup wizard steps updated:
   - QualitySetupStep: Added onComplete, canContinue props + Continue button
   - SuppliersSetupStep: Modified existing button to call onComplete
   - InventorySetupStep: Added onComplete, canContinue props + Continue button
   - RecipesSetupStep: Added canContinue prop + Continue button
   - TeamSetupStep: Added onComplete, canContinue props + Continue button
   - ReviewSetupStep: Added onComplete, canContinue props + Continue button

3. Continue button pattern:
   - Only renders when onComplete prop exists (onboarding context)
   - Disabled based on canContinue prop from parent
   - Styled consistently across all steps
   - Positioned at bottom with border-top separator

**RESULT:**
- Clean separation: onboarding steps have internal buttons, no external navigation
- No Back button in onboarding (as required)
- Setup wizard still works with external StepNavigation
- Consistent UX across all steps
This commit is contained in:
Claude
2025-11-06 19:55:42 +00:00
parent 2059c79fa6
commit 623d378faf
7 changed files with 74 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
View File

@@ -542,50 +542,9 @@ const OnboardingWizardContent: React.FC = () => {
onUpdate={handleStepUpdate}
isFirstStep={currentStepIndex === 0}
isLastStep={currentStepIndex === VISIBLE_STEPS.length - 1}
canContinue={canContinue}
/>
</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>
);