404 lines
13 KiB
Plaintext
404 lines
13 KiB
Plaintext
import React from 'react';
|
||
import { Input, Select, Badge } from '../../ui';
|
||
import type { OnboardingStepProps } from './OnboardingWizard';
|
||
|
||
interface CompanyInfo {
|
||
name: string;
|
||
type: 'artisan' | 'industrial' | 'chain' | 'mixed';
|
||
size: 'small' | 'medium' | 'large';
|
||
locations: number;
|
||
specialties: string[];
|
||
address: {
|
||
street: string;
|
||
city: string;
|
||
state: string;
|
||
postal_code: string;
|
||
country: string;
|
||
};
|
||
contact: {
|
||
phone: string;
|
||
email: string;
|
||
website?: string;
|
||
};
|
||
established_year?: number;
|
||
tax_id?: string;
|
||
}
|
||
|
||
const BAKERY_TYPES = [
|
||
{ value: 'artisan', label: 'Artesanal', description: 'Producción tradicional y manual' },
|
||
{ value: 'industrial', label: 'Industrial', description: 'Producción automatizada a gran escala' },
|
||
{ value: 'chain', label: 'Cadena', description: 'Múltiples ubicaciones con procesos estandarizados' },
|
||
{ value: 'mixed', label: 'Mixta', description: 'Combinación de métodos artesanales e industriales' },
|
||
];
|
||
|
||
const BAKERY_SIZES = [
|
||
{ value: 'small', label: 'Pequeña', description: '1-10 empleados' },
|
||
{ value: 'medium', label: 'Mediana', description: '11-50 empleados' },
|
||
{ value: 'large', label: 'Grande', description: '50+ empleados' },
|
||
];
|
||
|
||
const COMMON_SPECIALTIES = [
|
||
'Pan tradicional',
|
||
'Bollería',
|
||
'Repostería',
|
||
'Pan integral',
|
||
'Pasteles',
|
||
'Productos sin gluten',
|
||
'Productos veganos',
|
||
'Pan artesanal',
|
||
'Productos de temporada',
|
||
'Catering',
|
||
];
|
||
|
||
export const CompanyInfoStep: React.FC<OnboardingStepProps> = ({
|
||
data,
|
||
onDataChange,
|
||
}) => {
|
||
const companyData: CompanyInfo = {
|
||
name: '',
|
||
type: 'artisan',
|
||
size: 'small',
|
||
locations: 1,
|
||
specialties: [],
|
||
address: {
|
||
street: '',
|
||
city: '',
|
||
state: '',
|
||
postal_code: '',
|
||
country: 'España',
|
||
},
|
||
contact: {
|
||
phone: '',
|
||
email: '',
|
||
website: '',
|
||
},
|
||
...data,
|
||
};
|
||
|
||
const handleInputChange = (field: string, value: any) => {
|
||
onDataChange({
|
||
...companyData,
|
||
[field]: value,
|
||
});
|
||
};
|
||
|
||
const handleAddressChange = (field: string, value: string) => {
|
||
onDataChange({
|
||
...companyData,
|
||
address: {
|
||
...companyData.address,
|
||
[field]: value,
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleContactChange = (field: string, value: string) => {
|
||
onDataChange({
|
||
...companyData,
|
||
contact: {
|
||
...companyData.contact,
|
||
[field]: value,
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleSpecialtyToggle = (specialty: string) => {
|
||
const currentSpecialties = companyData.specialties || [];
|
||
const updatedSpecialties = currentSpecialties.includes(specialty)
|
||
? currentSpecialties.filter(s => s !== specialty)
|
||
: [...currentSpecialties, specialty];
|
||
|
||
handleInputChange('specialties', updatedSpecialties);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
{/* Basic Information */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
||
Información básica
|
||
</h3>
|
||
|
||
<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-gray-700 mb-1">
|
||
Nombre de la panadería *
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.name}
|
||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||
placeholder="Ej: Panadería San Miguel"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Tipo de panadería *
|
||
</label>
|
||
<Select
|
||
value={companyData.type}
|
||
onChange={(e) => handleInputChange('type', e.target.value)}
|
||
className="w-full"
|
||
>
|
||
{BAKERY_TYPES.map((type) => (
|
||
<option key={type.value} value={type.value}>
|
||
{type.label} - {type.description}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Tamaño de la empresa *
|
||
</label>
|
||
<Select
|
||
value={companyData.size}
|
||
onChange={(e) => handleInputChange('size', e.target.value)}
|
||
className="w-full"
|
||
>
|
||
{BAKERY_SIZES.map((size) => (
|
||
<option key={size.value} value={size.value}>
|
||
{size.label} - {size.description}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Número de ubicaciones
|
||
</label>
|
||
<Input
|
||
type="number"
|
||
min="1"
|
||
value={companyData.locations}
|
||
onChange={(e) => handleInputChange('locations', parseInt(e.target.value) || 1)}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Año de fundación
|
||
</label>
|
||
<Input
|
||
type="number"
|
||
min="1900"
|
||
max={new Date().getFullYear()}
|
||
value={companyData.established_year || ''}
|
||
onChange={(e) => handleInputChange('established_year', parseInt(e.target.value) || undefined)}
|
||
placeholder="Ej: 1995"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
NIF/CIF
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.tax_id || ''}
|
||
onChange={(e) => handleInputChange('tax_id', e.target.value)}
|
||
placeholder="Ej: B12345678"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Specialties */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
||
Especialidades
|
||
</h3>
|
||
<p className="text-sm text-gray-600">
|
||
Selecciona los productos que produces habitualmente
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||
{COMMON_SPECIALTIES.map((specialty) => (
|
||
<button
|
||
key={specialty}
|
||
onClick={() => handleSpecialtyToggle(specialty)}
|
||
className={`p-3 text-left border rounded-lg transition-colors ${
|
||
companyData.specialties?.includes(specialty)
|
||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<span className="text-sm font-medium">{specialty}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{companyData.specialties && companyData.specialties.length > 0 && (
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-700 mb-2">
|
||
Especialidades seleccionadas:
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{companyData.specialties.map((specialty) => (
|
||
<Badge key={specialty} className="bg-blue-100 text-blue-800">
|
||
{specialty}
|
||
<button
|
||
onClick={() => handleSpecialtyToggle(specialty)}
|
||
className="ml-1 text-blue-600 hover:text-blue-800"
|
||
>
|
||
×
|
||
</button>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Address */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
||
Dirección principal
|
||
</h3>
|
||
|
||
<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-gray-700 mb-1">
|
||
Dirección *
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.address.street}
|
||
onChange={(e) => handleAddressChange('street', e.target.value)}
|
||
placeholder="Calle, número, piso, puerta"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Ciudad *
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.address.city}
|
||
onChange={(e) => handleAddressChange('city', e.target.value)}
|
||
placeholder="Ej: Madrid"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Provincia/Estado *
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.address.state}
|
||
onChange={(e) => handleAddressChange('state', e.target.value)}
|
||
placeholder="Ej: Madrid"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Código postal *
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={companyData.address.postal_code}
|
||
onChange={(e) => handleAddressChange('postal_code', e.target.value)}
|
||
placeholder="Ej: 28001"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
País *
|
||
</label>
|
||
<Select
|
||
value={companyData.address.country}
|
||
onChange={(e) => handleAddressChange('country', e.target.value)}
|
||
className="w-full"
|
||
>
|
||
<option value="España">España</option>
|
||
<option value="Francia">Francia</option>
|
||
<option value="Portugal">Portugal</option>
|
||
<option value="Italia">Italia</option>
|
||
<option value="México">México</option>
|
||
<option value="Argentina">Argentina</option>
|
||
<option value="Colombia">Colombia</option>
|
||
<option value="Otro">Otro</option>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Information */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
||
Información de contacto
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Teléfono *
|
||
</label>
|
||
<Input
|
||
type="tel"
|
||
value={companyData.contact.phone}
|
||
onChange={(e) => handleContactChange('phone', e.target.value)}
|
||
placeholder="Ej: +34 911 234 567"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Email de contacto *
|
||
</label>
|
||
<Input
|
||
type="email"
|
||
value={companyData.contact.email}
|
||
onChange={(e) => handleContactChange('email', e.target.value)}
|
||
placeholder="contacto@panaderia.com"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Sitio web (opcional)
|
||
</label>
|
||
<Input
|
||
type="url"
|
||
value={companyData.contact.website || ''}
|
||
onChange={(e) => handleContactChange('website', e.target.value)}
|
||
placeholder="https://www.panaderia.com"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary */}
|
||
<div className="bg-gray-50 p-4 rounded-lg">
|
||
<h4 className="font-medium text-gray-900 mb-2">Resumen</h4>
|
||
<div className="text-sm text-gray-600 space-y-1">
|
||
<p><strong>Panadería:</strong> {companyData.name || 'Sin especificar'}</p>
|
||
<p><strong>Tipo:</strong> {BAKERY_TYPES.find(t => t.value === companyData.type)?.label}</p>
|
||
<p><strong>Tamaño:</strong> {BAKERY_SIZES.find(s => s.value === companyData.size)?.label}</p>
|
||
<p><strong>Especialidades:</strong> {companyData.specialties?.length || 0} seleccionadas</p>
|
||
<p><strong>Ubicaciones:</strong> {companyData.locations}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CompanyInfoStep; |