@propeller-commerce/propeller-v2-react-ui 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,78 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
8
8
  between minor versions; breaking changes are called out below and in
9
9
  [MIGRATION.md](./MIGRATION.md).
10
10
 
11
+ ## [0.14.0] - 2026-08-05
12
+
13
+ ### Added
14
+
15
+ - **`hideHeader` and `flat` on `<OrderList>` and
16
+ `<PurchaseAuthorizationRequests>`** — for embedding a list inside a host's
17
+ own card. `hideHeader` drops the table's column-header row, redundant once
18
+ a card names what it contains and shows three columns. `flat` drops the
19
+ component's own background, border, shadow and rounded corners, which
20
+ otherwise nest a box inside the host's box. On `<OrderList>` the empty
21
+ state honours `flat` too, so a card with no results does not draw a stray
22
+ panel.
23
+
24
+ - **`limit`, `columns`, `columnConfig`, `showActions` and `hideTitle` on
25
+ `<PurchaseAuthorizationRequests>`** — the component rendered a fixed
26
+ five-column table (date, quantity, total, requested by, actions) and its
27
+ own heading, so it could not be reduced to a summary. `columns` selects
28
+ which of those render and in what order, `columnConfig` overrides their
29
+ header labels, `showActions` hides the accept/delete buttons, `hideTitle`
30
+ suppresses the component's own `<h2>` when the host already has one, and
31
+ `limit` caps the list to the most recently modified — mirroring the prop
32
+ `<FavoriteLists>` already carries.
33
+
34
+ ### Notes
35
+
36
+ Every prop above is additive and defaults to current behaviour: an existing
37
+ consumer that passes none of them renders exactly as it did in 0.13.0. In
38
+ particular `<PurchaseAuthorizationRequests>` still lists requests in the
39
+ order the API returned them; the most-recent-first sort applies only when
40
+ `limit` is set, so the rows that survive the slice are the newest.
41
+
42
+ ## [0.13.0] - 2026-08-05
43
+
44
+ ### Added
45
+
46
+ - **Availability filter on `<GridFilters>`** — an opt-in section below the
47
+ price block with two checkboxes, In stock and Out of stock, wired to the
48
+ server-side stock filter the SDK exposes on `CategoryProductSearchInput`.
49
+ New props: `showAvailabilityFilter` (defaults `false`),
50
+ `activeAvailability` and `onAvailabilityChange`. Nothing selected sends no
51
+ filter, so the default listing is unchanged.
52
+
53
+ Selecting both buckets means "in stock or out of stock", which is every
54
+ product. The filter has no OR operator and the union is the unfiltered set
55
+ anyway, so both-selected sends no filter — the same as selecting neither.
56
+ The checkboxes stay ticked; only the request collapses.
57
+
58
+ The mapping lives in `propeller-v2-core-ui`'s `buildInventoryFilter`, so
59
+ this package never restates the operator semantics. Requires
60
+ `propeller-v2-core-ui` >= 0.5.0 and `propeller-sdk-v2` >= 0.15.0, where the
61
+ inventory filter was added.
62
+
63
+ - **`availability` and `onAvailabilityFilterRemove` on `<GridToolbar>`** —
64
+ the active-filter row now renders one removable chip per selected bucket,
65
+ so a stock-filtered listing shows why its results are narrowed and can be
66
+ undone from the results area. One chip per bucket, matching the attribute
67
+ chips rather than the price chip which covers a whole range. The row's
68
+ active check accounts for availability, so it appears when availability is
69
+ the only active filter.
70
+
71
+ - **`availability` on `<ProductGrid>`** — forwards the selection to
72
+ `useProductSearch`, which applies it to both the grid fetch and the
73
+ typeahead preview. Filtering only the grid would let the preview offer
74
+ products the grid then hides.
75
+
76
+ ### Changed
77
+
78
+ - The availability section is hidden for anonymous visitors in a semi-closed
79
+ portal, the same rule the price filter already follows. Hosts should pass
80
+ their own "show stock" setting through `showAvailabilityFilter`: filtering
81
+ by stock reads as broken when the cards display no stock to filter on.
82
+
11
83
  ## [0.12.0] - 2026-07-31
