@propeller-commerce/propeller-v2-react-ui 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -8,6 +8,43 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.23.0] - 2026-09-24
+
+### Fixed
+
+- **A machine listed in one language could not be opened.** 0.21.0 stopped the
+  listing from narrowing to a single language, so an NL-only installation
+  appears in an EN tree and is linked by its NL slug — but `machine(slug:)`
+  resolves a slug **only** in the language it was authored in, so following
+  that link asked for `machine(slug: "<NL slug>", language: "EN")` and got
+  `SPARE_PARTS_MACHINE_NOT_FOUND_ERROR`. The page then showed a title derived
+  from the slug, no parts and no error: the bug moved one click deeper instead
+  of going away. `useSpareParts` now tries the tree language, then the
+  storefront language, then any locales given in the new `machineLanguages`
+  option, and upper-cases each (the API matches case exactly — `nl` misses
+  where `NL` hits). A slug that resolves in none of them sets the new
+  `notFound` flag, and `MachineGrid` renders "This machine could not be found."
+  instead of an empty listing. A fully-translated shop still costs exactly one
+  request, and a non-"not found" failure is never retried or reported as a
+  missing machine. (PWP-993)
+
+- **"Qty in machine" and "Search parts…" stayed English in a translated shop.**
+  Both were read from `toolbarLabels`, which is forwarded verbatim to
+  `GridToolbar` — so they belonged to no toolbar dictionary, and a shop that
+  translated its `GridToolbar` keys properly still got English. They now come
+  from `machineCardLabels` (the grid's own label bag, alongside `loading`,
+  `noMachines` and the new `machineNotFound`), falling back to `toolbarLabels`
+  so hosts that already set them keep working. (PWP-995a)
+
+### Added
+
+- `MachineGrid.machineLanguages` / `useSpareParts.machineLanguages` — the
+  locales to try when a machine slug does not resolve in the tree language.
+- `useSpareParts().notFound` — the slug resolved in none of the candidate
+  languages, as distinct from "resolved but has no parts".
+- `machineCardLabels.machineNotFound` — copy for that state.
+
+
 ## [0.22.0] - 2026-09-24
 
 ### Fixed

package/dist/index.cjs

@@ -2782,6 +2782,40 @@ function useQuickOrder(options) {
   );
   return { submitting, error, searchProducts, submit };
 }
