@commercelayer/app-elements 1.14.5 → 1.15.0

package/dist/main.d.ts

@@ -17,6 +17,7 @@ export { CoreSdkProvider, useCoreApi, useCoreSdkProvider } from './providers/Cor
 export { ErrorBoundary } from './providers/ErrorBoundary';
 export { GTMProvider, useTagManager } from './providers/GTMProvider';
 export { MetaTags, TokenProvider, useTokenProvider, type TokenProviderAllowedApp, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './providers/TokenProvider';
+export { createApp, type ClAppProps } from './providers/createApp';
 export { A, type AProps } from './ui/atoms/A';
 export { Alert, type AlertProps } from './ui/atoms/Alert';
 export { Avatar, type AvatarProps } from './ui/atoms/Avatar';
@@ -56,6 +57,7 @@ export { Tooltip, type TooltipProps, type TooltipRefProps } from './ui/atoms/Too
 export { ActionButtons, type ActionButtonsProps } from './ui/composite/ActionButtons';
 export { CardDialog, type CardDialogProps } from './ui/composite/CardDialog';
 export { Dropdown, DropdownDivider, DropdownItem, DropdownSearch, type DropdownDividerProps, type DropdownItemProps, type DropdownProps, type DropdownSearchProps } from './ui/composite/Dropdown';
+export { HomePageLayout, type HomePageLayoutProps } from './ui/composite/HomePageLayout';
 export { List, type ListProps } from './ui/composite/List';
 export { ListDetails, type ListDetailsProps } from './ui/composite/ListDetails';
 export { ListDetailsItem, type ListDetailsItemProps } from './ui/composite/ListDetailsItem';

package/dist/main.js

@@ -1,180 +1,176 @@
 "use client";
-import { a1 as i, aH as p, a2 as l, a3 as b, a4 as d, a5 as c, a6 as g, a7 as m, a8 as S, a9 as I, aa as k, aI as T, ab as D, ac as R, T as h, aJ as y, aK as C, aL as H, aM as P, ad as A, W as f, Y as B, ae as F, af as v, aY as N, aZ as L, a$ as O, b1 as G, b3 as w, b7 as V, b9 as x, be as E, bh as M, bj as W, bq as J, bs as U, bu as q, bw as z, by as K, bC as Q, bD as Y, ag as Z, ah as _, a_ as $, b0 as j, b2 as X, b4 as aa, b6 as ea, b8 as sa, ba as ta, bb as oa, bc as ra, bd as na, bf as ua, bg as ia, bi as pa, bk as la, br as ba, bt as da, bv as ca, bx as ga, bz as ma, bA as Sa, bB as Ia, aN as ka, aO as Ta, aP as Da, aQ as Ra, _ as ha, aR as ya, ai as Ca, aS as Ha, aT as Pa, aj as Aa, ak as fa, al as Ba, am as Fa, aU as va, bG as Na, bH as La, bI as Oa, bJ as Ga, bK as wa, bL as Va, bM as xa, bN as Ea, an as Ma, aV as Wa, ao as Ja, ap as Ua, aq as qa, ar as za, at as Ka, au as Qa, av as Ya, aw as Za, ax as _a, aC as $a, ay as ja, aW as Xa, aD as ae, aE as ee, az as se, aF as te, aA as oe, aX as re, $ as ne, aG as ue, aB as ie, z as pe, C as le, D as be, k as de, y as ce, bl as ge, b5 as me, l as Se, m as Ie, q as ke, A as Te, B as De, E as Re, bP as he, bQ as ye, bm as Ce, s as He, t as Pe, u as Ae, bR as fe, bS as Be, bT as Fe, bU as ve, bV as Ne, F as Le, G as Oe, bW as Ge, bX as we, bY as Ve, bZ as xe, H as Ee, J as Me, b_ as We, b$ as Je, c0 as Ue, M as qe, N as ze, e as Ke, K as Qe, L as Ye, h as Ze, bn as _e, bo as $e, bp as je, n as Xe, r as as, bE as es, v as ss, x as ts, O as os, U as rs, V as ns, P as us, Q as is, R as ps, S as ls, bO as bs, Z as ds, a0 as cs, bF as gs, as as ms } from "./main-TnhZckKL.js";
-import "react";
-import "react-dom";
-import "@commercelayer/sdk";
-import "react-gtm-module";
-import "react-hook-form";
-import "query-string";
+import { a2 as s, aI as t, a3 as o, a4 as r, a5 as n, a6 as u, a7 as i, a8 as p, a9 as l, aa as b, ab as c, aJ as d, ac as g, ad as S, T as m, aK as I, aL as k, aM as T, aN as D, ae as R, W as y, Y as h, af as C, ag as H, aO as P, a_ as A, a$ as f, b1 as B, b3 as F, b5 as v, b9 as L, bb as N, bg as O, bj as G, bl as w, bs as V, bu as x, bw as E, by as M, bA as W, bE as J, bF as U, ah as q, ai as z, b0 as K, b2 as Q, b4 as Y, b6 as Z, b8 as _, ba as $, bc as j, bd as X, be as aa, bf as ea, bh as sa, bi as ta, bk as oa, bm as ra, bt as na, bv as ua, bx as ia, bz as pa, bB as la, bC as ba, bD as ca, aP as da, aQ as ga, aR as Sa, aS as ma, _ as Ia, aT as ka, aj as Ta, aU as Da, aV as Ra, ak as ya, al as ha, am as Ca, an as Ha, aW as Pa, bI as Aa, bJ as fa, bK as Ba, bL as Fa, bM as va, bN as La, bO as Na, bP as Oa, ao as Ga, aX as wa, ap as Va, aq as xa, ar as Ea, as as Ma, au as Wa, av as Ja, aw as Ua, ax as qa, ay as za, aD as Ka, az as Qa, aY as Ya, aE as Za, aF as _a, aA as $a, aG as ja, aB as Xa, aZ as ae, $ as ee, aH as se, aC as te, z as oe, a1 as re, C as ne, D as ue, k as ie, y as pe, bn as le, b7 as be, l as ce, m as de, q as ge, A as Se, B as me, E as Ie, bR as ke, bS as Te, bo as De, s as Re, t as ye, u as he, bT as Ce, bU as He, bV as Pe, bW as Ae, bX as fe, F as Be, G as Fe, bY as ve, bZ as Le, b_ as Ne, b$ as Oe, H as Ge, J as we, c0 as Ve, c1 as xe, c2 as Ee, M as Me, N as We, e as Je, K as Ue, L as qe, h as ze, bp as Ke, bq as Qe, br as Ye, n as Ze, r as _e, bG as $e, v as je, x as Xe, O as as, U as es, V as ss, P as ts, Q as os, R as rs, S as ns, bQ as us, Z as is, a0 as ps, bH as ls, at as bs } from "./main-B_P2rWFk.js";
 export {
-  i as A,
-  p as ActionButtons,
-  l as Alert,
-  b as Avatar,
-  d as AvatarLetter,
-  c as Badge,
-  g as Button,
-  m as ButtonCard,
-  S as ButtonFilter,
-  I as ButtonImageSelect,
-  k as Card,
-  T as CardDialog,
-  D as Container,
-  R as CopyToClipboard,
-  h as CoreSdkProvider,
-  y as Dropdown,
-  C as DropdownDivider,
-  H as DropdownItem,
-  P as DropdownSearch,
-  A as EmptyState,
-  f as ErrorBoundary,
-  B as GTMProvider,
-  F as Grid,
-  v as Hint,
-  N as HookedForm,
-  L as HookedInput,
-  O as HookedInputCheckbox,
-  G as HookedInputCheckboxGroup,
-  w as HookedInputCurrency,
-  V as HookedInputDate,
-  x as HookedInputDateRange,
-  E as HookedInputRadioGroup,
-  M as HookedInputResourceGroup,
-  W as HookedInputSelect,
-  J as HookedInputSimpleSelect,
-  U as HookedInputSpinner,
-  q as HookedInputSwitch,
-  z as HookedInputTextArea,
-  K as HookedInputToggleButton,
-  Q as HookedValidationApiError,
-  Y as HookedValidationError,
-  Z as Hr,
-  _ as Icon,
-  $ as Input,
-  j as InputCheckbox,
-  X as InputCheckboxGroup,
-  aa as InputCurrency,
-  ea as InputCurrencyRange,
-  sa as InputDate,
-  ta as InputDateRange,
-  oa as InputFeedback,
-  ra as InputFile,
-  na as InputJson,
-  ua as InputRadioGroup,
-  ia as InputReadonly,
-  pa as InputResourceGroup,
-  la as InputSelect,
-  ba as InputSimpleSelect,
-  da as InputSpinner,
-  ca as InputSwitch,
-  ga as InputTextArea,
-  ma as InputToggleButton,
-  Sa as Label,
-  Ia as Legend,
-  ka as List,
-  Ta as ListDetails,
-  Da as ListDetailsItem,
-  Ra as ListItem,
-  ha as MetaTags,
-  ya as PageError,
-  Ca as PageHeading,
-  Ha as PageLayout,
-  Pa as PageSkeleton,
-  Aa as Pagination,
-  fa as Progress,
-  Ba as RadialProgress,
-  Fa as RemoveButton,
-  va as Report,
-  Na as ResourceAddress,
-  La as ResourceLineItems,
-  Oa as ResourceList,
-  Ga as ResourceListItem,
-  wa as ResourceMetadata,
-  Va as ResourceOrderTimeline,
-  xa as ResourceShipmentParcels,
-  Ea as ResourceTags,
-  Ma as ScrollToTop,
-  Wa as SearchBar,
-  Ja as Section,
-  Ua as Skeleton,
-  qa as SkeletonItem,
-  za as SkeletonTemplate,
-  Ka as Spacer,
-  Qa as Stack,
-  Ya as StatusDot,
-  Za as StatusIcon,
-  _a as Steps,
-  $a as Tab,
-  ja as Table,
-  Xa as TableData,
-  ae as Tabs,
-  ee as Tag,
-  se as Td,
-  te as Text,
-  oe as Th,
-  re as Timeline,
-  ne as TokenProvider,
-  ue as Tooltip,
-  ie as Tr,
-  pe as computeFullname,
-  le as createRoute,
-  be as createTypedRoute,
-  de as currencies,
-  ce as downloadJsonAsFile,
-  ge as flatSelectValues,
-  me as formatCentsToCurrency,
-  Se as formatDate,
-  Ie as formatDateRange,
-  ke as formatDateWithPredicate,
-  Te as formatDisplayName,
-  De as formatResourceName,
-  Re as getAvatarSrcFromRate,
-  he as getCustomerDisplayStatus,
-  ye as getCustomerStatusName,
-  Ce as getDefaultValueFromFlatten,
-  He as getEventDateInfo,
-  Pe as getIsoDateAtDayEdge,
-  Ae as getIsoDateAtDaysBefore,
-  fe as getOrderDisplayStatus,
-  Be as getOrderFulfillmentStatusName,
-  Fe as getOrderPaymentStatusName,
-  ve as getOrderStatusName,
-  Ne as getOrderTransactionName,
-  Le as getParcelTrackingDetail,
-  Oe as getParcelTrackingDetails,
-  Ge as getPromotionDisplayStatus,
-  we as getReturnDisplayStatus,
-  Ve as getReturnStatusName,
-  xe as getShipmentDisplayStatus,
-  Ee as getShipmentRate,
-  Me as getShipmentRates,
-  We as getShipmentStatusName,
-  Je as getStockTransferDisplayStatus,
-  Ue as getStockTransferStatusName,
-  qe as getUnitOfWeightName,
-  ze as getUnitsOfWeightForSelect,
-  Ke as goBack,
-  Qe as hasBeenPurchased,
-  Ye as hasSingleTracking,
-  Ze as isAttachmentValidNote,
-  _e as isGroupedSelectValues,
-  $e as isMultiValueSelected,
-  je as isSingleValueSelected,
-  Xe as navigateTo,
-  as as referenceOrigins,
-  es as setApiFormErrors,
-  ss as sortAndGroupByDate,
-  ts as timeSeparator,
-  os as useClickAway,
-  rs as useCoreApi,
-  ns as useCoreSdkProvider,
-  us as useDelayShow,
-  is as useIsChanged,
-  ps as useOnBlurFromContainer,
-  ls as useOverlay,
-  bs as useResourceFilters,
-  ds as useTagManager,
-  cs as useTokenProvider,
-  gs as useValidationFeedback,
-  ms as withSkeletonTemplate
+  s as A,
+  t as ActionButtons,
+  o as Alert,
+  r as Avatar,
+  n as AvatarLetter,
+  u as Badge,
+  i as Button,
+  p as ButtonCard,
+  l as ButtonFilter,
+  b as ButtonImageSelect,
+  c as Card,
+  d as CardDialog,
+  g as Container,
+  S as CopyToClipboard,
+  m as CoreSdkProvider,
+  I as Dropdown,
+  k as DropdownDivider,
+  T as DropdownItem,
+  D as DropdownSearch,
+  R as EmptyState,
+  y as ErrorBoundary,
+  h as GTMProvider,
+  C as Grid,
+  H as Hint,
+  P as HomePageLayout,
+  A as HookedForm,
+  f as HookedInput,
+  B as HookedInputCheckbox,
+  F as HookedInputCheckboxGroup,
+  v as HookedInputCurrency,
+  L as HookedInputDate,
+  N as HookedInputDateRange,
+  O as HookedInputRadioGroup,
+  G as HookedInputResourceGroup,
+  w as HookedInputSelect,
+  V as HookedInputSimpleSelect,
+  x as HookedInputSpinner,
+  E as HookedInputSwitch,
+  M as HookedInputTextArea,
+  W as HookedInputToggleButton,
+  J as HookedValidationApiError,
+  U as HookedValidationError,
+  q as Hr,
+  z as Icon,
+  K as Input,
+  Q as InputCheckbox,
+  Y as InputCheckboxGroup,
+  Z as InputCurrency,
+  _ as InputCurrencyRange,
+  $ as InputDate,
+  j as InputDateRange,
+  X as InputFeedback,
+  aa as InputFile,
+  ea as InputJson,
+  sa as InputRadioGroup,
+  ta as InputReadonly,
+  oa as InputResourceGroup,
+  ra as InputSelect,
+  na as InputSimpleSelect,
+  ua as InputSpinner,
+  ia as InputSwitch,
+  pa as InputTextArea,
+  la as InputToggleButton,
+  ba as Label,
+  ca as Legend,
+  da as List,
+  ga as ListDetails,
+  Sa as ListDetailsItem,
+  ma as ListItem,
+  Ia as MetaTags,
+  ka as PageError,
+  Ta as PageHeading,
+  Da as PageLayout,
+  Ra as PageSkeleton,
+  ya as Pagination,
+  ha as Progress,
+  Ca as RadialProgress,
+  Ha as RemoveButton,
+  Pa as Report,
+  Aa as ResourceAddress,
+  fa as ResourceLineItems,
+  Ba as ResourceList,
+  Fa as ResourceListItem,
+  va as ResourceMetadata,
+  La as ResourceOrderTimeline,
+  Na as ResourceShipmentParcels,
+  Oa as ResourceTags,
+  Ga as ScrollToTop,
+  wa as SearchBar,
+  Va as Section,
+  xa as Skeleton,
+  Ea as SkeletonItem,
+  Ma as SkeletonTemplate,
+  Wa as Spacer,
+  Ja as Stack,
+  Ua as StatusDot,
+  qa as StatusIcon,
+  za as Steps,
+  Ka as Tab,
+  Qa as Table,
+  Ya as TableData,
+  Za as Tabs,
+  _a as Tag,
+  $a as Td,
+  ja as Text,
+  Xa as Th,
+  ae as Timeline,
+  ee as TokenProvider,
+  se as Tooltip,
+  te as Tr,
+  oe as computeFullname,
+  re as createApp,
+  ne as createRoute,
+  ue as createTypedRoute,
+  ie as currencies,
+  pe as downloadJsonAsFile,
+  le as flatSelectValues,
+  be as formatCentsToCurrency,
+  ce as formatDate,
+  de as formatDateRange,
+  ge as formatDateWithPredicate,
+  Se as formatDisplayName,
+  me as formatResourceName,
+  Ie as getAvatarSrcFromRate,
+  ke as getCustomerDisplayStatus,
+  Te as getCustomerStatusName,
+  De as getDefaultValueFromFlatten,
+  Re as getEventDateInfo,
+  ye as getIsoDateAtDayEdge,
+  he as getIsoDateAtDaysBefore,
+  Ce as getOrderDisplayStatus,
+  He as getOrderFulfillmentStatusName,
+  Pe as getOrderPaymentStatusName,
+  Ae as getOrderStatusName,
+  fe as getOrderTransactionName,
+  Be as getParcelTrackingDetail,
+  Fe as getParcelTrackingDetails,
+  ve as getPromotionDisplayStatus,
+  Le as getReturnDisplayStatus,
+  Ne as getReturnStatusName,
+  Oe as getShipmentDisplayStatus,
+  Ge as getShipmentRate,
+  we as getShipmentRates,
+  Ve as getShipmentStatusName,
+  xe as getStockTransferDisplayStatus,
+  Ee as getStockTransferStatusName,
+  Me as getUnitOfWeightName,
+  We as getUnitsOfWeightForSelect,
+  Je as goBack,
+  Ue as hasBeenPurchased,
+  qe as hasSingleTracking,
+  ze as isAttachmentValidNote,
+  Ke as isGroupedSelectValues,
+  Qe as isMultiValueSelected,
+  Ye as isSingleValueSelected,
+  Ze as navigateTo,
+  _e as referenceOrigins,
+  $e as setApiFormErrors,
+  je as sortAndGroupByDate,
+  Xe as timeSeparator,
+  as as useClickAway,
+  es as useCoreApi,
+  ss as useCoreSdkProvider,
+  ts as useDelayShow,
+  os as useIsChanged,
+  rs as useOnBlurFromContainer,
+  ns as useOverlay,
+  us as useResourceFilters,
+  is as useTagManager,
+  ps as useTokenProvider,
+  ls as useValidationFeedback,
+  bs as withSkeletonTemplate
 };

package/dist/mocks/server.d.ts

@@ -1 +1 @@
-export declare const server: import("msw/lib/node").SetupServer;
+export declare const server: import("msw/lib/node").SetupServerApi;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type TokenProviderProps } from './TokenProvider';
-export declare function MockTokenProvider({ children }: TokenProviderProps): JSX.Element;
+export declare function MockTokenProvider({ children, isInDashboard, onAppClose }: TokenProviderProps): JSX.Element;
 export declare namespace MockTokenProvider {
     var displayName: string;
 }

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