12
84
 
13
85
  ### Added
package/dist/index.cjs CHANGED
@@ -2261,7 +2261,8 @@ function useProductSearch(options) {
2261
2261
  userKey,
2262
2262
  JSON.stringify(options.textFilters ?? []),
2263
2263
  options.priceFilterMin ?? "",
2264
- options.priceFilterMax ?? ""
2264
+ options.priceFilterMax ?? "",
2265
+ JSON.stringify(options.availability ?? [])
2265
2266
  ].join("|");
2266
2267
  if (inflightFetches2.has(inflightKey)) {
2267
2268
  fetchIdRef.current--;
@@ -2303,6 +2304,7 @@ function useProductSearch(options) {
2303
2304
  }
2304
2305
  ] : [];
2305
2306
  const priceFilter = options.priceFilterMin !== void 0 || options.priceFilterMax !== void 0 ? { from: options.priceFilterMin ?? 0, to: options.priceFilterMax ?? 999999 } : void 0;
2307
+ const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability);
2306
2308
  const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
2307
2309
  const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
2308
2310
  const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
@@ -2325,6 +2327,7 @@ function useProductSearch(options) {
2325
2327
  ...options.brand && { manufacturers: [options.brand] },
2326
2328
  ...options.textFilters?.length && { textFilters: options.textFilters },
2327
2329
  ...priceFilter && { price: priceFilter },
2330
+ ...inventoryFilter && { inventory: inventoryFilter },
2328
2331
  ...sortInputs.length && { sortInputs },
2329
2332
  ...options.companyId && { companyId: options.companyId },
2330
2333
  ...userId !== void 0 && { userId },
@@ -2401,6 +2404,7 @@ function useProductSearch(options) {
2401
2404
  options.textFilters,
2402
2405
  options.priceFilterMin,
2403
2406
  options.priceFilterMax,
2407
+ options.availability,
2404
2408
  options.sortField,
2405
2409
  options.sortOrder,
2406
2410
  options.companyId,
@@ -2440,6 +2444,7 @@ function useProductSearch(options) {
2440
2444
  const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
2441
2445
  const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
2442
2446
  const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
2447
+ const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability);
2443
2448
  const categoryProductSearchInput = {
2444
2449
  language,
2445
2450
  page: 1,
@@ -2451,6 +2456,7 @@ function useProductSearch(options) {
2451
2456
  propellerSdkV2.ProductStatus.S
2452
2457
  ],
2453
2458
  hidden: false,
2459
+ ...inventoryFilter && { inventory: inventoryFilter },
2454
2460
  term,
2455
2461
  searchFields: [
2456
2462
  {
@@ -2530,6 +2536,7 @@ function useProductSearch(options) {
2530
2536
  JSON.stringify(options.textFilters),
2531
2537
  options.priceFilterMin,
2532
2538
  options.priceFilterMax,
2539
+ options.availability,
2533
2540
  options.sortField,
2534
2541
  options.sortOrder,
2535
2542
  pageSize,
@@ -9052,6 +9059,7 @@ function ProductGrid(rawProps) {
9052
9059
  textFilters: props.textFilters,
9053
9060
  priceFilterMin: props.priceFilterMin,
9054
9061
  priceFilterMax: props.priceFilterMax,
9062
+ availability: props.availability,
9055
9063
  sortField: props.sortField,
9056
9064
  sortOrder: props.sortOrder,
9057
9065
  pageSize: props.pageSize,
@@ -9354,11 +9362,18 @@ function GridFilters(rawProps) {
9354
9362
  const [isPending, setIsPending] = React6.useState(() => false);
9355
9363
  const [appliedMin, setAppliedMin] = React6.useState(() => void 0);
9356
9364
  const [appliedMax, setAppliedMax] = React6.useState(() => void 0);
9365
+ const [availability, setAvailability] = React6.useState(
9366
+ () => [...props.activeAvailability || []]
9367
+ );
9357
9368
  function showPriceFilter() {
9358
9369
  const mode = props.portalMode || "open";
9359
9370
  if (mode === "open") return true;
9360
9371
  return !!props.user;
9361
9372
  }
9373
+ function showAvailability() {
9374
+ if (!props.showAvailabilityFilter) return false;
9375
+ return !propellerV2CoreUi.isContentHidden(props.portalMode, props.user);
9376
+ }
9362
9377
  function getFilterName(filter) {
9363
9378
  return filter?.attributeDescription?.name || "";
9364
9379
  }
@@ -9403,6 +9418,13 @@ function GridFilters(rawProps) {
9403
9418
  props.onFilterChange(filter, value);
9404
9419
  if (props.getSelectedFilters) props.getSelectedFilters();
9405
9420
  }
9421
+ function handleAvailabilityToggle(value, checked) {
9422
+ const next = checked ? [...availability, value] : availability.filter((v) => v !== value);
9423
+ setAvailability(next);
9424
+ setIsPending(true);
9425
+ if (props.onAvailabilityChange) props.onAvailabilityChange(next);
9426
+ if (props.getSelectedFilters) props.getSelectedFilters();
9427
+ }
9406
9428
  function handleMinChange(value) {
9407
9429
  const n = value > currentMax ? currentMax : value;
9408
9430
  setCurrentMin(n);
@@ -9476,11 +9498,16 @@ function GridFilters(rawProps) {
9476
9498
  setCurrentMin(props.priceMin || 0);
9477
9499
  setCurrentMax(props.priceMax || 9999);
9478
9500
  setExpandedFilters({});
9501
+ setAvailability([]);
9479
9502
  }, [props.clearSignal, props.priceMin, props.priceMax]);
9480
9503
  React6.useEffect(() => {
9481
9504
  if (!props.activeTextFilters) return;
9482
9505
  setSelectedFilters(props.activeTextFilters);
9483
9506
  }, [props.activeTextFilters]);
9507
+ React6.useEffect(() => {
9508
+ if (!props.activeAvailability) return;
9509
+ setAvailability([...props.activeAvailability]);
9510
+ }, [props.activeAvailability]);
9484
9511
  React6.useEffect(() => {
9485
9512
  if (props.activePriceMin === void 0 && props.activePriceMax === void 0) {
9486
9513
  setCurrentMin(props.priceMin || 0);
@@ -9580,6 +9607,40 @@ function GridFilters(rawProps) {
9580
9607
  " ",
9581
9608
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters__divider h-px bg-border-subtle" })
9582
9609
  ] }) : null,
9610
+ showAvailability() ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9611
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability space-y-3", children: [
9612
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-grid-filters__availability-title text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "availability", "Availability") }),
9613
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability-options space-y-1.5", children: [
9614
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
9615
+ /* @__PURE__ */ jsxRuntime.jsx(
9616
+ "input",
9617
+ {
9618
+ type: "checkbox",
9619
+ className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
9620
+ checked: availability.includes("in-stock"),
9621
+ disabled: !!props.isLoading,
9622
+ onChange: (e) => handleAvailabilityToggle("in-stock", e.target.checked)
9623
+ }
9624
+ ),
9625
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: propellerV2CoreUi.getLabel(props.labels, "inStock", "In stock") })
9626
+ ] }),
9627
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
9628
+ /* @__PURE__ */ jsxRuntime.jsx(
9629
+ "input",
9630
+ {
9631
+ type: "checkbox",
9632
+ className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
9633
+ checked: availability.includes("out-of-stock"),
9634
+ disabled: !!props.isLoading,
9635
+ onChange: (e) => handleAvailabilityToggle("out-of-stock", e.target.checked)
9636
+ }
9637
+ ),
9638
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: propellerV2CoreUi.getLabel(props.labels, "outOfStock", "Out of stock") })
9639
+ ] })
9640
+ ] })
9641
+ ] }),
9642
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters__divider h-px bg-border-subtle" })
9643
+ ] }) : null,
9583
9644
  props.filters.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-grid-filters__empty text-sm text-foreground-subtle italic", children: propellerV2CoreUi.getLabel(props.labels, "noFiltersAvailable", "No filters available") }) : null,
