Simplify the onboardinf flow components

frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { Button } from '../../../ui/Button';
+import { Input } from '../../../ui/Input';
+import { useRegisterBakery } from '../../../../api/hooks/tenant';
+import { BakeryRegistration } from '../../../../api/types/tenant';
+
+interface RegisterTenantStepProps {
+  onNext: () => void;
+  onPrevious: () => void;
+  onComplete: (data?: any) => void;
+  isFirstStep: boolean;
+  isLastStep: boolean;
+}
+
+export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
+  onComplete,
+  isFirstStep
+}) => {
+  const [formData, setFormData] = useState<BakeryRegistration>({
+    name: '',
+    address: '',
+    postal_code: '',
+    phone: '',
+    city: 'Madrid',
+    business_type: 'bakery',
+    business_model: 'individual_bakery'
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const registerBakery = useRegisterBakery();
+
+  const handleInputChange = (field: keyof BakeryRegistration, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    
+    if (errors[field]) {
+      setErrors(prev => ({
+        ...prev,
+        [field]: ''
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    // Required fields according to backend BakeryRegistration schema
+    if (!formData.name.trim()) {
+      newErrors.name = 'El nombre de la panadería es obligatorio';
+    } else if (formData.name.length < 2 || formData.name.length > 200) {
+      newErrors.name = 'El nombre debe tener entre 2 y 200 caracteres';
+    }
+
+    if (!formData.address.trim()) {
+      newErrors.address = 'La dirección es obligatoria';
+    } else if (formData.address.length < 10 || formData.address.length > 500) {
+      newErrors.address = 'La dirección debe tener entre 10 y 500 caracteres';
+    }
+
+    if (!formData.postal_code.trim()) {
+      newErrors.postal_code = 'El código postal es obligatorio';
+    } else if (!/^\d{5}$/.test(formData.postal_code)) {
+      newErrors.postal_code = 'El código postal debe tener exactamente 5 dígitos';
+    }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = 'El número de teléfono es obligatorio';
+    } else if (formData.phone.length < 9 || formData.phone.length > 20) {
+      newErrors.phone = 'El teléfono debe tener entre 9 y 20 caracteres';
+    } else {
+      // Basic Spanish phone validation
+      const phone = formData.phone.replace(/[\s\-\(\)]/g, '');
+      const patterns = [
+        /^(\+34|0034|34)?[6789]\d{8}$/, // Mobile
+        /^(\+34|0034|34)?9\d{8}$/       // Landline
+      ];
+      if (!patterns.some(pattern => pattern.test(phone))) {
+        newErrors.phone = 'Introduce un número de teléfono español válido';
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      const tenant = await registerBakery.mutateAsync(formData);
+      onComplete({ tenant });
+    } catch (error) {
+      console.error('Error registering bakery:', error);
+      setErrors({ submit: 'Error al registrar la panadería. Por favor, inténtalo de nuevo.' });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Input
+          label="Nombre de la Panadería"
+          placeholder="Ingresa el nombre de tu panadería"
+          value={formData.name}
+          onChange={(e) => handleInputChange('name', e.target.value)}
+          error={errors.name}
+          isRequired
+        />
+
+        <Input
+          label="Teléfono"
+          type="tel"
+          placeholder="+34 123 456 789"
+          value={formData.phone}
+          onChange={(e) => handleInputChange('phone', e.target.value)}
+          error={errors.phone}
+          isRequired
+        />
+
+        <div className="md:col-span-2">
+          <Input
+            label="Dirección"
+            placeholder="Calle Principal 123, Ciudad, Provincia"
+            value={formData.address}
+            onChange={(e) => handleInputChange('address', e.target.value)}
+            error={errors.address}
+            isRequired
+          />
+        </div>
+
+        <Input
+          label="Código Postal"
+          placeholder="28001"
+          value={formData.postal_code}
+          onChange={(e) => handleInputChange('postal_code', e.target.value)}
+          error={errors.postal_code}
+          isRequired
+          maxLength={5}
+        />
+
+        <Input
+          label="Ciudad (Opcional)"
+          placeholder="Madrid"
+          value={formData.city}
+          onChange={(e) => handleInputChange('city', e.target.value)}
+          error={errors.city}
+        />
+      </div>
+
+      {errors.submit && (
+        <div className="text-[var(--color-error)] text-sm bg-[var(--color-error)]/10 p-3 rounded-lg">
+          {errors.submit}
+        </div>
+      )}
+
+      <div className="flex justify-end">
+        <Button
+          onClick={handleSubmit}
+          isLoading={registerBakery.isPending}
+          loadingText="Registrando..."
+          size="lg"
+        >
+          Crear Panadería y Continuar
+        </Button>
+      </div>
+    </div>
+  );
+};