@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/shared/model/announcement.js

@@ -0,0 +1,18 @@
+const announcementTypes = ['promo', 'service'];
+const announcementSubTypes = [
+    'sales',
+    'news',
+    'critical',
+    'informative',
+    'notice',
+    'event',
+    'new_product_introduction',
+];
+function isAnnouncementType(type) {
+    return announcementTypes.includes(type);
+}
+function isAnnouncementSubtype(subtype) {
+    return announcementSubTypes.includes(subtype);
+}
+
+export { announcementSubTypes, announcementTypes, isAnnouncementSubtype, isAnnouncementType };

package/dist/shared/model/category.d.ts

@@ -6,6 +6,7 @@ export interface Category {
     title: string;
 }
 export declare function transformAlgoliaCategoryData(categories: RefinementListItem[]): {
+    count: number;
     href: string;
     image: {
         1: string;
@@ -13,6 +14,10 @@ export declare function transformAlgoliaCategoryData(categories: RefinementListI
         3: string;
         altText: string;
     } | undefined;
+    isRefined: boolean;
+    label: string;
     name: string;
     path: string[];
+    sortOrder: number;
+    value: string;
 }[];

package/dist/shared/model/category.js

@@ -0,0 +1,31 @@
+function transformAlgoliaCategoryData(categories) {
+    return categories
+        .map(item => {
+        const data = JSON.parse(item.value);
+        return {
+            count: item.count,
+            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,
+            isRefined: item.isRefined,
+            label: item.label,
+            name: data.name,
+            path: data.path.split(' > '),
+            sortOrder: data.sortOrder,
+            value: item.value,
+        };
+    })
+        .sort((a, b) => (a.sortOrder || 100_000) - (b.sortOrder || 100_000) ||
+        a.name.localeCompare(b.name));
+}
+
+export { transformAlgoliaCategoryData };

package/dist/shared/model/countries-languages.d.ts

@@ -7,8 +7,11 @@ export interface Language {
 }
 export interface Country {
     abbreviation: CountryCode;
+    currencyCode: string;
     id: string;
     languages: Language[];
     name: string;
+    states: null;
 }
-export type CountriesLanguages = Country[];
+export declare function isLanguage(language: unknown): language is Language;
+export declare function isCountry(country: unknown): country is Country;

package/dist/shared/model/countries-languages.js

@@ -0,0 +1,32 @@
+import { isCultureCode, isLanguageCode, isCountryCode } from '../../intl/types.js';
+
+function isLanguage(language) {
+    if (typeof language !== 'object' || language === null)
+        return false;
+    if (!('cultureCode' in language) || !isCultureCode(language.cultureCode))
+        return false;
+    if (!('description' in language) || typeof language.description !== 'string')
+        return false;
+    if (!('id' in language) || typeof language.id !== 'string')
+        return false;
+    if (!('languageCode' in language) || !isLanguageCode(language.languageCode))
+        return false;
+    return true;
+}
+function isCountry(country) {
+    if (typeof country !== 'object' || country === null)
+        return false;
+    if (!('abbreviation' in country) || !isCountryCode(country.abbreviation))
+        return false;
+    if (!('id' in country) || typeof country.id !== 'string')
+        return false;
+    if (!('name' in country) || typeof country.name !== 'string')
+        return false;
+    if (!('currencyCode' in country) || typeof country.currencyCode !== 'string')
+        return false;
+    if (!('languages' in country) || !Array.isArray(country.languages))
+        return false;
+    return country.languages.every(isLanguage);
+}
+
+export { isCountry, isLanguage };

package/dist/shared/model/currency.d.ts

@@ -1,27 +1,8 @@
-export declare const currencySymbolToISO: {
-    readonly $: "USD";
-    readonly 'Bs.': "VES";
-    readonly Ft: "HUF";
-    readonly Kč: "CZK";
-    readonly R: "ZAR";
-    readonly kr: "SEK";
-    readonly lei: "RON";
-    readonly zł: "PLN";
-    readonly '\u00A3': "GBP";
-    readonly '\u00A5': "JPY";
-    readonly '\u0E3F': "THB";
-    readonly '\u20A1': "CRC";
-    readonly '\u20A6': "NGN";
-    readonly '\u20A9': "KRW";
-    readonly '\u20AA': "ILS";
-    readonly '\u20AB': "VND";
-    readonly '\u20AC': "EUR";
-    readonly '\u20AE': "MNT";
-    readonly '\u20B1': "PHP";
-    readonly '\u20B2': "PYG";
-    readonly '\u20B4': "UAH";
-    readonly '\u20B5': "GHS";
-    readonly '\u20B9': "INR";
-    readonly '\u20BA': "TRY";
-    readonly '\u20BD': "RUB";
+import { CurrencyCode } from '../../intl/types';
+export type Currency = {
+    code: CurrencyCode;
+    name: string;
+    symbol: string;
 };
+export declare const currencies: Currency[];
+export declare function getCurrencyCodeBySymbol(symbol: string): CurrencyCode | undefined;

package/dist/shared/model/currency.js

@@ -0,0 +1,29 @@
+const currencies = [
+    {
+        code: 'EUR',
+        name: 'Euro',
+        symbol: '€',
+    },
+    {
+        code: 'USD',
+        name: 'US dollar',
+        symbol: '$',
+    },
+    {
+        code: 'GBP',
+        name: 'Pound sterling',
+        symbol: '£',
+    },
+    {
+        code: 'CHF',
+        name: 'Swiss franc',
+        symbol: 'CHF',
+    },
+];
+// This is a helper object to quickly find a currency code by its symbol.
+const currencyCodeBySymbol = Object.fromEntries(currencies.map(currency => [currency.symbol, currency.code]));
+function getCurrencyCodeBySymbol(symbol) {
+    return currencyCodeBySymbol[symbol];
+}
+
+export { currencies, getCurrencyCodeBySymbol };

package/dist/shared/model/defaults.d.ts

@@ -0,0 +1 @@
+export declare const voidFunction: VoidFunction;

package/dist/shared/model/defaults.js

@@ -0,0 +1,3 @@
+const voidFunction = () => { };
+
+export { voidFunction };

package/dist/shared/model/hit.d.ts

@@ -1,4 +1,5 @@
 import { AlgoliaProductHit, AlgoliaPromoHit } from '../../algolia/algolia-hit-type';
+import { CurrencyCode } from '../../intl/types';
 import { ImageType } from './image';
 export declare function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit: AlgoliaPromoHit): PromoHit;
 export declare function transformAlgoliaProductHitToProductHit(algoliaProductHit: AlgoliaProductHit): ProductHit;
@@ -11,6 +12,7 @@ export interface PromoHit {
     type: 'promo';
 }
 export interface ProductHit {
+    currencyCode: CurrencyCode;
     hit: AlgoliaProductHit;
     id: string;
     image: ImageType;

package/dist/shared/model/hit.js

@@ -0,0 +1,46 @@
+import { ensureNumber } from '../utils/number.js';
+
+function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit) {
+    return {
+        hit: algoliaPromoHit,
+        href: algoliaPromoHit.url,
+        id: algoliaPromoHit.objectID,
+        image: algoliaPromoHit.image,
+        isExternal: algoliaPromoHit.isExternal,
+        type: 'promo',
+    };
+}
+function transformAlgoliaProductHitToProductHit(algoliaProductHit) {
+    return {
+        currencyCode: algoliaProductHit.currencyCode,
+        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: ensureNumber(String(algoliaProductHit.__position), 0),
+        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.d.ts

@@ -1,4 +1,4 @@
-interface DPRSrcSet {
+export interface DPRSrcSet {
     1: string;
     2: string;
     3: string;
@@ -13,15 +13,14 @@ export interface ImageSourceType {
     height?: number;
     image: ImageType | ResponsiveImageType | undefined;
     loading?: 'lazy' | 'eager';
-    onError?: () => void;
+    onError?: VoidFunction;
     title: string;
     width?: number;
 }
 export interface ResponsiveImageType {
     altText: string;
-    lg: DPRSrcSet;
-    md: DPRSrcSet;
-    sm: DPRSrcSet;
+    lg?: DPRSrcSet;
+    md?: DPRSrcSet;
+    sm?: DPRSrcSet;
 }
-export declare function isResponsiveImage(image: ImageType | ResponsiveImageType | undefined): image is ResponsiveImageType;
-export {};
+export declare function isResponsiveImage(image: unknown): image is ResponsiveImageType;

package/dist/shared/model/image.js

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

package/dist/shared/model/price.d.ts

@@ -1,10 +1,13 @@
+import { CurrencyCode } from '../../intl/types';
 export interface ProductPriceType {
+    currencyCode?: CurrencyCode;
     isVatIncluded: boolean;
-    originalPrice: number;
+    originalPrice?: number;
     price: number;
 }
 export interface ProductTotalPriceType {
-    originalTotalPrice: number;
+    currencyCode?: CurrencyCode;
+    originalTotalPrice?: number;
     pricePerUnit?: number;
     totalPrice: number;
 }

package/dist/shared/providers/cart-provider.d.ts

@@ -1,4 +1,4 @@
-import { CartLineModel } from '../api/storefront/model/shop.model';
+import { CartLineModel } from '../api/storefront/model/storefront.model';
 interface Props {
     onCartLineAdded?: (cartLine: CartLineModel) => void;
     onCartLineError?: (error: Error, cartLine: CartLineModel | undefined) => void;

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.d.ts

@@ -1,8 +1,8 @@
-import { WishListLineModel, WishListModel } from '../api/storefront/model/shop.model';
+import { WishListLineModel, WishListModel } from '../api/storefront/model/storefront.model';
 interface Props {
-    onFavoriteAdded?: () => void;
-    onFavoriteListAdded?: () => void;
-    onFavoriteRemoved?: () => void;
+    onFavoriteAdded?: VoidFunction;
+    onFavoriteListAdded?: VoidFunction;
+    onFavoriteRemoved?: VoidFunction;
     signInUrl: string;
 }
 export declare function FavoriteProvider(props: Props): null;

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,82 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useCallback, useRef } 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) => {
+            const timeoutId = setTimeout(() => setRerenderState(value), 0);
+            return () => clearTimeout(timeoutId);
+        };
+        state.addEventListener('stateChanged', updateState);
+        return () => {
+            state.removeEventListener('stateChanged', updateState);
+        };
+    }, [state]);
+    const setGlobalState = useCallback((valueOrFn) => (state.value =
+        valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn), [state]);
+    return [rerenderState, setGlobalState];
+}
+
+export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState };

