Add traslations 2

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Input } from '../../../ui';
 import { AddressAutocomplete } from '../../../ui/AddressAutocomplete';
 import { useRegisterBakery, useTenant, useUpdateTenant } from '../../../../api/hooks/tenant';
@@ -33,6 +34,7 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
   onComplete,
   isFirstStep
 }) => {
+  const { t } = useTranslation();
   const wizardContext = useWizardContext();
   const tenantId = wizardContext.state.tenantId;
 
@@ -126,27 +128,27 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
 
     // Required fields according to backend BakeryRegistration schema
     if (!formData.name.trim()) {
-      newErrors.name = 'El nombre de la panadería es obligatorio';
+      newErrors.name = t('onboarding:steps.tenant_registration.validation.name_required');
     } else if (formData.name.length < 2 || formData.name.length > 200) {
-      newErrors.name = 'El nombre debe tener entre 2 y 200 caracteres';
+      newErrors.name = t('onboarding:steps.tenant_registration.validation.name_length');
     }
 
     if (!formData.address.trim()) {
-      newErrors.address = 'La dirección es obligatoria';
+      newErrors.address = t('onboarding:steps.tenant_registration.validation.address_required');
     } else if (formData.address.length < 10 || formData.address.length > 500) {
-      newErrors.address = 'La dirección debe tener entre 10 y 500 caracteres';
+      newErrors.address = t('onboarding:steps.tenant_registration.validation.address_length');
     }
 
     if (!formData.postal_code.trim()) {
-      newErrors.postal_code = 'El código postal es obligatorio';
+      newErrors.postal_code = t('onboarding:steps.tenant_registration.validation.postal_code_required');
     } else if (!/^\d{5}$/.test(formData.postal_code)) {
-      newErrors.postal_code = 'El código postal debe tener exactamente 5 dígitos';
+      newErrors.postal_code = t('onboarding:steps.tenant_registration.validation.postal_code_format');
     }
 
     if (!formData.phone.trim()) {
-      newErrors.phone = 'El número de teléfono es obligatorio';
+      newErrors.phone = t('onboarding:steps.tenant_registration.validation.phone_required');
     } else if (formData.phone.length < 9 || formData.phone.length > 20) {
-      newErrors.phone = 'El teléfono debe tener entre 9 y 20 caracteres';
+      newErrors.phone = t('onboarding:steps.tenant_registration.validation.phone_length');
     } else {
       // Basic Spanish phone validation
       const phone = formData.phone.replace(/[\s\-\(\)]/g, '');
@@ -155,7 +157,7 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
         /^(\+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';
+        newErrors.phone = t('onboarding:steps.tenant_registration.validation.phone_format');
       }
     }
 
@@ -240,7 +242,7 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
       });
     } catch (error) {
       console.error('Error registering bakery:', error);
-      setErrors({ submit: 'Error al registrar la panadería. Por favor, inténtalo de nuevo.' });
+      setErrors({ submit: t('onboarding:steps.tenant_registration.errors.register') });
     }
   };
 
@@ -252,12 +254,16 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
           <div className="text-2xl flex-shrink-0">{isEnterprise ? '🏭' : '🏪'}</div>
           <div>
             <h3 className="font-semibold text-[var(--text-primary)] mb-1">
-              {isEnterprise ? 'Registra tu Obrador Central' : 'Registra tu Panadería'}
+              {t(isEnterprise
+                ? 'onboarding:steps.tenant_registration.header.title_enterprise'
+                : 'onboarding:steps.tenant_registration.header.title'
+              )}
             </h3>
             <p className="text-sm text-[var(--text-secondary)]">
-              {isEnterprise
-                ? 'Ingresa los datos de tu obrador principal. Después podrás agregar las sucursales.'
-                : 'Completa la información básica de tu panadería para comenzar.'}
+              {t(isEnterprise
+                ? 'onboarding:steps.tenant_registration.header.description_enterprise'
+                : 'onboarding:steps.tenant_registration.header.description'
+              )}
             </p>
           </div>
         </div>
@@ -266,8 +272,14 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
       <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
         <div className="transform transition-all duration-200 hover:scale-[1.01]">
           <Input
-            label={isEnterprise ? "Nombre del Obrador Central" : "Nombre de la Panadería"}
-            placeholder={isEnterprise ? "Ingresa el nombre de tu obrador central" : "Ingresa el nombre de tu panadería"}
+            label={t(isEnterprise
+              ? 'onboarding:steps.tenant_registration.fields.business_name_enterprise'
+              : 'onboarding:steps.tenant_registration.fields.business_name'
+            )}
+            placeholder={t(isEnterprise
+              ? 'onboarding:steps.tenant_registration.placeholders.business_name_enterprise'
+              : 'onboarding:steps.tenant_registration.placeholders.business_name'
+            )}
             value={formData.name}
             onChange={(e) => handleInputChange('name', e.target.value)}
             error={errors.name}