9584
9645
  getFilteredFilters()?.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__group border-b border-border-subtle pb-3 last:border-b-0", "data-expanded": isExpanded(getFilterName(filter)) ? "true" : "false", children: [
9585
9646
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9755,6 +9816,8 @@ var DEFAULT_LABELS = {
9755
9816
  results: "results",
9756
9817
  perPage: " per page",
9757
9818
  price: "Price",
9819
+ inStock: "In stock",
9820
+ outOfStock: "Out of stock",
9758
9821
  switchToList: "Switch to list view",
9759
9822
  switchToGrid: "Switch to grid view"
9760
9823
  };
@@ -9783,7 +9846,8 @@ function GridToolbar(rawProps) {
9783
9846
  const text = props.activeTextFilters || {};
9784
9847
  const hasText = Object.keys(text).some((k) => (text[k] || []).length > 0);
9785
9848
  const hasPrice = props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0;
9786
- return hasText || hasPrice;
9849
+ const hasAvailability = (props.availability || []).length > 0;
9850
+ return hasText || hasPrice || hasAvailability;
9787
9851
  }
9788
9852
  function getActiveFilterBadges() {
9789
9853
  const text = props.activeTextFilters || {};
@@ -9801,6 +9865,9 @@ function GridToolbar(rawProps) {
9801
9865
  function isPriceSortDisabled() {
9802
9866
  return propellerV2CoreUi.isContentHidden(props.portalMode, props.user);
9803
9867
  }
9868
+ function getAvailabilityLabel(value) {
9869
+ return value === "in-stock" ? getLabel56("inStock") : getLabel56("outOfStock");
9870
+ }
9804
9871
  function handleSortFieldChange(field) {
9805
9872
  setCurrentSortField(field);
9806
9873
  if (props.onSortChange) props.onSortChange(field, currentSortOrder);
@@ -9974,6 +10041,20 @@ function GridToolbar(rawProps) {
9974
10041
  ]
9975
10042
  }
9976
10043
  ) : null,
10044
+ (props.availability || []).map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
10045
+ "span",
10046
+ {
10047
+ className: "propeller-grid-toolbar__filter-badge propeller-grid-toolbar__filter-badge--availability inline-flex items-center gap-1 cursor-pointer px-2.5 py-0.5 rounded-full text-xs font-semibold border border-input bg-background hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors",
10048
+ onClick: (event) => {
10049
+ if (props.onAvailabilityFilterRemove) props.onAvailabilityFilterRemove(value);
10050
+ },
10051
+ children: [
10052
+ getAvailabilityLabel(value),
10053
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-toolbar__filter-badge-remove", children: "\xD7" })
10054
+ ]
10055
+ },
10056
+ value
10057
+ )),
9977
10058
  getActiveFilterBadges()?.map((badge) => /* @__PURE__ */ jsxRuntime.jsxs(
9978
10059
  "span",
9979
10060
  {
@@ -13825,9 +13906,9 @@ function OrderList(rawProps) {
13825
13906
  )
13826
13907
  ] })
