Compare commits
32
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0ad74b6b70 | ||
|
|
d1d007fc7d | ||
|
|
11ac6d7949 | ||
|
|
093ae419d5 | ||
|
|
2b0d50c3d0 | ||
|
|
8126bb3d81 | ||
|
|
dedf4f0963 | ||
|
|
1cd1078cdf | ||
|
|
601378a77e | ||
|
|
1dccd0aa6a | ||
|
|
474ac3795b | ||
|
|
bb2ad3c317 | ||
|
|
578f085334 | ||
|
|
ce4842f375 | ||
|
|
2cce671049 | ||
|
|
22f97ee12e | ||
|
|
42c90d8534 | ||
|
|
cd8d2edd8f | ||
|
|
77389aea19 | ||
|
|
7ce11ecbb4 | ||
|
|
da10a4b688 | ||
|
|
0b7dc7b6de | ||
|
|
2601e5e83e | ||
|
|
fecac320d9 | ||
|
|
811e0e0887 | ||
|
|
aee6515890 | ||
|
|
2e47f7b55d | ||
|
|
54be99fa2c | ||
|
|
bc530c98e6 | ||
|
|
3b748cc014 | ||
|
|
73f9424331 | ||
|
|
0917c966cb |
No files matched your search
@@ -23,7 +23,10 @@ ENV CI=true \
|
|||||||
S3_BUCKET=ari-shopping \
|
S3_BUCKET=ari-shopping \
|
||||||
S3_ENDPOINT=http://127.0.0.1:9000 \
|
S3_ENDPOINT=http://127.0.0.1:9000 \
|
||||||
MEILISEARCH_HOST=http://127.0.0.1:7700 \
|
MEILISEARCH_HOST=http://127.0.0.1:7700 \
|
||||||
MEILISEARCH_API_KEY=build-only-meili-key
|
MEILISEARCH_API_KEY=build-only-meili-key \
|
||||||
|
GOOGLE_CLIENT_ID=build-only-google-client-id \
|
||||||
|
GOOGLE_CLIENT_SECRET=build-only-google-client-secret \
|
||||||
|
GOOGLE_CALLBACK_URL=http://localhost:9000/auth/customer/google/callback
|
||||||
|
|
||||||
COPY package.json package-lock.json .npmrc ./
|
COPY package.json package-lock.json .npmrc ./
|
||||||
|
|
||||||
|
|||||||
@@ -157,6 +157,30 @@ module.exports = defineConfig({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
resolve: "@medusajs/medusa/auth",
|
||||||
|
options: {
|
||||||
|
providers: [
|
||||||
|
// emailpass se declara explicito junto con google -- una vez
|
||||||
|
// que el modulo auth se customiza, la doc no deja claro si el
|
||||||
|
// provider default (emailpass) se sigue registrando solo.
|
||||||
|
{
|
||||||
|
resolve: "@medusajs/medusa/auth-emailpass",
|
||||||
|
id: "emailpass",
|
||||||
|
options: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
resolve: "@medusajs/medusa/auth-google",
|
||||||
|
id: "google",
|
||||||
|
options: {
|
||||||
|
clientId: required("GOOGLE_CLIENT_ID"),
|
||||||
|
clientSecret: required("GOOGLE_CLIENT_SECRET"),
|
||||||
|
callbackUrl: required("GOOGLE_CALLBACK_URL"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
// ADR 0006 Etapa 2. Sin required(): a diferencia de S3/DB, Meilisearch
|
// ADR 0006 Etapa 2. Sin required(): a diferencia de S3/DB, Meilisearch
|
||||||
|
|||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import Medusa from "@medusajs/js-sdk";
|
||||||
|
|
||||||
|
// baseUrl "/" -- esta pagina se sirve dentro del mismo dashboard admin
|
||||||
|
// (mismo origen que la API), no hace falta apuntar a otra URL. auth
|
||||||
|
// "session" reusa la cookie de sesion ya autenticada del dashboard.
|
||||||
|
export const sdk = new Medusa({
|
||||||
|
baseUrl: "/",
|
||||||
|
auth: { type: "session" },
|
||||||
|
});
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
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;
|
||||||
|
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. <code>categoria</code>/<code>coleccion</code> deben
|
||||||
|
escribirse igual que en la tienda o se dejan vacías. 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">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,194 @@
|
|||||||
|
import { defineRouteConfig } from "@medusajs/admin-sdk";
|
||||||
|
import { Buildings } from "@medusajs/icons";
|
||||||
|
import { Badge, Button, Checkbox, Container, Heading, Input, Switch, Text, toast } from "@medusajs/ui";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { sdk } from "../../lib/sdk";
|
||||||
|
|
||||||
|
// Panel simplificado para alguien no tecnico (la esposa del dueno del
|
||||||
|
// negocio) -- una fila por producto (este catalogo es 1 variante por
|
||||||
|
// producto, confirmado en vivo), switch para activar seguimiento de
|
||||||
|
// stock y un input de cantidad que guarda solo. La vista nativa de
|
||||||
|
// Medusa Admin (Inventory) sigue disponible para el dueno, esto no la
|
||||||
|
// reemplaza, es un atajo.
|
||||||
|
|
||||||
|
const LOW_STOCK_THRESHOLD = 5;
|
||||||
|
|
||||||
|
type Row = {
|
||||||
|
productId: string;
|
||||||
|
variantId: string | null;
|
||||||
|
title: string;
|
||||||
|
thumbnail: string | null;
|
||||||
|
sku: string | null;
|
||||||
|
managed: boolean;
|
||||||
|
quantity: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function fetchRows(): Promise<Row[]> {
|
||||||
|
const data = await sdk.client.fetch<{ rows: Row[] }>("/admin/inventory-panel");
|
||||||
|
return data.rows;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveRow(row: { productId: string; variantId: string; managed?: boolean; quantity?: number }) {
|
||||||
|
await sdk.client.fetch("/admin/inventory-panel", { method: "post", body: row });
|
||||||
|
}
|
||||||
|
|
||||||
|
const InventoryPanel = () => {
|
||||||
|
const [rows, setRows] = useState<Row[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
|
const [savingId, setSavingId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchRows().then((data) => {
|
||||||
|
setRows(data);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function toggleSelected(productId: string, checked: boolean) {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (checked) next.add(productId);
|
||||||
|
else next.delete(productId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateManaged(row: Row, managed: boolean) {
|
||||||
|
if (!row.variantId) return;
|
||||||
|
setSavingId(row.productId);
|
||||||
|
try {
|
||||||
|
await saveRow({ productId: row.productId, variantId: row.variantId, managed });
|
||||||
|
setRows((prev) =>
|
||||||
|
prev.map((r) => (r.productId === row.productId ? { ...r, managed } : r)),
|
||||||
|
);
|
||||||
|
} catch {
|
||||||
|
toast.error("No se pudo guardar", { description: row.title });
|
||||||
|
} finally {
|
||||||
|
setSavingId(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateQuantity(row: Row, quantity: number) {
|
||||||
|
if (!row.variantId || Number.isNaN(quantity) || quantity < 0) return;
|
||||||
|
setSavingId(row.productId);
|
||||||
|
try {
|
||||||
|
await saveRow({ productId: row.productId, variantId: row.variantId, quantity });
|
||||||
|
setRows((prev) =>
|
||||||
|
prev.map((r) => (r.productId === row.productId ? { ...r, quantity } : r)),
|
||||||
|
);
|
||||||
|
toast.success("Stock actualizado", { description: row.title });
|
||||||
|
} catch {
|
||||||
|
toast.error("No se pudo guardar", { description: row.title });
|
||||||
|
} finally {
|
||||||
|
setSavingId(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function bulkSetManaged(managed: boolean) {
|
||||||
|
const targets = rows.filter((r) => selected.has(r.productId) && r.variantId);
|
||||||
|
for (const row of targets) {
|
||||||
|
await updateManaged(row, managed);
|
||||||
|
}
|
||||||
|
setSelected(new Set());
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container className="divide-y p-0">
|
||||||
|
<div className="flex items-center justify-between px-6 py-4">
|
||||||
|
<div>
|
||||||
|
<Heading level="h2">Inventario</Heading>
|
||||||
|
<Text size="small" className="text-ui-fg-subtle">
|
||||||
|
Activa el seguimiento de stock y ajusta la cantidad disponible por producto.
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
{selected.size > 0 && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button size="small" variant="secondary" onClick={() => bulkSetManaged(true)}>
|
||||||
|
Activar seguimiento ({selected.size})
|
||||||
|
</Button>
|
||||||
|
<Button size="small" variant="secondary" onClick={() => bulkSetManaged(false)}>
|
||||||
|
Desactivar seguimiento
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="px-6 py-8">
|
||||||
|
<Text className="text-ui-fg-subtle">Cargando…</Text>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b text-left text-ui-fg-subtle">
|
||||||
|
<th className="w-10 px-6 py-3" />
|
||||||
|
<th className="px-3 py-3 font-medium">Producto</th>
|
||||||
|
<th className="px-3 py-3 font-medium">SKU</th>
|
||||||
|
<th className="px-3 py-3 font-medium">Trackear stock</th>
|
||||||
|
<th className="px-3 py-3 font-medium">Cantidad disponible</th>
|
||||||
|
<th className="px-3 py-3 font-medium" />
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<tr key={row.productId} className="border-b last:border-0">
|
||||||
|
<td className="px-6 py-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={selected.has(row.productId)}
|
||||||
|
onCheckedChange={(checked) => toggleSelected(row.productId, checked === true)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="flex items-center gap-3 px-3 py-3">
|
||||||
|
{row.thumbnail ? (
|
||||||
|
<img src={row.thumbnail} alt="" className="size-8 rounded object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="size-8 rounded bg-ui-bg-subtle" />
|
||||||
|
)}
|
||||||
|
<Text>{row.title}</Text>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
<Text className="text-ui-fg-subtle">{row.sku ?? "—"}</Text>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
<Switch
|
||||||
|
checked={row.managed}
|
||||||
|
disabled={savingId === row.productId}
|
||||||
|
onCheckedChange={(checked) => updateManaged(row, checked)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
defaultValue={row.quantity}
|
||||||
|
disabled={!row.managed || savingId === row.productId}
|
||||||
|
className="w-24"
|
||||||
|
onBlur={(event) => {
|
||||||
|
const value = Number(event.target.value);
|
||||||
|
if (value !== row.quantity) updateQuantity(row, value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
{row.managed && row.quantity <= LOW_STOCK_THRESHOLD && (
|
||||||
|
<Badge color="red">Stock bajo</Badge>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const config = defineRouteConfig({
|
||||||
|
label: "Inventario",
|
||||||
|
icon: Buildings,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default InventoryPanel;
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
import type { MedusaRequest, MedusaResponse } from "@medusajs/framework";
|
||||||
|
import { ContainerRegistrationKeys } from "@medusajs/framework/utils";
|
||||||
|
import {
|
||||||
|
createInventoryItemsWorkflow,
|
||||||
|
updateInventoryLevelsWorkflow,
|
||||||
|
updateProductVariantsWorkflow,
|
||||||
|
} from "@medusajs/medusa/core-flows";
|
||||||
|
import { attachInventoryItemToVariantWorkflow } from "../../../workflows/attach-inventory-item-to-variant";
|
||||||
|
|
||||||
|
// Panel simplificado de inventario (pensado para un usuario no tecnico,
|
||||||
|
// no reemplaza la vista nativa de Medusa Admin -- ver ADR/memoria del
|
||||||
|
// bug de Firefox Android, tema aparte). Un producto = una variante en
|
||||||
|
// este catalogo real (confirmado en vivo contra /store/products antes
|
||||||
|
// de asumirlo), asi que la tabla trabaja a nivel de producto.
|
||||||
|
|
||||||
|
const PRODUCT_FIELDS = [
|
||||||
|
"id",
|
||||||
|
"title",
|
||||||
|
"thumbnail",
|
||||||
|
"status",
|
||||||
|
"variants.id",
|
||||||
|
"variants.sku",
|
||||||
|
"variants.manage_inventory",
|
||||||
|
"variants.inventory_items.inventory_item_id",
|
||||||
|
"variants.inventory_items.inventory.location_levels.id",
|
||||||
|
"variants.inventory_items.inventory.location_levels.location_id",
|
||||||
|
"variants.inventory_items.inventory.location_levels.stocked_quantity",
|
||||||
|
];
|
||||||
|
|
||||||
|
async function defaultLocationId(req: MedusaRequest): Promise<string | null> {
|
||||||
|
const query = req.scope.resolve(ContainerRegistrationKeys.QUERY);
|
||||||
|
const { data: locations = [] } = await query.graph({
|
||||||
|
entity: "stock_location",
|
||||||
|
fields: ["id"],
|
||||||
|
});
|
||||||
|
return locations[0]?.id ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: MedusaRequest, res: MedusaResponse) {
|
||||||
|
const query = req.scope.resolve(ContainerRegistrationKeys.QUERY);
|
||||||
|
const locationId = await defaultLocationId(req);
|
||||||
|
|
||||||
|
const { data: products = [] } = await query.graph({
|
||||||
|
entity: "product",
|
||||||
|
fields: PRODUCT_FIELDS,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = products.map((product) => {
|
||||||
|
const variant = product.variants?.[0];
|
||||||
|
const inventoryItem = variant?.inventory_items?.[0];
|
||||||
|
const level = inventoryItem?.inventory?.location_levels?.find(
|
||||||
|
(candidate) => candidate?.location_id === locationId,
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
productId: product.id,
|
||||||
|
variantId: variant?.id ?? null,
|
||||||
|
title: product.title,
|
||||||
|
thumbnail: product.thumbnail,
|
||||||
|
status: product.status,
|
||||||
|
sku: variant?.sku ?? null,
|
||||||
|
managed: variant?.manage_inventory ?? false,
|
||||||
|
quantity: level?.stocked_quantity ?? 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({ rows, locationId });
|
||||||
|
}
|
||||||
|
|
||||||
|
type PanelUpdateBody = {
|
||||||
|
productId: string;
|
||||||
|
variantId: string;
|
||||||
|
managed?: boolean;
|
||||||
|
quantity?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function POST(req: MedusaRequest<PanelUpdateBody>, res: MedusaResponse) {
|
||||||
|
const { productId, variantId, managed, quantity } = req.body;
|
||||||
|
if (!productId || !variantId) {
|
||||||
|
res.status(400).json({ error: "productId y variantId son obligatorios" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = req.scope.resolve(ContainerRegistrationKeys.QUERY);
|
||||||
|
const locationId = await defaultLocationId(req);
|
||||||
|
if (!locationId) {
|
||||||
|
res.status(400).json({ error: "No hay una bodega (stock location) configurada" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: products = [] } = await query.graph({
|
||||||
|
entity: "product",
|
||||||
|
fields: PRODUCT_FIELDS,
|
||||||
|
filters: { id: productId },
|
||||||
|
});
|
||||||
|
const variant = products[0]?.variants?.find((v: { id: string }) => v.id === variantId);
|
||||||
|
const inventoryItem = variant?.inventory_items?.[0];
|
||||||
|
let inventoryItemId: string | undefined = inventoryItem?.inventory_item_id;
|
||||||
|
|
||||||
|
if (managed === true && !inventoryItemId) {
|
||||||
|
// Primera vez que se activa el seguimiento para esta variante -- no
|
||||||
|
// trae InventoryItem todavia (confirmado en vivo: togglear
|
||||||
|
// manage_inventory=true en una variante existente NO crea uno solo,
|
||||||
|
// a diferencia de crear un producto nuevo con manage_inventory
|
||||||
|
// desde el inicio). Se crea con el nivel de stock inicial y se
|
||||||
|
// vincula aparte.
|
||||||
|
const { result: items } = await createInventoryItemsWorkflow(req.scope).run({
|
||||||
|
input: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: variant?.sku ? undefined : products[0]?.title,
|
||||||
|
sku: variant?.sku ?? undefined,
|
||||||
|
location_levels: [{ location_id: locationId, stocked_quantity: quantity ?? 0 }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
inventoryItemId = items[0]?.id;
|
||||||
|
if (inventoryItemId) {
|
||||||
|
await attachInventoryItemToVariantWorkflow(req.scope).run({
|
||||||
|
input: { inventoryItemId, variantId },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
await updateProductVariantsWorkflow(req.scope).run({
|
||||||
|
input: { product_variants: [{ id: variantId, manage_inventory: true }] },
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (typeof managed === "boolean") {
|
||||||
|
await updateProductVariantsWorkflow(req.scope).run({
|
||||||
|
input: { product_variants: [{ id: variantId, manage_inventory: managed }] },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (typeof quantity === "number" && inventoryItemId) {
|
||||||
|
const level = inventoryItem?.inventory?.location_levels?.find(
|
||||||
|
(candidate) => candidate?.location_id === locationId,
|
||||||
|
);
|
||||||
|
await updateInventoryLevelsWorkflow(req.scope).run({
|
||||||
|
input: {
|
||||||
|
updates: [
|
||||||
|
{
|
||||||
|
id: level?.id,
|
||||||
|
inventory_item_id: inventoryItemId,
|
||||||
|
location_id: locationId,
|
||||||
|
stocked_quantity: quantity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ ok: true });
|
||||||
|
}
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
import type { MedusaRequest, MedusaResponse } from "@medusajs/framework";
|
||||||
|
import { Modules } from "@medusajs/framework/utils";
|
||||||
|
import type {
|
||||||
|
IFulfillmentModuleService,
|
||||||
|
IProductModuleService,
|
||||||
|
ISalesChannelModuleService,
|
||||||
|
IStockLocationService,
|
||||||
|
} from "@medusajs/framework/types";
|
||||||
|
import {
|
||||||
|
createInventoryItemsWorkflow,
|
||||||
|
createProductsWorkflow,
|
||||||
|
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).
|
||||||
|
//
|
||||||
|
// 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;
|
||||||
|
error?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
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] = 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"] }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
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 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 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 categoryId = row.categoria ? categoryByName.get(row.categoria.toLowerCase().trim()) : undefined;
|
||||||
|
const collectionId = row.coleccion ? collectionByName.get(row.coleccion.toLowerCase().trim()) : undefined;
|
||||||
|
|
||||||
|
await createProductsWorkflow(req.scope).run({
|
||||||
|
input: {
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
title,
|
||||||
|
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 });
|
||||||
|
} 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;
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { createWorkflow, WorkflowResponse } from "@medusajs/framework/workflows-sdk";
|
||||||
|
import { attachInventoryItemToVariants } from "@medusajs/medusa/core-flows";
|
||||||
|
|
||||||
|
// attachInventoryItemToVariants es un step suelto (no un workflow
|
||||||
|
// exportado) -- confirmado leyendo el .js real instalado
|
||||||
|
// (@medusajs/core-flows/dist/inventory/steps/attach-inventory-items.js):
|
||||||
|
// internamente resuelve ContainerRegistrationKeys.LINK y crea el link
|
||||||
|
// Product<->Inventory. El campo "tag" del input es el variant_id (nombre
|
||||||
|
// generico del step, no documentado con ese detalle).
|
||||||
|
type Input = { inventoryItemId: string; variantId: string };
|
||||||
|
|
||||||
|
export const attachInventoryItemToVariantWorkflow = createWorkflow(
|
||||||
|
"attach-inventory-item-to-variant",
|
||||||
|
(input: Input) => {
|
||||||
|
return new WorkflowResponse(
|
||||||
|
attachInventoryItemToVariants([
|
||||||
|
{ inventoryItemId: input.inventoryItemId, tag: input.variantId },
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { handleGoogleCallback } from "@/lib/headless/providers/medusa-customer";
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const { code, state } = await request.json();
|
||||||
|
if (!code || !state) {
|
||||||
|
return Response.json({ error: "Faltan parámetros de Google" }, { status: 400 });
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const customer = await handleGoogleCallback(code, state);
|
||||||
|
return Response.json(customer);
|
||||||
|
} catch (error) {
|
||||||
|
return Response.json({ error: (error as Error).message }, { status: 400 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { getGoogleAuthUrl } from "@/lib/headless/providers/medusa-customer";
|
||||||
|
|
||||||
|
// Navegacion de pagina completa (no fetch/XHR) -- el boton "Continuar
|
||||||
|
// con Google" enlaza directo aca, el browser sigue el 302 hasta la
|
||||||
|
// pantalla real de consentimiento de Google.
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
try {
|
||||||
|
const location = await getGoogleAuthUrl();
|
||||||
|
return Response.redirect(location);
|
||||||
|
} catch (error) {
|
||||||
|
const message = encodeURIComponent((error as Error).message);
|
||||||
|
return Response.redirect(new URL(`/?googleAuthError=${message}`, request.url));
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { loginCustomer } from "@/lib/headless/providers/medusa-customer";
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const { email, password } = await request.json();
|
||||||
|
if (!email || !password) {
|
||||||
|
return Response.json({ error: "Correo y contraseña son obligatorios" }, { status: 400 });
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const customer = await loginCustomer(email, password);
|
||||||
|
return Response.json(customer);
|
||||||
|
} catch (error) {
|
||||||
|
return Response.json({ error: (error as Error).message }, { status: 400 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { getCurrentCustomer } from "@/lib/headless/providers/medusa-customer";
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const token = new URL(request.url).searchParams.get("token");
|
||||||
|
if (!token) {
|
||||||
|
return Response.json({ error: "token es obligatorio" }, { status: 400 });
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const customer = await getCurrentCustomer(token);
|
||||||
|
return Response.json(customer);
|
||||||
|
} catch (error) {
|
||||||
|
return Response.json({ error: (error as Error).message }, { status: 401 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { registerCustomer } from "@/lib/headless/providers/medusa-customer";
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const { email, password, firstName, lastName } = await request.json();
|
||||||
|
if (!email || !password || !firstName || !lastName) {
|
||||||
|
return Response.json({ error: "Faltan campos obligatorios" }, { status: 400 });
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const customer = await registerCustomer(email, password, firstName, lastName);
|
||||||
|
return Response.json(customer);
|
||||||
|
} catch (error) {
|
||||||
|
return Response.json({ error: (error as Error).message }, { status: 400 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { Suspense } from "react";
|
||||||
|
import { GoogleCallbackClient } from "@/components/account/google-callback-client";
|
||||||
|
|
||||||
|
export default function GoogleCallbackPage() {
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<GoogleCallbackClient />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -65,7 +65,7 @@ spec:
|
|||||||
memory: 64Mi
|
memory: 64Mi
|
||||||
|
|
||||||
- name: migrations
|
- name: migrations
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.168
|
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.221
|
||||||
imagePullPolicy: IfNotPresent
|
imagePullPolicy: IfNotPresent
|
||||||
command:
|
command:
|
||||||
- node
|
- node
|
||||||
@@ -86,7 +86,7 @@ spec:
|
|||||||
|
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.168
|
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.221
|
||||||
imagePullPolicy: IfNotPresent
|
imagePullPolicy: IfNotPresent
|
||||||
envFrom:
|
envFrom:
|
||||||
- configMapRef:
|
- configMapRef:
|
||||||
|
|||||||
@@ -0,0 +1,99 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { LogOut, MessageCircle, PackageCheck } from "lucide-react";
|
||||||
|
import { type FormEvent, useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { useCustomerStore } from "@/store/customer-store";
|
||||||
|
|
||||||
|
type Mode = "login" | "register";
|
||||||
|
|
||||||
|
function GoogleIcon() {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 48 48" className="size-4" aria-hidden="true">
|
||||||
|
<path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 8 3l6-6C34 5.1 29.3 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21 21-9.4 21-21c0-1.4-.1-2.7-.4-3.5z" />
|
||||||
|
<path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 15.9 18.9 13 24 13c3.1 0 5.8 1.1 8 3l6-6C34 5.1 29.3 3 24 3 16.1 3 9.3 7.6 6.3 14.7z" />
|
||||||
|
<path fill="#4CAF50" d="M24 45c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.5-4.6 2.4-7.2 2.4-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.2 40.3 16 45 24 45z" />
|
||||||
|
<path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.2 4.3-4.1 5.6l6.2 5.2C41.4 35.9 45 30.5 45 24c0-1.4-.1-2.7-.4-3.5z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AccountDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
|
||||||
|
const { customer, hasHydrated, loading, error, login, register, logout } = useCustomerStore();
|
||||||
|
const [mode, setMode] = useState<Mode>("login");
|
||||||
|
const [form, setForm] = useState({ email: "", password: "", firstName: "", lastName: "" });
|
||||||
|
|
||||||
|
async function submit(event: FormEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
const ok = mode === "login"
|
||||||
|
? await login(form.email, form.password)
|
||||||
|
: await register(form.email, form.password, form.firstName, form.lastName);
|
||||||
|
if (ok) setForm({ email: "", password: "", firstName: "", lastName: "" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLoggedIn = hasHydrated && customer !== null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-lg p-7">
|
||||||
|
<div className="pr-10">
|
||||||
|
{isLoggedIn ? (
|
||||||
|
<>
|
||||||
|
<span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Tu cuenta</span>
|
||||||
|
<h2 className="mt-3 text-3xl font-black">Hola, {customer.firstName ?? customer.email}</h2>
|
||||||
|
<p className="mt-3 text-sm leading-6 text-slate-600">{customer.email}</p>
|
||||||
|
<div className="mt-6 grid gap-3">
|
||||||
|
<Button asChild variant="outline"><Link href="/catalog" onClick={() => onOpenChange(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
|
||||||
|
<Button variant="ghost" onClick={logout}><LogOut className="size-4" />Cerrar sesión</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
|
||||||
|
<h2 className="mt-3 text-3xl font-black">{mode === "login" ? "Inicia sesión" : "Crea tu cuenta"}</h2>
|
||||||
|
<form onSubmit={submit} className="mt-5 space-y-3">
|
||||||
|
{mode === "register" && (
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<Input placeholder="Nombre" required value={form.firstName} onChange={(event) => setForm({ ...form, firstName: event.target.value })} />
|
||||||
|
<Input placeholder="Apellido" required value={form.lastName} onChange={(event) => setForm({ ...form, lastName: event.target.value })} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Input type="email" placeholder="Correo" required value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
|
||||||
|
<Input type="password" placeholder="Contraseña" required minLength={8} value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} />
|
||||||
|
{error && <p className="text-sm font-bold text-rose-600">{error}</p>}
|
||||||
|
<Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>
|
||||||
|
{loading ? "Un momento…" : mode === "login" ? "Iniciar sesión" : "Crear cuenta"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
<div className="mt-3 flex items-center gap-3 text-xs font-bold uppercase tracking-wide text-slate-400">
|
||||||
|
<span className="h-px flex-1 bg-slate-100" />o<span className="h-px flex-1 bg-slate-100" />
|
||||||
|
</div>
|
||||||
|
<Button asChild variant="outline" size="lg" className="mt-3 w-full">
|
||||||
|
<a href="/api/customer/google/start">
|
||||||
|
<GoogleIcon />Continuar con Google
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="mt-3 text-sm font-bold text-ari-marino hover:underline"
|
||||||
|
onClick={() => setMode(mode === "login" ? "register" : "login")}
|
||||||
|
>
|
||||||
|
{mode === "login" ? "¿No tienes cuenta? Regístrate" : "¿Ya tienes cuenta? Inicia sesión"}
|
||||||
|
</button>
|
||||||
|
<div className="mt-6 border-t border-slate-100 pt-5">
|
||||||
|
<Button asChild variant="outline" className="w-full">
|
||||||
|
<a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer">
|
||||||
|
<MessageCircle />Hablar con ARI
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { useCustomerStore } from "@/store/customer-store";
|
||||||
|
|
||||||
|
export function GoogleCallbackClient() {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const loginWithGoogle = useCustomerStore((state) => state.loginWithGoogle);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const ran = useRef(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Guard contra el doble-mount de StrictMode -- el code de Google es
|
||||||
|
// de un solo uso, un segundo intento con el mismo code fallaria.
|
||||||
|
if (ran.current) return;
|
||||||
|
ran.current = true;
|
||||||
|
|
||||||
|
const code = searchParams.get("code");
|
||||||
|
const state = searchParams.get("state");
|
||||||
|
if (!code || !state) {
|
||||||
|
setError("Faltan parámetros de Google en la URL de retorno.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loginWithGoogle(code, state).then((ok) => {
|
||||||
|
router.replace(ok ? "/" : "/?googleAuthError=1");
|
||||||
|
});
|
||||||
|
}, [searchParams, loginWithGoogle, router]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-3 text-center">
|
||||||
|
{error ? (
|
||||||
|
<>
|
||||||
|
<p className="text-lg font-black text-rose-600">No se pudo iniciar sesión con Google</p>
|
||||||
|
<p className="text-sm text-slate-600">{error}</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm font-bold text-slate-600">Conectando con Google…</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,14 +2,15 @@
|
|||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname, useSearchParams } from "next/navigation";
|
import { usePathname, useSearchParams } from "next/navigation";
|
||||||
import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
|
import { ChevronDown, Heart, LayoutGrid, Menu, ShoppingCart, UserRound } from "lucide-react";
|
||||||
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { AccountDialog } from "@/components/account/account-dialog";
|
||||||
import { PredictiveSearch } from "@/components/search/predictive-search";
|
import { PredictiveSearch } from "@/components/search/predictive-search";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
|
||||||
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||||
import type { Category, Product } from "@/lib/headless/types";
|
import type { Category, Product } from "@/lib/headless/types";
|
||||||
import { useCartStore } from "@/store/cart-store";
|
import { useCartStore } from "@/store/cart-store";
|
||||||
|
import { useCustomerStore } from "@/store/customer-store";
|
||||||
import { useWishlistStore } from "@/store/wishlist-store";
|
import { useWishlistStore } from "@/store/wishlist-store";
|
||||||
|
|
||||||
type CategoryNode = Category & { children: Category[] };
|
type CategoryNode = Category & { children: Category[] };
|
||||||
@@ -34,6 +35,9 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
const openWishlist = useWishlistStore((state) => state.openWishlist);
|
const openWishlist = useWishlistStore((state) => state.openWishlist);
|
||||||
const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
|
const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
|
||||||
const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
|
const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
|
||||||
|
const customer = useCustomerStore((state) => state.customer);
|
||||||
|
const customerHydrated = useCustomerStore((state) => state.hasHydrated);
|
||||||
|
const isLoggedIn = customerHydrated && customer !== null;
|
||||||
|
|
||||||
const tree = useMemo(() => buildCategoryTree(categories), [categories]);
|
const tree = useMemo(() => buildCategoryTree(categories), [categories]);
|
||||||
// Derivado de los productos reales (no de un endpoint de colecciones):
|
// Derivado de los productos reales (no de un endpoint de colecciones):
|
||||||
@@ -62,7 +66,15 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
</Link>
|
</Link>
|
||||||
<PredictiveSearch />
|
<PredictiveSearch />
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
|
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
||||||
|
hamburguesa) -- pedido explicito del usuario: visible
|
||||||
|
siempre en el header, con un punto verde cuando hay sesion
|
||||||
|
iniciada (mismo patron que el badge de cantidad del
|
||||||
|
carrito/favoritos, pero de presencia, no de conteo). */}
|
||||||
|
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
||||||
|
<UserRound />
|
||||||
|
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
||||||
|
</Button>
|
||||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
||||||
<Heart />
|
<Heart />
|
||||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||||
@@ -108,19 +120,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
|
|
||||||
<Dialog open={accountOpen} onOpenChange={setAccountOpen}>
|
<AccountDialog open={accountOpen} onOpenChange={setAccountOpen} />
|
||||||
<DialogContent className="max-w-lg p-7">
|
|
||||||
<div className="pr-10">
|
|
||||||
<span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
|
|
||||||
<h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
|
|
||||||
<p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
|
|
||||||
<div className="mt-6 grid gap-3">
|
|
||||||
<Button asChild variant="primary" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
|
||||||
<Button asChild variant="outline"><Link href="/catalog" onClick={() => setAccountOpen(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,5 +7,19 @@ import { useCartStore } from "@/store/cart-store";
|
|||||||
|
|
||||||
export function MobileAddToCart({ product }: { product: Product }) {
|
export function MobileAddToCart({ product }: { product: Product }) {
|
||||||
const addItem = useCartStore((state) => state.addItem);
|
const addItem = useCartStore((state) => state.addItem);
|
||||||
return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
|
const outOfStock = product.variants[0]?.available === false;
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden">
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="lg"
|
||||||
|
className="w-full"
|
||||||
|
disabled={outOfStock}
|
||||||
|
onClick={() => addItem(product, product.variants[0]?.id)}
|
||||||
|
>
|
||||||
|
<ShoppingBag />
|
||||||
|
{outOfStock ? "Agotado" : "Añadir al carrito"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -24,7 +24,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
|||||||
|
|
||||||
const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
|
const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
|
||||||
const selectedVariant = product.variants.find((variant) => variant.id === selectedVariantId) ?? product.variants[0];
|
const selectedVariant = product.variants.find((variant) => variant.id === selectedVariantId) ?? product.variants[0];
|
||||||
|
const outOfStock = selectedVariant?.available === false;
|
||||||
const lowStock =
|
const lowStock =
|
||||||
|
!outOfStock &&
|
||||||
selectedVariant?.inventoryQuantity !== null &&
|
selectedVariant?.inventoryQuantity !== null &&
|
||||||
selectedVariant?.inventoryQuantity !== undefined &&
|
selectedVariant?.inventoryQuantity !== undefined &&
|
||||||
selectedVariant.inventoryQuantity > 0 &&
|
selectedVariant.inventoryQuantity > 0 &&
|
||||||
@@ -36,7 +38,8 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
|||||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
|
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
|
||||||
<div className="relative aspect-square overflow-hidden bg-white">
|
<div className="relative aspect-square overflow-hidden bg-white">
|
||||||
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
|
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
|
||||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
<div className="absolute left-3 top-3 flex gap-2">{outOfStock && <Badge className="bg-rose-600 text-white">Agotado</Badge>}{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||||
|
{outOfStock && <div className="pointer-events-none absolute inset-0 bg-white/40" />}
|
||||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 flex-col space-y-3 p-5">
|
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||||||
@@ -67,12 +70,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
|||||||
{lowStock !== null && (
|
{lowStock !== null && (
|
||||||
<span className="flex items-center gap-1.5 text-xs font-bold text-amber-600"><TriangleAlert className="size-3.5" />Quedan {lowStock}</span>
|
<span className="flex items-center gap-1.5 text-xs font-bold text-amber-600"><TriangleAlert className="size-3.5" />Quedan {lowStock}</span>
|
||||||
)}
|
)}
|
||||||
|
{outOfStock && (
|
||||||
|
<span className="flex items-center gap-1.5 text-xs font-bold text-rose-600"><TriangleAlert className="size-3.5" />Sin stock</span>
|
||||||
|
)}
|
||||||
<div className="mt-auto flex items-center justify-between gap-3 pt-1">
|
<div className="mt-auto flex items-center justify-between gap-3 pt-1">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
{product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
|
{product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
|
||||||
<strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
|
<strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
<Button variant="primary" size="sm" disabled={outOfStock} onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />{outOfStock ? "Agotado" : "Agregar"}</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { CheckCircle2, ShoppingBag, TriangleAlert, Truck } from "lucide-react";
|
import { CheckCircle2, ShoppingBag, TriangleAlert, Truck, XCircle } from "lucide-react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import type { Product } from "@/lib/headless/types";
|
import type { Product } from "@/lib/headless/types";
|
||||||
@@ -11,12 +11,68 @@ export function ProductPurchase({ product }: { product: Product }) {
|
|||||||
const [variantId, setVariantId] = useState(product.variants[0]?.id);
|
const [variantId, setVariantId] = useState(product.variants[0]?.id);
|
||||||
const addItem = useCartStore((state) => state.addItem);
|
const addItem = useCartStore((state) => state.addItem);
|
||||||
const selectedVariant = product.variants.find((variant) => variant.id === variantId) ?? product.variants[0];
|
const selectedVariant = product.variants.find((variant) => variant.id === variantId) ?? product.variants[0];
|
||||||
|
const outOfStock = selectedVariant?.available === false;
|
||||||
const lowStock =
|
const lowStock =
|
||||||
|
!outOfStock &&
|
||||||
selectedVariant?.inventoryQuantity !== null &&
|
selectedVariant?.inventoryQuantity !== null &&
|
||||||
selectedVariant?.inventoryQuantity !== undefined &&
|
selectedVariant?.inventoryQuantity !== undefined &&
|
||||||
selectedVariant.inventoryQuantity > 0 &&
|
selectedVariant.inventoryQuantity > 0 &&
|
||||||
selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
|
selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
|
||||||
? selectedVariant.inventoryQuantity
|
? selectedVariant.inventoryQuantity
|
||||||
: null;
|
: null;
|
||||||
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-ari-marino bg-ari-marino text-white" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div>{/* oculto en mobile: MobileAddToCart (barra fija abajo, lg:hidden) ya cubre esa misma accion ahi -- sin el hidden aqui, ambos se mostraban a la vez. */}<Button variant="primary" size="lg" className="hidden w-full lg:inline-flex" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="mb-5 flex flex-wrap gap-2">
|
||||||
|
{product.variants.map((variant) => (
|
||||||
|
<button
|
||||||
|
key={variant.id}
|
||||||
|
onClick={() => setVariantId(variant.id)}
|
||||||
|
className={`rounded-full border px-4 py-2 text-sm font-bold ${
|
||||||
|
variantId === variant.id ? "border-ari-marino bg-ari-marino text-white" : "border-slate-200"
|
||||||
|
} ${variant.available === false ? "opacity-40" : ""}`}
|
||||||
|
>
|
||||||
|
{variant.value}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mb-6 flex items-end gap-3">
|
||||||
|
<strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>
|
||||||
|
{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}
|
||||||
|
</div>
|
||||||
|
{/* oculto en mobile: MobileAddToCart (barra fija abajo, lg:hidden) ya cubre esa misma accion ahi -- sin el hidden aqui, ambos se mostraban a la vez. */}
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="lg"
|
||||||
|
className="hidden w-full lg:inline-flex"
|
||||||
|
disabled={outOfStock}
|
||||||
|
onClick={() => addItem(product, variantId)}
|
||||||
|
>
|
||||||
|
<ShoppingBag />
|
||||||
|
{outOfStock ? "Agotado" : "Añadir al carrito"}
|
||||||
|
</Button>
|
||||||
|
<div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">
|
||||||
|
{outOfStock ? (
|
||||||
|
<span className="flex items-center gap-2 font-bold text-rose-600">
|
||||||
|
<XCircle className="size-4" />
|
||||||
|
Agotado
|
||||||
|
</span>
|
||||||
|
) : lowStock !== null ? (
|
||||||
|
<span className="flex items-center gap-2 font-bold text-amber-600">
|
||||||
|
<TriangleAlert className="size-4" />
|
||||||
|
Quedan {lowStock} unidades
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center gap-2 font-bold">
|
||||||
|
<CheckCircle2 className="size-4 text-emerald-500" />
|
||||||
|
Disponibilidad por confirmar
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="flex items-center gap-2 font-bold">
|
||||||
|
<Truck className="size-4 text-cyan-600" />
|
||||||
|
Envíos nacionales
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -25,7 +25,7 @@ spec:
|
|||||||
runAsUser: 1001
|
runAsUser: 1001
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.210
|
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.219
|
||||||
env:
|
env:
|
||||||
- name: HEADLESS_PROVIDER
|
- name: HEADLESS_PROVIDER
|
||||||
value: medusa
|
value: medusa
|
||||||
|
|||||||
@@ -0,0 +1,167 @@
|
|||||||
|
// Cuentas de cliente reales conectadas a Medusa (Store API), mismo patron
|
||||||
|
// que medusa-cart.ts -- server-side, nunca cacheado (auth es estado
|
||||||
|
// mutable por sesion, no catalogo).
|
||||||
|
//
|
||||||
|
// Flujo verificado en vivo (2026-08-29) antes de escribir este archivo,
|
||||||
|
// no asumido contra documentacion: registro (auth/customer/emailpass/
|
||||||
|
// register) da un token de registro; ese token crea el customer real
|
||||||
|
// (POST /store/customers); pero ese token de registro NO sirve como
|
||||||
|
// sesion del customer -- hay que loguear de nuevo para obtener el token
|
||||||
|
// de sesion real. Mensajes de error exactos confirmados: registro con
|
||||||
|
// correo repetido -> 401 "Identity with email already exists"; login con
|
||||||
|
// credenciales invalidas -> 401 "Invalid email or password".
|
||||||
|
|
||||||
|
export interface CustomerSummary {
|
||||||
|
token: string;
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
firstName: string | null;
|
||||||
|
lastName: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function backendUrl(): string {
|
||||||
|
const value = process.env.MEDUSA_BACKEND_URL;
|
||||||
|
if (!value) {
|
||||||
|
throw new Error("MEDUSA_BACKEND_URL no está configurado.");
|
||||||
|
}
|
||||||
|
return value.replace(/\/$/, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function medusaAuthFetch(
|
||||||
|
path: string,
|
||||||
|
init?: { method?: string; body?: unknown; token?: string },
|
||||||
|
): Promise<Record<string, unknown>> {
|
||||||
|
const publishableKey = process.env.MEDUSA_PUBLISHABLE_KEY;
|
||||||
|
|
||||||
|
const response = await fetch(`${backendUrl()}${path}`, {
|
||||||
|
method: init?.method ?? "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(publishableKey ? { "x-publishable-api-key": publishableKey } : {}),
|
||||||
|
...(init?.token ? { Authorization: `Bearer ${init.token}` } : {}),
|
||||||
|
},
|
||||||
|
body: init?.body ? JSON.stringify(init.body) : undefined,
|
||||||
|
cache: "no-store",
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json().catch(() => ({}));
|
||||||
|
if (!response.ok) {
|
||||||
|
const message = typeof data.message === "string" ? data.message : `Error ${response.status}`;
|
||||||
|
throw new Error(message);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
type MedusaCustomer = {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
first_name?: string | null;
|
||||||
|
last_name?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getCurrentCustomer(token: string): Promise<CustomerSummary> {
|
||||||
|
const data = await medusaAuthFetch("/store/customers/me", { token });
|
||||||
|
const customer = data.customer as MedusaCustomer;
|
||||||
|
return {
|
||||||
|
token,
|
||||||
|
id: customer.id,
|
||||||
|
email: customer.email,
|
||||||
|
firstName: customer.first_name ?? null,
|
||||||
|
lastName: customer.last_name ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loginCustomer(email: string, password: string): Promise<CustomerSummary> {
|
||||||
|
let data: Record<string, unknown>;
|
||||||
|
try {
|
||||||
|
data = await medusaAuthFetch("/auth/customer/emailpass", {
|
||||||
|
method: "POST",
|
||||||
|
body: { email, password },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if ((error as Error).message === "Invalid email or password") {
|
||||||
|
throw new Error("Correo o contraseña incorrectos.");
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
return getCurrentCustomer(data.token as string);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flujo Google verificado en vivo (2026-08-29) contra el pod real, no
|
||||||
|
// solo contra la doc: GET /auth/customer/google funciona igual que el
|
||||||
|
// POST documentado (sin body, no hace falta callback_url -- ya viene de
|
||||||
|
// GOOGLE_CALLBACK_URL en el modulo); la respuesta no trae Set-Cookie, o
|
||||||
|
// sea que el "state" que Google reenvia en el callback es autocontenido
|
||||||
|
// (firmado), no depende de sesion de servidor -- confirmado con un
|
||||||
|
// callback con code/state inventados: 401 "No state provided, or
|
||||||
|
// session expired" (mismo mensaje que con state ausente, no un error de
|
||||||
|
// sesion real). auth/token/refresh confirmado que exige Bearer valido
|
||||||
|
// (401 "Unauthorized" con uno invalido, no 404).
|
||||||
|
function decodeJwtPayload(token: string): Record<string, unknown> {
|
||||||
|
const payload = token.split(".")[1] ?? "";
|
||||||
|
const base64 = payload.replace(/-/g, "+").replace(/_/g, "/");
|
||||||
|
const json = Buffer.from(base64, "base64").toString("utf-8");
|
||||||
|
return JSON.parse(json || "{}");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getGoogleAuthUrl(): Promise<string> {
|
||||||
|
const data = await medusaAuthFetch("/auth/customer/google");
|
||||||
|
return data.location as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function handleGoogleCallback(code: string, state: string): Promise<CustomerSummary> {
|
||||||
|
const query = new URLSearchParams({ code, state }).toString();
|
||||||
|
const data = await medusaAuthFetch(`/auth/customer/google/callback?${query}`, { method: "POST" });
|
||||||
|
const initialToken = data.token as string;
|
||||||
|
const payload = decodeJwtPayload(initialToken);
|
||||||
|
const actorId = payload.actor_id as string | undefined;
|
||||||
|
|
||||||
|
if (!actorId) {
|
||||||
|
// Primer login con Google -- todavia no existe el customer real.
|
||||||
|
const userMetadata = (payload.user_metadata as Record<string, unknown> | undefined) ?? {};
|
||||||
|
const email = userMetadata.email as string;
|
||||||
|
const firstName = (userMetadata.given_name as string) ?? (userMetadata.name as string) ?? email.split("@")[0];
|
||||||
|
const lastName = (userMetadata.family_name as string) ?? "";
|
||||||
|
await medusaAuthFetch("/store/customers", {
|
||||||
|
method: "POST",
|
||||||
|
token: initialToken,
|
||||||
|
body: { email, first_name: firstName, last_name: lastName },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// El token del callback (o el de recien crear el customer) todavia no
|
||||||
|
// sirve como sesion final -- hay que refrescarlo, tanto para usuarios
|
||||||
|
// nuevos como para los que ya existian (confirmado contra la doc: los
|
||||||
|
// dos casos convergen en el mismo paso de refresh).
|
||||||
|
const refreshed = await medusaAuthFetch("/auth/token/refresh", { method: "POST", token: initialToken });
|
||||||
|
return getCurrentCustomer(refreshed.token as string);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function registerCustomer(
|
||||||
|
email: string,
|
||||||
|
password: string,
|
||||||
|
firstName: string,
|
||||||
|
lastName: string,
|
||||||
|
): Promise<CustomerSummary> {
|
||||||
|
let data: Record<string, unknown>;
|
||||||
|
try {
|
||||||
|
data = await medusaAuthFetch("/auth/customer/emailpass/register", {
|
||||||
|
method: "POST",
|
||||||
|
body: { email, password },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if ((error as Error).message === "Identity with email already exists") {
|
||||||
|
throw new Error("Ese correo ya está registrado — inicia sesión en vez de crear una cuenta nueva.");
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
await medusaAuthFetch("/store/customers", {
|
||||||
|
method: "POST",
|
||||||
|
token: data.token as string,
|
||||||
|
body: { email, first_name: firstName, last_name: lastName },
|
||||||
|
});
|
||||||
|
// El token de registro crea el customer pero no queda como sesion real
|
||||||
|
// -- se loguea de nuevo para obtener el token de sesion (confirmado en
|
||||||
|
// vivo, no documentado explicitamente).
|
||||||
|
return loginCustomer(email, password);
|
||||||
|
}
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { create } from "zustand";
|
||||||
|
import { createJSONStorage, persist } from "zustand/middleware";
|
||||||
|
|
||||||
|
// Cuenta de cliente real conectada a Medusa (Store API, via
|
||||||
|
// /api/customer/*), mismo patron que cart-store.ts: token + datos basicos
|
||||||
|
// persistidos en localStorage, resincronizados contra el servidor al
|
||||||
|
// rehidratar (el token puede llevar dias, o haber sido revocado).
|
||||||
|
export interface Customer {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
firstName: string | null;
|
||||||
|
lastName: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomerState {
|
||||||
|
token: string | null;
|
||||||
|
customer: Customer | null;
|
||||||
|
hasHydrated: boolean;
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
setHasHydrated: (value: boolean) => void;
|
||||||
|
register: (email: string, password: string, firstName: string, lastName: string) => Promise<boolean>;
|
||||||
|
login: (email: string, password: string) => Promise<boolean>;
|
||||||
|
loginWithGoogle: (code: string, state: string) => Promise<boolean>;
|
||||||
|
logout: () => void;
|
||||||
|
syncCustomer: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function postJson(url: string, body: unknown) {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toCustomer(data: Record<string, unknown>): Customer {
|
||||||
|
return {
|
||||||
|
id: data.id as string,
|
||||||
|
email: data.email as string,
|
||||||
|
firstName: (data.firstName as string | null) ?? null,
|
||||||
|
lastName: (data.lastName as string | null) ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCustomerStore = create<CustomerState>()(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
token: null,
|
||||||
|
customer: null,
|
||||||
|
hasHydrated: false,
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
setHasHydrated: (value) => set({ hasHydrated: value }),
|
||||||
|
|
||||||
|
register: async (email, password, firstName, lastName) => {
|
||||||
|
set({ loading: true, error: null });
|
||||||
|
const result = await postJson("/api/customer/register", { email, password, firstName, lastName });
|
||||||
|
if (result.error) {
|
||||||
|
set({ loading: false, error: result.error });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
set({ loading: false, token: result.token, customer: toCustomer(result) });
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
login: async (email, password) => {
|
||||||
|
set({ loading: true, error: null });
|
||||||
|
const result = await postJson("/api/customer/login", { email, password });
|
||||||
|
if (result.error) {
|
||||||
|
set({ loading: false, error: result.error });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
set({ loading: false, token: result.token, customer: toCustomer(result) });
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
loginWithGoogle: async (code, state) => {
|
||||||
|
set({ loading: true, error: null });
|
||||||
|
const result = await postJson("/api/customer/google/callback", { code, state });
|
||||||
|
if (result.error) {
|
||||||
|
set({ loading: false, error: result.error });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
set({ loading: false, token: result.token, customer: toCustomer(result) });
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
logout: () => set({ token: null, customer: null, error: null }),
|
||||||
|
|
||||||
|
// El token guardado en localStorage puede llevar dias o haber sido
|
||||||
|
// revocado -- se refresca contra el servidor en vez de confiar en el
|
||||||
|
// ultimo snapshot local.
|
||||||
|
syncCustomer: async () => {
|
||||||
|
const token = get().token;
|
||||||
|
if (!token) return;
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/customer/me?token=${encodeURIComponent(token)}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
set({ token: null, customer: null });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.id) set({ customer: toCustomer(result) });
|
||||||
|
} catch {
|
||||||
|
// Sin red: se queda con el ultimo estado local conocido.
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: "ari-shopping-customer-v1",
|
||||||
|
storage: createJSONStorage(() => localStorage),
|
||||||
|
partialize: (state) => ({ token: state.token, customer: state.customer }),
|
||||||
|
onRehydrateStorage: () => (state) => {
|
||||||
|
state?.setHasHydrated(true);
|
||||||
|
void state?.syncCustomer();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
Reference in new issue
Block a user