@sonic-equipment/ui 232.0.0 → 234.0.0

package/dist/exports.d.ts

@@ -398,6 +398,12 @@ export * from './shared/data/cart.data';
 export * from './shared/data/countries-languages.data';
 export * from './shared/data/navigation';
 export * from './shared/data/order';
+export * from './shared/error/basic-error-view';
+export * from './shared/error/default-error-view';
+export * from './shared/error/error-boundary';
+export * from './shared/error/errors';
+export * from './shared/error/global-unhandled-error-handler';
+export * from './shared/error/types';
 export * from './shared/feature-flags/use-feature-flags';
 export * from './shared/fetch/request';
 export * from './shared/ga/data-layer';

package/dist/index.js

@@ -397,6 +397,11 @@ export { cart } from './shared/data/cart.data.js';
 export { countries, dutch, english, france, french, german, germany, languages, netherlands, switzerland, unitedKingdom } from './shared/data/countries-languages.data.js';
 export { navigationData } from './shared/data/navigation.js';
 export { orderModel } from './shared/data/order.js';
+export { BasicErrorView } from './shared/error/basic-error-view.js';
+export { DefaultErrorView } from './shared/error/default-error-view.js';
+export { ErrorBoundary } from './shared/error/error-boundary.js';
+export { AuthenticationError, FatalError, NetworkError, RetryableError } from './shared/error/errors.js';
+export { GlobalUnhandledErrorHandler } from './shared/error/global-unhandled-error-handler.js';
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
 export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.js';
 export { dataLayer } from './shared/ga/data-layer.js';

package/dist/shared/api/storefront/services/translation-service.js

@@ -7,7 +7,7 @@ async function fetchTranslations(languageCode) {
         credentials: 'include',
         next: {
             revalidate: Infinity,
-            tags: [`translations-${languageCode}`],
+            tags: [`translations`, `translations-${languageCode}`],
         },
         url: `${config.SHOP_API_URL}/api/v1/translationdictionaries?page=1&pageSize=9999&languageCode=${languageCode}`,
     });

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

