);
}
function Button({ children, variant = 'primary', icon, fullWidth = false, onClick, size = 'md', iconLeft }) {
// Cada variant: bg puede ser color sólido o gradient.
// shadow: sombra propia del color para variants brand (primary/lime).
const vs = {
primary: {
bg: 'linear-gradient(180deg, #FC6A0F 0%, #FC5A00 100%)',
fg: '#fff',
shadow: '0 4px 14px rgba(252, 90, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)',
},
secondary: { bg: 'rgba(255,255,255,0.08)', fg: '#fff', shadow: 'inset 0 0 0 1px rgba(255,255,255,0.10)' },
cream: { bg: '#F5F5F0', fg: '#12152E', shadow: '0 1px 2px rgba(0,0,0,0.18)' },
lime: {
bg: 'linear-gradient(180deg, #E2FF6B 0%, #D8FF4B 100%)',
fg: '#0A0C28',
shadow: '0 4px 14px rgba(216, 255, 75, 0.30), inset 0 1px 0 rgba(255,255,255,0.5)',
},
ghost: { bg: 'transparent', fg: '#FC5A00', shadow: 'none' },
};
const v = vs[variant];
const sz = size === 'sm'
? { h: 38, fs: 14, px: 16, gap: 8, r: 12 }
: { h: 52, fs: 16, px: 22, gap: 10, r: 16 };
return (
);
}
function Hairline({ tone = 'dark' }) {
return ;
}
function ScreenHeader({ eyebrow, title, onBack, action, dark = true }) {
const fg = dark ? '#fff' : '#12152E';
const btnBg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(18,21,46,0.06)';
const Btn = ({ icon, onClick }) => (
);
// No default "more" button — keep top clean. Only show row if onBack or explicit action exists.
const hasButtons = onBack || action;
return (
{hasButtons && (
{onBack ? : }
{action || }
)}
{(eyebrow || title) && (
{eyebrow && (
{eyebrow}
)}
{title && (
{title}
)}
)}
);
}
function BrandMark({ size = 22, dark = true }) {
// BrandMark uses the actual VIRAL logo PNG. `size` is the rendered height.
return (
);
}
// ─────────────────────────────────────────────────────────────
// Empty placeholder for unbuilt screens
// ─────────────────────────────────────────────────────────────
function ScreenPlaceholder({ kind, label, hint }) {
return (
{kind}
{label}
{hint &&
{hint}
}
Pendiente de diseño
);
}
// ─────────────────────────────────────────────────────────────
// Skeleton — placeholder con shimmer, para usar mientras data carga.
// Uso: o
// CSS de la animación vive en tokens.css (.viral-skeleton).
// ─────────────────────────────────────────────────────────────
function Skeleton({ w = '100%', h = 14, radius = 8, style }) {
return (
);
}
// SkeletonGroup — N líneas con anchos descendentes, look "loading text".
function SkeletonGroup({ lines = 3, gap = 8 }) {
const widths = ['78%', '92%', '64%', '85%', '55%'];
return (
{Array.from({ length: lines }, (_, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// MiLineaSkeleton — placeholder mientras carga datos de línea.
// Replica la estructura visual de MiLineaScreen: progress circle + meta + 3 stats.
// ─────────────────────────────────────────────────────────────
function MiLineaSkeleton() {
return (
{/* Card principal: progress circle + plan info */}
{/* Stats grid 3 columnas: GB, Min, SMS */}
{[0,1,2].map(i => (
))}
{/* CTA placeholder */}
);
}
// ─────────────────────────────────────────────────────────────
// MiCuentaSkeleton — placeholder para Mi Cuenta (persona + créditos + lineas).
// ─────────────────────────────────────────────────────────────
function MiCuentaSkeleton() {
return (
{/* Persona card */}
{/* Créditos card 3 stats */}
{[0,1,2].map(i => (
))}
{/* List rows (ActionCards) */}
{[0,1,2].map(i => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// EditarPerfilSkeleton — placeholder para formulario de perfil.
// ─────────────────────────────────────────────────────────────
function EditarPerfilSkeleton() {
return (
{Array.from({ length: 7 }, (_, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// EmptyState — placeholder para cuando NO hay data (cero líneas, cero órdenes, etc).
// Reemplaza los "vacío deprimente" por algo accionable.
// ─────────────────────────────────────────────────────────────
function EmptyState({ icon = 'spark', title, hint, action }) {
return (
{title}
{hint && (
{hint}
)}
{action}
);
}
// ─────────────────────────────────────────────────────────────
// ErrorState — para errores de red / fetch. Action típica: retry button.
// ─────────────────────────────────────────────────────────────
function ErrorState({ title = 'No pudimos cargar tus datos', hint, onRetry }) {
return (
{title}
{hint && (
{hint}
)}
{onRetry && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// animateCount — anima un número de "from" a "to" durante "duration" ms
// con ease-out cubic. Llamar pasando una ref al elemento que muestra el número.
// Uso típico: useEffect(() => animateCount(ref.current, 0, value, 700, fmtInt))
// ─────────────────────────────────────────────────────────────
function animateCount(el, from, to, duration, formatFn) {
if (!el || typeof to !== 'number' || isNaN(to)) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
el.textContent = formatFn ? formatFn(to) : String(to);
return;
}
const start = performance.now();
const range = to - from;
function step(now) {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
const current = from + range * eased;
el.textContent = formatFn ? formatFn(current) : String(Math.round(current));
if (t < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
// ─────────────────────────────────────────────────────────────
// ChatPanel — sheet de chat conectado al webhook chatTrigger de n8n.
// El webhook vive en: {N8N_HOST}/webhook/{webhookId}/chat
// Payload: { action, chatInput, sessionId } → respuesta { output }
// SessionId se persiste por dispositivo en localStorage.
// ─────────────────────────────────────────────────────────────
const VIRAL_CHAT_ENDPOINT =
'https://n8n-n8n.s1kkr7.easypanel.host/webhook/bc3d8f7c-22ef-45cf-8f3f-4187fc7721ae/chat';
const VIRAL_CHAT_SESSION_KEY = 'viral_chat_session_v1';
function ChatPanel({ open, onClose }) {
const [messages, setMessages] = React.useState([]);
const [input, setInput] = React.useState('');
const [loading, setLoading] = React.useState(false);
const scrollRef = React.useRef(null);
const inputRef = React.useRef(null);
const sessionId = React.useRef(null);
// Init sessionId (persistido por dispositivo)
React.useEffect(() => {
try {
let sid = localStorage.getItem(VIRAL_CHAT_SESSION_KEY);
if (!sid) {
sid = 'pwa-' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
localStorage.setItem(VIRAL_CHAT_SESSION_KEY, sid);
}
sessionId.current = sid;
} catch (_) {
sessionId.current = 'pwa-fallback-' + Date.now();
}
}, []);
// Autoscroll al final cuando llega un mensaje nuevo o aparece el typing.
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, loading]);
// Focus al input al abrir.
React.useEffect(() => {
if (open) setTimeout(() => inputRef.current && inputRef.current.focus(), 200);
}, [open]);
async function sendMessage() {
const text = input.trim();
if (!text || loading) return;
setMessages(m => [...m, { role: 'user', content: text }]);
setInput('');
setLoading(true);
try {
const res = await fetch(VIRAL_CHAT_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'sendMessage',
chatInput: text,
sessionId: sessionId.current,
}),
});
const data = await res.json().catch(() => ({}));
const reply = data.output || data.text || data.message || 'Sin respuesta del agente.';
setMessages(m => [...m, { role: 'agent', content: reply }]);
} catch (_) {
setMessages(m => [...m, { role: 'agent', content: 'No pudimos conectar con el agente. Intenta de nuevo en un momento.' }]);
} finally {
setLoading(false);
}
}
function onKeyDown(e) {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
}
return (
);
}
Object.assign(window, {
Icon, StatusBadge, ProgressCircle, TimelineStep, ActionCard, NotificationPreview,
MetaRow, IconCircle, Button, Hairline, ScreenHeader, BrandMark, ScreenPlaceholder,
Skeleton, SkeletonGroup,
MiLineaSkeleton, MiCuentaSkeleton, EditarPerfilSkeleton,
EmptyState, ErrorState,
animateCount,
ChatPanel,
});
);
}
// ─────────────────────────────────────────────────────────────
// Empty placeholder for unbuilt screens
// ─────────────────────────────────────────────────────────────
function ScreenPlaceholder({ kind, label, hint }) {
return (