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

package/dist/index.d.cts

@@ -1681,6 +1681,15 @@ interface UseSparePartsOptions {
      * parts list need different languages. Set this when they diverge.
      */
     machineLanguage?: string;
+    /**
+     * Extra languages to try when the slug does not resolve in `machineLanguage`.
+     *
+     * A slug resolves only in the language it was authored in, so a tree that is
+     * only half-translated has machines reachable by an NL slug but not an EN
+     * one. `machineLanguage` and `language` are always tried first; list the
+     * shop's other locales here to cover the rest. Order is the try order.
+     */
+    machineLanguages?: string[];
     /** Tax zone for price calculation. */
     taxZone?: string;
     /** Active user — drives `userId` scoping and contact/customer pricing. */
@@ -1749,6 +1758,14 @@ interface UseSparePartsReturn {
     fetchParts: () => Promise<void>;
     /** Navigate to a page. */
     goToPage: (page: number) => void;
+    /**
+     * The slug resolved in none of the candidate languages.
+     *
+     * Distinct from "resolved but has no parts": this node does not exist, and a
+     * host that renders the usual empty listing for it shows a page built
+     * entirely from the URL. Always `false` in controlled mode.
+     */
+    notFound: boolean;
 }
 /**
  * useSpareParts — fetch and paginate a machine node's spare-parts list.
@@ -4292,6 +4309,16 @@ interface MachineGridProps {
     rootTitle?: string;
     /** Language the machine tree is authored in (usually EN). Defaults to `'EN'`. */
     machineLanguage?: string;
+    /**
+     * Other languages the tree may be authored in, tried in order when a slug
+     * does not resolve in `machineLanguage`.
+     *
+     * A slug resolves only in its own language, so a half-translated tree lists a
+     * machine by its NL slug and then cannot open it with `language: 'EN'`. Pass
+     * the shop's locales here; `machineLanguage` and the storefront `language`
+     * are always tried first (PWP-993).
+     */
+    machineLanguages?: string[];
     listing: MachineListingState;
     onListingChange: (next: MachineListingState) => void;
     graphqlClient?: GraphQLClient;
@@ -4331,9 +4358,19 @@ interface MachineGridProps {
     filtersLabels?: Record<string, string>;
     toolbarLabels?: Record<string, string>;
     /**
-     * Labels for the machine side of the grid. Keys read here: `loading` and
-     * `noMachines`. The same object is passed to each `MachineCard` as its
-     * `labels`, which reads `viewMachine` — so all three keys belong in it.
+     * Labels for the machine side of the grid.
+     *
+     * Keys read here: `loading`, `noMachines`, `machineNotFound`,
+     * `quantityInMachine` and `searchParts`. The same object is passed to each
+     * `MachineCard` as its `labels`, which reads `viewMachine` — so all six keys
+     * belong in it.
+     *
+     * `quantityInMachine` and `searchParts` used to be read from `toolbarLabels`,
+     * which is forwarded verbatim to `GridToolbar`: a shop that translated its
+     * toolbar dictionary properly still got "Qty in machine" and "Search parts…"
+     * in English, because those keys belong to no toolbar (PWP-995a). They are
+     * still read from `toolbarLabels` as a fallback so existing hosts keep
+     * working.
      */
     machineCardLabels?: Record<string, string>;
     /**

package/dist/index.d.ts

@@ -1681,6 +1681,15 @@ interface UseSparePartsOptions {
      * parts list need different languages. Set this when they diverge.
      */
     machineLanguage?: string;
+    /**
+     * Extra languages to try when the slug does not resolve in `machineLanguage`.
+     *
+     * A slug resolves only in the language it was authored in, so a tree that is
+     * only half-translated has machines reachable by an NL slug but not an EN
+     * one. `machineLanguage` and `language` are always tried first; list the
+     * shop's other locales here to cover the rest. Order is the try order.
+     */
+    machineLanguages?: string[];
     /** Tax zone for price calculation. */
     taxZone?: string;
     /** Active user — drives `userId` scoping and contact/customer pricing. */
@@ -1749,6 +1758,14 @@ interface UseSparePartsReturn {
     fetchParts: () => Promise<void>;
     /** Navigate to a page. */
     goToPage: (page: number) => void;
+    /**
+     * The slug resolved in none of the candidate languages.
+     *
+     * Distinct from "resolved but has no parts": this node does not exist, and a
+     * host that renders the usual empty listing for it shows a page built
+     * entirely from the URL. Always `false` in controlled mode.
+     */
+    notFound: boolean;
 }
 /**
  * useSpareParts — fetch and paginate a machine node's spare-parts list.
@@ -4292,6 +4309,16 @@ interface MachineGridProps {
     rootTitle?: string;
     /** Language the machine tree is authored in (usually EN). Defaults to `'EN'`. */
     machineLanguage?: string;
+    /**
+     * Other languages the tree may be authored in, tried in order when a slug
+     * does not resolve in `machineLanguage`.
+     *
+     * A slug resolves only in its own language, so a half-translated tree lists a
+     * machine by its NL slug and then cannot open it with `language: 'EN'`. Pass
+     * the shop's locales here; `machineLanguage` and the storefront `language`
+     * are always tried first (PWP-993).
+     */
+    machineLanguages?: string[];
     listing: MachineListingState;
     onListingChange: (next: MachineListingState) => void;
     graphqlClient?: GraphQLClient;
@@ -4331,9 +4358,19 @@ interface MachineGridProps {
     filtersLabels?: Record<string, string>;
     toolbarLabels?: Record<string, string>;
     /**
-     * Labels for the machine side of the grid. Keys read here: `loading` and
-     * `noMachines`. The same object is passed to each `MachineCard` as its
-     * `labels`, which reads `viewMachine` — so all three keys belong in it.
+     * Labels for the machine side of the grid.
+     *
+     * Keys read here: `loading`, `noMachines`, `machineNotFound`,
+     * `quantityInMachine` and `searchParts`. The same object is passed to each
+     * `MachineCard` as its `labels`, which reads `viewMachine` — so all six keys
+     * belong in it.
+     *
+     * `quantityInMachine` and `searchParts` used to be read from `toolbarLabels`,
+     * which is forwarded verbatim to `GridToolbar`: a shop that translated its
+     * toolbar dictionary properly still got "Qty in machine" and "Search parts…"
+     * in English, because those keys belong to no toolbar (PWP-995a). They are
+     * still read from `toolbarLabels` as a fallback so existing hosts keep
+     * working.
      */
     machineCardLabels?: Record<string, string>;
     /**

package/dist/index.js

@@ -2762,6 +2762,41 @@ 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 {
+      const machine = await fetchOne(language);
+      if (machine !== null && machine !== void 0) return { machine, language };
+    } catch (error) {
+      if (!isMachineNotFound(error)) throw error;
+    }
+  }
+  return null;
+}
+
+// src/composables/react/useSpareParts.ts
 var inflightFetches3 = /* @__PURE__ */ new Set();
 var STOREFRONT_STATUSES = [
   ProductStatus.A,
@@ -2778,6 +2813,8 @@ function useSpareParts(options) {
   const [itemsFound, setItemsFound] = useState(0);
   const [internalLoading, setInternalLoading] = useState(false);
   const [internalPage, setInternalPage] = useState(1);
+  const [notFound, setNotFound] = useState(false);
+  const machineLanguagesKey = (options.machineLanguages ?? []).join(",");
   const currentPage = options.page ?? internalPage;
   const [totalPages, setTotalPages] = useState(1);
   const fetchIdRef = useRef(0);
@@ -2843,17 +2880,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);
@@ -2895,6 +2950,7 @@ function useSpareParts(options) {
     options.term,
     options.language,
     options.machineLanguage,
+    machineLanguagesKey,
     options.taxZone,
     options.companyId,
     options.textFilters,
@@ -2915,6 +2971,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 ?? []),
@@ -2940,7 +2997,8 @@ function useSpareParts(options) {
     currentPage,
     totalPages,
     fetchParts,
-    goToPage
+    goToPage,
+    notFound: !isControlled && notFound
   };
 }
 var inflightFetches4 = /* @__PURE__ */ new Set();
@@ -10484,13 +10542,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,
@@ -10514,6 +10573,7 @@ function MachineGrid(rawProps) {
     onMachineChange: setMachine
   });
   const machineName = machine ? getLocalizedValue(machine.name, machineLanguage) : slugToLabel(currentSlug);
+  const machineLabel = (key, fallback) => rawProps.machineCardLabels?.[key] ?? rawProps.toolbarLabels?.[key] ?? fallback;
   const partProducts = useMemo(
     () => displayParts.map((p) => p.product).filter(Boolean),
     [displayParts]
@@ -10588,6 +10648,12 @@ function MachineGrid(rawProps) {
     ] });
   }
   const hasParts = itemsFound > 0 || partProducts.length > 0;
