@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/pages/layouts/checkout-page-layout/checkout-page-layout.js

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import clsx from 'clsx';
+import { useIntersectionObserver } from '../../../shared/hooks/use-intersection-observer.js';
+import { useIsBreakpoint } from '../../../shared/hooks/use-is-breakpoint.js';
+import { useWatchCssProperty } from '../../../shared/hooks/use-watch-css-property.js';
+import styles from './checkout-page-layout.module.css.js';
+
+function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
+    const isXXL = useIsBreakpoint('xxl');
+    const topRef = useRef(null);
+    const bottomRef = useRef(null);
+    const headerHeight = useWatchCssProperty('--header-height');
+    const observables = useMemo(() => [
+        {
+            options: {
+                rootMargin: `-${headerHeight || '0px'} 0px 0px 0px`,
+            },
+            ref: topRef,
+        },
+        { ref: bottomRef },
+    ], [headerHeight]);
+    const { isIntersecting } = useIntersectionObserver({
+        isDisabled: isXXL,
+        observables,
+    });
+    return (jsxs("div", { className: styles['checkout-page-layout'], children: [!isXXL && (jsxs(Fragment, { children: [mobileSummary, jsx("div", { ref: topRef }), jsxs("div", { className: clsx(styles['top-actions'], styles.actions), children: [actions?.primary, actions?.secondary] }), !isIntersecting && (jsxs("div", { className: clsx(styles['top-actions-sticky'], styles.actions), children: [actions?.primary, actions?.secondary] }))] })), jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsxs("div", { className: styles['sticky-side'], children: [overview, jsxs("div", { ref: bottomRef, className: styles.actions, children: [actions?.primary, actions?.secondary] })] }) })] })] }));
+}
+
+export { CheckoutPageLayout };

package/dist/pages/layouts/checkout-page-layout/checkout-page-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"checkout-page-layout":"checkout-page-layout-module-54Qta","wrapper":"checkout-page-layout-module-itTHb","sticky-side":"checkout-page-layout-module-pV1P2","actions":"checkout-page-layout-module-xuXiO","top-actions":"checkout-page-layout-module-Nmktk","top-actions-sticky":"checkout-page-layout-module---Bqj"};
+
+export { styles as default };

package/dist/pages/layouts/product-details-page-layout/product-details-page-layout.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './product-details-page-layout.module.css.js';
+
+function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
+    return (jsxs("div", { className: styles['product-details-page-layout'], children: [jsxs("section", { className: styles.top, children: [jsx("div", { className: styles['image-gallery'], children: imageGallery }), jsx("div", { className: styles['product-information'], children: productInformation })] }), jsx("section", { className: styles.usp, children: usp }), jsx("section", { className: styles.included, children: included }), jsx("section", { className: styles['recently-viewed'], children: recentlyViewed })] }));
+}
+
+export { ProductDetailsPageLayout };

package/dist/pages/layouts/product-details-page-layout/product-details-page-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-details-page-layout":"product-details-page-layout-module-YnHNa","top":"product-details-page-layout-module-bWVpu","image-gallery":"product-details-page-layout-module-EgqvM","product-information":"product-details-page-layout-module-Tu8s1","recently-viewed":"product-details-page-layout-module-9VKcH","included":"product-details-page-layout-module--tq0o","usp":"product-details-page-layout-module-xA4IZ"};
+
+export { styles as default };

package/dist/pages/loading-page/loading-page.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { BlankPageSpacer } from '../../loading/blank-page-spacer.js';
+import { LoadingOverlay } from '../../loading/loading-overlay.js';
+
+function LoadingPage() {
+    return (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) }));
+}
+
+export { LoadingPage };

