Start integrating the onboarding flow with backend 1
This commit is contained in:
Urtzi Alfaro
@@ -1,5 +1,9 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Card, Button, Input, Select, Badge } from '../../ui';
|
||||
import { tenantService } from '../../../services/api/tenant.service';
|
||||
import { useAuthUser } from '../../../stores/auth.store';
|
||||
import { useTenantActions } from '../../../stores/tenant.store';
|
||||
|
||||
|
||||
export interface OnboardingStep {
|
||||
id: string;
|
||||
@@ -37,6 +41,7 @@ export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
|
||||
const [stepData, setStepData] = useState<Record<string, any>>({});
|
||||
const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
|
||||
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
||||
const { setCurrentTenant } = useTenantActions();
|
||||
|
||||
const currentStep = steps[currentStepIndex];
|
||||
|
||||
@@ -80,41 +85,55 @@ export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
|
||||
const data = stepData[currentStep.id] || {};
|
||||
|
||||
if (!data.bakery?.tenant_id) {
|
||||
// Create tenant inline
|
||||
// Create tenant inline using real backend API
|
||||
updateStepData(currentStep.id, {
|
||||
...data,
|
||||
bakery: { ...data.bakery, isCreating: true }
|
||||
});
|
||||
|
||||
try {
|
||||
const mockTenantService = {
|
||||
createTenant: async (formData: any) => {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
return {
|
||||
tenant_id: `tenant_${Date.now()}`,
|
||||
name: formData.name,
|
||||
...formData
|
||||
};
|
||||
}
|
||||
// Use the backend-compatible data directly from BakerySetupStep
|
||||
const bakeryRegistration = {
|
||||
name: data.bakery.name,
|
||||
address: data.bakery.address,
|
||||
city: data.bakery.city,
|
||||
postal_code: data.bakery.postal_code,
|
||||
phone: data.bakery.phone,
|
||||
business_type: data.bakery.business_type,
|
||||
business_model: data.bakery.business_model
|
||||
};
|
||||
|
||||
const tenantData = await mockTenantService.createTenant(data.bakery);
|
||||
const response = await tenantService.createTenant(bakeryRegistration);
|
||||
|
||||
updateStepData(currentStep.id, {
|
||||
...data,
|
||||
bakery: {
|
||||
...data.bakery,
|
||||
tenant_id: tenantData.tenant_id,
|
||||
created_at: new Date().toISOString(),
|
||||
isCreating: false
|
||||
}
|
||||
});
|
||||
if (response.success && response.data) {
|
||||
const tenantData = response.data;
|
||||
|
||||
updateStepData(currentStep.id, {
|
||||
...data,
|
||||
bakery: {
|
||||
...data.bakery,
|
||||
tenant_id: tenantData.id,
|
||||
created_at: tenantData.created_at,
|
||||
isCreating: false
|
||||
}
|
||||
});
|
||||
|
||||
// Update the tenant store with the new tenant
|
||||
setCurrentTenant(tenantData);
|
||||
|
||||
} else {
|
||||
throw new Error(response.error || 'Failed to create tenant');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating tenant:', error);
|
||||
updateStepData(currentStep.id, {
|
||||
...data,
|
||||
bakery: { ...data.bakery, isCreating: false }
|
||||
bakery: {
|
||||
...data.bakery,
|
||||
isCreating: false,
|
||||
creationError: error instanceof Error ? error.message : 'Unknown error'
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,21 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Store, MapPin, Phone, Mail } from 'lucide-react';
|
||||
import { Store, MapPin, Phone, Mail, Hash, Building } from 'lucide-react';
|
||||
import { Button, Card, Input } from '../../../ui';
|
||||
import { OnboardingStepProps } from '../OnboardingWizard';
|
||||
|
||||
// Backend-compatible bakery setup interface
|
||||
interface BakerySetupData {
|
||||
name: string;
|
||||
business_type: 'bakery' | 'coffee_shop' | 'pastry_shop' | 'restaurant';
|
||||
business_model: 'individual_bakery' | 'central_baker_satellite' | 'retail_bakery' | 'hybrid_bakery';
|
||||
address: string;
|
||||
city: string;
|
||||
postal_code: string;
|
||||
phone: string;
|
||||
email?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
data,
|
||||
onDataChange,
|
||||
@@ -11,36 +24,39 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
isFirstStep,
|
||||
isLastStep
|
||||
}) => {
|
||||
const [formData, setFormData] = useState({
|
||||
const [formData, setFormData] = useState<BakerySetupData>({
|
||||
name: data.bakery?.name || '',
|
||||
type: data.bakery?.type || '',
|
||||
location: data.bakery?.location || '',
|
||||
business_type: data.bakery?.business_type || 'bakery',
|
||||
business_model: data.bakery?.business_model || 'individual_bakery',
|
||||
address: data.bakery?.address || '',
|
||||
city: data.bakery?.city || 'Madrid',
|
||||
postal_code: data.bakery?.postal_code || '',
|
||||
phone: data.bakery?.phone || '',
|
||||
email: data.bakery?.email || '',
|
||||
description: data.bakery?.description || ''
|
||||
});
|
||||
|
||||
const bakeryTypes = [
|
||||
const bakeryModels = [
|
||||
{
|
||||
value: 'artisan',
|
||||
label: 'Panadería Artesanal',
|
||||
value: 'individual_bakery',
|
||||
label: 'Panadería Individual',
|
||||
description: 'Producción propia tradicional con recetas artesanales',
|
||||
icon: '🥖'
|
||||
},
|
||||
{
|
||||
value: 'industrial',
|
||||
label: 'Panadería Industrial',
|
||||
description: 'Producción a gran escala con procesos automatizados',
|
||||
value: 'central_baker_satellite',
|
||||
label: 'Panadería Central con Satélites',
|
||||
description: 'Producción centralizada con múltiples puntos de venta',
|
||||
icon: '🏭'
|
||||
},
|
||||
{
|
||||
value: 'retail',
|
||||
value: 'retail_bakery',
|
||||
label: 'Panadería Retail',
|
||||
description: 'Punto de venta que compra productos terminados',
|
||||
icon: '🏪'
|
||||
},
|
||||
{
|
||||
value: 'hybrid',
|
||||
value: 'hybrid_bakery',
|
||||
label: 'Modelo Híbrido',
|
||||
description: 'Combina producción propia con productos externos',
|
||||
icon: '🔄'
|
||||
@@ -57,7 +73,7 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
});
|
||||
}, [formData]);
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
const handleInputChange = (field: keyof BakerySetupData, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
@@ -84,18 +100,18 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bakery Type - Simplified */}
|
||||
{/* Business Model Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-[var(--text-primary)] mb-4">
|
||||
Tipo de Panadería *
|
||||
Modelo de Negocio *
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{bakeryTypes.map((type) => (
|
||||
{bakeryModels.map((model) => (
|
||||
<label
|
||||
key={type.value}
|
||||
key={model.value}
|
||||
className={`
|
||||
flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all duration-200 hover:shadow-sm
|
||||
${formData.type === type.value
|
||||
${formData.business_model === model.value
|
||||
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
||||
: 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
|
||||
}
|
||||
@@ -103,20 +119,20 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="bakeryType"
|
||||
value={type.value}
|
||||
checked={formData.type === type.value}
|
||||
onChange={(e) => handleInputChange('type', e.target.value)}
|
||||
name="businessModel"
|
||||
value={model.value}
|
||||
checked={formData.business_model === model.value}
|
||||
onChange={(e) => handleInputChange('business_model', e.target.value as BakerySetupData['business_model'])}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex items-center space-x-3 w-full">
|
||||
<span className="text-2xl">{type.icon}</span>
|
||||
<span className="text-2xl">{model.icon}</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-[var(--text-primary)]">
|
||||
{type.label}
|
||||
{model.label}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{type.description}
|
||||
{model.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,17 +141,17 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location and Contact - Simplified */}
|
||||
{/* Location and Contact - Backend compatible */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-[var(--text-primary)] mb-3">
|
||||
Ubicación *
|
||||
Dirección *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
|
||||
<Input
|
||||
value={formData.location}
|
||||
onChange={(e) => handleInputChange('location', e.target.value)}
|
||||
value={formData.address}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
placeholder="Dirección completa de tu panadería"
|
||||
className="w-full pl-12 py-3"
|
||||
/>
|
||||
@@ -145,14 +161,48 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
Teléfono (opcional)
|
||||
Ciudad *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Building className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<Input
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
placeholder="Madrid"
|
||||
className="w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
Código Postal *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Hash className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<Input
|
||||
value={formData.postal_code}
|
||||
onChange={(e) => handleInputChange('postal_code', e.target.value)}
|
||||
placeholder="28001"
|
||||
pattern="[0-9]{5}"
|
||||
className="w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
Teléfono *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<Input
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
placeholder="+1 234 567 8900"
|
||||
placeholder="+34 600 123 456"
|
||||
type="tel"
|
||||
className="w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
@@ -177,7 +227,7 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optional: Show loading state when creating tenant */}
|
||||
{/* Show loading state when creating tenant */}
|
||||
{data.bakery?.isCreating && (
|
||||
<div className="text-center p-6 bg-[var(--color-primary)]/5 rounded-lg">
|
||||
<div className="animate-spin w-8 h-8 border-3 border-[var(--color-primary)] border-t-transparent rounded-full mx-auto mb-4" />
|
||||
@@ -186,6 +236,18 @@ export const BakerySetupStep: React.FC<OnboardingStepProps> = ({
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show error state if tenant creation fails */}
|
||||
{data.bakery?.creationError && (
|
||||
<div className="text-center p-6 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-red-600 font-medium mb-2">
|
||||
Error al crear el espacio de trabajo
|
||||
</p>
|
||||
<p className="text-red-500 text-sm">
|
||||
{data.bakery.creationError}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user