Add POI feature and imporve the overall backend implementation

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

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Button } from '../../../ui/Button';
-import { Input } from '../../../ui/Input';
+import React, { useState } from 'react';
+import { Button, Input } from '../../../ui';
+import { AddressAutocomplete } from '../../../ui/AddressAutocomplete';
 import { useRegisterBakery } from '../../../../api/hooks/tenant';
 import { BakeryRegistration } from '../../../../api/types/tenant';
-import { nominatimService, NominatimResult } from '../../../../api/services/nominatim';
-import { debounce } from 'lodash';
+import { AddressResult } from '../../../../services/api/geocodingApi';
+import { useWizardContext } from '../context';
 
 interface RegisterTenantStepProps {
   onNext: () => void;
@@ -18,6 +18,7 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
   onComplete,
   isFirstStep
 }) => {
+  const wizardContext = useWizardContext();
   const [formData, setFormData] = useState<BakeryRegistration>({
     name: '',
     address: '',
@@ -29,51 +30,14 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
   });
 
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const [addressSuggestions, setAddressSuggestions] = useState<NominatimResult[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [isSearching, setIsSearching] = useState(false);
   const registerBakery = useRegisterBakery();
 
-  // Debounced address search
-  const searchAddress = useCallback(
-    debounce(async (query: string) => {
-      if (query.length < 3) {
-        setAddressSuggestions([]);
-        return;
-      }
-
-      setIsSearching(true);
-      try {
-        const results = await nominatimService.searchAddress(query);
-        setAddressSuggestions(results);
-        setShowSuggestions(true);
-      } catch (error) {
-        console.error('Address search failed:', error);
-      } finally {
-        setIsSearching(false);
-      }
-    }, 500),
-    []
-  );
-
-  // Cleanup debounce on unmount
-  useEffect(() => {
-    return () => {
-      searchAddress.cancel();
-    };
-  }, [searchAddress]);
-
   const handleInputChange = (field: keyof BakeryRegistration, value: string) => {
     setFormData(prev => ({
       ...prev,
       [field]: value
     }));
 
-    // Trigger address search when address field changes
-    if (field === 'address') {
-      searchAddress(value);
-    }
-
     if (errors[field]) {
       setErrors(prev => ({
         ...prev,
@@ -82,18 +46,20 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
     }
   };
 
-  const handleAddressSelect = (result: NominatimResult) => {
-    const parsed = nominatimService.parseAddress(result);
-
+  const handleAddressSelect = (address: AddressResult) => {
     setFormData(prev => ({
       ...prev,
-      address: parsed.street,
-      city: parsed.city,
-      postal_code: parsed.postalCode,
+      address: address.display_name,
+      city: address.address.city || address.address.municipality || address.address.suburb || prev.city,
+      postal_code: address.address.postcode || prev.postal_code,
     }));
+  };
 
-    setShowSuggestions(false);
-    setAddressSuggestions([]);
+  const handleCoordinatesChange = (lat: number, lon: number) => {
+    // Store coordinates in the wizard context immediately
+    // This allows the POI detection step to access location information when it's available
+    wizardContext.updateLocation({ latitude: lat, longitude: lon });
+    console.log('Coordinates captured and stored:', { latitude: lat, longitude: lon });
   };
 
   const validateForm = () => {
@@ -145,7 +111,14 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
 
     try {
       const tenant = await registerBakery.mutateAsync(formData);
-      onComplete({ tenant });
+
+      // Update the wizard context with tenant info and pass the bakeryLocation coordinates
+      // that were captured during address selection to the next step (POI Detection)
+      onComplete({
+        tenant,
+        tenantId: tenant.id,
+        bakeryLocation: wizardContext.state.bakeryLocation
+      });
     } catch (error) {
       console.error('Error registering bakery:', error);
       setErrors({ submit: 'Error al registrar la panadería. Por favor, inténtalo de nuevo.' });
@@ -174,41 +147,24 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
           isRequired
         />
 
-        <div className="md:col-span-2 relative">
-          <Input
-            label="Dirección"
-            placeholder="Calle Principal 123, Madrid"
+        <div className="md:col-span-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Dirección <span className="text-red-500">*</span>
+          </label>
+          <AddressAutocomplete
             value={formData.address}
-            onChange={(e) => handleInputChange('address', e.target.value)}
-            onFocus={() => {
-              if (addressSuggestions.length > 0) {
-                setShowSuggestions(true);
-              }
+            placeholder="Enter bakery address..."
+            onAddressSelect={(address) => {
+              console.log('Selected:', address.display_name);
+              handleAddressSelect(address);
             }}
-            onBlur={() => {
-              setTimeout(() => setShowSuggestions(false), 200);
-            }}
-            error={errors.address}
-            isRequired
+            onCoordinatesChange={handleCoordinatesChange}
+            countryCode="es"
+            required
           />
-          {isSearching && (
-            <div className="absolute right-3 top-10 text-gray-400">
-              Buscando...
-            </div>
-          )}
-          {showSuggestions && addressSuggestions.length > 0 && (
-            <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-              {addressSuggestions.map((result) => (
-                <div
-                  key={result.place_id}
-                  className="px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0"
-                  onClick={() => handleAddressSelect(result)}
-                >
-                  <div className="text-sm font-medium text-gray-900">
-                    {nominatimService.formatAddress(result)}
-                  </div>
-                </div>
-              ))}
+          {errors.address && (
+            <div className="mt-1 text-sm text-red-600">
+              {errors.address}
             </div>
           )}
         </div>