+  if (notFound && !partsLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: rawProps.className, children: [
+      /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "propeller-breadcrumbs mb-6", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground-subtle", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: basePath, className: "hover:text-primary", children: rawProps.rootTitle ?? "Machines" }) }) }) }),
+      /* @__PURE__ */ jsx("p", { className: "py-12 text-center text-foreground-subtle", children: machineLabel("machineNotFound", "This machine could not be found.") })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: rawProps.className, children: [
     /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "propeller-breadcrumbs mb-6", children: /* @__PURE__ */ jsxs("ol", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground-subtle", children: [
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: basePath, className: "hover:text-primary", children: rawProps.rootTitle ?? "Machines" }) }),
@@ -10640,7 +10706,9 @@ function MachineGrid(rawProps) {
           {
             defaultValue: term,
             onSubmit: submitSearch,
-            labels: rawProps.toolbarLabels
+            searchLabel: machineLabel("searchParts", "Search parts\u2026"),
+            searchAriaLabel: machineLabel("searchParts", "Search parts"),
+            buttonLabel: getLabel(rawProps.toolbarLabels, "search", "Search")
           },
           term
         ),
@@ -10691,7 +10759,7 @@ function MachineGrid(rawProps) {
               const qty = quantityBySku.get(product.sku);
               if (!qty) return null;
               return /* @__PURE__ */ 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
               ] });
@@ -10723,8 +10791,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"
       }
     ),
@@ -10734,7 +10802,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
       }
     )
   ] });