@@ -0,0 +1 @@
+export declare function BasicErrorView(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Heading } from '../../typography/heading/heading.js';
+
+function BasicErrorView() {
+    return (jsx("html", { lang: "en", children: jsx("body", { children: jsxs("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100vh',
+                    justifyContent: 'center',
+                    padding: '1rem',
+                    textAlign: 'center',
+                }, children: [jsx(Heading, { size: "m", children: "Something went wrong" }), jsx("p", { children: "An unexpected error occurred. Please try refreshing the page, or come back later." }), jsx("a", { href: "/", children: "Go to homepage" })] }) }) }));
+}
+
+export { BasicErrorView };

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

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

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultErrorView({ error, errorInfo, resetError, retryError, showErrorDetails, showReset, showRetry, }) {
+    return (jsxs("div", { style: {
+            backgroundColor: '#fef2f2',
+            border: '2px solid #ef4444',
+            borderRadius: '8px',
+            color: '#991b1b',
+            margin: '1rem',
+            padding: '2rem',
+        }, children: [jsx("h2", { style: { fontSize: '1.5rem', fontWeight: 'bold', marginTop: 0 }, children: "\u26A0\uFE0F Something went wrong" }), jsx("p", { style: { marginBottom: '1rem' }, children: error.message || 'An unexpected error occurred.' }), showErrorDetails && (jsxs("details", { style: { marginBottom: '1rem' }, children: [jsx("summary", { style: { cursor: 'pointer', fontWeight: 'bold' }, children: "Technical Details (only visible in development mode)" }), jsxs("div", { style: {
+                            backgroundColor: '#fff',
+                            border: '1px solid #fca5a5',
+                            borderRadius: '4px',
+                            fontFamily: 'monospace',
+                            fontSize: '0.875rem',
+                            marginTop: '0.5rem',
+                            maxHeight: '300px',
+                            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" }))] })] }));
+}
+
+export { DefaultErrorView };

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

@@ -0,0 +1,16 @@
+import { ComponentType, ErrorInfo, ReactNode } from 'react';
+import { ErrorContext, ErrorViewProps } from './types';
+export interface ErrorBoundaryProps {
+    ErrorView?: ComponentType<ErrorViewProps>;
+    allowReset?: boolean;
+    allowRetry?: boolean;
+    children: ReactNode;
+    context?: ErrorContext;
+    ignoreGlobalUnhandledErrors?: boolean;
+    onError?: (error: Error, errorInfo: ErrorInfo, context: ErrorContext | undefined) => void;
+    onReset?: () => void;
+    showErrorDetails?: boolean;
+}
+export declare function ErrorBoundary({ children, persistError, ...props }: ErrorBoundaryProps & {
+    persistError?: boolean;
+}): ReactNode;

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

@@ -0,0 +1,122 @@
+"use client";
+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 {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "resetTimeoutId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "resetErrorBoundary", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { onReset } = this.props;
+                this.setState({
+                    error: null,
+                    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();
+                }
+            }
+        });
+        this.state = {
+            error: null,
+            errorCount: 0,
+            errorInfo: null,
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+            hasError: true,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { context, onError, showErrorDetails } = this.props;
+        this.setState(prevState => ({
+            errorCount: prevState.errorCount + 1,
+            errorInfo,
+        }));
+        if (onError)
+            onError(error, errorInfo, context);
+        if (showErrorDetails) {
+            console.error('ErrorBoundary caught an error:', error, errorInfo);
+            if (context) {
+                console.error('Error context:', context);
+            }
+        }
+    }
+    componentDidUpdate() {
+        const { hasError } = this.state;
+    }
+    componentWillUnmount() {
+        if (this.resetTimeoutId) {
+            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 }));
+    }
+}
+Object.defineProperty(InternalErrorBoundary, "displayName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'SonicErrorBoundary'
+});
+function ErrorBoundary({ children, persistError = false, ...props }) {
+    return (jsx(InternalErrorBoundary, { ...props, children: props.ignoreGlobalUnhandledErrors ? (children) : (jsx(GlobalUnhandledErrorHandler, { context: props.context, children: children })) }, persistError ? undefined : Math.random().toString()));
+}
+
+export { ErrorBoundary };

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

@@ -0,0 +1,17 @@
+export declare class RetryableError extends Error {
+    readonly isRetryable = true;
+    readonly retryDelay?: number;
+    constructor(message: string, retryDelay?: number);
+}
+export declare class FatalError extends Error {
+    readonly isFatal = true;
+    constructor(message: string);
+}
+export declare class NetworkError extends RetryableError {
+    readonly statusCode?: number;
+    constructor(message: string, statusCode?: number, retryDelay?: number);
+}
+export declare class AuthenticationError extends Error {
+    readonly isAuthError = true;
+    constructor(message?: string);
+}

package/dist/shared/error/errors.js

@@ -0,0 +1,62 @@
+class RetryableError extends Error {
+    constructor(message, retryDelay) {
+        super(message);
+        Object.defineProperty(this, "isRetryable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "retryDelay", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.name = 'RetryableError';
+        this.retryDelay = retryDelay;
+        Object.setPrototypeOf(this, RetryableError.prototype);
+    }
+}
+class FatalError extends Error {
+    constructor(message) {
+        super(message);
+        Object.defineProperty(this, "isFatal", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        this.name = 'FatalError';
+        Object.setPrototypeOf(this, FatalError.prototype);
+    }
+}
+class NetworkError extends RetryableError {
+    constructor(message, statusCode, retryDelay = 3000) {
+        super(message, retryDelay);
+        Object.defineProperty(this, "statusCode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.name = 'NetworkError';
+        this.statusCode = statusCode;
+        Object.setPrototypeOf(this, NetworkError.prototype);
+    }
+}
+class AuthenticationError extends Error {
+    constructor(message = 'Authentication required') {
+        super(message);
+        Object.defineProperty(this, "isAuthError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        this.name = 'AuthenticationError';
+        Object.setPrototypeOf(this, AuthenticationError.prototype);
+    }
+}
+
+export { AuthenticationError, FatalError, NetworkError, RetryableError };

package/dist/shared/error/global-unhandled-error-handler.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ErrorContext } from './types';
+interface GlobalUnhandledErrorHandlerProps {
+    captureUnhandledRejections?: boolean;
+    captureWindowErrors?: boolean;
+    context?: ErrorContext;
+    ignore?: boolean;
+    onErrorCaught?: (error: Error, source: 'unhandledrejection' | 'error', context?: ErrorContext) => void;
+}
+export declare function GlobalUnhandledErrorHandler({ children, ...props }: GlobalUnhandledErrorHandlerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useEffect, useState, useMemo } from 'react';
+
+function InternalGlobalUnhandledErrorHandler({ captureUnhandledRejections = true, captureWindowErrors = true, context, ignore, onErrorCaught, }) {
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (typeof window === 'undefined' || ignore)
+            return;
+        const handleUnhandledRejection = (event) => {
+            event.preventDefault();
+            const error = event.reason instanceof Error
+                ? event.reason
+                : new Error(String(event.reason));
+            if (onErrorCaught)
+                onErrorCaught(error, 'unhandledrejection', context);
+            setError(error);
+        };
+        const handleWindowError = (event, _source, _lineno, _colno, error) => {
+            const actualError = error ||
+                (typeof event === 'string'
+                    ? new Error(event)
+                    : new Error(event.message));
+            if (onErrorCaught)
+                onErrorCaught(actualError, 'error', context);
+            setError(actualError);
+            return true;
+        };
+        if (captureUnhandledRejections)
+            window.addEventListener('unhandledrejection', handleUnhandledRejection);
+        if (captureWindowErrors)
+            window.addEventListener('error', handleWindowError);
+        return () => {
+            if (typeof window === 'undefined')
+                return;
+            if (captureUnhandledRejections)
+                window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+            if (captureWindowErrors)
+                window.removeEventListener('error', handleWindowError);
+        };
+    }, [
+        onErrorCaught,
+        captureWindowErrors,
+        captureUnhandledRejections,
+        context,
+        ignore,
+    ]);
+    // Throw for the error boundary to catch
+    if (error)
+        throw error;
+    return null;
+}
+const ErrorBoundaryContext = createContext(undefined);
+function GlobalUnhandledErrorHandler({ children, ...props }) {
+    const context = useContext(ErrorBoundaryContext);
+    useEffect(() => {
+        if (!context)
+            return;
+        context.hasChild(true);
+        return () => context.hasChild(false);
+    }, [context]);
+    const [ignore, setIgnore] = useState(props.ignore ?? false);
+    const value = useMemo(() => ({ hasChild: setIgnore }), [setIgnore]);
+    return (jsxs(ErrorBoundaryContext.Provider, { value: value, children: [jsx(InternalGlobalUnhandledErrorHandler, { ...props, ignore: ignore }, ignore.toString()), children] }));
+}
+
+export { GlobalUnhandledErrorHandler };

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

@@ -0,0 +1,15 @@
+import { ErrorInfo } from 'react';
+export interface ErrorViewProps {
+    context?: ErrorContext;
+    error: Error;
+    errorInfo?: ErrorInfo;
+    resetError: () => void;
+    retryError: () => void;
+    showErrorDetails?: boolean;
+    showReset?: boolean;
+    showRetry?: boolean;
+}
+export interface ErrorContext {
+    [key: string]: unknown;
+    feature?: string;
+}

package/package.json

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