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

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

View File

@@ -9,7 +9,7 @@ interface TeamMember {
role: string;
}
export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, canContinue }) => {
const { t } = useTranslation();
// Local state for team members (will be sent to backend when API is available)
@@ -310,6 +310,19 @@ export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
</p>
</div>
)}
{/* Continue button - only shown when used in onboarding context */}
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
<button
onClick={onComplete}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>
{t('setup_wizard:navigation.continue', 'Continue →')}
</button>
</div>
)}
</div>
);
};