@wix/himalaya-cli 0.1321.0 → 0.1322.0

package/templates/portfolio-creative/tier5-src/wix-spaces-collection-detail/index.ts

@@ -1,5 +1,15 @@
 // Tier-5 bundle: Wix Spaces clone — Collection detail (ON-DEVICE, site-scoped).
 // Prefer Catalog V3 `getStoreCategory`; V1 `getCollection` 428s on CATALOG_V3 sites.
+//
+// #4155 — the screen showed the category header ("N products") and never the products.
+// Once the category resolves, its products load through `searchStoreProducts({ categoryId })`
+// with the same row shape as `himi-store-shop`, so a category reads as a filtered Shop.
+//
+// Two lifecycles, deliberately kept apart:
+//   • the CATEGORY — presence flags (loading / found / missing / failed), as every detail screen;
+//   • its PRODUCTS — a cursor-paged list (`createCollectionQuery`) with its own loading, failed
+//     and empty states. A product read that fails leaves a FOUND category found: the header
+//     stays and the list offers a retry. It never turns into "Category not found".
 import { defineService } from "@himalaya/state";
 import {
   categoryCount,
@@ -8,46 +18,152 @@ import {
   type WixCollection,
 } from "@himalaya/wix-stores-collections";
 import { presence, presenceAfterError, detailInputId, type PresenceFlags } from "../_shared/detail-presence.js";
+import { createCollectionQuery, type CollectionQueryState } from "../_shared/collection-query.js";
+import { productImage, productPrice, searchStoreProducts, type StoreProduct } from "../_shared/himi-store.js";
+import { cleanTitle, initials } from "../_shared/himi-text.js";
 
-interface S extends PresenceFlags { status: "loading" | "ready"; name: string; subtitle: string; description: string }
+interface Row {
+  id: string;
+  name: string;
+  subtitle: string;
+  image: string;
+  initial: string;
+  hasImage: boolean;
+  noImage: boolean;
+  detailScreenId: string;
+}
 
+interface S extends PresenceFlags {
+  status: "loading" | "ready";
+  name: string;
+  subtitle: string;
+  description: string;
+  /** Which `load` the committed state belongs to — a products snapshot is only ever
+   *  projected onto the category it was fetched for. */
+  loadId: number;
+  products: Row[];
+  /** Load-more cursor — non-empty while another page exists and none is in flight. */
+  productsCursor: string;
+  hideProducts: boolean;
+  hideProductsLoading: boolean;
+  /** Gates the products retry block (the category's own failure is `hideLoadError`). */
+  productsNotErrored: boolean;
+  /** Gates the "next page failed" retry under the list. A failed load-more keeps the rows
+   *  and clears the cursor, so without this the list would just stop and read as complete. */
+  productsNoPageError: boolean;
+  /** One plain line for a screen that has no dedicated empty / error blocks ("" otherwise). */
+  productsMessage: string;
+  /** Gates the "no products in this category" block (screen-kit `emptyBlock` reads `noEmpty`). */
+  noEmpty: boolean;
+}
 
-const svc = defineService<S, { load: (s: S) => Promise<S> }>("spacesCollectionDetail", {
-  state: { status: "loading", name: "", subtitle: "", description: "", ...presence("loading") },
+/** The same row `himi-store-shop` emits, so the screen reuses the Shop tile. */
+function row(p: StoreProduct): Row {
+  const name = cleanTitle(p.name) || "Product";
+  const image = productImage(p);
+  return {
+    id: p.id ?? "",
+    name,
+    subtitle: productPrice(p),
+    image,
+    initial: initials(name),
+    hasImage: !!image,
+    noImage: !image,
+    detailScreenId: "himi_product",
+  };
+}
+
+let categoryId = "";
+let loadId = 0;
+const products = createCollectionQuery<Row>({
+  id: (item) => item.id,
+  async fetch(_criteria, cursor) {
+    const response = await searchStoreProducts({ categoryId, limit: 50, cursor: cursor || undefined });
+    return {
+      items: (response.products ?? []).map(row).filter((item) => !!item.id),
+      nextCursor: response.pagingMetadata?.cursors?.next ?? "",
+      total: response.pagingMetadata?.total,
+    };
+  },
+}, () => { void svc.productsChanged(); });
+
+/** Project the products snapshot onto a state whose category is FOUND. Anything else
+ *  (loading, missing, failed) shows no product UI at all. */
+function withProducts(s: S, page: CollectionQueryState<Row> = products.getState()): S {
+  const found = s.found;
+  const items = found ? page.items : [];
+  const loading = page.status === "idle" || page.status === "loading";
+  return {
+    ...s,
+    products: items,
+    productsCursor: found && !page.pageError && !page.loadingMore ? page.nextCursor : "",
+    hideProducts: items.length === 0,
+    hideProductsLoading: !(found && loading && items.length === 0),
+    productsNotErrored: !(found && page.status === "error"),
+    productsNoPageError: !(found && page.pageError),
+    noEmpty: !(found && page.status === "ready" && items.length === 0),
+    productsMessage: !found ? ""
+      : page.status === "error" || page.pageError ? "Products couldn't load. Pull to refresh to try again."
+        : page.status === "ready" && items.length === 0 ? "No products in this category yet." : "",
+  };
+}
+
+const NO_PRODUCTS = { products: [], productsCursor: "", hideProducts: true, hideProductsLoading: true,
+  productsNotErrored: true, productsNoPageError: true, noEmpty: true, productsMessage: "" };
+
+const initial: S = { status: "loading", name: "", subtitle: "", description: "", loadId: 0, ...NO_PRODUCTS, ...presence("loading") };
+
+/** The category header for `id`: V3 category first, V1 collection as the fallback. */
+async function readCategory(id: string): Promise<Pick<S, "name" | "subtitle" | "description">> {
+  try {
+    const c = (await getStoreCategory(id)).category;
+    if (c?.id || c?.name) return { name: c.name || "Category", subtitle: categoryCount(c), description: c.description || "" };
+  } catch { /* fall through to V1 */ }
+  const res = await getCollection(id);
+  const c = (((res as unknown as { collection?: WixCollection }).collection) ?? (res as unknown as WixCollection)) as unknown as {
+    name?: string; numberOfProducts?: number; description?: string;
+  };
+  const n = c.numberOfProducts;
+  return {
+    name: c.name || "Collection",
+    subtitle: n != null ? `${n} ${n === 1 ? "product" : "products"}` : "",
+    description: c.description || "",
+  };
+}
+
+const svc = defineService<S, {
+  load: (s: S) => Promise<S | undefined>;
+  productsChanged: (s: S) => S | undefined;
+  loadMoreProducts: (s: S) => Promise<undefined>;
+  retryProducts: (s: S) => Promise<undefined>;
+}>("spacesCollectionDetail", {
+  state: initial,
+  // A cold boot must not paint another category's products from last run's snapshot.
+  notHydrated: ["products", "productsCursor", "hideProducts", "hideProductsLoading", "productsNotErrored", "productsNoPageError", "noEmpty", "productsMessage", "loadId"],
   actions: {
     load: async (s) => {
+      const run = ++loadId;
       const id = detailInputId();
-      if (!id) return { ...s, status: "ready", ...presence("missing") };
-      try {
-        const res = await getStoreCategory(id);
-        const c = res.category;
-        if (c?.id || c?.name) {
-          return {
-            status: "ready",
-            name: c.name || "Category",
-            subtitle: categoryCount(c),
-            description: c.description || "",
-            ...presence("found"),
-          };
-        }
-      } catch { /* fall through to V1 */ }
+      if (!id) return { ...s, ...NO_PRODUCTS, loadId: run, status: "ready", ...presence("missing") };
+      let header: Pick<S, "name" | "subtitle" | "description">;
       try {
-        const res = await getCollection(id);
-        const c = (((res as unknown as { collection?: WixCollection }).collection) ?? (res as unknown as WixCollection)) as unknown as {
-          name?: string; numberOfProducts?: number; description?: string;
-        };
-        const n = c.numberOfProducts;
-        return {
-          status: "ready",
-          name: c.name || "Collection",
-          subtitle: n != null ? `${n} ${n === 1 ? "product" : "products"}` : "",
-          description: c.description || "",
-          ...presence("found"),
-        };
+        header = await readCategory(id);
       } catch (e) {
-        return { ...s, status: "ready", ...presenceAfterError(e) };
+        if (run !== loadId) return undefined;
+        return { ...s, ...NO_PRODUCTS, loadId: run, status: "ready", ...presenceAfterError(e) };
       }
+      // A newer load (onAppear after the boot load, pull-to-refresh) owns the screen now.
+      if (run !== loadId) return undefined;
+      categoryId = id;
+      // Starts the first page; its snapshots land through `productsChanged`, which ignores
+      // them until THIS state (stamped `run`) is committed. The "loading" snapshot is read
+      // synchronously below, so the header paints with the products skeleton under it.
+      void products.query({});
+      return withProducts({ ...s, ...header, loadId: run, status: "ready", ...presence("found") });
     },
+    productsChanged: (s) => (s.loadId === loadId && s.found ? withProducts(s) : undefined),
+    loadMoreProducts: async () => { await products.loadMore(); return undefined; },
+    retryProducts: async () => { await products.retry(); return undefined; },
   },
 });
 svc.load();