Start integrating the onboarding flow with backend 1

2025-09-03 18:29:56 +02:00
parent a55d48e635
commit a11fdfba24
31 changed files with 1202 additions and 1142 deletions
--- a/frontend/src/components/domain/auth/LoginForm.tsx
+++ b/frontend/src/components/domain/auth/LoginForm.tsx
@@ -56,8 +56,6 @@ export const LoginForm: React.FC<LoginFormProps> = ({
    
    if (!credentials.password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (credentials.password.length < 6) {
-      newErrors.password = 'La contraseña debe tener al menos 6 caracteres';
    }
    
    setErrors(newErrors);
--- a/frontend/src/components/domain/auth/PasswordResetForm.tsx
+++ b/frontend/src/components/domain/auth/PasswordResetForm.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button, Input, Card } from '../../ui';
-import { useAuth } from '../../../hooks/api/useAuth';
+import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
+import { useAuthActions } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';

 interface PasswordResetFormProps {
@@ -33,7 +34,10 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
  const emailInputRef = useRef<HTMLInputElement>(null);
  const passwordInputRef = useRef<HTMLInputElement>(null);
  
-  const { requestPasswordReset, resetPassword, isLoading, error } = useAuth();
+  // TODO: Implement password reset in Zustand auth store
+  // const { requestPasswordReset, resetPassword, isLoading, error } = useAuth();
+  const isLoading = false;
+  const error = null;
  const { showToast } = useToast();

  const isResetMode = Boolean(token) || mode === 'reset';
@@ -109,12 +113,11 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    
    if (!password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (password.length < 8) {
-      newErrors.password = 'La contraseña debe tener al menos 8 caracteres';
-    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
-      newErrors.password = 'La contraseña debe contener mayúsculas, minúsculas y números';
-    } else if (passwordStrength < 50) {
-      newErrors.password = 'La contraseña es demasiado débil. Intenta con una más segura';
+    } else {
+      const passwordErrors = getPasswordErrors(password);
+      if (passwordErrors.length > 0) {
+        newErrors.password = passwordErrors[0]; // Show first error
+      }
    }
    
    if (!confirmPassword) {
@@ -147,7 +150,9 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    }

    try {
-      const success = await requestPasswordReset(email);
+      // TODO: Implement password reset request
+      // const success = await requestPasswordReset(email);
+      const success = false; // Placeholder
      if (success) {
        setIsEmailSent(true);
        showToast({
@@ -192,7 +197,9 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    }

    try {
-      const success = await resetPassword(token, password);
+      // TODO: Implement password reset
+      // const success = await resetPassword(token, password);
+      const success = false; // Placeholder
      if (success) {
        showToast({
          type: 'success',
--- a/frontend/src/components/domain/auth/ProfileSettings.tsx
+++ b/frontend/src/components/domain/auth/ProfileSettings.tsx
@@ -231,10 +231,19 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({
    
    if (!passwordData.newPassword) {
      newErrors.newPassword = 'La nueva contraseña es requerida';
-    } else if (passwordData.newPassword.length < 8) {
-      newErrors.newPassword = 'La contraseña debe tener al menos 8 caracteres';
-    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(passwordData.newPassword)) {
-      newErrors.newPassword = 'La contraseña debe contener mayúsculas, minúsculas y números';
+    } else {
+      // Use simpler validation for now to match backend exactly
+      if (passwordData.newPassword.length < 8) {
+        newErrors.newPassword = 'La contraseña debe tener al menos 8 caracteres';
+      } else if (passwordData.newPassword.length > 128) {
+        newErrors.newPassword = 'La contraseña no puede exceder 128 caracteres';
+      } else if (!/[A-Z]/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos una letra mayúscula';
+      } else if (!/[a-z]/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos una letra minúscula';
+      } else if (!/\d/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos un número';
+      }
    }
    
    if (!passwordData.confirmNewPassword) {
--- a/frontend/src/components/domain/auth/RegisterForm.tsx
+++ b/frontend/src/components/domain/auth/RegisterForm.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Input, Card } from '../../ui';
-import { useAuth } from '../../../hooks/api/useAuth';
-import { UserRegistration } from '../../../types/auth.types';
+import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
+import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';
-import { isMockRegistration } from '../../../config/mock.config';

 interface RegisterFormProps {
  onSuccess?: () => void;
@@ -36,9 +35,20 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  
-  const { register, isLoading, error } = useAuth();
+  const { register } = useAuthActions();
+  const isLoading = useAuthLoading();
+  const error = useAuthError();
  const { success: showSuccessToast, error: showErrorToast } = useToast();

+  // Helper function to determine password match status
+  const getPasswordMatchStatus = () => {
+    if (!formData.confirmPassword) return 'empty';
+    if (formData.password === formData.confirmPassword) return 'match';
+    return 'mismatch';
+  };
+
+  const passwordMatchStatus = getPasswordMatchStatus();
+
  const validateForm = (): boolean => {
    const newErrors: Partial<SimpleUserRegistration> = {};
    
@@ -56,8 +66,11 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
    
    if (!formData.password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (formData.password.length < 8) {
-      newErrors.password = 'La contraseña debe tener al menos 8 caracteres';
+    } else {
+      const passwordErrors = getPasswordErrors(formData.password);
+      if (passwordErrors.length > 0) {
+        newErrors.password = passwordErrors[0]; // Show first error
+      }
    }
    
    if (!formData.confirmPassword) {
@@ -76,64 +89,28 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    console.log('Form submitted, mock mode:', isMockRegistration());
-    
-    // FORCED MOCK MODE FOR TESTING - Always bypass for now
-    const FORCE_MOCK = true;
-    if (FORCE_MOCK || isMockRegistration()) {
-      console.log('Mock registration triggered, showing toast and calling onSuccess');
-      // Show immediate success notification
-      try {
-        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
-          title: 'Cuenta creada exitosamente'
-        });
-        console.log('Toast shown, calling onSuccess callback');
-      } catch (error) {
-        console.error('Error showing toast:', error);
-        // Fallback: show browser alert if toast fails
-        alert('¡Cuenta creada exitosamente! Redirigiendo al onboarding...');
-      }
-      
-      // Call success immediately (removing delay for easier testing)
-      try {
-        onSuccess?.();
-        console.log('onSuccess called');
-      } catch (error) {
-        console.error('Error calling onSuccess:', error);
-        // Fallback: direct redirect if callback fails
-        window.location.href = '/app/onboarding';
-      }
-      return;
-    }
    
    if (!validateForm()) {
      return;
    }
    
    try {
-      const registrationData: UserRegistration = {
+      const registrationData = {
        full_name: formData.full_name,
        email: formData.email,
        password: formData.password,
        tenant_name: 'Default Bakery', // Default value since we're not collecting it
-        phone: '' // Optional field
      };
      
-      const success = await register(registrationData);
+      await register(registrationData);
      
-      if (success) {
-        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
-          title: 'Cuenta creada exitosamente'
-        });
-        onSuccess?.();
-      } else {
-        showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
-          title: 'Error al crear la cuenta'
-        });
-      }
+      showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
+        title: 'Cuenta creada exitosamente'
+      });
+      onSuccess?.();
    } catch (err) {
-      showErrorToast('No se pudo conectar con el servidor. Verifica tu conexión a internet.', {
-        title: 'Error de conexión'
+      showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
+        title: 'Error al crear la cuenta'
      });
    }
  };
@@ -199,6 +176,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          onChange={handleInputChange('password')}
          error={errors.password}
          disabled={isLoading}
+          maxLength={128}
          autoComplete="new-password"
          required
          leftIcon={
@@ -227,21 +205,49 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          }
        />
        
-        <Input
-          type={showConfirmPassword ? 'text' : 'password'}
-          label="Confirmar Contraseña"
-          placeholder="Repite tu contraseña"
-          value={formData.confirmPassword}
-          onChange={handleInputChange('confirmPassword')}
-          error={errors.confirmPassword}
-          disabled={isLoading}
-          autoComplete="new-password"
-          required
-          leftIcon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          }
+        {/* Password Criteria - Show when user is typing */}
+        {formData.password && (
+          <PasswordCriteria 
+            password={formData.password}
+            className="mt-2"
+            showOnlyFailed={false}
+          />
+        )}
+        
+        <div className="relative">
+          <Input
+            type={showConfirmPassword ? 'text' : 'password'}
+            label="Confirmar Contraseña"
+            placeholder="Repite tu contraseña"
+            value={formData.confirmPassword}
+            onChange={handleInputChange('confirmPassword')}
+            error={errors.confirmPassword}
+            disabled={isLoading}
+            maxLength={128}
+            autoComplete="new-password"
+            required
+            className={
+              passwordMatchStatus === 'match' && formData.confirmPassword
+                ? 'border-color-success focus:border-color-success ring-color-success' 
+                : passwordMatchStatus === 'mismatch' && formData.confirmPassword
+                ? 'border-color-error focus:border-color-error ring-color-error'
+                : ''
+            }
+            leftIcon={
+              passwordMatchStatus === 'match' && formData.confirmPassword ? (
+                <svg className="w-5 h-5 text-color-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              ) : passwordMatchStatus === 'mismatch' && formData.confirmPassword ? (
+                <svg className="w-5 h-5 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              ) : (
+                <svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+              )
+            }
          rightIcon={
            <button
              type="button"
@@ -262,6 +268,32 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
            </button>
          }
        />
+          
+          {/* Password Match Status Message */}
+          {formData.confirmPassword && (
+            <div className="mt-2 transition-all duration-300 ease-in-out">
+              {passwordMatchStatus === 'match' ? (
+                <div className="flex items-center space-x-2 text-color-success animate-fade-in">
+                  <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-success/10 flex items-center justify-center">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <span className="text-sm font-medium">¡Las contraseñas coinciden!</span>
+                </div>
+              ) : (
+                <div className="flex items-center space-x-2 text-color-error animate-fade-in">
+                  <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-error/10 flex items-center justify-center">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <span className="text-sm font-medium">Las contraseñas no coinciden</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
        
        <div className="space-y-4 pt-4 border-t border-border-primary">
          <div className="flex items-start space-x-3">
@@ -292,7 +324,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          size="lg"
          isLoading={isLoading}
          loadingText="Creando cuenta..."
-          disabled={isLoading}
+          disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
          className="w-full"
          onClick={(e) => {
            console.log('Button clicked!');
--- a/frontend/src/components/domain/onboarding/OnboardingWizard.tsx
+++ b/frontend/src/components/domain/onboarding/OnboardingWizard.tsx
@@ -1,5 +1,9 @@
 import React, { useState, useCallback } from 'react';
 import { Card, Button, Input, Select, Badge } from '../../ui';
+import { tenantService } from '../../../services/api/tenant.service';
+import { useAuthUser } from '../../../stores/auth.store';
+import { useTenantActions } from '../../../stores/tenant.store';
+

 export interface OnboardingStep {
  id: string;
@@ -37,6 +41,7 @@ export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
  const [stepData, setStepData] = useState<Record<string, any>>({});
  const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+  const { setCurrentTenant } = useTenantActions();

  const currentStep = steps[currentStepIndex];

@@ -80,41 +85,55 @@ export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
      const data = stepData[currentStep.id] || {};
      
      if (!data.bakery?.tenant_id) {
-        // Create tenant inline
+        // Create tenant inline using real backend API
        updateStepData(currentStep.id, {
          ...data,
          bakery: { ...data.bakery, isCreating: true }
        });
        
        try {
-          const mockTenantService = {
-            createTenant: async (formData: any) => {
-              await new Promise(resolve => setTimeout(resolve, 1000));
-              return {
-                tenant_id: `tenant_${Date.now()}`,
-                name: formData.name,
-                ...formData
-              };
-            }
+          // Use the backend-compatible data directly from BakerySetupStep
+          const bakeryRegistration = {
+            name: data.bakery.name,
+            address: data.bakery.address,
+            city: data.bakery.city,
+            postal_code: data.bakery.postal_code,
+            phone: data.bakery.phone,
+            business_type: data.bakery.business_type,
+            business_model: data.bakery.business_model
          };
          
-          const tenantData = await mockTenantService.createTenant(data.bakery);
+          const response = await tenantService.createTenant(bakeryRegistration);
          
-          updateStepData(currentStep.id, {
-            ...data,
-            bakery: {
-              ...data.bakery,
-              tenant_id: tenantData.tenant_id,
-              created_at: new Date().toISOString(),
-              isCreating: false
-            }
-          });
+          if (response.success && response.data) {
+            const tenantData = response.data;
+            
+            updateStepData(currentStep.id, {
+              ...data,
+              bakery: {
+                ...data.bakery,
+                tenant_id: tenantData.id,
+                created_at: tenantData.created_at,
+                isCreating: false
+              }
+            });
+            
+            // Update the tenant store with the new tenant
+            setCurrentTenant(tenantData);
+            
+          } else {
+            throw new Error(response.error || 'Failed to create tenant');
+          }
          
        } catch (error) {
          console.error('Error creating tenant:', error);
          updateStepData(currentStep.id, {
            ...data,
-            bakery: { ...data.bakery, isCreating: false }
+            bakery: { 
+              ...data.bakery, 
+              isCreating: false,
+              creationError: error instanceof Error ? error.message : 'Unknown error'
+            }
          });
          return;
        }
--- a/frontend/src/components/domain/onboarding/steps/BakerySetupStep.tsx
+++ b/frontend/src/components/domain/onboarding/steps/BakerySetupStep.tsx
@@ -1,8 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { Store, MapPin, Phone, Mail } from 'lucide-react';
+import { Store, MapPin, Phone, Mail, Hash, Building } from 'lucide-react';
 import { Button, Card, Input } from '../../../ui';
 import { OnboardingStepProps } from '../OnboardingWizard';

+// Backend-compatible bakery setup interface
+interface BakerySetupData {
+  name: string;
+  business_type: 'bakery' | 'coffee_shop' | 'pastry_shop' | 'restaurant';
+  business_model: 'individual_bakery' | 'central_baker_satellite' | 'retail_bakery' | 'hybrid_bakery';
+  address: string;
+  city: string;
+  postal_code: string;
+  phone: string;
+  email?: string;
+  description?: string;
+}
+
 export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
  data,
  onDataChange,
@@ -11,36 +24,39 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
  isFirstStep,
  isLastStep
 }) => {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<BakerySetupData>({
    name: data.bakery?.name || '',
-    type: data.bakery?.type || '',
-    location: data.bakery?.location || '',
+    business_type: data.bakery?.business_type || 'bakery',
+    business_model: data.bakery?.business_model || 'individual_bakery',
+    address: data.bakery?.address || '',
+    city: data.bakery?.city || 'Madrid',
+    postal_code: data.bakery?.postal_code || '',
    phone: data.bakery?.phone || '',
    email: data.bakery?.email || '',
    description: data.bakery?.description || ''
  });

-  const bakeryTypes = [
+  const bakeryModels = [
    {
-      value: 'artisan',
-      label: 'Panadería Artesanal',
+      value: 'individual_bakery',
+      label: 'Panadería Individual',
      description: 'Producción propia tradicional con recetas artesanales',
      icon: '🥖'
    },
    {
-      value: 'industrial',
-      label: 'Panadería Industrial',
-      description: 'Producción a gran escala con procesos automatizados',
+      value: 'central_baker_satellite',
+      label: 'Panadería Central con Satélites',
+      description: 'Producción centralizada con múltiples puntos de venta',
      icon: '🏭'
    },
    {
-      value: 'retail',
+      value: 'retail_bakery',
      label: 'Panadería Retail',
      description: 'Punto de venta que compra productos terminados',
      icon: '🏪'
    },
    {
-      value: 'hybrid',
+      value: 'hybrid_bakery',
      label: 'Modelo Híbrido',
      description: 'Combina producción propia con productos externos',
      icon: '🔄'
@@ -57,7 +73,7 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
    });
  }, [formData]);

-  const handleInputChange = (field: string, value: string) => {
+  const handleInputChange = (field: keyof BakerySetupData, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
@@ -84,18 +100,18 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
            />
          </div>

-          {/* Bakery Type - Simplified */}
+          {/* Business Model Selection */}
          <div>
            <label className="block text-sm font-semibold text-[var(--text-primary)] mb-4">
-              Tipo de Panadería *
+              Modelo de Negocio *
            </label>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {bakeryTypes.map((type) => (
+              {bakeryModels.map((model) => (
                <label
-                  key={type.value}
+                  key={model.value}
                  className={`
                    flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all duration-200 hover:shadow-sm
-                    ${formData.type === type.value
+                    ${formData.business_model === model.value
                      ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
                      : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
                    }
@@ -103,20 +119,20 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
                >
                  <input
                    type="radio"
-                    name="bakeryType"
-                    value={type.value}
-                    checked={formData.type === type.value}
-                    onChange={(e) => handleInputChange('type', e.target.value)}
+                    name="businessModel"
+                    value={model.value}
+                    checked={formData.business_model === model.value}
+                    onChange={(e) => handleInputChange('business_model', e.target.value as BakerySetupData['business_model'])}
                    className="sr-only"
                  />
                  <div className="flex items-center space-x-3 w-full">
-                    <span className="text-2xl">{type.icon}</span>
+                    <span className="text-2xl">{model.icon}</span>
                    <div>
                      <h4 className="font-medium text-[var(--text-primary)]">
-                        {type.label}
+                        {model.label}
                      </h4>
                      <p className="text-sm text-[var(--text-secondary)]">
-                        {type.description}
+                        {model.description}
                      </p>
                    </div>
                  </div>
@@ -125,17 +141,17 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
            </div>
          </div>

-          {/* Location and Contact - Simplified */}
+          {/* Location and Contact - Backend compatible */}
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-semibold text-[var(--text-primary)] mb-3">
-                Ubicación *
+                Dirección *
              </label>
              <div className="relative">
                <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
                <Input
-                  value={formData.location}
-                  onChange={(e) => handleInputChange('location', e.target.value)}
+                  value={formData.address}
+                  onChange={(e) => handleInputChange('address', e.target.value)}
                  placeholder="Dirección completa de tu panadería"
                  className="w-full pl-12 py-3"
                />
@@ -145,14 +161,48 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
-                  Teléfono (opcional)
+                  Ciudad *
+                </label>
+                <div className="relative">
+                  <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
+                  <Input
+                    value={formData.city}
+                    onChange={(e) => handleInputChange('city', e.target.value)}
+                    placeholder="Madrid"
+                    className="w-full pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  Código Postal *
+                </label>
+                <div className="relative">
+                  <Hash className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
+                  <Input
+                    value={formData.postal_code}
+                    onChange={(e) => handleInputChange('postal_code', e.target.value)}
+                    placeholder="28001"
+                    pattern="[0-9]{5}"
+                    className="w-full pl-10"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  Teléfono *
                </label>
                <div className="relative">
                  <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
                  <Input
                    value={formData.phone}
                    onChange={(e) => handleInputChange('phone', e.target.value)}
-                    placeholder="+1 234 567 8900"
+                    placeholder="+34 600 123 456"
+                    type="tel"
                    className="w-full pl-10"
                  />
                </div>
@@ -177,7 +227,7 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
        </div>
      </div>

-      {/* Optional: Show loading state when creating tenant */}
+      {/* Show loading state when creating tenant */}
      {data.bakery?.isCreating && (
        <div className="text-center p-6 bg-[var(--color-primary)]/5 rounded-lg">
          <div className="animate-spin w-8 h-8 border-3 border-[var(--color-primary)] border-t-transparent rounded-full mx-auto mb-4" />
@@ -186,6 +236,18 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
          </p>
        </div>
      )}
+
+      {/* Show error state if tenant creation fails */}
+      {data.bakery?.creationError && (
+        <div className="text-center p-6 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-600 font-medium mb-2">
+            Error al crear el espacio de trabajo
+          </p>
+          <p className="text-red-500 text-sm">
+            {data.bakery.creationError}
+          </p>
+        </div>
+      )}
    </div>
  );
 };