@@ -4,7 +4,6 @@ import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 import { type ReactNode } from 'react';
 import { type TokenProviderAllowedApp, type TokenProviderAuthSettings, type TokenProviderAuthUser, type TokenProviderRoleActions } from './types';
 export interface TokenProviderValue {
-    dashboardUrl?: string;
     settings: TokenProviderAuthSettings;
     user: TokenProviderAuthUser | null;
     organization: Organization | null;
@@ -65,6 +64,17 @@ export interface TokenProviderProps {
      * When `undefined` (default scenario), the token is expected to be retrieved from the `?accessToken=xxxx` query string or localStorage (in this order).
      */
     accessToken?: string;
+    /**
+     * Optional. Set to `true` to enable the app to be used within the dashboard.
+     * In this way the UI can be adapted.
+     */
+    isInDashboard?: boolean;
+    /**
+     * Optional. Define a callback to be invoked when the app is closed.
+     * When this is defined, it means the app is running as micro-frontend (eg: initialized from the dashboard, that needs to handle the go back).
+     * This methods will also be returned within the context as part of `TokenProviderValue` object.
+     */
+    onAppClose?: () => void;
 }
 export declare const AuthContext: import("react").Context<TokenProviderValue>;
 export declare const useTokenProvider: () => TokenProviderValue;

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

@@ -3,7 +3,6 @@ import { type Organization } from '@commercelayer/sdk';
 import { type TokenProviderAuthSettings, type TokenProviderAuthUser, type TokenProviderRolePermissions } from './types';
 interface TokenProviderInternalState {
     validAuthToken?: string;
-    dashboardUrl: string;
     isLoading: boolean;
     isTokenError: boolean;
     rolePermissions: TokenProviderRolePermissions;

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

@@ -1,5 +1,5 @@
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-export type TokenProviderAllowedApp = 'bundles' | 'customers' | 'exports' | 'gift_cards' | 'imports' | 'inventory' | 'orders' | 'price_lists' | 'promotions' | 'returns' | 'shipments' | 'skus' | 'stock_transfers' | 'subscriptions' | 'tags' | 'webhooks' | 'dashboard';
+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';
 export type TokenProviderTokenApplicationKind = 'integration' | 'sales_channel' | 'webapp' | 'resources' | TokenProviderAllowedApp;
 export type TokenProviderRoleActions = 'create' | 'destroy' | 'read' | 'update';
 export type TokenProviderPermissionItem = Record<TokenProviderRoleActions, boolean>;
@@ -73,11 +73,40 @@ export interface TokenProviderTokenInfo {
 }
 export type Mode = 'live' | 'test';
 export interface TokenProviderAuthSettings {
+    /**
+     * Access token that is being used to authenticate Core API requests.
+     */
     accessToken: string;
+    /**
+     * Domain used for Core API requests.
+     */
+    domain: string;
+    /**
+     * Current organization slug.
+     */
     organizationSlug: string;
+    /**
+     * Current app slug.
+     */
     appSlug: string;
-    domain: string;
+    /**
+     * Current mode (live or test)
+     */
     mode: Mode;
+    /**
+     * URL of the dashboard (eg: `https://your-org-slug.commercelayer.io`)
+     */
+    dashboardUrl: string;
+    /**
+     * When `true` it means that the app has been initialized from the Dashboard.
+     * Useful when is needed to tweak some UI elements.
+     */
+    isInDashboard: boolean;
+    /**
+     * Optional callback available within the TokenProvider context to be invoked when the app is closed.
+     * This is defined only if it has been declared when TokenProvider has been initialized.
+     */
+    onAppClose?: () => void;
 }
 export interface TokenProviderAuthUser {
     id: string;

package/dist/providers/createApp.d.ts

@@ -0,0 +1,57 @@
+import { type FC } from 'react';
+import { type Root } from 'react-dom/client';
+declare global {
+    interface Window {
+        clAppConfig: {
+            /**
+             * Specific domain to use for Commerce Layer API requests.
+             * It must be set as `commercelayer.io`.
+             */
+            domain: string;
+            /**
+             * Enable Google Tag Manager for the provided GTM ID.
+             */
+            gtmId?: string;
+        };
+        /**
+         * Method to mount the React application in the provider `node` with the set of options passed as `props`.
+         */
+        clApp?: {
+            init: (node?: HTMLElement, props?: ClAppProps) => Root | undefined;
+        };
+    }
+}
+export interface ClAppProps {
+    /**
+     * Base path for internal routing.
+     * Example: `my-app` if you want to serve the app at `https://my-domain.com/my-app/`.
+     */
+    routerBase?: string;
+    /**
+     * Organization slug to use for Commerce Layer API requests.
+     */
+    organizationSlug?: string;
+    /**
+     * Callback to be called when the user is not authenticated or the token is invalid/expired.
+     */
+    onInvalidAuth?: () => void;
+    /**
+     * Callback to be called when the app is closed (when go-back button from the app home page is clicked)
+     */
+    onAppClose?: () => void;
+    /**
+     * Handle some UI elements to be hidden when the app is loaded in the dashboard.
+     */
+    isInDashboard?: boolean;
+    /**
+     * Domain used for Core API requests
+     * @default 'commercelayer.io'
+     */
+    domain?: string;
+}
+/**
+ * Create a new app instance by adding the `clApp` methods into the global `window` object.
+ * 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: FC<ClAppProps>): void;