package/dist/pages/page/page.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Breadcrumb } from '../../breadcrumbs/breadcrumb.js';
+import { useBreakpoint } from '../../shared/hooks/use-breakpoint.js';
+import { Heading } from '../../typography/heading/heading.js';
+import { PageContainer } from '../page-container/page-container.js';
+import styles from './page.module.css.js';
+
+function PageTitle({ children }) {
+    const { lg, xxl } = useBreakpoint();
+    return (jsx(Heading, { italic: true, uppercase: true, className: styles.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
+}
+function Page({ breadCrumb, children, className, title }) {
+    return (jsxs(PageContainer, { className: clsx(styles.page, className), children: [jsx("div", { className: styles.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
+}
+
+export { Page };

package/dist/pages/page/page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
+
+export { styles as default };

package/dist/pages/page-container/page-container.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './page-container.module.css.js';
+
+function PageContainer({ children, className, }) {
+    return (jsx("div", { className: styles['page-container'], children: jsx("div", { className: clsx(styles['inner-page-container'], className), children: children }) }));
+}
+
+export { PageContainer };

package/dist/pages/page-container/page-container.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
+
+export { styles as default };

package/dist/pages/product-details-page/components/product-details-images/product-detail-images.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { ImagesGrid } from '../../../../media/image-grid/images-grid.js';
+import { ImageLightbox } from '../../../../media/image-lightbox/image-lightbox.js';
+import { ZoomImage } from '../../../../media/zoom-image/zoom-image.js';
+import { Modal } from '../../../../modals/modal/modal.js';
+import { useDisclosure } from '../../../../shared/hooks/use-disclosure.js';
+import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
+import styles from './product-detail-images.module.css.js';
+
+const MAX_IMAGES = 5;
+function ProductDetailImages({ images }) {
+    const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+    const [selectedZoomImageIndex, setSelectedZoomImageIndex] = useState(0);
+    const [scrollPercentage, setScrollPercentage] = useState(0);
+    const { isOpen: isOpenModal, open: openModal, toggle: toggleModal, } = useDisclosure();
+    const { close: closeZoom, isOpen: isOpenZoom, open: openZoom, } = useDisclosure();
+    const isXl = useIsBreakpoint('xl');
+    if (images.length > MAX_IMAGES) {
+        images = images.slice(0, MAX_IMAGES);
+    }
+    function handleOpenImage(image) {
+        setSelectedImageIndex(images.indexOf(image));
+        openModal();
+    }
+    function onZoom({ index, scrollPercentage, }) {
+        setSelectedZoomImageIndex(index);
+        setScrollPercentage(scrollPercentage);
+        openZoom();
+    }
+    return (jsxs(Fragment, { children: [isXl ? (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpenModal, onOpenChange: toggleModal, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, onZoom: onZoom, variant: "lg" }) }) })] })) : (jsx(ImageLightbox, { images: images, onZoom: onZoom })), isOpenZoom && (jsx(ZoomImage, { currentImage: images[selectedZoomImageIndex], isZoomed: isOpenZoom, onClose: closeZoom, scrollFromTopPercentage: scrollPercentage }))] }));
+}
+
+export { ProductDetailImages };

package/dist/pages/product-details-page/components/product-details-images/product-detail-images.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};
+
+export { styles as default };

package/dist/pages/product-details-page/components/product-details-panel/product-details-panel.d.ts

@@ -1,4 +1,5 @@
-import { ProductDetails } from '../../../../shared/api/bff/model/bff.model';
-export declare function ProductDetailsPanel({ product }: {
+import { ProductDetails } from 'shared/api/bff/model/bff.model';
+export declare function ProductDetailsPanel({ priceComponent, product, }: {
+    priceComponent?: React.ReactNode;
     product: ProductDetails;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-details-page/components/product-details-panel/product-details-panel.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ConnectedAddToCartButton } from '../../../../buttons/add-to-cart-button/connected-add-to-cart-button.js';
+import { ConnectedFavoriteButton } from '../../../../buttons/favorite/connected-favorite-button.js';
+import { Accordion } from '../../../../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../../../../collapsables/accordion/accordion-item.js';
+import { ShowAll } from '../../../../collapsables/show-all/show-all.js';
+import { ProductPrice } from '../../../../display/product-price/product-price.js';
+import { ProductSku } from '../../../../display/product-sku/product-sku.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { DownloadDocumentList } from '../../../../lists/download-document-list/download-document-list.js';
+import { FeatureList } from '../../../../lists/feature-list/feature-list.js';
+import { Heading } from '../../../../typography/heading/heading.js';
+import styles from './product-details-panel.module.css.js';
+
+function ProductDetailsPanel({ priceComponent, product, }) {
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles.description, dangerouslySetInnerHTML: {
+                                __html: product.content.htmlContent,
+                            } }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [product.attributeTypes.length > 0 && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles['feature-list'], features: product.attributeTypes.map(attribute => ({
+                                    id: `${attribute.id}`,
+                                    key: { label: attribute.label },
+                                    value: attribute.attributeValues.map(attributeValue => attributeValue.value),
+                                })) }) })), product.specifications.length > 0 && (jsx(AccordionItem, { id: "features", title: jsx(FormattedMessage, { id: "Features" }), children: jsx(FeatureList, { className: styles['feature-list'], features: product.specifications.map(specification => ({
+                                    id: `${specification.id}`,
+                                    key: { label: specification.nameDisplay },
+                                    value: specification.value,
+                                })) }) })), product.documents.length > 0 && (jsx(AccordionItem, { id: "downloads", title: jsx(FormattedMessage, { id: "Downloads" }), children: jsx(DownloadDocumentList, { className: styles['feature-list'], documents: product.documents
+                                    .map(document => ({
+                                    href: document.filePath,
+                                    id: document.id,
+                                    name: document.name,
+                                }))
+                                    .sort((a, b) => a.name.localeCompare(b.name)) }) }))] }) })] }));
+}
+
+export { ProductDetailsPanel };

