Fix UI issues
This commit is contained in:
Urtzi Alfaro
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Store, MapPin, Clock, Phone, Mail, Globe, Save, X, Edit3, Zap, Plus, Settings, Trash2, Wifi, WifiOff, AlertCircle, CheckCircle, Loader, Eye, EyeOff, Info } from 'lucide-react';
|
||||
import { Button, Card, Input, Select, Modal, Badge } from '../../../../components/ui';
|
||||
import { Button, Card, Input, Select, Modal, Badge, Tabs } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { usePOSConfigurationData, usePOSConfigurationManager } from '../../../../api/hooks/pos';
|
||||
@@ -56,8 +56,8 @@ const BakeryConfigPage: React.FC = () => {
|
||||
const posManager = usePOSConfigurationManager(tenantId);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'location' | 'business' | 'hours' | 'pos'>('general');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
|
||||
// POS Configuration State
|
||||
const [showAddPosModal, setShowAddPosModal] = useState(false);
|
||||
@@ -180,11 +180,11 @@ const BakeryConfigPage: React.FC = () => {
|
||||
];
|
||||
|
||||
const tabs = [
|
||||
{ id: 'general' as const, label: 'General', icon: Store },
|
||||
{ id: 'location' as const, label: 'Ubicación', icon: MapPin },
|
||||
{ id: 'business' as const, label: 'Empresa', icon: Globe },
|
||||
{ id: 'hours' as const, label: 'Horarios', icon: Clock },
|
||||
{ id: 'pos' as const, label: 'Sistemas POS', icon: Zap }
|
||||
{ id: 'general', label: '🏪 General' },
|
||||
{ id: 'location', label: '📍 Ubicación' },
|
||||
{ id: 'business', label: '🏢 Empresa' },
|
||||
{ id: 'hours', label: '🕐 Horarios' },
|
||||
{ id: 'pos', label: '⚡ Sistemas POS' }
|
||||
];
|
||||
|
||||
const daysOfWeek = [
|
||||
@@ -268,8 +268,8 @@ const BakeryConfigPage: React.FC = () => {
|
||||
// Note: tax_id, currency, timezone, language might not be supported by backend
|
||||
}
|
||||
});
|
||||
|
||||
setIsEditing(false);
|
||||
|
||||
setHasUnsavedChanges(false);
|
||||
addToast('Configuración actualizada correctamente', { type: 'success' });
|
||||
} catch (error) {
|
||||
addToast('No se pudo actualizar la configuración', { type: 'error' });
|
||||
@@ -280,6 +280,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
|
||||
const handleInputChange = (field: keyof BakeryConfig) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setConfig(prev => ({ ...prev, [field]: e.target.value }));
|
||||
setHasUnsavedChanges(true);
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
@@ -287,6 +288,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
|
||||
const handleSelectChange = (field: keyof BakeryConfig) => (value: string) => {
|
||||
setConfig(prev => ({ ...prev, [field]: value }));
|
||||
setHasUnsavedChanges(true);
|
||||
};
|
||||
|
||||
const handleHoursChange = (day: string, field: 'open' | 'close' | 'closed', value: string | boolean) => {
|
||||
@@ -297,6 +299,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
[field]: value
|
||||
}
|
||||
}));
|
||||
setHasUnsavedChanges(true);
|
||||
};
|
||||
|
||||
// POS Configuration Handlers
|
||||
@@ -635,44 +638,28 @@ const BakeryConfigPage: React.FC = () => {
|
||||
<p className="text-text-tertiary text-sm">{config.address}, {config.city}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{!isEditing && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Edit3 className="w-4 h-4" />
|
||||
Editar Configuración
|
||||
</Button>
|
||||
{hasUnsavedChanges && (
|
||||
<div className="flex items-center gap-2 text-sm text-yellow-600">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
Cambios sin guardar
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Configuration Tabs */}
|
||||
<Card className="overflow-hidden">
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b border-border-primary">
|
||||
<nav className="flex">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'text-color-primary border-b-2 border-color-primary bg-color-primary/5'
|
||||
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="w-4 h-4" />
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<Tabs
|
||||
items={tabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
variant="underline"
|
||||
size="md"
|
||||
fullWidth={false}
|
||||
/>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="p-6">
|
||||
<Card className="p-6">
|
||||
{activeTab === 'general' && (
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-semibold text-text-primary">Información General</h3>
|
||||
@@ -683,7 +670,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
value={config.name}
|
||||
onChange={handleInputChange('name')}
|
||||
error={errors.name}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="Nombre de tu panadería"
|
||||
leftIcon={<Store className="w-4 h-4" />}
|
||||
/>
|
||||
@@ -694,7 +681,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
value={config.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="contacto@panaderia.com"
|
||||
leftIcon={<Mail className="w-4 h-4" />}
|
||||
/>
|
||||
@@ -705,7 +692,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
value={config.phone}
|
||||
onChange={handleInputChange('phone')}
|
||||
error={errors.phone}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="+34 912 345 678"
|
||||
leftIcon={<Phone className="w-4 h-4" />}
|
||||
/>
|
||||
@@ -714,7 +701,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
label="Sitio Web"
|
||||
value={config.website}
|
||||
onChange={handleInputChange('website')}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="https://tu-panaderia.com"
|
||||
leftIcon={<Globe className="w-4 h-4" />}
|
||||
className="md:col-span-2 xl:col-span-3"
|
||||
@@ -728,7 +715,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
<textarea
|
||||
value={config.description}
|
||||
onChange={handleInputChange('description')}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg resize-none bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
|
||||
placeholder="Describe tu panadería..."
|
||||
@@ -747,7 +734,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
value={config.address}
|
||||
onChange={handleInputChange('address')}
|
||||
error={errors.address}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="Calle, número, etc."
|
||||
leftIcon={<MapPin className="w-4 h-4" />}
|
||||
className="md:col-span-2"
|
||||
@@ -758,7 +745,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
value={config.city}
|
||||
onChange={handleInputChange('city')}
|
||||
error={errors.city}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="Ciudad"
|
||||
/>
|
||||
|
||||
@@ -766,7 +753,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
label="Código Postal"
|
||||
value={config.postalCode}
|
||||
onChange={handleInputChange('postalCode')}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="28001"
|
||||
/>
|
||||
|
||||
@@ -774,7 +761,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
label="País"
|
||||
value={config.country}
|
||||
onChange={handleInputChange('country')}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="España"
|
||||
/>
|
||||
</div>
|
||||
@@ -790,7 +777,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
label="NIF/CIF"
|
||||
value={config.taxId}
|
||||
onChange={handleInputChange('taxId')}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
placeholder="B12345678"
|
||||
/>
|
||||
|
||||
@@ -799,7 +786,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
options={currencyOptions}
|
||||
value={config.currency}
|
||||
onChange={(value) => handleSelectChange('currency')(value as string)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<Select
|
||||
@@ -807,7 +794,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
options={timezoneOptions}
|
||||
value={config.timezone}
|
||||
onChange={(value) => handleSelectChange('timezone')(value as string)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<Select
|
||||
@@ -815,7 +802,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
options={languageOptions}
|
||||
value={config.language}
|
||||
onChange={(value) => handleSelectChange('language')(value as string)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -842,7 +829,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
type="checkbox"
|
||||
checked={hours.closed}
|
||||
onChange={(e) => handleHoursChange(day.key, 'closed', e.target.checked)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
className="rounded border-border-primary"
|
||||
/>
|
||||
<span className="text-sm text-text-secondary">Cerrado</span>
|
||||
@@ -859,7 +846,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
type="time"
|
||||
value={hours.open}
|
||||
onChange={(e) => handleHoursChange(day.key, 'open', e.target.value)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
|
||||
/>
|
||||
</div>
|
||||
@@ -869,7 +856,7 @@ const BakeryConfigPage: React.FC = () => {
|
||||
type="time"
|
||||
value={hours.close}
|
||||
onChange={(e) => handleHoursChange(day.key, 'close', e.target.value)}
|
||||
disabled={!isEditing || isLoading}
|
||||
disabled={isLoading}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
|
||||
/>
|
||||
</div>
|
||||
@@ -1009,33 +996,64 @@ const BakeryConfigPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Save Actions */}
|
||||
{isEditing && (
|
||||
<div className="flex gap-3 px-6 py-4 bg-bg-secondary border-t border-border-primary">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditing(false)}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveConfig}
|
||||
isLoading={isLoading}
|
||||
loadingText="Guardando..."
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar Configuración
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
|
||||
{/* Floating Save Button */}
|
||||
{hasUnsavedChanges && (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Card className="p-4 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-text-secondary">
|
||||
<AlertCircle className="w-4 h-4 text-yellow-500" />
|
||||
Tienes cambios sin guardar
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
// Reset to original values
|
||||
if (tenant) {
|
||||
setConfig({
|
||||
name: tenant.name || '',
|
||||
description: tenant.description || '',
|
||||
email: tenant.email || '',
|
||||
phone: tenant.phone || '',
|
||||
website: tenant.website || '',
|
||||
address: tenant.address || '',
|
||||
city: tenant.city || '',
|
||||
postalCode: tenant.postal_code || '',
|
||||
country: tenant.country || '',
|
||||
taxId: '',
|
||||
currency: 'EUR',
|
||||
timezone: 'Europe/Madrid',
|
||||
language: 'es'
|
||||
});
|
||||
}
|
||||
setHasUnsavedChanges(false);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Descartar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSaveConfig}
|
||||
isLoading={isLoading}
|
||||
loadingText="Guardando..."
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* POS Configuration Modals */}
|
||||
{/* Add Configuration Modal */}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
// Settings pages
|
||||
export { default as ProfilePage } from './profile';
|
||||
export { default as BakeryConfigPage } from './bakery-config';
|
||||
export { default as TeamPage } from './team';
|
||||
export { default as SubscriptionPage } from './subscription';
|
||||
export { default as PreferencesPage } from './preferences';
|
||||
export { default as PreferencesPage } from './PreferencesPage';
|
||||
export { default as TeamPage } from './team';
|
||||
@@ -1,448 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Settings, Bell, Mail, MessageSquare, Smartphone, Save, RotateCcw } from 'lucide-react';
|
||||
import { Button, Card } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useAuthProfile, useUpdateProfile } from '../../../../api/hooks/auth';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
|
||||
const PreferencesPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const { data: profile, isLoading: profileLoading } = useAuthProfile();
|
||||
const updateProfileMutation = useUpdateProfile();
|
||||
|
||||
const [preferences, setPreferences] = useState({
|
||||
notifications: {
|
||||
inventory: {
|
||||
app: true,
|
||||
email: false,
|
||||
sms: true,
|
||||
frequency: 'immediate'
|
||||
},
|
||||
sales: {
|
||||
app: true,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'hourly'
|
||||
},
|
||||
production: {
|
||||
app: true,
|
||||
email: false,
|
||||
sms: true,
|
||||
frequency: 'immediate'
|
||||
},
|
||||
system: {
|
||||
app: true,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'daily'
|
||||
},
|
||||
marketing: {
|
||||
app: false,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'weekly'
|
||||
}
|
||||
},
|
||||
global: {
|
||||
doNotDisturb: false,
|
||||
quietHours: {
|
||||
enabled: false,
|
||||
start: '22:00',
|
||||
end: '07:00'
|
||||
},
|
||||
language: 'es',
|
||||
timezone: 'Europe/Madrid',
|
||||
soundEnabled: true,
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: profile?.email || '',
|
||||
phone: profile?.phone || '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
});
|
||||
|
||||
// Update preferences when profile loads
|
||||
React.useEffect(() => {
|
||||
if (profile) {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
global: {
|
||||
...prev.global,
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
},
|
||||
channels: {
|
||||
...prev.channels,
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || ''
|
||||
}
|
||||
}));
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
const categories = [
|
||||
{
|
||||
id: 'inventory',
|
||||
name: 'Inventario',
|
||||
description: 'Alertas de stock, reposiciones y vencimientos',
|
||||
icon: '📦'
|
||||
},
|
||||
{
|
||||
id: 'sales',
|
||||
name: 'Ventas',
|
||||
description: 'Pedidos, transacciones y reportes de ventas',
|
||||
icon: '💰'
|
||||
},
|
||||
{
|
||||
id: 'production',
|
||||
name: 'Producción',
|
||||
description: 'Hornadas, calidad y tiempos de producción',
|
||||
icon: '🍞'
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
name: 'Sistema',
|
||||
description: 'Actualizaciones, mantenimiento y errores',
|
||||
icon: '⚙️'
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
name: 'Marketing',
|
||||
description: 'Campañas, promociones y análisis',
|
||||
icon: '📢'
|
||||
}
|
||||
];
|
||||
|
||||
const frequencies = [
|
||||
{ value: 'immediate', label: 'Inmediato' },
|
||||
{ value: 'hourly', label: 'Cada hora' },
|
||||
{ value: 'daily', label: 'Diario' },
|
||||
{ value: 'weekly', label: 'Semanal' }
|
||||
];
|
||||
|
||||
const handleNotificationChange = (category: string, channel: string, value: boolean) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
notifications: {
|
||||
...prev.notifications,
|
||||
[category]: {
|
||||
...prev.notifications[category as keyof typeof prev.notifications],
|
||||
[channel]: value
|
||||
}
|
||||
}
|
||||
}));
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleFrequencyChange = (category: string, frequency: string) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
notifications: {
|
||||
...prev.notifications,
|
||||
[category]: {
|
||||
...prev.notifications[category as keyof typeof prev.notifications],
|
||||
frequency
|
||||
}
|
||||
}
|
||||
}));
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleGlobalChange = (setting: string, value: any) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
global: {
|
||||
...prev.global,
|
||||
[setting]: value
|
||||
}
|
||||
}));
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleChannelChange = (channel: string, value: string | boolean) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
channels: {
|
||||
...prev.channels,
|
||||
[channel]: value
|
||||
}
|
||||
}));
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// Save notification preferences and contact info
|
||||
await updateProfileMutation.mutateAsync({
|
||||
language: preferences.global.language,
|
||||
timezone: preferences.global.timezone,
|
||||
phone: preferences.channels.phone,
|
||||
notification_preferences: preferences.notifications
|
||||
});
|
||||
|
||||
addToast('Preferencias guardadas correctamente', 'success');
|
||||
setHasChanges(false);
|
||||
} catch (error) {
|
||||
addToast('Error al guardar las preferencias', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (profile) {
|
||||
setPreferences({
|
||||
notifications: {
|
||||
inventory: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
sales: { app: true, email: true, sms: false, frequency: 'hourly' },
|
||||
production: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
system: { app: true, email: true, sms: false, frequency: 'daily' },
|
||||
marketing: { app: false, email: true, sms: false, frequency: 'weekly' }
|
||||
},
|
||||
global: {
|
||||
doNotDisturb: false,
|
||||
quietHours: { enabled: false, start: '22:00', end: '07:00' },
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid',
|
||||
soundEnabled: true,
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
});
|
||||
}
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
const getChannelIcon = (channel: string) => {
|
||||
switch (channel) {
|
||||
case 'app':
|
||||
return <Bell className="w-4 h-4" />;
|
||||
case 'email':
|
||||
return <Mail className="w-4 h-4" />;
|
||||
case 'sms':
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
default:
|
||||
return <MessageSquare className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Preferencias de Comunicación"
|
||||
description="Configura cómo y cuándo recibir notificaciones"
|
||||
action={
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" onClick={handleReset}>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Restaurar
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={!hasChanges}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Global Settings */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Configuración General</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.doNotDisturb}
|
||||
onChange={(e) => handleGlobalChange('doNotDisturb', e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">No molestar</span>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">Silencia todas las notificaciones</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.soundEnabled}
|
||||
onChange={(e) => handleGlobalChange('soundEnabled', e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">Sonidos</span>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">Reproducir sonidos de notificación</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center space-x-2 mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.quietHours.enabled}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
enabled: e.target.checked
|
||||
})}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">Horas silenciosas</span>
|
||||
</label>
|
||||
{preferences.global.quietHours.enabled && (
|
||||
<div className="flex space-x-4 ml-6">
|
||||
<div>
|
||||
<label className="block text-xs text-[var(--text-tertiary)] mb-1">Desde</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.global.quietHours.start}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
start: e.target.value
|
||||
})}
|
||||
className="px-3 py-1 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-[var(--text-tertiary)] mb-1">Hasta</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.global.quietHours.end}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
end: e.target.value
|
||||
})}
|
||||
className="px-3 py-1 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Channel Settings */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Canales de Comunicación</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={preferences.channels.email}
|
||||
onChange={(e) => handleChannelChange('email', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="tu-email@ejemplo.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Teléfono (SMS)</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={preferences.channels.phone}
|
||||
onChange={(e) => handleChannelChange('phone', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="+34 600 123 456"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Webhook URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={preferences.channels.webhook}
|
||||
onChange={(e) => handleChannelChange('webhook', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="https://tu-webhook.com/notifications"
|
||||
/>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">URL para recibir notificaciones JSON</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Category Preferences */}
|
||||
<div className="space-y-4">
|
||||
{categories.map((category) => {
|
||||
const categoryPrefs = preferences.notifications[category.id as keyof typeof preferences.notifications];
|
||||
|
||||
return (
|
||||
<Card key={category.id} className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="text-2xl">{category.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">{category.name}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-4">{category.description}</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Channel toggles */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-secondary)] mb-2">Canales</h4>
|
||||
<div className="flex space-x-6">
|
||||
{['app', 'email', 'sms'].map((channel) => (
|
||||
<label key={channel} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={categoryPrefs[channel as keyof typeof categoryPrefs] as boolean}
|
||||
onChange={(e) => handleNotificationChange(category.id, channel, e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<div className="flex items-center space-x-1">
|
||||
{getChannelIcon(channel)}
|
||||
<span className="text-sm text-[var(--text-secondary)] capitalize">{channel}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frequency */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-secondary)] mb-2">Frecuencia</h4>
|
||||
<select
|
||||
value={categoryPrefs.frequency}
|
||||
onChange={(e) => handleFrequencyChange(category.id, e.target.value)}
|
||||
className="px-3 py-2 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
>
|
||||
{frequencies.map((freq) => (
|
||||
<option key={freq.value} value={freq.value}>
|
||||
{freq.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Save Changes Banner */}
|
||||
{hasChanges && (
|
||||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-4">
|
||||
<span className="text-sm">Tienes cambios sin guardar</span>
|
||||
<div className="flex space-x-2">
|
||||
<Button size="sm" variant="outline" className="text-[var(--color-info)] bg-white" onClick={handleReset}>
|
||||
Descartar
|
||||
</Button>
|
||||
<Button size="sm" className="bg-blue-700 hover:bg-blue-800" onClick={handleSave}>
|
||||
Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreferencesPage;
|
||||
@@ -1 +0,0 @@
|
||||
export { default as PreferencesPage } from './PreferencesPage';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,847 +0,0 @@
|
||||
/**
|
||||
* Subscription Management Page
|
||||
* Allows users to view current subscription, billing details, and upgrade plans
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Badge,
|
||||
Modal
|
||||
} from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import {
|
||||
CreditCard,
|
||||
Users,
|
||||
MapPin,
|
||||
Package,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
Crown,
|
||||
Star,
|
||||
Zap,
|
||||
X,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Download,
|
||||
ExternalLink
|
||||
} from 'lucide-react';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { useCurrentTenant } from '../../../../stores';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import {
|
||||
subscriptionService,
|
||||
type UsageSummary,
|
||||
type AvailablePlans
|
||||
} from '../../../../api';
|
||||
|
||||
interface PlanComparisonProps {
|
||||
plans: AvailablePlans['plans'];
|
||||
currentPlan: string;
|
||||
onUpgrade: (planKey: string) => void;
|
||||
}
|
||||
|
||||
const ProgressBar: React.FC<{ value: number; className?: string }> = ({ value, className = '' }) => {
|
||||
const getProgressColor = () => {
|
||||
if (value >= 90) return 'bg-red-500';
|
||||
if (value >= 80) return 'bg-yellow-500';
|
||||
return 'bg-green-500';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-full bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-full h-3 ${className}`}>
|
||||
<div
|
||||
className={`${getProgressColor()} h-full rounded-full transition-all duration-500 relative`}
|
||||
style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent to-white/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Tabs implementation
|
||||
interface TabsProps {
|
||||
defaultValue: string;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface TabsListProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface TabsTriggerProps {
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface TabsContentProps {
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TabsContext = React.createContext<{ activeTab: string; setActiveTab: (value: string) => void } | null>(null);
|
||||
|
||||
const Tabs: React.FC<TabsProps> & {
|
||||
List: React.FC<TabsListProps>;
|
||||
Trigger: React.FC<TabsTriggerProps>;
|
||||
Content: React.FC<TabsContentProps>;
|
||||
} = ({
|
||||
defaultValue,
|
||||
className = '',
|
||||
children
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState(defaultValue);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
|
||||
{children}
|
||||
</TabsContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsList: React.FC<TabsListProps> = ({ className = '', children }) => {
|
||||
return (
|
||||
<div className={`flex border-b border-[var(--border-primary)] bg-[var(--bg-primary)] ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsTrigger: React.FC<TabsTriggerProps> = ({ value, children, className = '' }) => {
|
||||
const context = React.useContext(TabsContext);
|
||||
if (!context) throw new Error('TabsTrigger must be used within Tabs');
|
||||
|
||||
const { activeTab, setActiveTab } = context;
|
||||
const isActive = activeTab === value;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setActiveTab(value)}
|
||||
className={`px-6 py-4 text-sm font-medium border-b-2 transition-all duration-200 relative flex items-center ${
|
||||
isActive
|
||||
? 'text-[var(--color-primary)] border-[var(--color-primary)] bg-[var(--bg-primary)]'
|
||||
: 'text-[var(--text-secondary)] border-transparent hover:text-[var(--text-primary)] hover:border-[var(--color-primary)]/30 hover:bg-[var(--bg-secondary)]'
|
||||
} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsContent: React.FC<TabsContentProps> = ({ value, children, className = '' }) => {
|
||||
const context = React.useContext(TabsContext);
|
||||
if (!context) throw new Error('TabsContent must be used within Tabs');
|
||||
|
||||
const { activeTab } = context;
|
||||
|
||||
if (activeTab !== value) return null;
|
||||
|
||||
return (
|
||||
<div className={`bg-[var(--bg-primary)] rounded-b-lg p-6 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Tabs.List = TabsList;
|
||||
Tabs.Trigger = TabsTrigger;
|
||||
Tabs.Content = TabsContent;
|
||||
|
||||
const PlanComparison: React.FC<PlanComparisonProps> = ({ plans, currentPlan, onUpgrade }) => {
|
||||
const planOrder = ['starter', 'professional', 'enterprise'];
|
||||
const sortedPlans = Object.entries(plans).sort(([a], [b]) =>
|
||||
planOrder.indexOf(a) - planOrder.indexOf(b)
|
||||
);
|
||||
|
||||
const getPlanColor = (planKey: string) => {
|
||||
switch (planKey) {
|
||||
case 'starter': return 'border-blue-500/30 bg-blue-500/5';
|
||||
case 'professional': return 'border-purple-500/30 bg-purple-500/5';
|
||||
case 'enterprise': return 'border-amber-500/30 bg-amber-500/5';
|
||||
default: return 'border-[var(--border-primary)] bg-[var(--bg-secondary)]';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{sortedPlans.map(([planKey, plan]) => (
|
||||
<Card
|
||||
key={planKey}
|
||||
className={`relative p-6 ${getPlanColor(planKey)} ${
|
||||
currentPlan === planKey ? 'ring-2 ring-[var(--color-primary)]' : ''
|
||||
}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<Badge variant="primary" className="px-3 py-1">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Más Popular
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">{plan.name}</h3>
|
||||
<div className="text-3xl font-bold text-[var(--color-primary)] mb-1">
|
||||
{subscriptionService.formatPrice(plan.monthly_price)}
|
||||
<span className="text-lg text-[var(--text-secondary)]">/mes</span>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Users className="w-4 h-4 text-[var(--color-primary)]" />
|
||||
<span>{plan.max_users === -1 ? 'Usuarios ilimitados' : `${plan.max_users} usuarios`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<MapPin className="w-4 h-4 text-[var(--color-primary)]" />
|
||||
<span>{plan.max_locations === -1 ? 'Ubicaciones ilimitadas' : `${plan.max_locations} ubicación${plan.max_locations > 1 ? 'es' : ''}`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Package className="w-4 h-4 text-[var(--color-primary)]" />
|
||||
<span>{plan.max_products === -1 ? 'Productos ilimitados' : `${plan.max_products} productos`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentPlan === planKey ? (
|
||||
<Badge variant="success" className="w-full justify-center py-2">
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Plan Actual
|
||||
</Badge>
|
||||
) : (
|
||||
<Button
|
||||
variant={plan.popular ? 'primary' : 'outline'}
|
||||
className="w-full"
|
||||
onClick={() => onUpgrade(planKey)}
|
||||
>
|
||||
{plan.contact_sales ? 'Contactar Ventas' : 'Cambiar Plan'}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SubscriptionPage: React.FC = () => {
|
||||
const user = useAuthUser();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const toast = useToast();
|
||||
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
|
||||
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
||||
const [selectedPlan, setSelectedPlan] = useState<string>('');
|
||||
const [upgrading, setUpgrading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTenant?.id || user?.tenant_id) {
|
||||
loadSubscriptionData();
|
||||
}
|
||||
}, [currentTenant, user?.tenant_id]);
|
||||
|
||||
const loadSubscriptionData = async () => {
|
||||
let tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
if (!tenantId) {
|
||||
toast.error('No se encontró información del tenant');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const [usage, plans] = await Promise.all([
|
||||
subscriptionService.getUsageSummary(tenantId),
|
||||
subscriptionService.getAvailablePlans()
|
||||
]);
|
||||
|
||||
setUsageSummary(usage);
|
||||
setAvailablePlans(plans);
|
||||
} catch (error) {
|
||||
console.error('Error loading subscription data:', error);
|
||||
toast.error("No se pudo cargar la información de suscripción");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpgradeClick = (planKey: string) => {
|
||||
setSelectedPlan(planKey);
|
||||
setUpgradeDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUpgradeConfirm = async () => {
|
||||
let tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
if (!tenantId || !selectedPlan) {
|
||||
toast.error('Información de tenant no disponible');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setUpgrading(true);
|
||||
|
||||
const validation = await subscriptionService.validatePlanUpgrade(
|
||||
tenantId,
|
||||
selectedPlan
|
||||
);
|
||||
|
||||
if (!validation.can_upgrade) {
|
||||
toast.error(validation.reason);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
|
||||
await loadSubscriptionData();
|
||||
setUpgradeDialogOpen(false);
|
||||
setSelectedPlan('');
|
||||
} else {
|
||||
toast.error('Error al cambiar el plan');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error upgrading plan:', error);
|
||||
toast.error('Error al procesar el cambio de plan');
|
||||
} finally {
|
||||
setUpgrading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Suscripción"
|
||||
description="Gestiona tu plan de suscripción y facturación"
|
||||
icon={CreditCard}
|
||||
loading={loading}
|
||||
/>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
||||
<p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!usageSummary || !availablePlans) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Suscripción"
|
||||
description="Gestiona tu plan de suscripción y facturación"
|
||||
icon={CreditCard}
|
||||
error="No se pudo cargar la información de suscripción"
|
||||
onRefresh={loadSubscriptionData}
|
||||
showRefreshButton
|
||||
/>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<AlertCircle className="w-12 h-12 text-[var(--text-tertiary)]" />
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">No se pudo cargar la información</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">Hubo un problema al cargar los datos de suscripción</p>
|
||||
<Button onClick={loadSubscriptionData} variant="primary">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const nextBillingDate = usageSummary.next_billing_date
|
||||
? new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
: 'No disponible';
|
||||
|
||||
const planInfo = subscriptionService.getPlanDisplayInfo(usageSummary.plan);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Suscripción"
|
||||
subtitle={`Plan ${planInfo.name}`}
|
||||
description="Gestiona tu plan de suscripción y facturación"
|
||||
icon={CreditCard}
|
||||
status={{
|
||||
text: usageSummary.status === 'active' ? 'Activo' : usageSummary.status,
|
||||
variant: usageSummary.status === 'active' ? 'success' : 'default'
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
id: 'manage-billing',
|
||||
label: 'Gestionar Facturación',
|
||||
icon: ExternalLink,
|
||||
onClick: () => window.open('https://billing.bakery.com', '_blank'),
|
||||
variant: 'outline'
|
||||
},
|
||||
{
|
||||
id: 'download-invoice',
|
||||
label: 'Descargar Factura',
|
||||
icon: Download,
|
||||
onClick: () => console.log('Download latest invoice'),
|
||||
variant: 'outline'
|
||||
}
|
||||
]}
|
||||
metadata={[
|
||||
{
|
||||
id: 'next-billing',
|
||||
label: 'Próxima facturación',
|
||||
value: nextBillingDate,
|
||||
icon: Calendar
|
||||
},
|
||||
{
|
||||
id: 'monthly-cost',
|
||||
label: 'Coste mensual',
|
||||
value: subscriptionService.formatPrice(usageSummary.monthly_price),
|
||||
icon: CreditCard
|
||||
}
|
||||
]}
|
||||
onRefresh={loadSubscriptionData}
|
||||
showRefreshButton
|
||||
/>
|
||||
|
||||
{/* Quick Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-blue-500/10 rounded-xl border border-blue-500/20">
|
||||
<Users className="w-6 h-6 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-1">Usuarios</p>
|
||||
<p className="text-xl font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.users.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-green-500/10 rounded-xl border border-green-500/20">
|
||||
<MapPin className="w-6 h-6 text-green-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-1">Ubicaciones</p>
|
||||
<p className="text-xl font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.locations.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-purple-500/10 rounded-xl border border-purple-500/20">
|
||||
<Package className="w-6 h-6 text-purple-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-1">Productos</p>
|
||||
<p className="text-xl font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.products.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-yellow-500/10 rounded-xl border border-yellow-500/20">
|
||||
<TrendingUp className="w-6 h-6 text-yellow-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-1">Estado</p>
|
||||
<Badge
|
||||
variant={usageSummary.status === 'active' ? 'success' : 'default'}
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
{usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<Tabs defaultValue="overview">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="overview">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Resumen
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="usage">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Uso
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="plans">
|
||||
<Crown className="w-4 h-4 mr-2" />
|
||||
Planes
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="billing">
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
Facturación
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="overview">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Current Plan Summary */}
|
||||
<Card className="p-6 lg:col-span-2 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<h3 className="text-lg font-semibold mb-6 flex items-center text-[var(--text-primary)]">
|
||||
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
||||
Tu Plan Actual
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Plan</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-[var(--text-primary)]">{planInfo.name}</span>
|
||||
{usageSummary.plan === 'professional' && (
|
||||
<Badge variant="primary" size="sm">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Popular
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Precio</span>
|
||||
<span className="font-semibold text-[var(--text-primary)]">{subscriptionService.formatPrice(usageSummary.monthly_price)}/mes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Estado</span>
|
||||
<Badge variant={usageSummary.status === 'active' ? 'success' : 'error'}>
|
||||
{usageSummary.status === 'active' ? 'Activo' : 'Inactivo'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Próxima facturación</span>
|
||||
<span className="font-medium text-[var(--text-primary)]">{nextBillingDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<h3 className="text-lg font-semibold mb-4 text-[var(--text-primary)]">
|
||||
Acciones Rápidas
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full justify-start text-sm" onClick={() => window.open('https://billing.bakery.com', '_blank')}>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
Portal de Facturación
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full justify-start text-sm" onClick={() => console.log('Download invoice')}>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Descargar Facturas
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full justify-start text-sm">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Configurar Alertas
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Usage at a Glance */}
|
||||
<Card className="p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
|
||||
<h3 className="text-lg font-semibold mb-6 flex items-center text-[var(--text-primary)]">
|
||||
<TrendingUp className="w-5 h-5 mr-2 text-orange-500" />
|
||||
Uso de Recursos
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Users */}
|
||||
<div className="space-y-4 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
||||
<Users className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
<span className="font-medium text-[var(--text-primary)]">Usuarios</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.users.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.users.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
||||
<span>{usageSummary.usage.users.usage_percentage}% utilizado</span>
|
||||
<span className="font-medium">{usageSummary.usage.users.unlimited ? 'Ilimitado' : `${usageSummary.usage.users.limit - usageSummary.usage.users.current} restantes`}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Locations */}
|
||||
<div className="space-y-4 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-500/10 rounded-lg border border-green-500/20">
|
||||
<MapPin className="w-4 h-4 text-green-500" />
|
||||
</div>
|
||||
<span className="font-medium text-[var(--text-primary)]">Ubicaciones</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.locations.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.locations.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
||||
<span>{usageSummary.usage.locations.usage_percentage}% utilizado</span>
|
||||
<span className="font-medium">{usageSummary.usage.locations.unlimited ? 'Ilimitado' : `${usageSummary.usage.locations.limit - usageSummary.usage.locations.current} restantes`}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Products */}
|
||||
<div className="space-y-4 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/10 rounded-lg border border-purple-500/20">
|
||||
<Package className="w-4 h-4 text-purple-500" />
|
||||
</div>
|
||||
<span className="font-medium text-[var(--text-primary)]">Productos</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-[var(--text-primary)]">
|
||||
{usageSummary.usage.products.current}<span className="text-[var(--text-tertiary)]">/{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.products.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
||||
<span>{usageSummary.usage.products.usage_percentage}% utilizado</span>
|
||||
<span className="font-medium">{usageSummary.usage.products.unlimited ? 'Ilimitado' : 'Ilimitado'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="usage">
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)]">Detalles de Uso</h3>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Users Usage */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500" />
|
||||
<h4 className="font-medium text-[var(--text-primary)]">Gestión de Usuarios</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Usuarios activos</span>
|
||||
<span className="font-medium">{usageSummary.usage.users.current}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Límite del plan</span>
|
||||
<span className="font-medium">{usageSummary.usage.users.unlimited ? 'Ilimitado' : usageSummary.usage.users.limit}</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.users.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)]">
|
||||
{usageSummary.usage.users.usage_percentage}% de capacidad utilizada
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Locations Usage */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-5 h-5 text-green-500" />
|
||||
<h4 className="font-medium text-[var(--text-primary)]">Ubicaciones</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Ubicaciones activas</span>
|
||||
<span className="font-medium">{usageSummary.usage.locations.current}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Límite del plan</span>
|
||||
<span className="font-medium">{usageSummary.usage.locations.unlimited ? 'Ilimitado' : usageSummary.usage.locations.limit}</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.locations.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)]">
|
||||
{usageSummary.usage.locations.usage_percentage}% de capacidad utilizada
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Usage */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-purple-500" />
|
||||
<h4 className="font-medium text-[var(--text-primary)]">Productos</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Productos registrados</span>
|
||||
<span className="font-medium">{usageSummary.usage.products.current}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">Límite del plan</span>
|
||||
<span className="font-medium">{usageSummary.usage.products.unlimited ? 'Ilimitado' : usageSummary.usage.products.limit}</span>
|
||||
</div>
|
||||
<ProgressBar value={usageSummary.usage.products.usage_percentage} />
|
||||
<p className="text-xs text-[var(--text-secondary)]">
|
||||
{usageSummary.usage.products.usage_percentage}% de capacidad utilizada
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="plans">
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold text-[var(--text-primary)] mb-2">
|
||||
Planes de Suscripción
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
Elige el plan que mejor se adapte a las necesidades de tu panadería
|
||||
</p>
|
||||
</div>
|
||||
<PlanComparison
|
||||
plans={availablePlans.plans}
|
||||
currentPlan={usageSummary.plan}
|
||||
onUpgrade={handleUpgradeClick}
|
||||
/>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="billing">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)]">
|
||||
Información de Facturación
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<span className="text-[var(--text-secondary)]">Plan actual:</span>
|
||||
<span className="font-medium">{planInfo.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<span className="text-[var(--text-secondary)]">Precio mensual:</span>
|
||||
<span className="font-medium">{subscriptionService.formatPrice(usageSummary.monthly_price)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<span className="text-[var(--text-secondary)]">Próxima facturación:</span>
|
||||
<span className="font-medium flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
{nextBillingDate}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)]">
|
||||
Métodos de Pago
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<CreditCard className="w-8 h-8 text-[var(--text-tertiary)]" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">•••• •••• •••• 4242</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Visa terminada en 4242</div>
|
||||
</div>
|
||||
<Badge variant="success">Principal</Badge>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Gestionar Métodos de Pago
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
</Tabs>
|
||||
</Card>
|
||||
|
||||
{/* Upgrade Modal */}
|
||||
{upgradeDialogOpen && selectedPlan && availablePlans && (
|
||||
<Modal
|
||||
isOpen={upgradeDialogOpen}
|
||||
onClose={() => setUpgradeDialogOpen(false)}
|
||||
title="Confirmar Cambio de Plan"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
¿Estás seguro de que quieres cambiar tu plan de suscripción?
|
||||
</p>
|
||||
{availablePlans.plans[selectedPlan] && (
|
||||
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Plan actual:</span>
|
||||
<span>{planInfo.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Nuevo plan:</span>
|
||||
<span>{availablePlans.plans[selectedPlan].name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-medium">
|
||||
<span>Nuevo precio:</span>
|
||||
<span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan].monthly_price)}/mes</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setUpgradeDialogOpen(false)}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleUpgradeConfirm}
|
||||
disabled={upgrading}
|
||||
className="flex-1"
|
||||
>
|
||||
{upgrading ? 'Procesando...' : 'Confirmar Cambio'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionPage;
|
||||
@@ -1,706 +0,0 @@
|
||||
/**
|
||||
* Subscription Management Page
|
||||
* Allows users to view current subscription, billing details, and upgrade plans
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Badge,
|
||||
Modal
|
||||
} from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import {
|
||||
CreditCard,
|
||||
Users,
|
||||
MapPin,
|
||||
Package,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
Crown,
|
||||
Star,
|
||||
Zap,
|
||||
X,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Download,
|
||||
ExternalLink
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '../../../../hooks/api/useAuth';
|
||||
import { useCurrentTenant } from '../../../../stores';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import {
|
||||
subscriptionService,
|
||||
type UsageSummary,
|
||||
type AvailablePlans
|
||||
} from '../../../../api/services';
|
||||
|
||||
interface PlanComparisonProps {
|
||||
plans: AvailablePlans['plans'];
|
||||
currentPlan: string;
|
||||
onUpgrade: (planKey: string) => void;
|
||||
}
|
||||
|
||||
const ProgressBar: React.FC<{ value: number; className?: string }> = ({ value, className = '' }) => {
|
||||
const getProgressColor = () => {
|
||||
if (value >= 90) return 'bg-red-500';
|
||||
if (value >= 80) return 'bg-yellow-500';
|
||||
return 'bg-green-500';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-full bg-gray-200 rounded-full h-2.5 ${className}`}>
|
||||
<div
|
||||
className={`${getProgressColor()} h-2.5 rounded-full transition-all duration-300`}
|
||||
style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Alert: React.FC<{ children: React.ReactNode; className?: string }> = ({
|
||||
children,
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className={`p-4 rounded-lg border border-yellow-200 bg-yellow-50 text-yellow-800 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Tabs: React.FC<{ defaultValue: string; className?: string; children: React.ReactNode }> = ({
|
||||
defaultValue,
|
||||
className = '',
|
||||
children
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState(defaultValue);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{React.Children.map(children, child => {
|
||||
if (React.isValidElement(child)) {
|
||||
return React.cloneElement(child, { activeTab, setActiveTab } as any);
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsList: React.FC<{ children: React.ReactNode; activeTab?: string; setActiveTab?: (tab: string) => void }> = ({
|
||||
children,
|
||||
activeTab,
|
||||
setActiveTab
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex space-x-1 border-b border-gray-200 mb-6">
|
||||
{React.Children.map(children, child => {
|
||||
if (React.isValidElement(child)) {
|
||||
return React.cloneElement(child, { activeTab, setActiveTab } as any);
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsTrigger: React.FC<{
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
activeTab?: string;
|
||||
setActiveTab?: (tab: string) => void;
|
||||
}> = ({ value, children, activeTab, setActiveTab }) => {
|
||||
const isActive = activeTab === value;
|
||||
return (
|
||||
<button
|
||||
className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
|
||||
isActive
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
onClick={() => setActiveTab?.(value)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const TabsContent: React.FC<{
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
activeTab?: string;
|
||||
className?: string;
|
||||
}> = ({ value, children, activeTab, className = '' }) => {
|
||||
if (activeTab !== value) return null;
|
||||
return <div className={className}>{children}</div>;
|
||||
};
|
||||
|
||||
const Separator: React.FC<{ className?: string }> = ({ className = '' }) => {
|
||||
return <hr className={`border-gray-200 my-4 ${className}`} />;
|
||||
};
|
||||
|
||||
const PlanComparison: React.FC<PlanComparisonProps> = ({ plans, currentPlan, onUpgrade }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{Object.entries(plans).map(([key, plan]) => {
|
||||
const isCurrentPlan = key === currentPlan;
|
||||
const isPopular = plan.popular;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`relative rounded-2xl p-6 border-2 transition-all duration-200 ${
|
||||
isCurrentPlan
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: isPopular
|
||||
? 'border-purple-200 bg-gradient-to-b from-purple-50 to-white shadow-lg scale-105'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
{isPopular && (
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||||
<Badge className="bg-gradient-to-r from-purple-600 to-purple-700 text-white px-4 py-1">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Más Popular
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCurrentPlan && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge variant="default" className="bg-green-100 text-green-800">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Activo
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{plan.name}</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">{plan.description}</p>
|
||||
<div className="mb-4">
|
||||
<span className="text-4xl font-bold text-gray-900">
|
||||
€{plan.monthly_price}
|
||||
</span>
|
||||
<span className="text-gray-600">/mes</span>
|
||||
</div>
|
||||
{plan.trial_available && !isCurrentPlan && (
|
||||
<p className="text-blue-600 text-sm font-medium">
|
||||
14 días de prueba gratis
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center text-sm">
|
||||
<Users className="w-4 h-4 text-gray-500 mr-3" />
|
||||
<span>
|
||||
{plan.max_users === -1 ? 'Usuarios ilimitados' : `Hasta ${plan.max_users} usuarios`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<MapPin className="w-4 h-4 text-gray-500 mr-3" />
|
||||
<span>
|
||||
{plan.max_locations === -1 ? 'Ubicaciones ilimitadas' : `${plan.max_locations} ubicación${plan.max_locations > 1 ? 'es' : ''}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<Package className="w-4 h-4 text-gray-500 mr-3" />
|
||||
<span>
|
||||
{plan.max_products === -1 ? 'Productos ilimitados' : `Hasta ${plan.max_products} productos`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Key features */}
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center text-sm mb-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 mr-3" />
|
||||
<span>
|
||||
{plan.features.inventory_management === 'basic' && 'Inventario básico'}
|
||||
{plan.features.inventory_management === 'advanced' && 'Inventario avanzado'}
|
||||
{plan.features.inventory_management === 'multi_location' && 'Inventario multi-locación'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm mb-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 mr-3" />
|
||||
<span>
|
||||
{plan.features.demand_prediction === 'basic' && 'Predicción básica'}
|
||||
{plan.features.demand_prediction === 'ai_92_percent' && 'IA con 92% precisión'}
|
||||
{plan.features.demand_prediction === 'ai_personalized' && 'IA personalizada'}
|
||||
</span>
|
||||
</div>
|
||||
{plan.features.pos_integrated && (
|
||||
<div className="flex items-center text-sm mb-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 mr-3" />
|
||||
<span>POS integrado</span>
|
||||
</div>
|
||||
)}
|
||||
{plan.features.erp_integration && (
|
||||
<div className="flex items-center text-sm mb-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 mr-3" />
|
||||
<span>Integración ERP</span>
|
||||
</div>
|
||||
)}
|
||||
{plan.features.account_manager && (
|
||||
<div className="flex items-center text-sm mb-2">
|
||||
<Crown className="w-4 h-4 text-yellow-500 mr-3" />
|
||||
<span>Manager dedicado</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className={`w-full ${
|
||||
isCurrentPlan
|
||||
? 'bg-gray-300 text-gray-600 cursor-not-allowed'
|
||||
: isPopular
|
||||
? 'bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => !isCurrentPlan && onUpgrade(key)}
|
||||
disabled={isCurrentPlan}
|
||||
>
|
||||
{isCurrentPlan ? (
|
||||
'Plan Actual'
|
||||
) : plan.contact_sales ? (
|
||||
'Contactar Ventas'
|
||||
) : (
|
||||
<>
|
||||
Cambiar a {plan.name}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SubscriptionPage: React.FC = () => {
|
||||
const { user, tenant_id } = useAuth();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const toast = useToast();
|
||||
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
|
||||
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
||||
const [selectedPlan, setSelectedPlan] = useState<string>('');
|
||||
const [upgrading, setUpgrading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTenant?.id || tenant_id) {
|
||||
loadSubscriptionData();
|
||||
}
|
||||
}, [currentTenant, tenant_id]);
|
||||
|
||||
const loadSubscriptionData = async () => {
|
||||
let tenantId = currentTenant?.id || tenant_id;
|
||||
|
||||
console.log('📊 Loading subscription data for tenant:', tenantId);
|
||||
|
||||
if (!tenantId) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const [usage, plans] = await Promise.all([
|
||||
subscriptionService.getUsageSummary(tenantId),
|
||||
subscriptionService.getAvailablePlans()
|
||||
]);
|
||||
|
||||
setUsageSummary(usage);
|
||||
setAvailablePlans(plans);
|
||||
} catch (error) {
|
||||
console.error('Error loading subscription data:', error);
|
||||
toast.error("No se pudo cargar la información de suscripción");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpgradeClick = (planKey: string) => {
|
||||
setSelectedPlan(planKey);
|
||||
setUpgradeDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUpgradeConfirm = async () => {
|
||||
let tenantId = currentTenant?.id || tenant_id;
|
||||
|
||||
if (!tenantId || !selectedPlan) return;
|
||||
|
||||
try {
|
||||
setUpgrading(true);
|
||||
|
||||
const validation = await subscriptionService.validatePlanUpgrade(
|
||||
tenantId,
|
||||
selectedPlan
|
||||
);
|
||||
|
||||
if (!validation.can_upgrade) {
|
||||
toast.error(validation.reason);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
|
||||
await loadSubscriptionData();
|
||||
setUpgradeDialogOpen(false);
|
||||
setSelectedPlan('');
|
||||
} else {
|
||||
throw new Error(result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error upgrading plan:', error);
|
||||
toast.error("No se pudo actualizar el plan. Inténtalo de nuevo.");
|
||||
} finally {
|
||||
setUpgrading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getUsageColor = (percentage: number) => {
|
||||
if (percentage >= 90) return 'text-red-600';
|
||||
if (percentage >= 75) return 'text-yellow-600';
|
||||
return 'text-green-600';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Suscripción"
|
||||
description="Gestiona tu plan de suscripción y facturación"
|
||||
icon={CreditCard}
|
||||
loading={loading}
|
||||
/>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
||||
<p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!usageSummary || !availablePlans) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Suscripción"
|
||||
description="Gestiona tu plan de suscripción y facturación"
|
||||
icon={CreditCard}
|
||||
error="No se pudo cargar la información de suscripción"
|
||||
onRefresh={loadSubscriptionData}
|
||||
showRefreshButton
|
||||
/>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<AlertCircle className="w-12 h-12 text-[var(--text-tertiary)]" />
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">No se pudo cargar la información</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">Hubo un problema al cargar los datos de suscripción</p>
|
||||
<Button onClick={loadSubscriptionData} variant="primary">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const nextBillingDate = usageSummary.next_billing_date
|
||||
? new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES')
|
||||
: 'N/A';
|
||||
|
||||
const trialEndsAt = usageSummary.trial_ends_at
|
||||
? new Date(usageSummary.trial_ends_at).toLocaleDateString('es-ES')
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Suscripción</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Gestiona tu plan, facturación y límites de uso
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="overview" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Resumen</TabsTrigger>
|
||||
<TabsTrigger value="usage">Uso Actual</TabsTrigger>
|
||||
<TabsTrigger value="plans">Cambiar Plan</TabsTrigger>
|
||||
<TabsTrigger value="billing">Facturación</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
{/* Current Plan Overview */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold flex items-center">
|
||||
Plan {subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}
|
||||
{usageSummary.plan === 'professional' && (
|
||||
<Badge className="ml-2 bg-purple-100 text-purple-800">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Más Popular
|
||||
</Badge>
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-gray-600 mt-1">
|
||||
{subscriptionService.formatPrice(usageSummary.monthly_price)}/mes •
|
||||
Estado: {usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-500">Próxima facturación</div>
|
||||
<div className="font-medium">{nextBillingDate}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{trialEndsAt && (
|
||||
<Alert className="mb-4">
|
||||
<Zap className="h-4 w-4 inline mr-2" />
|
||||
Tu período de prueba gratuita termina el {trialEndsAt}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<Users className="w-8 h-8 text-blue-600 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Usuarios</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<MapPin className="w-8 h-8 text-blue-600 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Ubicaciones</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<Package className="w-8 h-8 text-blue-600 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Productos</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="usage" className="space-y-6">
|
||||
{/* Usage Details */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold flex items-center">
|
||||
<Users className="w-5 h-5 mr-2" />
|
||||
Usuarios
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-600">Usado</span>
|
||||
<span className={`text-sm font-medium ${getUsageColor(usageSummary.usage.users.usage_percentage)}`}>
|
||||
{usageSummary.usage.users.current} de {usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}
|
||||
</span>
|
||||
</div>
|
||||
{!usageSummary.usage.users.unlimited && (
|
||||
<ProgressBar value={usageSummary.usage.users.usage_percentage} />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold flex items-center">
|
||||
<MapPin className="w-5 h-5 mr-2" />
|
||||
Ubicaciones
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-600">Usado</span>
|
||||
<span className={`text-sm font-medium ${getUsageColor(usageSummary.usage.locations.usage_percentage)}`}>
|
||||
{usageSummary.usage.locations.current} de {usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}
|
||||
</span>
|
||||
</div>
|
||||
{!usageSummary.usage.locations.unlimited && (
|
||||
<ProgressBar value={usageSummary.usage.locations.usage_percentage} />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold flex items-center">
|
||||
<Package className="w-5 h-5 mr-2" />
|
||||
Productos
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-600">Usado</span>
|
||||
<span className={`text-sm font-medium ${getUsageColor(usageSummary.usage.products.usage_percentage)}`}>
|
||||
{usageSummary.usage.products.current} de {usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit}
|
||||
</span>
|
||||
</div>
|
||||
{!usageSummary.usage.products.unlimited && (
|
||||
<ProgressBar value={usageSummary.usage.products.usage_percentage} />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="plans" className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-6">Planes Disponibles</h2>
|
||||
<PlanComparison
|
||||
plans={availablePlans.plans}
|
||||
currentPlan={usageSummary.plan}
|
||||
onUpgrade={handleUpgradeClick}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="billing" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold flex items-center">
|
||||
<CreditCard className="w-5 h-5 mr-2" />
|
||||
Información de Facturación
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Plan Actual</div>
|
||||
<div className="font-medium">
|
||||
{subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Precio Mensual</div>
|
||||
<div className="font-medium">
|
||||
{subscriptionService.formatPrice(usageSummary.monthly_price)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Próxima Facturación</div>
|
||||
<div className="font-medium flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-2 text-gray-500" />
|
||||
{nextBillingDate}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600">Estado</div>
|
||||
<Badge
|
||||
variant="default"
|
||||
className={usageSummary.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}
|
||||
>
|
||||
{usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Próximos Cobros</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Se facturará {subscriptionService.formatPrice(usageSummary.monthly_price)} el {nextBillingDate}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Upgrade Confirmation Modal */}
|
||||
{upgradeDialogOpen && (
|
||||
<Modal onClose={() => setUpgradeDialogOpen(false)}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">Confirmar Cambio de Plan</h3>
|
||||
<button
|
||||
onClick={() => setUpgradeDialogOpen(false)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-4">
|
||||
¿Estás seguro de que quieres cambiar al plan{' '}
|
||||
{selectedPlan && availablePlans?.plans[selectedPlan]?.name}?
|
||||
</p>
|
||||
|
||||
{selectedPlan && availablePlans?.plans[selectedPlan] && (
|
||||
<div className="py-4 border-t border-b border-gray-200">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Plan actual:</span>
|
||||
<span>{subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Nuevo plan:</span>
|
||||
<span>{availablePlans.plans[selectedPlan].name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-medium">
|
||||
<span>Nuevo precio:</span>
|
||||
<span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan].monthly_price)}/mes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setUpgradeDialogOpen(false)}
|
||||
disabled={upgrading}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpgradeConfirm}
|
||||
disabled={upgrading}
|
||||
>
|
||||
{upgrading ? 'Procesando...' : 'Confirmar Cambio'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionPage;
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './SubscriptionPage';
|
||||
Reference in New Issue
Block a user