Compare commits
22
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8d543f5eb1 | ||
|
|
8fd0514e76 | ||
|
|
1cde29b344 | ||
|
|
8517102b63 | ||
|
|
7773bcdecf | ||
|
|
c62ad626cc | ||
|
|
8835d8ca0c | ||
|
|
997a00c284 | ||
|
|
0fb904b9ac | ||
|
|
a5ede05d96 | ||
|
|
63746eb090 | ||
|
|
2ca00d032d | ||
|
|
cb15749448 | ||
|
|
9e1adf4627 | ||
|
|
0ad74b6b70 | ||
|
|
d1d007fc7d | ||
|
|
11ac6d7949 | ||
|
|
093ae419d5 | ||
|
|
2b0d50c3d0 | ||
|
|
8126bb3d81 | ||
|
|
dedf4f0963 | ||
|
|
1cd1078cdf |
No files matched your search
@@ -0,0 +1,148 @@
|
||||
import { defineRouteConfig } from "@medusajs/admin-sdk";
|
||||
import { ArrowDownTray, ArrowUpTray, CheckCircleSolid, XCircleSolid } from "@medusajs/icons";
|
||||
import { Badge, Button, Container, Heading, Text, toast } from "@medusajs/ui";
|
||||
import { useRef, useState } from "react";
|
||||
import { sdk } from "../../lib/sdk";
|
||||
|
||||
// Importador masivo via CSV -- pensado para cargar varios productos de
|
||||
// una sola vez (comprados en Amazon/eBay/etc, no dropshipping
|
||||
// automatizado -- ver conversacion sobre por que se descarto raspar
|
||||
// tiendas de terceros). Las fotos se descargan del origen y se re-alojan
|
||||
// en el mismo MinIO/S3 del NAS que ya usa el resto del catalogo.
|
||||
|
||||
type RowResult = {
|
||||
row: number;
|
||||
title: string;
|
||||
ok: boolean;
|
||||
action?: "created" | "updated";
|
||||
error?: string;
|
||||
};
|
||||
|
||||
function downloadTemplate() {
|
||||
window.open("/admin/product-import", "_blank");
|
||||
}
|
||||
|
||||
const ProductImportPanel = () => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [results, setResults] = useState<RowResult[] | null>(null);
|
||||
|
||||
async function handleFile(file: File) {
|
||||
const csv = await file.text();
|
||||
setLoading(true);
|
||||
setResults(null);
|
||||
try {
|
||||
const data = await sdk.client.fetch<{ results?: RowResult[]; error?: string }>("/admin/product-import", {
|
||||
method: "post",
|
||||
body: { csv },
|
||||
});
|
||||
if (data.error) {
|
||||
toast.error("No se pudo procesar el archivo", { description: data.error });
|
||||
return;
|
||||
}
|
||||
setResults(data.results ?? []);
|
||||
const okCount = data.results?.filter((r) => r.ok).length ?? 0;
|
||||
const failCount = (data.results?.length ?? 0) - okCount;
|
||||
if (failCount === 0) {
|
||||
toast.success(`${okCount} productos importados`);
|
||||
} else {
|
||||
toast.warning(`${okCount} importados, ${failCount} con error`, {
|
||||
description: "Revisa el detalle abajo.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("No se pudo procesar el archivo", { description: (error as Error).message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="divide-y p-0">
|
||||
<div className="flex items-center justify-between px-6 py-4">
|
||||
<div>
|
||||
<Heading level="h2">Importación de productos</Heading>
|
||||
<Text size="small" className="text-ui-fg-subtle">
|
||||
Carga varios productos a la vez desde un archivo CSV, con fotos, descripción y precio.
|
||||
</Text>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="small" variant="secondary" onClick={downloadTemplate}>
|
||||
<ArrowDownTray />
|
||||
Descargar plantilla
|
||||
</Button>
|
||||
<Button size="small" variant="primary" isLoading={loading} onClick={() => inputRef.current?.click()}>
|
||||
<ArrowUpTray />
|
||||
Subir CSV
|
||||
</Button>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept=".csv,text/csv"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) handleFile(file);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4">
|
||||
<Text size="small" className="text-ui-fg-subtle">
|
||||
Columnas: <code>titulo, descripcion, precio, categoria, coleccion, cantidad, fotos</code>. Varias fotos se
|
||||
separan con <code>;</code> dentro de la misma celda. Si <code>categoria</code>/<code>coleccion</code> no
|
||||
coinciden con una ya existente, se crean nuevas. Si <code>titulo</code> coincide con un producto ya
|
||||
importado, no se duplica: se le agregan las fotos nuevas y se actualiza la descripción si la fila trae una.
|
||||
Cada foto se descarga y se guarda en el almacenamiento propio de la tienda (no queda enlazada al sitio de
|
||||
origen).
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{results && (
|
||||
<div className="px-6 py-4">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-left text-ui-fg-subtle">
|
||||
<th className="w-10 py-2" />
|
||||
<th className="py-2 font-medium">Fila</th>
|
||||
<th className="py-2 font-medium">Producto</th>
|
||||
<th className="py-2 font-medium">Detalle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{results.map((result) => (
|
||||
<tr key={result.row} className="border-b last:border-0">
|
||||
<td className="py-2">
|
||||
{result.ok ? (
|
||||
<CheckCircleSolid className="text-ui-tag-green-icon" />
|
||||
) : (
|
||||
<XCircleSolid className="text-ui-tag-red-icon" />
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2">{result.row}</td>
|
||||
<td className="py-2">{result.title}</td>
|
||||
<td className="py-2">
|
||||
{result.ok ? (
|
||||
<Badge color="green">{result.action === "updated" ? "Actualizado (ya existía)" : "Importado"}</Badge>
|
||||
) : (
|
||||
<span className="text-rose-600">{result.error}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export const config = defineRouteConfig({
|
||||
label: "Importación",
|
||||
icon: ArrowUpTray,
|
||||
});
|
||||
|
||||
export default ProductImportPanel;
|
||||
@@ -0,0 +1,328 @@
|
||||
import type { MedusaRequest, MedusaResponse } from "@medusajs/framework";
|
||||
import { Modules } from "@medusajs/framework/utils";
|
||||
import type {
|
||||
IFulfillmentModuleService,
|
||||
IProductModuleService,
|
||||
ISalesChannelModuleService,
|
||||
IStockLocationService,
|
||||
} from "@medusajs/framework/types";
|
||||
import {
|
||||
createCollectionsWorkflow,
|
||||
createInventoryItemsWorkflow,
|
||||
createProductCategoriesWorkflow,
|
||||
createProductsWorkflow,
|
||||
updateProductsWorkflow,
|
||||
uploadFilesWorkflow,
|
||||
} from "@medusajs/medusa/core-flows";
|
||||
import { csvRowsToObjects, parseCsv } from "../../../lib/csv";
|
||||
|
||||
// Importador masivo de productos via CSV -- para alguien que compra
|
||||
// producto fisico en Amazon/eBay/etc. y quiere cargarlo rapido a la
|
||||
// tienda, no para dropshipping automatizado (ver conversacion: se evaluo
|
||||
// y se descarto raspar catalogos de terceros sin autorizacion). Cada
|
||||
// fila se procesa independiente (una foto rota o categoria mal escrita
|
||||
// no tumba el resto del archivo).
|
||||
//
|
||||
// categoria/coleccion: si el nombre no matchea una categoria/coleccion
|
||||
// ya existente (case-insensitive), se crea nueva -- antes se descartaba
|
||||
// en silencio y el producto quedaba sin categoria/coleccion sin avisar
|
||||
// (confirmado en vivo: "Hello Kitty & Friends" nunca se creo como
|
||||
// coleccion). El handle de la nueva categoria/coleccion se genera con
|
||||
// el mismo slugify() ASCII-safe de mas abajo, por la misma razon que el
|
||||
// handle del producto: el default de Medusa no quita tildes/enies y
|
||||
// rompe la ruta publica.
|
||||
//
|
||||
// Re-importar el mismo titulo (ej. para agregar mas fotos o actualizar
|
||||
// la descripcion de un producto ya cargado) actualiza el producto
|
||||
// existente en vez de crear uno nuevo -- antes cada re-importacion
|
||||
// generaba un producto duplicado con handle distinto (confirmado en
|
||||
// vivo con "Hello Kitty & Friends": misma fila re-subida para sumar
|
||||
// fotos, dos productos con el mismo titulo en la tienda). El match es
|
||||
// por titulo exacto (case-insensitive/trim), igual que categoria y
|
||||
// coleccion; en un match, las fotos nuevas se agregan a las que ya
|
||||
// tenia (no se reemplazan) y la descripcion se actualiza si la fila
|
||||
// trae una. No toca precio/cantidad/categoria/coleccion del producto
|
||||
// existente -- eso se edita a mano en el admin si hace falta.
|
||||
//
|
||||
// Las fotos se descargan del origen y se re-alojan en el mismo
|
||||
// MinIO/S3 que ya usa el resto del catalogo (uploadFilesWorkflow ->
|
||||
// mismo File Module Provider de medusa-config.ts, ya corre en el NAS).
|
||||
// El bucket (S3_BUCKET=ari-products) es plano -- el provider de S3 de
|
||||
// Medusa descarta cualquier subcarpeta del filename (usa solo
|
||||
// path.parse().name + ulid, confirmado leyendo
|
||||
// @medusajs/file-s3/dist/services/s3-file.js), asi que no hay una
|
||||
// carpeta separada real para lo importado -- queda mezclado con el
|
||||
// resto de fotos del catalogo, mismo criterio de nombres unicos por
|
||||
// ulid que ya usa todo el sitio.
|
||||
|
||||
const MAX_IMAGE_BYTES = 8 * 1024 * 1024;
|
||||
const IMAGE_FETCH_TIMEOUT_MS = 15000;
|
||||
const OPTION_TITLE = "Presentación";
|
||||
const DEFAULT_VARIANT_VALUE = "Estandar";
|
||||
|
||||
type ImportRow = {
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
precio: string;
|
||||
categoria: string;
|
||||
coleccion: string;
|
||||
cantidad: string;
|
||||
fotos: string;
|
||||
};
|
||||
|
||||
type RowResult = {
|
||||
row: number;
|
||||
title: string;
|
||||
ok: boolean;
|
||||
action?: "created" | "updated";
|
||||
error?: string;
|
||||
};
|
||||
|
||||
// Medusa genera el handle por defecto solo en minusculas + espacios a
|
||||
// guiones, sin quitar tildes/enies -- confirmado en vivo: 3 productos
|
||||
// importados con titulo acentuado (ej. "niñas", "Lógicos") quedaron con
|
||||
// handle como "...niñas..." y daban 404 real al entrar por
|
||||
// shop.cruzcloud.net (el tunel/ingress publico rompe rutas con UTF-8
|
||||
// no-ASCII en el path, aunque el mismo request funciona perfecto pegandole
|
||||
// directo al servicio dentro del cluster). Se genera el handle nosotros
|
||||
// mismos, ASCII-only, en vez de dejarselo al default de Medusa. El sufijo
|
||||
// corto evita colisiones entre titulos parecidos/repetidos sin necesidad
|
||||
// de revisar unicidad antes de crear.
|
||||
function slugify(title: string, uniquePart: string): string {
|
||||
const base = title
|
||||
.normalize("NFD")
|
||||
.replace(/[̀-ͯ]/g, "")
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.slice(0, 80)
|
||||
.replace(/-+$/g, "");
|
||||
return `${base || "producto"}-${uniquePart}`;
|
||||
}
|
||||
|
||||
function extensionFromContentType(contentType: string | null, url: string): string {
|
||||
if (contentType?.includes("png")) return "png";
|
||||
if (contentType?.includes("webp")) return "webp";
|
||||
if (contentType?.includes("gif")) return "gif";
|
||||
if (contentType?.includes("jpeg") || contentType?.includes("jpg")) return "jpg";
|
||||
const match = url.match(/\.(jpe?g|png|webp|gif)(?:\?|$)/i);
|
||||
return match ? match[1].toLowerCase().replace("jpeg", "jpg") : "jpg";
|
||||
}
|
||||
|
||||
async function downloadImageAsBase64(url: string): Promise<{ content: string; mimeType: string; extension: string }> {
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(() => controller.abort(), IMAGE_FETCH_TIMEOUT_MS);
|
||||
try {
|
||||
const response = await fetch(url, { signal: controller.signal });
|
||||
if (!response.ok) {
|
||||
throw new Error(`No se pudo descargar la imagen (${response.status})`);
|
||||
}
|
||||
const contentType = response.headers.get("content-type");
|
||||
const buffer = Buffer.from(await response.arrayBuffer());
|
||||
if (buffer.byteLength > MAX_IMAGE_BYTES) {
|
||||
throw new Error(`Imagen supera ${MAX_IMAGE_BYTES / 1024 / 1024}MB`);
|
||||
}
|
||||
const extension = extensionFromContentType(contentType, url);
|
||||
return {
|
||||
content: buffer.toString("base64"),
|
||||
mimeType: contentType?.split(";")[0] ?? `image/${extension === "jpg" ? "jpeg" : extension}`,
|
||||
extension,
|
||||
};
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(req: MedusaRequest, res: MedusaResponse) {
|
||||
// Plantilla descargable -- misma fuente de verdad que valida el POST,
|
||||
// asi que las columnas nunca quedan desincronizadas entre lo que se
|
||||
// ofrece descargar y lo que realmente se procesa.
|
||||
const header = "titulo,descripcion,precio,categoria,coleccion,cantidad,fotos";
|
||||
const example =
|
||||
'"Muñeco Buzz Lightyear","Figura articulada de 30cm, edición coleccionista.",89900,"Figuras de accion","Toy Story",3,"https://ejemplo.com/foto1.jpg;https://ejemplo.com/foto2.jpg"';
|
||||
const csv = `${header}\n${example}\n`;
|
||||
res.setHeader("Content-Type", "text/csv; charset=utf-8");
|
||||
res.setHeader("Content-Disposition", 'attachment; filename="plantilla-importacion.csv"');
|
||||
res.send(csv);
|
||||
}
|
||||
|
||||
export async function POST(req: MedusaRequest<{ csv: string }>, res: MedusaResponse) {
|
||||
const csvText = req.body?.csv;
|
||||
if (!csvText || typeof csvText !== "string") {
|
||||
res.status(400).json({ error: "Falta el contenido CSV" });
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = csvRowsToObjects(parseCsv(csvText)) as unknown as ImportRow[];
|
||||
if (rows.length === 0) {
|
||||
res.status(400).json({ error: "El archivo no tiene filas de datos" });
|
||||
return;
|
||||
}
|
||||
|
||||
const stockLocationService = req.scope.resolve<IStockLocationService>(Modules.STOCK_LOCATION);
|
||||
const fulfillmentService = req.scope.resolve<IFulfillmentModuleService>(Modules.FULFILLMENT);
|
||||
const salesChannelService = req.scope.resolve<ISalesChannelModuleService>(Modules.SALES_CHANNEL);
|
||||
const productService = req.scope.resolve<IProductModuleService>(Modules.PRODUCT);
|
||||
|
||||
const [locations, shippingProfiles, salesChannels, categories, collections, existingProducts] = await Promise.all([
|
||||
stockLocationService.listStockLocations({}),
|
||||
fulfillmentService.listShippingProfiles({}),
|
||||
salesChannelService.listSalesChannels({}),
|
||||
// select explicito -- sin el, name/title llegaban undefined (el
|
||||
// default de estos module services no siempre trae todos los
|
||||
// escalares, a diferencia de la capa HTTP del Admin API, confirmado
|
||||
// en vivo: la ruta /admin/product-categories con fields=id,name si
|
||||
// los trae completos).
|
||||
productService.listProductCategories({}, { select: ["id", "name"] }),
|
||||
productService.listProductCollections({}, { select: ["id", "title"] }),
|
||||
productService.listProducts({}, { select: ["id", "title"], relations: ["images"] }),
|
||||
]);
|
||||
|
||||
const locationId = locations[0]?.id;
|
||||
const shippingProfileId = shippingProfiles.find((p) => p.type === "default")?.id ?? shippingProfiles[0]?.id;
|
||||
const salesChannelId = salesChannels[0]?.id;
|
||||
|
||||
if (!locationId || !shippingProfileId || !salesChannelId) {
|
||||
res.status(400).json({
|
||||
error: "Faltan datos base de la tienda (bodega, perfil de envío o canal de venta)",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const categoryByName = new Map(
|
||||
categories.filter((c) => c.name).map((c) => [c.name.toLowerCase().trim(), c.id]),
|
||||
);
|
||||
const collectionByName = new Map(
|
||||
collections.filter((c) => c.title).map((c) => [c.title.toLowerCase().trim(), c.id]),
|
||||
);
|
||||
const productByTitle = new Map(
|
||||
existingProducts.filter((p) => p.title).map((p) => [p.title.toLowerCase().trim(), p]),
|
||||
);
|
||||
|
||||
const results: RowResult[] = [];
|
||||
|
||||
for (let index = 0; index < rows.length; index++) {
|
||||
const rowNumber = index + 2; // +1 header, +1 base 1
|
||||
const row = rows[index];
|
||||
const title = row.titulo?.trim();
|
||||
try {
|
||||
if (!title) throw new Error("Falta el título");
|
||||
const price = Number(row.precio);
|
||||
if (!Number.isFinite(price) || price <= 0) throw new Error("Precio inválido");
|
||||
|
||||
const imageUrls = (row.fotos ?? "")
|
||||
.split(";")
|
||||
.map((u) => u.trim())
|
||||
.filter(Boolean);
|
||||
if (imageUrls.length === 0) throw new Error("Falta al menos una foto");
|
||||
|
||||
const downloaded = await Promise.all(imageUrls.map((url) => downloadImageAsBase64(url)));
|
||||
const { result: uploadedFiles } = await uploadFilesWorkflow(req.scope).run({
|
||||
input: {
|
||||
files: downloaded.map((file, i) => ({
|
||||
filename: `${Date.now()}-${index}-${i}.${file.extension}`,
|
||||
mimeType: file.mimeType,
|
||||
content: file.content,
|
||||
access: "public" as const,
|
||||
})),
|
||||
},
|
||||
});
|
||||
|
||||
const existingProduct = productByTitle.get(title.toLowerCase());
|
||||
if (existingProduct) {
|
||||
await updateProductsWorkflow(req.scope).run({
|
||||
input: {
|
||||
products: [
|
||||
{
|
||||
id: existingProduct.id,
|
||||
description: row.descripcion?.trim() || undefined,
|
||||
images: [...(existingProduct.images ?? []).map((image) => ({ url: image.url })), ...uploadedFiles.map((f) => ({ url: f.url }))],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
results.push({ row: rowNumber, title, ok: true, action: "updated" });
|
||||
continue;
|
||||
}
|
||||
|
||||
const quantity = Number(row.cantidad);
|
||||
const { result: inventoryItems } = await createInventoryItemsWorkflow(req.scope).run({
|
||||
input: {
|
||||
items: [
|
||||
{
|
||||
title,
|
||||
location_levels: [
|
||||
{ location_id: locationId, stocked_quantity: Number.isFinite(quantity) && quantity >= 0 ? quantity : 1 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const inventoryItemId = inventoryItems[0]?.id;
|
||||
if (!inventoryItemId) throw new Error("No se pudo crear el registro de inventario");
|
||||
|
||||
const categoryName = row.categoria?.trim();
|
||||
let categoryId = categoryName ? categoryByName.get(categoryName.toLowerCase()) : undefined;
|
||||
if (categoryName && !categoryId) {
|
||||
const { result: createdCategories } = await createProductCategoriesWorkflow(req.scope).run({
|
||||
input: {
|
||||
product_categories: [
|
||||
{ name: categoryName, handle: slugify(categoryName, `${Date.now().toString(36)}${index}`) },
|
||||
],
|
||||
},
|
||||
});
|
||||
categoryId = createdCategories[0].id;
|
||||
categoryByName.set(categoryName.toLowerCase(), categoryId);
|
||||
}
|
||||
|
||||
const collectionName = row.coleccion?.trim();
|
||||
let collectionId = collectionName ? collectionByName.get(collectionName.toLowerCase()) : undefined;
|
||||
if (collectionName && !collectionId) {
|
||||
const { result: createdCollections } = await createCollectionsWorkflow(req.scope).run({
|
||||
input: {
|
||||
collections: [
|
||||
{ title: collectionName, handle: slugify(collectionName, `${Date.now().toString(36)}${index}`) },
|
||||
],
|
||||
},
|
||||
});
|
||||
collectionId = createdCollections[0].id;
|
||||
collectionByName.set(collectionName.toLowerCase(), collectionId);
|
||||
}
|
||||
|
||||
await createProductsWorkflow(req.scope).run({
|
||||
input: {
|
||||
products: [
|
||||
{
|
||||
title,
|
||||
handle: slugify(title, `${Date.now().toString(36)}${index}`),
|
||||
description: row.descripcion || undefined,
|
||||
status: "published",
|
||||
thumbnail: uploadedFiles[0]?.url,
|
||||
images: uploadedFiles.map((f) => ({ url: f.url })),
|
||||
category_ids: categoryId ? [categoryId] : undefined,
|
||||
collection_id: collectionId,
|
||||
shipping_profile_id: shippingProfileId,
|
||||
sales_channels: [{ id: salesChannelId }],
|
||||
options: [{ title: OPTION_TITLE, values: [DEFAULT_VARIANT_VALUE] }],
|
||||
variants: [
|
||||
{
|
||||
title: DEFAULT_VARIANT_VALUE,
|
||||
options: { [OPTION_TITLE]: DEFAULT_VARIANT_VALUE },
|
||||
manage_inventory: true,
|
||||
inventory_items: [{ inventory_item_id: inventoryItemId }],
|
||||
prices: [{ amount: price, currency_code: "cop" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
results.push({ row: rowNumber, title, ok: true, action: "created" });
|
||||
} catch (error) {
|
||||
results.push({ row: rowNumber, title: title || `Fila ${rowNumber}`, ok: false, error: (error as Error).message });
|
||||
}
|
||||
}
|
||||
|
||||
res.json({ results });
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// Parser CSV minimo (RFC4180: campos entre comillas, comillas escapadas
|
||||
// como "", comas y saltos de linea dentro de campos citados) -- se evita
|
||||
// sumar una dependencia nueva (papaparse/csv-parse) para un formato que
|
||||
// nosotros mismos controlamos via la plantilla descargable.
|
||||
export function parseCsv(text: string): string[][] {
|
||||
const rows: string[][] = [];
|
||||
let row: string[] = [];
|
||||
let field = "";
|
||||
let inQuotes = false;
|
||||
let i = 0;
|
||||
const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
|
||||
|
||||
while (i < normalized.length) {
|
||||
const char = normalized[i];
|
||||
if (inQuotes) {
|
||||
if (char === '"') {
|
||||
if (normalized[i + 1] === '"') {
|
||||
field += '"';
|
||||
i += 2;
|
||||
continue;
|
||||
}
|
||||
inQuotes = false;
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
field += char;
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
if (char === '"') {
|
||||
inQuotes = true;
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
if (char === ",") {
|
||||
row.push(field);
|
||||
field = "";
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
if (char === "\n") {
|
||||
row.push(field);
|
||||
rows.push(row);
|
||||
row = [];
|
||||
field = "";
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
field += char;
|
||||
i += 1;
|
||||
}
|
||||
if (field.length > 0 || row.length > 0) {
|
||||
row.push(field);
|
||||
rows.push(row);
|
||||
}
|
||||
return rows.filter((r) => r.some((cell) => cell.trim().length > 0));
|
||||
}
|
||||
|
||||
export function csvRowsToObjects(rows: string[][]): Record<string, string>[] {
|
||||
const [header, ...body] = rows;
|
||||
if (!header) return [];
|
||||
const keys = header.map((h) => h.trim().toLowerCase());
|
||||
return body.map((cols) => {
|
||||
const obj: Record<string, string> = {};
|
||||
keys.forEach((key, index) => {
|
||||
obj[key] = (cols[index] ?? "").trim();
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
}
|
||||
@@ -37,6 +37,9 @@ flowchart LR
|
||||
SSH["Cliente SSH<br/>(laptop / tablet / lo que sea)"] -->|docker exec| C["Contenedor tmux-host<br/>--network host, --restart unless-stopped"]
|
||||
C --> T["tmux server<br/>sesión 'lab'"]
|
||||
T --> CC["proceso claude<br/>(Claude Code)"]
|
||||
C --> HC["healthcheck.sh (background)<br/>cada 30 min"]
|
||||
HC -.->|curl| NET["gitea.cruzcloud.net"]
|
||||
HC -.->|recrea si falta| T
|
||||
C -.->|bind mount| DATA["/DATA (host)<br/>repos y configs del lab"]
|
||||
C -.->|bind mount| SOCK["/var/run/docker.sock (host)<br/>control de Docker/k3d"]
|
||||
C -.->|bind mount| HOME["/DATA/AppData/k3d-lab-v3/claude-code-home (host)<br/>-> /root/.claude"]
|
||||
@@ -49,7 +52,17 @@ reinicia.
|
||||
|
||||
## Contenedor: `tmux-host`
|
||||
|
||||
La imagen se construye desde `scripts/tmux-host/Dockerfile` (antes era
|
||||
un `docker run ... alpine sh -c "apk add ..."` inline — mismo contenido,
|
||||
pero ahora como imagen versionada en vez de reinstalar todo en cada
|
||||
arranque). El Dockerfile fija `WORKDIR /DATA/AppData/k3d-lab-v3/lab-cruzcloud`
|
||||
(la raíz del lab, con `CLAUDE.md`, `apps-registry/`, `platform-infra/` y
|
||||
`scripts/`) y agrega `healthcheck.sh` (ver más abajo) como proceso en
|
||||
background del contenedor.
|
||||
|
||||
```bash
|
||||
docker build -t tmux-host:local scripts/tmux-host
|
||||
|
||||
docker run -d \
|
||||
--name tmux-host \
|
||||
--restart unless-stopped \
|
||||
@@ -59,9 +72,15 @@ docker run -d \
|
||||
-v /DATA/AppData/k3d-lab-v3/claude-code-home:/root/.claude \
|
||||
-v /DATA/AppData/k3d-lab-v3/claude-code-home.json:/root/.claude.json \
|
||||
--network host \
|
||||
alpine sh -c "apk add --no-cache tmux docker-cli bash curl git kubectl nodejs npm && npm install -g @anthropic-ai/claude-code && git config --global --add safe.directory '*' && tail -f /dev/null"
|
||||
tmux-host:local
|
||||
```
|
||||
|
||||
`WORKDIR` hace que `docker exec` (y por lo tanto `lab-session.sh`)
|
||||
arranquen ya posicionados en la raíz del lab sin tener que navegar a
|
||||
mano — `lab-session.sh` además pasa la ruta explícita vía `tmux new -c`
|
||||
por las dudas, para no depender de que `docker exec` herede el `WORKDIR`
|
||||
de la imagen.
|
||||
|
||||
| Volumen | Destino | Por qué |
|
||||
|---|---|---|
|
||||
| `/DATA` | `/DATA` | Acceso a los repos (`apps-registry`, `platform-infra`, `scripts`) y configs del lab, mismos paths que en el host |
|
||||
@@ -195,13 +214,47 @@ Si la sesión `lab` existe, se adjunta a ella (mismo shell, mismo
|
||||
ejemplo justo después de que el contenedor se recreó desde cero— la
|
||||
crea. No hay que recordar cuál de los dos casos aplica.
|
||||
|
||||
## Chequeo de salud automático (cada 30 min)
|
||||
|
||||
`scripts/tmux-host/healthcheck.sh` corre en background dentro del
|
||||
propio contenedor (lanzado por `entrypoint.sh`, el `ENTRYPOINT` de la
|
||||
imagen) y cada `HEALTHCHECK_INTERVAL_SEC` (1800s por defecto) hace dos
|
||||
chequeos independientes, con una respuesta distinta según el tipo de
|
||||
falla:
|
||||
|
||||
- **Conectividad de red real** (`curl` a `https://gitea.cruzcloud.net/`):
|
||||
si falla, **solo se registra** en el log y se notifica por Telegram —
|
||||
el contenedor nunca intenta "arreglar" la red del host. Un problema de
|
||||
red puede ser de hardware/BIOS (deuda técnica ya conocida, ver
|
||||
`incidente-medusa-crashloop-2026-08.md`), fuera del alcance real de un
|
||||
contenedor.
|
||||
- **Existencia de la sesión tmux `lab`** (`tmux has-session`): si no
|
||||
existe, **sí se recrea automáticamente** (`tmux new-session -d -s lab
|
||||
-c <WORKDIR>`) — es solo recuperar el propio entorno de trabajo del
|
||||
contenedor, no tocar infraestructura externa, así que es seguro
|
||||
hacerlo sin intervención humana.
|
||||
|
||||
Todo evento (chequeo ok, falla de red, sesión recreada) queda en
|
||||
`/DATA/AppData/k3d-lab-v3/tmux-host/logs/health.log` — persistente en
|
||||
`/DATA`, no solo en el stdout del contenedor (que se pierde con
|
||||
`docker logs` al recrearlo). Las notificaciones de Telegram reusan el
|
||||
mismo bot/`chat_id` ya configurado para `scripts/lab-agent/`
|
||||
(`lab-agent.env`), en vez de duplicar credenciales entre los dos
|
||||
agentes del lab.
|
||||
|
||||
Para probar el intervalo sin esperar 30 minutos, se puede levantar el
|
||||
contenedor con `-e HEALTHCHECK_INTERVAL_SEC=60` (solo para pruebas en un
|
||||
contenedor descartable — nunca cambiar esto en el `tmux-host` real sin
|
||||
volver a 1800 después).
|
||||
|
||||
## Qué sobrevive a qué
|
||||
|
||||
| Evento | ¿Sobrevive la sesión tmux (`lab`)? | ¿Sobrevive el login de Claude Code? |
|
||||
|---|---|---|
|
||||
| Corte de SSH / cerrar la terminal / cambiar de dispositivo | Sí — es exactamente el caso que este setup resuelve | Sí |
|
||||
| `docker restart tmux-host` (reinicio del NAS) | **No** — el proceso `tmux server` muere con el contenedor; `lab-session.sh` crea una sesión nueva automáticamente | Sí, vía el volumen montado en `/root/.claude` |
|
||||
| `docker rm` + recrear el contenedor desde cero | No | Sí, vía el mismo volumen — no hace falta volver a autenticar ni reconfirmar el diálogo de confianza del folder (ver el mount de `claude-code-home.json`) |
|
||||
| `docker restart tmux-host` (reinicio del NAS) | **No al toque, pero se auto-recupera solo** — el proceso `tmux server` muere con el contenedor; `healthcheck.sh` la recrea en el próximo ciclo (máx. 30 min) sin intervención, o `lab-session.sh` la crea al instante si alguien se reconecta antes | Sí, vía el volumen montado en `/root/.claude` |
|
||||
| `docker rm` + recrear el contenedor desde cero | No, pero igual se auto-recupera sola (mismo mecanismo de arriba) | Sí, vía el mismo volumen — no hace falta volver a autenticar ni reconfirmar el diálogo de confianza del folder (ver el mount de `claude-code-home.json`) |
|
||||
| Falla de red real del host/NAS | N/A | N/A — `healthcheck.sh` la detecta y notifica, pero no la corrige (fuera de su alcance) |
|
||||
|
||||
## Validación en vivo
|
||||
|
||||
|
||||
@@ -1,9 +1,18 @@
|
||||
# ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping
|
||||
|
||||
**Estado:** aceptada (implementación en curso, por sub-fases)
|
||||
**Fecha:** 2026-08-27
|
||||
**Estado:** aceptada, con enmienda de paleta (ver §8) — sub-fases 1 a 4
|
||||
completas, sub-fase 5 parcial (ver §9)
|
||||
**Fecha:** 2026-08-27 (enmendada 2026-09-06)
|
||||
**Reemplaza a:** [ADR 0007](0007-identidad-visual-propia.md) (Opción 2, "Atelier cálido")
|
||||
|
||||
> **Nota de vigencia:** la paleta descrita en §4 ("Navy & Coral":
|
||||
> marino `#122844` / coral `#D85A30` / coral claro `#F0997B`) fue la
|
||||
> dirección **aprobada e implementada en las sub-fases 1-3**, pero fue
|
||||
> **reemplazada el mismo día** por una paleta azul/amarillo estilo
|
||||
> Walmart (rama `fix/adr0008-walmart-palette-blue-yellow`, ver §8). Los
|
||||
> valores reales en producción hoy están en §8, no en §4. Se deja §4
|
||||
> intacto como registro histórico de la decisión original.
|
||||
|
||||
## 1. Contexto
|
||||
|
||||
Este es el tercer intento de identidad visual propia para ARI Shopping,
|
||||
@@ -168,3 +177,66 @@ definitivo; los alias se eliminan por completo al cerrar la sub-fase
|
||||
`commerce-backend`, `platform-infra`, ni CI nuevo.
|
||||
- `docs-portal` se actualiza con capturas/descripción del resultado
|
||||
final una vez cada sub-fase esté validada en producción, no antes.
|
||||
|
||||
## 8. Enmienda 2026-08-27 tarde: pivote de paleta a azul/amarillo
|
||||
|
||||
Horas después de mergear la sub-fase 3 (product card + grid), se
|
||||
mergeó `fix/adr0008-walmart-palette-blue-yellow`: la paleta "Navy &
|
||||
Coral" de §4 se descartó en producción y se reemplazó por una paleta
|
||||
azul/amarillo (mismo patrón "estética Walmart" ya usado como
|
||||
referencia de UX en ADR 0007). Esta decisión **no quedó documentada
|
||||
como enmienda en su momento** — se detecta y se registra aquí recién
|
||||
el 2026-09-06, al auditar el estado real del código contra este
|
||||
documento.
|
||||
|
||||
Valores reales en `globals.css` hoy (los nombres de token de §4 se
|
||||
conservan, pero apuntan a estos valores, no a los de la tabla
|
||||
original):
|
||||
|
||||
| Token | Valor real | Uso |
|
||||
|---|---|---|
|
||||
| `--color-ari-marino` | `#0055B8` (azul) | ancla: header, footer, fondo de hero, botón de búsqueda |
|
||||
| `--color-ari-coral` | `#0055B8` (azul, mismo valor que marino) | CTA "Agregar al carrito", precio destacado |
|
||||
| `--color-ari-coral-claro` | `#FFC220` (amarillo) | badges de oferta/urgencia, acento del isotipo, botón "yellow" del hero |
|
||||
|
||||
Nota: `ari-coral` y `ari-marino` son el mismo azul (`#0055B8`) — a
|
||||
diferencia de la especificación original de §4, donde marino y coral
|
||||
eran colores distintos. Cualquier lectura de este ADR para decisiones
|
||||
de diseño futuras debe partir de esta tabla, no de §4.
|
||||
|
||||
El isotipo (mariposa de 4 elipses, §4) tampoco se implementó como se
|
||||
describe: el logo vigente es `logo-ari-circular.svg` (rama
|
||||
`adr0008-logo-circular-header`), un lockup circular distinto al
|
||||
descrito en la tabla de coordenadas de §4. `logo-ari.svg` (rectangular,
|
||||
el que sí sigue la spec original) quedó sin usarse en el header.
|
||||
|
||||
## 9. Estado real por sub-fase (auditado 2026-09-06)
|
||||
|
||||
Auditoría contra el código en `main`, no contra el plan de §6.
|
||||
|
||||
| # | Sub-fase | Estado | Evidencia |
|
||||
|---|---|---|---|
|
||||
| 1 | Tokens base + logo | ✅ completa (con la paleta enmendada en §8, no la de §4) | `globals.css`, `logo-ari.svg` inicial, luego reemplazado por circular en sub-fase posterior |
|
||||
| 2 | Header + footer (incl. limpieza de §5) | ✅ completa | `navbar.tsx`, restos arcoíris (gradiente ámbar/lima, línea cian/violeta/fucsia de §5) eliminados |
|
||||
| 3 | Product card + grid + badges | ✅ completa | `product-card.tsx` en tokens `ari-*` |
|
||||
| 4 | Home (hero, tiles, secciones) | ✅ completa | `hero-carousel.tsx`, `category-tiles.tsx` (varias iteraciones: pastel → scrim → foto flotante → foto más grande, todas mergeadas) |
|
||||
| 5 | Página de producto + drawers de carrito/wishlist | ⚠️ **parcial** | `product-purchase.tsx`/página de producto sí migraron (rama `adr0008-product-purchase-mobile-y-badge`). **`cart-drawer.tsx` y `wishlist-drawer.tsx` no tienen ningún token `ari-*` — nunca se tocaron.** No hay rama mergeada que los mencione. |
|
||||
|
||||
**Deuda abierta, no asumir resuelta:**
|
||||
|
||||
- Los alias de compatibilidad de §6 (`ari-ciruela`, `ari-cobre`,
|
||||
`ari-carbon`, `ari-carbon-oscuro`, `ari-terracota-oscuro`,
|
||||
`ari-hueso`) **siguen en uso real en `button.tsx`**
|
||||
(`focus-visible:ring-ari-cobre/40`, `bg-ari-ciruela`,
|
||||
`hover:border-ari-cobre`) — la condición de cierre de §6 ("los alias
|
||||
se eliminan por completo al cerrar la sub-fase 5") no se cumplió.
|
||||
Confirma que la sub-fase 5 no está cerrada, más allá de los drawers.
|
||||
- Ramas mergeadas fuera del plan original de 5 sub-fases de §6, sin
|
||||
enmienda que las registre: `adr0008-megamenu-mobile-overflow`,
|
||||
`adr0008-club-ari-y-novedades`, `adr0008-club-ari-imagen-azul`. Son
|
||||
trabajo real en producción, pero expanden el alcance de este ADR sin
|
||||
quedar documentado como tal.
|
||||
- `docs-portal` (este documento) es la primera actualización desde el
|
||||
cierre de la sub-fase 3 — la condición de §7 ("se actualiza con
|
||||
capturas/descripción... una vez cada sub-fase esté validada") no se
|
||||
vino cumpliendo sub-fase por sub-fase como se planeó.
|
||||
@@ -25,7 +25,7 @@ spec:
|
||||
runAsNonRoot: false
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.207
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.224
|
||||
# El base saca TODAS las capabilities. Probado en vivo y
|
||||
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
|
||||
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
|
||||
|
||||
@@ -65,7 +65,7 @@ spec:
|
||||
memory: 64Mi
|
||||
|
||||
- name: migrations
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.218
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.223
|
||||
imagePullPolicy: IfNotPresent
|
||||
command:
|
||||
- node
|
||||
@@ -86,7 +86,7 @@ spec:
|
||||
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.218
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.223
|
||||
imagePullPolicy: IfNotPresent
|
||||
envFrom:
|
||||
- configMapRef:
|
||||
|
||||
@@ -2,19 +2,36 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import { Maximize2, Minus, Plus, RotateCcw, ZoomIn } from "lucide-react";
|
||||
import { PointerEvent, WheelEvent, useRef, useState } from "react";
|
||||
import { MouseEvent, PointerEvent, WheelEvent, useRef, useState } from "react";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
|
||||
interface Offset { x: number; y: number }
|
||||
interface DragState { pointerId: number; startX: number; startY: number; originX: number; originY: number }
|
||||
interface HoverZoomOrigin { x: number; y: number }
|
||||
|
||||
// Zoom automatico al pasar el cursor (estilo lupa clasico de e-commerce)
|
||||
// sobre la imagen principal -- solo mouse (mousemove no dispara de forma
|
||||
// continua en touch, asi que en mobile simplemente no aparece el efecto,
|
||||
// sin romper nada). Independiente del zoom interactivo del modal
|
||||
// (click -> Dialog con scale/drag), que sigue igual.
|
||||
const HOVER_ZOOM_SCALE = 2.2;
|
||||
|
||||
export function ProductGallery({ images, name }: { images: string[]; name: string }) {
|
||||
const [selected, setSelected] = useState(images[0] ?? "");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [scale, setScale] = useState(1);
|
||||
const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });
|
||||
const [hoverZoom, setHoverZoom] = useState<HoverZoomOrigin | null>(null);
|
||||
const drag = useRef<DragState | null>(null);
|
||||
|
||||
const trackHoverZoom = (event: MouseEvent<HTMLButtonElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
setHoverZoom({
|
||||
x: ((event.clientX - rect.left) / rect.width) * 100,
|
||||
y: ((event.clientY - rect.top) / rect.height) * 100,
|
||||
});
|
||||
};
|
||||
|
||||
const applyScale = (next: number) => {
|
||||
const value = Math.min(3, Math.max(1, Number(next.toFixed(2))));
|
||||
setScale(value);
|
||||
@@ -44,8 +61,24 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
|
||||
</div>
|
||||
<Dialog open={open} onOpenChange={changeOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<button type="button" className="group relative order-1 aspect-square overflow-hidden rounded-[2rem] bg-slate-50 lg:order-2">
|
||||
<Image src={selected} alt={name} fill priority sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover transition duration-500 group-hover:scale-[1.03]" />
|
||||
<button
|
||||
type="button"
|
||||
className="group relative order-1 aspect-square cursor-zoom-in overflow-hidden rounded-[2rem] bg-slate-50 lg:order-2"
|
||||
onMouseMove={trackHoverZoom}
|
||||
onMouseLeave={() => setHoverZoom(null)}
|
||||
>
|
||||
<Image
|
||||
src={selected}
|
||||
alt={name}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
className="object-cover transition-transform duration-150 ease-out"
|
||||
style={{
|
||||
transform: `scale(${hoverZoom ? HOVER_ZOOM_SCALE : 1})`,
|
||||
transformOrigin: hoverZoom ? `${hoverZoom.x}% ${hoverZoom.y}%` : "center",
|
||||
}}
|
||||
/>
|
||||
<span className="absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-black shadow-xl"><ZoomIn className="size-4" />Zoom interactivo</span>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
|
||||
Reference in new issue
Block a user