package/dist/pages/product-details-page/components/product-details-panel/product-details-panel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-details-panel":"product-details-panel-module-kfhpL","heading":"product-details-panel-module--1ODE","price-action-container":"product-details-panel-module-CCcmA","action-container":"product-details-panel-module-1vyDM","description":"product-details-panel-module-GfTab","feature-list":"product-details-panel-module-ze0my"};
+
+export { styles as default };

package/dist/pages/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.d.ts

@@ -0,0 +1,4 @@
+import { ProductSummary } from '../../../../shared/api/bff/model/bff.model';
+export declare function ProductDetailsRecentlyViewed({ recentlyViewed, }: {
+    recentlyViewed: ProductSummary[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.js

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ConnectedProductCard } from '../../../../cards/product-card/connected-product-card.js';
+import { CardCarousel } from '../../../../carousel/card-carousel/card-carousel.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { Heading } from '../../../../typography/heading/heading.js';
+
+function ProductDetailsRecentlyViewed({ recentlyViewed, }) {
+    return (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(CardCarousel, { hasOverflow: true, cards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+                        fit: 'contain',
+                        image: product.image,
+                        title: product.image?.altText || product.title,
+                    }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] }));
+}
+
+export { ProductDetailsRecentlyViewed };

package/dist/pages/product-details-page/product-details-page.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useFetchProductDetailsPageData } from '../../shared/api/bff/hooks/use-fetch-product-details-page-data.js';
+import { ErrorPage } from '../error-page/error-page.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { ProductDetails } from './product-details.js';
+
+function ProductDetailsPage({ pageUrl }) {
+    const cultureCode = useCultureCode();
+    const { data, error, isError, isFetching } = useFetchProductDetailsPageData({
+        cultureCode,
+        pageUrl,
+    });
+    if (isError)
+        return jsx(ErrorPage, { error: error });
+    if (!data || isFetching)
+        return jsx(LoadingPage, {});
+    return jsx(ProductDetails, { data: data });
+}
+
+export { ProductDetailsPage };

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

