@sonic-equipment/ui 0.0.118 → 1.0.0

package/dist/shared/fetch/request.js

@@ -0,0 +1,290 @@
+import qs from 'query-string';
+import { isPromise } from '../utils/promise.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isResponse = (response) => Boolean(response?.json);
+class RequestError extends Error {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    responseOrError, options, status, statusText) {
+        super(isResponse(responseOrError)
+            ? `${responseOrError.status || status || -1}: ${responseOrError.statusText || statusText}`
+            : responseOrError?.message || responseOrError, {
+            cause: responseOrError,
+        });
+        Object.defineProperty(this, "isRequestError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: -1
+        });
+        Object.defineProperty(this, "statusText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Object.defineProperty(this, "body", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "response", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        if (isResponse(responseOrError)) {
+            this.status = responseOrError.status || status || -1;
+            this.statusText = responseOrError.statusText || statusText;
+            this.response = responseOrError;
+        }
+        else {
+            this.status = -1;
+        }
+        this.context = options?.context;
+        this.body = options?.body;
+        this.options = options?.options;
+        // eslint-disable-next-line unicorn/custom-error-definition
+        this.name = this.name || this.constructor.name || 'RequestError';
+    }
+    toJSON() {
+        return {
+            context: this.context,
+            error: {
+                message: this.message,
+                stack: this.stack,
+            },
+            isRequestError: this.isRequestError,
+            request: {
+                ...this.options,
+            },
+            response: {
+                body: this.body,
+                status: this.status,
+                statusText: this.statusText,
+            },
+        };
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isRequestError = (error) => Boolean(error?.isRequestError);
+class BadRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 400, 'bad request');
+        this.name = 'BadRequestError';
+    }
+}
+class UnauthorizedRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 401, 'unauthorized');
+        Object.defineProperty(this, "response", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.name = 'UnauthorizedRequestError';
+        this.response = responseOrError;
+    }
+}
+class ForbiddenRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 403, 'forbidden');
+        this.name = 'ForbiddenRequestError';
+    }
+}
+class NotFoundRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 404, 'not found');
+        this.name = 'NotFoundRequestError';
+    }
+}
+class MethodNotAllowedRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 405, 'method not allowed');
+        this.name = 'MethodNotAllowedRequestError';
+    }
+}
+class UnprocessableContentRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 422, 'unprocessable content');
+        this.name = 'UnprocessableContentRequestError';
+    }
+}
+class TimeoutRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, -1, `timeout occured after ${options?.options?.timeout || 'unknown'}ms`);
+        this.name = 'TimeoutRequestError';
+    }
+}
+class InternalServerErrorRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 500, 'internal server error');
+        this.name = 'InternalServerErrorRequestError';
+    }
+}
+const createRequestError = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+responseOrError, options, flags) => {
+    if (isResponse(responseOrError)) {
+        switch (responseOrError.status) {
+            case 400:
+                return new BadRequestError(responseOrError, options);
+            case 401:
+                return new UnauthorizedRequestError(responseOrError, options);
+            case 403:
+                return new ForbiddenRequestError(responseOrError, options);
+            case 404:
+                return new NotFoundRequestError(responseOrError, options);
+            case 405:
+                return new MethodNotAllowedRequestError(responseOrError, options);
+            case 422:
+                return new UnprocessableContentRequestError(responseOrError, options);
+            case 500:
+                return new InternalServerErrorRequestError(responseOrError, options);
+            default:
+                return new RequestError(responseOrError, options);
+        }
+    }
+    else if (isRequestError(responseOrError)) {
+        return options
+            ? new RequestError(responseOrError, options)
+            : responseOrError;
+    }
+    else {
+        if (flags?.isTimeout) {
+            throw new TimeoutRequestError(new Error(`timeout occured after ${options?.options?.timeout || 'unknown'}ms`), options);
+        }
+        return new RequestError(responseOrError, options);
+    }
+};
+const isJsonBody = (options) => Boolean(options.headers?.['content-type']?.match(/json/i) ||
+    (options.body && typeof options.body === 'object'));
+const isFormData = (body) => body instanceof FormData;
+const createBody = (options) => {
+    const { body, method, url } = options;
+    if (!body || method === 'GET' || method === 'HEAD')
+        return undefined;
+    if (typeof body === 'string')
+        return body;
+    if (isFormData(body))
+        return body;
+    if (isJsonBody(options))
+        return JSON.stringify(body);
+    throw new Error(`request: Unknown body type for request ${url}. Unable to send request.`);
+};
+const createHeaders = (...headers) => {
+    const allHeaders = new Headers();
+    for (const header of headers) {
+        if (!header)
+            continue;
+        for (const key of Object.keys(header)) {
+            if (header[key])
+                allHeaders.append(key, String(header[key]));
+        }
+    }
+    return allHeaders;
+};
+const beforeHandlers = [];
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const afterHandlers = [];
+/* Because of a bug in the rollup dts package the following code must be put inside of a IIFE.
+ * The bug occurs when assigning properties to the request function at the top level of this file.
+ * request.headers = {}
+ * TODO: Remove the DTS dependency
+ */
+const request = (function createRequestFunction() {
+    const request = async (options) => {
+        let response;
+        let body;
+        let error;
+        let isTimeout = false;
+        try {
+            for await (const handler of beforeHandlers) {
+                const promiseOrOptions = handler(options);
+                options = isPromise(promiseOrOptions)
+                    ? (await promiseOrOptions) || options
+                    : promiseOrOptions || options;
+            }
+            options.timeout = options.timeout || 1000 * 60 * 2;
+            const url = qs.stringifyUrl({ query: options.params, url: options.url });
+            const controller = new AbortController();
+            const id = options.timeout
+                ? setTimeout(() => {
+                    isTimeout = true;
+                    controller.abort();
+                }, options.timeout)
+                : -1;
+            response = await fetch(url, {
+                body: createBody(options),
+                cache: options.cache,
+                credentials: 'include',
+                // 'include' sends cookies and HTTP authentication to the server
+                headers: createHeaders(request.headers, options.headers),
+                method: options.method || 'GET',
+                // @ts-expect-error - TS doesn't know about the next options
+                next: options.next,
+                signal: controller.signal,
+            });
+            clearTimeout(id);
+            const contentType = response.headers.get('content-type');
+            body = contentType?.includes('json')
+                ? (await response.json())
+                : (await response.text());
+            if (!response.ok)
+                throw response;
+            const result = {
+                body,
+                headers: response.headers,
+                status: response.status,
+                statusText: response.statusText,
+            };
+            return result;
+        }
+        catch (err) {
+            error = createRequestError(err, { body, options }, { isTimeout });
+            throw error;
+        }
+        finally {
+            for await (const handler of afterHandlers) {
+                const promiseOrVoid = handler({ body, error, options, response });
+                if (isPromise(promiseOrVoid))
+                    await promiseOrVoid;
+            }
+        }
+    };
+    request.headers = {};
+    request.after = (handler) => {
+        afterHandlers.push(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handler);
+    };
+    request.before = (handler) => {
+        beforeHandlers.push(handler);
+    };
+    return request;
+})();
+
+export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request };

