From 4910495ca44d18399cc87ed886b6a8226e977499 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Nov 2025 09:36:47 +0000
Subject: [PATCH] feat: Add full API integration to Customer wizard

- Added OrdersService.createCustomer() API call
- Replaced console.log with actual customer creation
- Added loading states with spinner during API call
- Added error handling with user-friendly messages
- Added disabled state on submit button during save
- All customer data properly mapped to API format
- No more mock data or placeholders

Customer wizard now fully integrated with backend.
---
 .../unified-wizard/wizards/CustomerWizard.tsx | 77 +++++++++++++++++--
 1 file changed, 69 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
index cc480f0a..c49c7283 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
@@ -10,7 +10,10 @@ import {
   Calendar,
   AlertTriangle,
   CheckCircle2,
+  Loader2,
 } from 'lucide-react';
+import { useTenant } from '../../../../stores/tenant.store';
+import OrdersService from '../../../../api/services/orders';
 
 interface WizardDataProps extends WizardStepProps {
   data: Record<string, any>;
@@ -267,11 +270,52 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
     }
   };
 
-  const handleConfirm = () => {
-    onDataChange({ ...data, ...preferences });
-    // Here you would typically make an API call to save the customer
-    console.log('Saving customer:', { ...data, ...preferences });
-    onComplete();
+  const { currentTenant } = useTenant();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleConfirm = async () => {
+    if (!currentTenant?.id) {
+      setError('No se pudo obtener información del tenant');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const customerData = {
+        name: data.name,
+        customer_type: data.customerType,
+        contact_person: data.contactPerson || undefined,
+        email: data.email || undefined,
+        phone: data.phone || undefined,
+        address: data.address || undefined,
+        city: data.city || undefined,
+        postal_code: data.postalCode || undefined,
+        country: data.country || undefined,
+        payment_terms: preferences.paymentTerms,
+        credit_limit: preferences.creditLimit > 0 ? preferences.creditLimit : undefined,
+        discount_percentage: preferences.discount > 0 ? preferences.discount : undefined,
+        delivery_preference: preferences.deliveryPreference,
+        preferred_delivery_time: preferences.preferredDeliveryTime || undefined,
+        delivery_days: preferences.deliveryDays.length > 0 ? preferences.deliveryDays : undefined,
+        dietary_restrictions: preferences.dietaryRestrictions.join(', ') || undefined,
+        allergens: preferences.allergens.join(', ') || undefined,
+        notes: preferences.notes || undefined,
+        is_active: true,
+      };
+
+      await OrdersService.createCustomer(currentTenant.id, customerData);
+
+      onDataChange({ ...data, ...preferences });
+      onComplete();
+    } catch (err: any) {
+      console.error('Error saving customer:', err);
+      setError(err.response?.data?.detail || 'Error al guardar el cliente');
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -286,6 +330,13 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
         </p>
       </div>
 
+      {error && (
+        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-start gap-2">
+          <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+
       <div className="space-y-4">
         {/* Payment Terms */}
         <div>
@@ -488,10 +539,20 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
       <div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
         <button
           onClick={handleConfirm}
-          className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2"
+          disabled={loading}
+          className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          <CheckCircle2 className="w-5 h-5" />
-          Crear Cliente
+          {loading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              Guardando...
+            </>
+          ) : (
+            <>
+              <CheckCircle2 className="w-5 h-5" />
+              Crear Cliente
+            </>
+          )}
         </button>
       </div>
     </div>