New alert service
This commit is contained in:
Urtzi Alfaro
@@ -17,7 +17,7 @@ import {
|
||||
Building,
|
||||
Package,
|
||||
BarChart3,
|
||||
ForkKnife,
|
||||
|
||||
ChefHat,
|
||||
CreditCard,
|
||||
Bell,
|
||||
@@ -295,10 +295,8 @@ const DemoPage = () => {
|
||||
// Full success - navigate immediately
|
||||
clearInterval(progressInterval);
|
||||
setTimeout(() => {
|
||||
const targetUrl = tier === 'enterprise'
|
||||
? `/app/tenants/${sessionData.virtual_tenant_id}/enterprise`
|
||||
: `/app/tenants/${sessionData.virtual_tenant_id}/dashboard`;
|
||||
navigate(targetUrl);
|
||||
// Navigate to the main dashboard which will automatically route to enterprise or bakery dashboard based on subscription tier
|
||||
navigate('/app/dashboard');
|
||||
}, 1000);
|
||||
return;
|
||||
} else if (statusData.status === 'PARTIAL' || statusData.status === 'partial') {
|
||||
@@ -582,9 +580,8 @@ const DemoPage = () => {
|
||||
{demoOptions.map((option) => (
|
||||
<Card
|
||||
key={option.id}
|
||||
className={`cursor-pointer hover:shadow-xl transition-all border-2 ${
|
||||
selectedTier === option.id ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
className={`cursor-pointer hover:shadow-xl transition-all border-2 ${selectedTier === option.id ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
onClick={() => setSelectedTier(option.id)}
|
||||
>
|
||||
<CardHeader>
|
||||
@@ -679,62 +676,69 @@ const DemoPage = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Loading Progress */}
|
||||
{/* Loading Progress Modal */}
|
||||
{creatingTier !== null && (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center text-[var(--text-primary)]">Configurando Tu Demo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Progreso total</span>
|
||||
<span>{cloneProgress.overall}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${cloneProgress.overall}%` }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{creatingTier === 'enterprise' && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="font-medium">Obrador Central</span>
|
||||
<span>{cloneProgress.parent}%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{cloneProgress.children.map((progress, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-xs text-[var(--text-tertiary)] mb-1">Outlet {index + 1}</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="text-xs mt-1">{progress}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="font-medium">Distribución</span>
|
||||
<span>{cloneProgress.distribution}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-purple-500 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${cloneProgress.distribution}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Modal
|
||||
isOpen={creatingTier !== null}
|
||||
onClose={() => { }}
|
||||
size="md"
|
||||
>
|
||||
<ModalHeader
|
||||
title="Configurando Tu Demo"
|
||||
showCloseButton={false}
|
||||
/>
|
||||
<ModalBody padding="lg">
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Progreso total</span>
|
||||
<span>{cloneProgress.overall}%</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${cloneProgress.overall}%` }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-[var(--text-secondary)] mt-4">
|
||||
{getLoadingMessage(creatingTier, cloneProgress.overall)}
|
||||
</div>
|
||||
|
||||
{creatingTier === 'enterprise' && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="font-medium">Obrador Central</span>
|
||||
<span>{cloneProgress.parent}%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{cloneProgress.children.map((progress, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-xs text-[var(--text-tertiary)] mb-1">Outlet {index + 1}</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="text-xs mt-1">{progress}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="font-medium">Distribución</span>
|
||||
<span>{cloneProgress.distribution}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-purple-500 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${cloneProgress.distribution}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* Error Alert */}
|
||||
@@ -798,11 +802,9 @@ const DemoPage = () => {
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
const tierUrl = partialWarning.tier === 'enterprise'
|
||||
? `/demo/${partialWarning.sessionData.session_id}/enterprise`
|
||||
: `/demo/${partialWarning.sessionData.session_id}`;
|
||||
// Navigate to the main dashboard which will automatically route to enterprise or bakery dashboard based on subscription tier
|
||||
setPartialWarning(null);
|
||||
navigate(tierUrl);
|
||||
navigate('/app/dashboard');
|
||||
}}
|
||||
>
|
||||
Continuar con Demo Parcial
|
||||
@@ -881,11 +883,9 @@ const DemoPage = () => {
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
const tierUrl = timeoutModal.tier === 'enterprise'
|
||||
? `/demo/${timeoutModal.sessionData.session_id}/enterprise`
|
||||
: `/demo/${timeoutModal.sessionData.session_id}`;
|
||||
// Navigate to the main dashboard which will automatically route to enterprise or bakery dashboard based on subscription tier
|
||||
setTimeoutModal(null);
|
||||
navigate(tierUrl);
|
||||
navigate('/app/dashboard');
|
||||
}}
|
||||
>
|
||||
Iniciar con Datos Parciales
|
||||
@@ -905,42 +905,6 @@ const DemoPage = () => {
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* Comparison Section */}
|
||||
<div className="mt-16">
|
||||
<h2 className="text-3xl font-bold text-center mb-8 text-[var(--text-primary)]">Comparación de Funcionalidades</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="grid grid-cols-3 divide-x divide-[var(--border-primary)]">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700">
|
||||
<h3 className="font-semibold text-center text-[var(--text-primary)]">Función</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-center font-semibold text-blue-600 dark:text-blue-400">Professional</div>
|
||||
<div className="text-center text-sm text-[var(--text-tertiary)]">Individual Bakery</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-center font-semibold text-purple-600 dark:text-purple-400">Enterprise</div>
|
||||
<div className="text-center text-sm text-[var(--text-tertiary)]">Chain of Bakeries</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{[
|
||||
{ feature: 'Número Máximo de Ubicaciones', professional: '1', enterprise: 'Ilimitado' },
|
||||
{ feature: 'Gestión de Inventario', professional: '✓', enterprise: '✓ Agregado' },
|
||||
{ feature: 'Forecasting con IA', professional: 'Personalizado', enterprise: 'Agregado + Individual' },
|
||||
{ feature: 'Planificación de Producción', professional: '✓', enterprise: '✓ Centralizada' },
|
||||
{ feature: 'Transferencias Internas', professional: '×', enterprise: '✓ Optimizadas' },
|
||||
{ feature: 'Logística y Rutas', professional: '×', enterprise: '✓ Optimización VRP' },
|
||||
{ feature: 'Dashboard Multi-ubicación', professional: '×', enterprise: '✓ Visión de Red' },
|
||||
{ feature: 'Reportes Consolidados', professional: '×', enterprise: '✓ Nivel de Red' }
|
||||
].map((row, index) => (
|
||||
<div key={index} className={`grid grid-cols-3 divide-x divide-[var(--border-primary)] ${index % 2 === 0 ? 'bg-gray-50 dark:bg-gray-700' : 'bg-white dark:bg-gray-800'}`}>
|
||||
<div className="p-3 text-sm text-[var(--text-secondary)]">{row.feature}</div>
|
||||
<div className="p-3 text-center text-sm text-[var(--text-secondary)]">{row.professional}</div>
|
||||
<div className="p-3 text-center text-sm text-[var(--text-secondary)]">{row.enterprise}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PublicLayout>
|
||||
|
||||
Reference in New Issue
Block a user