` : "");
const srcdoc = buildEmailSrcdoc(renderedBody, renderedSubject, storeName, primaryColor);
const toAddress = isAdmin ? adminEmail || "admin@tienda.com" : "maria@email.com";
const initial = (storeName || "T").charAt(0).toUpperCase();
const timeStr = new Date().toLocaleTimeString("es-PY", {
hour: "2-digit",
minute: "2-digit",
});
// Auto-resize iframe height on load
const handleIframeLoad = () => {
try {
const doc = iframeRef.current?.contentDocument;
if (doc) {
const h = doc.documentElement.scrollHeight;
iframeRef.current.style.height = `${Math.max(200, h)}px`;
}
} catch {
// cross-origin guard — won't happen with srcdoc
}
};
return (
{/* Toolbar */}
Vista previa del correo
v && setDevice(v)}
sx={{ "& .MuiToggleButton-root": { py: 0.25, px: 0.75 } }}
>
{/* Gmail-style email header */}
{renderedSubject || "(sin asunto)"}
{initial}
{storeName || "Mi Tienda"}{" "}
<notificaciones@tienda.com>
{timeStr}
Para: {toAddress}
{/* Email body */}
{device === "mobile" ? (
/* Phone frame */
{/* Notch */}
) : (
/* Desktop — full width */
)}
);
}
EmailClientPreview.propTypes = {
subject: PropTypes.string,
body: PropTypes.string,
tplKey: PropTypes.string,
storeName: PropTypes.string,
isAdmin: PropTypes.bool,
adminEmail: PropTypes.string,
primaryColor: PropTypes.string,
};
function NotificacionesPanel({ notifications, onChange, storeName, primaryColor }) {
const patch = (key, value) => onChange({ ...notifications, [key]: value });
const patchTemplate = (templateKey, field, value) => patch(templateKey, { ...notifications[templateKey], [field]: value });
const [enviandoTest, setEnviandoTest] = useState(null);
const enviarPrueba = async (tplKey) => {
setEnviandoTest(tplKey);
try {
const res = await ecommerceService.enviarNotificacionPrueba(tplKey, notifications.adminEmail || undefined);
toast.success(`Email de prueba enviado a ${res.to}`);
} catch (err) {
toast.error(err.response?.data?.message || "No se pudo enviar el email de prueba");
} finally {
setEnviandoTest(null);
}
};
return (
Dirección donde se reciben las notificaciones internas (nuevo pedido, alertas).
} sx={{ py: 0.5 }}>
Los emails de los pedidos reales salen con las plantillas publicadas. «Enviar prueba» usa lo que estás
editando ahora, así podés revisar cómo llega antes de publicar.
patch("adminEmail", e.target.value)}
placeholder="ventas@miempresa.com"
helperText="Dejá vacío para no recibir notificaciones internas."
/>
{EMAIL_TEMPLATES.map((tpl) => {
const cfg = notifications[tpl.key] ?? {};
return (
{/* Header */}
{tpl.label}
{tpl.description}
patchTemplate(tpl.key, "enabled", e.target.checked)} color={tpl.color} />}
label={{cfg.enabled !== false ? "Activo" : "Inactivo"}}
labelPlacement="start"
sx={{ m: 0 }}
/>
{/* Fields */}
patchTemplate(tpl.key, "subject", e.target.value)}
disabled={cfg.enabled === false}
/>
Mensaje personalizado — el diseño estructural se genera automáticamente patchTemplate(tpl.key, "body", html)} disabled={cfg.enabled === false} />
Variables disponibles: {tpl.vars}
{/* Email preview */}
{cfg.enabled !== false && (
)}
);
})}
);
}
NotificacionesPanel.propTypes = {
notifications: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
storeName: PropTypes.string,
primaryColor: PropTypes.string,
};
// Nota: ya no queda ninguna pestaña sin implementar — el PlaceholderPanel que
// vivía acá se eliminó al construir la pestaña Pagos.
const NOVEDAD_EMPTY = {
tipo: "anuncio",
titulo: "",
descripcion: "",
tag: "",
cta_label: "",
target_category: "",
imagen_url: "",
prioridad: 10,
activo: true,
};
// Alineado con las opciones del selector de TablePaginationBar (10/20/50/100).
const NOVEDADES_PAGE_SIZE = 10;
function NovedadesPanel() {
const [items, setItems] = useState([]);
const [categorias, setCategorias] = useState([]);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [imgUploading, setImgUploading] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [editing, setEditing] = useState(null);
const [form, setForm] = useState(NOVEDAD_EMPTY);
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(NOVEDADES_PAGE_SIZE);
const [deleteTarget, setDeleteTarget] = useState(null);
const [deleting, setDeleting] = useState(false);
const dialogFileRef = useRef(null);
const cargar = useCallback(async () => {
setLoading(true);
try {
const [novedades, cats] = await Promise.all([ecommerceService.listNovedades(), ecommerceService.getCategorias()]);
setItems(novedades);
setCategorias(cats);
} catch {
toast.error("No se pudieron cargar las novedades");
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
cargar();
}, [cargar]);
const filtered = useMemo(() => {
const q = search.trim().toLowerCase();
return q ? items.filter((i) => i.titulo.toLowerCase().includes(q) || (i.tag ?? "").toLowerCase().includes(q)) : items;
}, [items, search]);
const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
const pageItems = filtered.slice((page - 1) * pageSize, page * pageSize);
const openCreate = () => {
setEditing(null);
setForm(NOVEDAD_EMPTY);
setDialogOpen(true);
};
const openEdit = (item) => {
setEditing(item);
setForm({
tipo: item.tipo,
titulo: item.titulo,
descripcion: item.descripcion ?? "",
tag: item.tag ?? "",
cta_label: item.cta_label ?? "",
target_category: item.target_category ?? "",
imagen_url: item.imagen_url ?? "",
prioridad: item.prioridad,
activo: item.activo,
});
setDialogOpen(true);
};
const handleSave = async () => {
if (!form.titulo.trim()) {
toast.error("El título es obligatorio");
return;
}
setSaving(true);
try {
if (editing) {
const updated = await ecommerceService.updateNovedad(editing.id, form);
setItems((prev) => prev.map((i) => (i.id === editing.id ? updated : i)));
setEditing((prev) => ({ ...prev, ...updated }));
} else {
const created = await ecommerceService.createNovedad(form);
setItems((prev) => [...prev, created]);
setEditing(created);
}
toast.success(editing ? "Novedad guardada" : "Novedad creada");
} catch {
toast.error("No se pudo guardar la novedad");
} finally {
setSaving(false);
}
};
const handleClose = () => {
setDialogOpen(false);
setEditing(null);
};
const handleDelete = async () => {
if (!deleteTarget) return;
setDeleting(true);
try {
await ecommerceService.deleteNovedad(deleteTarget.id);
setItems((prev) => prev.filter((i) => i.id !== deleteTarget.id));
toast.success("Novedad eliminada");
setDeleteTarget(null);
} catch {
toast.error("No se pudo eliminar");
} finally {
setDeleting(false);
}
};
const handleToggleActivo = async (item) => {
try {
const updated = await ecommerceService.updateNovedad(item.id, {
activo: !item.activo,
});
setItems((prev) => prev.map((i) => (i.id === item.id ? { ...i, activo: updated.activo } : i)));
} catch {
toast.error("No se pudo cambiar el estado");
}
};
const handleDialogFileChange = async (e) => {
const file = e.target.files?.[0];
if (!file || !editing?.id) return;
e.target.value = "";
setImgUploading(true);
try {
const updated = await ecommerceService.uploadNovedadImage(editing.id, file);
setItems((prev) => prev.map((i) => (i.id === editing.id ? { ...i, imagen_url: updated.imagen_url } : i)));
setEditing((prev) => ({ ...prev, imagen_url: updated.imagen_url }));
toast.success("Imagen subida");
} catch {
toast.error("No se pudo subir la imagen");
} finally {
setImgUploading(false);
}
};
const handleDeleteImg = async () => {
if (!editing?.id) return;
setImgUploading(true);
try {
await ecommerceService.deleteNovedadImage(editing.id);
setItems((prev) => prev.map((i) => (i.id === editing.id ? { ...i, imagen_url: null } : i)));
setEditing((prev) => ({ ...prev, imagen_url: null }));
toast.success("Imagen eliminada");
} catch {
toast.error("No se pudo eliminar la imagen");
} finally {
setImgUploading(false);
}
};
const tipoMeta = (tipo) => TIPO_NOVEDAD_OPTIONS.find((o) => o.value === tipo) ?? TIPO_NOVEDAD_OPTIONS[1];
return (
{/* Barra superior */}
Anuncios, ingresos y campañas. Aparecen en la tienda apenas las creás activas y dentro de su vigencia, sin publicar.
{
setSearch(e.target.value);
setPage(1);
}}
sx={{ width: 180 }}
/>
} onClick={openCreate}>
Nueva
{/* Lista */}
{loading ? (
) : filtered.length === 0 ? (
) : (
<>
{pageItems.map((item) => {
const meta = tipoMeta(item.tipo);
return (
openEdit(item)}
>
{item.imagen_url ? (
) : (
)}
{item.tag && (
#{item.tag}
)}
{item.titulo}
{item.descripcion && (
{item.descripcion}
)}
e.stopPropagation()}>
handleToggleActivo(item)} />
openEdit(item)}>
setDeleteTarget(item)}>
);
})}
{
setPageSize(n);
setPage(1);
}}
/>
)}
{/* Dialog crear / editar */}
{/* Confirmación de eliminación */}
);
}
function SeguimientoPanel({ storeConfig }) {
const trackingUrl = buildStoreUrl(storeConfig, "/?seguimiento");
const [qrDataUrl, setQrDataUrl] = useState("");
useEffect(() => {
if (!trackingUrl) return undefined;
let active = true;
import("qrcode")
.then((QRCode) => QRCode.toDataURL(trackingUrl, { width: 480, margin: 1 }))
.then((url) => active && setQrDataUrl(url))
.catch(() => undefined);
return () => {
active = false;
};
}, [trackingUrl]);
const copiarLink = async () => {
try {
await navigator.clipboard.writeText(trackingUrl);
toast.success("Link de seguimiento copiado");
} catch {
toast.error("No se pudo copiar el link");
}
};
return (
Link público de seguimiento
Compartilo con tus clientes o imprimí el QR para el local o el paquete: abre la tienda con el consultor de pedidos listo para ingresar el código.
{trackingUrl ? (
}>
Copiar link
}
>
Descargar QR
) : (
Configurá el subdominio o el dominio propio de la tienda para generar el link.
)}
{qrDataUrl && (
Escaneá para probarlo
)}
{/* Acá había un «Mapa de seguimiento» con texto de desarrollo («Primera versión
preparada para Leaflet…», «Vista de mapa pendiente») visible para el comercio,
y una línea de tiempo que no coincidía con los estados reales. */}
Qué ve el cliente
Con el código del pedido, el seguimiento muestra cada paso a medida que lo avanzás en Pedidos.
{[
"Pedido recibido",
"Pago confirmado",
"En verificación y verificado",
"En preparación y empaquetado",
"En camino (delivery) o listo para retiro",
"Entregado o retirado",
].map((label) => (
{label}
))}
);
}
SeguimientoPanel.propTypes = {
storeConfig: PropTypes.shape({
subdominio: PropTypes.string,
dominio_custom: PropTypes.string,
}),
};
const COLOR_FIELDS = [
{ key: "primary", label: "Primario" },
{ key: "secondary", label: "Secundario" },
{ key: "accent", label: "Acento" },
{ key: "background", label: "Fondo" },
{ key: "surface", label: "Superficie" },
{ key: "text", label: "Texto" },
{ key: "muted", label: "Texto suave" },
{ key: "success", label: "Éxito" },
{ key: "danger", label: "Error" },
{ key: "priceColor", label: "Color del precio" },
];
// Valores por defecto del tema (mismos fallbacks que usa la normalización del
// config al cargar). El botón "Restablecer" los reaplica de una.
const DEFAULT_THEME = Object.freeze({
primary: "#0f766e",
secondary: "#1d4ed8",
accent: "#f97316",
background: "#ffffff",
surface: "#ffffff",
text: "#14211f",
muted: "#66736f",
success: "#15803d",
danger: "#dc2626",
priceColor: "#0f766e",
});
// Réplica de la lógica del store (getActiveSeason): temporada habilitada cuya
// franja de fechas incluye hoy. Sus themeOverrides pisan la paleta base.
function findActiveSeason(seasons, today = new Date()) {
if (!Array.isArray(seasons)) return null;
const now = today.getTime();
return (
seasons.find((s) => {
if (!s?.enabled || !s.startDate || !s.endDate) return false;
const start = new Date(`${s.startDate}T00:00:00`).getTime();
const end = new Date(`${s.endDate}T23:59:59`).getTime();
return now >= start && now <= end;
}) ?? null
);
}
const COLOR_PRESETS = [
{
name: "Verde Novasis",
theme: {
primary: "#0f766e",
secondary: "#1d4ed8",
accent: "#f97316",
background: "#ffffff",
surface: "#ffffff",
text: "#14211f",
muted: "#66736f",
success: "#15803d",
danger: "#dc2626",
},
},
{
name: "Violeta",
theme: {
primary: "#9333ea",
secondary: "#4f46e5",
accent: "#ec4899",
background: "#ffffff",
surface: "#ffffff",
text: "#1e1b2e",
muted: "#6b7280",
success: "#16a34a",
danger: "#dc2626",
},
},
{
name: "Azul corporativo",
theme: {
primary: "#1d4ed8",
secondary: "#0ea5e9",
accent: "#f59e0b",
background: "#ffffff",
surface: "#ffffff",
text: "#0f172a",
muted: "#64748b",
success: "#15803d",
danger: "#dc2626",
},
},
{
name: "Rojo retail",
theme: {
primary: "#dc2626",
secondary: "#1f2937",
accent: "#f59e0b",
background: "#ffffff",
surface: "#ffffff",
text: "#1f2937",
muted: "#6b7280",
success: "#16a34a",
danger: "#b91c1c",
},
},
{
name: "Naranja vibrante",
theme: {
primary: "#ea580c",
secondary: "#0f766e",
accent: "#facc15",
background: "#ffffff",
surface: "#fffaf5",
text: "#231a12",
muted: "#7c6f63",
success: "#15803d",
danger: "#dc2626",
},
},
{
name: "Oscuro elegante",
theme: {
primary: "#a855f7",
secondary: "#22d3ee",
accent: "#f472b6",
background: "#0f111a",
surface: "#171a26",
text: "#f8fafc",
muted: "#94a3b8",
success: "#22c55e",
danger: "#f87171",
},
},
];
const FONT_OPTIONS = ["Inter", "Poppins", "Roboto", "Montserrat", "Nunito", "Work Sans", "Playfair Display"];
const SCALE_OPTIONS = [
{ value: "compact", label: "Compacta" },
{ value: "normal", label: "Normal" },
{ value: "wide", label: "Amplia" },
];
function DesignPanel({
identity,
faviconUrl,
theme,
typography,
layout,
selectedBannerEffect,
seasons,
onIdentityChange,
onFaviconChange,
onThemeChange,
onTypographyChange,
onLayoutChange,
onBannerEffectChange,
onApplyPreset,
}) {
const matchesPreset = (preset) => Object.keys(preset.theme).every((k) => (theme[k] || "").toLowerCase() === preset.theme[k].toLowerCase());
const selected = BANNER_EFFECT_OPTIONS.find((effect) => effect.value === selectedBannerEffect);
// La tienda aplica los colores de la temporada activa por encima de la paleta
// base (activeTheme = { ...base, ...season.themeOverrides }). Si hay una activa,
// avisamos: si no, el usuario cambia los colores base y "no pasa nada".
const activeSeason = findActiveSeason(seasons);
return (
{activeSeason && (
}>
La temporada {activeSeason.name || "activa"} está vigente
{activeSeason.endDate ? ` hasta el ${activeSeason.endDate.split("-").reverse().join("/")}` : ""} y
sobrescribe estos colores en la tienda: mientras esté activa vas a ver la paleta de la
temporada, no la base. Para ver tus colores base, editá los colores de la temporada o desactivala en{" "}
Temporadas (más abajo).
)}
Diseño de la tienda
Colores, tipografía, tarjetas, buscador, espacios de promociones y efectos visuales de tu tienda.
Nombre comercial y logo visibles en el encabezado de la tienda.
onIdentityChange("name", e.target.value)}
sx={{ minWidth: 240, flex: 1 }}
/>
onIdentityChange("logoUrl", url)}
uploadFn={ecommerceService.uploadStoreImage}
slot="logo"
height={90}
helperText="Se muestra en el encabezado. Si lo dejás vacío, se usa la inicial del nombre."
/>
}
onClick={() => onApplyPreset(DEFAULT_THEME)}
sx={{ flexShrink: 0 }}
>
Restablecer valores por defecto
}
>
Aplicá una combinación predefinida y ajustá colores individuales debajo.
{COLOR_PRESETS.map((preset) => (
onApplyPreset(preset.theme)}>
{preset.name}
))}
Estos colores se aplican en toda la tienda.
{COLOR_FIELDS.map((field) => (
onThemeChange(field.key, e.target.value)} />
{field.label}
{theme[field.key]}
))}
Fuente y escala de tamaños de la tienda.
onTypographyChange("fontFamily", e.target.value)}
sx={{ minWidth: 200 }}
>
{FONT_OPTIONS.map((f) => (
))}
onTypographyChange("scale", e.target.value)}
sx={{ minWidth: 160 }}
>
{SCALE_OPTIONS.map((s) => (
))}
onTypographyChange("fontWeight", e.target.value)}
sx={{ minWidth: 180 }}
helperText="Grosor del texto en toda la tienda"
>
Aa {typography.fontFamily || "Inter"}
Color y tamaño de fuente de los precios en toda la tienda.
Color precio
onThemeChange("priceColor", e.target.value)}
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
opacity: 0,
cursor: "pointer",
}}
/>
{theme.priceColor || theme.primary || "#0f766e"}
{
const v = Math.max(10, Math.min(40, Number(e.target.value)));
onTypographyChange("priceFontSize", v);
}}
inputProps={{ min: 10, max: 40, step: 1 }}
sx={{ width: 130 }}
helperText="10–40 px · tarjetas"
/>
Vista previa:
Gs. 150.000
Define la presencia visual del inicio, las transiciones y el comportamiento de los elementos comerciales.
onLayoutChange("heroVariant", e.target.value)} size="small" helperText={LAYOUT_AYUDA.heroVariant[layout.heroVariant]}>
onLayoutChange("motionPreset", e.target.value)} size="small" helperText={LAYOUT_AYUDA.motionPreset[layout.motionPreset]}>
onLayoutChange("transitionSpeed", e.target.value)} size="small" helperText={LAYOUT_AYUDA.transitionSpeed[layout.transitionSpeed]}>
onLayoutChange("cardHoverEffect", e.target.value)} size="small" helperText={LAYOUT_AYUDA.cardHoverEffect[layout.cardHoverEffect]}>
onLayoutChange("sectionBackgroundMode", e.target.value)} size="small" helperText={LAYOUT_AYUDA.sectionBackgroundMode[layout.sectionBackgroundMode]}>
onLayoutChange("headerVariant", e.target.value)} size="small" helperText={LAYOUT_AYUDA.headerVariant[layout.headerVariant]}>
onLayoutChange("stickyHeader", e.target.checked)} />} label="Cabecera fija" />
onLayoutChange("showScrollAnimations", e.target.checked)} />} label="Animar al recorrer" />
onLayoutChange("showCarouselProgress", e.target.checked)} />} label="Progreso del carrusel" />
Animación al pasar el mouse por el banner principal, los banners promocionales, el mega menú y los banners de cada categoría.
{BANNER_EFFECT_OPTIONS.map((effect) => (
onBannerEffectChange(effect.value)}
>
{effect.label}
{effect.description}
))}
Vista previa
Selección actual: {selected?.label || "Sin efecto"}.
PromociónBanner de temporada
);
}
DesignPanel.propTypes = {
identity: PropTypes.object.isRequired,
faviconUrl: PropTypes.string,
theme: PropTypes.object.isRequired,
typography: PropTypes.object.isRequired,
layout: PropTypes.object.isRequired,
selectedBannerEffect: PropTypes.string.isRequired,
onIdentityChange: PropTypes.func.isRequired,
onFaviconChange: PropTypes.func.isRequired,
onThemeChange: PropTypes.func.isRequired,
onTypographyChange: PropTypes.func.isRequired,
onLayoutChange: PropTypes.func.isRequired,
onBannerEffectChange: PropTypes.func.isRequired,
onApplyPreset: PropTypes.func.isRequired,
};
// Qué hace cada opción de «Experiencia y movimiento», para mostrarlo debajo del select.
const LAYOUT_AYUDA = {
heroVariant: {
immersive: "La foto ocupa todo el banner y el texto va encima.",
split: "Texto a un lado y la imagen al otro, sin superponerse.",
},
motionPreset: {
dynamic: "Los bloques se deslizan al aparecer y los botones reaccionan al pasar el mouse.",
subtle: "Movimientos mínimos, apenas perceptibles.",
none: "Todo quieto: ninguna animación ni transición.",
},
transitionSpeed: {
fast: "Las animaciones duran menos: la tienda se siente más ágil.",
normal: "Duración estándar de las animaciones.",
relaxed: "Animaciones más lentas y suaves.",
},
cardHoverEffect: {
lift: "Al pasar el mouse, la tarjeta del producto se eleva un poco.",
zoom: "Al pasar el mouse, se agranda la foto del producto.",
glow: "Al pasar el mouse, la tarjeta se eleva y se ilumina con el color de acento.",
none: "Las tarjetas no cambian al pasar el mouse.",
},
sectionBackgroundMode: {
alternating: "Las secciones de la portada alternan un fondo tenue para separarse.",
plain: "Todas las secciones con el mismo fondo.",
},
headerVariant: {
compact: "Encabezado más bajo: deja más lugar para los productos.",
standard: "Encabezado más alto y aireado.",
},
};
const CARD_SIZE_OPTIONS = [
{ value: "compact", label: "Compacta" },
{ value: "normal", label: "Normal" },
{ value: "large", label: "Grande" },
];
const DISPLAY_MODE_OPTIONS = [
{ value: "categoryCarousels", label: "Carruseles por categoría" },
{ value: "allWithPagination", label: "Grilla con paginación" },
];
const IMAGE_RATIO_OPTIONS = [
{ value: "1 / 1", label: "Cuadrada (1:1)" },
{ value: "4 / 3", label: "Horizontal (4:3)" },
{ value: "3 / 4", label: "Vertical (3:4)" },
];
const CATALOG_TOGGLES = [
{ key: "showStock", label: "Mostrar stock" },
{ key: "showBrand", label: "Mostrar marca" },
{ key: "showCategory", label: "Mostrar categoría" },
{ key: "showPromotionBadge", label: "Badge de promoción" },
];
function CategoryImagesPanel() {
const [categorias, setCategorias] = useState([]);
const [loading, setLoading] = useState(true);
const [uploading, setUploading] = useState(null);
const fileInputRef = useRef(null);
const [activeId, setActiveId] = useState(null);
useEffect(() => {
ecommerceService
.getCategorias()
.then(setCategorias)
.catch(() => toast.error("No se pudieron cargar las categorías"))
.finally(() => setLoading(false));
}, []);
const handleUploadClick = (id) => {
setActiveId(id);
fileInputRef.current?.click();
};
const handleFileChange = async (e) => {
const file = e.target.files?.[0];
if (!file || !activeId) return;
e.target.value = "";
setUploading(activeId);
try {
const { imageUrl } = await ecommerceService.uploadCategoryImage(activeId, file);
setCategorias((prev) => prev.map((c) => (c.id === activeId ? { ...c, image: imageUrl } : c)));
toast.success("Imagen subida correctamente");
} catch {
toast.error("No se pudo subir la imagen");
} finally {
setUploading(null);
setActiveId(null);
}
};
const handleDelete = async (id) => {
setUploading(id);
try {
await ecommerceService.deleteCategoryImage(id);
setCategorias((prev) => prev.map((c) => (c.id === id ? { ...c, image: null } : c)));
toast.success("Imagen eliminada");
} catch {
toast.error("No se pudo eliminar la imagen");
} finally {
setUploading(null);
}
};
if (loading)
return (
);
return (
Imagen de portada por categoría o subcategoría. Si no hay imagen propia, se usa la de un producto representativo.
{categorias.map((cat) => (
{cat.image ? (
) : (
)}
{uploading === cat.id && (
)}
{cat.name}
{cat.count} productos
handleUploadClick(cat.id)} disabled={!!uploading}>
{cat.image && (
handleDelete(cat.id)} disabled={!!uploading}>
)}
))}
);
}
const DEFAULT_PAGES = [
{ key: "terminos", title: "Términos y condiciones" },
{ key: "privacidad", title: "Política de privacidad" },
{ key: "facturacion", title: "Facturación" },
{ key: "seguimiento", title: "Seguimiento de pedido" },
{ key: "devoluciones", title: "Cambios y devoluciones" },
{ key: "faq", title: "Preguntas frecuentes" },
{ key: "contacto", title: "Contacto" },
];
// Render del "markdown liviano" de las páginas de contenido — espejo del
// renderer de la tienda (novasis-ecommerce-store/src/lib/storeRichText.tsx):
// ## títulos, **negrita**, *itálica*, - listas y párrafos. Mantener en sincronía.
function renderRichTextPreview(content) {
if (!content) return null;
const inline = (text) =>
text
.split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g)
.filter(Boolean)
.map((tok, i) => {
if (tok.startsWith("**") && tok.endsWith("**") && tok.length > 4) return {tok.slice(2, -2)};
if (tok.startsWith("*") && tok.endsWith("*") && tok.length > 2) return {tok.slice(1, -1)};
return tok;
});
const out = [];
let list = [];
const flush = () => {
if (!list.length) return;
out.push(
{list.map((item, i) => (
{inline(item)}
))}
,
);
list = [];
};
for (const raw of content.replace(/\r\n/g, "\n").split("\n")) {
const line = raw.trim();
if (!line) {
flush();
continue;
}
if (line.startsWith("- ") || line.startsWith("* ")) {
list.push(line.slice(2));
continue;
}
flush();
if (line.startsWith("## ")) {
out.push(
{inline(line.slice(3))}
,
);
} else {
out.push(
{inline(line)}
,
);
}
}
flush();
return out;
}
function PaginasPanel({ pages, onPagesChange, accent, primary }) {
const storeAccent = accent || "#22c1e6";
const storePrimary = primary || "#1f6feb";
const [selectedKey, setSelectedKey] = useState(pages[0]?.key ?? null);
const [preview, setPreview] = useState(false);
const pageIndex = pages.findIndex((p) => p.key === selectedKey);
const page = pageIndex >= 0 ? pages[pageIndex] : null;
const updatePage = (updater) => {
const next = pages.map((p, i) => (i === pageIndex ? updater(p) : p));
onPagesChange(next);
};
const addPage = () => {
const key = `pagina-${Date.now()}`;
const newPage = {
key,
title: "Nueva página",
subtitle: "",
blocks: [{ title: "", content: "" }],
};
onPagesChange([...pages, newPage]);
setSelectedKey(key);
};
const deletePage = () => {
if (!page) return;
const isDefault = DEFAULT_PAGES.some((d) => d.key === page.key);
if (isDefault) return;
const next = pages.filter((_, i) => i !== pageIndex);
onPagesChange(next);
setSelectedKey(next[0]?.key ?? null);
};
const addBlock = () =>
updatePage((p) => ({
...p,
blocks: [...(p.blocks ?? []), { title: "", content: "" }],
}));
const removeBlock = (bi) => updatePage((p) => ({ ...p, blocks: p.blocks.filter((_, i) => i !== bi) }));
const updateBlock = (bi, field, value) =>
updatePage((p) => ({
...p,
blocks: p.blocks.map((b, i) => (i === bi ? { ...b, [field]: value } : b)),
}));
const isDefault = page ? DEFAULT_PAGES.some((d) => d.key === page.key) : false;
return (
{/* sidebar */}
Páginas
{pages.map((p) => {
const def = DEFAULT_PAGES.find((d) => d.key === p.key);
return (
setSelectedKey(p.key)}
sx={{
px: 2,
py: 1.2,
cursor: "pointer",
bgcolor: p.key === selectedKey ? "action.selected" : "transparent",
"&:hover": { bgcolor: "action.hover" },
borderLeft: p.key === selectedKey ? "3px solid" : "3px solid transparent",
borderColor: p.key === selectedKey ? "primary.main" : "transparent",
}}
>
{p.title || p.key}
{def && (
Enlace footer: {p.key}
)}
);
})}
{/* editor */}
{page ? (
{isDefault ? "Página del sistema" : "Página personalizada"}
{!isDefault && (
)}
updatePage((p) => ({ ...p, title: e.target.value }))}
/>
updatePage((p) => ({ ...p, subtitle: e.target.value }))}
helperText="Frase breve que aparece debajo del título de la página"
/>
{isDefault && (
Esta página aparece en el footer de la tienda (enlace: {page.key}). Podés editar su contenido libremente.
)}
{/* bloques de contenido */}
Bloques de contenido
setPreview(e.target.checked)} />}
label={Vista previa}
sx={{ m: 0 }}
/>
} onClick={addBlock}>
Agregar bloque
{/* Vista previa FIEL de la página: reproduce el hero (badge + título +
subtítulo) y cada bloque como tarjeta con la línea de acento real
del tenant, tal como los renderiza la tienda. */}
{preview && (
Así se ve la página en la tienda
Información
{page.title || "Título de la página"}
{page.subtitle && (
{page.subtitle}
)}
{(page.blocks ?? [])
.filter((b) => (b.content ?? "").trim() || (b.title ?? "").trim())
.map((block, bi) => (
{block.title && (
{block.title}
)}
{renderRichTextPreview(block.content)}
))}
)}
{(page.blocks ?? []).map((block, bi) => (
Bloque {bi + 1}
removeBlock(bi)} disabled={(page.blocks ?? []).length <= 1}>
updateBlock(bi, "title", e.target.value)}
/>
updateBlock(bi, "content", e.target.value)}
helperText="Formato: ## Título · **negrita** · *itálica* · - lista · línea en blanco = nuevo párrafo"
/>
))}
{(page.blocks ?? []).length === 0 && (
Sin bloques. Agregá uno para mostrar contenido.
)}
) : (
Seleccioná una página para editarla
)}
);
}
/**
* Qué categorías salen en la portada y en qué orden. Antes sólo se elegía la
* cantidad y la tienda tomaba las primeras por orden alfabético (Abdominal, Aire
* acondicionado, Alacenas, Alambre…). Vacío = las más surtidas.
*/
function HomeCategoriesPicker({ value, max, onChange }) {
const [opciones, setOpciones] = useState([]);
useEffect(() => {
let vivo = true;
ecommerceService
.getCategorias()
.then((cats) => vivo && setOpciones((cats || []).map((c) => c.name).filter(Boolean)))
.catch(() => undefined);
return () => {
vivo = false;
};
}, []);
const mover = (i, d) => {
const next = [...value];
[next[i], next[i + d]] = [next[i + d], next[i]];
onChange(next);
};
return (
Elegí y ordená las categorías que se muestran en la portada. Si no elegís ninguna, salen las {max} con más
productos. Se muestran hasta {max} (lo define «Categorías en portada»).
!value.includes(o))}
value={null}
onChange={(_, v) => v && onChange([...value, v])}
renderInput={(params) => }
sx={{ maxWidth: 420 }}
/>
{value.length > 0 && (
{value.map((nombre, i) => (
{i + 1}.
{nombre}
{i >= max ? " (no entra: subí «Categorías en portada»)" : ""}
mover(i, -1)} aria-label={`Subir ${nombre}`}>
mover(i, 1)} aria-label={`Bajar ${nombre}`}>
onChange(value.filter((x) => x !== nombre))} aria-label={`Quitar ${nombre}`}>
))}
)}
);
}
HomeCategoriesPicker.propTypes = {
value: PropTypes.arrayOf(PropTypes.string).isRequired,
max: PropTypes.number.isRequired,
onChange: PropTypes.func.isRequired,
};
function CatalogPanel({ catalog, onCatalogChange }) {
return (
Catálogo público
Productos, categorías, marcas e imágenes se reutilizan de tu catálogo. Acá configurás cómo se muestran en la tienda.
Cómo se arman los listados: carruseles por categoría o grilla con paginación, tamaño de las tarjetas, columnas y proporción de las fotos.
onCatalogChange("displayMode", e.target.value)}
helperText={
catalog.displayMode === "allWithPagination"
? "La portada lista todos los productos en una grilla con filtros y páginas."
: "La portada muestra un carrusel por categoría; al entrar a una, grilla con filtros."
}
sx={{ minWidth: 240, maxWidth: 320 }}
>
{DISPLAY_MODE_OPTIONS.map((o) => (
))}
onCatalogChange("cardSize", e.target.value)}
helperText="Alto de las tarjetas de producto: más chicas, entran más por pantalla."
sx={{ minWidth: 180, maxWidth: 260 }}
>
{CARD_SIZE_OPTIONS.map((o) => (
))}
onCatalogChange("imageRatio", e.target.value)}
helperText="Forma de la foto en la tarjeta. Elegí la de tus fotos para que no se recorten."
sx={{ minWidth: 200, maxWidth: 280 }}
>
{IMAGE_RATIO_OPTIONS.map((o) => (
))}
onCatalogChange("columnsDesktop", Number(e.target.value))}
inputProps={{ min: 1, max: 6 }}
helperText="Tarjetas por fila"
sx={{ width: 170 }}
/>
onCatalogChange("columnsTablet", Number(e.target.value))}
inputProps={{ min: 1, max: 5 }}
helperText="Tarjetas por fila"
sx={{ width: 160 }}
/>
onCatalogChange("columnsMobile", Number(e.target.value))}
inputProps={{ min: 1, max: 3 }}
helperText="Tarjetas por fila"
sx={{ width: 150 }}
/>
onCatalogChange("maxCategoriesOnHome", Number(e.target.value))}
inputProps={{ min: 1, max: 20 }}
sx={{ width: 190 }}
helperText={catalog.displayMode === "allWithPagination" ? "Sólo en modo carruseles" : "Carruseles de la portada"}
/>
onCatalogChange("pageSize", Number(e.target.value))}
inputProps={{ min: 4, max: 60 }}
sx={{ width: 180 }}
helperText="Grilla y página de cada categoría"
/>
onCatalogChange("maxProductsPerCategory", Number(e.target.value))}
inputProps={{ min: 4, max: 30 }}
sx={{ width: 180 }}
helperText={catalog.displayMode === "allWithPagination" ? "Sólo en modo carruseles" : "Productos en cada carrusel"}
/>
onCatalogChange("homeCategories", v)}
/>
Qué datos acompañan a cada producto en su tarjeta, además del nombre, la foto y el precio.
{CATALOG_TOGGLES.map((t) => (
onCatalogChange(t.key, !catalog[t.key])}
icon={}
/>
))}
);
}
CatalogPanel.propTypes = {
catalog: PropTypes.object.isRequired,
onCatalogChange: PropTypes.func.isRequired,
};
// Textos de secciones de la tienda (copy editable de marketing, no microcopy de UI).
function StoreTextsPanel({ texts, onTextsChange }) {
const t = texts ?? {};
return (
Textos de las secciones del catálogo y el pie de página. Se muestran tal cual en la tienda.
Banner de categoría
Aparece arriba del listado al entrar a una categoría o subcategoría con imagen. El sufijo del título sólo se agrega en categorías de una sola palabra.
onTextsChange("categoryBannerTitleSuffix", e.target.value)}
helperText='Opcional. Ej: «Bebidas store». Vacío: sólo el nombre.'
sx={{ minWidth: 260, flex: 1 }}
/>
onTextsChange("categoryBannerDescription", e.target.value)}
helperText="Usá {categoria} donde quieras insertar el nombre de la categoría."
/>
Panel lateral B2B
Aparece en la barra lateral de filtros cuando el cliente entra a una categoría o hace una búsqueda (no en la portada).
onTextsChange("b2bPanelTitle", e.target.value)}
/>
onTextsChange("b2bPanelSubtitle", e.target.value)}
/>
Bloque de Novedades
onTextsChange("novedadesTitle", e.target.value)}
sx={{ minWidth: 220, flex: 1 }}
/>
onTextsChange("novedadesSubtitle", e.target.value)}
sx={{ minWidth: 260, flex: 2 }}
/>
Otros
onTextsChange("mostViewedLabel", e.target.value)}
helperText="Lista destacada por categoría"
sx={{ minWidth: 220, flex: 1 }}
/>
onTextsChange("poweredByLabel", e.target.value)}
helperText="Texto al pie de la tienda"
sx={{ minWidth: 260, flex: 1 }}
/>
);
}
StoreTextsPanel.propTypes = {
texts: PropTypes.object,
onTextsChange: PropTypes.func.isRequired,
};
const DECORATION_OPTIONS = [
{ value: "none", label: "Sin decoración" },
{ value: "snow", label: "Nieve (invierno)" },
{ value: "spring", label: "Primavera" },
{ value: "summer", label: "Verano" },
{ value: "autumn", label: "Otoño" },
];
const SEASON_OVERRIDE_COLORS = [
{ key: "primary", label: "Primario" },
{ key: "accent", label: "Acento" },
{ key: "background", label: "Fondo" },
{ key: "text", label: "Texto" },
];
function todayISO() {
return hoyISO();
}
function isSeasonActive(season) {
if (!season.enabled) return false;
const t = todayISO();
return (season.startDate || "") <= t && t <= (season.endDate || "");
}
function SeasonsPanel({ seasons, onSeasonsChange }) {
const cardRefs = useRef({});
const pendingScrollId = useRef(null);
const [expandedId, setExpandedId] = useState(() => {
const active = seasons.find((s) => isSeasonActive(s));
return active?.id ?? (seasons.length === 1 ? seasons[0]?.id : null) ?? null;
});
useEffect(() => {
if (!pendingScrollId.current) return;
const id = pendingScrollId.current;
const el = cardRefs.current[id];
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "start" });
pendingScrollId.current = null;
}
}, [seasons]);
const update = (idx, patch) => {
onSeasonsChange(seasons.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
};
const updateTheme = (idx, key, value) => {
const s = seasons[idx];
update(idx, {
themeOverrides: { ...(s.themeOverrides || {}), [key]: value },
});
};
const updatePromo = (idx, key, value) => {
const s = seasons[idx];
update(idx, { promotions: { ...(s.promotions || {}), [key]: value } });
};
const remove = (idx) => {
const removedId = seasons[idx]?.id ?? idx;
onSeasonsChange(seasons.filter((_, i) => i !== idx));
setExpandedId((prev) => (prev === removedId ? null : prev));
};
const add = () => {
const newId = `temp-${Date.now()}`;
onSeasonsChange([
...seasons,
{
id: newId,
name: "Nueva temporada",
enabled: false,
startDate: todayISO(),
endDate: todayISO(),
priority: 10,
themeOverrides: {},
promotions: {},
decoration: { type: "none", intensity: "low" },
},
]);
setExpandedId(newId);
pendingScrollId.current = newId;
};
return (
} onClick={add}>
Agregar temporada
}
>
Cada temporada tiene fechas de inicio y fin. Mientras está vigente, la tienda cambia sola los colores, la decoración, la
barra superior y el banner principal (el bloque grande de la portada); al terminar vuelve a lo de siempre. Se publican
una vez y se activan solas por fecha.
{seasons.length === 0 && (
No hay temporadas configuradas. Agregá una para personalizar la tienda por fechas.
)}
{seasons.map((season, idx) => {
const id = season.id || idx;
return (
{
if (el) cardRefs.current[id] = el;
}}
variant="outlined"
disableGutters
expanded={expandedId === id}
onChange={(_, isExpanded) => setExpandedId(isExpanded ? id : null)}
>
}>
{season.name || "Sin nombre"} {
e.stopPropagation();
update(idx, { enabled: !season.enabled });
}}
icon={}
/>
{isSeasonActive(season) && }
{season.startDate ? season.startDate.split("-").reverse().join("/") : "?"} — {season.endDate ? season.endDate.split("-").reverse().join("/") : "?"}
} onClick={() => remove(idx)}>
Quitar
update(idx, { name: e.target.value })}
sx={{ minWidth: 200, flex: 1 }}
/>
update(idx, { startDate: e.target.value })}
sx={{ width: 170 }}
/>
update(idx, { endDate: e.target.value })}
sx={{ width: 170 }}
/>
update(idx, { priority: Number(e.target.value) })}
sx={{ width: 120 }}
/>
update(idx, {
decoration: {
...(season.decoration || {}),
type: e.target.value,
intensity: season.decoration?.intensity || "low",
},
})
}
sx={{ minWidth: 180 }}
>
{DECORATION_OPTIONS.map((o) => (
))}
COLORES DE TEMPORADA
{SEASON_OVERRIDE_COLORS.map((c) => (
updateTheme(idx, c.key, e.target.value)} />
{c.label}
{season.themeOverrides?.[c.key] || "—"}
))}
BANNER PRINCIPAL (HERO) DE LA TEMPORADA
Reemplaza el banner grande de arriba de la tienda mientras la temporada esté vigente.
updatePromo(idx, "topBar", e.target.value)}
sx={{ minWidth: 280, flex: 1 }}
/>
updatePromo(idx, "heroTitle", e.target.value)}
sx={{ minWidth: 240, flex: 1 }}
/>
updatePromo(idx, "heroSubtitle", e.target.value)}
multiline
minRows={2}
/>
updatePromo(idx, "heroBadge", e.target.value)}
sx={{ minWidth: 160, flex: 1 }}
/>
updatePromo(idx, "heroDealTitle", e.target.value)}
sx={{ minWidth: 160, flex: 1 }}
/>
updatePromo(idx, "heroDealSubtitle", e.target.value)}
sx={{ minWidth: 160, flex: 1 }}
/>
updatePromo(idx, "heroImage", url)}
uploadFn={ecommerceService.uploadStoreImage}
slot={`temporada-${season.id || idx}`}
height={140}
helperText="Reemplaza la imagen del banner principal mientras la temporada esté vigente."
/>
);
})}
);
}
SeasonsPanel.propTypes = {
seasons: PropTypes.array.isRequired,
onSeasonsChange: PropTypes.func.isRequired,
};
function PromotionsContentPanel({ promotions, onPromotionChange, seasons }) {
const p = promotions || {};
// Igual que con los colores, la temporada activa sobrescribe el hero/promo
// base en la tienda (activePromotions = { ...base, ...season.promotions }).
const activeSeason = findActiveSeason(seasons);
const [categorias, setCategorias] = useState([]);
useEffect(() => {
let active = true;
ecommerceService
.getCategorias()
.then((cats) => active && setCategorias(Array.isArray(cats) ? cats : []))
.catch(() => undefined);
return () => {
active = false;
};
}, []);
const targetCategoryValue = p.popupTargetCategory && p.popupTargetCategory !== "Todos" ? p.popupTargetCategory : "";
// Diapositivas propias del carrusel del hero (viven en promotions.heroSlides).
const heroSlides = Array.isArray(p.heroSlides) ? p.heroSlides : [];
const setHeroSlides = (next) => onPromotionChange("heroSlides", next);
const addHeroSlide = () =>
setHeroSlides([
...heroSlides,
{ id: `slide-${Date.now()}`, badge: "", title: "", description: "", ctaLabel: "Ver colección", category: "", image: "", enabled: true },
]);
const updateHeroSlide = (idx, key, value) => setHeroSlides(heroSlides.map((s, i) => (i === idx ? { ...s, [key]: value } : s)));
const removeHeroSlide = (idx) => setHeroSlides(heroSlides.filter((_, i) => i !== idx));
const moveHeroSlide = (idx, dir) => {
const j = idx + dir;
if (j < 0 || j >= heroSlides.length) return;
const next = [...heroSlides];
[next[idx], next[j]] = [next[j], next[idx]];
setHeroSlides(next);
};
return (
{activeSeason && (
}>
La temporada {activeSeason.name || "activa"} está vigente
{activeSeason.endDate ? ` hasta el ${activeSeason.endDate.split("-").reverse().join("/")}` : ""} y
reemplaza este banner por el de la temporada en la tienda. Para cambiar el banner que se ve ahora,
editalo en Diseño → Temporadas → {activeSeason.name || "la temporada activa"}. Lo de acá se muestra
cuando no hay ninguna temporada activa.
)}
Contenido promocional de la tienda
Lo primero que ve el cliente al entrar: barra superior, banner principal o diapositivas y la ventana de bienvenida.
Más abajo, las ofertas de productos.
La franja fina que se ve arriba de todo. Ideal para envío gratis, horarios o una promo corta.
onPromotionChange("topBar", e.target.value)}
/>
El bloque grande que se ve al entrar. Si no cargás diapositivas propias, el carrusel arranca con este banner y sigue con dos categorías destacadas.
{heroSlides.some((s) => s && s.enabled !== false && (s.title || s.image)) && (
Tenés diapositivas propias visibles: la tienda muestra sólo esas y este banner no aparece. Para usarlo, ocultá o
eliminá las diapositivas de abajo.
)}
onPromotionChange("heroTitle", e.target.value)}
sx={{ minWidth: 260, flex: 1 }}
/>
onPromotionChange("heroBadge", e.target.value)}
sx={{ minWidth: 180 }}
/>
onPromotionChange("heroSubtitle", e.target.value)}
multiline
minRows={2}
/>
onPromotionChange("heroImage", url)}
uploadFn={ecommerceService.uploadStoreImage}
slot="hero"
height={160}
helperText="Se muestra grande arriba de la tienda. Ideal apaisada (ancha)."
/>
onPromotionChange("heroDealTitle", e.target.value)}
sx={{ minWidth: 200, flex: 1 }}
/>
onPromotionChange("heroDealSubtitle", e.target.value)}
sx={{ minWidth: 200, flex: 1 }}
/>
{/* Diapositivas propias del carrusel */}
} onClick={addHeroSlide} sx={{ flexShrink: 0 }}>
Agregar diapositiva
}
>
Creá las diapositivas del banner en el orden que quieras, cada una con su texto, imagen y botón. Si hay al menos una
visible, la tienda muestra sólo tus diapositivas; si no, arma el carrusel automático (banner principal + categorías
destacadas).
{heroSlides.length === 0 ? (
Sin diapositivas propias. La tienda muestra el carrusel automático.
) : (
heroSlides.map((slide, idx) => (
updateHeroSlide(idx, "enabled", e.target.checked)} />}
label={
{slide.enabled !== false ? "Visible" : "Oculta"} · Diapositiva {idx + 1}
}
/>
moveHeroSlide(idx, -1)}>
moveHeroSlide(idx, 1)}>
removeHeroSlide(idx)}>
updateHeroSlide(idx, "badge", e.target.value)} sx={{ minWidth: 180, flex: 1 }} />
updateHeroSlide(idx, "title", e.target.value)} sx={{ minWidth: 220, flex: 2 }} />
updateHeroSlide(idx, "description", e.target.value)} />
updateHeroSlide(idx, "ctaLabel", e.target.value)} sx={{ minWidth: 200, flex: 1 }} />
updateHeroSlide(idx, "category", e.target.value)}
helperText="Al tocar el botón, la tienda filtra por esta categoría."
sx={{ minWidth: 220, flex: 1 }}
>
{categorias.map((c) => (
))}
updateHeroSlide(idx, "image", url)}
uploadFn={ecommerceService.uploadStoreImage}
slot="hero-slide"
height={120}
helperText="Imagen de fondo o ilustración de la diapositiva."
/>
))
)}
Muestra una campaña destacada al abrir la tienda, respetando vigencia y frecuencia (por ejemplo, una vez por día por visitante).
onPromotionChange("popupEnabled", e.target.checked)}
/>
}
label={p.popupEnabled ? "Activa" : "Desactivada"}
/>
{p.popupEnabled && (
<>
onPromotionChange("popupBadge", e.target.value)}
placeholder="Oferta especial"
sx={{ minWidth: 180 }}
/>
onPromotionChange("popupTitle", e.target.value)}
sx={{ minWidth: 260, flex: 1 }}
/>
onPromotionChange("popupDescription", e.target.value)}
/>
onPromotionChange("popupImage", url)}
uploadFn={ecommerceService.uploadStoreImage}
slot="promo"
height={150}
helperText="Si la dejás vacía, se usa la imagen del banner principal."
/>
onPromotionChange("popupCtaLabel", e.target.value)}
placeholder="Comprar ahora"
sx={{ minWidth: 190 }}
/>
onPromotionChange("popupTargetCategory", e.target.value)}
helperText="Al tocar la promo, la tienda filtra por esta categoría."
sx={{ minWidth: 220, flex: 1 }}
>
{categorias.map((c) => (
))}
onPromotionChange("popupFrequency", e.target.value)}
sx={{ minWidth: 210 }}
>
onPromotionChange("popupStartDate", e.target.value)}
sx={{ minWidth: 190 }}
/>
onPromotionChange("popupEndDate", e.target.value)}
sx={{ minWidth: 190 }}
/>
{!p.popupImage && p.heroImage && (
Vista previa (usa la imagen del banner principal):
)}
)}
);
}
PromotionsContentPanel.propTypes = {
promotions: PropTypes.object.isRequired,
onPromotionChange: PropTypes.func.isRequired,
seasons: PropTypes.array,
};
const ESTADO_OPTIONS = [
{ value: "borrador", label: "Borrador (no visible)" },
{ value: "activa", label: "Activa (tienda online)" },
{ value: "pausada", label: "Pausada (avisa que está en pausa)" },
];
function DeliveryMethodsEditor({ methods, onChange, envioProductoId, productosServicio = [], onEnvioProductoChange }) {
const cobraEnvio = methods.some((m) => m.enabled !== false && Number(m.cost) > 0);
const updateMethod = (id, field, value) => {
onChange(methods.map((method) => (method.id === id ? { ...method, [field]: value } : method)));
};
const addMethod = () => {
const id = `entrega-${Date.now()}`;
onChange([
...methods,
{
id,
type: "delivery",
name: "Nuevo método de entrega",
cost: 0,
enabled: true,
},
]);
};
return (
Definí las opciones que verá el cliente en checkout y el costo que el backend sumará al pedido.
{methods.map((method) => (
updateMethod(method.id, "enabled", event.target.checked)} color="success" />
}
label={method.enabled !== false ? "Activo" : "Inactivo"}
sx={{ m: 0, minWidth: 100 }}
/>
updateMethod(method.id, "type", event.target.value)}
sx={{ minWidth: 160 }}
>
updateMethod(method.id, "name", event.target.value)}
sx={{ minWidth: 240, flex: 1 }}
/>
updateMethod(method.id, "cost", value)}
sx={{ minWidth: 170 }}
/>
onChange(methods.filter((item) => item.id !== method.id))}
aria-label={`Eliminar ${method.name}`}
>
))}
} onClick={addMethod}>
Agregar método
{/* El costo de envío entra al pedido ERP (y a la factura) como una línea de este
producto. Sin él, el envío se cobraba en la tienda pero no se facturaba. */}
onEnvioProductoChange?.(e.target.value)}
helperText="Un producto sin inventario (servicio). El costo de envío del pedido entra a la factura como una línea de este producto."
sx={{ maxWidth: 480 }}
>
{productosServicio.map((p) => (
))}
{cobraEnvio && !envioProductoId && (
{productosServicio.length === 0
? "Cobrás envío pero no hay ningún producto de servicio para facturarlo. Creá en Productos uno llamado «Envío», sin manejo de inventario, y elegilo acá."
: "Cobrás envío pero no elegiste con qué producto facturarlo: el pedido ERP lo deja anotado y hay que agregarlo a mano en la factura."}
)}
);
}
DeliveryMethodsEditor.propTypes = {
methods: PropTypes.arrayOf(PropTypes.object).isRequired,
onChange: PropTypes.func.isRequired,
envioProductoId: PropTypes.string,
productosServicio: PropTypes.arrayOf(PropTypes.object),
onEnvioProductoChange: PropTypes.func,
};
function PaymentMethodsEditor({ methods, onChange }) {
// Providers reales del gateway. Si la consulta falla (por permisos o porque la
// cuenta todavía no está configurada) el campo queda como texto libre en vez de
// bloquear la pantalla.
const [providers, setProviders] = useState([]);
const [providersError, setProvidersError] = useState(false);
useEffect(() => {
let vivo = true;
getNovasisPayProviders()
.then((data) => {
if (!vivo) return;
setProviders(Array.isArray(data?.providers) ? data.providers : []);
})
.catch(() => vivo && setProvidersError(true));
return () => {
vivo = false;
};
}, []);
const updateMethod = (id, field, value) => {
onChange(methods.map((method) => (method.id === id ? { ...method, [field]: value } : method)));
};
const addMethod = () => {
const id = `pago-${Date.now()}`;
onChange([
...methods,
{
id,
type: "manual",
name: "Nuevo medio de pago",
enabled: true,
discountPercent: 0,
provider: "",
platformId: "",
},
]);
};
return (
Definí qué medios verá el cliente en el checkout. El tipo “Online” dispara el cobro por Novasis Pay; los demás
quedan pendientes de pago para que el operador los confirme manualmente. El descuento (si tiene) se
aplica sobre el subtotal. Podés publicar varios medios online con distinto proveedor —por ejemplo
“Tarjeta” con dLocal y “QR / billetera” con Dpago— y el comprador elige.
{methods.map((method) => (
updateMethod(method.id, "enabled", event.target.checked)} color="success" />
}
label={method.enabled !== false ? "Activo" : "Inactivo"}
sx={{ m: 0, minWidth: 100 }}
/>
updateMethod(method.id, "type", event.target.value)}
sx={{ minWidth: 160 }}
>
updateMethod(method.id, "name", event.target.value)}
sx={{ minWidth: 220, flex: 1 }}
/>
{method.type === "online" && (
updateMethod(method.id, "provider", event.target.value)}
helperText={providersError ? "No se pudo leer el catálogo" : "Vacío = el del gateway"}
sx={{ minWidth: 170 }}
>
{providers.map((p) => (
))}
)}
updateMethod(method.id, "discountPercent", Math.max(0, Math.min(100, Number(event.target.value) || 0)))}
inputProps={{ min: 0, max: 100, step: 1 }}
sx={{ minWidth: 130 }}
/>
onChange(methods.filter((item) => item.id !== method.id))}
aria-label={`Eliminar ${method.name}`}
>
))}
} onClick={addMethod}>
Agregar medio de pago
);
}
function CreditoConfigEditor({ config, onChange }) {
const set = (key, value) => onChange({ ...config, [key]: value });
return (
Los planes de cuotas se cargan por producto en Inventario → Productos → Precios. Al activarlo, el
cliente puede elegir un plan en la ficha y el pedido genera una solicitud de crédito para aprobar. Apagado, la
tienda no muestra ningún plan.
set("enabled", e.target.checked)} />}
label="Habilitar compra en cuotas en la tienda"
/>
{config.enabled && (
<>
Cada pedido financiado crea una solicitud de crédito con las líneas y el plan
elegido. Se aprueba desde Ventas → Solicitudes de crédito, igual que una venta a crédito del mostrador.
set("precedenciaDescuento", e.target.value)}
helperText="Qué descuento se aplica cuando hay dos"
sx={{ flex: 1, minWidth: 260 }}
>
set("estadoInicial", e.target.value)}
helperText="Borrador no entra al circuito de aprobación"
sx={{ flex: 1, minWidth: 240 }}
>
set("intervaloDias", Math.max(1, Number(e.target.value) || 30))}
inputProps={{ min: 1, max: 365, step: 1 }}
helperText="Ej: 30 (mensual)"
sx={{ minWidth: 150 }}
/>
set("mostrarEnTarjeta", e.target.checked)}
/>
}
label='Mostrar "Hasta N cuotas" en las tarjetas del catálogo'
/>
)}
);
}
CreditoConfigEditor.propTypes = {
config: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
};
PaymentMethodsEditor.propTypes = {
methods: PropTypes.arrayOf(PropTypes.object).isRequired,
onChange: PropTypes.func.isRequired,
};
function ConfiguracionPanel({ draft, opciones, onChange, onDeliveryMethodsChange, onEnvioProductoChange, onPaymentMethodsChange, onCheckoutLayoutChange, onCheckoutReservaChange, onCreditoConfigChange, onWorkflowChange, equipo, preparandoEquipo, onPrepararEquipo, cobertura }) {
const depositosFiltrados = (opciones.depositos || []).filter((d) => !draft.sucursal_id || d.sucursal_id === draft.sucursal_id);
const navigate = useNavigate();
return (
Configuración del canal
Identidad y dirección de la tienda, estado de publicación y los valores por defecto que se usan al crear los pedidos de la tienda.
La dirección por la que entran tus clientes y el estado de la tienda. A diferencia del resto, estos cambios rigen apenas guardás.
onChange("subdominio", e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
helperText="Ej: novasis-demo → novasis-demo.novasis.com"
sx={{ minWidth: 260, flex: 1 }}
/>
onChange("estado", e.target.value)}
helperText="Rige apenas guardás, sin publicar. Pausada o en borrador, la tienda muestra un aviso en lugar del catálogo."
sx={{ minWidth: 240, maxWidth: 360 }}
>
{ESTADO_OPTIONS.map((o) => (
))}
onChange("dominio_custom", e.target.value.toLowerCase().trim())}
placeholder="Ej: tienda.suempresa.com.py"
helperText="Si el cliente quiere usar su propio dominio: apuntá un CNAME de este dominio hacia nuestro servidor y avisale al equipo para habilitar el certificado SSL — no es autogestionable desde acá."
sx={{ minWidth: 320, flex: 1 }}
/>
{/* Todos los links que reparte el panel (seguimiento, QR, "ver tienda") salen de
acá. Si el dominio propio está vacío se arma .novasis.com, que no
tiene DNS ni certificado para la mayoría de los tenants: el link se copia igual
y falla con error de SSL recién en manos del comprador. Mostrarlo lo hace
verificable antes de compartirlo. */}
{buildStoreUrl(draft) && (
Los links que compartas apuntan a {buildStoreUrl(draft)}
{!draft.dominio_custom && (
Se arma con el subdominio porque no hay dominio propio cargado. Comprobá que
resuelva y tenga certificado; si la tienda se sirve en otro dominio, cargalo
arriba o el link de seguimiento no va a abrir.
)}
)}
Sucursal y depósito donde se reservará stock, y lista de precios pública usada en el catálogo y checkout.
{
onChange("sucursal_id", e.target.value);
onChange("deposito_id", "");
}}
sx={{ minWidth: 240, flex: 1 }}
>
{(opciones.sucursales || []).map((s) => (
))}
onChange("deposito_id", e.target.value)}
sx={{ minWidth: 240, flex: 1 }}
helperText={draft.sucursal_id ? undefined : "Elegí una sucursal primero"}
>
{depositosFiltrados.map((d) => (
))}
onChange("lista_precios_id", e.target.value)}
sx={{ minWidth: 240, flex: 1 }}
helperText="Vacío = precio base del producto"
>
{(opciones.listas || []).map((l) => (
))}
{cobertura && cobertura.publicados === 0 && (
}>
No hay productos marcados “mostrar en ecommerce”. Marcalos en tu catálogo para que aparezcan en la tienda.
)}
{cobertura && cobertura.publicados > 0 && cobertura.conStock === 0 && (
}
action={
cobertura.mejorDeposito?.id ? (
) : undefined
}
>
Este depósito no tiene stock de los {cobertura.publicados} productos publicados: la tienda mostraría el catálogo vacío.
{cobertura.mejorDeposito?.id && (
<> Con más stock: {cobertura.mejorDeposito.nombre} ({cobertura.mejorDeposito.conStock} productos).
)}
)}
{cobertura && cobertura.publicados > 0 && cobertura.conStock > 0 && (
}>
{cobertura.conStock} de {cobertura.publicados} productos publicados tienen stock {draft.deposito_id ? "en este depósito" : "en algún depósito"}: se verán en la tienda.
)}
Cómo ve el cliente el formulario de compra. En una pantalla es más rápido para quien ya
compró antes; por pasos guía mejor a quien compra por primera vez y suele reducir el abandono.
Formato
{/* Antes había un único plazo fijo de 15 min para todos los pedidos: el link de
Novasis Pay seguía vigente 24 h y una transferencia vencía antes de que el
comercio pudiera confirmarla. */}
Mientras el pedido espera el pago, el stock queda reservado. Si se cumple el plazo
sin pago, el pedido pasa a Expirado y el stock se libera.
onCheckoutReservaChange("reservaHorasOnline", e.target.value)}
inputProps={{ min: 1, max: 168, step: 1 }}
InputLabelProps={{ shrink: true }}
helperText="Lo que dura el link de Novasis Pay. De 1 a 168. Vacío = 1."
sx={{ maxWidth: 260 }}
/>
onCheckoutReservaChange("reservaHorasManual", e.target.value)}
inputProps={{ min: 1, max: 720, step: 1 }}
InputLabelProps={{ shrink: true }}
helperText="Tiempo para confirmar el pago a mano. De 1 a 720. Vacío = 24."
sx={{ maxWidth: 300 }}
/>
{/* Equipo y permisos: atajo a los roles operativos. La asignación de
usuarios vive en Seguridad (fuente de verdad); acá sólo se preparan. */}
{equipo?.listos ? (
} label="Roles creados" />
) : (
}
>
{preparandoEquipo ? "Preparando…" : "Preparar roles de la tienda"}
)}
}
>
Roles listos para operar la tienda. Prepararlos los crea en Seguridad; después asignás cada usuario al rol que corresponda.
{(equipo?.perfiles ?? EQUIPO_ROLES_FALLBACK).map((rol) => (
{rol.perfil}
{rol.existe ? (
) : (
)}
{rol.desc}
))}
);
}
// Roles operativos de la tienda (coinciden con los perfiles autoProvision del
// backend). El fallback se muestra si el backend aún no devolvió el estado.
const EQUIPO_ROLES_FALLBACK = [
{ perfil: "Gestor de Tienda", desc: "Diseña, publica y mantiene la tienda y las novedades. Ve pedidos y pagos, sin operarlos.", existe: false, usuarios: 0 },
{ perfil: "Operador Ecommerce", desc: "Operación completa de pedidos: prepara, despacha, retiros, incidencias y cancelación.", existe: false, usuarios: 0 },
{ perfil: "Despacho Ecommerce", desc: "Prepara y despacha delivery (en camino / entregado). No atiende mostrador ni cancela.", existe: false, usuarios: 0 },
{ perfil: "Mostrador Ecommerce", desc: "Prepara y confirma retiros en el local. No despacha delivery ni cancela.", existe: false, usuarios: 0 },
];
const EQUIPO_ROL_ICON = {
"Gestor de Tienda": "lucide:palette",
"Operador Ecommerce": "lucide:user-cog",
"Despacho Ecommerce": "lucide:truck",
"Mostrador Ecommerce": "lucide:store",
};
ConfiguracionPanel.propTypes = {
draft: PropTypes.object.isRequired,
opciones: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onDeliveryMethodsChange: PropTypes.func.isRequired,
onEnvioProductoChange: PropTypes.func,
onCheckoutLayoutChange: PropTypes.func.isRequired,
onCheckoutReservaChange: PropTypes.func.isRequired,
onPaymentMethodsChange: PropTypes.func.isRequired,
onCreditoConfigChange: PropTypes.func.isRequired,
onWorkflowChange: PropTypes.func.isRequired,
equipo: PropTypes.object,
preparandoEquipo: PropTypes.bool,
onPrepararEquipo: PropTypes.func,
cobertura: PropTypes.object,
};
const ESTADO_PEDIDO_META = {
pendiente_pago: {
label: "Pendiente pago",
description: "Checkout recibido, pendiente de aprobación o verificación del pago.",
tone: "#f59e0b",
bg: "#fff7ed",
icon: "lucide:clock-3",
},
pago_confirmado: {
label: "A verificar",
description: "Pago confirmado. El operador valida datos y libera a preparación.",
tone: "#2563eb",
bg: "#eff6ff",
icon: "lucide:clipboard-check",
},
en_verificacion: {
label: "En verificación",
description: "Pedido tomado por un verificador. Otro operador ya no puede tomarlo.",
tone: "#2563eb",
bg: "#eff6ff",
icon: "lucide:user-check",
},
verificado: {
label: "Verificado",
description: "Datos, pago y reserva validados; listo para preparación.",
tone: "#0f766e",
bg: "#ecfdf5",
icon: "lucide:badge-check",
},
pedido_creado: {
label: "Pedido ERP",
description: "Pedido ERP creado con stock reservado, listo para preparación.",
tone: "#0f766e",
bg: "#ecfdf5",
icon: "lucide:file-check-2",
},
preparando: {
label: "En preparación",
description: "Picking, empaque y control de productos.",
tone: "#7c3aed",
bg: "#f5f3ff",
icon: "lucide:package-open",
},
empaquetado: {
label: "Empaquetado",
description: "Productos controlados y embalados.",
tone: "#7c3aed",
bg: "#f5f3ff",
icon: "lucide:package-check",
},
listo: {
label: "Listo despacho",
description: "Pedido preparado para retiro o entrega.",
tone: "#0891b2",
bg: "#ecfeff",
icon: "lucide:package-check",
},
listo_retiro: {
label: "Listo para retiro",
description: "El cliente puede retirar el pedido en el local.",
tone: "#0891b2",
bg: "#ecfeff",
icon: "lucide:store",
},
listo_despacho: {
label: "Listo para despacho",
description: "Pedido preparado para entregar al repartidor o transportista.",
tone: "#0891b2",
bg: "#ecfeff",
icon: "lucide:package-check",
},
en_camino: {
label: "En camino",
description: "Pedido despachado y en traslado al cliente.",
tone: "#0284c7",
bg: "#f0f9ff",
icon: "lucide:truck",
},
retirado: {
label: "Retirado",
description: "Pedido retirado en el local y cerrado.",
tone: "#16a34a",
bg: "#f0fdf4",
icon: "lucide:shopping-bag-check",
},
entregado: {
label: "Entregado",
description: "Pedido cerrado y entregado al cliente.",
tone: "#16a34a",
bg: "#f0fdf4",
icon: "lucide:check-circle-2",
},
incidencia: {
label: "Con incidencia",
description: "Pedido congelado fuera del flujo. Un supervisor lo reencauza a preparación o lo cancela.",
tone: "#ea580c",
bg: "#fff7ed",
icon: "lucide:triangle-alert",
},
cancelado: {
label: "Cancelado",
description: "Cancelado por incidencia, pago rechazado o decisión operativa.",
tone: "#dc2626",
bg: "#fef2f2",
icon: "lucide:x-circle",
},
expirado: {
label: "Expirado",
description: "Checkout vencido sin completar pago.",
tone: "#64748b",
bg: "#f8fafc",
icon: "lucide:timer-off",
},
};
// `always`: se muestra siempre. `needs`: solo si el flujo usa esa etapa/rama.
// `terminalNoise`: estado final que solo se muestra si tiene pedidos. En todos
// los casos, un estado con pedidos (count>0) se muestra igual, para no ocultar
// nada operativo.
const PEDIDO_ESTADO_TABS = [
{ value: "", label: "Todos", icon: "lucide:list", tone: "#475569", always: true },
{ value: "pendiente_pago", label: "Pendiente pago", icon: "lucide:clock-3", tone: "#f59e0b", always: true },
{ value: "pago_confirmado", label: "A verificar", icon: "lucide:clipboard-check", tone: "#2563eb", always: true },
{ value: "en_verificacion", label: "Verificando", icon: "lucide:user-check", tone: "#2563eb", needs: "verificacion" },
{ value: "verificado", label: "Verificado", icon: "lucide:badge-check", tone: "#0f766e", needs: "verificacion" },
{ value: "preparando", label: "Preparación", icon: "lucide:package-open", tone: "#7c3aed", always: true },
{ value: "empaquetado", label: "Empaquetado", icon: "lucide:package-check", tone: "#7c3aed", needs: "empaque" },
{ value: "listo_despacho", label: "Listo despacho", icon: "lucide:package-check", tone: "#0891b2", needs: "delivery" },
{ value: "en_camino", label: "En camino", icon: "lucide:truck", tone: "#0284c7", needs: "transito" },
{ value: "entregado", label: "Entregado", icon: "lucide:check-circle-2", tone: "#16a34a", needs: "delivery" },
{ value: "listo_retiro", label: "Listo retiro", icon: "lucide:store", tone: "#0891b2", needs: "pickup" },
{ value: "retirado", label: "Retirado", icon: "lucide:shopping-bag-check", tone: "#16a34a", needs: "pickup" },
{ value: "incidencia", label: "Incidencias", icon: "lucide:triangle-alert", tone: "#ea580c", always: true },
{ value: "cancelado", label: "Cancelados", icon: "lucide:x-circle", tone: "#dc2626", always: true },
{ value: "expirado", label: "Expirados", icon: "lucide:timer-off", tone: "#64748b", terminalNoise: true },
];
// Deriva qué etapas/ramas usa la tienda según su workflow y métodos de entrega.
// Sin config (aún cargando) asume todo activo para no ocultar de más.
function derivarFlujoPedidos(workflow, checkout) {
return {
verificacion: workflow?.verificationEnabled ?? true,
empaque: workflow?.packingEnabled ?? true,
transito: workflow?.transitEnabled ?? true,
delivery: checkout?.allowDelivery ?? true,
pickup: checkout?.allowPickup ?? true,
};
}
function tabsPedidosVisibles(flujo, resumen) {
return PEDIDO_ESTADO_TABS.map((tab) =>
tab.value === "pago_confirmado" && !flujo.verificacion ? { ...tab, label: PAGO_CONFIRMADO_SIN_VERIFICACION.label } : tab,
).filter((tab) => {
if (tab.always) return true;
if ((resumen?.[tab.value] || 0) > 0) return true; // nunca ocultar un estado con pedidos
if (tab.terminalNoise) return false;
if (tab.needs === "verificacion") return flujo.verificacion;
if (tab.needs === "empaque") return flujo.empaque;
if (tab.needs === "transito") return flujo.delivery && flujo.transito;
if (tab.needs === "delivery") return flujo.delivery;
if (tab.needs === "pickup") return flujo.pickup;
return true;
});
}
const ACCION_ESTADO_LABEL = {
pago_confirmado: "Confirmar pago",
en_verificacion: "Tomar para verificar",
verificado: "Finalizar verificación",
preparando: "Iniciar preparación",
empaquetado: "Confirmar empaque",
listo: "Marcar listo",
listo_retiro: "Dejar listo para retiro",
listo_despacho: "Dejar listo para despacho",
en_camino: "Marcar en camino",
retirado: "Confirmar retiro",
entregado: "Marcar entregado",
cancelado: "Cancelar pedido",
};
/**
* Qué pasa con el pedido en el ERP. Antes era «Reservado» o «Pendiente»: un pedido
* expirado decía «Pendiente» como si faltara crearlo, y uno entregado seguía
* «Reservado» aunque no estuviera facturado.
*/
function estadoErp(p) {
if (p.factura) {
return { label: "Facturado", title: `Factura ${p.factura.numero}`, icon: "lucide:receipt", tone: "#16a34a", bg: "#f0fdf4" };
}
// Compra en cuotas: no lleva pedido ERP, se factura desde la solicitud de crédito.
if (p.credito && !["rechazada", "cancelada"].includes(p.credito.estado)) {
return {
label: p.credito.estado === "aprobada" ? "Crédito aprobado" : "Crédito en trámite",
title: "Compra en cuotas: se factura desde la solicitud de crédito (POS → Solicitudes Crédito)",
icon: "lucide:calendar-clock",
tone: "#2563eb",
bg: "#eff6ff",
};
}
if (["expirado", "cancelado"].includes(p.estado)) {
return { label: "No aplica", title: "El pedido no llegó a generar pedido ERP", icon: "lucide:minus", tone: "#64748b", bg: "#f1f5f9" };
}
if (p.pedido_id && ["entregado", "retirado"].includes(p.estado)) {
return { label: "Sin facturar", title: "Entregado pero todavía sin factura", icon: "lucide:alert-circle", tone: "#c2410c", bg: "#fff7ed" };
}
if (p.pedido_id) {
return { label: "Reservado", title: "Pedido ERP creado con stock reservado", icon: "lucide:check-circle-2", tone: "#16a34a", bg: "#f0fdf4" };
}
return { label: "Pendiente", title: "El pedido ERP se crea al confirmar el pago", icon: "lucide:circle-dashed", tone: "#f59e0b", bg: "#fff7ed" };
}
/**
* Medio de pago que eligió el comprador ("Novasis Pay (tarjetas)", "Transferencia
* bancaria"). Antes se mostraba el identificador crudo ("novasis_pay", "manual").
* Los pedidos viejos no guardaban el nombre: se cae a una etiqueta genérica.
*/
function nombreMedioPago(metodo, nombre) {
if (nombre && String(nombre).trim()) return String(nombre).trim();
return metodo === "novasis_pay" ? "Novasis Pay" : "Manual";
}
/**
* Qué hace cada botón, en criollo. Los nombres de estado solos no alcanzaban:
* "Tomar para verificar" y "Crear pedido ERP" parecían alternativas cuando en
* realidad son pasos distintos del mismo circuito.
*/
const ACCION_ESTADO_AYUDA = {
pago_confirmado: "Marca el pago como recibido y habilita la preparación.",
en_verificacion: "Te asigna el pedido para revisarlo. Nadie más lo va a tomar mientras tanto.",
verificado: "Confirma que los datos y el stock están bien y deja el pedido listo para preparar.",
preparando: "Arranca la preparación física del pedido.",
empaquetado: "El pedido ya está armado y embalado.",
listo: "El pedido queda listo para su entrega.",
listo_retiro: "Queda a la espera de que el cliente lo pase a buscar.",
listo_despacho: "Queda a la espera del transporte.",
en_camino: "El pedido salió a reparto.",
retirado: "El cliente ya lo retiró del local.",
entregado: "El pedido llegó a destino. Cierra el circuito.",
cancelado: "Anula el pedido y libera el stock reservado. No se puede deshacer.",
};
// Alineado con las opciones del selector de TablePaginationBar (10/20/50/100).
const PAGE_SIZE = 10;
/**
* Pestaña Pagos: cómo está cobrando la tienda (gateway Novasis Pay vs. manual),
* el detalle de cada cobro y la reconciliación contra el gateway.
*
* El botón "Sincronizar" existe porque el webhook puede perderse o el cliente
* puede pagar y nunca volver a la tienda: el operador destraba el pedido desde
* acá y, si el pago está aprobado, se crea el pedido ERP y se reserva el stock.
*/
function PagosPanel() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [estado, setEstado] = useState("");
const [metodo, setMetodo] = useState("");
const [q, setQ] = useState("");
const [syncing, setSyncing] = useState(null);
const [webhooks, setWebhooks] = useState([]);
const [verWebhooks, setVerWebhooks] = useState(false);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(PAGE_SIZE);
const [pagosEstado, setPagosEstado] = useState(null);
useEffect(() => {
let active = true;
ecommerceService
.getPagosEstado()
.then((pe) => active && setPagosEstado(pe))
.catch(() => undefined);
return () => {
active = false;
};
}, []);
const cargar = useCallback(async () => {
setLoading(true);
try {
const res = await ecommerceService.listPagos({
estado: estado || undefined,
metodo: metodo || undefined,
q: q.trim() || undefined,
});
setData(res);
} catch (err) {
toast.error(err.response?.data?.message || "No se pudieron cargar los pagos");
} finally {
setLoading(false);
}
}, [estado, metodo, q]);
useEffect(() => {
setPage(1);
cargar();
}, [cargar]);
const sincronizar = async (id) => {
setSyncing(id);
try {
const res = await ecommerceService.sincronizarPago(id);
if (res.ok) toast.success(res.mensaje);
else toast.warning(res.mensaje);
await cargar();
} catch (err) {
toast.error(err.response?.data?.message || "No se pudo sincronizar el pago");
} finally {
setSyncing(null);
}
};
const abrirWebhooks = async () => {
setVerWebhooks(true);
try {
setWebhooks(await ecommerceService.listWebhooksPago());
} catch {
toast.error("No se pudieron cargar los webhooks");
}
};
const items = data?.items ?? [];
const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
const pageItems = items.slice((page - 1) * pageSize, page * pageSize);
const gateway = data?.gateway;
const resumen = data?.resumen;
return (
{/* Estado del gateway: define si la tienda cobra online o a mano. */}
{gateway && (
}
action={
}>
Ver webhooks
}
>
{gateway.activo ? (
<>
Novasis Pay activo — los pagos se cobran online
{pagosEstado?.tieneWebhook
? " y se confirman automáticamente por webhook"
: " y se confirman al consultar el gateway (falta la clave de webhook para que sea automático)"}
{" "}(merchant {gateway.merchantId ?? "—"}).
) : (
<>
Cobro manual — Novasis Pay no está configurado. El cliente transfiere y el operador confirma el pago desde la pestaña Pedidos.
)}
)}
{pagosEstado?.activo && (pagosEstado.mode !== "live" || !pagosEstado.tieneWebhook) && (
}>
{pagosEstado.mode !== "live" && (
<>Novasis Pay está en modo pruebas — no se cobra dinero real. Pasá a producción cuando estés listo.
)}
{!pagosEstado.tieneWebhook && (
<>Falta la clave de notificaciones (webhook): los pagos se confirman por consulta manual, no al instante.
)}
Configuralo en la pantalla Novasis Pay.
)}
{/* KPIs */}
Cobrado
{loading ? : fmtGs(resumen?.cobrado)}
Pendiente de pago
{loading ? : fmtGs(resumen?.pendiente)}
Pagos online
{loading ? : (resumen?.porMetodo?.novasis_pay ?? 0)}
Cobros manuales
{loading ? : (resumen?.porMetodo?.manual ?? 0)}
{/* Filtros */}
setQ(e.target.value)}
sx={{ minWidth: 220 }}
/>
setEstado(e.target.value)} sx={{ minWidth: 180 }}>
{Object.entries(ESTADO_PEDIDO_META).map(([k, m]) => (
))}
setMetodo(e.target.value)} sx={{ minWidth: 160 }}>
} disabled={loading}>
Refrescar
{/* Tabla */}
{loading ? (
) : items.length === 0 ? (
) : (
<>