package/dist/shared/ga/data-layer.d.ts

@@ -0,0 +1,2 @@
+import type { DataLayer } from './types';
+export declare const dataLayer: DataLayer;

package/dist/shared/ga/data-layer.js

@@ -0,0 +1,12 @@
+const _dataLayer = [];
+_dataLayer.push = (function (_push) {
+    return (...items) => {
+        return _push(...items);
+    };
+})(_dataLayer.push.bind(_dataLayer));
+const dataLayer = typeof window === 'undefined'
+    ? _dataLayer
+    : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+        (window.dataLayer = window.dataLayer || _dataLayer);
+
+export { dataLayer };

package/dist/shared/ga/google-analytics-provider.d.ts

@@ -0,0 +1,9 @@
+import { JSX, ReactNode } from 'react';
+export declare function useGoogleAnalyticsProvider(): {
+    customerNumber: string | undefined;
+    isLoading: boolean;
+};
+export declare function InitializeGoogleAnalyticsProvider(): null;
+export declare function GoogleAnalyticsProvider({ children }?: {
+    children?: ReactNode;
+}): JSX.Element | null;

package/dist/shared/ga/google-analytics-provider.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useFetchSession } from '../api/storefront/hooks/authentication/use-fetch-session.js';
+
+function useGoogleAnalyticsProvider() {
+    const { data: session, isLoading } = useFetchSession();
+    return { customerNumber: session?.billTo?.customerNumber, isLoading };
+}
+function InitializeGoogleAnalyticsProvider() {
+    useGoogleAnalyticsProvider();
+    return null;
+}
+function GoogleAnalyticsProvider({ children = null } = { children: null }) {
+    return (jsxs(Fragment, { children: [jsx(InitializeGoogleAnalyticsProvider, {}), children] }));
+}
+
+export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAnalyticsProvider };

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

