feat: Improve onboarding wizard UI, UX and dark mode support
This commit implements multiple improvements to the onboarding wizard:
**1. Unified UI Components:**
- Created InfoCard component for consistent "why is important" blocks across all steps
- Created TemplateCard component for consistent template displays
- Both components use global CSS variables for proper dark mode support
**2. Initial Stock Entry Step Improvements:**
- Fixed title/subtitle positioning using unified InfoCard component
- Fixed missing count bug in warning message (now uses {{count}} interpolation)
- Fixed dark mode colors using CSS variables (--color-success, --color-info, etc.)
- Changed next button title from "completar configuración" to "Continuar →"
- Implemented stock creation API call using useAddStock hook
- Products with stock now properly save to backend on step completion
**3. Dark Mode Fixes:**
- Fixed QualitySetupStep: Enhanced button selection visibility with rings and shadows
- Fixed TeamSetupStep: Enhanced role selection visibility with rings and shadows
- Fixed AddressAutocomplete: Replaced all hardcoded colors with CSS variables
- All dropdown results, icons, and hover states now properly adapt to dark mode
**4. Streamlined Wizard Flow:**
- Removed POI Detection step from wizard (step previously added complexity)
- POI detection now runs automatically in background after tenant registration
- Non-blocking approach ensures users aren't delayed by POI detection
- Removed Revision step (setup-review) as it adds no user value
- Completion step is now the final step before dashboard
**5. Backend Updates:**
- Updated onboarding_progress.py to remove poi-detection from ONBOARDING_STEPS
- Updated onboarding_progress.py to remove setup-review from ONBOARDING_STEPS
- Updated step dependencies to reflect streamlined flow
- POI detection documented as automatic background process
All changes maintain backward compatibility and use proper TypeScript types.
This commit is contained in:
@@ -5,6 +5,7 @@ import { useRegisterBakery } from '../../../../api/hooks/tenant';
|
||||
import { BakeryRegistration } from '../../../../api/types/tenant';
|
||||
import { AddressResult } from '../../../../services/api/geocodingApi';
|
||||
import { useWizardContext } from '../context';
|
||||
import { poiContextApi } from '../../../../services/api/poiContextApi';
|
||||
|
||||
interface RegisterTenantStepProps {
|
||||
onNext: () => void;
|
||||
@@ -112,8 +113,25 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
|
||||
try {
|
||||
const tenant = await registerBakery.mutateAsync(formData);
|
||||
|
||||
// Update the wizard context with tenant info and pass the bakeryLocation coordinates
|
||||
// that were captured during address selection to the next step (POI Detection)
|
||||
// Trigger POI detection in the background (non-blocking)
|
||||
// This replaces the removed POI Detection step
|
||||
const bakeryLocation = wizardContext.state.bakeryLocation;
|
||||
if (bakeryLocation?.latitude && bakeryLocation?.longitude && tenant.id) {
|
||||
// Run POI detection asynchronously without blocking the wizard flow
|
||||
poiContextApi.detectPOIs(
|
||||
tenant.id,
|
||||
bakeryLocation.latitude,
|
||||
bakeryLocation.longitude,
|
||||
false // use_cache = false for initial detection
|
||||
).then((result) => {
|
||||
console.log(`✅ POI detection completed automatically for tenant ${tenant.id}:`, result.summary);
|
||||
}).catch((error) => {
|
||||
console.warn('⚠️ Background POI detection failed (non-blocking):', error);
|
||||
// This is non-critical, so we don't block the user
|
||||
});
|
||||
}
|
||||
|
||||
// Update the wizard context with tenant info
|
||||
onComplete({
|
||||
tenant,
|
||||
tenantId: tenant.id,
|
||||
|
||||
Reference in New Issue
Block a user