@asteby/storefront-react 0.25.0 → 0.26.0

package/README.md

@@ -727,11 +727,44 @@ import { parseCatalog, resolveVehicle, fitmentConfig, fitFilterTags, withFit, sa
 const config = fitmentConfig({ compatAttribute: 'compatibilidad' })        // por defecto: tags `fit:*`, atributo `compatibility`
 const catalog = parseCatalog(section.props, { priorityAliases: { alta: 'high' } })
 const vehicle = resolveVehicle(catalog, cookieKey)                         // null si la clave ya no existe
-const tags = vehicle ? fitFilterTags(vehicle, config) : []                 // filter.tag = alguno de
+const tags = vehicle ? fitFilterTags(vehicle, config) : []                 // products.list({ tags_any: tags }), no `q` ni `filter.tag`
 const product = withFit(rawProduct, vehicle, config)                       // cientos de tags fit:* → UNA etiqueta de estado
 ```
 
-La cookie, el formulario y el redirect son de la tienda; `safeRedirect` valida el destino. Un componente de selector sobre estas funciones llega en una versión posterior.
+El catálogo acepta motores con tramos de años reales (`["2.4", 2007, 2017, 2020, 2022]` o `{ id, ranges }`): un hueco es un hueco, un modelo cubre un año solo si algún motor lo cubre y el selector no ofrece años fantasma. `vehicleCatalogToTree(catalog)` lo convierte al árbol que la organización publica para «Mis artículos» (abajo). La cookie, el formulario y el redirect son de la tienda; `safeRedirect` valida el destino. Para guardar varios vehículos en la cuenta, con selector y filtro listos, usa `/subjects`.
+
+## Mis artículos / Mi garage (`@asteby/storefront-react/subjects`, contrato 1.9)
+
+Algo del comprador para lo que compra (un vehículo, una impresora, un celular, una mascota, una talla), de un **tipo que la organización declara como dato**: el SDK no nombra ninguno y los textos salen de los datos (`kind.label`, `kind.label_plural`). Una tienda que no declara tipos (God's Nutrition, Local) **no tiene sección**: `loadSubjectsContext` devuelve `kinds: []` y no se pinta nada.
+
+| Pieza | Para qué |
+| --- | --- |
+| `SubjectGarage` | «Mi garage» de un tipo: tarjetas con etiqueta, apodo, insignia «Activo», valores privados enmascarados, «Ver piezas compatibles», hacer activo, editar, eliminar (confirmación en línea) y agregar. Estados vacío, límite y «No pudimos cargar esto · Reintentar» |
+| `SubjectPicker` | El formulario de un artículo, guiado por los campos del tipo: cascada que se angosta (marca → modelo → año → motor), años por rangos, campos libres y el campo privado. Sin JavaScript es un `<form method="post">` que avanza el nivel al enviar (`subject-refine`) |
+| `SubjectFilter` / `SubjectFitBadge` | La barra «Para: Nissan NP300 2012 · Cambiar · Ver todo» de un catálogo y la insignia «Compatible con tu vehículo» de un producto. Enlaces, no botones |
+| `useSubjects(client?)` | Hook para tiendas que pintan en el cliente (`ready` / `error` / `unavailable`) |
+| `/subjects/server` | `loadSubjectsContext` (nunca lanza), `createSubjectAction`, cookie del invitado `sf_subject_<tipo>`, `subjectCacheHeaders` |
+| `/subjects.css` | Hoja neutra opcional (`--sf-subject-*`) |
+
+```tsx
+// loader (/garage y los catálogos)
+const subjects = await loadSubjectsContext(sf, { customer: customerClient, cookieHeader: request.headers.get('cookie') })
+//   subjects.kinds        → [] si la tienda no declara tipos: no renderices la sección
+//   subjects.active.vehicle → { label, fit_key, source: 'account' | 'cookie' }
+
+// catálogo: solo lo compatible, con el filtro del servidor
+const products = await sf.products.list({ tags_any: fitTagsAny(subjects.active.vehicle?.fit_key) })
+headers = subjectCacheHeaders(cookieHeader, 'public, max-age=60', { signedIn })   // con artículo activo la página es privada; ambas respuestas llevan Vary: Cookie
+
+// acción (POST /garage)
+export const action = createSubjectAction({ storefront: sf, readCustomerToken })
+// página
+<SubjectGarage kind={kind} subjects={subjects.subjects} data={actionData} partsHref={(s) => `/piezas?para=${s.fit_key}`} status={subjects.degraded.subjects ? 'error' : 'ready'} />
+```
+
+**Privacidad.** Un campo `private` (placas) nunca entra a la etiqueta, la clave de compatibilidad, el filtro, la caché, la cookie ni el pedido. El servidor lo devuelve solo enmascarado (`••23`): el formulario no lo rellena, un campo vacío al editar conserva el guardado y `.clear` lo quita. La cookie del invitado guarda **solo** la `fit_key`, y `serializeSubjectCookie` se niega (`TypeError`) a escribir cualquier valor que no resuelva contra el catálogo del tipo. La acción no registra nada, no devuelve valores privados en `values` y los errores nombran el campo, nunca el valor.
+
+**Adoptar en ProtekAuto** (la tienda no se toca en este paquete): (1) subir el SDK y usar `fitment` en lugar de `app/lib/vehicle.ts` (`fitmentConfig({ tagPrefix: 'fit:', stateTagPrefix: 'ajuste:', compatAttribute: 'compatibilidad' })`, `parseCatalog(props, { priorityAliases: { alta: 'high', media: 'medium', baja: 'low' } })`); (2) publicar los datos: registrar las secciones `subject_kinds` y `subject_catalog` (`PUT /storefront/content/section-types`, ver `shared/subjectspec/README.md` de addons), la página `subject-kinds` con el tipo `vehicle` (`label_plural: «Mi garage»`, plantilla `{make}/{model}/{year}/{engine}`, campo `plate` con `private: true`) y el catálogo con `splitSubjectTree(vehicleCatalogToTree(parseCatalog(...)))`: el real (50 marcas, 417 modelos, 1 165 opciones, ~70 KB como texto) no cabe en una página de OPS (una escritura de 64 KB con borrador y copia pública), así que va en 3 páginas `vehiculos-1..3` y el tipo las nombra todas en `catalog_ref`; (3) en el loader, `loadSubjectsContext` y `products.list({ tags_any })` en vez de buscar la etiqueta con `q` (`vehicle.server.ts` deja de filtrar a mano); (4) cookie `sf_subject_vehicle` en lugar de `pa_vehiculo` (leer la vieja una vez y reescribirla); (5) `/garage` con `SubjectGarage` + `createSubjectAction`; (6) `subjectCacheHeaders` en lugar de `vehicleCacheHeaders`. Pendiente fuera del SDK: ligar el artículo al pedido (`CheckoutRequest.subject`, `storefront_cart` + `customers`).
 
 ## API
 

package/dist/account-server.cjs

@@ -328,6 +328,111 @@ h1 { font-size: 22px; margin: 0; }
 
 // src/account/server.ts
 init_voucher();
+async function loadAccountSessions(customer, options = {}) {
+  try {
+    return await customer.customer.sessions.list(options.signal ? { signal: options.signal } : void 0);
+  } catch {
+    return null;
+  }
+}
+async function loadAccountSettings(customer, options = {}) {
+  const o = options.signal ? { signal: options.signal } : void 0;
+  const [profile, capabilities, sessions] = await Promise.all([
+    customer.customer.get(o).catch(() => null),
+    customer.customer.capabilities(o).catch(() => null),
+    loadAccountSessions(customer, options)
+  ]);
+  return { customer: profile, capabilities, sessions };
+}
+var fail = (intent, code, extra = {}) => ({
+  ok: false,
+  ...intent ? { intent } : {},
+  error: { code, ...extra.field ? { field: extra.field } : {}, ...extra.retryAfter ? { retryAfter: extra.retryAfter } : {} }
+});
+function toSettingsFailure(err, intent, ctx = "other") {
+  if (!storefront.isStorefrontError(err)) return fail(intent, "unavailable");
+  const e = err;
+  if (e.code === "insufficient_scope") return fail(intent, "unsupported");
+  switch (e.status) {
+    case 401:
+      return fail(intent, "session_expired");
+    case 403:
+      return fail(intent, e.code === "reauth_required" ? "reauth_required" : "unsupported");
+    case 404:
+      return fail(intent, "unsupported");
+    case 409:
+      return fail(intent, e.field === "orders" ? "blocked_orders" : e.field === "pending_payments" ? "blocked_pending_payments" : "validation", e.field ? { field: e.field } : {});
+    case 429: {
+      const wait = typeof e.retryAfter === "number" && Number.isFinite(e.retryAfter) && e.retryAfter > 0 ? Math.min(3600, Math.ceil(e.retryAfter)) : void 0;
+      return fail(intent, "rate_limited", wait ? { retryAfter: wait } : {});
+    }
+    case 400:
+    case 422:
+      return ctx === "credential" ? fail(intent, "invalid_credential") : fail(intent, "validation", e.field ? { field: e.field } : {});
+    default:
+      return fail(intent, "unavailable");
+  }
+}
+function createAccountSettingsAction(options) {
+  const { storefront: sf, customerCookie } = options;
+  return async function settingsAction({ request }) {
+    if (request.headers.get("Sec-Fetch-Site")?.toLowerCase() === "cross-site") return fail(void 0, "validation");
+    const form = await request.formData().catch(() => null);
+    if (!form) return fail(void 0, "validation");
+    const text2 = (name) => {
+      const v = form.get(name);
+      return typeof v === "string" ? v : "";
+    };
+    const intent = text2("intent");
+    const raw = await customerCookie.parse(request.headers.get("Cookie"));
+    const token = typeof raw === "string" && raw ? raw : null;
+    if (!token) return fail(intent, "session_expired");
+    const ip = options.clientIp?.(request);
+    const w = ip ? { clientIp: ip } : void 0;
+    const customer = sf.withCustomerToken(token);
+    try {
+      switch (intent) {
+        case "session-revoke": {
+          const id = text2("session_id").trim();
+          if (!id || id.length > 64) return fail(intent, "validation", { field: "session_id" });
+          if (id.toLowerCase() === "others") return fail(intent, "validation", { field: "session_id" });
+          await customer.customer.sessions.revoke(id, w);
+          return { ok: true, intent };
+        }
+        case "session-revoke-others": {
+          await customer.customer.sessions.revokeOthers(w);
+          return { ok: true, intent };
+        }
+        case "locale": {
+          const locale = text2("locale").trim();
+          if (locale.length > 35) return fail(intent, "validation", { field: "locale" });
+          await customer.customer.update({ locale: locale || null }, w);
+          return { ok: true, intent, saved: true };
+        }
+        case "notifications": {
+          const shown = form.getAll("pref_shown").filter((v) => typeof v === "string");
+          const checked = new Set(form.getAll("pref").filter((v) => typeof v === "string"));
+          if (shown.length === 0 || shown.length > 30) return fail(intent, "validation", { field: "preferences" });
+          const notifications = {};
+          for (const pair of shown) {
+            const m = /^([a-z][a-z0-9_]{0,31}):([a-z][a-z0-9_]{0,31})$/.exec(pair);
+            if (!m) return fail(intent, "validation", { field: "preferences" });
+            (notifications[m[1]] ??= {})[m[2]] = checked.has(pair);
+          }
+          await customer.customer.update({ preferences: { notifications } }, w);
+          return { ok: true, intent, saved: true };
+        }
+        default:
+          return fail(void 0, "validation");
+      }
+    } catch (err) {
+      if (intent === "session-revoke" && storefront.isStorefrontError(err) && err.status === 404) return { ok: true, intent };
+      return toSettingsFailure(err, intent);
+    }
+  };
+}
+
+// src/account/server.ts
 var SAFE_AUTH_CAPABILITIES = Object.freeze({
   password: true,
   email_verification: false,
@@ -387,32 +492,32 @@ function safeNextPath(raw, fallback = "/account") {
   if (!v.startsWith("/") || v.startsWith("//") || v.startsWith("/\\") || /[\u0000-\u001f\\]/.test(v)) return fallback;
   return v;
 }
-var fail = (code, extra = {}, field) => ({
+var fail2 = (code, extra = {}, field) => ({
   ok: false,
   ...extra,
   error: { code, ...field ? { field } : {} }
 });
 function toFailure(err, ctx, extra) {
-  if (!storefront.isStorefrontError(err)) return fail("unavailable", extra);
+  if (!storefront.isStorefrontError(err)) return fail2("unavailable", extra);
   if (err.code === "insufficient_scope") {
     logMisconfigured(err.requiredScopes);
-    return fail("store_misconfigured", extra);
+    return fail2("store_misconfigured", extra);
   }
   switch (err.status) {
     case 401:
-      return fail(ctx === "credentials" ? "invalid_credentials" : ctx === "code" ? "invalid_code" : "unavailable", extra, ctx === "code" ? "code" : void 0);
+      return fail2(ctx === "credentials" ? "invalid_credentials" : ctx === "code" ? "invalid_code" : "unavailable", extra, ctx === "code" ? "code" : void 0);
     case 409:
-      return fail("email_taken", extra, "email");
+      return fail2("email_taken", extra, "email");
     case 429:
-      return fail("rate_limited", extra);
+      return fail2("rate_limited", extra);
     case 400:
     case 422:
-      return fail("validation", extra, err.field);
+      return fail2("validation", extra, err.field);
     case 403:
     case 404:
-      return fail("unsupported", extra);
+      return fail2("unsupported", extra);
     default:
-      return fail("unavailable", extra);
+      return fail2("unavailable", extra);
   }
 }
 function createAuthAction(options) {
@@ -426,7 +531,7 @@ function createAuthAction(options) {
   }
   return async function authAction({ request }) {
     const form = await request.formData().catch(() => null);
-    if (!form) return fail("validation");
+    if (!form) return fail2("validation");
     const text2 = (name) => {
       const v = form.get(name);
       return typeof v === "string" ? v : "";
@@ -439,22 +544,22 @@ function createAuthAction(options) {
     const ip = options.clientIp?.(request);
     const w = ip ? { clientIp: ip } : void 0;
     const carry = { email };
-    if (!email) return fail("validation", carry, "email");
+    if (!email) return fail2("validation", carry, "email");
     const caps = await loadCaps(sf);
     const passwordOn = caps.password;
     const misconfigured = caps.unavailable_reason === "missing_scope";
-    const off = () => fail(misconfigured ? "store_misconfigured" : "unsupported", carry);
+    const off = () => fail2(misconfigured ? "store_misconfigured" : "unsupported", carry);
     const otpOn = caps.otp_channels.includes("email");
     try {
       switch (intent) {
         case "login": {
           if (!passwordOn) return off();
-          if (!password) return fail("validation", carry, "password");
+          if (!password) return fail2("validation", carry, "password");
           return await signedIn(await sf.customer.loginWithPassword({ email, password }, w), next);
         }
         case "register": {
           if (!passwordOn) return off();
-          if (!password) return fail("validation", carry, "password");
+          if (!password) return fail2("validation", carry, "password");
           const res = await sf.customer.register(
             { email, password, ...text2("first_name").trim() ? { first_name: text2("first_name").trim() } : {}, ...text2("last_name").trim() ? { last_name: text2("last_name").trim() } : {} },
             w
@@ -462,7 +567,7 @@ function createAuthAction(options) {
           return res.status === "created" ? await signedIn(res.session, next) : { ok: true, step: "verify", email };
         }
         case "verify": {
-          if (!code) return fail("validation", carry, "code");
+          if (!code) return fail2("validation", carry, "code");
           return await signedIn(await sf.customer.verifyRegistration({ email, code }, w), next);
         }
         case "otp-request": {
@@ -472,7 +577,7 @@ function createAuthAction(options) {
         }
         case "otp-login": {
           if (!otpOn) return off();
-          if (!code) return fail("validation", carry, "code");
+          if (!code) return fail2("validation", carry, "code");
           return await signedIn(await sf.customer.createSession({ email, code }, w), next);
         }
         case "forgot": {
@@ -486,13 +591,13 @@ function createAuthAction(options) {
         }
         case "reset": {
           if (!passwordOn) return off();
-          if (!code) return fail("validation", carry, "code");
-          if (!password) return fail("validation", carry, "password");
+          if (!code) return fail2("validation", carry, "code");
+          if (!password) return fail2("validation", carry, "password");
           await sf.customer.resetPassword({ email, code, password }, w);
           return await signedIn(await sf.customer.loginWithPassword({ email, password }, w), next);
         }
         default:
-          return fail("validation", carry);
+          return fail2("validation", carry);
       }
     } catch (err) {
       const step = intent === "verify" ? "verify" : intent === "otp-login" ? "otp" : intent === "reset" || intent === "forgot" ? "reset" : void 0;
@@ -574,10 +679,14 @@ async function pendingVoucherResponse({ storefront, id, download = false, shopNa
 
 exports.MAX_INVOICE_FILE_BYTES = MAX_INVOICE_FILE_BYTES;
 exports.SAFE_AUTH_CAPABILITIES = SAFE_AUTH_CAPABILITIES;
+exports.createAccountSettingsAction = createAccountSettingsAction;
 exports.createAuthAction = createAuthAction;
 exports.invoiceFileResponse = invoiceFileResponse;
+exports.loadAccountSessions = loadAccountSessions;
+exports.loadAccountSettings = loadAccountSettings;
 exports.loadAuthCapabilities = loadAuthCapabilities;
 exports.pendingVoucherResponse = pendingVoucherResponse;
 exports.safeNextPath = safeNextPath;
+exports.toSettingsFailure = toSettingsFailure;
 //# sourceMappingURL=account-server.cjs.map
 //# sourceMappingURL=account-server.cjs.map