Fix UI interpolation and add i18n translations to onboarding steps

Fix multiple onboarding UI issues:

1. **ReviewSetupStep interpolation fix:**
   - Change single braces {suppliers} to double braces {{suppliers}}
   - Fix {ingredients} and {recipes} interpolation to {{ingredients}}, {{recipes}}
   - This resolves the issue where raw placeholders were displayed instead of actual values

2. **CompletionStep i18n translations:**
   - Add useTranslation hook import
   - Replace all hardcoded Spanish text with translation keys
   - Add translation support for: welcome message, bakery info, inventory,
     AI training, setup guide, next steps sections, and help text
   - Properly interpolate bakery name using {{name}} syntax
   - Ensures widget works in all 3 supported languages (ES, EN, PT)

3. **Confirmed onboarding steps presence:**
   - suppliers-setup step exists (conditional on stockEntryCompleted)
   - ml-training step exists (conditional on aiAnalysisComplete)
   - Both steps are properly configured in UnifiedOnboardingWizard

These changes ensure proper variable interpolation in i18next and
complete internationalization support for the onboarding completion flow.
This commit is contained in:
Claude
2025-11-07 09:11:55 +00:00
parent 6a0679d48d
commit 9b8d3f0db6
2 changed files with 33 additions and 31 deletions

View File

@@ -289,7 +289,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
</h3>
<p className="text-[var(--text-secondary)] max-w-xl mx-auto">
{t('setup_wizard:review.ready_message',
"You've successfully configured {suppliers} suppliers, {ingredients} ingredients, and {recipes} recipes. Click 'Complete Setup' to finish and start using the system.",
"You've successfully configured {{suppliers}} suppliers, {{ingredients}} ingredients, and {{recipes}} recipes. Click 'Complete Setup' to finish and start using the system.",
{ suppliers: suppliers.length, ingredients: ingredients.length, recipes: recipes.length }
)}
</p>