@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/algolia/algolia-results-count.js

@@ -0,0 +1,22 @@
+"use client";
+import { useHits } from 'react-instantsearch';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { MAX_QUERY_RESULTS } from './constants/index.js';
+
+function AlgoliaResultsCount() {
+    const { results } = useHits();
+    const t = useFormattedMessage();
+    if (!results)
+        return null;
+    const count = results.nbHits;
+    if (count > MAX_QUERY_RESULTS) {
+        return t('More than {0} articles', {
+            replacementValues: {
+                '0': MAX_QUERY_RESULTS.toString(),
+            },
+        });
+    }
+    return `${count} ${count === 1 ? t('article') : t('articles')}`;
+}
+
+export { AlgoliaResultsCount };

package/dist/algolia/algolia-search-provider.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useMemo, useRef, useEffect } from 'react';
+import { config } from '../config.js';
+import { categoriesPlugin } from '../global-search/plugins/categories-plugin.js';
+import { popularCategoriesPlugin } from '../global-search/plugins/popular-categories-plugin.js';
+import { popularSearchesPlugin } from '../global-search/plugins/popular-searches-plugin.js';
+import { querySuggestionsPlugin } from '../global-search/plugins/query-suggestions-plugin.js';
+import { quickAccessPlugin } from '../global-search/plugins/quick-access-plugin.js';
+import { recentSearchesPlugin } from '../global-search/plugins/recent-searches-plugin.js';
+import { useLanguageCode } from '../intl/use-language-code.js';
+import { useDataLayer } from '../shared/ga/use-data-layer.js';
+import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
+import { environment } from '../shared/utils/environment.js';
+import { getAlgoliaIndex } from './algolia-index-config.js';
+import { AlgoliaInsightsProvider } from './algolia-insights-provider.js';
+import { createSonicSearchClient } from './algolia-sonic-searchclient.js';
+import { createAutocomplete } from '../node_modules/.pnpm/@algolia_autocomplete-core@1.19.2_@algolia_client-search@4.24.0_algoliasearch@4.24.0_search-insights@2.17.3/node_modules/@algolia/autocomplete-core/dist/esm/createAutocomplete.js';
+import { getAlgoliaResults } from '../node_modules/.pnpm/@algolia_autocomplete-preset-algolia@1.19.2_@algolia_client-search@4.24.0_algoliasearch@4.24.0/node_modules/@algolia/autocomplete-preset-algolia/dist/esm/requester/getAlgoliaResults.js';
+
+const GlobalSearchContext = createContext(null);
+function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
+    const { dataLayer } = useDataLayer();
+    const [state, setState] = useState({
+        activeItemId: null,
+        collections: [],
+        completion: null,
+        context: {},
+        isOpen: false,
+        query: '',
+        status: 'idle',
+    });
+    const searchClient = useMemo(() => _searchClient ||
+        createSonicSearchClient({
+            apiKey: config.ALGOLIA_API_KEY,
+            appId: config.ALGOLIA_APP_ID,
+            host: config.ALGOLIA_HOST,
+        }), [_searchClient]);
+    const languageCode = useLanguageCode();
+    const indexes = getAlgoliaIndex(environment, languageCode);
+    const productsIndexName = indexes.default;
+    const productsQuerySuggestionsIndexName = indexes.suggestions;
+    const getSources = useDebouncedCallback(({ query }) => {
+        return [
+            {
+                getItems() {
+                    if (!query) {
+                        return [];
+                    }
+                    return getAlgoliaResults({
+                        queries: [
+                            {
+                                indexName: productsIndexName,
+                                params: {
+                                    hitsPerPage: 5,
+                                },
+                                query,
+                            },
+                        ],
+                        searchClient,
+                        transformResponse({ hits, results }) {
+                            dataLayer.push({
+                                brands_numSearchResults: null,
+                                categories_numSearchResults: null,
+                                content_numSearchResults: null,
+                                correctedQuery: undefined,
+                                event: 'searchResults',
+                                numSearchResults: results[0].nbHits,
+                                product_numSearchResults: null,
+                                searchQuery: query,
+                                searchTerm: null,
+                            });
+                            return hits;
+                        },
+                    });
+                },
+                sourceId: 'productsPlugin',
+            },
+        ];
+    }, 300);
+    /**
+     * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
+     */
+    const autocomplete = useMemo(() => createAutocomplete({
+        autoFocus: true,
+        getSources,
+        insights: true,
+        onStateChange({ state }) {
+            setState(state);
+        },
+        openOnFocus: true,
+        plugins: [
+            querySuggestionsPlugin({
+                searchClient,
+                suggestionsIndexName: productsQuerySuggestionsIndexName,
+            }),
+            popularCategoriesPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            quickAccessPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            categoriesPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            popularSearchesPlugin({
+                searchClient,
+                suggestionsIndexName: productsQuerySuggestionsIndexName,
+            }),
+            recentSearchesPlugin,
+        ],
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [productsIndexName, productsQuerySuggestionsIndexName, searchClient]);
+    /**
+     * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
+     */
+    const inputRef = useRef(null);
+    const formRef = useRef(null);
+    const panelRef = useRef(null);
+    const { getEnvironmentProps } = autocomplete;
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (!formRef.current || !panelRef.current || !inputRef.current) {
+            return;
+        }
+        const { onMouseDown, onTouchMove, onTouchStart } = getEnvironmentProps({
+            formElement: formRef.current,
+            inputElement: inputRef.current,
+            panelElement: panelRef.current,
+        });
+        window.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('touchstart', onTouchStart);
+        window.addEventListener('touchmove', onTouchMove);
+        return () => {
+            window?.removeEventListener('mousedown', onMouseDown);
+            window?.removeEventListener('touchstart', onTouchStart);
+            window?.removeEventListener('touchmove', onTouchMove);
+        };
+    }, [getEnvironmentProps, state.isOpen]);
+    const globalSearchContextValue = useMemo(() => ({
+        autocomplete,
+        formRef,
+        indexes,
+        inputRef,
+        panelRef,
+        productsIndexName,
+        productsQuerySuggestionsIndexName,
+        searchClient,
+        setState,
+        state,
+    }), [
+        indexes,
+        autocomplete,
+        formRef,
+        inputRef,
+        panelRef,
+        productsIndexName,
+        productsQuerySuggestionsIndexName,
+        searchClient,
+        setState,
+        state,
+    ]);
+    const insightsProviderValue = useMemo(() => {
+        return {
+            index: productsIndexName,
+        };
+    }, [productsIndexName]);
+    return (jsx(AlgoliaInsightsProvider, { value: insightsProviderValue, children: jsx(GlobalSearchContext.Provider, { value: globalSearchContextValue, children: typeof children === 'function' ? children(autocomplete) : children }) }));
+}
+
+export { AlgoliaSearchProvider, GlobalSearchContext };

