Initial commit: Horux Despachos project

2026-04-27 01:11:06 -06:00
commit 56a05ba767
604 changed files with 121723 additions and 0 deletions
--- a/apps/web/app/(dashboard)/configuracion/planes-despacho/page.tsx
+++ b/apps/web/app/(dashboard)/configuracion/planes-despacho/page.tsx
@@ -0,0 +1,382 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@horux/shared-ui';
+import { CheckCircle2, Server, Cloud, Clock, ExternalLink } from 'lucide-react';
+import { apiClient } from '@/lib/api/client';
+import { subscribeMe, changeMyPlan, cancelMySubscription } from '@/lib/api/subscription';
+
+type Despachoplan = 'trial' | 'business_control' | 'business_cloud' | 'mi_empresa' | 'mi_empresa_plus';
+type PaidPlan = 'business_control' | 'business_cloud' | 'mi_empresa' | 'mi_empresa_plus';
+
+interface SubscriptionInfo {
+  status: string;
+  plan: string;
+  amount: number;
+  currentPeriodStart: string | null;
+  currentPeriodEnd: string | null;
+}
+
+interface PlanInfo {
+  plan: Despachoplan;
+  dbMode: string;
+  trialEndsAt: string | null;
+  isTrialActive: boolean;
+  subscription: SubscriptionInfo | null;
+}
+
+function daysUntil(isoDate: string): number {
+  const diff = new Date(isoDate).getTime() - Date.now();
+  return Math.max(0, Math.ceil(diff / (1000 * 60 * 60 * 24)));
+}
+
+type Frequency = 'monthly' | 'annual';
+
+export default function PlanesDespachoPage() {
+  const [planInfo, setPlanInfo] = useState<PlanInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<null | PaidPlan | 'cancel'>(null);
+  const [message, setMessage] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
+  // Toggle mensual/anual solo aplica a Mi Empresa y Mi Empresa+. Business
+  // Control y Enterprise siempre se cobran anual. Default monthly para
+  // bajar friction inicial; el descuento del 17% al pagar anual se
+  // muestra como CTA secundario.
+  const [meFreq, setMeFreq] = useState<Frequency>('monthly');
+  const [mePlusFreq, setMePlusFreq] = useState<Frequency>('monthly');
+
+  const fetchPlan = () => {
+    apiClient.get<PlanInfo>('/despachos/me/plan')
+      .then(res => setPlanInfo(res.data))
+      .catch(() => setPlanInfo(null));
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    apiClient.get<PlanInfo>('/despachos/me/plan')
+      .then(res => setPlanInfo(res.data))
+      .catch(() => setPlanInfo(null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const currentPlan = planInfo?.plan ?? null;
+  const trialDaysLeft = planInfo?.trialEndsAt ? daysUntil(planInfo.trialEndsAt) : 0;
+  const hasPaidPlan = currentPlan === 'business_control' || currentPlan === 'business_cloud' || currentPlan === 'mi_empresa' || currentPlan === 'mi_empresa_plus';
+
+  /** Resuelve la frecuencia para un plan. Mi Empresa y Mi Empresa+ leen su
+   * propio toggle; el resto (business_*) siempre annual. */
+  function frequencyFor(plan: PaidPlan): Frequency {
+    if (plan === 'mi_empresa') return meFreq;
+    if (plan === 'mi_empresa_plus') return mePlusFreq;
+    return 'annual';
+  }
+
+  async function handleContratar(plan: PaidPlan) {
+    const frequency = frequencyFor(plan);
+    setBusy(plan);
+    setMessage(null);
+    try {
+      const result = await subscribeMe({ plan, frequency });
+      window.open(result.paymentUrl, '_blank');
+      setMessage({ kind: 'ok', text: 'Abrimos el pago de MercadoPago en otra pestana. Al completar regresa aqui.' });
+    } catch (err: any) {
+      const msg: string = err?.response?.data?.message || err?.message || '';
+      if (/Ya existe una suscripci/i.test(msg)) {
+        // Ya hay sub activa/pendiente en otro plan — tratar como cambio
+        try {
+          await changeMyPlan({ plan, frequency });
+          setMessage({ kind: 'ok', text: 'Cambio de plan programado para el final del periodo actual.' });
+          fetchPlan();
+        } catch (changeErr: any) {
+          setMessage({ kind: 'err', text: changeErr?.response?.data?.message || changeErr?.message || 'Error al cambiar el plan' });
+        }
+      } else {
+        setMessage({ kind: 'err', text: msg || 'Error al contratar el plan' });
+      }
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function handleCancelar() {
+    if (!confirm('Seguro que quieres cancelar la suscripcion? Conservaras acceso hasta el final del periodo pagado.')) return;
+    setBusy('cancel');
+    setMessage(null);
+    try {
+      await cancelMySubscription();
+      setMessage({ kind: 'ok', text: 'Suscripcion cancelada. Acceso activo hasta el final del periodo actual.' });
+      fetchPlan();
+    } catch (err: any) {
+      setMessage({ kind: 'err', text: err?.response?.data?.message || err?.message || 'Error al cancelar' });
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  function ActiveBadge() {
+    return (
+      <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-green-600 text-white text-xs px-3 py-1 rounded-full font-medium whitespace-nowrap">
+        Plan actual
+      </div>
+    );
+  }
+
+  /**
+   * Toggle binario Mensual/Anual. La opción anual va resaltada con un
+   * pequeño badge "−17%" para enfocar el descuento.
+   */
+  function FrequencyToggle({ value, onChange }: { value: Frequency; onChange: (v: Frequency) => void }) {
+    return (
+      <div className="flex bg-muted rounded-lg p-1 text-xs font-medium">
+        <button
+          type="button"
+          onClick={() => onChange('monthly')}
+          className={`flex-1 py-1.5 rounded-md transition-colors ${value === 'monthly' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+        >
+          Mensual
+        </button>
+        <button
+          type="button"
+          onClick={() => onChange('annual')}
+          className={`flex-1 py-1.5 rounded-md transition-colors flex items-center justify-center gap-1 ${value === 'annual' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+        >
+          Anual <span className="text-emerald-600 dark:text-emerald-400 text-[10px] font-bold">−17%</span>
+        </button>
+      </div>
+    );
+  }
+
+  function PlanActionButton({ plan }: { plan: PaidPlan }) {
+    const isCurrent = currentPlan === plan;
+    if (isCurrent) {
+      return <Button disabled className="w-full">Plan actual</Button>;
+    }
+    const label = hasPaidPlan ? 'Cambiar a este plan' : 'Contratar';
+    return (
+      <Button
+        className="w-full"
+        onClick={() => handleContratar(plan)}
+        disabled={busy === plan}
+      >
+        {busy === plan ? 'Procesando...' : (
+          <>
+            <ExternalLink className="h-4 w-4 mr-2" />
+            {label}
+          </>
+        )}
+      </Button>
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-8">
+      <div className="text-center space-y-2">
+        <h1 className="text-2xl font-bold">Planes Horux Despachos</h1>
+        <p className="text-muted-foreground">Tres planes: Mi Empresa para usuarios individuales, Business Control y Enterprise para despachos.</p>
+      </div>
+
+      {/* Trial banner */}
+      {!loading && planInfo?.isTrialActive && (
+        <div className="flex items-center gap-3 bg-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-800 rounded-lg px-4 py-3 max-w-3xl mx-auto">
+          <Clock className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
+          <div className="text-sm">
+            <span className="font-semibold text-amber-800 dark:text-amber-300">Periodo de prueba activo</span>
+            <span className="text-amber-700 dark:text-amber-400"> — {trialDaysLeft} {trialDaysLeft === 1 ? 'dia restante' : 'dias restantes'}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Banner de suscripción activa */}
+      {!loading && planInfo?.subscription && hasPaidPlan && (() => {
+        const sub = planInfo.subscription;
+        const periodEndDate = sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd) : null;
+        const fechaFormato = periodEndDate
+          ? periodEndDate.toLocaleDateString('es-MX', { year: 'numeric', month: 'long', day: 'numeric' })
+          : null;
+        const montoFmt = sub.amount.toLocaleString('es-MX');
+        return (
+          <div className="flex items-start gap-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg px-4 py-3 max-w-3xl mx-auto">
+            <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+            <div className="text-sm space-y-0.5">
+              <div className="font-semibold text-green-800 dark:text-green-300">
+                Suscripcion activa — {
+                  sub.plan === 'business_control' ? 'Business Control'
+                  : sub.plan === 'business_cloud' ? 'Enterprise'
+                  : sub.plan === 'mi_empresa_plus' ? 'Mi Empresa +'
+                  : 'Mi Empresa'
+                }
+              </div>
+              <div className="text-green-700 dark:text-green-400">
+                Proxima renovacion{fechaFormato ? ` el ${fechaFormato}` : ''}: <strong>${montoFmt}/año</strong>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Toast de resultado */}
+      {message && (
+        <div
+          className={`max-w-3xl mx-auto rounded-lg px-4 py-3 text-sm ${
+            message.kind === 'ok'
+              ? 'bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-300'
+              : 'bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-300'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
+        {/* Mi Empresa */}
+        <Card className={`relative flex flex-col${currentPlan === 'mi_empresa' ? ' ring-2 ring-green-500' : ''}`}>
+          {currentPlan === 'mi_empresa' && <ActiveBadge />}
+          <CardHeader className="text-center pb-2">
+            <div className="mx-auto bg-emerald-100 dark:bg-emerald-900 rounded-full p-3 w-fit mb-2">
+              <Cloud className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
+            </div>
+            <CardTitle className="text-xl">Mi Empresa</CardTitle>
+            <p className="text-sm text-muted-foreground">Para una sola empresa</p>
+          </CardHeader>
+          <CardContent className="flex flex-col flex-1 gap-4">
+            <FrequencyToggle value={meFreq} onChange={setMeFreq} />
+            <div className="text-center">
+              <div className="text-3xl font-bold">${meFreq === 'monthly' ? '580' : '5,800'}</div>
+              <p className="text-sm text-muted-foreground">{meFreq === 'monthly' ? 'por mes (IVA incluido)' : 'por año (IVA incluido)'}</p>
+              {meFreq === 'monthly' ? (
+                <p className="text-xs text-muted-foreground mt-1">o $5,800/año (ahorras 17%)</p>
+              ) : (
+                <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium">Pagas 10 meses en lugar de 12</p>
+              )}
+            </div>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>1 RFC</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>3 usuarios</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 1,000,000 CFDIs</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Base de datos en la nube</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Dashboard, CFDI, IVA/ISR, alertas, calendario</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Reportes, conciliación, documentos, facturación</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>50 timbres/mes incluidos</span></div>
+            </div>
+            <div className="mt-auto"><PlanActionButton plan="mi_empresa" /></div>
+          </CardContent>
+        </Card>
+
+        {/* Mi Empresa + */}
+        <Card className={`relative flex flex-col${currentPlan === 'mi_empresa_plus' ? ' ring-2 ring-green-500' : ''}`}>
+          {currentPlan === 'mi_empresa_plus' && <ActiveBadge />}
+          <CardHeader className="text-center pb-2">
+            <div className="mx-auto bg-teal-100 dark:bg-teal-900 rounded-full p-3 w-fit mb-2">
+              <Cloud className="h-6 w-6 text-teal-600 dark:text-teal-400" />
+            </div>
+            <CardTitle className="text-xl">Mi Empresa +</CardTitle>
+            <p className="text-sm text-muted-foreground">Mi Empresa con API y Lolita IA</p>
+          </CardHeader>
+          <CardContent className="flex flex-col flex-1 gap-4">
+            <FrequencyToggle value={mePlusFreq} onChange={setMePlusFreq} />
+            <div className="text-center">
+              <div className="text-3xl font-bold">${mePlusFreq === 'monthly' ? '900' : '9,000'}</div>
+              <p className="text-sm text-muted-foreground">{mePlusFreq === 'monthly' ? 'por mes (IVA incluido)' : 'por año (IVA incluido)'}</p>
+              {mePlusFreq === 'monthly' ? (
+                <p className="text-xs text-muted-foreground mt-1">o $9,000/año (ahorras 17%)</p>
+              ) : (
+                <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium">Pagas 10 meses en lugar de 12</p>
+              )}
+            </div>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>1 RFC</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>3 usuarios</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 1,000,000 CFDIs</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Base de datos en la nube</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Dashboard, CFDI, IVA/ISR, alertas, calendario</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Reportes, conciliación, documentos, facturación</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>50 timbres/mes incluidos</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span><strong>API REST</strong> incluida</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span><strong>Lolita IA</strong> agente fiscal</span></div>
+            </div>
+            <div className="mt-auto"><PlanActionButton plan="mi_empresa_plus" /></div>
+          </CardContent>
+        </Card>
+
+        {/* Business Control */}
+        <Card className={`relative flex flex-col${currentPlan === 'business_control' ? ' ring-2 ring-green-500' : ' border-primary ring-2 ring-primary/20'}`}>
+          {currentPlan === 'business_control'
+            ? <ActiveBadge />
+            : (
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-3 py-1 rounded-full">
+                Más popular
+              </div>
+            )
+          }
+          <CardHeader className="text-center pb-2">
+            <div className="mx-auto bg-blue-100 dark:bg-blue-900 rounded-full p-3 w-fit mb-2">
+              <Server className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <CardTitle className="text-xl">Business Control</CardTitle>
+            <p className="text-sm text-muted-foreground">Tu servidor, tus datos</p>
+          </CardHeader>
+          <CardContent className="flex flex-col flex-1 gap-4">
+            <div className="text-center">
+              <div className="text-3xl font-bold">$25,850</div>
+              <p className="text-sm text-muted-foreground">por año (IVA incluido)</p>
+              <p className="text-xs text-muted-foreground mt-1">+ $45/mes por cada RFC adicional sobre 100</p>
+            </div>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 100 RFCs</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Usuarios ilimitados</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 1,000,000 CFDIs por contribuyente</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Servidor local con backup</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Control total de tus datos</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Dashboard, CFDI, IVA/ISR, alertas, calendario</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Reportes, conciliación, documentos, facturación, API</span></div>
+            </div>
+            <div className="mt-auto"><PlanActionButton plan="business_control" /></div>
+          </CardContent>
+        </Card>
+
+        {/* Enterprise (key interna: business_cloud) */}
+        <Card className={`relative flex flex-col${currentPlan === 'business_cloud' ? ' ring-2 ring-green-500' : ''}`}>
+          {currentPlan === 'business_cloud' && <ActiveBadge />}
+          <CardHeader className="text-center pb-2">
+            <div className="mx-auto bg-purple-100 dark:bg-purple-900 rounded-full p-3 w-fit mb-2">
+              <Cloud className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <CardTitle className="text-xl">Enterprise</CardTitle>
+            <p className="text-sm text-muted-foreground">Despachos grandes con alto volumen</p>
+          </CardHeader>
+          <CardContent className="flex flex-col flex-1 gap-4">
+            <div className="text-center">
+              <div className="text-3xl font-bold">$43,000</div>
+              <p className="text-sm text-muted-foreground">por año (IVA incluido)</p>
+              <p className="text-xs text-muted-foreground mt-1">+ $45/mes por cada RFC adicional sobre 100</p>
+            </div>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 100 RFCs</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Usuarios ilimitados</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Hasta 3,000,000 CFDIs por contribuyente</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Servidor local con backup</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Backups automáticos en la nube</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Dashboard, CFDI, IVA/ISR, alertas, calendario</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Reportes, conciliación, documentos, facturación, API</span></div>
+              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" /><span>Soporte prioritario</span></div>
+            </div>
+            <div className="mt-auto"><PlanActionButton plan="business_cloud" /></div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Cancelar — visible solo si tiene plan pagable activo */}
+      {hasPaidPlan && (
+        <div className="text-center pt-4">
+          <button
+            type="button"
+            onClick={handleCancelar}
+            disabled={busy === 'cancel'}
+            className="text-sm text-muted-foreground hover:text-destructive underline underline-offset-4 disabled:opacity-50"
+          >
+            {busy === 'cancel' ? 'Cancelando...' : 'Cancelar suscripcion'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}