@@ -0,0 +1,6 @@
+import { ProductDetailsPageDataResponse } from '../../shared/api/bff/model/bff.model';
+export declare function ProductDetails({ data, priceComponent, recentlyViewedComponent, }: {
+    data: ProductDetailsPageDataResponse;
+    priceComponent?: React.ReactNode;
+    recentlyViewedComponent?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-details-page/product-details.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ConnectedProductCard } from '../../cards/product-card/connected-product-card.js';
+import { CardCarousel } from '../../carousel/card-carousel/card-carousel.js';
+import { ProductUSPCarousel } from '../../carousel/usp-carousel/product-usp-carousel.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { Heading } from '../../typography/heading/heading.js';
+import { ProductDetailsPageLayout } from '../layouts/product-details-page-layout/product-details-page-layout.js';
+import { Page } from '../page/page.js';
+import { ProductDetailImages } from './components/product-details-images/product-detail-images.js';
+import { ProductDetailsPanel } from './components/product-details-panel/product-details-panel.js';
+import { ProductDetailsRecentlyViewed } from './components/product-details-recently-viewed/product-details-recently-viewed.js';
+
+function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
+    const { breadCrumb, included, product, recentlyViewed, usps } = data;
+    return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: included !== undefined &&
+                included.length > 0 && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(CardCarousel, { allowExpandToGrid: true, hasOverflow: true, cards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+                                fit: 'contain',
+                                image: product.image,
+                                title: product.image?.altText || product.title,
+                            }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { priceComponent: priceComponent, product: product }), recentlyViewed: recentlyViewedComponent ||
+                (recentlyViewed !== undefined && recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
+}
+
+export { ProductDetails };

package/dist/pages/product-listing-page/no-results/no-results.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useBreakpoint } from '../../../shared/hooks/use-breakpoint.js';
+import { RouteButton } from '../../../shared/routing/route-button.js';
+import { Heading } from '../../../typography/heading/heading.js';
+import styles from './no-results.module.css.js';
+
+function NoResults({ content, title }) {
+    const { lg } = useBreakpoint();
+    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(RouteButton, { withArrow: true, href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
+}
+
+export { NoResults };

package/dist/pages/product-listing-page/no-results/no-results.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
+
+export { styles as default };

package/dist/pages/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRefinementList } from 'react-instantsearch';
+import { CategoryCard } from '../../../cards/category-card/category-card.js';
+import { CategoryCarousel } from '../../../carousel/category-carousel/category-carousel.js';
+import { transformAlgoliaCategoryData } from '../../../shared/model/category.js';
+
+function ProductListingPageCategoryCarousel({ currentCategoryPath, }) {
+    const { items } = useRefinementList({
+        attribute: `hierarchicalStorefrontCategories.lvl${currentCategoryPath.length}`,
+        limit: 100,
+    });
+    const categories = transformAlgoliaCategoryData(items).filter(category => currentCategoryPath.every((path, index) => path === category.path[index]));
+    if (categories.length === 0)
+        return null;
+    return (jsx(CategoryCarousel, { categoryCards: categories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
+                image: category.image,
+                title: category.name,
+            }, title: category.name }, index))) }));
+}
+
+export { ProductListingPageCategoryCarousel };

package/dist/pages/product-listing-page/product-listing-page-provider/product-listing-page-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from 'react';
+
+const ProductListingPageContext = createContext({
+    data: undefined,
+});
+
+export { ProductListingPageContext };

package/dist/pages/product-listing-page/product-listing-page-provider/product-listing-page-provider.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { ProductListingPageContext } from './product-listing-page-context.js';
+
+function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
+    return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
+}
+function useProductListingPageProvider() {
+    return useContext(ProductListingPageContext);
+}
+
+export { ProductListingPageProvider, useProductListingPageProvider };

package/dist/pages/product-listing-page/product-listing-page.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createSonicSearchClient } from '../../algolia/algolia-sonic-searchclient.js';
+import { config } from '../../config.js';
+import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useFetchProductListingPageData } from '../../shared/api/bff/hooks/use-fetch-product-listing-page-data.js';
+import { ErrorPage } from '../error-page/error-page.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { ProductListing } from './product-listing.js';
+
+const defaultSearchClient = createSonicSearchClient({
+    apiKey: config.ALGOLIA_API_KEY,
+    appId: config.ALGOLIA_APP_ID,
+    host: config.ALGOLIA_HOST,
+});
+function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
+    const cultureCode = useCultureCode();
+    const { data, error, isError, isFetching } = useFetchProductListingPageData({
+        cultureCode,
+        pageUrl,
+    });
+    if (isError)
+        return jsx(ErrorPage, { error: error });
+    if (!data || isFetching)
+        return jsx(LoadingPage, {});
+    return jsx(ProductListing, { data: data, searchClient: searchClient });
+}
+
+export { ProductListingPage };

package/dist/pages/product-listing-page/product-listing-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","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"};
+
+export { styles as default };