package/dist/algolia/algolia-searchclient-offline.js

@@ -0,0 +1,26 @@
+"use client";
+import { logger } from '../logging/logger.js';
+
+const searchClientLogger = (searchClient) => {
+    return {
+        ...searchClient,
+        search: (async (queries, requestOptions) => {
+            const response = await searchClient.search(queries, requestOptions);
+            logger.info('Algolia::SearchClient::search', {
+                args: { queries, requestOptions },
+                response,
+            });
+            return response;
+        }),
+    };
+};
+const offlineSearchClient = {
+    search(_queries, _requestOptions) {
+        return fetch('data/algolia.json').then(response => response.json());
+    },
+    async searchForFacetValues(_queries, _requestOptions) {
+        return [];
+    },
+};
+
+export { offlineSearchClient, searchClientLogger };

package/dist/algolia/algolia-sonic-searchclient.d.ts

@@ -1,5 +1,6 @@
-export declare const createSonicSearchClient: ({ apiKey, appId, host, }: {
+export declare const createSonicSearchClient: ({ apiKey, appId, host, protocol, }: {
     apiKey: string;
     appId: string;
     host: string | undefined;
+    protocol?: string;
 }) => import("algoliasearch").SearchClient;

package/dist/algolia/algolia-sonic-searchclient.js

@@ -0,0 +1,26 @@
+"use client";
+import { createFetchRequester } from '@algolia/requester-fetch';
+import algoliasearch from 'algoliasearch';
+
+const createSonicSearchClient = ({ apiKey, appId, host, protocol = 'https', }) => {
+    if (!host) {
+        return algoliasearch(appId, apiKey);
+    }
+    const searchClient = algoliasearch(appId, apiKey, {
+        hosts: [{ accept: 1, protocol, url: host }],
+        requester: createFetchRequester({
+            requesterOptions: { credentials: 'include' },
+        }),
+        timeouts: { connect: 3000, read: 3000, write: 3000 },
+    });
+    const read = searchClient.transporter.read;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.read = (request, options) => {
+        request.path = `/api/v1/bff/${request.path.replace('*', 'x')}`;
+        return read(request, options);
+    };
+    return searchClient;
+};
+
+export { createSonicSearchClient };

package/dist/algolia/algolia-sort-by.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSortBy } from 'react-instantsearch';
+import { Select } from '../forms/elements/select/select.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useLanguageCode } from '../intl/use-language-code.js';
+import { environment } from '../shared/utils/environment.js';
+import { getAlgoliaIndex } from './algolia-index-config.js';
+
+function AlgoliaSortBy() {
+    const languageCode = useLanguageCode();
+    const algoliaIndex = getAlgoliaIndex(environment, languageCode);
+    const t = useFormattedMessage();
+    const { currentRefinement, options: algoliaOptions, refine, } = useSortBy({
+        items: algoliaIndex.sort.map(({ index, name }) => ({
+            label: t(`sort.${name}`),
+            value: index,
+        })),
+    });
+    if (algoliaOptions.length === 0)
+        return null;
+    const options = algoliaOptions.reduce((acc, option) => {
+        acc[option.value] = option.label;
+        return acc;
+    }, {});
+    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, size: "sm" }));
+}
+
+export { AlgoliaSortBy };

