@commercelayer/app-elements 5.2.1 → 5.3.1

package/dist/main.d.ts

@@ -6,6 +6,7 @@ export { downloadJsonAsFile } from './helpers/downloadJsonAsFile';
 export { computeFullname, formatDisplayName } from './helpers/name';
 export { formatResourceName, getResourceEndpoint, type TriggerAttribute } from './helpers/resources';
 export { getAvatarSrcFromRate, getParcelTrackingDetail, getParcelTrackingDetails, getShipmentRate, getShipmentRates, hasBeenPurchased, hasSingleTracking, type Rate, type TrackingDetail } from './helpers/tracking';
+export { orderTransactionIsAnAsyncCapture } from './helpers/transactions';
 export { getUnitOfWeightName, getUnitsOfWeightForSelect, type UnitOfWeight } from './helpers/unitsOfWeight';
 export { useAppLinking } from './helpers/useAppLinking';
 export { useClickAway } from './hooks/useClickAway';
@@ -20,7 +21,7 @@ export { createApp, type ClAppKey, type ClAppProps } from './providers/createApp
 export { ErrorBoundary } from './providers/ErrorBoundary';
 export { GTMProvider, useTagManager } from './providers/GTMProvider';
 export { i18nLocales, I18NProvider, t, Trans, useTranslation, type I18NLocale } from './providers/I18NProvider';