13827
13908
  ] }) : null,
13828
- !loading || orders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: orders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-list__results bg-card rounded-container shadow overflow-hidden", children: [
13909
+ !loading || orders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: orders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-order-list__results${props.flat ? "" : " bg-card rounded-container shadow"} overflow-hidden`, children: [
13829
13910
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "propeller-order-list__table min-w-full divide-y divide-border", children: [
13830
- /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "propeller-order-list__thead bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
13911
+ !props.hideHeader ? /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "propeller-order-list__thead bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
13831
13912
  "th",
13832
13913
  {
13833
13914
  "data-column": col,
@@ -13835,7 +13916,7 @@ function OrderList(rawProps) {
13835
13916
  children: getColumnLabel(col)
13836
13917
  },
13837
13918
  col
13838
- )) }) }),
13919
+ )) }) }) : null,
13839
13920
  /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "propeller-order-list__tbody bg-card divide-y divide-border", children: orders?.map((order) => /* @__PURE__ */ jsxRuntime.jsx(
13840
13921
  "tr",
13841
13922
  {
@@ -13942,7 +14023,7 @@ function OrderList(rawProps) {
13942
14023
  ) })
13943
14024
  ] })
13944
14025
  ] }) : null
13945
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-list__empty bg-card rounded-container shadow p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-4", children: propellerV2CoreUi.getLabel(props.labels, "noOrders", "No orders found.") }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-list__loading p-8 text-center text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "loading", "Loading orders...") })
14026
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-order-list__empty${props.flat ? "" : " bg-card rounded-container shadow"} p-8 text-center`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-4", children: propellerV2CoreUi.getLabel(props.labels, "noOrders", "No orders found.") }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-list__loading p-8 text-center text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "loading", "Loading orders...") })
13946
14027
  ] });