@@ -277,9 +289,9 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
 
         <div className="transform transition-all duration-200 hover:scale-[1.01]">
           <Input
-            label="Teléfono"
+            label={t('onboarding:steps.tenant_registration.fields.phone')}
             type="tel"
-            placeholder="+34 123 456 789"
+            placeholder={t('onboarding:steps.tenant_registration.placeholders.phone')}
             value={formData.phone}
             onChange={(e) => handleInputChange('phone', e.target.value)}
             error={errors.phone}
@@ -290,11 +302,14 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
         <div className="md:col-span-2 transform transition-all duration-200 hover:scale-[1.01] relative z-20">
           <label className="block text-sm font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
             <span className="text-lg">📍</span>
-            Dirección <span className="text-red-500">*</span>
+            {t('onboarding:steps.tenant_registration.fields.address')} <span className="text-red-500">*</span>
           </label>
           <AddressAutocomplete
             value={formData.address}
-            placeholder={isEnterprise ? "Dirección del obrador central..." : "Dirección de tu panadería..."}
+            placeholder={t(isEnterprise
+              ? 'onboarding:steps.tenant_registration.placeholders.address_enterprise'
+              : 'onboarding:steps.tenant_registration.placeholders.address'
+            )}
             onAddressSelect={(address) => {
               console.log('Selected:', address.display_name);
               handleAddressSelect(address);
@@ -313,8 +328,8 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
 
         <div className="transform transition-all duration-200 hover:scale-[1.01]">
           <Input
-            label="Código Postal"
-            placeholder="28001"
+            label={t('onboarding:steps.tenant_registration.fields.postal_code')}
+            placeholder={t('onboarding:steps.tenant_registration.placeholders.postal_code')}
             value={formData.postal_code}
             onChange={(e) => handleInputChange('postal_code', e.target.value)}
             error={errors.postal_code}
@@ -325,8 +340,8 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
 
         <div className="transform transition-all duration-200 hover:scale-[1.01]">
           <Input
-            label="Ciudad (Opcional)"
-            placeholder="Madrid"
+            label={t('onboarding:steps.tenant_registration.fields.city')}
+            placeholder={t('onboarding:steps.tenant_registration.placeholders.city')}
             value={formData.city}
             onChange={(e) => handleInputChange('city', e.target.value)}
             error={errors.city}
@@ -339,7 +354,9 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
           <div className="flex items-start gap-3">
             <span className="text-2xl flex-shrink-0">⚠️</span>
             <div>
-              <h4 className="font-semibold text-[var(--color-error)] mb-1">Error al registrar</h4>
+              <h4 className="font-semibold text-[var(--color-error)] mb-1">
+                {t('onboarding:steps.tenant_registration.errors.register_title')}
+              </h4>
               <p className="text-sm text-[var(--text-secondary)]">{errors.submit}</p>
             </div>
           </div>
@@ -350,14 +367,26 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
         <Button
           onClick={handleSubmit}
           isLoading={registerBakery.isPending || updateTenant.isPending}
-          loadingText={tenantId ? "Actualizando obrador..." : (isEnterprise ? "Registrando obrador..." : "Registrando...")}
+          loadingText={t(tenantId
+            ? 'onboarding:steps.tenant_registration.loading.updating'
+            : (isEnterprise
+              ? 'onboarding:steps.tenant_registration.loading.creating_enterprise'
+              : 'onboarding:steps.tenant_registration.loading.creating'
+            )
+          )}
           size="lg"
           className="w-full sm:w-auto sm:min-w-[280px] text-base font-semibold transform transition-all duration-300 hover:scale-105 shadow-lg"
         >
-          {tenantId
-            ? (isEnterprise ? "Actualizar Obrador Central y Continuar →" : "Actualizar Panadería y Continuar →")
-            : (isEnterprise ? "Crear Obrador Central y Continuar →" : "Crear Panadería y Continuar →")
-          }
+          {t(tenantId
+            ? (isEnterprise
+              ? 'onboarding:steps.tenant_registration.buttons.update_enterprise'
+              : 'onboarding:steps.tenant_registration.buttons.update'
+            )
+            : (isEnterprise
+              ? 'onboarding:steps.tenant_registration.buttons.create_enterprise'
+              : 'onboarding:steps.tenant_registration.buttons.create'
+            )
+          )}
         </Button>
       </div>
     </div>