@@ -0,0 +1,38 @@
+export interface GAContext {
+    [key: string]: string | number | boolean | null | undefined;
+}
+export interface GABaseEvent {
+    [key: string]: any;
+    event: string;
+    eventAction?: string;
+    eventCategory?: string;
+    eventLabel?: string;
+    eventValue?: number;
+}
+export declare function isGAEvent(event: any): event is GABaseEvent;
+export interface GAEcommerceEvent extends GABaseEvent {
+    ecommerce?: {
+        [key: string]: any;
+        currencyCode?: string;
+        items?: Array<{
+            [key: string]: any;
+            item_category?: string;
+            item_id?: string;
+            item_name?: string;
+            price?: number;
+            quantity?: number;
+        }>;
+    };
+}
+export interface GAPageviewEvent extends GABaseEvent {
+    page_location?: string;
+    page_path?: string;
+    page_title?: string;
+}
+export type GADataLayerEvent = GABaseEvent | GAEcommerceEvent | GAPageviewEvent;
+export type DataLayer = (GADataLayerEvent | GAContext)[];
+declare global {
+    interface Window {
+        dataLayer?: DataLayer;
+    }
+}

package/dist/shared/ga/types.js

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function isGAEvent(event) {
+    return (typeof event === 'object' &&
+        'event' in event &&
+        typeof event.event === 'string');
+}
+
+export { isGAEvent };

package/dist/shared/ga/use-data-layer.d.ts

@@ -0,0 +1,54 @@
+import { CartModel } from '../api/storefront/model/storefront.model';
+import { DataLayer, type GADataLayerEvent, type GAEcommerceEvent } from './types';
+interface GAProductModel {
+    price?: number;
+    productNumber: string;
+    productTitle: string;
+    unitListPrice: number;
+    unitListPriceDisplay: string;
+}
+interface GACartModel {
+    cartLines?: CartModel['cartLines'];
+    currencySymbol: string;
+    orderGrandTotal: number;
+    orderSubTotal: number;
+    shippingAndHandling: number;
+    totalTax: number;
+    trackId: string;
+}
+interface GACartLineModel {
+    erpNumber: string;
+    pricing: {
+        actualPrice: number;
+        actualPriceDisplay: string;
+    } | null;
+    productName: string;
+    qtyOrdered: number | null;
+}
+interface CreateEcommerceEventArgsWithCartLine {
+    cartLine: GACartLineModel;
+    event: GAEcommerceEvent;
+}
+interface CreateEcommerceEventArgsWithCart {
+    cart: GACartModel;
+    event: GAEcommerceEvent;
+}
+interface CreateEcommerceEventArgsWithProduct {
+    event: GAEcommerceEvent;
+    product: GAProductModel;
+}
+interface CreateEcommerceEvent {
+    (args: CreateEcommerceEventArgsWithCart): GAEcommerceEvent;
+    (args: CreateEcommerceEventArgsWithCartLine): GAEcommerceEvent;
+    (args: CreateEcommerceEventArgsWithProduct): GAEcommerceEvent;
+}
+interface UseDataLayerReturnValue {
+    createEcommerceEvent: CreateEcommerceEvent;
+    dataLayer: DataLayer;
+}
+export declare function useDataLayer(): UseDataLayerReturnValue;
+export declare function useDataLayer(event: GADataLayerEvent): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithProduct): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithCartLine): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithCart): UseDataLayerReturnValue;
+export {};

