@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/shared/model/category.js

@@ -0,0 +1,25 @@
+function transformAlgoliaCategoryData(categories) {
+    return categories
+        .map(item => {
+        const data = JSON.parse(item.value);
+        return {
+            href: data.href,
+            image: data.images.length > 0
+                ? {
+                    1: data.images.find(image => image.quality === 'small')?.url ||
+                        '',
+                    2: data.images.find(image => image.quality === 'medium')?.url ||
+                        '',
+                    3: data.images.find(image => image.quality === 'large')?.url ||
+                        '',
+                    altText: data.name,
+                }
+                : undefined,
+            name: data.name,
+            path: data.path.split(' > '),
+        };
+    })
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export { transformAlgoliaCategoryData };

package/dist/shared/model/currency.js

@@ -0,0 +1,29 @@
+const currencySymbolToISO = {
+    $: 'USD', // US Dollar
+    'Bs.': 'VES', // Venezuelan Bolívar Soberano
+    Ft: 'HUF', // Hungarian Forint
+    Kč: 'CZK', // Czech Koruna
+    R: 'ZAR', // South African Rand
+    kr: 'SEK', // Swedish Krona (and others like DKK, NOK depending on context)
+    lei: 'RON', // Romanian Leu
+    zł: 'PLN', // Polish Zloty
+    '£': 'GBP', // British Pound
+    '¥': 'JPY', // Japanese Yen
+    '฿': 'THB', // Thai Baht
+    '₡': 'CRC', // Costa Rican Colón
+    '₦': 'NGN', // Nigerian Naira
+    '₩': 'KRW', // South Korean Won
+    '₪': 'ILS', // Israeli Shekel
+    '₫': 'VND', // Vietnamese Dong
+    '€': 'EUR', // Euro
+    '₮': 'MNT', // Mongolian Tögrög
+    '₱': 'PHP', // Philippine Peso
+    '₲': 'PYG', // Paraguayan Guarani
+    '₴': 'UAH', // Ukrainian Hryvnia
+    '₵': 'GHS', // Ghanaian Cedi
+    '₹': 'INR', // Indian Rupee
+    '₺': 'TRY', // Turkish Lira
+    '₽': 'RUB', // Russian Ruble
+};
+
+export { currencySymbolToISO };

package/dist/shared/model/hit.js

@@ -0,0 +1,45 @@
+function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit) {
+    return {
+        hit: algoliaPromoHit,
+        href: algoliaPromoHit.url,
+        id: algoliaPromoHit.objectID,
+        image: algoliaPromoHit.image,
+        isExternal: algoliaPromoHit.isExternal,
+        type: 'promo',
+    };
+}
+function transformAlgoliaProductHitToProductHit(algoliaProductHit) {
+    return {
+        hit: algoliaProductHit,
+        id: algoliaProductHit.id,
+        image: {
+            1: algoliaProductHit.images?.find(image => image.quality === 'medium')
+                ?.url || '',
+            2: algoliaProductHit.images?.find(image => image.quality === 'medium')
+                ?.url || '',
+            3: algoliaProductHit.images?.find(image => image.quality === 'medium')
+                ?.url || '',
+            altText: algoliaProductHit.name,
+        },
+        isVatIncluded: algoliaProductHit.isVatIncluded,
+        labels: algoliaProductHit.labels,
+        name: algoliaProductHit.name,
+        objectId: algoliaProductHit.objectID,
+        originalPrice: algoliaProductHit.originalPrice,
+        position: Number.isNaN(Number.parseFloat(String(algoliaProductHit.__position)))
+            ? 0
+            : Number.parseFloat(String(algoliaProductHit.__position)),
+        price: algoliaProductHit.price,
+        queryId: algoliaProductHit.__autocomplete_queryID === undefined
+            ? undefined
+            : String(algoliaProductHit.__autocomplete_queryID),
+        storefrontId: algoliaProductHit.storefrontId,
+        storefrontSlug: algoliaProductHit.storefrontSlug,
+        type: 'product',
+    };
+}
+function isProductHit(hit) {
+    return hit.type === 'product';
+}
+
+export { isProductHit, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit };

package/dist/shared/model/image.js

@@ -0,0 +1,5 @@
+function isResponsiveImage(image) {
+    return Boolean(image?.lg);
+}
+
+export { isResponsiveImage };

package/dist/shared/providers/cart-provider.js

@@ -0,0 +1,13 @@
+"use client";
+import { useGlobalState } from './global-state-provider.js';
+
+function CartProvider(props) {
+    useGlobalState('cart', props);
+    return null;
+}
+function useCartEvents() {
+    const [state] = useGlobalState('cart');
+    return state;
+}
+
+export { CartProvider, useCartEvents };

