@commercelayer/app-elements 7.4.2 → 7.5.0

package/dist/main.d.ts

@@ -122,7 +122,7 @@ export { ResourceLineItems, type ResourceLineItemsProps, } from './ui/resources/
 export { ResourceListItem, type ResourceListItemProps, } from './ui/resources/ResourceListItem';
 export { ResourceMetadata, type ResourceMetadataProps, } from './ui/resources/ResourceMetadata';
 export { ResourceOrderTimeline, type ResourceOrderTimelineProps, } from './ui/resources/ResourceOrderTimeline';
-export { getPaymentMethodLogoSrc, ResourcePaymentMethod, type ResourcePaymentMethodProps, } from './ui/resources/ResourcePaymentMethod';
+export { getPaymentInstrumentDetails, getPaymentMethodLogoSrc, ResourcePaymentMethod, type ResourcePaymentMethodProps, } from './ui/resources/ResourcePaymentMethod';
 export { ResourceShipmentParcels, type ResourceShipmentParcelsProps, } from './ui/resources/ResourceShipmentParcels';
 export { ResourceTags, type ResourceTagsProps, } from './ui/resources/ResourceTags';
 export { type FiltersInstructions, type FormFullValues, type MetricsFilters, type UiFilterName, type UiFilterValue, useResourceFilters, } from './ui/resources/useResourceFilters';

package/dist/main.js

@@ -1,12 +1,12 @@
 "use client";