package/dist/pages/product-listing-page/product-listing-product-overview/product-listing-product-overview.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAlgoliaHits } from '../../../algolia/use-algolia-hits.js';
+import { useAlgoliaInsights } from '../../../algolia/use-algolia-insights.js';
+import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
+import { ProductOverviewGrid } from '../../../lists/product-overview-grid/product-overview-grid.js';
+import { PromoCard } from '../../../promos/promo-card/promo-card.js';
+import { isProductHit } from '../../../shared/model/hit.js';
+
+function ProductHitCard({ hit }) {
+    const { sendAddToCartFromProductListPageEvent, sendAddToWishListFromProductListPageEvent, sendProductClickFromProductListPageEvent, } = useAlgoliaInsights();
+    return (jsx(ConnectedProductCard, { href: hit.storefrontSlug, id: hit.storefrontId, image: {
+            fit: 'contain',
+            image: hit.image,
+            title: hit.name,
+        }, onAddToCart: ({ cartLine }) => sendAddToCartFromProductListPageEvent({
+            cartLine,
+            objectId: hit.objectId,
+        }), onClick: () => sendProductClickFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), onFavoriting: () => sendAddToWishListFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function ProductListingProductOverview() {
+    const { hits, isLoading } = useAlgoliaHits();
+    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
+}
+
+export { ProductListingProductOverview };

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

@@ -0,0 +1,6 @@
+import { SearchClient } from 'algoliasearch';
+import { ProductListingPageData } from './product-listing-page-data-types';
+export declare function ProductListing({ data, searchClient, }: {
+    data: ProductListingPageData;
+    searchClient: SearchClient;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-listing-page/product-listing.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AlgoliaFilterPanel } from '../../algolia/algolia-filter-panel.js';
+import { AlgoliaPagination } from '../../algolia/algolia-pagination.js';
+import { AlgoliaProvider } from '../../algolia/algolia-provider.js';
+import { AlgoliaResultsCount } from '../../algolia/algolia-results-count.js';
+import { offlineSearchClient } from '../../algolia/algolia-searchclient-offline.js';
+import { AlgoliaSortBy } from '../../algolia/algolia-sort-by.js';
+import { useAlgoliaHits } from '../../algolia/use-algolia-hits.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useLanguageCode } from '../../intl/use-language-code.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { Page } from '../page/page.js';
+import { PromoBanners } from '../../promos/promo-banners/promo-banners.js';
+import { scrollToTop } from '../../shared/hooks/use-scroll-to.js';
+import { Sidebar } from '../../sidebar/sidebar.js';
+import { ToggleSidebarButton } from '../../sidebar/toggle-sidebar-button.js';
+import { NoResults } from './no-results/no-results.js';
+import { ProductListingPageCategoryCarousel } from './product-listing-page-category-carousel/product-listing-page-category-carousel.js';
+import { ProductListingProductOverview } from './product-listing-product-overview/product-listing-product-overview.js';
+import styles from './product-listing-page.module.css.js';
+
+function ProductListing({ data, searchClient, }) {
+    const languageCode = useLanguageCode();
+    const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
+    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles['product-listing'], title: [...category].pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoBanners: data.promoBanners?.top }) }) }, data.categoryPages));
+}
+function ProductListingPageContent({ currentCategoryPath, promoBanners, }) {
+    const { hits, isLoading } = useAlgoliaHits();
+    const hasHits = hits.length > 0;
+    const t = useFormattedMessage();
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
+                    display: hasHits ? undefined : 'none',
+                }, children: [promoBanners?.length && (jsx("section", { className: styles.promos, children: jsx(PromoBanners, { promoBannersData: promoBanners }) })), jsx("section", { className: styles.categories, children: jsx(ProductListingPageCategoryCarousel, { currentCategoryPath: currentCategoryPath }) }), jsxs("section", { className: styles['action-bar'], children: [jsx("div", { className: styles['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                                                    setTimeout(() => {
+                                                        scrollToTop();
+                                                    }, 100);
+                                                } }) })] })] }) })] })] }));
+}
+
+export { ProductListing };

