318 lines
15 KiB
TypeScript
318 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Header } from '@/components/layouts/header';
|
|
import { Card, CardContent, CardHeader, CardTitle, Button } from '@horux/shared-ui';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { isGlobalAdminRfc, DESPACHO_OVERAGE_PRICE_MENSUAL } from '@horux/shared';
|
|
import { Tags, ShieldAlert, Info, AlertTriangle, Check, Loader2, Pencil, X } from 'lucide-react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { apiClient } from '@/lib/api/client';
|
|
|
|
interface DespachoPlanLimits {
|
|
plan: string;
|
|
nombre: string;
|
|
monthly: number | null;
|
|
firstYear: number | null;
|
|
renewal: number | null;
|
|
permiteMonthly: boolean;
|
|
maxRfcs: number;
|
|
maxUsers: number;
|
|
timbresIncluidosMes: number;
|
|
dbMode: 'BYO' | 'MANAGED';
|
|
permiteServidorBackup: boolean;
|
|
permiteSatIncremental: boolean;
|
|
}
|
|
|
|
const PLAN_ORDER = ['trial', 'mi_empresa', 'mi_empresa_plus', 'business_control', 'business_cloud', 'custom'];
|
|
|
|
function fmtCurrency(n: number | null): string {
|
|
if (n == null) return '—';
|
|
return `$${n.toLocaleString('es-MX')}`;
|
|
}
|
|
|
|
async function listDespachoCatalogo(): Promise<DespachoPlanLimits[]> {
|
|
const res = await apiClient.get<{ data: DespachoPlanLimits[] }>('/planes/despacho');
|
|
return res.data.data;
|
|
}
|
|
|
|
async function updateDespachoCatalogo(plan: string, patch: Partial<DespachoPlanLimits>): Promise<DespachoPlanLimits> {
|
|
const res = await apiClient.patch<DespachoPlanLimits>(`/planes/despacho/${plan}`, patch);
|
|
return res.data;
|
|
}
|
|
|
|
export default function PreciosSuscripcionPage() {
|
|
const { user } = useAuthStore();
|
|
const queryClient = useQueryClient();
|
|
const isGlobalAdmin = isGlobalAdminRfc(user?.tenantRfc, user?.role, user?.platformRoles);
|
|
|
|
const [editingPlan, setEditingPlan] = useState<string | null>(null);
|
|
const [draft, setDraft] = useState<Partial<DespachoPlanLimits>>({});
|
|
|
|
const { data: plans = [], isLoading } = useQuery({
|
|
queryKey: ['despacho-catalogo'],
|
|
queryFn: listDespachoCatalogo,
|
|
enabled: isGlobalAdmin,
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ plan, patch }: { plan: string; patch: Partial<DespachoPlanLimits> }) =>
|
|
updateDespachoCatalogo(plan, patch),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['despacho-catalogo'] });
|
|
setEditingPlan(null);
|
|
setDraft({});
|
|
},
|
|
});
|
|
|
|
if (!isGlobalAdmin) {
|
|
return (
|
|
<>
|
|
<Header title="Precios de suscripciones" />
|
|
<main className="p-6">
|
|
<Card>
|
|
<CardContent className="py-12 text-center">
|
|
<ShieldAlert className="h-12 w-12 text-muted-foreground/40 mx-auto mb-3" />
|
|
<p className="font-semibold">Acceso restringido</p>
|
|
<p className="text-sm text-muted-foreground mt-1">Solo admin global puede consultar el catálogo de precios.</p>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const startEdit = (p: DespachoPlanLimits) => {
|
|
setEditingPlan(p.plan);
|
|
setDraft({
|
|
nombre: p.nombre,
|
|
monthly: p.monthly,
|
|
firstYear: p.firstYear,
|
|
renewal: p.renewal,
|
|
permiteMonthly: p.permiteMonthly,
|
|
maxRfcs: p.maxRfcs,
|
|
maxUsers: p.maxUsers,
|
|
timbresIncluidosMes: p.timbresIncluidosMes,
|
|
dbMode: p.dbMode,
|
|
permiteServidorBackup: p.permiteServidorBackup,
|
|
permiteSatIncremental: p.permiteSatIncremental,
|
|
});
|
|
};
|
|
|
|
const cancelEdit = () => {
|
|
setEditingPlan(null);
|
|
setDraft({});
|
|
};
|
|
|
|
const saveEdit = (plan: string) => {
|
|
updateMutation.mutate({ plan, patch: draft });
|
|
};
|
|
|
|
const sorted = [...plans].sort((a, b) => PLAN_ORDER.indexOf(a.plan) - PLAN_ORDER.indexOf(b.plan));
|
|
|
|
return (
|
|
<>
|
|
<Header title="Precios de suscripciones" />
|
|
<main className="p-6 space-y-6">
|
|
<Card className="bg-muted/30 border-dashed">
|
|
<CardContent className="py-4 text-sm flex items-start gap-2">
|
|
<Info className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
Los planes despacho se almacenan en la tabla <code className="text-xs bg-muted px-1 py-0.5 rounded">despacho_plan_prices</code>.
|
|
Puedes editar precios y limits desde aquí — los cambios aplican a contrataciones nuevas y renovaciones; las suscripciones vigentes
|
|
conservan su precio. Las <strong>features</strong> de cada plan siguen versionadas en código.
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Tags className="h-5 w-5" />
|
|
Planes despacho
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="py-8 text-center text-muted-foreground">
|
|
<Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />
|
|
Cargando catálogo…
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b text-left text-muted-foreground">
|
|
<th className="py-2 pr-4">Plan</th>
|
|
<th className="py-2 pr-4 text-right">Mensual</th>
|
|
<th className="py-2 pr-4 text-right">Anual 1°</th>
|
|
<th className="py-2 pr-4 text-right">Renovación</th>
|
|
<th className="py-2 pr-4 text-right">RFCs</th>
|
|
<th className="py-2 pr-4 text-right">Usuarios</th>
|
|
<th className="py-2 pr-4 text-right">Timbres</th>
|
|
<th className="py-2 pr-4">DB</th>
|
|
<th className="py-2 pr-4">Backup</th>
|
|
<th className="py-2 pr-4">SAT Inc</th>
|
|
<th className="py-2 pr-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sorted.map((p) => {
|
|
const editing = editingPlan === p.plan;
|
|
return (
|
|
<tr key={p.plan} className="border-b last:border-0 hover:bg-muted/40 align-middle">
|
|
<td className="py-2 pr-4 font-medium">
|
|
{editing ? (
|
|
<input className="w-32 px-2 py-1 border rounded text-sm bg-background"
|
|
value={draft.nombre ?? ''}
|
|
onChange={(e) => setDraft({ ...draft, nombre: e.target.value })} />
|
|
) : (
|
|
<>{p.nombre} <span className="text-xs text-muted-foreground font-normal">({p.plan})</span></>
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-20 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.monthly ?? ''}
|
|
onChange={(e) => setDraft({ ...draft, monthly: e.target.value === '' ? null : Number(e.target.value) })} />
|
|
) : (
|
|
fmtCurrency(p.monthly)
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-24 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.firstYear ?? ''}
|
|
onChange={(e) => setDraft({ ...draft, firstYear: e.target.value === '' ? null : Number(e.target.value) })} />
|
|
) : (
|
|
fmtCurrency(p.firstYear)
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-24 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.renewal ?? ''}
|
|
onChange={(e) => setDraft({ ...draft, renewal: e.target.value === '' ? null : Number(e.target.value) })} />
|
|
) : (
|
|
fmtCurrency(p.renewal)
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-16 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.maxRfcs ?? 0}
|
|
onChange={(e) => setDraft({ ...draft, maxRfcs: Number(e.target.value) })} />
|
|
) : (
|
|
p.maxRfcs
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-16 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.maxUsers ?? 0}
|
|
onChange={(e) => setDraft({ ...draft, maxUsers: Number(e.target.value) })} />
|
|
) : (
|
|
p.maxUsers === -1 ? '∞' : p.maxUsers
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-right">
|
|
{editing ? (
|
|
<input type="number" className="w-16 px-2 py-1 border rounded text-sm text-right bg-background"
|
|
value={draft.timbresIncluidosMes ?? 0}
|
|
onChange={(e) => setDraft({ ...draft, timbresIncluidosMes: Number(e.target.value) })} />
|
|
) : (
|
|
p.timbresIncluidosMes
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4">
|
|
{editing ? (
|
|
<select className="px-2 py-1 border rounded text-sm bg-background"
|
|
value={draft.dbMode ?? 'MANAGED'}
|
|
onChange={(e) => setDraft({ ...draft, dbMode: e.target.value as 'BYO' | 'MANAGED' })}>
|
|
<option value="MANAGED">MANAGED</option>
|
|
<option value="BYO">BYO</option>
|
|
</select>
|
|
) : (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-muted">{p.dbMode}</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-center">
|
|
{editing ? (
|
|
<input type="checkbox"
|
|
checked={draft.permiteServidorBackup ?? false}
|
|
onChange={(e) => setDraft({ ...draft, permiteServidorBackup: e.target.checked })} />
|
|
) : (
|
|
p.permiteServidorBackup ? <Check className="h-4 w-4 text-green-600 inline" /> : <span className="text-muted-foreground">—</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-center">
|
|
{editing ? (
|
|
<input type="checkbox"
|
|
checked={draft.permiteSatIncremental ?? false}
|
|
onChange={(e) => setDraft({ ...draft, permiteSatIncremental: e.target.checked })} />
|
|
) : (
|
|
p.permiteSatIncremental ? <Check className="h-4 w-4 text-green-600 inline" /> : <span className="text-muted-foreground">—</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2 pr-2">
|
|
{editing ? (
|
|
<div className="flex gap-1 justify-end">
|
|
<Button size="sm" variant="default" onClick={() => saveEdit(p.plan)} disabled={updateMutation.isPending}>
|
|
{updateMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
|
|
</Button>
|
|
<Button size="sm" variant="ghost" onClick={cancelEdit} disabled={updateMutation.isPending}>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Button size="sm" variant="ghost" onClick={() => startEdit(p)}>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{updateMutation.isError && (
|
|
<Card className="bg-red-50 dark:bg-red-950/30 border-red-200">
|
|
<CardContent className="py-3 text-sm text-red-700 dark:text-red-400">
|
|
Error guardando: {String((updateMutation.error as any)?.response?.data?.message || updateMutation.error)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Card className="bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-900/50">
|
|
<CardContent className="py-4 text-sm flex items-start gap-2">
|
|
<AlertTriangle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
|
|
<div className="space-y-1">
|
|
<p>
|
|
<strong>Cobro adicional por RFC extra:</strong>{' '}
|
|
<span className="font-mono">${DESPACHO_OVERAGE_PRICE_MENSUAL}/mes</span> por
|
|
cada contribuyente que exceda el límite. Solo aplica a
|
|
<strong> Business Control</strong> y <strong>Enterprise</strong>; los planes
|
|
Mi Empresa tienen límite duro de 1 RFC.
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
<strong>maxUsers = -1</strong> significa ilimitado. <strong>trial</strong> y <strong>custom</strong> no tienen precio fijo
|
|
(trial es gratis 30 días; custom se asigna con monto variable al provisionar).
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
<strong>SAT Inc</strong> habilita 3 syncs SAT extra al día (11:00, 15:00, 19:00) además del daily de las 03:00.
|
|
Ventana de 8h por sync, deduplicado por UUID. Latencia típica de un CFDI ~1-2h en horario laboral
|
|
vs ~24h con solo el daily.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|