+
+// src/composables/shared/utils/machineLanguage.ts
+var MACHINE_NOT_FOUND = "SPARE_PARTS_MACHINE_NOT_FOUND_ERROR";
+function isMachineNotFound(error) {
+  const entries = error?.errors;
+  if (!Array.isArray(entries)) return false;
+  return entries.some(
+    (e) => e?.extensions?.code === MACHINE_NOT_FOUND || /no machine found for slug and language/i.test(e?.message ?? "")
+  );
+}
+function machineLanguageCandidates(machineLanguage, language, extra) {
+  const ordered = [machineLanguage, language, ...extra ?? []];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const raw of ordered) {
+    const value = raw?.trim().toUpperCase();
+    if (!value || seen.has(value)) continue;
+    seen.add(value);
+    out.push(value);
+  }
+  return out;
+}
+async function resolveMachineAcrossLanguages(candidates, fetchOne) {
+  for (const language of candidates) {
+    try {
+      return { machine: await fetchOne(language), language };
+    } catch (error) {
+      if (!isMachineNotFound(error)) throw error;
+    }
+  }
+  return null;
+}
+
+// src/composables/react/useSpareParts.ts
 var inflightFetches3 = /* @__PURE__ */ new Set();
 var STOREFRONT_STATUSES = [
   propellerSdkV2.ProductStatus.A,
@@ -2798,6 +2832,8 @@ function useSpareParts(options) {
   const [itemsFound, setItemsFound] = React6.useState(0);
   const [internalLoading, setInternalLoading] = React6.useState(false);
   const [internalPage, setInternalPage] = React6.useState(1);
+  const [notFound, setNotFound] = React6.useState(false);
+  const machineLanguagesKey = (options.machineLanguages ?? []).join(",");
   const currentPage = options.page ?? internalPage;
   const [totalPages, setTotalPages] = React6.useState(1);
   const fetchIdRef = React6.useRef(0);
@@ -2863,17 +2899,35 @@ function useSpareParts(options) {
       const filterAvailableAttributeInput = {
         isSearchable: true
       };
-      const machine = await service.getMachine({
-        slug: options.slug,
-        // The machine tree's language, NOT the parts' — see `machineLanguage`.
-        language: options.machineLanguage ?? options.language,
-        sparePartsMachineProductSearchInput,
-        filterAvailableAttributeInput,
-        priceCalculateProductInput,
-        imageSearchFilters: options.configuration?.imageSearchFiltersGrid,
-        imageVariantFilters: options.configuration?.imageVariantFiltersMedium
-      });
+      const resolved = await resolveMachineAcrossLanguages(
+        machineLanguageCandidates(
+          options.machineLanguage,
+          options.language,
+          options.machineLanguages
+        ),
+        (language) => service.getMachine({
+          slug: options.slug,
+          // The machine tree's language, NOT the parts' — see `machineLanguage`.
+          language,
+          sparePartsMachineProductSearchInput,
+          filterAvailableAttributeInput,
+          priceCalculateProductInput,
+          imageSearchFilters: options.configuration?.imageSearchFiltersGrid,
+          imageVariantFilters: options.configuration?.imageVariantFiltersMedium
+        })
+      );
       if (thisId !== fetchIdRef.current) return;
+      if (!resolved) {
+        setNotFound(true);
+        setInternalParts([]);
+        setChildMachines([]);
+        setItemsFound(0);
+        options.onItemsFoundChange?.(0);
+        setTotalPages(1);
+        return;
+      }
+      setNotFound(false);
+      const machine = resolved.machine;
       const partsResponse = machine?.sparePartProducts;
       const items = partsResponse?.items ?? [];
       setInternalParts(items);
@@ -2915,6 +2969,7 @@ function useSpareParts(options) {
     options.term,
     options.language,
     options.machineLanguage,
+    machineLanguagesKey,
     options.taxZone,
     options.companyId,
     options.textFilters,
@@ -2935,6 +2990,7 @@ function useSpareParts(options) {
     options.term,
     options.language,
     options.machineLanguage,
+    machineLanguagesKey,
     options.companyId,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     JSON.stringify(options.textFilters ?? []),
@@ -2960,7 +3016,8 @@ function useSpareParts(options) {
     currentPage,
     totalPages,
     fetchParts,
-    goToPage
+    goToPage,
+    notFound: !isControlled && notFound
   };
 }
 var inflightFetches4 = /* @__PURE__ */ new Set();
@@ -10504,13 +10561,14 @@ function MachineGrid(rawProps) {
     // node query threads through useSpareParts.
     imageVariantFilters: configuration?.imageVariantFiltersMedium
   });
-  const { displayParts, childMachines, isLoading: partsLoading, currentPage, totalPages } = useSpareParts({
+  const { displayParts, childMachines, isLoading: partsLoading, currentPage, totalPages, notFound } = useSpareParts({
     graphqlClient: props.graphqlClient,
     // Idle at the root (no slug).
     slug: isRoot ? void 0 : currentSlug,
     term: term || void 0,
     language,
     machineLanguage,
+    machineLanguages: rawProps.machineLanguages,
     taxZone: props.taxZone,
     user: props.user,
     companyId: props.companyId,
@@ -10534,6 +10592,7 @@ function MachineGrid(rawProps) {
     onMachineChange: setMachine
   });
   const machineName = machine ? propellerV2CoreUi.getLocalizedValue(machine.name, machineLanguage) : slugToLabel(currentSlug);
+  const machineLabel = (key, fallback) => rawProps.machineCardLabels?.[key] ?? rawProps.toolbarLabels?.[key] ?? fallback;
   const partProducts = React6.useMemo(
     () => displayParts.map((p) => p.product).filter(Boolean),
     [displayParts]
@@ -10608,6 +10667,12 @@ function MachineGrid(rawProps) {
     ] });
   }
   const hasParts = itemsFound > 0 || partProducts.length > 0;
+  if (notFound && !partsLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rawProps.className, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: "propeller-breadcrumbs mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: basePath, className: "hover:text-primary", children: rawProps.rootTitle ?? "Machines" }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-12 text-center text-foreground-subtle", children: machineLabel("machineNotFound", "This machine could not be found.") })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rawProps.className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: "propeller-breadcrumbs mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground-subtle", children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: basePath, className: "hover:text-primary", children: rawProps.rootTitle ?? "Machines" }) }),
@@ -10660,7 +10725,9 @@ function MachineGrid(rawProps) {
           {
             defaultValue: term,
             onSubmit: submitSearch,
-            labels: rawProps.toolbarLabels
+            searchLabel: machineLabel("searchParts", "Search parts\u2026"),
+            searchAriaLabel: machineLabel("searchParts", "Search parts"),
+            buttonLabel: propellerV2CoreUi.getLabel(rawProps.toolbarLabels, "search", "Search")
           },
           term
         ),
@@ -10711,7 +10778,7 @@ function MachineGrid(rawProps) {
               const qty = quantityBySku.get(product.sku);
               if (!qty) return null;
               return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-spare-part__quantity text-sm text-foreground-subtle", children: [
-                rawProps.toolbarLabels?.quantityInMachine ?? "Qty in machine",
+                machineLabel("quantityInMachine", "Qty in machine"),
                 ": ",
                 qty
               ] });
@@ -10743,8 +10810,8 @@ function MachinePartsSearch(props) {
         onKeyDown: (e) => {
           if (e.key === "Enter") submit();
         },
-        placeholder: props.labels?.searchParts ?? "Search parts\u2026",
-        "aria-label": props.labels?.searchParts ?? "Search parts",
+        placeholder: props.searchLabel,
+        "aria-label": props.searchAriaLabel,
         className: "w-full rounded border border-border bg-background px-3 py-2"
       }
     ),
@@ -10754,7 +10821,7 @@ function MachinePartsSearch(props) {
         type: "button",
         onClick: submit,
         className: "rounded bg-primary px-4 py-2 text-primary-foreground",
-        children: props.labels?.search ?? "Search"
+        children: props.buttonLabel
       }
     )
   ] });