995 lines
49 KiB
TypeScript
995 lines
49 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X, Activity, Database, Zap, HardDrive, ShoppingCart, ChefHat, Settings, Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { Button, Card, Badge, Modal } from '../../../../components/ui';
|
|
import { DialogModal } from '../../../../components/ui/DialogModal/DialogModal';
|
|
import { PageHeader } from '../../../../components/layout';
|
|
import { useAuthUser } from '../../../../stores/auth.store';
|
|
import { useCurrentTenant } from '../../../../stores';
|
|
import { showToast } from '../../../../utils/toast';
|
|
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';
|
|
import { useSubscriptionEvents } from '../../../../contexts/SubscriptionEventsContext';
|
|
import { SubscriptionPricingCards } from '../../../../components/subscription/SubscriptionPricingCards';
|
|
import { PlanComparisonTable, ROICalculator, UsageMetricCard } from '../../../../components/subscription';
|
|
import { useSubscription } from '../../../../hooks/useSubscription';
|
|
import {
|
|
trackSubscriptionPageViewed,
|
|
trackUpgradeCTAClicked,
|
|
trackUsageMetricViewed
|
|
} from '../../../../utils/subscriptionAnalytics';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const SubscriptionPage: React.FC = () => {
|
|
const user = useAuthUser();
|
|
const currentTenant = useCurrentTenant();
|
|
const { notifySubscriptionChanged } = useSubscriptionEvents();
|
|
const { t } = useTranslation('subscription');
|
|
|
|
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
|
|
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
|
|
const [subscriptionLoading, setSubscriptionLoading] = useState(false);
|
|
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
|
const [selectedPlan, setSelectedPlan] = useState<string>('');
|
|
const [upgrading, setUpgrading] = useState(false);
|
|
const [cancellationDialogOpen, setCancellationDialogOpen] = useState(false);
|
|
const [cancelling, setCancelling] = useState(false);
|
|
const [invoices, setInvoices] = useState<any[]>([]);
|
|
const [invoicesLoading, setInvoicesLoading] = useState(false);
|
|
const [invoicesLoaded, setInvoicesLoaded] = useState(false);
|
|
|
|
// New state for enhanced features
|
|
const [showComparison, setShowComparison] = useState(false);
|
|
const [showROI, setShowROI] = useState(false);
|
|
|
|
// Use new subscription hook for usage forecast data
|
|
const { subscription: subscriptionData, usage: forecastUsage, forecast } = useSubscription();
|
|
|
|
// Load subscription data on component mount
|
|
React.useEffect(() => {
|
|
loadSubscriptionData();
|
|
loadInvoices();
|
|
}, []);
|
|
|
|
// Track page view
|
|
useEffect(() => {
|
|
if (usageSummary) {
|
|
trackSubscriptionPageViewed(usageSummary.plan);
|
|
}
|
|
}, [usageSummary]);
|
|
|
|
// Track high usage metrics
|
|
useEffect(() => {
|
|
if (forecast?.metrics) {
|
|
forecast.metrics.forEach(metric => {
|
|
if (metric.usage_percentage >= 80) {
|
|
trackUsageMetricViewed(
|
|
metric.metric,
|
|
metric.current,
|
|
metric.limit,
|
|
metric.usage_percentage,
|
|
metric.days_until_breach
|
|
);
|
|
}
|
|
});
|
|
}
|
|
}, [forecast]);
|
|
|
|
const loadSubscriptionData = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
showToast.error('No se encontró información del tenant');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSubscriptionLoading(true);
|
|
const [usage, plans] = await Promise.all([
|
|
subscriptionService.getUsageSummary(tenantId),
|
|
subscriptionService.fetchAvailablePlans()
|
|
]);
|
|
|
|
// CRITICAL: No more mock data - show real errors instead
|
|
if (!usage || !usage.usage) {
|
|
throw new Error('No subscription found. Please contact support or create a new subscription.');
|
|
}
|
|
|
|
setUsageSummary(usage);
|
|
setAvailablePlans(plans);
|
|
} catch (error) {
|
|
console.error('Error loading subscription data:', error);
|
|
showToast.error(
|
|
error instanceof Error && error.message.includes('No subscription')
|
|
? error.message
|
|
: "No se pudo cargar la información de suscripción. Por favor, contacte con soporte."
|
|
);
|
|
} finally {
|
|
setSubscriptionLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpgradeClick = (planKey: string, source: string = 'pricing_cards') => {
|
|
if (usageSummary) {
|
|
trackUpgradeCTAClicked(usageSummary.plan, planKey, source);
|
|
}
|
|
setSelectedPlan(planKey);
|
|
setUpgradeDialogOpen(true);
|
|
};
|
|
|
|
const handleUpgradeConfirm = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId || !selectedPlan) {
|
|
showToast.error('Información de tenant no disponible');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setUpgrading(true);
|
|
|
|
const validation = await subscriptionService.validatePlanUpgrade(
|
|
tenantId,
|
|
selectedPlan
|
|
);
|
|
|
|
if (!validation.can_upgrade) {
|
|
showToast.error(validation.reason || 'No se puede actualizar el plan');
|
|
return;
|
|
}
|
|
|
|
const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);
|
|
|
|
if (result.success) {
|
|
showToast.success(result.message);
|
|
|
|
// Invalidate cache to ensure fresh data on next fetch
|
|
subscriptionService.invalidateCache();
|
|
|
|
// Broadcast subscription change event to refresh sidebar and other components
|
|
notifySubscriptionChanged();
|
|
|
|
await loadSubscriptionData();
|
|
setUpgradeDialogOpen(false);
|
|
setSelectedPlan('');
|
|
} else {
|
|
showToast.error('Error al cambiar el plan');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error upgrading plan:', error);
|
|
showToast.error('Error al procesar el cambio de plan');
|
|
} finally {
|
|
setUpgrading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancellationClick = () => {
|
|
setCancellationDialogOpen(true);
|
|
};
|
|
|
|
const handleCancelSubscription = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
showToast.error('Información de tenant no disponible');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setCancelling(true);
|
|
|
|
const result = await subscriptionService.cancelSubscription(tenantId, 'User requested cancellation');
|
|
|
|
if (result.success) {
|
|
const daysRemaining = result.days_remaining;
|
|
const effectiveDate = new Date(result.cancellation_effective_date).toLocaleDateString('es-ES', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
|
|
showToast.success(
|
|
`Suscripción cancelada. Acceso de solo lectura a partir del ${effectiveDate} (${daysRemaining} días restantes)`
|
|
);
|
|
}
|
|
|
|
await loadSubscriptionData();
|
|
setCancellationDialogOpen(false);
|
|
} catch (error) {
|
|
console.error('Error cancelling subscription:', error);
|
|
showToast.error('Error al cancelar la suscripción');
|
|
} finally {
|
|
setCancelling(false);
|
|
}
|
|
};
|
|
|
|
const loadInvoices = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setInvoicesLoading(true);
|
|
const fetchedInvoices = await subscriptionService.getInvoices(tenantId);
|
|
setInvoices(fetchedInvoices);
|
|
setInvoicesLoaded(true);
|
|
} catch (error) {
|
|
console.error('Error loading invoices:', error);
|
|
// Don't show error toast on initial load, just log it
|
|
if (invoicesLoaded) {
|
|
showToast.error('Error al cargar las facturas');
|
|
}
|
|
} finally {
|
|
setInvoicesLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDownloadInvoice = (invoice: any) => {
|
|
if (invoice.invoice_pdf) {
|
|
window.open(invoice.invoice_pdf, '_blank');
|
|
} else if (invoice.hosted_invoice_url) {
|
|
window.open(invoice.hosted_invoice_url, '_blank');
|
|
} else {
|
|
showToast.warning('No hay PDF disponible para esta factura');
|
|
}
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<PageHeader
|
|
title="Suscripción y Facturación"
|
|
description="Gestiona tu suscripción, uso de recursos y facturación"
|
|
/>
|
|
|
|
{subscriptionLoading ? (
|
|
<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>
|
|
) : !usageSummary || !availablePlans ? (
|
|
<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>
|
|
) : (
|
|
<>
|
|
{/* Current Plan Overview */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
|
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
|
Plan Actual
|
|
</h3>
|
|
<Badge
|
|
variant={usageSummary.status === 'active' ? 'success' : 'default'}
|
|
className="text-sm font-medium"
|
|
>
|
|
{usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm text-[var(--text-secondary)] mb-1">Plan</span>
|
|
<span className="font-semibold text-[var(--text-primary)] text-lg capitalize">{usageSummary.plan}</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm text-[var(--text-secondary)] mb-1">Precio Mensual</span>
|
|
<span className="font-semibold text-[var(--text-primary)] text-lg">{subscriptionService.formatPrice(usageSummary.monthly_price)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm text-[var(--text-secondary)] mb-1">Próxima Facturación</span>
|
|
<span className="font-medium text-[var(--text-primary)] text-lg">
|
|
{new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm text-[var(--text-secondary)] mb-1">Ciclo de Facturación</span>
|
|
<span className="font-medium text-[var(--text-primary)] text-lg capitalize">
|
|
{usageSummary.billing_cycle === 'monthly' ? 'Mensual' : 'Anual'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Usage Details */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<TrendingUp className="w-5 h-5 mr-2 text-orange-500" />
|
|
Uso de Recursos
|
|
</h3>
|
|
|
|
{/* Team & Organization Metrics */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Equipo & Organización</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Users */}
|
|
<div className="space-y-3 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)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit ?? 0}</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 ?? 0) - usageSummary.usage.users.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Locations */}
|
|
<div className="space-y-3 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)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit ?? 0}</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 ?? 0) - usageSummary.usage.locations.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product & Inventory Metrics */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Productos & Inventario</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Products */}
|
|
<div className="space-y-3 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)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit ?? 0}</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' : `${(usageSummary.usage.products.limit ?? 0) - usageSummary.usage.products.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Recipes */}
|
|
<div className="space-y-3 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-amber-500/10 rounded-lg border border-amber-500/20">
|
|
<ChefHat className="w-4 h-4 text-amber-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Recetas</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.recipes.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.recipes.unlimited ? '∞' : usageSummary.usage.recipes.limit ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.recipes.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.recipes.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.recipes.unlimited ? 'Ilimitado' : `${(usageSummary.usage.recipes.limit ?? 0) - usageSummary.usage.recipes.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Suppliers */}
|
|
<div className="space-y-3 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-teal-500/10 rounded-lg border border-teal-500/20">
|
|
<ShoppingCart className="w-4 h-4 text-teal-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Proveedores</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.suppliers.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.suppliers.unlimited ? '∞' : usageSummary.usage.suppliers.limit ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.suppliers.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.suppliers.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.suppliers.unlimited ? 'Ilimitado' : `${(usageSummary.usage.suppliers.limit ?? 0) - usageSummary.usage.suppliers.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ML & Analytics Metrics (Daily) */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">IA & Analíticas (Uso Diario)</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Training Jobs Today */}
|
|
<div className="space-y-3 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-indigo-500/10 rounded-lg border border-indigo-500/20">
|
|
<Database className="w-4 h-4 text-indigo-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Entrenamientos IA Hoy</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.training_jobs_today.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.training_jobs_today.unlimited ? '∞' : usageSummary.usage.training_jobs_today.limit ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.training_jobs_today.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.training_jobs_today.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.training_jobs_today.unlimited ? 'Ilimitado' : `${(usageSummary.usage.training_jobs_today.limit ?? 0) - usageSummary.usage.training_jobs_today.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Forecasts Today */}
|
|
<div className="space-y-3 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-pink-500/10 rounded-lg border border-pink-500/20">
|
|
<TrendingUp className="w-4 h-4 text-pink-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Pronósticos Hoy</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.forecasts_today.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.forecasts_today.unlimited ? '∞' : usageSummary.usage.forecasts_today.limit ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.forecasts_today.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.forecasts_today.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.forecasts_today.unlimited ? 'Ilimitado' : `${(usageSummary.usage.forecasts_today.limit ?? 0) - usageSummary.usage.forecasts_today.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* API & Storage Metrics */}
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">API & Almacenamiento</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* API Calls This Hour */}
|
|
<div className="space-y-3 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-orange-500/10 rounded-lg border border-orange-500/20">
|
|
<Zap className="w-4 h-4 text-orange-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Llamadas API (Esta Hora)</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.api_calls_this_hour.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.api_calls_this_hour.unlimited ? '∞' : usageSummary.usage.api_calls_this_hour.limit ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.api_calls_this_hour.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.api_calls_this_hour.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.api_calls_this_hour.unlimited ? 'Ilimitado' : `${(usageSummary.usage.api_calls_this_hour.limit ?? 0) - usageSummary.usage.api_calls_this_hour.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* File Storage */}
|
|
<div className="space-y-3 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-cyan-500/10 rounded-lg border border-cyan-500/20">
|
|
<HardDrive className="w-4 h-4 text-cyan-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Almacenamiento</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.file_storage_used_gb.current.toFixed(2)}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.file_storage_used_gb.unlimited ? '∞' : `${usageSummary.usage.file_storage_used_gb.limit} GB`}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.file_storage_used_gb.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.file_storage_used_gb.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.file_storage_used_gb.unlimited ? 'Ilimitado' : `${((usageSummary.usage.file_storage_used_gb.limit ?? 0) - usageSummary.usage.file_storage_used_gb.current).toFixed(2)} GB restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Enhanced Usage Metrics with Predictive Analytics */}
|
|
{forecastUsage && forecast && (
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
|
<TrendingUp className="w-5 h-5 mr-2 text-purple-500" />
|
|
Análisis Predictivo de Uso
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Predicciones basadas en tendencias de crecimiento
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Products */}
|
|
<UsageMetricCard
|
|
metric="products"
|
|
label="Productos"
|
|
current={forecastUsage.products.current}
|
|
limit={forecastUsage.products.limit}
|
|
trend={forecastUsage.products.trend}
|
|
predictedBreachDate={forecastUsage.products.predictedBreachDate}
|
|
daysUntilBreach={forecastUsage.products.daysUntilBreach}
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={500}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_products')}
|
|
icon={<Package className="w-5 h-5" />}
|
|
/>
|
|
|
|
{/* Users */}
|
|
<UsageMetricCard
|
|
metric="users"
|
|
label="Usuarios"
|
|
current={forecastUsage.users.current}
|
|
limit={forecastUsage.users.limit}
|
|
trend={forecastUsage.users.trend}
|
|
predictedBreachDate={forecastUsage.users.predictedBreachDate}
|
|
daysUntilBreach={forecastUsage.users.daysUntilBreach}
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={20}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_users')}
|
|
icon={<Users className="w-5 h-5" />}
|
|
/>
|
|
|
|
{/* Locations */}
|
|
<UsageMetricCard
|
|
metric="locations"
|
|
label="Ubicaciones"
|
|
current={forecastUsage.locations.current}
|
|
limit={forecastUsage.locations.limit}
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={3}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_locations')}
|
|
icon={<MapPin className="w-5 h-5" />}
|
|
/>
|
|
|
|
{/* Training Jobs */}
|
|
<UsageMetricCard
|
|
metric="training_jobs"
|
|
label="Entrenamientos IA"
|
|
current={forecastUsage.trainingJobs.current}
|
|
limit={forecastUsage.trainingJobs.limit}
|
|
unit="/día"
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={5}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_training')}
|
|
icon={<Database className="w-5 h-5" />}
|
|
/>
|
|
|
|
{/* Forecasts */}
|
|
<UsageMetricCard
|
|
metric="forecasts"
|
|
label="Pronósticos"
|
|
current={forecastUsage.forecasts.current}
|
|
limit={forecastUsage.forecasts.limit}
|
|
unit="/día"
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={100}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_forecasts')}
|
|
icon={<TrendingUp className="w-5 h-5" />}
|
|
/>
|
|
|
|
{/* Storage */}
|
|
<UsageMetricCard
|
|
metric="storage"
|
|
label="Almacenamiento"
|
|
current={forecastUsage.storage.current}
|
|
limit={forecastUsage.storage.limit}
|
|
unit=" GB"
|
|
trend={forecastUsage.storage.trend}
|
|
predictedBreachDate={forecastUsage.storage.predictedBreachDate}
|
|
daysUntilBreach={forecastUsage.storage.daysUntilBreach}
|
|
currentTier={usageSummary.plan}
|
|
upgradeTier="professional"
|
|
upgradeLimit={10}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_storage')}
|
|
icon={<HardDrive className="w-5 h-5" />}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* High Usage Warning Banner (Starter tier with >80% usage) */}
|
|
{usageSummary.plan === 'starter' && forecastUsage && forecastUsage.highUsageMetrics.length > 0 && (
|
|
<Card className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border-2 border-blue-500">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center flex-shrink-0">
|
|
<Sparkles className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-bold mb-2">
|
|
¡Estás superando el plan Starter!
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
|
Estás usando {forecastUsage.highUsageMetrics.length} métrica{forecastUsage.highUsageMetrics.length > 1 ? 's' : ''} con más del 80% de capacidad.
|
|
Actualiza a Professional para obtener 10 veces más capacidad y funciones avanzadas.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
onClick={() => handleUpgradeClick('professional', 'high_usage_banner')}
|
|
className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white"
|
|
>
|
|
Actualizar a Professional
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowROI(true)}
|
|
>
|
|
Ver Tus Ahorros
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* ROI Calculator (Starter tier only) */}
|
|
{usageSummary.plan === 'starter' && (
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Calcula Tus Ahorros</h3>
|
|
<button
|
|
onClick={() => setShowROI(!showROI)}
|
|
className="text-sm text-[var(--color-primary)] hover:underline flex items-center gap-1"
|
|
>
|
|
{showROI ? (
|
|
<>
|
|
<ChevronUp className="w-4 h-4" />
|
|
Ocultar Calculadora
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronDown className="w-4 h-4" />
|
|
Mostrar Calculadora
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{showROI && (
|
|
<ROICalculator
|
|
currentTier="starter"
|
|
targetTier="professional"
|
|
monthlyPrice={149}
|
|
context="settings"
|
|
defaultExpanded={false}
|
|
onUpgrade={() => handleUpgradeClick('professional', 'roi_calculator')}
|
|
/>
|
|
)}
|
|
</Card>
|
|
)}
|
|
|
|
{/* Plan Comparison */}
|
|
{availablePlans && (
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Comparar Planes</h3>
|
|
<button
|
|
onClick={() => setShowComparison(!showComparison)}
|
|
className="text-sm text-[var(--color-primary)] hover:underline flex items-center gap-1"
|
|
>
|
|
{showComparison ? (
|
|
<>
|
|
<ChevronUp className="w-4 h-4" />
|
|
Ocultar Comparación
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronDown className="w-4 h-4" />
|
|
Mostrar Comparación Detallada
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{showComparison && (
|
|
<PlanComparisonTable
|
|
plans={availablePlans}
|
|
currentTier={usageSummary.plan}
|
|
onSelectPlan={(tier) => handleUpgradeClick(tier, 'comparison_table')}
|
|
mode="inline"
|
|
/>
|
|
)}
|
|
</Card>
|
|
)}
|
|
|
|
{/* Available Plans */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
|
Planes Disponibles
|
|
</h3>
|
|
<SubscriptionPricingCards
|
|
mode="settings"
|
|
selectedPlan={usageSummary.plan}
|
|
onPlanSelect={(plan) => handleUpgradeClick(plan, 'pricing_cards')}
|
|
showPilotBanner={false}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Invoices Section */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
|
<Download className="w-5 h-5 mr-2 text-blue-500" />
|
|
Historial de Facturas
|
|
</h3>
|
|
</div>
|
|
|
|
{invoicesLoading && !invoicesLoaded ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<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 facturas...</p>
|
|
</div>
|
|
</div>
|
|
) : invoices.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-full">
|
|
<Download className="w-8 h-8 text-[var(--text-tertiary)]" />
|
|
</div>
|
|
<p className="text-[var(--text-secondary)]">No hay facturas disponibles</p>
|
|
<p className="text-sm text-[var(--text-tertiary)]">Las facturas aparecerán aquí una vez realizados los pagos</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-[var(--border-color)]">
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Fecha</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Descripción</th>
|
|
<th className="text-right py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Monto</th>
|
|
<th className="text-center py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Estado</th>
|
|
<th className="text-center py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invoices.map((invoice) => (
|
|
<tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)] transition-colors">
|
|
<td className="py-3 px-4 text-[var(--text-primary)] font-medium">
|
|
{new Date(invoice.date).toLocaleDateString('es-ES', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
})}
|
|
</td>
|
|
<td className="py-3 px-4 text-[var(--text-primary)]">
|
|
{invoice.description || 'Suscripción'}
|
|
</td>
|
|
<td className="py-3 px-4 text-[var(--text-primary)] font-semibold text-right">
|
|
{subscriptionService.formatPrice(invoice.amount)}
|
|
</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<Badge variant={invoice.status === 'paid' ? 'success' : invoice.status === 'open' ? 'warning' : 'default'}>
|
|
{invoice.status === 'paid' ? 'Pagada' : invoice.status === 'open' ? 'Pendiente' : invoice.status}
|
|
</Badge>
|
|
</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleDownloadInvoice(invoice)}
|
|
disabled={!invoice.invoice_pdf && !invoice.hosted_invoice_url}
|
|
className="flex items-center gap-2 mx-auto"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
{invoice.invoice_pdf ? 'PDF' : 'Ver'}
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Subscription Management */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<Settings className="w-5 h-5 mr-2 text-purple-500" />
|
|
Gestión de Suscripción
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Payment Method Card */}
|
|
<div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)] hover:border-[var(--color-primary)]/30 transition-colors">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20 flex-shrink-0">
|
|
<CreditCard className="w-6 h-6 text-blue-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">Método de Pago</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
Actualiza tu información de pago para asegurar la continuidad de tu servicio sin interrupciones.
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
className="flex items-center gap-2 w-full sm:w-auto"
|
|
onClick={() => showToast.info('Función disponible próximamente')}
|
|
>
|
|
<CreditCard className="w-4 h-4" />
|
|
Actualizar Método de Pago
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cancel Subscription Card */}
|
|
<div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)] hover:border-red-500/30 transition-colors">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
|
|
<AlertCircle className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">Cancelar Suscripción</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
Si cancelas, mantendrás acceso de solo lectura hasta el final de tu período de facturación actual.
|
|
</p>
|
|
<Button
|
|
variant="danger"
|
|
onClick={handleCancellationClick}
|
|
className="flex items-center gap-2 w-full sm:w-auto"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Cancelar Suscripción
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Info */}
|
|
<div className="mt-6 p-4 bg-blue-500/5 border border-blue-500/20 rounded-lg">
|
|
<div className="flex items-start gap-3">
|
|
<Activity className="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-[var(--text-primary)] font-medium mb-1">
|
|
¿Necesitas ayuda?
|
|
</p>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Si tienes preguntas sobre tu suscripción o necesitas asistencia, contacta a nuestro equipo de soporte en{' '}
|
|
<a href="mailto:support@bakery-ia.com" className="text-blue-500 hover:text-white hover:bg-blue-500 px-2 py-0.5 rounded transition-all duration-200 no-underline">
|
|
support@bakery-ia.com
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{/* Upgrade Dialog */}
|
|
{upgradeDialogOpen && selectedPlan && availablePlans && (
|
|
<DialogModal
|
|
isOpen={upgradeDialogOpen}
|
|
onClose={() => setUpgradeDialogOpen(false)}
|
|
title="Confirmar Cambio de Plan"
|
|
message={
|
|
<div className="space-y-3">
|
|
<p>¿Estás seguro de que quieres cambiar tu plan de suscripción?</p>
|
|
{availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans] && usageSummary && (
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
|
|
<div className="flex justify-between">
|
|
<span>Plan actual:</span>
|
|
<span>{t(`plans.${usageSummary.plan}.name`, usageSummary.plan)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Nuevo plan:</span>
|
|
<span>{t(`plans.${selectedPlan}.name`, availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].name)}</span>
|
|
</div>
|
|
<div className="flex justify-between font-medium">
|
|
<span>Nuevo precio:</span>
|
|
<span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].monthly_price)}/mes</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
type="confirm"
|
|
onConfirm={handleUpgradeConfirm}
|
|
onCancel={() => setUpgradeDialogOpen(false)}
|
|
confirmLabel="Confirmar Cambio"
|
|
cancelLabel="Cancelar"
|
|
loading={upgrading}
|
|
/>
|
|
)}
|
|
|
|
{/* Cancellation Dialog */}
|
|
{cancellationDialogOpen && (
|
|
<DialogModal
|
|
isOpen={cancellationDialogOpen}
|
|
onClose={() => setCancellationDialogOpen(false)}
|
|
title="Cancelar Suscripción"
|
|
message={
|
|
<div className="space-y-3">
|
|
<p>¿Estás seguro de que deseas cancelar tu suscripción? Esta acción no se puede deshacer.</p>
|
|
<p>Perderás acceso a las funcionalidades premium al final del período de facturación actual.</p>
|
|
</div>
|
|
}
|
|
type="warning"
|
|
onConfirm={handleCancelSubscription}
|
|
onCancel={() => setCancellationDialogOpen(false)}
|
|
confirmLabel="Confirmar Cancelación"
|
|
cancelLabel="Volver"
|
|
loading={cancelling}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubscriptionPage;
|