package/dist/algolia/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const MAX_QUERY_RESULTS = 1000;

package/dist/algolia/constants/index.js

@@ -0,0 +1,3 @@
+const MAX_QUERY_RESULTS = 1000;
+
+export { MAX_QUERY_RESULTS };

package/dist/algolia/filter-section.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Accordion } from '../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import filterSectionStyles from './filter-section.module.css.js';
+
+function FilterSection({ ...props }) {
+    const variant = props.variant;
+    /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+    if (props.variant === 'collapsible') {
+        return jsx(CollapsibleFilterSection, { ...props });
+    }
+    if (props.variant === 'default') {
+        return jsx(DefaultFilterSection, { ...props });
+    }
+    if (props.variant === 'with-action') {
+        return jsx(WithActionFilterSection, { ...props });
+    }
+    throw new Error(`Invalid variant ${variant}`);
+    /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+}
+function CollapsibleFilterSection({ children, gap = 'md', initialIsOpen = true, title, variant, }) {
+    return (jsx("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: jsx(Accordion, { borderType: "middle", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: filterSectionStyles['accordion-title'], children: jsx(FormattedMessage, { fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: jsx("div", { className: filterSectionStyles.content, children: children }) }) }) }));
+}
+function WithActionFilterSection({ button, children, gap = 'md', title, variant, }) {
+    return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsxs("div", { className: filterSectionStyles.header, children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: filterSectionStyles.content, children: children })] }));
+}
+function DefaultFilterSection({ children, gap = 'md', title, variant, }) {
+    return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { className: filterSectionStyles.content, children: children })] }));
+}
+
+export { FilterSection };

package/dist/algolia/filter-section.module.css.js

@@ -0,0 +1,3 @@
+var filterSectionStyles = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","title":"filter-section-module-hWVv-","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","content":"filter-section-module-15-YW","border-top":"filter-section-module-dGcTY","filter-section-item":"filter-section-module-n-AWg"};
+
+export { filterSectionStyles as default };

package/dist/algolia/use-algolia-hits.js

@@ -0,0 +1,19 @@
+"use client";
+import { transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit } from '../shared/model/hit.js';
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+import { isAlgoliaProductHit } from './algolia-hit-type.js';
+
+const useAlgoliaHitsItems = () => useGlobalState('algolia-product-hits-items', []);
+const useAlgoliaHitsLoading = () => useGlobalState('algolia-product-hits-loading');
+function useAlgoliaHits() {
+    const [items] = useAlgoliaHitsItems();
+    const [isLoading] = useAlgoliaHitsLoading();
+    return {
+        hits: items.map(hit => isAlgoliaProductHit(hit)
+            ? transformAlgoliaProductHitToProductHit(hit)
+            : transformAlgoliaPromoHitToPromoHit(hit)),
+        isLoading,
+    };
+}
+
+export { useAlgoliaHits, useAlgoliaHitsItems, useAlgoliaHitsLoading };

package/dist/algolia/use-algolia-insights-provider-global-state.js

@@ -0,0 +1,9 @@
+"use client";
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+
+function useAlgoliaInsightsGlobalState() {
+    const [state, setState] = useGlobalState('algolia-insights-global-state', {});
+    return [state, setState];
+}
+
+export { useAlgoliaInsightsGlobalState };

package/dist/algolia/use-algolia-insights.d.ts

@@ -1,19 +1,26 @@
-import { CartLineModel } from '../shared/api/storefront/model/shop.model';
+import { CartLineModel, CartModel } from '../shared/api/storefront/model/storefront.model';
 import { AlgoliaInsightsProviderGlobalState } from './use-algolia-insights-provider-global-state';
 export interface UseAlgoliaEventResult {
     context: Readonly<AlgoliaInsightsProviderGlobalState>;
-    sendAddToCartFromProductListPageEvent({ cartLine, objectId, }: {
+    sendAddToCartFromFavoritesPageEvent({ cartLine, }: {
         cartLine: CartLineModel;
-        objectId: string;
     }): void;
-    sendAddToCartFromSearchEvent({ cartLine, objectId, queryId, }: {
+    sendAddToCartFromProductDetailsPageEvent({ cartLine, }: {
+        cartLine: CartLineModel;
+    }): void;
+    sendAddToCartFromProductListPageEvent({ cartLine, }: {
+        cartLine: CartLineModel;
+    }): void;
+    sendAddToCartFromSearchEvent({ cartLine, queryId, }: {
         cartLine: CartLineModel;
-        objectId: string;
         queryId: string;
     }): void;
-    sendAddToCartFromSearchResultPageEvent({ cartLine, objectId, }: {
+    sendAddToCartFromSearchResultPageEvent({ cartLine, }: {
         cartLine: CartLineModel;
+    }): void;
+    sendAddToWishListFromProductDetailsPageEvent({ objectId, position, }: {
         objectId: string;
+        position?: number;
     }): void;
     sendAddToWishListFromProductListPageEvent({ objectId, position, }: {
         objectId: string;
@@ -28,6 +35,10 @@ export interface UseAlgoliaEventResult {
         objectId: string;
         position: number;
     }): void;
+    sendProductClickFromFavoritesPageEvent({ objectId, position, }: {
+        objectId: string;
+        position: number;
+    }): void;
     sendProductClickFromProductListPageEvent({ objectId, position, }: {
         objectId: string;
         position: number;
@@ -41,5 +52,8 @@ export interface UseAlgoliaEventResult {
         objectId: string;
         position: number;
     }): void;
+    sendPurchaseEventFromPaymentPage({ cart }: {
+        cart: CartModel;
+    }): void;
 }
 export declare function useAlgoliaInsights(): UseAlgoliaEventResult;