This commit implements comprehensive Spanish translations for all new onboarding
components and creates a complete guided tour framework for post-setup feature
discovery.
## Phase 7: Spanish Translations
### Spanish Onboarding Translations Added
**BakeryTypeSelectionStep translations (onboarding.bakery_type):**
- Title and subtitle for bakery type selection
- Production bakery: features, examples, and selected info
- Retail bakery: features, examples, and selected info
- Mixed bakery: features, examples, and selected info
- Help text and continue button
**DataSourceChoiceStep translations (onboarding.data_source):**
- Title and subtitle for configuration method
- AI-assisted setup: benefits, ideal scenarios, estimated time
- Manual setup: benefits, ideal scenarios, estimated time
- Info panels for both options with detailed requirements
**ProductionProcessesStep translations (onboarding.processes):**
- Title and subtitle for production processes
- Process types: baking, decorating, finishing, assembly
- Form labels and placeholders
- Template section with quick start option
- Navigation buttons and help text
**Updated Wizard Steps:**
- Added all new step titles and descriptions
- Updated navigation labels
- Enhanced progress indicators
### Translation Coverage
Total new translation keys added: **150+ keys**
- bakery_type: 40+ keys
- data_source: 35+ keys
- processes: 25+ keys
- wizard updates: 15+ keys
- Comprehensive coverage for all user-facing text
## Phase 9: Guided Tours
### Tour Framework Created
**TourContext (`/frontend/src/contexts/TourContext.tsx`):**
- Complete state management for tours
- Tour step navigation (next, previous, skip, complete)
- localStorage persistence for completed/skipped tours
- beforeShow and afterShow hooks for each step
- Support for custom actions in tour steps
**Key Features:**
- Track which tours are completed or skipped
- Prevent showing tours that are already done
- Support async operations in step hooks
- Centralized tour state across the app
### Tour UI Components
**TourTooltip (`/frontend/src/components/ui/Tour/TourTooltip.tsx`):**
- Intelligent positioning (top, bottom, left, right)
- Auto-adjusts if tooltip goes off-screen
- Progress indicators with dots
- Navigation buttons (previous, next, finish)
- Close/skip button
- Arrow pointing to target element
- Responsive design with animations
**TourSpotlight (`/frontend/src/components/ui/Tour/TourSpotlight.tsx`):**
- SVG mask overlay to dim rest of page
- Highlighted border around target element
- Smooth animations (fade in, pulse)
- Auto-scroll target into view
- Adjusts on window resize/scroll
**Tour (`/frontend/src/components/ui/Tour/Tour.tsx`):**
- Main container component
- Portal rendering for overlay
- Disables body scroll during tour
- Combines tooltip and spotlight
**TourButton (`/frontend/src/components/ui/Tour/TourButton.tsx`):**
- Three variants: icon, button, menu
- Shows all available tours
- Displays completion status
- Dropdown menu with tour descriptions
- Number of steps for each tour
### Predefined Tours Created
**5 comprehensive tours defined (`/frontend/src/tours/tours.ts`):**
1. **Dashboard Tour** (5 steps):
- Welcome and overview
- Key statistics cards
- AI forecast chart
- Inventory alerts
- Main navigation
2. **Inventory Tour** (5 steps):
- Inventory management overview
- Adding new ingredients
- Search and filters
- Inventory table view
- Stock alerts
3. **Recipes Tour** (5 steps):
- Recipe management intro
- Creating recipes
- Automatic cost calculation
- Recipe yield settings
- Batch multiplier
4. **Production Tour** (5 steps):
- Production planning overview
- Production schedule calendar
- AI recommendations
- Creating production batches
- Batch status tracking
5. **Post-Onboarding Tour** (5 steps):
- Congratulations message
- Main navigation overview
- Quick actions
- Notifications
- Help resources
### Tour Translations
**New Spanish locale: `/frontend/src/locales/es/tour.json`:**
- Navigation labels (previous, next, finish, skip)
- Progress indicators
- Tour trigger button text
- Completion messages
- Tour names and descriptions
### Technical Implementation
**Features:**
- `data-tour` attributes for targeting elements
- Portal rendering for proper z-index layering
- Smooth animations with CSS classes
- Responsive positioning algorithm
- Scroll handling for dynamic content
- Window resize listeners
- TypeScript interfaces for type safety
**Usage Pattern:**
```typescript
// In any component
import { useTour } from '../contexts/TourContext';
import { dashboardTour } from '../tours/tours';
const { startTour } = useTour();
startTour(dashboardTour);
```
## Files Added
**Translations:**
- frontend/src/locales/es/tour.json
**Tour Framework:**
- frontend/src/contexts/TourContext.tsx
- frontend/src/components/ui/Tour/Tour.tsx
- frontend/src/components/ui/Tour/TourTooltip.tsx
- frontend/src/components/ui/Tour/TourSpotlight.tsx
- frontend/src/components/ui/Tour/TourButton.tsx
- frontend/src/components/ui/Tour/index.ts
- frontend/src/tours/tours.ts
## Files Modified
- frontend/src/locales/es/onboarding.json (150+ new translation keys)
## Testing
✅ Build successful (23.12s)
✅ No TypeScript errors
✅ All translations properly structured
✅ Tour components render via portals
✅ Spanish locale complete for all new features
## Integration Requirements
To enable tours in the app:
1. Add TourProvider to app root (wrap with TourProvider)
2. Add Tour component to render active tours
3. Add TourButton where help is needed
4. Add data-tour attributes to tour target elements
Example:
```tsx
<TourProvider>
<App />
<Tour />
</TourProvider>
```
## Next Steps
- Add TourProvider to application root
- Add data-tour attributes to target elements in pages
- Integrate TourButton in navigation/help sections
- Auto-trigger post-onboarding tour after setup complete
- Track tour analytics (views, completions, skip rates)
## Benefits
**For Users:**
- Smooth onboarding experience in Spanish
- Interactive feature discovery
- Contextual help when needed
- Can skip or restart tours anytime
- Never see same tour twice (unless restarted)
**For Product:**
- Reduce support requests
- Increase feature adoption
- Improve user confidence
- Better user experience
- Track which features need improvement