package/dist/shared/providers/favorite-provider.js

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect } from 'react';
+import { useIsAuthenticated } from '../api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useFetchAllWishListsItems } from '../api/storefront/hooks/wishlist/use-fetch-all-wishlists-items.js';
+import { useGlobalState } from './global-state-provider.js';
+
+function FavoriteProvider(props) {
+    const [, updateState] = useGlobalState('favorite-provider', props);
+    useEffect(() => {
+        updateState(props);
+    }, [props, updateState]);
+    return null;
+}
+function useFavorite() {
+    const [state] = useGlobalState('favorite-provider');
+    if (!state) {
+        throw new Error('useFavorite must be used together with the FavoriteProvider');
+    }
+    return { signInUrl: state.signInUrl };
+}
+function useFavoriteProduct(productId) {
+    const isAuthenticated = useIsAuthenticated();
+    const { data: entries, isFetching: isFetchingWishListItems } = useFetchAllWishListsItems({ enabled: Boolean(isAuthenticated) });
+    const entry = entries?.find(({ wishListItem }) => wishListItem.productId === productId);
+    return {
+        isFavorite: Boolean(entry),
+        isFetching: isFetchingWishListItems || isAuthenticated === undefined,
+        wishList: entry?.wishList,
+        wishListItem: entry?.wishListItem,
+    };
+}
+
+export { FavoriteProvider, useFavorite, useFavoriteProduct };

package/dist/shared/providers/global-state-provider.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useContext, useState, useEffect, useCallback } from 'react';
+import { deepEqual } from 'fast-equals';
+import { EventEmitter } from '../utils/event-emitter.js';
+
+// eslint-disable-next-line unicorn/prefer-event-target
+class State extends EventEmitter {
+    constructor(key, state) {
+        super();
+        Object.defineProperty(this, "_state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._state = state;
+        this._key = key;
+    }
+    get key() {
+        return this._key;
+    }
+    get value() {
+        return this._state;
+    }
+    set value(newState) {
+        if (deepEqual(this._state, newState))
+            return;
+        this._state = newState;
+        this.trigger('stateChanged', this._state);
+    }
+}
+class GlobalState {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    states) {
+        Object.defineProperty(this, "states", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: states
+        });
+    }
+    get(key, initialState) {
+        return (this.states.current[key] ||
+            (this.states.current[key] = new State(key, initialState)));
+    }
+    set(key, state) {
+        this.states.current[key] = state;
+    }
+}
+const GlobalStateProviderContext = createContext(undefined);
+function GlobalStateProvider({ children, }) {
+    const internalState = useRef({});
+    const globalState = useRef(new GlobalState(internalState));
+    return (jsx(GlobalStateProviderContext.Provider, { value: globalState.current, children: children }));
+}
+function useGlobalState(key, initialState) {
+    const state = useContext(GlobalStateProviderContext).get(key, initialState);
+    const [rerenderState, setRerenderState] = useState(state.value);
+    useEffect(() => {
+        const updateState = (value) => {
+            setTimeout(() => setRerenderState(value), 0);
+        };
+        state.addEventListener('stateChanged', updateState);
+        return () => {
+            state.removeEventListener('stateChanged', updateState);
+        };
+    }, [state]);
+    function updateGlobalState(valueOrFn) {
+        state.value =
+            valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn;
+    }
+    return [rerenderState, useCallback(updateGlobalState, [updateGlobalState])];
+}
+
+export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState };

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

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { TIME } from '../utils/time.js';
+
+const queryClient = 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,
+        },
+    },
+});
+function ReactQueryContainer({ children }) {
+    return (jsx(QueryClientProvider, { client: queryClient, children: children }));
+}
+
+export { ReactQueryContainer };

package/dist/shared/routing/route-button.js

@@ -0,0 +1,7 @@
+"use client";
+import { Button } from '../../buttons/button/button.js';
+import { withRouting } from './with-routing.js';
+
+const RouteButton = withRouting(Button);
+
+export { RouteButton };

package/dist/shared/routing/route-icon-button.js

@@ -0,0 +1,7 @@
+"use client";
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { withRouting } from './with-routing.js';
+
+const RouteIconButton = withRouting(IconButton);
+
+export { RouteIconButton };

package/dist/shared/routing/route-link.js

@@ -0,0 +1,7 @@
+"use client";
+import { Link } from '../../buttons/link/link.js';
+import { withRouting } from './with-routing.js';
+
+const RouteLink = withRouting(Link);
+
+export { RouteLink };

package/dist/shared/routing/route-provider.d.ts

