@sonic-equipment/ui 235.0.0 → 236.0.0

package/dist/exports.d.ts

@@ -471,6 +471,7 @@ export * from './shared/utils/merge';
 export * from './shared/utils/number';
 export * from './shared/utils/price';
 export * from './shared/utils/promise';
+export * from './shared/utils/query-client';
 export * from './shared/utils/random';
 export * from './shared/utils/refs';
 export * from './shared/utils/scrolling';

package/dist/index.js

@@ -466,6 +466,7 @@ export { clone, deepMerge, isPlainObject, default as main, merge } from './share
 export { ensureNumber } from './shared/utils/number.js';
 export { formatCurrency, getCurrencyByCountryCode, parseCurrency } from './shared/utils/price.js';
 export { isPromise, wait } from './shared/utils/promise.js';
+export { createQueryClient } from './shared/utils/query-client.js';
 export { random, randomInt } from './shared/utils/random.js';
 export { multiRef } from './shared/utils/refs.js';
 export { scrollIntoViewRef, scrollToTop } from './shared/utils/scrolling.js';

package/dist/intl/missing-translation-provider.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface MissingTranslationProviderProps {
     children: ReactNode;
 }
-export declare function MissingTranslationProvider({ children, }: MissingTranslationProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MissingTranslationProvider({ children, }: MissingTranslationProviderProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 export {};

package/dist/intl/missing-translation-provider.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useCallback, useMemo } from 'react';
+import { logger } from '../logging/logger.js';
 import { useFetchTranslations } from '../shared/api/storefront/hooks/translation/use-fetch-translations.js';
 import { useFeatureFlags } from '../shared/feature-flags/use-feature-flags.js';
 import { IntlContext } from './intl-context.js';
@@ -10,7 +11,7 @@ import { getLanguageCodeFromCultureCode } from './utils.js';
 function MissingTranslationProvider({ children, }) {
     const { missing, translations: showTranslations } = useFeatureFlags();
     const intlProps = useIntl();
-    const { data: translations, isLoading } = useFetchTranslations(getLanguageCodeFromCultureCode(intlProps.cultureCode), { enabled: missing });
+    const { data: translations, error, isLoading, } = useFetchTranslations(getLanguageCodeFromCultureCode(intlProps.cultureCode), { enabled: missing });
     const formattedMessage = useCallback((id, options) => {
         const message = intlProps.formattedMessage(id, options);
         if (!missing && !showTranslations)
@@ -32,6 +33,10 @@ function MissingTranslationProvider({ children, }) {
     }), [intlProps, formattedMessage]);
     if (!missing && !showTranslations)
         return jsx(Fragment, { children: children });
+    if (error) {
+        logger.error('MissingTranslationProvider::Error fetching translations', error);
+        return children;
+    }
     if (missing && (isLoading || !translations))
         return null;
     return jsx(IntlContext.Provider, { value: value, children: children });

package/dist/pages/error-page/error-page.js

@@ -1,11 +1,9 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { logger } from '../../logging/logger.js';
-import { isRequestError } from '../../shared/fetch/request.js';
+import { DefaultErrorView } from '../../shared/error/default-error-view.js';
 import { usePaths } from '../../shared/routing/use-paths.js';
-import { environment } from '../../shared/utils/environment.js';
-import { Heading } from '../../typography/heading/heading.js';
 import { Page } from '../components/page/page.js';
 
 function ErrorPage({ error }) {
@@ -16,7 +14,7 @@ function ErrorPage({ error }) {
     return (jsx(Page, { breadcrumb: [
             { href: paths.HOME, label: 'Home' },
             { href: paths.HOME, label: 'Error' },
-        ], "data-test-selector": "errorPage", title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
+        ], "data-test-selector": "errorPage", title: "Something went wrong", children: jsx(DefaultErrorView, { error: error }) }));
 }
 
 export { ErrorPage };

package/dist/pages/my-sonic/actions/create-ship-to-address/connected-create-ship-to-address-form.js

@@ -10,11 +10,11 @@ import { Message } from '../../../../message/message.js';
 import { usePatchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-patch-current-account.js';
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { usePostShipToAddress } from '../../../../shared/api/storefront/hooks/customer/use-post-ship-to-address.js';
+import { DefaultErrorView } from '../../../../shared/error/default-error-view.js';
 import { NotFoundRequestError } from '../../../../shared/fetch/request.js';
 import { useNavigate } from '../../../../shared/routing/use-navigate.js';
 import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { Heading } from '../../../../typography/heading/heading.js';
-import { ErrorPage } from '../../../error-page/error-page.js';
 import { LoadingPage } from '../../../loading-page/loading-page.js';
 import formStyles from '../../../../forms/partials/address-form/address-form.module.css.js';
 import styles from './create-ship-to-address.module.css.js';
@@ -32,9 +32,9 @@ function ConnectedCreateShipToAddressForm({ billToId, returnUrl, }) {
     if (errorShipToAddress && errorShipToAddress instanceof NotFoundRequestError)
         return (jsx(Heading, { size: "l", children: jsx(FormattedMessage, { id: "Address not found" }) }));
     if (errorCountries)
-        return jsx(ErrorPage, { error: errorCountries });
+        return jsx(DefaultErrorView, { error: errorCountries });
     if (!countries) {
-        return jsx(ErrorPage, { error: new Error('No countries data available.') });
+        return (jsx(DefaultErrorView, { error: new Error('No countries data available.') }));
     }
     return (jsxs(Form, { className: formStyles.form, "data-test-selector": "shipToAddressForm", onSubmit: async ({ formData }) => {
             const countryFormValue = formData.get('countrySelect')?.toString();

package/dist/pages/my-sonic/actions/edit-bill-to-address/connected-edit-bill-to-address-form.js

@@ -9,10 +9,10 @@ import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { Message } from '../../../../message/message.js';
 import { useFetchBillToAddress } from '../../../../shared/api/storefront/hooks/customer/use-fetch-bill-to-address.js';
 import { usePatchBillToAddress } from '../../../../shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
+import { DefaultErrorView } from '../../../../shared/error/default-error-view.js';
 import { NotFoundRequestError } from '../../../../shared/fetch/request.js';
 import { useNavigate } from '../../../../shared/routing/use-navigate.js';
 import { Heading } from '../../../../typography/heading/heading.js';
-import { ErrorPage } from '../../../error-page/error-page.js';
 import { LoadingPage } from '../../../loading-page/loading-page.js';
 import formStyles from '../../../../forms/partials/address-form/address-form.module.css.js';
 import styles from './edit-bill-to-address.module.css.js';
@@ -61,11 +61,11 @@ function ConnectedEditBillToAddressForm({ billToId, returnUrl, }) {
     if (errorBillToAddress && errorBillToAddress instanceof NotFoundRequestError)
         return (jsx(Heading, { size: "l", children: jsx(FormattedMessage, { id: "Address not found" }) }));
     if (errorBillToAddress)
-        return jsx(ErrorPage, { error: errorBillToAddress });
+        return jsx(DefaultErrorView, { error: errorBillToAddress });
     if (errorCountries)
-        return jsx(ErrorPage, { error: errorCountries });
+        return jsx(DefaultErrorView, { error: errorCountries });
     if (!billToAddress || !countries) {
-        return (jsx(ErrorPage, { error: new Error('No bill to address or countries data available.') }));
+        return (jsx(DefaultErrorView, { error: new Error('No bill to address or countries data available.') }));
     }
     return (jsxs(Form, { className: formStyles.form, "data-test-selector": "billToAddressForm", onSubmit: ({ formData }) => {
             const countryFormValue = formData.get('countrySelect')?.toString();

package/dist/pages/my-sonic/actions/edit-ship-to-address/connected-edit-ship-to-address-form.js

@@ -12,10 +12,10 @@ import { usePatchCurrentAccount } from '../../../../shared/api/storefront/hooks/
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { useFetchShipToAddress } from '../../../../shared/api/storefront/hooks/customer/use-fetch-ship-to-address.js';
 import { usePatchShipToAddress } from '../../../../shared/api/storefront/hooks/customer/use-patch-ship-to-address.js';
+import { DefaultErrorView } from '../../../../shared/error/default-error-view.js';
 import { NotFoundRequestError } from '../../../../shared/fetch/request.js';
 import { useNavigate } from '../../../../shared/routing/use-navigate.js';
 import { Heading } from '../../../../typography/heading/heading.js';
-import { ErrorPage } from '../../../error-page/error-page.js';
 import { LoadingPage } from '../../../loading-page/loading-page.js';
 import formStyles from '../../../../forms/partials/address-form/address-form.module.css.js';
 import styles from './edit-ship-to-address.module.css.js';
@@ -66,11 +66,11 @@ function ConnectedEditShipToAddressForm({ billToId, returnUrl, shipToId, }) {
     if (errorShipToAddress && errorShipToAddress instanceof NotFoundRequestError)
         return (jsx(Heading, { size: "l", children: jsx(FormattedMessage, { id: "Address not found" }) }));
     if (errorShipToAddress)
-        return jsx(ErrorPage, { error: errorShipToAddress });
+        return jsx(DefaultErrorView, { error: errorShipToAddress });
     if (errorCountries)
-        return jsx(ErrorPage, { error: errorCountries });
+        return jsx(DefaultErrorView, { error: errorCountries });
     if (!shipToAddress || !countries) {
-        return (jsx(ErrorPage, { error: new Error('No ship to address or countries data available.') }));
+        return (jsx(DefaultErrorView, { error: new Error('No ship to address or countries data available.') }));
     }
     return (jsxs(Form, { className: formStyles.form, "data-test-selector": "shipToAddressForm", onSubmit: async ({ formData }) => {
             const countryFormValue = formData.get('countrySelect')?.toString();

package/dist/shared/error/default-error-view.d.ts

@@ -1,2 +1,2 @@
 import { ErrorViewProps } from './types';
-export declare function DefaultErrorView({ error, errorInfo, resetError, retryError, showErrorDetails, showReset, showRetry, }: ErrorViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultErrorView({ error, errorInfo, resetError, showErrorDetails, showReset, }: ErrorViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/shared/error/default-error-view.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { environment } from '../utils/environment.js';
 
-function DefaultErrorView({ error, errorInfo, resetError, retryError, showErrorDetails, showReset, showRetry, }) {
+function DefaultErrorView({ error, errorInfo, resetError, showErrorDetails = environment !== 'production', showReset, }) {
     return (jsxs("div", { style: {
             backgroundColor: '#fef2f2',
             border: '2px solid #ef4444',
@@ -20,23 +21,15 @@ function DefaultErrorView({ error, errorInfo, resetError, retryError, showErrorD
                             overflow: 'auto',
                             padding: '1rem',
                             whiteSpace: 'pre-wrap',
-                        }, children: [jsxs("div", { style: { marginBottom: '1rem' }, children: [jsx("strong", { children: "Error:" }), " ", error.toString()] }), error.stack && (jsxs("div", { style: { marginBottom: '1rem' }, children: [jsx("strong", { children: "Stack:" }), jsx("pre", { style: { margin: '0.5rem 0 0 0' }, children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { children: [jsx("strong", { children: "Component Stack:" }), jsx("pre", { style: { margin: '0.5rem 0 0 0' }, children: errorInfo.componentStack })] }))] })] })), jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }, children: [showRetry && (jsx("button", { onClick: retryError, style: {
-                            backgroundColor: '#3b82f6',
-                            border: 'none',
-                            borderRadius: '4px',
-                            color: 'white',
-                            cursor: 'pointer',
-                            fontWeight: '500',
-                            padding: '0.5rem 1rem',
-                        }, type: "button", children: "\uD83D\uDD04 Try again" })), showReset && (jsx("button", { onClick: resetError, style: {
-                            backgroundColor: '#6b7280',
-                            border: 'none',
-                            borderRadius: '4px',
-                            color: 'white',
-                            cursor: 'pointer',
-                            fontWeight: '500',
-                            padding: '0.5rem 1rem',
-                        }, type: "button", children: "\u21BA Reset" }))] })] }));
+                        }, children: [jsxs("div", { style: { marginBottom: '1rem' }, children: [jsx("strong", { children: "Error:" }), " ", error.toString()] }), error.stack && (jsxs("div", { style: { marginBottom: '1rem' }, children: [jsx("strong", { children: "Stack:" }), jsx("pre", { style: { margin: '0.5rem 0 0 0' }, children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { children: [jsx("strong", { children: "Component Stack:" }), jsx("pre", { style: { margin: '0.5rem 0 0 0' }, children: errorInfo.componentStack })] }))] })] })), jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }, children: showReset && resetError && (jsx("button", { onClick: resetError, style: {
+                        backgroundColor: '#6b7280',
+                        border: 'none',
+                        borderRadius: '4px',
+                        color: 'white',
+                        cursor: 'pointer',
+                        fontWeight: '500',
+                        padding: '0.5rem 1rem',
+                    }, type: "button", children: "\u21BA Reset" })) })] }));
 }
 
 export { DefaultErrorView };

package/dist/shared/error/error-boundary.d.ts

@@ -3,7 +3,6 @@ import { ErrorContext, ErrorViewProps } from './types';
 export interface ErrorBoundaryProps {
     ErrorView?: ComponentType<ErrorViewProps>;
     allowReset?: boolean;
-    allowRetry?: boolean;
     children: ReactNode;
     context?: ErrorContext;
     ignoreGlobalUnhandledErrors?: boolean;

package/dist/shared/error/error-boundary.js

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { DefaultErrorView } from './default-error-view.js';
-import { NetworkError } from './errors.js';
 import { GlobalUnhandledErrorHandler } from './global-unhandled-error-handler.js';
 
 class InternalErrorBoundary extends Component {
@@ -25,28 +24,7 @@ class InternalErrorBoundary extends Component {
                     errorCount: 0,
                     errorInfo: null,
                     hasError: false,
-                });
-                if (onReset) {
-                    onReset();
-                }
-            }
-        });
-        Object.defineProperty(this, "retryErrorBoundary", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const { error } = this.state;
-                if (error &&
-                    'retryDelay' in error &&
-                    typeof error.retryDelay === 'number') {
-                    this.resetTimeoutId = window?.setTimeout(() => {
-                        this.resetErrorBoundary();
-                    }, error.retryDelay);
-                }
-                else {
-                    this.resetErrorBoundary();
-                }
+                }, onReset);
             }
         });
         this.state = {
@@ -95,28 +73,12 @@ class InternalErrorBoundary extends Component {
             window?.clearTimeout(this.resetTimeoutId);
         }
     }
-    shouldShowRetry() {
-        const { allowRetry } = this.props;
-        const { error } = this.state;
-        if (allowRetry === true)
-            return true;
-        if (allowRetry === false)
-            return false;
-        if (error && 'isRetryable' in error) {
-            return true;
-        }
-        if (error instanceof NetworkError) {
-            return true;
-        }
-        return false;
-    }
     render() {
         const { error, errorInfo, hasError } = this.state;
         const { allowReset, children, context, ErrorView = DefaultErrorView, showErrorDetails, } = this.props;
         if (!hasError || !error)
             return children;
-        const showRetry = this.shouldShowRetry();
-        return (jsx(ErrorView, { context: context, error: error, errorInfo: errorInfo || undefined, resetError: this.resetErrorBoundary, retryError: this.retryErrorBoundary, showErrorDetails: Boolean(showErrorDetails), showReset: allowReset !== false, showRetry: showRetry }));
+        return (jsx(ErrorView, { context: context, error: error, errorInfo: errorInfo || undefined, resetError: this.resetErrorBoundary, showErrorDetails: Boolean(showErrorDetails), showReset: allowReset }));
     }
 }
 Object.defineProperty(InternalErrorBoundary, "displayName", {

package/dist/shared/error/global-unhandled-error-handler.js

@@ -14,7 +14,9 @@ function InternalGlobalUnhandledErrorHandler({ captureUnhandledRejections = true
                 : new Error(String(event.reason));
             if (onErrorCaught)
                 onErrorCaught(error, 'unhandledrejection', context);
-            setError(error);
+            queueMicrotask(() => {
+                setError(error);
+            });
         };
         const handleWindowError = (event, _source, _lineno, _colno, error) => {
             const actualError = error ||
@@ -23,7 +25,9 @@ function InternalGlobalUnhandledErrorHandler({ captureUnhandledRejections = true
                     : new Error(event.message));
             if (onErrorCaught)
                 onErrorCaught(actualError, 'error', context);
-            setError(actualError);
+            queueMicrotask(() => {
+                setError(actualError);
+            });
             return true;
         };
         if (captureUnhandledRejections)

package/dist/shared/error/types.d.ts

@@ -3,11 +3,9 @@ export interface ErrorViewProps {
     context?: ErrorContext;
     error: Error;
     errorInfo?: ErrorInfo;
-    resetError: () => void;
-    retryError: () => void;
+    resetError?: () => void;
     showErrorDetails?: boolean;
     showReset?: boolean;
-    showRetry?: boolean;
 }
 export interface ErrorContext {
     [key: string]: unknown;

package/dist/shared/providers/react-query-container.js

@@ -1,23 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { environment } from '../utils/environment.js';
-import { TIME } from '../utils/time.js';
+import { createQueryClient } from '../utils/query-client.js';
 
-function createQueryClient() {
-    return new QueryClient({
-        defaultOptions: {
-            queries: {
-                /* Set gcTime and staleTime to 0 to disable react query cache */
-                gcTime: 1 * TIME.DAY,
-                retry: false,
-                staleTime: 1 * TIME.DAY,
-            },
-        },
-    });
-}
 const globalQueryClient = createQueryClient();
 function ReactQueryContainer({ children, enableDevTools = environment !== 'production', queryClient: _queryClient, }) {
     const queryClient = useMemo(() => _queryClient || createQueryClient(), [_queryClient]);

package/dist/shared/utils/query-client.d.ts

@@ -0,0 +1,4 @@
+import { QueryClient } from '@tanstack/react-query';
+export declare function createQueryClient({ throwOnError, }?: {
+    throwOnError?: (error: unknown) => boolean;
+}): QueryClient;

package/dist/shared/utils/query-client.js

@@ -0,0 +1,33 @@
+import { QueryClient } from '@tanstack/react-query';
+import { TIME } from './time.js';
+
+/* Example of how to handle specific errors globally
+ * an have react query re-throw them to be caught by an error boundary
+
+  throwOnError: _error => {
+      return (
+        error instanceof UnauthorizedRequestError ||
+        error instanceof ForbiddenRequestError
+      )
+  },
+
+*/
+function createQueryClient({ throwOnError, } = {}) {
+    return new QueryClient({
+        defaultOptions: {
+            mutations: {
+                retry: false,
+                throwOnError,
+            },
+            queries: {
+                /* Set gcTime and staleTime to 0 to disable react query cache */
+                gcTime: 1 * TIME.DAY,
+                retry: false,
+                staleTime: 1 * TIME.DAY,
+                throwOnError,
+            },
+        },
+    });
+}
+
+export { createQueryClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "235.0.0",
+  "version": "236.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {