@sonic-equipment/ui 0.0.41 → 0.0.43

package/dist/algolia/algolia-index-config.d.ts

@@ -6,6 +6,7 @@ export interface Indexes {
         index: string;
         name: string;
     }[];
+    suggestions: string;
 }
 export declare const algoliaIndexesPerEnvironment: Record<Environment, Indexes>;
 export declare const getAlgoliaIndex: (environment: Environment, languageCode: LanguageCode) => Indexes;

package/dist/algolia/algolia-provider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 import { RouterProps } from 'instantsearch.js/es/middlewares/createRouterMiddleware';
 import { UiState } from 'instantsearch.js/es/types';
 interface AlgoliaContextType {
@@ -8,7 +8,7 @@ interface AlgoliaContextType {
     toggleOnline: VoidFunction;
 }
 interface AlgoliaProviderProps {
-    categoryPages: string | undefined;
+    categoryPages: string;
     children: ReactNode;
     languageCode: string;
     offlineSearchClient?: SearchClient;
@@ -16,6 +16,6 @@ interface AlgoliaProviderProps {
     routing?: boolean | RouterProps<UiState, UiState> | undefined;
     searchClient: SearchClient;
 }
-export declare function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online, routing, searchClient, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online, routing, searchClient, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAlgolia(): AlgoliaContextType;
 export {};

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

@@ -1,3 +1,3 @@
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export declare const searchClientLogger: (searchClient: SearchClient) => SearchClient;
 export declare const offlineSearchClient: SearchClient;

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

@@ -1,2 +1,7 @@
-import { SearchClient } from 'algoliasearch/lite';
-export declare const createSonicSearchClient: (url: string) => SearchClient;
+import { SearchClient } from 'algoliasearch';
+export declare const createSonicSearchClient: ({ apiKey, appId, path, }: {
+    apiKey: string;
+    appId: string;
+    host: string | undefined;
+    path: string;
+}) => SearchClient;

package/dist/cards/product-card/product-card.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { PressEvent } from 'react-aria-components';
 import type { ImageSource } from 'shared/types/image';
 import type { ProductPrice as ProductPriceType } from 'shared/types/price';
 export interface ProductCardProps {
@@ -6,9 +7,10 @@ export interface ProductCardProps {
     favoriteButton?: ReactElement;
     href: string;
     image: ImageSource;
+    onPress?: (e: PressEvent) => void;
     price: ProductPriceType;
     sku: string;
     tags?: string[];
     title: string;
 }
-export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, price, sku, tags, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, onPress, price, sku, tags, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/config.d.ts

@@ -1,3 +1,11 @@
-export declare const config: {
+import { Environment } from 'shared/utils/environment';
+interface Config {
+    ALGOLIA_API_KEY: string;
+    ALGOLIA_APP_ID: string;
+    ALGOLIA_HOST: string;
+    BFF_API_URL: string;
     SHOP_API_URL: string;
-};
+}
+export declare const configPerEnvironment: Record<Environment, Config>;
+export declare const config: Config;
+export {};

package/dist/global-search/global-search-provider/algolia-search-provider.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 import { Autocomplete, GlobalSearchContextValue } from 'global-search/types';
 export declare const GlobalSearchContext: React.Context<GlobalSearchContextValue | null>;
 export declare function AlgoliaSearchProvider({ children, searchClient, }: {

package/dist/global-search/global-search-provider/use-algolia-search.d.ts

@@ -21,7 +21,7 @@ export declare function useAlgoliaSearch(): {
     panelRef: React.RefObject<HTMLDivElement>;
     productsIndexName: string;
     productsQuerySuggestionsIndexName: string;
-    searchClient: import("algoliasearch/lite").SearchClient;
+    searchClient: import("algoliasearch").SearchClient;
     setState: React.Dispatch<React.SetStateAction<import("../types").AutocompleteState>>;
     state: import("../types").AutocompleteState;
 };

package/dist/global-search/global-search.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 interface GlobalSearchProps {
     children: ReactNode;
     searchClient: SearchClient;

package/dist/global-search/global-search.stories.d.ts

@@ -1,11 +1,16 @@
 import { ComponentProps } from 'react';
 import { StoryObj } from '@storybook/react';
 import { GlobalSearch } from './global-search';
+type StoryProps = Omit<ComponentProps<typeof GlobalSearch>, 'searchClient'> & {
+    bff: boolean;
+    languageCode: string;
+    online: boolean;
+};
 declare const meta: {
     args: {
-        searchClient: import("algoliasearch/lite").SearchClient;
+        bff: true;
+        languageCode: string;
     };
-    component: typeof GlobalSearch;
     parameters: {
         layout: string;
     };
@@ -13,6 +18,5 @@ declare const meta: {
     title: string;
 };
 export default meta;
-type StoryProps = ComponentProps<typeof GlobalSearch>;
 type Story = StoryObj<StoryProps>;
 export declare const Default: Story;

package/dist/global-search/plugins/categories-plugin.d.ts

@@ -1,6 +1,6 @@
 import { AutocompletePlugin } from '@algolia/autocomplete-core';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export type CategoryHit = Hit<{
     listCategories: string[];
 }>;

package/dist/global-search/plugins/popular-categories-plugin.d.ts

@@ -1,6 +1,6 @@
 import { AutocompletePlugin } from '@algolia/autocomplete-core';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export type PopularCategoryHit = Hit<{
     count: number;
     label: string;

package/dist/global-search/plugins/popular-searches-plugin.d.ts

@@ -1,6 +1,6 @@
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export type PopularSearchHit = Hit<{
     nb_words: number;
     popularity: number;

package/dist/global-search/plugins/products-plugin.d.ts

@@ -1,6 +1,6 @@
 import { AutocompletePlugin } from '@algolia/autocomplete-core';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 import type { ProductHit as ProductHitType } from 'shared/types/product';
 export type ProductHit = Hit<ProductHitType>;
 export declare const productsPlugin: ({ productsIndexName, searchClient, }: {

package/dist/global-search/plugins/query-suggestions-plugin.d.ts

@@ -1,6 +1,6 @@
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export type QuerySuggestionHit = Hit<{
     nb_words: number;
     popularity: number;

package/dist/global-search/plugins/quick-access-plugin.d.ts

@@ -1,6 +1,6 @@
 import { AutocompletePlugin } from '@algolia/autocomplete-core';
 import { Hit } from '@algolia/client-search';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export type QuickAccessHit = Hit<{
     id: number;
     image: string;

package/dist/global-search/types.d.ts

@@ -1,5 +1,5 @@
 import { AutocompleteApi, AutocompleteState as _AutocompleteState } from '@algolia/autocomplete-core';
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 import { CategoryHit } from './plugins/categories-plugin';
 import { PopularCategoryHit } from './plugins/popular-categories-plugin';
 import { PopularSearchHit } from './plugins/popular-searches-plugin';

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { ReactElement, MutableRefObject, ReactNode, RefAttributes, HTMLAttributeAnchorTarget, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { LinkProps, ButtonProps as ButtonProps$1 } from 'react-aria-components';
-import * as algoliasearch_lite from 'algoliasearch/lite';
-import { SearchClient } from 'algoliasearch/lite';
+import { LinkProps, ButtonProps as ButtonProps$1, PressEvent } from 'react-aria-components';
+import * as algoliasearch from 'algoliasearch';
+import { SearchClient } from 'algoliasearch';
 import { RouterProps } from 'instantsearch.js/es/middlewares/createRouterMiddleware';
 import { UiState } from 'instantsearch.js/es/types';
 import { AutocompleteApi, AutocompleteState as AutocompleteState$1, AutocompleteCollection } from '@algolia/autocomplete-core';
@@ -133,7 +133,7 @@ interface FetchProductListingPageDataArgs {
 declare class FetchProductListingPageDataError extends ResponseError {
     constructor(response: Response, message?: string);
 }
-declare function useFetchProductListingPageData(bffUrl: string, { languageCode, pageUrl }: FetchProductListingPageDataArgs): _tanstack_react_query.UseQueryResult<ProductListingPageData, Error>;
+declare function useFetchProductListingPageData({ languageCode, pageUrl, }: FetchProductListingPageDataArgs): _tanstack_react_query.UseQueryResult<ProductListingPageData, Error>;
 
 interface BaseModel$1 {
     properties: {
@@ -3684,12 +3684,13 @@ interface ProductCardProps {
     favoriteButton?: ReactElement;
     href: string;
     image: ImageSource;
+    onPress?: (e: PressEvent) => void;
     price: ProductPrice$1;
     sku: string;
     tags?: string[];
     title: string;
 }
-declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, price, sku, tags, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, onPress, price, sku, tags, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
 interface CategoryCarouselProps {
     categoryCards: ReactNode[];
@@ -3918,11 +3919,10 @@ interface Filters {
     };
 }
 interface ProductListingPageProps {
-    bffUrl: string;
     pageUrl: string;
     searchClient?: SearchClient;
 }
-declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
+declare function ProductListingPage({ pageUrl, searchClient: _searchClient, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarProps {
     children: React.ReactNode;
@@ -3969,7 +3969,12 @@ interface AlgoliaPaginationProps {
 }
 declare function AlgoliaPagination({ onChange }: AlgoliaPaginationProps): react_jsx_runtime.JSX.Element;
 
-declare const createSonicSearchClient: (url: string) => SearchClient;
+declare const createSonicSearchClient: ({ apiKey, appId, path, }: {
+    apiKey: string;
+    appId: string;
+    host: string | undefined;
+    path: string;
+}) => SearchClient;
 
 interface AlgoliaContextType {
     online: boolean;
@@ -3977,7 +3982,7 @@ interface AlgoliaContextType {
     toggleOnline: VoidFunction;
 }
 interface AlgoliaProviderProps {
-    categoryPages: string | undefined;
+    categoryPages: string;
     children: ReactNode;
     languageCode: string;
     offlineSearchClient?: SearchClient;
@@ -3985,7 +3990,7 @@ interface AlgoliaProviderProps {
     routing?: boolean | RouterProps<UiState, UiState> | undefined;
     searchClient: SearchClient;
 }
-declare function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online, routing, searchClient, }: AlgoliaProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online, routing, searchClient, }: AlgoliaProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAlgolia(): AlgoliaContextType;
 
 declare function AlgoliaResultsCount(): string | null;
@@ -4145,7 +4150,7 @@ declare function useAlgoliaSearch(): {
     panelRef: React.RefObject<HTMLDivElement>;
     productsIndexName: string;
     productsQuerySuggestionsIndexName: string;
-    searchClient: algoliasearch_lite.SearchClient;
+    searchClient: algoliasearch.SearchClient;
     setState: React.Dispatch<React.SetStateAction<AutocompleteState>>;
     state: AutocompleteState;
 };

package/dist/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
 import { history } from 'instantsearch.js/es/lib/routers/index.js';
 import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
+import algoliasearch from 'algoliasearch';
 import ReactDOM from 'react-dom';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import { createAutocomplete } from '@algolia/autocomplete-core';
@@ -13,6 +14,55 @@ import { getAlgoliaResults, getAlgoliaFacets, parseAlgoliaHitHighlight } from '@
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 
+const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox/i;
+const productionUrls = /sonic-equipment.com|production/i;
+let environmentUrl;
+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 = window.location.hostname;
+}
+else {
+    environmentUrl = 'production';
+    console.error('Unable to detect environment url');
+}
+let environment;
+if (environmentUrl.match(sandboxUrls)) {
+    environment = 'sandbox';
+}
+else if (environmentUrl.match(productionUrls)) {
+    environment = 'production';
+}
+else {
+    // TODO; Do not default to sandbox
+    environment = 'production';
+    console.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
+}
+
+const configPerEnvironment = {
+    production: {
+        ALGOLIA_API_KEY: '0baffaec3208d8afa13b2bad049fd2d4',
+        ALGOLIA_APP_ID: '14CUFCVMAD',
+        ALGOLIA_HOST: 'bff.shop.sonic-equipment.com',
+        BFF_API_URL: 'https://bff.shop.sonic-equipment.com',
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        SHOP_API_URL: '',
+    },
+    sandbox: {
+        ALGOLIA_API_KEY: 'f3c57c730433f5cf7825b62545eccb05',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'test-bff.shop.sonic-equipment.com',
+        BFF_API_URL: 'https://test-bff.shop.sonic-equipment.com',
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        SHOP_API_URL: '',
+    },
+};
+const config = configPerEnvironment[environment];
+
 class ResponseError extends Error {
     constructor(response, message) {
         super(response.statusText);
@@ -65,18 +115,18 @@ class FetchProductListingPageDataError extends ResponseError {
         this.name = 'FetchProductListingPageDataError';
     }
 }
-function useFetchProductListingPageData(bffUrl, { languageCode, pageUrl }) {
+function useFetchProductListingPageData({ languageCode, pageUrl, }) {
     return useQuery({
         gcTime: 1000 * 60 * 60 * 24,
         queryFn: async () => {
-            const res = await fetch(`${bffUrl}/api/v1/plp/?pageUrl=${pageUrl}`, {
+            const res = await fetch(`${config.BFF_API_URL}/api/v1/plp/?pageUrl=${pageUrl}`, {
                 headers: { 'Current-Language-Id': languageCode },
             });
             if (!res.ok)
                 throw new FetchProductListingPageDataError(res);
             return (await res.json());
         },
-        queryKey: [bffUrl, 'product-listing-page-data', pageUrl, languageCode],
+        queryKey: ['product-listing-page-data', pageUrl, languageCode],
         retry: false,
         select: (data) => {
             return {
@@ -151,11 +201,6 @@ var BadgeStyleValues;
     BadgeStyleValues["Round"] = "Round";
 })(BadgeStyleValues || (BadgeStyleValues = {}));
 
-const config = {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    SHOP_API_URL: '',
-};
-
 class AddProductToCurrentCartError extends ResponseError {
     constructor(response, message) {
         super(response, message);
@@ -471,7 +516,10 @@ function useGlobalState(key, initialState) {
             state.removeEventListener('stateChanged', setRerenderState);
         };
     }, [state]);
-    return [rerenderState, (value) => (state.value = value)];
+    return [
+        rerenderState,
+        useCallback((value) => (state.value = value), [state]),
+    ];
 }
 
 function CartProvider(props) {
@@ -944,8 +992,8 @@ function Image({ alt, className, fallbackSrc = 'https://res.cloudinary.com/dkz9e
 
 var styles$s = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
-function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, price, sku, tags, title, }) {
-    return (jsxs(RouteLink, { className: styles$s['product-card'], href: href, children: [jsx("div", { className: styles$s.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$s['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$s.content, children: [jsxs("div", { className: styles$s.top, children: [jsx("div", { className: styles$s.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$s.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$s.bottom, children: [jsx("div", { className: styles$s.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$s['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, onPress, price, sku, tags, title, }) {
+    return (jsxs(RouteLink, { className: styles$s['product-card'], href: href, onPress: onPress, children: [jsx("div", { className: styles$s.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$s['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$s.content, children: [jsxs("div", { className: styles$s.top, children: [jsx("div", { className: styles$s.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$s.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$s.bottom, children: [jsx("div", { className: styles$s.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$s['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 /**
@@ -1797,7 +1845,7 @@ function Observer(_ref) {
     });
     observer.observe(target, {
       attributes: typeof options.attributes === 'undefined' ? true : options.attributes,
-      childList: typeof options.childList === 'undefined' ? true : options.childList,
+      childList: swiper.isElement || (typeof options.childList === 'undefined' ? true : options).childList,
       characterData: typeof options.characterData === 'undefined' ? true : options.characterData
     });
     observers.push(observer);
@@ -5851,7 +5899,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.1.4
+ * Swiper React 11.1.5
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -5859,7 +5907,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: May 30, 2024
+ * Released on: July 15, 2024
  */
 
 
@@ -6438,10 +6486,10 @@ function ProductOverviewGrid({ children }) {
     return (jsx("div", { className: styles$j['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$j['grid-item'], children: child }, index))) }));
 }
 
-var styles$i = {"progress-circle":"progress-circle-module-4nweP","load-spin":"progress-circle-module-jPY-W"};
+var styles$i = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
 
 function ProgressCircle({ className }) {
-    return jsx("div", { className: clsx(styles$i['progress-circle'], className) });
+    return (jsxs("svg", { className: clsx(styles$i['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
 }
 
 var styles$h = {"loading-overlay":"loading-overlay-module-L67Gy"};
@@ -6501,9 +6549,7 @@ function AlgoliaActiveFilters() {
     const selectedFilterCategories = items
         .sort((a, b) => (a.label.localeCompare(b.label) ? 1 : -1))
         .map((category) => ({
-        filters: category.refinements.sort((a, b) => 
-        // TODO: Investigate how to sort numerical
-        a.value.toString().localeCompare(b.value.toString()) ? 1 : -1),
+        filters: category.refinements,
         label: category.label,
     }));
     function onClearFilter(categoryLabel, filter) {
@@ -6587,31 +6633,6 @@ function AlgoliaPagination({ onChange }) {
     return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => handlePageChange(pageNumber), totalPages: nbPages }));
 }
 
-const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com/i;
-const productionUrls = /sonic-equipment.com/i;
-let environmentUrl;
-if (typeof process !== 'undefined' && process.env.ISC_API_URL) {
-    environmentUrl = process.env.ISC_API_URL;
-}
-else if (typeof window !== 'undefined') {
-    environmentUrl = window.location.hostname;
-}
-else {
-    throw new Error('Unable to detect environment url');
-}
-let environment;
-if (environmentUrl.match(sandboxUrls)) {
-    environment = 'sandbox';
-}
-else if (environmentUrl.match(productionUrls)) {
-    environment = 'production';
-}
-else {
-    // TODO; Do not default to sandbox
-    environment = 'sandbox';
-    console.error(`Environment not detected for url ${environmentUrl}. Defaulting to sandbox.`);
-}
-
 const algoliaIndexesPerEnvironment = {
     production: {
         default: 'prod_sonic_products_<languageCode>',
@@ -6633,6 +6654,7 @@ const algoliaIndexesPerEnvironment = {
                 name: 'price_desc',
             },
         ],
+        suggestions: 'prod_sonic_products_<languageCode>_query_suggestions',
     },
     sandbox: {
         default: 'dev_sonic_products_<languageCode>',
@@ -6654,6 +6676,7 @@ const algoliaIndexesPerEnvironment = {
                 name: 'price_desc',
             },
         ],
+        suggestions: 'dev_sonic_products_<languageCode>_query_suggestions',
     },
 };
 const getAlgoliaIndex = (environment, languageCode) => {
@@ -6669,6 +6692,7 @@ const getAlgoliaIndex = (environment, languageCode) => {
             index: index.replace(/<languageCode>/, shortLanguageCode),
             name,
         })),
+        suggestions: environmentIndex.suggestions.replace(/<languageCode>/, shortLanguageCode),
     };
 };
 
@@ -6735,10 +6759,6 @@ const AlgoliaContext = createContext({
 function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online = true, routing, searchClient, }) {
     const [online, setOnline] = useState(_online);
     const algoliaIndex = getAlgoliaIndex(environment, languageCode);
-    if (!categoryPages) {
-        // TODO: Implement loading page
-        return null;
-    }
     return (jsx(AlgoliaContext.Provider, { value: {
             online,
             setOnline,
@@ -6761,15 +6781,38 @@ const offlineSearchClient = {
     },
 };
 
-const createSonicSearchClient = (url) => ({
-    async search(requests) {
-        return fetch(url, {
+const createSonicSearchClient = ({ apiKey, appId, path, }) => {
+    const searchClient = algoliasearch(appId, apiKey);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.search = (requests) => {
+        return fetch(`${config.BFF_API_URL}${path}`, {
             body: JSON.stringify({ requests }),
             headers: { 'Content-Type': 'application/json' },
             method: 'post',
         }).then(res => res.json());
-    },
-});
+    };
+    return searchClient;
+};
+// export const createSonicSearchClient = ({
+//   apiKey,
+//   appId,
+//   host,
+// }: {
+//   apiKey: string
+//   appId: string
+//   host: string | undefined
+//   path: string
+// }) => {
+//   const searchClient = algoliasearch(appId, apiKey, {
+//     headers: { 'Content-Type': 'appliction/json' },
+//   })
+//   if (host)
+//     searchClient.transporter.hosts = [
+//       { accept: 1, protocol: 'https', url: host },
+//     ]
+//   return searchClient
+// }
 
 function useLanguageCode() {
     const { languageCode } = useContext(IntlContext);
@@ -6875,9 +6918,19 @@ const ToggleSidebarButton = () => {
 
 var styles$8 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
 
-function ProductListingPage({ bffUrl, pageUrl, searchClient, }) {
+function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
     const languageCode = useLanguageCode();
-    const { data, error, isError, isFetching } = useFetchProductListingPageData(bffUrl, { languageCode, pageUrl });
+    const { data, error, isError, isFetching } = useFetchProductListingPageData({
+        languageCode,
+        pageUrl,
+    });
+    const searchClient = useMemo(() => _searchClient ||
+        createSonicSearchClient({
+            apiKey: config.ALGOLIA_API_KEY,
+            appId: config.ALGOLIA_APP_ID,
+            host: config.ALGOLIA_HOST,
+            path: '/search',
+        }), [_searchClient]);
     if (isError) {
         if (!isResponseError(error))
             throw error;
@@ -6888,15 +6941,14 @@ function ProductListingPage({ bffUrl, pageUrl, searchClient, }) {
         return jsx(LoadingOverlay, {});
     }
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient ||
-                createSonicSearchClient(`${bffUrl}${bffUrl.endsWith('/') ? '' : '/'}search`), children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$8['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, {}) }) }) }));
+    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$8['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, {}) }) }) }));
 }
 function ProductListingPageContent() {
     const { toggle } = useSidebar();
     return (jsxs(Fragment, { children: [jsx("section", { className: styles$8.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$8['action-bar'], children: [jsx("div", { className: styles$8['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$8.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$8.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$8['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$8['product-grid'], children: [jsx(ProductOverview, {}), jsx("div", { className: styles$8.pagination, children: jsx(AlgoliaPagination, { onChange: () => scrollToTop() }) })] })] }) })] }));
 }
 function ProductOverview() {
-    const { hits: productHits } = useHits();
+    const { items: productHits } = useHits();
     return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCard, { href: productHit.storefrontSlug, image: {
                 alt: productHit.name,
                 fit: 'contain',
@@ -7188,9 +7240,10 @@ function AlgoliaSearchProvider({ children, searchClient, }) {
         query: '',
         status: 'idle',
     });
-    // TODO: index name should be environment specific
-    const productsIndexName = 'dev_sonic_products_en';
-    const productsQuerySuggestionsIndexName = 'dev_sonic_products_en_query_suggestions';
+    const languageCode = useLanguageCode();
+    const index = getAlgoliaIndex(environment, languageCode);
+    const productsIndexName = index.default;
+    const productsQuerySuggestionsIndexName = index.suggestions;
     /**
      * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
      */
@@ -7299,7 +7352,8 @@ var styles$5 = {"global-search-overlay-background-position":"global-search-modul
 const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchContainer({ children, }) {
     const { close, isOpen, open, toggle } = useDisclosure(false);
-    return (jsx(TransitionGroup, { children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [jsx(Transition, { in: isOpen, timeout: 300, children: state => jsx("div", { className: state, children: children }) }), jsx(OverlayBackground, { className: styles$5['global-search-overlay-background-position'], isOpen: isOpen, onClick: toggle })] }) }));
+    const panelRef = useRef(null);
+    return (jsx(TransitionGroup, { children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: children })) }), jsx(OverlayBackground, { className: styles$5['global-search-overlay-background-position'], isOpen: isOpen, onClick: toggle })] }) }));
 }
 
 const useGlobalSearchDisclosure = () => {
@@ -7437,6 +7491,7 @@ function SuggestionsSection() {
                             }), children: [jsx("div", { children: item.listCategories[item.listCategories.length - 1] }), jsx("div", { style: { fontSize: '14px' }, children: item.listCategories.slice(0, -1).join(' > ') })] }, item.objectID))) }))] })] }));
 }
 function ProductResultsSection() {
+    const { close } = useGlobalSearchDisclosure();
     const { autocomplete, products: collection } = useAlgoliaSearch();
     if (!collection)
         return null;
@@ -7447,11 +7502,11 @@ function ProductResultsSection() {
                             src: product.images?.find(image => image.quality === 'medium')
                                 ?.url || '',
                             title: product.name,
-                        }, price: {
+                        }, onPress: () => close(), price: {
                             isVatIncluded: product.isVatIncluded,
                             originalPrice: product.originalPrice,
                             price: product.price,
-                        }, productId: "", sku: product.id, tags: product.labels, title: product.name }, product.id))) }) })] }));
+                        }, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.id))) }) })] }));
 }
 
 function PanelContent() {
@@ -7483,7 +7538,7 @@ function SearchRoot() {
             inputRef.current.blur();
         }
     }, [inputRef, isOpen]);
-    return (jsx(Fragment, { children: jsx(Transition, { in: isOpen, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
+    return (jsx(Fragment, { children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
 }
 
 /**

package/dist/pages/product-listing-page/product-listing-page.d.ts

@@ -1,4 +1,4 @@
-import { SearchClient } from 'algoliasearch/lite';
+import { SearchClient } from 'algoliasearch';
 export interface Filters {
     color: {
         options: {
@@ -9,8 +9,7 @@ export interface Filters {
     };
 }
 export interface ProductListingPageProps {
-    bffUrl: string;
     pageUrl: string;
     searchClient?: SearchClient;
 }
-export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListingPage({ pageUrl, searchClient: _searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-listing-page/product-listing-page.stories.d.ts

@@ -9,7 +9,6 @@ type StoryProps = Omit<ComponentProps<typeof ProductListingPage>, 'searchClient'
 declare const meta: {
     args: {
         bff: true;
-        bffUrl: string;
         languageCode: string;
         online: true;
         pageUrl: string;

package/dist/shared/api/bff/hooks/use-fetch-product-listing-page-data.d.ts

@@ -7,4 +7,4 @@ export interface FetchProductListingPageDataArgs {
 export declare class FetchProductListingPageDataError extends ResponseError {
     constructor(response: Response, message?: string);
 }
-export declare function useFetchProductListingPageData(bffUrl: string, { languageCode, pageUrl }: FetchProductListingPageDataArgs): import("@tanstack/react-query").UseQueryResult<ProductListingPageData, Error>;
+export declare function useFetchProductListingPageData({ languageCode, pageUrl, }: FetchProductListingPageDataArgs): import("@tanstack/react-query").UseQueryResult<ProductListingPageData, Error>;

package/dist/shared/api/bff/hooks/use-fetch-product-listing-page-data.stories.d.ts

@@ -1,13 +1,11 @@
 import { StoryObj } from '@storybook/react';
 interface StoryProps {
-    bffUrl: string;
     languageCode: string;
     pageUrl: string;
 }
-declare function UseFetchProductListingPageDataStory({ bffUrl, languageCode, pageUrl, }: StoryProps): import("react/jsx-runtime").JSX.Element;
+declare function UseFetchProductListingPageDataStory({ languageCode, pageUrl, }: StoryProps): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     args: {
-        bffUrl: string;
         languageCode: string;
         pageUrl: string;
     };

package/dist/styles.css

@@ -916,6 +916,7 @@
       -webkit-line-clamp: 4;
       line-height: 1;
       text-wrap: balance;
+      word-break: break-word;
     }
 
   .product-card-module-pLaiB .product-card-module-kD2tU {
@@ -990,7 +991,7 @@
 }
 
 /**
- * Swiper 11.1.4
+ * Swiper 11.1.5
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -998,7 +999,7 @@
  *
  * Released under the MIT License
  *
- * Released on: May 30, 2024
+ * Released on: July 15, 2024
  */
 
 /* FONT_START */
@@ -1918,16 +1919,12 @@
 
   width: var(--width);
   height: var(--width);
-  border-radius: 50%;
-  animation: progress-circle-module-jPY-W 0.6s infinite linear;
-  background: conic-gradient(#0000 10%, #000);
-  -webkit-mask: radial-gradient(farthest-side, #0000 9px, #000 0);
-          mask: radial-gradient(farthest-side, #0000 9px, #000 0);
+  animation: progress-circle-module-kCf7K 0.6s infinite linear;
 }
 
-@keyframes progress-circle-module-jPY-W {
+@keyframes progress-circle-module-kCf7K {
   to {
-    transform: rotate(1turn);
+    transform: rotate(360deg);
   }
 }
 
@@ -2401,6 +2398,7 @@
 
 .overlay-background-module-j7R7T {
   position: fixed;
+  z-index: calc(var(--sidebar-layer) - 1);
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgb(0 0 0 / 52%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "license": "MIT",
   "engines": {