package/dist/shared/ga/use-data-layer.js

@@ -0,0 +1,95 @@
+"use client";
+import { useCallback, useEffect } from 'react';
+import { getCurrencyCodeBySymbol } from '../model/currency.js';
+import { dataLayer } from './data-layer.js';
+import { useGoogleAnalyticsProvider } from './google-analytics-provider.js';
+import { isGAEvent } from './types.js';
+
+function useDataLayer(eventOrArgs) {
+    const { customerNumber } = useGoogleAnalyticsProvider();
+    const createEcommerceEvent = useCallback(({ cart, cartLine, event, product, }) => {
+        if (cart) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ??
+                        getCurrencyCodeBySymbol(cart.currencySymbol),
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: cart.cartLines?.map(cartLine => ({
+                        item_id: cartLine.erpNumber,
+                        item_name: cartLine.shortDescription,
+                        price: cartLine.pricing?.unitNetPrice,
+                        quantity: cartLine.qtyOrdered ?? 0,
+                    })) ?? [],
+                    shipping: cart.shippingAndHandling,
+                    tax: cart.totalTax,
+                    transaction_id: cart.trackId,
+                    value: cart.orderGrandTotal,
+                },
+                value: event.value ?? cart.orderSubTotal ?? 0,
+            };
+        }
+        else if (product) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ??
+                        getCurrencyCodeBySymbol(product.unitListPriceDisplay[0] || ''),
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: [
+                        {
+                            item_id: product.productNumber,
+                            item_name: product.productTitle,
+                            price: product.price || product.unitListPrice,
+                        },
+                    ],
+                },
+                value: 0,
+            };
+        }
+        else if (cartLine) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ??
+                        getCurrencyCodeBySymbol(cartLine.pricing?.actualPriceDisplay[0] || ''),
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: [
+                        {
+                            item_id: cartLine.erpNumber,
+                            item_name: cartLine.productName,
+                            price: cartLine.pricing?.actualPrice,
+                            quantity: cartLine.qtyOrdered ?? undefined,
+                        },
+                    ],
+                },
+                value: cartLine.pricing?.actualPrice,
+            };
+        }
+        else {
+            return event;
+        }
+    }, [customerNumber]);
+    useEffect(() => {
+        if (!eventOrArgs)
+            return;
+        if (isGAEvent(eventOrArgs)) {
+            dataLayer.push(eventOrArgs);
+        }
+        else if ('cart' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+        else if ('product' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+        else if ('cartLine' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+    }, [eventOrArgs, createEcommerceEvent]);
+    return { createEcommerceEvent, dataLayer };
+}
+
+export { useDataLayer };

package/dist/shared/hooks/use-breakpoint.js

@@ -0,0 +1,25 @@
+"use client";
+import { useState, useCallback, useEffect } from 'react';
+import { getCurrentBreakpoints } from '../utils/breakpoints.js';
+
+const useBreakpoint = () => {
+    const [device, setDevice] = useState(getCurrentBreakpoints);
+    const handleResize = useCallback(() => {
+        const breakpoints = getCurrentBreakpoints();
+        setDevice(previousBreakpoints => {
+            if (previousBreakpoints.current === breakpoints.current)
+                return previousBreakpoints;
+            return breakpoints;
+        });
+    }, []);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        // handleResize()
+        window.addEventListener('resize', handleResize);
+        return () => window?.removeEventListener('resize', handleResize);
+    }, [handleResize]);
+    return device;
+};
+
+export { useBreakpoint };