package/dist/pages/search-result-page/search-result-product-overview/search-result-product-overview.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAlgoliaHits } from '../../../algolia/use-algolia-hits.js';
+import { useAlgoliaInsights } from '../../../algolia/use-algolia-insights.js';
+import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
+import { ProductOverviewGrid } from '../../../lists/product-overview-grid/product-overview-grid.js';
+import { PromoCard } from '../../../promos/promo-card/promo-card.js';
+import { isProductHit } from '../../../shared/model/hit.js';
+
+function ProductHitCard({ hit }) {
+    const { sendAddToCartFromSearchResultPageEvent, sendAddToWishListFromSearchResultPageEvent, sendProductClickFromSearchResultPageEvent, } = useAlgoliaInsights();
+    return (jsx(ConnectedProductCard, { href: hit.storefrontSlug, id: hit.storefrontId, image: {
+            fit: 'contain',
+            image: hit.image,
+            title: hit.name,
+        }, onAddToCart: ({ cartLine }) => sendAddToCartFromSearchResultPageEvent({
+            cartLine,
+            objectId: hit.objectId,
+        }), onClick: () => {
+            sendProductClickFromSearchResultPageEvent({
+                objectId: hit.objectId,
+                position: hit.position,
+            });
+        }, onFavoriting: () => sendAddToWishListFromSearchResultPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function SearchResultProductOverview() {
+    const { hits, isLoading } = useAlgoliaHits();
+    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
+}
+
+export { SearchResultProductOverview };

package/dist/pages/search-result-page/search-results-page-category-carousel/search-results-page-category-carousel.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRefinementList } from 'react-instantsearch';
+import { CategoryCard } from '../../../cards/category-card/category-card.js';
+import { CategoryCarousel } from '../../../carousel/category-carousel/category-carousel.js';
+import { transformAlgoliaCategoryData } from '../../../shared/model/category.js';
+
+function SearchResultsPageCategoryCarousel() {
+    const { items } = useRefinementList({
+        attribute: `hierarchicalStorefrontCategories.lvl1`,
+        limit: 100,
+    });
+    const categories = transformAlgoliaCategoryData(items);
+    if (categories.length === 0)
+        return null;
+    return (jsx(CategoryCarousel, { categoryCards: categories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
+                image: category.image,
+                title: category.name,
+            }, title: category.name }, index))) }));
+}
+
+export { SearchResultsPageCategoryCarousel };

package/dist/pages/search-result-page/search-results-page.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import qs from 'query-string';
+import { AlgoliaFilterPanel } from '../../algolia/algolia-filter-panel.js';
+import { AlgoliaPagination } from '../../algolia/algolia-pagination.js';
+import { AlgoliaProvider } from '../../algolia/algolia-provider.js';
+import { AlgoliaResultsCount } from '../../algolia/algolia-results-count.js';
+import { AlgoliaSortBy } from '../../algolia/algolia-sort-by.js';
+import { useAlgoliaHits } from '../../algolia/use-algolia-hits.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useLanguageCode } from '../../intl/use-language-code.js';
+import { scrollToTop } from '../../shared/hooks/use-scroll-to.js';
+import { Sidebar } from '../../sidebar/sidebar.js';
+import { ToggleSidebarButton } from '../../sidebar/toggle-sidebar-button.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { Page } from '../page/page.js';
+import { NoResults } from '../product-listing-page/no-results/no-results.js';
+import { SearchResultProductOverview } from './search-result-product-overview/search-result-product-overview.js';
+import { SearchResultsPageCategoryCarousel } from './search-results-page-category-carousel/search-results-page-category-carousel.js';
+import styles from './search-results-page.module.css.js';
+
+function SearchResultsPage({ location, searchClient, }) {
+    const languageCode = useLanguageCode();
+    const t = useFormattedMessage();
+    const keywords = qs.parse(location.search).keyword;
+    const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
+    if (!keyword)
+        return jsx("h1", { children: "No search results...." });
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles['search-results'], title: t("'{0}' in all products", {
+                replacementValues: { 0: keyword },
+            }), children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
+}
+function SearchResultsPageContent({ keyword }) {
+    const { hits, isLoading } = useAlgoliaHits();
+    const hasHits = hits.length > 0;
+    const t = useFormattedMessage();
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
+                    replacementValues: { 0: keyword },
+                }) })), jsxs("div", { style: {
+                    display: hasHits ? undefined : 'none',
+                }, children: [jsx("section", { className: styles.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("section", { className: styles['action-bar'], children: [jsx("div", { className: styles['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                                                    setTimeout(() => {
+                                                        scrollToTop();
+                                                    }, 100);
+                                                } }) })] })] }) })] })] }));
+}
+
+export { SearchResultsPage };

package/dist/pages/search-result-page/search-results-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
+
+export { styles as default };

package/dist/promos/promo-banner/promo-banner.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Image } from '../../media/image/image.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './promo-banner.module.css.js';
+
+function PromoBanner({ href, image, variant }) {
+    return (jsx(RouteLink, { className: clsx(styles['promo-banner'], styles[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
+}
+
+export { PromoBanner };