-import { an as s, ao as t, ap as o, aq as r, ar as c, as as n, at as u, af as i, au as d, av as l, aw as p, ax as b, ay as g, al as m, az as S, aA as k, aB as I, a1 as T, ae as D, a9 as R, aC as y, aD as C, aE as h, aF as A, aG as P, aH as H, aI as f, aJ as F, aK as v, aL as O, aM as B, aN as E, aO as L, aP as N, aQ as G, aR as M, aS as w, aT as V, aU as x, aV as W, aW as J, aX as U, aY as j, aZ as Y, a_ as q, a$ as z, b0 as K, ah as Q, b1 as X, a0 as Z, ab as _, b2 as $, b3 as aa, b4 as ea, b5 as sa, aj as ta, ai as oa, b6 as ra, b7 as ca, b8 as na, b9 as ua, ba as ia, a7 as da, bb as la, bc as pa, bd as ba, be as ga, bf as ma, bg as Sa, bh as ka, bi as Ia, bj as Ta, bk as Da, bl as Ra, bm as ya, bn as Ca, bo as ha, bp as Aa, bq as Pa, br as Ha, bs as fa, bt as Fa, bu as va, bv as Oa, bw as Ba, bx as Ea, by as La, bz as Na, bA as Ga, bB as Ma, bC as wa, bD as Va, bE as xa, bF as Wa, bG as Ja, bH as Ua, bI as ja, bJ as Ya, bK as qa, bL as za, bM as Ka, bN as Qa, bO as Xa, bP as Za, bQ as _a, ag as $a, bR as ae, bS as ee, bT as se, bU as te, bV as oe, bW as re, bX as ce, bY as ne, bZ as ue, b_ as ie, a8 as de, b$ as le, c0 as pe, c1 as be, c2 as ge, c3 as me, c4 as Se, c5 as ke, c6 as Ie, c7 as Te, c8 as De, c9 as Re, ca as ye, cb as Ce, cc as he, cd as Ae, ce as Pe, cf as He, cg as fe, ch as Fe, ci as ve, cj as Oe, ck as Be, cl as Ee, cm as Le, cn as Ne, co as Ge, cp as Me, cq as we, cr as Ve, cs as xe, ct as We, cu as Je, cv as Ue, cw as je, cx as Ye, cy as qe, cz as ze, cA as Ke, cB as Qe, cC as Xe, cD as Ze, cE as _e, cF as $e, cG as as, cH as es, cI as ss, cJ as ts, cK as os, cL as rs, cM as cs, cN as ns, cO as us, cP as is, cQ as ds, cR as ls, cS as ps, cT as bs, S as gs, cU as ms, cV as Ss, cW as ks, ad as Is, aa as Ts, cX as Ds, cY as Rs, cZ as ys, c_ as Cs, c$ as hs, d0 as As, d1 as Ps, d2 as Hs, d3 as fs, d4 as Fs, d5 as vs, d6 as Os, d7 as Bs, d8 as Es, d9 as Ls, a5 as Ns, a4 as Gs, da as Ms, db as ws, dc as Vs, dd as xs, de as Ws, df as Js, dg as Us, dh as js, di as Ys, dj as qs, dk as zs, u as Ks, dl as Qs, ac as Xs, dm as Zs, dn as _s, dp as $s } from "./main-RB0PeDoP.js";
+import { an as s, ao as t, ap as o, aq as r, ar as n, as as c, at as u, af as i, au as d, av as l, aw as p, ax as b, ay as g, al as m, az as S, aA as I, aB as k, a1 as T, ae as D, a9 as R, aC as y, aD as C, aE as h, aF as A, aG as P, aH as H, aI as f, aJ as F, aK as v, aL as O, aM as B, aN as E, aO as L, aP as N, aQ as G, aR as M, aS as w, aT as V, aU as x, aV as W, aW as J, aX as U, aY as j, aZ as q, a_ as Y, a$ as z, b0 as K, ah as Q, b1 as X, a0 as Z, ab as _, b2 as $, b3 as aa, b4 as ea, b5 as sa, aj as ta, ai as oa, b6 as ra, b7 as na, b8 as ca, b9 as ua, ba as ia, a7 as da, bb as la, bc as pa, bd as ba, be as ga, bf as ma, bg as Sa, bh as Ia, bi as ka, bj as Ta, bk as Da, bl as Ra, bm as ya, bn as Ca, bo as ha, bp as Aa, bq as Pa, br as Ha, bs as fa, bt as Fa, bu as va, bv as Oa, bw as Ba, bx as Ea, by as La, bz as Na, bA as Ga, bB as Ma, bC as wa, bD as Va, bE as xa, bF as Wa, bG as Ja, bH as Ua, bI as ja, bJ as qa, bK as Ya, bL as za, bM as Ka, bN as Qa, bO as Xa, bP as Za, bQ as _a, ag as $a, bR as ae, bS as ee, bT as se, bU as te, bV as oe, bW as re, bX as ne, bY as ce, bZ as ue, b_ as ie, a8 as de, b$ as le, c0 as pe, c1 as be, c2 as ge, c3 as me, c4 as Se, c5 as Ie, c6 as ke, c7 as Te, c8 as De, c9 as Re, ca as ye, cb as Ce, cc as he, cd as Ae, ce as Pe, cf as He, cg as fe, ch as Fe, ci as ve, cj as Oe, ck as Be, cl as Ee, cm as Le, cn as Ne, co as Ge, cp as Me, cq as we, cr as Ve, cs as xe, ct as We, cu as Je, cv as Ue, cw as je, cx as qe, cy as Ye, cz as ze, cA as Ke, cB as Qe, cC as Xe, cD as Ze, cE as _e, cF as $e, cG as as, cH as es, cI as ss, cJ as ts, cK as os, cL as rs, cM as ns, cN as cs, cO as us, cP as is, cQ as ds, cR as ls, cS as ps, cT as bs, cU as gs, S as ms, cV as Ss, cW as Is, cX as ks, ad as Ts, aa as Ds, cY as Rs, cZ as ys, c_ as Cs, c$ as hs, d0 as As, d1 as Ps, d2 as Hs, d3 as fs, d4 as Fs, d5 as vs, d6 as Os, d7 as Bs, d8 as Es, d9 as Ls, da as Ns, a5 as Gs, a4 as Ms, db as ws, dc as Vs, dd as xs, de as Ws, df as Js, dg as Us, dh as js, di as qs, dj as Ys, dk as zs, dl as Ks, u as Qs, dm as Xs, ac as Zs, dn as _s, dp as $s, dq as at } from "./main-YBGuu4K1.js";
 export {
   s as A,
   t as ActionButtons,
   o as Address,
   r as Alert,
-  c as Avatar,
-  n as AvatarLetter,
+  n as Avatar,
+  c as AvatarLetter,
   u as Badge,
   i as Button,
   d as ButtonFilter,
@@ -16,8 +16,8 @@ export {
   g as CodeBlock,
   m as CodeEditor,
   S as Container,
-  k as CopyToClipboard,
-  I as CoreSdkProvider,
+  I as CopyToClipboard,
+  k as CoreSdkProvider,
   T as Dropdown,
   D as DropdownDivider,
   R as DropdownItem,
@@ -44,8 +44,8 @@ export {
   J as HookedInputSpinner,
   U as HookedInputSwitch,
   j as HookedInputTextArea,
-  Y as HookedInputToggleButton,
-  q as HookedMarketWithCurrencySelector,
+  q as HookedInputToggleButton,
+  Y as HookedMarketWithCurrencySelector,
   z as HookedValidationApiError,
   K as HookedValidationError,
   Q as Hr,
@@ -59,8 +59,8 @@ export {
   ta as InputDate,
   oa as InputDateRange,
   ra as InputFeedback,
-  ca as InputFile,
-  na as InputJson,
+  na as InputFile,
+  ca as InputJson,
   ua as InputRadioGroup,
   ia as InputResourceGroup,
   da as InputSelect,
@@ -70,8 +70,8 @@ export {
   ga as InputTextArea,
   ma as InputToggleButton,
   Sa as Label,
-  ka as Legend,
-  Ia as List,
+  Ia as Legend,
+  ka as List,
   Ta as ListDetails,
   Da as ListDetailsItem,
   Ra as ListItem,
@@ -98,8 +98,8 @@ export {
   Ja as ResourcePaymentMethod,
   Ua as ResourceShipmentParcels,
   ja as ResourceTags,
-  Ya as Routes,
-  qa as RuleEngine,
+  qa as Routes,
+  Ya as RuleEngine,
   za as ScrollToTop,
   Ka as SearchBar,
   Qa as Section,
@@ -113,8 +113,8 @@ export {
   te as Steps,
   oe as Tab,
   re as Table,
-  ce as TableData,
-  ne as Tabs,
+  ne as TableData,
+  ce as Tabs,
   ue as Tag,
   ie as Td,
   de as Text,
@@ -124,8 +124,8 @@ export {
   ge as TokenProvider,
   me as Toolbar,
   Se as Tooltip,
-  ke as Tr,
-  Ie as Trans,
+  Ie as Tr,
+  ke as Trans,
   Te as computeFullname,
   De as createApp,
   Re as createRoute,
@@ -152,67 +152,68 @@ export {
   Je as getOrderFulfillmentStatusName,
   Ue as getOrderPaymentStatusName,
   je as getOrderStatusName,
-  Ye as getOrderTransactionName,
-  qe as getParcelTrackingDetail,
+  qe as getOrderTransactionName,
+  Ye as getParcelTrackingDetail,
   ze as getParcelTrackingDetails,
-  Ke as getPaymentMethodLogoSrc,
-  Qe as getPromotionDisplayStatus,
-  Xe as getResourceAddressFormFieldsSchema,
-  Ze as getResourceEndpoint,
-  _e as getReturnDisplayStatus,
-  $e as getReturnStatusName,
-  as as getShipmentDisplayStatus,
-  es as getShipmentRate,
-  ss as getShipmentRates,
-  ts as getShipmentStatusName,
-  os as getStockTransferDisplayStatus,
-  rs as getStockTransferStatusName,
+  Ke as getPaymentInstrumentDetails,
+  Qe as getPaymentMethodLogoSrc,
+  Xe as getPromotionDisplayStatus,
+  Ze as getResourceAddressFormFieldsSchema,
+  _e as getResourceEndpoint,
+  $e as getReturnDisplayStatus,
+  as as getReturnStatusName,
+  es as getShipmentDisplayStatus,
+  ss as getShipmentRate,
+  ts as getShipmentRates,
+  os as getShipmentStatusName,
+  rs as getStockTransferDisplayStatus,
+  ns as getStockTransferStatusName,
   cs as getUnitOfWeightName,
-  ns as getUnitsOfWeightForSelect,
-  us as goBack,
-  is as hasBeenPurchased,
-  ds as hasSingleTracking,
-  ls as i18nLocales,
-  ps as isAllStockTransfersCancelled,
-  bs as isAttachmentValidNote,
-  gs as isDateValid,
-  ms as isGroupedSelectValues,
-  Ss as isMock,
+  us as getUnitsOfWeightForSelect,
+  is as goBack,
+  ds as hasBeenPurchased,
+  ls as hasSingleTracking,
+  ps as i18nLocales,
+  bs as isAllStockTransfersCancelled,
+  gs as isAttachmentValidNote,
+  ms as isDateValid,
+  Ss as isGroupedSelectValues,
+  Is as isMock,
   ks as isMockedId,
-  Is as isMultiValueSelected,
-  Ts as isSingleValueSelected,
-  Ds as makeDateYearsRange,
-  Rs as maskGiftCardCode,
-  ys as navigateTo,
-  Cs as orderTransactionIsAnAsyncCapture,
-  hs as parseApiError,
-  As as referenceOrigins,
-  Ps as removeMillisecondsFromIsoDate,
-  Hs as setApiFormErrors,
-  fs as sortAndGroupByDate,
-  Fs as t,
-  vs as timeSeparator,
-  Os as toast,
-  Bs as useAppLinking,
-  Es as useClickAway,
-  Ls as useConfirmDialog,
-  Ns as useCoreApi,
-  Gs as useCoreSdkProvider,
-  Ms as useDelayShow,
-  ws as useEditMetadataOverlay,
-  Vs as useEditTagsOverlay,
-  xs as useInputResourceGroupOverlay,
-  Ws as useIsChanged,
-  Js as useOnBlurFromContainer,
-  Us as useOverlay,
-  js as useResourceAddressOverlay,
+  Ts as isMultiValueSelected,
+  Ds as isSingleValueSelected,
+  Rs as makeDateYearsRange,
+  ys as maskGiftCardCode,
+  Cs as navigateTo,
+  hs as orderTransactionIsAnAsyncCapture,
+  As as parseApiError,
+  Ps as referenceOrigins,
+  Hs as removeMillisecondsFromIsoDate,
+  fs as setApiFormErrors,
+  Fs as sortAndGroupByDate,
+  vs as t,
+  Os as timeSeparator,
+  Bs as toast,
+  Es as useAppLinking,
+  Ls as useClickAway,
+  Ns as useConfirmDialog,
+  Gs as useCoreApi,
+  Ms as useCoreSdkProvider,
+  ws as useDelayShow,
+  Vs as useEditMetadataOverlay,
+  xs as useEditTagsOverlay,
+  Ws as useInputResourceGroupOverlay,
+  Js as useIsChanged,
+  Us as useOnBlurFromContainer,
+  js as useOverlay,
+  qs as useResourceAddressOverlay,
   Ys as useResourceFilters,
-  qs as useResourceList,
-  zs as useTagManager,
-  Ks as useTokenProvider,
-  Qs as useTrackingDetails,
-  Xs as useTranslation,
-  Zs as useValidationFeedback,
-  _s as useViewJsonOverlay,
-  $s as withSkeletonTemplate
+  zs as useResourceList,
+  Ks as useTagManager,
+  Qs as useTokenProvider,
+  Xs as useTrackingDetails,
+  Zs as useTranslation,
+  _s as useValidationFeedback,
+  $s as useViewJsonOverlay,
+  at as withSkeletonTemplate
 };

package/dist/{parseISO-B1sV_-rm.js → parseISO-B6RzzNAR.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as D, c as T, m as p, a as N } from "./main-RB0PeDoP.js";
+import { t as D, c as T, m as p, a as N } from "./main-YBGuu4K1.js";
 function W(t, e) {
   const n = () => T(e?.in, NaN), a = I(t);
   let s;

package/dist/ui/resources/ResourcePaymentMethod.d.ts

@@ -1,12 +1,13 @@
 import { CustomerPaymentSource, Order, PaymentMethod } from '@commercelayer/sdk';
 import { FC, ReactNode } from 'react';
 import { SetNonNullable, SetRequired } from 'type-fest';
+type PaymentMethodResource = SetRequired<SetNonNullable<Partial<Order>, "payment_method">, "payment_method"> | SetRequired<SetNonNullable<CustomerPaymentSource, "payment_source">, "payment_source">;
 export interface ResourcePaymentMethodProps {
     /**
      * Any resource that has `payment_source` or `payment_method` properties is actually eligible.
      * But we are only interested in `Order` and `CustomerPaymentSource` resources.
      */
-    resource: SetRequired<SetNonNullable<Partial<Order>, "payment_method">, "payment_method"> | SetRequired<SetNonNullable<CustomerPaymentSource, "payment_source">, "payment_source">;
+    resource: PaymentMethodResource;
     /**
      * When true and if `payment_source.payment_response` is present, enables the expandable content to show more details on the transaction.
      */
@@ -28,3 +29,15 @@ export declare const ResourcePaymentMethod: FC<ResourcePaymentMethodProps>;
  * Retrieve the logo URL based on the payment source type.
  */
 export declare function getPaymentMethodLogoSrc(type?: PaymentMethod["payment_source_type"]): string;
+/**
+ * Extracts payment instrument details from an Order or CustomerPaymentSource resource.
+ * Returns individual parts, all of which may be `undefined` if not available.
+ */
+export declare function getPaymentInstrumentDetails(resource: PaymentMethodResource): {
+    paymentMethodName: string | undefined;
+    cardType: string | undefined;
+    issuerType: string | undefined;
+    cardLastDigits: string | undefined;
+    cardExpiry: string | undefined;
+};
+export {};

package/dist/ui/resources/useResourceFilters/FieldGroupedPredicates.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+import { FilterItemGroupedPredicates } from './types';
+interface FieldGroupedPredicatesProps {
+    item: FilterItemGroupedPredicates;
+}
+export declare function FieldGroupedPredicates({ item, }: FieldGroupedPredicatesProps): JSX.Element;
+export declare namespace FieldGroupedPredicates {
+    var displayName: string;
+}
+export {};

package/dist/ui/resources/useResourceFilters/types.d.ts

@@ -51,6 +51,62 @@ export interface BaseFilterItem {
         parseFormValue?: (value: unknown) => ValueOf<QueryFilter> | undefined;
     };
 }
+export interface FilterItemGroupedPredicates {
+    /**
+     * Label of the filter field in form component
+     */
+    label: string;
+    /**
+     * Flag to hide the filter field in form component
+     */
+    hidden?: boolean;
+    type: "groupedPredicates";
+    /**
+     * The URL query string key used to identify this filter in the URL and form state.
+     * Unlike other filter types, this is NOT an SDK predicate — it is a virtual key used
+     * only for URL serialization and react-hook-form state management.
+     * The actual SDK predicates are defined per-option inside `render.props.options`.
+     * @example
+     * ```ts
+     * urlParamKey: "availability" // → ?availability=in_stock
+     * ```
+     */
+    urlParamKey: string;
+    render: {
+        /**
+         * UI component to render
+         */
+        component: "inputToggleButton";
+        /**
+         * Props required for the UI component
+         */
+        props: {
+            mode: "single" | "multi";
+            /**
+             * Each option maps to a specific SDK predicate + value pair when selected.
+             * An option can be hidden from the UI but still be used in the query.
+             * @example
+             * ```ts
+             * [
+             *   { label: 'Has items', value: 'has_items', sdk: { predicate: 'quantity_gteq', value: '1' } },
+             *   { label: 'Empty',     value: 'empty',     sdk: { predicate: 'quantity_eq',   value: '0' } },
+             * ]
+             * ```
+             */
+            options: Array<{
+                label: string;
+                /** The value stored in the URL query string and form state */
+                value: string;
+                isHidden?: boolean;
+                /** The actual SDK predicate + value this option maps to when selected */
+                sdk: {
+                    predicate: string;
+                    value: string;
+                };
+            }>;
+        };
+    };
+}
 export type FilterItemOptions = BaseFilterItem & {
     type: "options";
     render: {
@@ -126,9 +182,21 @@ export interface FilterItemCurrencyRange extends Omit<BaseFilterItem, "sdk"> {
         props: Omit<InputCurrencyRangeProps, "onChange" | "fromCents" | "toCents" | "defaultCurrency" | "currencyList">;
     };
 }
-export type FiltersInstructionItem = FilterItemOptions | FilterItemTextSearch | FilterItemTime | FilterItemCurrencyRange;
+export type FiltersInstructionItem = FilterItemOptions | FilterItemTextSearch | FilterItemTime | FilterItemCurrencyRange | FilterItemGroupedPredicates;
 export type FiltersInstructions = FiltersInstructionItem[];
 export declare function isItemOptions(item: FiltersInstructionItem): item is FilterItemOptions;
 export declare function isTextSearch(item: FiltersInstructionItem): item is FilterItemTextSearch;
 export declare function isCurrencyRange(item: FiltersInstructionItem): item is FilterItemCurrencyRange;
+export declare function isGroupedPredicates(item: FiltersInstructionItem): item is FilterItemGroupedPredicates;
+/**
+ * Returns the URL query string key / form field name for any instruction item.
+ *
+ * - For all standard types (`options`, `textSearch`, `timeRange`, `currencyRange`) this is `item.sdk.predicate`.
+ * - For `groupedPredicates` it is `item.urlParamKey`, because that type has no single SDK predicate
+ *   (each option maps to its own predicate at the option level).
+ *
+ * Use this helper everywhere you need to resolve the URL/form key from an unnarrowed `FiltersInstructionItem`
+ * instead of accessing `item.sdk.predicate` directly.
+ */
+export declare function getInstructionKey(item: FiltersInstructionItem): string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "7.4.2",
+  "version": "7.5.0",
   "type": "module",
   "license": "MIT",
   "files": [