@@ -6,8 +6,10 @@ export interface NavigateOptions {
 export type NavigateFn = (href: string, options?: NavigateOptions) => void;
 export interface RouteProviderProps {
     children: ReactNode;
+    locale?: string;
     navigate: NavigateFn;
 }
-export declare function RouteProvider({ children, navigate }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RouteProvider({ children, locale, navigate, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useOnNavigate(callback?: NavigateFn): NavigateFn;
 export declare function useNavigate(): NavigateFn;
+export declare function useLocale(): string;

package/dist/shared/routing/route-provider.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+function RouteProvider({ children, locale, navigate, }) {
+    useGlobalState('routing', { locale, navigate });
+    return jsx(Fragment, { children: children });
+}
+const onNavigateCallbacks = [];
+function useOnNavigate(callback) {
+    useEffect(() => {
+        if (!callback)
+            return;
+        onNavigateCallbacks.push(callback);
+        return () => {
+            onNavigateCallbacks.splice(onNavigateCallbacks.indexOf(callback), 1);
+        };
+    }, [callback]);
+    return (href, options) => {
+        onNavigateCallbacks.forEach(cb => cb(href, options));
+    };
+}
+function useNavigate() {
+    const [state] = useGlobalState('routing');
+    const trigger = useOnNavigate();
+    if (!state) {
+        throw new Error('RouteProvider not found');
+    }
+    return (href, options) => {
+        trigger(href, options);
+        if (href.toLowerCase().startsWith('http')) {
+            if (typeof window === 'undefined')
+                return;
+            return (window.location.href = href);
+        }
+        return state.navigate(href, options);
+    };
+}
+function useLocale() {
+    const [state] = useGlobalState('routing');
+    if (!state) {
+        throw new Error('RouteProvider not found');
+    }
+    return state.locale;
+}
+
+export { RouteProvider, useLocale, useNavigate, useOnNavigate };

package/dist/shared/routing/with-routing.js

@@ -0,0 +1,36 @@
+import { createElement } from 'react';
+import { useNavigate, useLocale } from './route-provider.js';
+
+function withRouting(component) {
+    const Component = ({ href, onClick, route, ...rest }) => {
+        const navigate = useNavigate();
+        const locale = useLocale();
+        if (locale &&
+            href &&
+            href.startsWith('/') &&
+            !href.startsWith(`/${locale}`)) {
+            href = `/${locale}${href}`;
+        }
+        const props = {
+            ...rest,
+            onClick(e) {
+                onClick?.(e);
+                if (!href)
+                    return;
+                e.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (rest.isDisabled || rest.disabled)
+                    return;
+                if (e.ctrlKey || e.metaKey || e.shiftKey) {
+                    return window?.open(href, '_blank');
+                }
+                navigate(href, route);
+            },
+        };
+        return createElement(component, props);
+    };
+    Component.displayName = component.displayName;
+    return Component;
+}
+
+export { withRouting };

package/dist/shared/utils/array.js

@@ -0,0 +1,5 @@
+function ensureArray(value) {
+    return Array.isArray(value) ? value : [value];
+}
+
+export { ensureArray };

package/dist/shared/utils/breakpoints.js

@@ -0,0 +1,33 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+const breakpoints = {
+    sm: 0,
+    md: 576,
+    lg: 768,
+    xl: 1024,
+    xxl: 1440,
+};
+const defaultBreakpointReturnType = {
+    current: 'sm',
+    lg: false,
+    md: false,
+    sm: true,
+    xl: false,
+    xxl: false,
+};
+function getCurrentBreakpoints() {
+    return Object.entries(breakpoints)
+        .sort(([, minA], [, minB]) => minA - minB)
+        .reduce((acc, [breakpoint, min]) => {
+        const inRange = min <= (typeof window === 'undefined' ? 0 : window.innerWidth);
+        const current = inRange
+            ? breakpoint
+            : acc.current;
+        return {
+            ...acc,
+            current,
+            [breakpoint]: inRange,
+        };
+    }, defaultBreakpointReturnType);
+}
+
+export { breakpoints, getCurrentBreakpoints };

package/dist/shared/utils/date.js

@@ -0,0 +1,58 @@
+import { TIME } from './time.js';
+
+function getDaysDifference(date, now) {
+    const diffTime = date.getTime() - now.getTime();
+    return diffTime / TIME.DAY;
+}
+const dateThresholds = [
+    {
+        dateUnitObject: { number: 1, unit: 'week' },
+        numberOfDays: 4,
+    },
+    {
+        dateUnitObject: { number: 2, unit: 'week' },
+        numberOfDays: 11,
+    },
+    {
+        dateUnitObject: { number: 3, unit: 'week' },
+        numberOfDays: 18,
+    },
+    {
+        dateUnitObject: { number: 4, unit: 'week' },
+        numberOfDays: 27,
+    },
+    {
+        dateUnitObject: { number: 2, unit: 'month' },
+        numberOfDays: 60,
+    },
+    {
+        dateUnitObject: { number: 3, unit: 'month' },
+        numberOfDays: 90,
+    },
+];
+function getDateUnitObject(date) {
+    const fallbackDateUnitObject = { number: 6, unit: 'month' };
+    const days = getDaysDifference(date, new Date());
+    if (days < 1)
+        return fallbackDateUnitObject;
+    for (const threshold of dateThresholds) {
+        if (days <= threshold.numberOfDays) {
+            return threshold.dateUnitObject;
+        }
+    }
+    return fallbackDateUnitObject;
+}
+function convertDateUnitToPluralOrSingle(unit, number) {
+    if (number === 1)
+        return unit;
+    switch (unit) {
+        case 'day':
+            return 'days';
+        case 'week':
+            return 'weeks';
+        case 'month':
+            return 'months';
+    }
+}
+
+export { convertDateUnitToPluralOrSingle, getDateUnitObject };

package/dist/shared/utils/environment.d.ts

@@ -1,3 +1,3 @@
-export declare const environments: readonly ["marketingLocal", "sandbox", "sandbox-reverse-proxy", "production", "local", "storybook"];
+export declare const environments: readonly ["marketingLocal", "sandbox", "sandbox-reverse-proxy", "production", "local", "storybook", "next"];
 export type Environment = (typeof environments)[number];
-export declare const environment: "marketingLocal" | "sandbox" | "sandbox-reverse-proxy" | "production" | "local" | "storybook";
+export declare const environment: string;

package/dist/shared/utils/environment.js

@@ -0,0 +1,61 @@
+const environments = [
+    'marketingLocal',
+    'sandbox',
+    'sandbox-reverse-proxy',
+    'production',
+    'local',
+    'storybook',
+    'next',
+];
+const marketingLocal = /marketing.local.com/i;
+const storybookUrls = /localhost:6006|storybook.sonic.local.com/i;
+const localUrls = /sonic.local.com/i;
+const reverseProxyUrls = /sonic-equipment.workers.dev/i;
+const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox|accept|test/i;
+const productionUrls = /sonic-equipment.com|production/i;
+let environmentUrl;
+function getEnvironment() {
+    if (typeof process !== 'undefined' && process.env.IS_NEXT === 'true') {
+        return 'next';
+    }
+    else if (typeof process !== 'undefined' && process.env.ISC_API_URL) {
+        environmentUrl = process.env.ISC_API_URL;
+    }
+    else if (typeof process !== 'undefined' && process.env.BUILD_INFO) {
+        environmentUrl = process.env.BUILD_INFO;
+    }
+    else if (typeof window === 'undefined') {
+        environmentUrl = 'production';
+        console.error('Unable to detect environment url');
+    }
+    else {
+        environmentUrl = `${window.location.hostname}:${window.location.port}`;
+    }
+    let environment;
+    if (marketingLocal.test(environmentUrl)) {
+        environment = 'marketingLocal';
+    }
+    else if (storybookUrls.test(environmentUrl)) {
+        environment = 'storybook';
+    }
+    else if (localUrls.test(environmentUrl)) {
+        environment = 'local';
+    }
+    else if (reverseProxyUrls.test(environmentUrl)) {
+        environment = 'sandbox-reverse-proxy';
+    }
+    else if (sandboxUrls.test(environmentUrl)) {
+        environment = 'sandbox';
+    }
+    else if (productionUrls.test(environmentUrl)) {
+        environment = 'production';
+    }
+    else {
+        environment = 'production';
+        console.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
+    }
+    return environment;
+}
+const environment = getEnvironment();
+
+export { environment, environments };

package/dist/shared/utils/event-emitter.js

@@ -0,0 +1,34 @@
+class EventEmitter {
+    constructor() {
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.listeners = new Map();
+    }
+    addEventListener(event, listener) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(listener);
+    }
+    removeEventListener(event, listener) {
+        const listeners = this.listeners.get(event);
+        if (!listeners)
+            return;
+        const index = listeners.indexOf(listener);
+        if (index !== -1) {
+            listeners.splice(index, 1);
+        }
+    }
+    trigger(event, data) {
+        const listeners = this.listeners.get(event);
+        if (!listeners)
+            return;
+        listeners.forEach(listener => listener(data));
+    }
+}
+
+export { EventEmitter };