package/dist/shared/hooks/use-cookiebot.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    interface Window {
+        Cookiebot?: {
+            consent: {
+                marketing: boolean;
+                necessary: boolean;
+                statistics: boolean;
+            };
+            hasResponse: boolean;
+        };
+    }
+}
+export declare function useCookiebot(): {
+    hasResponse: boolean;
+    isDialogOpen: boolean;
+};

package/dist/shared/hooks/use-cookiebot.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+// https://www.cookiebot.com/en/developer/
+function useCookiebot() {
+    const [hasResponse, setHasResponse] = useState(Boolean(typeof window === 'undefined' ? undefined : window.Cookiebot?.hasResponse));
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const handleDialogDisplay = () => {
+        setIsDialogOpen(true);
+    };
+    const handleAcceptDecline = () => {
+        setHasResponse(Boolean(typeof window === 'undefined'
+            ? undefined
+            : window.Cookiebot?.hasResponse));
+        setIsDialogOpen(false);
+    };
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
+        window.addEventListener('CookiebotOnAccept', handleAcceptDecline);
+        window.addEventListener('CookiebotOnDecline', handleAcceptDecline);
+        return () => {
+            window?.removeEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
+            window?.removeEventListener('CookiebotOnAccept', handleAcceptDecline);
+            window?.removeEventListener('CookiebotOnDecline', handleAcceptDecline);
+        };
+    }, []);
+    return {
+        hasResponse,
+        isDialogOpen,
+    };
+}
+
+export { useCookiebot };

package/dist/shared/hooks/use-css-link.d.ts

@@ -0,0 +1,3 @@
+export declare const useCSSLink: (url: string, { enabled }?: {
+    enabled: boolean;
+}) => void;

package/dist/shared/hooks/use-css-link.js

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect } from 'react';
+
+const loadedCSS = {};
+const useCSSLink = (url, { enabled = true } = { enabled: true }) => {
+    useEffect(() => {
+        if (!document || !enabled || loadedCSS[url])
+            return;
+        const link = document.createElement('link');
+        link.type = 'text/css';
+        link.rel = 'stylesheet';
+        link.href = url;
+        document.body.append(link);
+        loadedCSS[url] = true;
+        return () => {
+            link.remove();
+        };
+    }, [url, enabled]);
+};
+
+export { useCSSLink };

package/dist/shared/hooks/use-debounced-callback.d.ts

@@ -1 +1,5 @@
-export declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => Promise<ReturnType<T>>;
+export interface DebouncedCallback<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): Promise<ReturnType<T>>;
+    cancel: VoidFunction;
+}
+export declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): DebouncedCallback<T>;

package/dist/shared/hooks/use-debounced-callback.js

@@ -0,0 +1,19 @@
+"use client";
+import { useRef, useCallback } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useDebouncedCallback(func, delay) {
+    const timeoutId = useRef();
+    const debounced = (...args) => new Promise(resolve => {
+        if (typeof window === 'undefined')
+            return resolve(func(...args));
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
+            resolve(func(...args));
+        }, delay);
+    });
+    debounced.cancel = () => clearTimeout(timeoutId.current);
+    return useCallback(debounced, [delay, func]);
+}
+
+export { useDebouncedCallback };

package/dist/shared/hooks/use-disclosure.d.ts

@@ -1,10 +1,10 @@
 interface UseDisclosureReturnType {
-    close: () => void;
+    close: VoidFunction;
     isClosed: boolean;
     isOpen: boolean;
-    open: () => void;
+    open: VoidFunction;
     setIsOpen: (isOpen: boolean) => void;
-    toggle: () => void;
+    toggle: VoidFunction;
 }
 export declare const useDisclosure: (initialState?: boolean) => UseDisclosureReturnType;
 export {};