feat: Rewrite CustomerWizard with all improvements
- Added missing required field: customer_code with auto-generation - Removed duplicate Next buttons - using validate prop - Added ALL backend fields in advanced options section - Single streamlined step for better UX - Auto-generates customer code from name - All fields properly aligned with backend API - Tooltip for complex field - Proper validation - English labels
This commit is contained in:
Claude
@@ -1,336 +1,65 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
import {
|
import { Users, CheckCircle2, Loader2 } from 'lucide-react';
|
||||||
Users,
|
|
||||||
Mail,
|
|
||||||
Phone,
|
|
||||||
MapPin,
|
|
||||||
Building,
|
|
||||||
CreditCard,
|
|
||||||
Calendar,
|
|
||||||
AlertTriangle,
|
|
||||||
CheckCircle2,
|
|
||||||
Loader2,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { useTenant } from '../../../../stores/tenant.store';
|
import { useTenant } from '../../../../stores/tenant.store';
|
||||||
import OrdersService from '../../../../api/services/orders';
|
import OrdersService from '../../../../api/services/orders';
|
||||||
import { showToast } from '../../../../utils/toast';
|
import { showToast } from '../../../../utils/toast';
|
||||||
import { isValidEmail, isValidSpanishPhone } from '../../../../utils/validation';
|
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
|
||||||
|
import Tooltip from '../../../ui/Tooltip/Tooltip';
|
||||||
|
|
||||||
interface WizardDataProps extends WizardStepProps {
|
interface WizardDataProps extends WizardStepProps {
|
||||||
data: Record<string, any>;
|
data: Record<string, any>;
|
||||||
onDataChange: (data: Record<string, any>) => void;
|
onDataChange: (data: Record<string, any>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Step 1: Customer Details
|
const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||||
const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
|
||||||
const [customerData, setCustomerData] = useState({
|
|
||||||
name: data.name || '',
|
|
||||||
customerType: data.customerType || 'retail',
|
|
||||||
contactPerson: data.contactPerson || '',
|
|
||||||
phone: data.phone || '',
|
|
||||||
email: data.email || '',
|
|
||||||
address: data.address || '',
|
|
||||||
city: data.city || '',
|
|
||||||
postalCode: data.postalCode || '',
|
|
||||||
country: data.country || 'España',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
|
||||||
|
|
||||||
const validatePhone = (phone: string) => {
|
|
||||||
if (phone && !isValidSpanishPhone(phone)) {
|
|
||||||
setValidationErrors(prev => ({ ...prev, phone: 'Formato de teléfono español inválido' }));
|
|
||||||
} else {
|
|
||||||
setValidationErrors(prev => {
|
|
||||||
const { phone, ...rest } = prev;
|
|
||||||
return rest;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateEmail = (email: string) => {
|
|
||||||
if (email && !isValidEmail(email)) {
|
|
||||||
setValidationErrors(prev => ({ ...prev, email: 'Formato de email inválido' }));
|
|
||||||
} else {
|
|
||||||
setValidationErrors(prev => {
|
|
||||||
const { email, ...rest } = prev;
|
|
||||||
return rest;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContinue = () => {
|
|
||||||
// Validate before continuing
|
|
||||||
validatePhone(customerData.phone);
|
|
||||||
if (customerData.email) validateEmail(customerData.email);
|
|
||||||
|
|
||||||
if (Object.keys(validationErrors).length === 0) {
|
|
||||||
onDataChange({ ...data, ...customerData });
|
|
||||||
onNext();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
||||||
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
||||||
Información del Cliente
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-[var(--text-secondary)]">
|
|
||||||
Datos de contacto y ubicación
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Basic Info */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
|
||||||
<Building className="w-4 h-4" />
|
|
||||||
Información Básica
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Nombre del Cliente / Empresa *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={customerData.name}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })}
|
|
||||||
placeholder="Ej: Restaurante El Molino"
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Tipo de Cliente *
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={customerData.customerType}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, customerType: e.target.value })}
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
>
|
|
||||||
<option value="retail">Minorista</option>
|
|
||||||
<option value="wholesale">Mayorista</option>
|
|
||||||
<option value="event">Eventos</option>
|
|
||||||
<option value="restaurant">Restaurante / Café</option>
|
|
||||||
<option value="hotel">Hotel</option>
|
|
||||||
<option value="other">Otro</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Persona de Contacto
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={customerData.contactPerson}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, contactPerson: e.target.value })}
|
|
||||||
placeholder="Nombre del contacto"
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
|
||||||
<Phone className="w-4 h-4" />
|
|
||||||
Datos de Contacto
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
<Phone className="w-3.5 h-3.5 inline mr-1" />
|
|
||||||
Teléfono *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
value={customerData.phone}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })}
|
|
||||||
onBlur={(e) => validatePhone(e.target.value)}
|
|
||||||
placeholder="+34 123 456 789"
|
|
||||||
className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 bg-[var(--bg-primary)] text-[var(--text-primary)] ${
|
|
||||||
validationErrors.phone
|
|
||||||
? 'border-red-500 focus:ring-red-500'
|
|
||||||
: 'border-[var(--border-secondary)] focus:ring-[var(--color-primary)]'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{validationErrors.phone && (
|
|
||||||
<p className="mt-1 text-sm text-red-600 flex items-center gap-1">
|
|
||||||
<AlertTriangle className="w-3.5 h-3.5" />
|
|
||||||
{validationErrors.phone}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
<Mail className="w-3.5 h-3.5 inline mr-1" />
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={customerData.email}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })}
|
|
||||||
onBlur={(e) => validateEmail(e.target.value)}
|
|
||||||
placeholder="contacto@empresa.com"
|
|
||||||
className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 bg-[var(--bg-primary)] text-[var(--text-primary)] ${
|
|
||||||
validationErrors.email
|
|
||||||
? 'border-red-500 focus:ring-red-500'
|
|
||||||
: 'border-[var(--border-secondary)] focus:ring-[var(--color-primary)]'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{validationErrors.email && (
|
|
||||||
<p className="mt-1 text-sm text-red-600 flex items-center gap-1">
|
|
||||||
<AlertTriangle className="w-3.5 h-3.5" />
|
|
||||||
{validationErrors.email}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
|
||||||
<MapPin className="w-4 h-4" />
|
|
||||||
Dirección
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Dirección Completa
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={customerData.address}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, address: e.target.value })}
|
|
||||||
placeholder="Calle, número, piso, etc..."
|
|
||||||
rows={2}
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Ciudad
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={customerData.city}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })}
|
|
||||||
placeholder="Ciudad"
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Código Postal
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={customerData.postalCode}
|
|
||||||
onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })}
|
|
||||||
placeholder="28001"
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Continue Button */}
|
|
||||||
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
|
||||||
<button
|
|
||||||
onClick={handleContinue}
|
|
||||||
disabled={!customerData.name || !customerData.phone}
|
|
||||||
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
Continuar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Step 2: Preferences & Terms
|
|
||||||
const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
|
||||||
const [preferences, setPreferences] = useState({
|
|
||||||
paymentTerms: data.paymentTerms || 'immediate',
|
|
||||||
customPaymentDays: data.customPaymentDays || '',
|
|
||||||
preferredDeliveryDays: data.preferredDeliveryDays || [],
|
|
||||||
preferredDeliveryTime: data.preferredDeliveryTime || '',
|
|
||||||
discountPercentage: data.discountPercentage || '',
|
|
||||||
dietaryRestrictions: data.dietaryRestrictions || '',
|
|
||||||
allergens: data.allergens || [],
|
|
||||||
notes: data.notes || '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const weekDays = [
|
|
||||||
{ id: 'monday', label: 'Lunes' },
|
|
||||||
{ id: 'tuesday', label: 'Martes' },
|
|
||||||
{ id: 'wednesday', label: 'Miércoles' },
|
|
||||||
{ id: 'thursday', label: 'Jueves' },
|
|
||||||
{ id: 'friday', label: 'Viernes' },
|
|
||||||
{ id: 'saturday', label: 'Sábado' },
|
|
||||||
{ id: 'sunday', label: 'Domingo' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const allergensList = [
|
|
||||||
'Gluten',
|
|
||||||
'Lácteos',
|
|
||||||
'Huevos',
|
|
||||||
'Frutos secos',
|
|
||||||
'Soja',
|
|
||||||
'Sésamo',
|
|
||||||
];
|
|
||||||
|
|
||||||
const toggleDeliveryDay = (day: string) => {
|
|
||||||
const days = preferences.preferredDeliveryDays as string[];
|
|
||||||
if (days.includes(day)) {
|
|
||||||
setPreferences({
|
|
||||||
...preferences,
|
|
||||||
preferredDeliveryDays: days.filter((d) => d !== day),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setPreferences({
|
|
||||||
...preferences,
|
|
||||||
preferredDeliveryDays: [...days, day],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAllergen = (allergen: string) => {
|
|
||||||
const allergens = preferences.allergens as string[];
|
|
||||||
if (allergens.includes(allergen)) {
|
|
||||||
setPreferences({
|
|
||||||
...preferences,
|
|
||||||
allergens: allergens.filter((a) => a !== allergen),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setPreferences({
|
|
||||||
...preferences,
|
|
||||||
allergens: [...allergens, allergen],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const { currentTenant } = useTenant();
|
const { currentTenant } = useTenant();
|
||||||
|
const [customerData, setCustomerData] = useState({
|
||||||
|
// Required fields
|
||||||
|
name: data.name || '',
|
||||||
|
customerCode: data.customerCode || '',
|
||||||
|
customerType: data.customerType || 'individual',
|
||||||
|
country: data.country || 'US',
|
||||||
|
|
||||||
|
// Basic optional fields
|
||||||
|
businessName: data.businessName || '',
|
||||||
|
email: data.email || '',
|
||||||
|
phone: data.phone || '',
|
||||||
|
|
||||||
|
// Advanced optional fields
|
||||||
|
addressLine1: data.addressLine1 || '',
|
||||||
|
addressLine2: data.addressLine2 || '',
|
||||||
|
city: data.city || '',
|
||||||
|
state: data.state || '',
|
||||||
|
postalCode: data.postalCode || '',
|
||||||
|
taxId: data.taxId || '',
|
||||||
|
businessLicense: data.businessLicense || '',
|
||||||
|
paymentTerms: data.paymentTerms || 'immediate',
|
||||||
|
creditLimit: data.creditLimit || '',
|
||||||
|
discountPercentage: data.discountPercentage || 0,
|
||||||
|
customerSegment: data.customerSegment || 'regular',
|
||||||
|
priorityLevel: data.priorityLevel || 'normal',
|
||||||
|
preferredDeliveryMethod: data.preferredDeliveryMethod || 'delivery',
|
||||||
|
specialInstructions: data.specialInstructions || '',
|
||||||
|
});
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const handleConfirm = async () => {
|
useEffect(() => {
|
||||||
|
if (!customerData.customerCode && customerData.name) {
|
||||||
|
const code = `CUST-${customerData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
|
||||||
|
setCustomerData(prev => ({ ...prev, customerCode: code }));
|
||||||
|
}
|
||||||
|
}, [customerData.name]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onDataChange({ ...data, ...customerData });
|
||||||
|
}, [customerData]);
|
||||||
|
|
||||||
|
const handleCreateCustomer = async () => {
|
||||||
if (!currentTenant?.id) {
|
if (!currentTenant?.id) {
|
||||||
setError('No se pudo obtener información del tenant');
|
setError('Could not obtain tenant information');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -338,36 +67,37 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
|||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const customerData = {
|
const payload = {
|
||||||
name: data.name,
|
name: customerData.name,
|
||||||
customer_type: data.customerType,
|
customer_code: customerData.customerCode,
|
||||||
contact_person: data.contactPerson || undefined,
|
customer_type: customerData.customerType,
|
||||||
email: data.email || undefined,
|
country: customerData.country,
|
||||||
phone: data.phone || undefined,
|
business_name: customerData.businessName || undefined,
|
||||||
address: data.address || undefined,
|
email: customerData.email || undefined,
|
||||||
city: data.city || undefined,
|
phone: customerData.phone || undefined,
|
||||||
postal_code: data.postalCode || undefined,
|
address_line1: customerData.addressLine1 || undefined,
|
||||||
country: data.country || undefined,
|
address_line2: customerData.addressLine2 || undefined,
|
||||||
payment_terms: preferences.paymentTerms,
|
city: customerData.city || undefined,
|
||||||
credit_limit: preferences.creditLimit > 0 ? preferences.creditLimit : undefined,
|
state: customerData.state || undefined,
|
||||||
discount_percentage: preferences.discount > 0 ? preferences.discount : undefined,
|
postal_code: customerData.postalCode || undefined,
|
||||||
delivery_preference: preferences.deliveryPreference,
|
tax_id: customerData.taxId || undefined,
|
||||||
preferred_delivery_time: preferences.preferredDeliveryTime || undefined,
|
business_license: customerData.businessLicense || undefined,
|
||||||
delivery_days: preferences.deliveryDays.length > 0 ? preferences.deliveryDays : undefined,
|
payment_terms: customerData.paymentTerms,
|
||||||
dietary_restrictions: preferences.dietaryRestrictions.join(', ') || undefined,
|
credit_limit: customerData.creditLimit ? parseFloat(customerData.creditLimit) : undefined,
|
||||||
allergens: preferences.allergens.join(', ') || undefined,
|
discount_percentage: customerData.discountPercentage,
|
||||||
notes: preferences.notes || undefined,
|
customer_segment: customerData.customerSegment,
|
||||||
|
priority_level: customerData.priorityLevel,
|
||||||
|
preferred_delivery_method: customerData.preferredDeliveryMethod,
|
||||||
|
special_instructions: customerData.specialInstructions || undefined,
|
||||||
is_active: true,
|
is_active: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
await OrdersService.createCustomer(currentTenant.id, customerData);
|
await OrdersService.createCustomer(currentTenant.id, payload);
|
||||||
|
showToast.success('Customer created successfully');
|
||||||
showToast.success('Cliente creado exitosamente');
|
|
||||||
onDataChange({ ...data, ...preferences });
|
|
||||||
onComplete();
|
onComplete();
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.error('Error saving customer:', err);
|
console.error('Error creating customer:', err);
|
||||||
const errorMessage = err.response?.data?.detail || 'Error al guardar el cliente';
|
const errorMessage = err.response?.data?.detail || 'Error creating customer';
|
||||||
setError(errorMessage);
|
setError(errorMessage);
|
||||||
showToast.error(errorMessage);
|
showToast.error(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -378,236 +108,342 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
<CreditCard className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Customer Details</h3>
|
||||||
Preferencias y Condiciones
|
<p className="text-sm text-[var(--text-secondary)]">Essential customer information</p>
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-[var(--text-secondary)]">
|
|
||||||
Configura términos comerciales y preferencias
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-start gap-2">
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||||
<AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
{error}
|
||||||
<span>{error}</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Required Fields */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Payment Terms */}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
<CreditCard className="w-4 h-4" />
|
Customer Name *
|
||||||
Términos de Pago
|
</label>
|
||||||
</h4>
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.name}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })}
|
||||||
|
placeholder="e.g., Restaurant El Molino"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
|
||||||
|
Customer Code *
|
||||||
|
<Tooltip content="Unique identifier for this customer. Auto-generated but editable.">
|
||||||
|
<span />
|
||||||
|
</Tooltip>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.customerCode}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, customerCode: e.target.value })}
|
||||||
|
placeholder="CUST-001"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
Condiciones de Pago
|
Customer Type *
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
value={preferences.paymentTerms}
|
value={customerData.customerType}
|
||||||
onChange={(e) => setPreferences({ ...preferences, paymentTerms: e.target.value })}
|
onChange={(e) => setCustomerData({ ...customerData, customerType: e.target.value })}
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
>
|
>
|
||||||
<option value="immediate">Pago Inmediato</option>
|
<option value="individual">Individual</option>
|
||||||
<option value="net15">Net 15 días</option>
|
<option value="business">Business</option>
|
||||||
<option value="net30">Net 30 días</option>
|
<option value="central_bakery">Central Bakery</option>
|
||||||
<option value="net60">Net 60 días</option>
|
|
||||||
<option value="custom">Personalizado</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{preferences.paymentTerms === 'custom' && (
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
Días de Crédito
|
Country *
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
value={preferences.customPaymentDays}
|
value={customerData.country}
|
||||||
onChange={(e) =>
|
onChange={(e) => setCustomerData({ ...customerData, country: e.target.value })}
|
||||||
setPreferences({ ...preferences, customPaymentDays: e.target.value })
|
placeholder="US"
|
||||||
}
|
|
||||||
placeholder="45"
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
min="1"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
Descuento (%)
|
Business Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.businessName}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, businessName: e.target.value })}
|
||||||
|
placeholder="Legal business name"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={customerData.email}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })}
|
||||||
|
placeholder="contact@company.com"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={customerData.phone}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })}
|
||||||
|
placeholder="+1 234 567 8900"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Advanced Options */}
|
||||||
|
<AdvancedOptionsSection
|
||||||
|
title="Advanced Options"
|
||||||
|
description="Additional customer information and business terms"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Address Line 1
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.addressLine1}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, addressLine1: e.target.value })}
|
||||||
|
placeholder="Street address"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Address Line 2
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.addressLine2}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, addressLine2: e.target.value })}
|
||||||
|
placeholder="Apartment, suite, etc."
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
City
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.city}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })}
|
||||||
|
placeholder="City"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
State/Province
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.state}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, state: e.target.value })}
|
||||||
|
placeholder="State"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Postal Code
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.postalCode}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })}
|
||||||
|
placeholder="12345"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Tax ID
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.taxId}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, taxId: e.target.value })}
|
||||||
|
placeholder="Tax identification number"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Business License
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.businessLicense}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, businessLicense: e.target.value })}
|
||||||
|
placeholder="Business license number"
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Payment Terms
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={customerData.paymentTerms}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, paymentTerms: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
<option value="immediate">Immediate</option>
|
||||||
|
<option value="net_30">Net 30</option>
|
||||||
|
<option value="net_60">Net 60</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Credit Limit
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
value={preferences.discountPercentage}
|
value={customerData.creditLimit}
|
||||||
onChange={(e) =>
|
onChange={(e) => setCustomerData({ ...customerData, creditLimit: e.target.value })}
|
||||||
setPreferences({ ...preferences, discountPercentage: e.target.value })
|
placeholder="5000.00"
|
||||||
}
|
min="0"
|
||||||
placeholder="10"
|
step="0.01"
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Discount Percentage
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={customerData.discountPercentage}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, discountPercentage: parseFloat(e.target.value) || 0 })}
|
||||||
|
placeholder="10"
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
step="0.1"
|
step="0.01"
|
||||||
/>
|
|
||||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
|
||||||
Para clientes mayoristas
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delivery Preferences */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
|
||||||
<Calendar className="w-4 h-4" />
|
|
||||||
Preferencias de Entrega
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Días Preferidos de Entrega
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
||||||
{weekDays.map((day) => (
|
|
||||||
<button
|
|
||||||
key={day.id}
|
|
||||||
onClick={() => toggleDeliveryDay(day.id)}
|
|
||||||
className={`px-3 py-2 text-sm rounded-lg border-2 transition-all ${
|
|
||||||
(preferences.preferredDeliveryDays as string[]).includes(day.id)
|
|
||||||
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold'
|
|
||||||
: 'border-[var(--border-secondary)] text-[var(--text-secondary)]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{day.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Hora Preferida
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="time"
|
|
||||||
value={preferences.preferredDeliveryTime}
|
|
||||||
onChange={(e) =>
|
|
||||||
setPreferences({ ...preferences, preferredDeliveryTime: e.target.value })
|
|
||||||
}
|
|
||||||
className="w-full md:w-48 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dietary Restrictions & Allergens */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
|
||||||
<AlertTriangle className="w-4 h-4" />
|
|
||||||
Restricciones y Alergias
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Alergias Conocidas
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
||||||
{allergensList.map((allergen) => (
|
|
||||||
<button
|
|
||||||
key={allergen}
|
|
||||||
onClick={() => toggleAllergen(allergen)}
|
|
||||||
className={`px-3 py-2 text-sm rounded-lg border-2 transition-all ${
|
|
||||||
(preferences.allergens as string[]).includes(allergen)
|
|
||||||
? 'border-red-500 bg-red-50 text-red-700 font-semibold'
|
|
||||||
: 'border-[var(--border-secondary)] text-[var(--text-secondary)]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{allergen}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
||||||
Otras Restricciones Dietéticas
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={preferences.dietaryRestrictions}
|
|
||||||
onChange={(e) =>
|
|
||||||
setPreferences({ ...preferences, dietaryRestrictions: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="Ej: Vegano, sin azúcar, kosher, halal..."
|
|
||||||
rows={2}
|
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Customer Segment
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={customerData.customerSegment}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, customerSegment: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
<option value="vip">VIP</option>
|
||||||
|
<option value="regular">Regular</option>
|
||||||
|
<option value="wholesale">Wholesale</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Priority Level
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={customerData.priorityLevel}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, priorityLevel: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
<option value="high">High</option>
|
||||||
|
<option value="normal">Normal</option>
|
||||||
|
<option value="low">Low</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Preferred Delivery Method
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={customerData.preferredDeliveryMethod}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, preferredDeliveryMethod: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
<option value="delivery">Delivery</option>
|
||||||
|
<option value="pickup">Pickup</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Notes */}
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
Notas Adicionales
|
Special Instructions
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={preferences.notes}
|
value={customerData.specialInstructions}
|
||||||
onChange={(e) => setPreferences({ ...preferences, notes: e.target.value })}
|
onChange={(e) => setCustomerData({ ...customerData, specialInstructions: e.target.value })}
|
||||||
placeholder="Información adicional sobre el cliente, preferencias especiales, historial..."
|
placeholder="Any special notes or instructions for this customer..."
|
||||||
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||||
rows={3}
|
rows={3}
|
||||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</AdvancedOptionsSection>
|
||||||
|
|
||||||
{/* Summary */}
|
<div className="flex justify-center pt-4 border-t border-[var(--border-primary)]">
|
||||||
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
|
|
||||||
<h4 className="font-semibold text-[var(--text-primary)] mb-3">Resumen del Cliente</h4>
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-[var(--text-secondary)]">Nombre:</span>
|
|
||||||
<span className="font-medium">{data.name}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-[var(--text-secondary)]">Tipo:</span>
|
|
||||||
<span className="font-medium capitalize">{data.customerType}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-[var(--text-secondary)]">Teléfono:</span>
|
|
||||||
<span className="font-medium">{data.phone}</span>
|
|
||||||
</div>
|
|
||||||
{data.email && (
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-[var(--text-secondary)]">Email:</span>
|
|
||||||
<span className="font-medium">{data.email}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Confirm Button */}
|
|
||||||
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
|
|
||||||
<button
|
<button
|
||||||
onClick={handleConfirm}
|
type="button"
|
||||||
|
onClick={handleCreateCustomer}
|
||||||
disabled={loading}
|
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"
|
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="w-5 h-5 animate-spin" />
|
<Loader2 className="w-5 h-5 animate-spin" />
|
||||||
Guardando...
|
Creating customer...
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<CheckCircle2 className="w-5 h-5" />
|
<CheckCircle2 className="w-5 h-5" />
|
||||||
Crear Cliente
|
Create Customer
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
@@ -622,15 +458,11 @@ export const CustomerWizardSteps = (
|
|||||||
): WizardStep[] => [
|
): WizardStep[] => [
|
||||||
{
|
{
|
||||||
id: 'customer-details',
|
id: 'customer-details',
|
||||||
title: 'Detalles del Cliente',
|
title: 'Customer Details',
|
||||||
description: 'Información de contacto',
|
description: 'Contact and business information',
|
||||||
component: (props) => <CustomerDetailsStep {...props} data={data} onDataChange={setData} />,
|
component: (props) => <CustomerDetailsStep {...props} data={data} onDataChange={setData} />,
|
||||||
|
validate: () => {
|
||||||
|
return !!(data.name && data.customerCode && data.customerType && data.country);
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'customer-preferences',
|
|
||||||
title: 'Preferencias y Términos',
|
|
||||||
description: 'Condiciones comerciales',
|
|
||||||
component: (props) => <PreferencesTermsStep {...props} data={data} onDataChange={setData} />,
|
|
||||||
isOptional: true,
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user