13947
14028
  }
13948
14029
  var OrderList_default = OrderList;
@@ -17109,6 +17190,10 @@ function PurchaseAuthorizationConfigurator(rawProps) {
17109
17190
  var PurchaseAuthorizationConfigurator_default = PurchaseAuthorizationConfigurator;
17110
17191
  function PurchaseAuthorizationRequests(rawProps) {
17111
17192
  const props = useInfraProps(rawProps);
17193
+ const showActions = props.showActions !== false;
17194
+ const columns = (props.columns || ["date", "quantity", "total", "requestedBy", "action"]).filter(
17195
+ (col) => showActions || col !== "action"
17196
+ );
17112
17197
  const {
17113
17198
  carts,
17114
17199
  loading,
@@ -17142,6 +17227,17 @@ function PurchaseAuthorizationRequests(rawProps) {
17142
17227
  await handleDeleteRequest();
17143
17228
  setShowDeleteConfirm(false);
17144
17229
  };
17230
+ const displayedCarts = React6.useMemo(() => {
17231
+ if (props.limit && props.limit > 0) {
17232
+ const sorted = [...carts].sort((a, b) => {
17233
+ const dateA = new Date(a.lastModifiedAt || "").getTime();
17234
+ const dateB = new Date(b.lastModifiedAt || "").getTime();
17235
+ return dateB - dateA;
17236
+ });
17237
+ return sorted.slice(0, props.limit);
17238
+ }
17239
+ return carts;
17240
+ }, [carts, props.limit]);
17145
17241
  function formatDate(dateStr) {
17146
17242
  if (props.formatDate) return props.formatDate(dateStr);
17147
17243
  if (!dateStr) return "-";
@@ -17155,6 +17251,18 @@ function PurchaseAuthorizationRequests(rawProps) {
17155
17251
  if (props.formatPrice) return props.formatPrice(price);
17156
17252
  return propellerV2CoreUi.formatPrice(price, { symbol: props.currency ?? "\u20AC" });
17157
17253
  }
17254
+ const columnLabelKeys = {
17255
+ date: ["colDate", "Date"],
17256
+ quantity: ["colQuantity", "Quantity"],
17257
+ total: ["colTotal", "Total"],
17258
+ requestedBy: ["colRequestedBy", "Requested by"],
17259
+ action: ["colActions", "Actions"]
17260
+ };
17261
+ function getColumnLabel(col) {
17262
+ if (props.columnConfig?.[col]) return props.columnConfig[col];
17263
+ const [key, fallback] = columnLabelKeys[col] || [col, col];
17264
+ return propellerV2CoreUi.getLabel(props.labels, key, fallback);
17265
+ }
17158
17266
  function getProductName5(item) {
17159
17267
  const lang = props.language || "NL";
17160
17268
  const fromNames = propellerV2CoreUi.getLanguageString(item?.product?.names, lang, "");
@@ -17164,27 +17272,21 @@ function PurchaseAuthorizationRequests(rawProps) {
17164
17272
  return item?.product?.sku || "";
17165
17273
  }
17166
17274
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-purchase-authorization-requests ${props.className || ""}`, children: isAuthManager ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-purchase-authorization-requests__content space-y-4", children: [
17167
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-purchase-authorization-requests__title text-xl font-semibold", children: propellerV2CoreUi.getLabel(props.labels, "title", "Authorization Requests") }),
17275
+ !props.hideTitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-purchase-authorization-requests__title text-xl font-semibold", children: propellerV2CoreUi.getLabel(props.labels, "title", "Authorization Requests") }) : null,
17168
17276
  loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" }) }) : null,
17169
17277
  !loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17170
17278
  carts.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12 text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "empty", "No pending authorization requests") }) : null,
17171
- carts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-border bg-card shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-sm", children: [
17172
- /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted/50 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
17173
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "colDate", "Date") }),
17174
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "colQuantity", "Quantity") }),
17175
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "colTotal", "Total") }),
17176
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "colRequestedBy", "Requested by") }),
17177
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "colActions", "Actions") })
17178
- ] }) }),
17179
- /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: carts.map((cart, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-muted/30 transition-colors", children: [
17180
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-muted-foreground", children: formatDate(cart.lastModifiedAt ?? "") }),
17181
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: getTotalQuantity(cart) }),
17182
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 font-medium", children: formatPrice17(cart.total?.totalNet ?? 0) }),
17183
- /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-4 py-3", children: [
17279
+ carts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-purchase-authorization-requests__results overflow-x-auto${props.flat ? "" : " rounded-lg border border-border bg-card shadow-sm"}`, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-sm", children: [
17280
+ !props.hideHeader ? /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted/50 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left px-4 py-3 font-medium text-muted-foreground", children: getColumnLabel(col) }, col)) }) }) : null,
17281
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: displayedCarts.map((cart, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "hover:bg-muted/30 transition-colors", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("td", { className: `px-4 py-3${col === "date" ? " text-muted-foreground" : ""}${col === "total" ? " font-medium" : ""}`, children: [
17282
+ col === "date" ? formatDate(cart.lastModifiedAt ?? "") : null,
17283
+ col === "quantity" ? getTotalQuantity(cart) : null,
17284
+ col === "total" ? formatPrice17(cart.total?.totalNet ?? 0) : null,
17285
+ col === "requestedBy" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17184
17286
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: getContactName(cart.contact) }),
17185
17287
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: cart.contact?.email })
17186
- ] }),
17187
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
17288
+ ] }) : null,
17289
+ col === "action" ? /* @__PURE__ */ jsxRuntime.jsx(
17188
17290
  "button",
17189
17291
  {
17190
17292
  type: "button",
@@ -17192,8 +17294,8 @@ function PurchaseAuthorizationRequests(rawProps) {
17192
17294
  onClick: () => handleViewCart(cart),
17193
17295
  children: propellerV2CoreUi.getLabel(props.labels, "view", "View")
17194
17296
  }
17195
- ) })
17196
- ] }, index)) })
17297
+ ) : null
17298
+ ] }, col)) }, index)) })
17197
17299
  ] }) }) : null
17198
17300
  ] }) : null,
17199
17301
  selectedCart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-purchase-authorization-requests__modal fixed inset-0 z-50 flex items-center justify-center px-4", children: [