-export { encodeExtras, MetaTags, TokenProvider, useTokenProvider, type TokenProviderAllowedApp, type TokenProviderExtras, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './providers/TokenProvider';
+export { encodeExtras, MetaTags, TokenProvider, useTokenProvider, type TokenProviderAllowedApp, type TokenProviderAllowedAppKind, type TokenProviderAllowedAppSlug, type TokenProviderClAppSlug, type TokenProviderExtras, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './providers/TokenProvider';
 export { A, type AProps } from './ui/atoms/A';
 export { Alert, type AlertProps } from './ui/atoms/Alert';
 export { Avatar, type AvatarProps } from './ui/atoms/Avatar';

package/dist/main.js

@@ -1,5 +1,5 @@
 "use client";
-import { aL as s, bp as t, bq as o, aM as r, aN as c, aO as n, aP as u, aQ as i, aR as d, aS as l, aT as p, br as b, aU as g, bO as m, aV as S, aW as I, aw as k, bs as T, bt as R, bu as D, bv as y, aX as h, aA as C, aB as A, bH as P, aY as H, aZ as F, bw as v, bP as f, bQ as B, bR as L, bT as O, bV as E, bY as N, b$ as G, c1 as w, c6 as M, c8 as V, cd as x, ci as W, ck as J, cm as U, co as Y, cq as X, cu as Z, cv as _, cw as $, a_ as j, aE as q, a$ as z, bS as K, bU as Q, bW as aa, bZ as ea, b_ as sa, c0 as ta, c2 as oa, c3 as ra, c4 as ca, c5 as na, c7 as ua, c9 as ia, ce as da, cj as la, cl as pa, cn as ba, cp as ga, cr as ma, cs as Sa, ct as Ia, bx as ka, by as Ta, bz as Ra, bA as Da, bI as ya, aJ as ha, bB as Ca, b0 as Aa, bC as Pa, bD as Ha, b1 as Fa, b2 as va, b3 as fa, b4 as Ba, bE as La, cA as Oa, cB as Ea, cD as Na, cE as Ga, cF as wa, cG as Ma, cH as Va, cI as xa, cK as Wa, cL as Ja, cM as Ua, bJ as Ya, b5 as Xa, bK as Za, b6 as _a, b7 as $a, b8 as ja, b9 as qa, bb as za, bc as Ka, bd as Qa, be as ae, bf as ee, bk as se, bg as te, bL as oe, bl as re, bm as ce, bh as ne, bn as ue, bi as ie, bM as de, aK as le, bN as pe, bo as be, bj as ge, aG as me, ab as Se, az as Ie, bF as ke, bG as Te, _ as Re, $ as De, aa as ye, aI as he, cb as Ce, bX as Ae, a0 as Pe, a1 as He, a2 as Fe, ac as ve, ad as fe, af as Be, cP as Le, cQ as Oe, cc as Ee, a3 as Ne, a4 as Ge, a5 as we, cR as Me, cS as Ve, cT as xe, cU as We, cV as Je, ag as Ue, ah as Ye, cJ as Xe, cW as Ze, cz as _e, ae as $e, cX as je, cY as qe, cZ as ze, ai as Ke, aj as Qe, c_ as as, c$ as es, d0 as ss, am as ts, an as os, W as rs, ak as cs, al as ns, aD as us, Y as is, R as ds, cf as ls, cg as ps, ch as bs, a6 as gs, X as ms, Z as Ss, a7 as Is, cx as ks, a8 as Ts, aF as Rs, a9 as Ds, ao as ys, ap as hs, ax as Cs, ay as As, aq as Ps, ar as Hs, as as Fs, ca as vs, at as fs, au as Bs, av as Ls, cC as Os, cN as Es, cO as Ns, aC as Gs, u as ws, aH as Ms, cy as Vs, ba as xs } from "./main-Bc7WPO8T.js";
+import { aM as s, bq as t, br as o, aN as r, aO as c, aP as n, aQ as u, aR as i, aS as d, aT as l, aU as p, bs as b, aV as g, bP as m, aW as S, aX as I, ax as k, bt as T, bu as R, bv as D, bw as y, aY as h, aB as A, aC as C, bI as P, aZ as H, a_ as F, bx as v, bQ as f, bR as B, bS as L, bU as O, bW as E, bZ as N, c0 as G, c2 as w, c7 as M, c9 as V, ce as x, cj as W, cl as J, cn as U, cp as Y, cr as X, cv as Z, cw as _, cx as $, a$ as j, aF as q, b0 as z, bT as K, bV as Q, bX as aa, b_ as ea, b$ as sa, c1 as ta, c3 as oa, c4 as ra, c5 as ca, c6 as na, c8 as ua, ca as ia, cf as da, ck as la, cm as pa, co as ba, cq as ga, cs as ma, ct as Sa, cu as Ia, by as ka, bz as Ta, bA as Ra, bB as Da, bJ as ya, aK as ha, bC as Aa, b1 as Ca, bD as Pa, bE as Ha, b2 as Fa, b3 as va, b4 as fa, b5 as Ba, bF as La, cB as Oa, cC as Ea, cE as Na, cF as Ga, cG as wa, cH as Ma, cI as Va, cJ as xa, cL as Wa, cM as Ja, cN as Ua, bK as Ya, b6 as Xa, bL as Za, b7 as _a, b8 as $a, b9 as ja, ba as qa, bc as za, bd as Ka, be as Qa, bf as ae, bg as ee, bl as se, bh as te, bM as oe, bm as re, bn as ce, bi as ne, bo as ue, bj as ie, bN as de, aL as le, bO as pe, bp as be, bk as ge, aH as me, ab as Se, aA as Ie, bG as ke, bH as Te, _ as Re, $ as De, aa as ye, aJ as he, cc as Ae, bY as Ce, a0 as Pe, a1 as He, a2 as Fe, ac as ve, ad as fe, af as Be, cQ as Le, cR as Oe, cd as Ee, a3 as Ne, a4 as Ge, a5 as we, cS as Me, cT as Ve, cU as xe, cV as We, cW as Je, ag as Ue, ah as Ye, cK as Xe, cX as Ze, cA as _e, ae as $e, cY as je, cZ as qe, c_ as ze, ai as Ke, aj as Qe, c$ as as, d0 as es, d1 as ss, an as ts, ao as os, W as rs, ak as cs, al as ns, aE as us, Y as is, R as ds, cg as ls, ch as ps, ci as bs, a6 as gs, X as ms, am as Ss, Z as Is, a7 as ks, cy as Ts, a8 as Rs, aG as Ds, a9 as ys, ap as hs, aq as As, ay as Cs, az as Ps, ar as Hs, as as Fs, at as vs, cb as fs, au as Bs, av as Ls, aw as Os, cD as Es, cO as Ns, cP as Gs, aD as ws, u as Ms, aI as Vs, cz as xs, bb as Ws } from "./main-tnQun6Mf.js";
 export {
   s as A,
   t as ActionButtons,
@@ -23,8 +23,8 @@ export {
   D as DropdownItem,
   y as DropdownSearch,
   h as EmptyState,
-  C as ErrorBoundary,
-  A as GTMProvider,
+  A as ErrorBoundary,
+  C as GTMProvider,
   P as GenericPageNotFound,
   H as Grid,
   F as Hint,
@@ -77,8 +77,8 @@ export {
   Da as ListItem,
   ya as LoadingPage,
   ha as MetaTags,
-  Ca as PageError,
-  Aa as PageHeading,
+  Aa as PageError,
+  Ca as PageHeading,
   Pa as PageLayout,
   Ha as PageSkeleton,
   Fa as Pagination,
@@ -131,8 +131,8 @@ export {
   De as currencyInputSelectOptions,
   ye as downloadJsonAsFile,
   he as encodeExtras,
-  Ce as flatSelectValues,
-  Ae as formatCentsToCurrency,
+  Ae as flatSelectValues,
+  Ce as formatCentsToCurrency,
   Pe as formatDate,
   He as formatDateRange,
   Fe as formatDateWithPredicate,
@@ -177,29 +177,30 @@ export {
   bs as isSingleValueSelected,
   gs as makeDateYearsRange,
   ms as navigateTo,
-  Ss as referenceOrigins,
-  Is as removeMillisecondsFromIsoDate,
-  ks as setApiFormErrors,
-  Ts as sortAndGroupByDate,
-  Rs as t,
-  Ds as timeSeparator,
-  ys as useAppLinking,
-  hs as useClickAway,
+  Ss as orderTransactionIsAnAsyncCapture,
+  Is as referenceOrigins,
+  ks as removeMillisecondsFromIsoDate,
+  Ts as setApiFormErrors,
+  Rs as sortAndGroupByDate,
+  Ds as t,
+  ys as timeSeparator,
+  hs as useAppLinking,
+  As as useClickAway,
   Cs as useCoreApi,
-  As as useCoreSdkProvider,
-  Ps as useDelayShow,
-  Hs as useEditMetadataOverlay,
-  Fs as useEditTagsOverlay,
-  vs as useInputResourceGroupOverlay,
-  fs as useIsChanged,
-  Bs as useOnBlurFromContainer,
-  Ls as useOverlay,
-  Os as useResourceAddressOverlay,
-  Es as useResourceFilters,
-  Ns as useResourceList,
-  Gs as useTagManager,
-  ws as useTokenProvider,
-  Ms as useTranslation,
-  Vs as useValidationFeedback,
-  xs as withSkeletonTemplate
+  Ps as useCoreSdkProvider,
+  Hs as useDelayShow,
+  Fs as useEditMetadataOverlay,
+  vs as useEditTagsOverlay,
+  fs as useInputResourceGroupOverlay,
+  Bs as useIsChanged,
+  Ls as useOnBlurFromContainer,
+  Os as useOverlay,
+  Es as useResourceAddressOverlay,
+  Ns as useResourceFilters,
+  Gs as useResourceList,
+  ws as useTagManager,
+  Ms as useTokenProvider,
+  Vs as useTranslation,
+  xs as useValidationFeedback,
+  Ws as withSkeletonTemplate
 };

package/dist/providers/TokenProvider/TokenProvider.d.ts

@@ -1,12 +1,12 @@
 import { TokenProviderTokenApplicationKind } from '.';
 import { ListableResourceType } from '@commercelayer/sdk';
 import { ReactNode } from 'react';
-import { TokenProviderAllowedApp, TokenProviderAuthSettings, TokenProviderAuthUser, TokenProviderExtras, TokenProviderRoleActions } from './types';
+import { TokenProviderAllowedAppSlug, TokenProviderAuthSettings, TokenProviderAuthUser, TokenProviderClAppSlug, TokenProviderExtras, TokenProviderRoleActions } from './types';
 export interface TokenProviderValue {
     settings: TokenProviderAuthSettings;
     user: TokenProviderAuthUser | null;
     canUser: (action: TokenProviderRoleActions, resource: ListableResourceType) => boolean;
-    canAccess: (appSlug: Exclude<TokenProviderAllowedApp, 'dashboard'>) => boolean;
+    canAccess: (appSlug: TokenProviderClAppSlug) => boolean;
     emitInvalidAuth: (reason: string) => void;
 }
 export interface TokenProviderProps {
@@ -16,10 +16,10 @@ export interface TokenProviderProps {
      */
     kind: TokenProviderTokenApplicationKind;
     /**
-     * The slug of the current app. It needs to match one of the allowed app slugs enabled in the dashboard.
-     * It is used to persist token for current app only.
+     * The slug of the current app. It could match one of the allowed apps or a custom string.
+     * It is used as the app identifier (e.g. storage key).
      */
-    appSlug: TokenProviderAllowedApp;
+    appSlug: TokenProviderAllowedAppSlug;
     /**
      * Set this to `true` to skip domain slug validation in dev mode.
      */

package/dist/providers/TokenProvider/index.d.ts

@@ -1,4 +1,4 @@
 export { encodeExtras } from './extras';
 export { MetaTags } from './MetaTags';
 export { TokenProvider, useTokenProvider } from './TokenProvider';
-export type { TokenProviderAllowedApp, TokenProviderExtras, TokenProviderPermissionItem, TokenProviderRoleActions, TokenProviderRolePermissions, TokenProviderTokenApplicationKind } from './types';
+export type { TokenProviderAllowedApp, TokenProviderAllowedAppKind, TokenProviderAllowedAppSlug, TokenProviderClAppSlug, TokenProviderExtras, TokenProviderPermissionItem, TokenProviderRoleActions, TokenProviderRolePermissions, TokenProviderTokenApplicationKind } from './types';

package/dist/providers/TokenProvider/reducer.d.ts

@@ -1,11 +1,11 @@
-import { TokenProviderAllowedApp } from '.';
+import { TokenProviderClAppSlug } from '.';
 import { TokenProviderAuthSettings, TokenProviderAuthUser, TokenProviderRolePermissions } from './types';
 interface TokenProviderInternalState {
     validAuthToken?: string;
     isLoading: boolean;
     isTokenError: boolean;
     rolePermissions: TokenProviderRolePermissions;
-    accessibleApps: TokenProviderAllowedApp[];
+    accessibleApps: TokenProviderClAppSlug[];
     settings: TokenProviderAuthSettings;
     user: TokenProviderAuthUser | null;
 }
@@ -18,7 +18,7 @@ type Action = {
         settings: TokenProviderAuthSettings;
         user: TokenProviderAuthUser | null;
         rolePermissions: TokenProviderRolePermissions;
-        accessibleApps: TokenProviderAllowedApp[];
+        accessibleApps: TokenProviderClAppSlug[];
     };
 };
 export declare const reducer: (state: TokenProviderInternalState, action: Action) => TokenProviderInternalState;

package/dist/providers/TokenProvider/storage.d.ts

@@ -1,13 +1,13 @@
-import { TokenProviderAllowedApp } from './types';
+import { TokenProviderAllowedAppSlug } from './types';
 type ItemType = 'accessToken' | 'extras';
 export declare function makeStorageKey({ appSlug, organizationSlug, itemType }: {
-    appSlug: TokenProviderAllowedApp;
+    appSlug: TokenProviderAllowedAppSlug;
     organizationSlug: string;
     itemType: ItemType;
 }): string;
 export declare function getPersistentJWT({ appSlug, organizationSlug, itemType }: {
     /** The app for which to get the token. */
-    appSlug: TokenProviderAllowedApp;
+    appSlug: TokenProviderAllowedAppSlug;
     /** The organization slug for the token we want to retrieve. */
     organizationSlug?: string;
     /** The JWT item type you want to retrieve. */
@@ -15,7 +15,7 @@ export declare function getPersistentJWT({ appSlug, organizationSlug, itemType }
 }): string | null;
 export declare function savePersistentJWT({ appSlug, jwt, organizationSlug, itemType }: {
     /** The app for which to get the token. */
-    appSlug: TokenProviderAllowedApp;
+    appSlug: TokenProviderAllowedAppSlug;
     /** The token to save. */
     jwt: string;
     /** The organization slug for the token we want to store. */

package/dist/providers/TokenProvider/types.d.ts

@@ -1,7 +1,28 @@
 import { ParsedScopes } from './getInfoFromJwt';
 import { ListableResourceType } from '@commercelayer/sdk';
-export type TokenProviderAllowedApp = 'bundles' | 'customers' | 'exports' | 'gift_cards' | 'imports' | 'inventory' | 'orders' | 'price_lists' | 'promotions' | 'returns' | 'shipments' | 'sku_lists' | 'skus' | 'stock_transfers' | 'subscriptions' | 'tags' | 'webhooks' | 'dashboard' | 'resources' | 'generic';
-export type TokenProviderTokenApplicationKind = 'integration' | 'sales_channel' | 'webapp' | 'resources' | TokenProviderAllowedApp;
+export type TokenProviderClAppSlug = 'bundles' | 'customers' | 'exports' | 'gift_cards' | 'imports' | 'inventory' | 'orders' | 'price_lists' | 'promotions' | 'returns' | 'shipments' | 'sku_lists' | 'skus' | 'stock_transfers' | 'subscriptions' | 'tags' | 'webhooks';
+/**
+ * TokenProviderAllowedApp is a type that contains all the possible kinds of the app that you can create inside the dashboard.
+ * As a convention Commerce Layer official apps have a slug that matches the kind of the app.
+ */
+export type TokenProviderAllowedAppKind = TokenProviderClAppSlug | 'generic';
+/**
+ * @deprecated Use `TokenProviderAllowedAppKind` instead.
+ */
+export type TokenProviderAllowedApp = TokenProviderAllowedAppKind;
+/**
+ * The application slug. It could match one of the allowed apps or a custom string.
+ * It is used as the app identifier (e.g. storage key).
+ */
+export type TokenProviderAllowedAppSlug = TokenProviderClAppSlug | (string & {});
+/**
+ * TokenProviderTokenApplicationKind is a type that contains all the suitable api credential kinds.
+ * Depending on the kind, it could be used to identify:
+ * - an authentication api credential (eg. `integration`, `sales_channel`, `webapp`)
+ * - a particular feature in the dashboard (eg. `resources`, `links`)
+ * - an app with its dedicated set of permissions (eg. `order`, `customers`, etc...)
+ */
+export type TokenProviderTokenApplicationKind = 'integration' | 'sales_channel' | 'webapp' | 'resources' | 'links' | TokenProviderAllowedAppKind;
 export type TokenProviderRoleActions = 'create' | 'destroy' | 'read' | 'update';
 export type TokenProviderPermissionItem = Record<TokenProviderRoleActions, boolean>;
 export type TokenProviderRolePermissions = Partial<Record<ListableResourceType | 'organizations', TokenProviderPermissionItem>>;
@@ -70,7 +91,7 @@ export interface TokenProviderTokenInfo {
      */
     accessible_apps?: Array<{
         name: string;
-        kind: TokenProviderAllowedApp;
+        kind: TokenProviderAllowedAppKind;
         core: boolean;
     }>;
 }

package/dist/providers/TokenProvider/validateToken.d.ts

@@ -1,6 +1,6 @@
-import { TokenProviderAllowedApp, TokenProviderTokenApplicationKind } from '.';
+import { TokenProviderTokenApplicationKind } from '.';
 import { ParsedScopes } from './getInfoFromJwt';
-import { Mode, TokenProviderAuthUser, TokenProviderRolePermissions } from './types';
+import { Mode, TokenProviderAuthUser, TokenProviderClAppSlug, TokenProviderRolePermissions } from './types';
 export declare function isTokenExpired({ accessToken, compareTo }: {
     accessToken: string;
     compareTo: Date;
@@ -11,7 +11,7 @@ interface ValidToken {
     mode: Mode;
     organizationSlug: string;
     permissions?: TokenProviderRolePermissions;
-    accessibleApps?: TokenProviderAllowedApp[];
+    accessibleApps?: TokenProviderClAppSlug[];
     user: TokenProviderAuthUser | null;
     scopes?: ParsedScopes;
 }

package/dist/providers/createApp.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { Root } from 'react-dom/client';
-import { TokenProviderAllowedApp } from './TokenProvider';
 import { TokenProviderProps } from './TokenProvider/TokenProvider';
-export type ClAppKey = `clApp_${TokenProviderAllowedApp}`;
+import { TokenProviderAllowedAppSlug } from './TokenProvider/types';
+export type ClAppKey = `clApp_${TokenProviderAllowedAppSlug}`;
 /**
  * Method to mount the React application in the provider `node` with the set of options passed as `props`.
  */
@@ -31,5 +31,5 @@ export interface ClAppProps extends Partial<Omit<TokenProviderProps, 'appSlug' |
  * The React application will them be mounted into the provided `node` element, when the `init` method is called.
  * @param children - The root component of the app.
  **/
-export declare function createApp(children: (props: ClAppProps) => ReactNode, appSlug: TokenProviderAllowedApp): void;
+export declare function createApp(children: (props: ClAppProps) => ReactNode, appSlug: TokenProviderAllowedAppSlug): void;
 export {};

package/dist/ui/composite/PageLayout.d.ts

@@ -1,7 +1,8 @@
 import { ContainerProps } from '../atoms/Container';
 import { PageHeadingProps } from '../atoms/PageHeading';
+import { OverlayProps } from '../internals/Overlay';
 import { ReactNode } from 'react';
-export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'>, Pick<ContainerProps, 'minHeight'> {
+export type PageLayoutProps = Pick<PageHeadingProps, 'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'> & Pick<ContainerProps, 'minHeight'> & {
     /**
      * Page content
      */
@@ -11,28 +12,44 @@ export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'descr
      * Only if app is standalone mode.
      */
     mode?: 'test' | 'live';
-    /**
-     * Renders as overlay
-     */
-    overlay?: boolean;
     /**
      * Optional prop to enable scroll to top behavior on location change
      */
     scrollToTop?: boolean;
-}
-export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    children: ReactNode;
-    mode?: "test" | "live"
+} & ({
+    overlay?: false;
+} | {
     /**
      * Renders as overlay
      */
-     | undefined;
-    overlay?: boolean
+    overlay: true;
+    /**
+     * Footer element to be rendered at the bottom of the overlay.
+     **/
+    overlayFooter?: OverlayProps['footer'];
+});
+export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    description?: ReactNode;
+    title: ReactNode;
+    toolbar?: import('../atoms/PageHeading/PageHeadingToolbar').PageHeadingToolbarProps | undefined;
+    gap?: "none" | "only-top" | "only-bottom" | "both" | undefined;
+    navigationButton?: {
+        label: string;
+        onClick: () => void;
+        icon?: "x" | "arrowLeft";
+    } | undefined;
+    minHeight?: boolean | undefined;
+    children: ReactNode;
+    mode?: "test" | "live"
     /**
      * Optional prop to enable scroll to top behavior on location change
      */
      | undefined;
     scrollToTop?: boolean | undefined;
+    overlay?: false | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+} | {
     description?: ReactNode;
     title: ReactNode;
     toolbar?: import('../atoms/PageHeading/PageHeadingToolbar').PageHeadingToolbarProps | undefined;
@@ -43,6 +60,15 @@ export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTem
         icon?: "x" | "arrowLeft";
     } | undefined;
     minHeight?: boolean | undefined;
+    children: ReactNode;
+    mode?: "test" | "live"
+    /**
+     * Optional prop to enable scroll to top behavior on location change
+     */
+     | undefined;
+    scrollToTop?: boolean | undefined;
+    overlay: true;
+    overlayFooter?: ReactNode;
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/package.json

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