package/dist/shared/providers/react-query-container.d.ts

@@ -1,4 +1,10 @@
-import { ReactNode } from 'react';
-export declare function ReactQueryContainer({ children }: {
-    children: ReactNode;
+import { ReactElement, ReactNode } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+export declare const globalQueryClient: QueryClient;
+export declare function ReactQueryContainer({ children, enableDevTools, queryClient: _queryClient, }: {
+    children: ReactNode | ((args: {
+        queryClient: QueryClient;
+    }) => ReactNode | ReactElement);
+    enableDevTools?: boolean;
+    queryClient?: QueryClient;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { isProductionEnvironment } from '../utils/environment.js';
+import { createQueryClient } from '../utils/query-client.js';
+
+const globalQueryClient = createQueryClient();
+function ReactQueryContainer({ children, enableDevTools = !isProductionEnvironment, queryClient: _queryClient, }) {
+    const queryClient = useMemo(() => _queryClient || createQueryClient(), [_queryClient]);
+    return (jsxs(QueryClientProvider, { client: queryClient, children: [enableDevTools && jsx(ReactQueryDevtools, { initialIsOpen: false }), children instanceof Function ? children({ queryClient }) : children] }));
+}
+
+export { ReactQueryContainer, globalQueryClient };

package/dist/shared/reset.module.css.js

@@ -0,0 +1,3 @@
+var resetStyles = {"reset":"reset-module-GKAEu"};
+
+export { resetStyles as default };

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

@@ -0,0 +1,2 @@
+import { RouteContextValue } from './types';
+export declare const RouteContext: React.Context<RouteContextValue | undefined>;

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const RouteContext = createContext(undefined);
+
+export { RouteContext };

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

@@ -1,13 +1,16 @@
-import { ReactNode } from 'react';
-export interface NavigateOptions {
-    prefetch?: boolean;
-    replace?: boolean;
-}
-export type NavigateFn = (href: string, options?: NavigateOptions) => void;
+import { ElementType, ReactNode } from 'react';
+import { NavigateFunction, Paths, RouteLinkElementProps } from './types';
 export interface RouteProviderProps {
+    Link?: ElementType<RouteLinkElementProps>;
     children: ReactNode;
-    navigate: NavigateFn;
+    navigate: NavigateFunction;
+    paths: Paths;
+    url: {
+        alternativeHrefs?: Record<string, string>;
+        basePathname?: string;
+        href: string;
+        pathname: string;
+        search: string;
+    };
 }
-export declare function RouteProvider({ children, navigate }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useOnNavigate(callback?: NavigateFn): NavigateFn;
-export declare function useNavigate(): NavigateFn;
+export declare function RouteProvider({ children, Link, navigate, paths, url, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { RouteContext } from './route-context.js';
+
+function RouteProvider({ children, Link, navigate, paths, url, }) {
+    const value = useMemo(() => ({
+        Link,
+        navigate,
+        paths,
+        url,
+    }), [Link, navigate, paths, url]);
+    return jsx(RouteContext.Provider, { value: value, children: children });
+}
+
+export { RouteProvider };

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

@@ -0,0 +1,5 @@
+export declare function buildHref({ basePathname, href, ignoreLocalePrefix, }: {
+    basePathname?: string;
+    href: string;
+    ignoreLocalePrefix?: boolean;
+}): string;

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

@@ -0,0 +1,17 @@
+const malformedLinkRegex = /\b[a-z]{2}-[a-z]{2}\/[a-z]{2}(?=[#/?]|$)/i;
+function buildHref({ basePathname, href, ignoreLocalePrefix, }) {
+    if (!href.startsWith('http') &&
+        basePathname &&
+        basePathname !== '/' &&
+        !ignoreLocalePrefix &&
+        !href.startsWith(`/${basePathname}`)) {
+        const urlWithbasePath = `/${basePathname.replace(/^\//, '')}/${href.replace(/^\//, '')}`;
+        const isMalformed = new RegExp(malformedLinkRegex).test(urlWithbasePath);
+        return isMalformed
+            ? urlWithbasePath.replace(/([a-z]{2}-[a-z]{2})\/[a-z]{2}(?=[#/?]|$)/i, '$1')
+            : urlWithbasePath;
+    }
+    return href;
+}
+
+export { buildHref };

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

@@ -0,0 +1,46 @@
+import { ElementType } from 'react';
+export interface Paths {
+    ACCOUNT: string;
+    ACCOUNT_ADDRESSES: string;
+    ACCOUNT_CREATE: string;
+    ACCOUNT_EDIT_BILL_TO_ADDRESS: string;
+    ACCOUNT_EDIT_SHIP_TO_ADDRESS: string;
+    ACCOUNT_INVOICES: string;
+    ACCOUNT_MY_LISTS: string;
+    ACCOUNT_ORDERS: string;
+    CART: string;
+    CHECKOUT_SHIPPING: string;
+    CHECKOUT_SHIPPING_VIA_SIGNIN: string;
+    FAVORITES: string;
+    HOME: string;
+    MY_SONIC: string;
+    ORDER_CONFIRMATION: string;
+    REVIEW_AND_SUBMIT: string;
+    SIGN_IN: string;
+    UPLOAD_ORDER: string;
+}
+export interface RouteContextValue {
+    Link?: ElementType<RouteLinkElementProps>;
+    navigate: NavigateFunction;
+    paths: Paths;
+    url: {
+        alternativeHrefs?: Record<string, string>;
+        basePathname?: string;
+        href: string;
+        pathname: string;
+        search: string;
+    };
+}
+export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement> {
+    href: string;
+    onNavigate?: () => void;
+    route?: NavigateOptions;
+}
+export interface NavigateOptions {
+    ignoreLocalePrefix?: boolean;
+    prefetch?: boolean;
+    reload?: boolean;
+    replace?: boolean;
+    scroll?: boolean;
+}
+export type NavigateFunction = (href: string, options?: NavigateOptions) => void;

package/dist/shared/routing/use-location.d.ts

@@ -0,0 +1,9 @@
+import qs from 'query-string';
+export declare function useLocation(): {
+    basePathname: string | undefined;
+    fullPathname: string;
+    href: string;
+    pathname: string;
+    query: qs.ParsedQuery<string>;
+    search: string;
+};

package/dist/shared/routing/use-location.js

@@ -0,0 +1,18 @@
+"use client";
+import qs from 'query-string';
+import { useRouter } from './use-router.js';
+
+function useLocation() {
+    const { url: { basePathname, href, pathname, search }, } = useRouter();
+    const query = qs.parse(search || '');
+    return {
+        basePathname,
+        fullPathname: pathname,
+        href,
+        pathname: pathname.replace(new RegExp(`^${basePathname}`), ''),
+        query,
+        search,
+    };
+}
+
+export { useLocation };

package/dist/shared/routing/use-navigate.d.ts

@@ -0,0 +1,6 @@
+import { NavigateFunction } from './types';
+export interface UseNavigateReturnType {
+    isNavigating: boolean;
+    navigate: NavigateFunction;
+}
+export declare function useNavigate(): UseNavigateReturnType;