@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/shared/data/order.d.ts

@@ -0,0 +1,2 @@
+import { OrderModel } from '../api/storefront/model/storefront.model';
+export declare const orderModel: OrderModel;

package/dist/shared/data/order.js

@@ -0,0 +1,41 @@
+const orderModel = {
+    billToCity: 'Basel',
+    billToPostalCode: '4051',
+    btAddress1: '1 St. Alban-Graben',
+    btAddress2: '',
+    btAddress3: '',
+    btCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    btCountry: 'Switzerland',
+    currencyCode: 'CHF',
+    customerNumber: 'C002733',
+    id: 'bedcd4dd-cc40-4a96-aef9-b3440054ae76',
+    orderDate: new Date('2025-08-24T00:00:00'),
+    orderLines: [
+        {
+            altText: 'TEST Slotted screwdriver 10mm',
+            customerProductNumber: '',
+            id: '7199e7c5-a248-44a2-ad37-b3440054ae78',
+            lineTotal: 5000,
+            mediumImagePath: 'https://images.sonic-equipment.com/TEST13110/test-slotted-screwdriver-10mm_BaseProductImage_13355-002.webp',
+            productId: 'd9d13b6a-85c6-488d-8837-b259017ef5ab',
+            productUri: '/Product/TEST13110-Slotted-screwdriver-10mm',
+            qtyOrdered: 10,
+            shortDescription: 'TEST Slotted screwdriver 10mm',
+            unitPrice: 500,
+        },
+    ],
+    orderSubTotal: 5000,
+    orderTotal: 5405,
+    shipToCity: 'Basel',
+    shipToPostalCode: '4051',
+    shippingAndHandling: 0,
+    stAddress1: '1 St. Alban-Graben',
+    stAddress2: '',
+    stAddress3: '',
+    stCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    stCountry: 'Switzerland',
+    status: 'ForwardToReseller',
+    taxAmount: 405,
+};
+
+export { orderModel };

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,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Heading } from '../../typography/heading/heading.js';
+import styles from './basic-error-view.module.css.js';
+
+function BasicErrorView() {
+    return (jsxs("html", { className: styles['basic-error-view'], lang: "en", children: [jsx("head", { children: jsx("title", { children: "Something went wrong" }) }), jsx("body", { children: jsxs("main", { "data-test-selector": "basicErrorView", children: [jsx(Heading, { className: styles['title'], size: "s", tag: "h1", 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 the homepage" })] }) })] }));
+}
+
+export { BasicErrorView };

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

@@ -0,0 +1,3 @@
+var styles = {"basic-error-view":"basic-error-view-module-iKnnd","title":"basic-error-view-module-vyq6y"};
+
+export { styles as default };

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

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

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Button } from '../../buttons/button/button.js';
+import { Details } from '../../display/details/details.js';
+import { Icon } from '../../icon/icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Heading } from '../../typography/heading/heading.js';
+import { isProductionEnvironment } from '../utils/environment.js';
+import styles from './default-error-view.module.css.js';
+
+function DefaultErrorView({ className, error, errorInfo, resetError, resetLabel, showErrorDetails = !isProductionEnvironment, showReset, title, }) {
+    const t = useFormattedMessage();
+    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(Icon, { name: "Refresh", size: "sm" }), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
+}
+
+export { DefaultErrorView };

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

@@ -0,0 +1,3 @@
+var styles = {"default-error-view":"default-error-view-module-IXKuf","title":"default-error-view-module-ZfydO","error-details":"default-error-view-module-pGbzW","error-kind":"default-error-view-module-LRchn","error-info":"default-error-view-module-Tz1Vb","error-info-title":"default-error-view-module-go6yg","error-info-data":"default-error-view-module--B3DB"};
+
+export { styles as default };

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;
+    children: ReactNode;
+    context?: ErrorContext;
+    ignoreGlobalUnhandledErrors?: boolean;
+    onError?: (error: Error, errorInfo: ErrorInfo, context: ErrorContext | undefined) => void;
+    onReset?: () => void;
+    shouldCaptureError?: (error: Error, errorInfo?: React.ErrorInfo) => boolean;
+    showErrorDetails?: boolean;
+}
+export declare function ErrorBoundary({ children, persistError, ...props }: ErrorBoundaryProps & {
+    persistError?: boolean;
+}): ReactNode;

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

@@ -0,0 +1,94 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { DefaultErrorView } from './default-error-view.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,
+                }, onReset);
+            }
+        });
+        this.state = {
+            error: null,
+            errorCount: 0,
+            errorInfo: null,
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+            hasError: true,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { context, onError, shouldCaptureError, showErrorDetails } = this.props;
+        if (shouldCaptureError && !shouldCaptureError(error, errorInfo)) {
+            return this.setState({
+                error: null,
+                errorCount: 0,
+                errorInfo: null,
+                hasError: false,
+            }, () => {
+                throw error;
+            });
+        }
+        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);
+        }
+    }
+    render() {
+        const { error, errorInfo, hasError } = this.state;
+        const { allowReset, children, context, ErrorView = DefaultErrorView, showErrorDetails, } = this.props;
+        if (!hasError || !error)
+            return children;
+        return (jsx(ErrorView, { context: context, error: error, errorInfo: errorInfo || undefined, resetError: this.resetErrorBoundary, showErrorDetails: Boolean(showErrorDetails), showReset: allowReset }));
+    }
+}
+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,71 @@
+"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);
+            queueMicrotask(() => {
+                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);
+            queueMicrotask(() => {
+                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,16 @@
+import { ErrorInfo } from 'react';
+export interface ErrorViewProps {
+    className?: string;
+    context?: ErrorContext;
+    error: Error;
+    errorInfo?: ErrorInfo;
+    resetError?: () => void;
+    resetLabel?: string;
+    showErrorDetails?: boolean;
+    showReset?: boolean;
+    title?: string;
+}
+export interface ErrorContext {
+    [key: string]: unknown;
+    feature?: string;
+}

package/dist/shared/feature-flags/use-feature-flags.d.ts

@@ -1,9 +1,10 @@
 declare const features: {
-    readonly cart: "cartV2";
-    readonly language: "language";
-    readonly pdp: "pdpV2";
+    readonly cartv1: "cartV1";
+    readonly checkoutv1: "checkoutV1";
+    readonly missing: "missing";
+    readonly pdpv1: "pdpV1";
     readonly plpv1: "plpV1";
-    readonly searchv1: "searchV1";
+    readonly translations: "translations";
 };
 type FeatureKeys = keyof typeof features;
 type FeatureValues = (typeof features)[FeatureKeys];

package/dist/shared/feature-flags/use-feature-flags.js

@@ -0,0 +1,49 @@
+"use client";
+import { useContext, useMemo } from 'react';
+import qs from 'query-string';
+import { LocalStorageContext } from '../local-storage/local-storage-context.js';
+
+const features = {
+    cartv1: 'cartV1',
+    checkoutv1: 'checkoutV1',
+    missing: 'missing',
+    pdpv1: 'pdpV1',
+    plpv1: 'plpV1',
+    translations: 'translations',
+};
+function useFeatureFlags() {
+    const { localStorage } = useContext(LocalStorageContext) ?? {};
+    const { search } = typeof window === 'undefined'
+        ? {
+            search: '',
+        }
+        : window.location;
+    return useMemo(() => {
+        const queryParams = qs.parse(search);
+        const hasQueryStringFeatures = queryParams['features'] !== undefined && queryParams['features'] !== null;
+        if (!hasQueryStringFeatures) {
+            /* When no new feature flags are set get them from localStorage */
+            return Object.entries(features).reduce((acc, [, value]) => ({
+                ...acc,
+                [value]: localStorage?.getItem(value) === 'true',
+            }), {});
+        }
+        const queryStringFeatures = String(queryParams['features'])
+            .toLowerCase()
+            .split(',');
+        const featureResults = Object.entries(features).map(([key, value]) => ({
+            key: key,
+            selected: queryStringFeatures.includes(key),
+            value: value,
+        }));
+        featureResults.forEach(({ selected, value }) => {
+            localStorage?.setItem(value, selected.toString());
+        });
+        return featureResults.reduce((acc, { selected, value }) => ({
+            ...acc,
+            [value]: selected,
+        }), {});
+    }, [search, localStorage]);
+}
+
+export { useFeatureFlags };

package/dist/shared/fetch/request.d.ts

@@ -3,35 +3,38 @@ interface RequestErrorOptions {
     context?: string;
     options?: RequestOptions;
 }
+interface RequestErrorToJSONReturnType {
+    context: string | undefined;
+    error: {
+        message: string;
+        stack: string | undefined;
+    };
+    isRequestError: boolean;
+    request: RequestOptions | object;
+    response: {
+        body: unknown;
+        status: number;
+        statusText: string | undefined;
+    };
+}
 export declare class RequestError extends Error {
     isRequestError: boolean;
     status: number;
     statusText?: string;
     body?: any;
+    response?: Response;
     context?: string;
     options?: RequestOptions;
     constructor(responseOrError: Response | any, options?: RequestErrorOptions, status?: number, statusText?: string);
-    toJSON(): {
-        context: string | undefined;
-        error: {
-            message: string;
-            stack: string | undefined;
-        };
-        isRequestError: boolean;
-        request: {};
-        response: {
-            body: any;
-            status: number;
-            statusText: string | undefined;
-        };
-    };
+    toJSON(): RequestErrorToJSONReturnType;
 }
 export declare const isRequestError: (error: any) => error is RequestError;
 export declare class BadRequestError extends RequestError {
     constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
 }
 export declare class UnauthorizedRequestError extends RequestError {
-    constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
+    response: Response;
+    constructor(responseOrError: Response, options?: RequestErrorOptions);
 }
 export declare class ForbiddenRequestError extends RequestError {
     constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
@@ -49,49 +52,59 @@ export declare class InternalServerErrorRequestError extends RequestError {
     constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
 }
 export type RequestHeaders = Record<string, string | null | undefined>;
-type RequestHeadersWithBody = RequestHeaders & {
+export type RequestHeadersWithBody = RequestHeaders & {
     'Content-Type': string;
 };
-interface BaseRequestOptions {
+export interface BaseRequestOptions {
+    cache?: RequestCache;
     credentials?: RequestCredentials;
     headers?: RequestHeaders;
     method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';
+    next?: {
+        revalidate?: number | false;
+        tags?: string[];
+    };
     params?: Record<string, any>;
     timeout?: number;
     url: string;
 }
-interface RequestOptionsWithFormData extends BaseRequestOptions {
+export interface RequestOptionsWithFormData extends BaseRequestOptions {
     body: FormData;
     headers: RequestHeaders;
 }
-interface RequestOptionsWithBody extends BaseRequestOptions {
+export interface RequestOptionsWithBody extends BaseRequestOptions {
     body: unknown;
     headers: RequestHeadersWithBody;
 }
-interface RequestOptionsWithoutBody extends BaseRequestOptions {
+export interface RequestOptionsWithoutBody extends BaseRequestOptions {
     body?: never;
     headers?: RequestHeaders;
 }
-type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
-type AfterRequestHandler<T> = (args: {
+export type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
+type BeforeRequestHandler = (options: RequestOptions) => RequestOptions | void;
+type BeforeRequestHandlerAsync = (options?: RequestOptions) => Promise<RequestOptions | void>;
+export interface AfterRequestHandlerArgs<T> {
     body: T | undefined;
     error?: RequestError;
     options: RequestOptions;
     response?: Response;
-}) => void;
-type BeforeRequestHandler = (options?: RequestOptions) => RequestOptions | void;
-type RequestReturnType<T> = Promise<{
+}
+export type AfterRequestHandler<T> = (args: AfterRequestHandlerArgs<T>) => void;
+export type AfterRequestHandlerAsync<T> = (args: AfterRequestHandlerArgs<T>) => Promise<void>;
+export declare const isJsonBody: (options: RequestOptions) => boolean;
+export declare const isFormData: (body: unknown) => body is FormData;
+export type RequestReturnType<T> = Promise<{
     body: T;
     headers: Headers;
     status: number;
     statusText: string;
 }>;
-interface Request {
+export interface Request {
     <T>(options: RequestOptions): RequestReturnType<T>;
-    _afterHandlers: AfterRequestHandler<any>[];
-    _beforeHandlers: BeforeRequestHandler[];
     after<T = any>(handler: AfterRequestHandler<T>): void;
+    after<T = any>(handler: AfterRequestHandlerAsync<T>): void;
     before(handler: BeforeRequestHandler): void;
+    before(handler: BeforeRequestHandlerAsync): void;
     headers: Omit<RequestHeaders, 'Content-Type'>;
 }
 export declare const request: Request;