@sonic-equipment/ui 0.0.119 → 1.1.0

package/dist/pages/my-sonic/widgets/connected-user-account-widget.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { DataCard } from '../../../cards/data-card/data-card.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { ConnectedChangePasswordDialog } from '../actions/change-password/connected-change-password-dialog.js';
+import { ConnectedEditUserInfoDialog } from '../actions/edit-user-info/connected-edit-user-info-dialog.js';
+
+function ConnectedUserAccountWidget() {
+    const [isOpenEditUserInfoDialog, setIsOpenEditUserInfoDialog] = useState(false);
+    const [isOpenChangePasswordDialog, setIsOpenChangePasswordDialog] = useState(false);
+    const { data: session, error, isLoading } = useFetchSession();
+    const data = session
+        ? [
+            { key: 'email', label: 'Email', value: session.email },
+            {
+                key: 'name',
+                label: 'Name',
+                value: [session.firstName, session.lastName].filter(Boolean).join(' ') ||
+                    null,
+            },
+            { key: 'phone', label: 'Phone', value: session.billTo?.phone },
+            {
+                key: 'company-name',
+                label: 'Company name',
+                value: session.billTo?.companyName,
+            },
+        ]
+        : [];
+    function onEditUserInfo() {
+        setIsOpenEditUserInfoDialog(true);
+    }
+    function onChangePassword() {
+        setIsOpenChangePasswordDialog(true);
+    }
+    return (jsxs(Fragment, { children: [jsx(DataCard, { actions: [
+                    jsx(Button, { color: "secondary", onClick: onEditUserInfo, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Edit" }) }, "edit"),
+                    jsx(Button, { color: "secondary", onClick: onChangePassword, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Change password" }) }, "change-pasword"),
+                ], data: data, "data-test-selector": "user-account-widget", isLoading: isLoading, showError: error, title: "Sonic account" }), isOpenEditUserInfoDialog && (jsx(ConnectedEditUserInfoDialog, { isOpen: isOpenEditUserInfoDialog, onClose: () => setIsOpenEditUserInfoDialog(false) })), isOpenChangePasswordDialog && (jsx(ConnectedChangePasswordDialog, { isOpen: isOpenChangePasswordDialog, onClose: () => setIsOpenChangePasswordDialog(false) }))] }));
+}
+
+export { ConnectedUserAccountWidget };

package/dist/pages/product/components/product-overview.d.ts

@@ -0,0 +1,10 @@
+import { ProductHit } from '../../../shared/model/hit';
+import { NavigateOptions } from '../../../shared/routing/types';
+interface ProductOverviewProps {
+    ProductHitCard: React.ComponentType<{
+        hit: ProductHit;
+        route?: NavigateOptions;
+    }>;
+}
+export declare function ProductOverview({ ProductHitCard }: ProductOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/product/components/product-overview.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePagination } from 'react-instantsearch';
+import { MAX_QUERY_RESULTS } from '../../../algolia/constants/index.js';
+import { useAlgoliaHits } from '../../../algolia/use-algolia-hits.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { ProductOverviewGrid } from '../../../lists/product-overview-grid/product-overview-grid.js';
+import { Message } from '../../../message/message.js';
+import { PromoCard } from '../../../promos/promo-card/promo-card.js';
+import { isProductHit } from '../../../shared/model/hit.js';
+
+function ProductOverview({ ProductHitCard }) {
+    const { hits, isLoading } = useAlgoliaHits();
+    const { currentRefinement, nbHits, nbPages } = usePagination();
+    const currentPage = currentRefinement + 1;
+    const isLastPage = currentPage === nbPages;
+    return (jsxs(Fragment, { children: [isLastPage && nbHits > MAX_QUERY_RESULTS && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!" }) })), jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit, route: { prefetch: true } }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) })] }));
+}
+
+export { ProductOverview };

package/dist/pages/{layouts → product/layouts}/product-details-page-layout/product-details-page-layout.d.ts

@@ -2,8 +2,8 @@ interface ProductDetailsPageLayoutProps {
     imageGallery?: React.ReactNode;
     included?: React.ReactNode;
     productInformation?: React.ReactNode;
-    recentlyViewed?: React.ReactNode;
+    recentlyViewedSection?: React.ReactNode;
     usp?: React.ReactNode;
 }
-export declare function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }: ProductDetailsPageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewedSection, usp, }: ProductDetailsPageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IntersectionObserverComponent } from '../../../../observers/intersection-observer.js';
+import styles from './product-details-page-layout.module.css.js';
+
+function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewedSection, 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'], "data-test-selector": "productInformation", children: productInformation })] }), usp && (jsx("section", { className: styles.usp, "data-test-selector": "usp", children: usp })), included && (jsx("section", { className: styles.included, "data-test-selector": "included", children: included })), jsx(IntersectionObserverComponent, { isPlaceholder: true, intersectionObserverInit: { rootMargin: '400px' }, children: recentlyViewedSection })] }));
+}
+
+export { ProductDetailsPageLayout };

package/dist/pages/product/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-pPtZX","top":"product-details-page-layout-module-KCKLZ","image-gallery":"product-details-page-layout-module-0uf92","product-information":"product-details-page-layout-module-3-19O","included":"product-details-page-layout-module-lfAgH","usp":"product-details-page-layout-module-e8ZNQ"};
+
+export { styles as default };

package/dist/pages/{product-details-page → product/product-details-page}/components/product-details-images/product-detail-images.d.ts

@@ -1,4 +1,4 @@
-import { ImageType } from '../../../../shared/model/image';
+import { ImageType } from '../../../../../shared/model/image';
 interface ProductDetailImagesProps {
     images: ImageType[];
 }

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

@@ -0,0 +1,33 @@
+"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 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();
+    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: [jsx(ImagesGrid, { className: styles['images-grid'], images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), isOpenModal && (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, { className: styles['image-lightbox'], images: images, onZoom: onZoom }), isOpenZoom && (jsx(ZoomImage, { currentImage: images[selectedZoomImageIndex], isZoomed: isOpenZoom, onClose: closeZoom, scrollFromTopPercentage: scrollPercentage }))] }));
+}
+
+export { ProductDetailImages };

package/dist/pages/product/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-ERzjA","images-grid":"product-detail-images-module-cdIHn","image-lightbox":"product-detail-images-module-0udrk"};
+
+export { styles as default };

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

@@ -0,0 +1,5 @@
+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/product-details-page/components/product-details-panel/product-details-panel.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAlgoliaInsights } from '../../../../../algolia/use-algolia-insights.js';
+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 { Price } from '../../../../../display/price/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, }) {
+    const { sendAddToCartFromProductDetailsPageEvent, sendAddToWishListFromProductDetailsPageEvent, } = useAlgoliaInsights();
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", tag: "h1", children: product.productTitle }), jsx(ProductSku, { className: styles.sku, sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(Price, { className: styles.price, currencyCode: product.currencyCode, "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price, variant: "sonic" })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
+                                    sendAddToCartFromProductDetailsPageEvent({
+                                        cartLine,
+                                    });
+                                }, productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { onFavoriting: () => {
+                                    sendAddToWishListFromProductDetailsPageEvent({
+                                        objectId: product.productNumber,
+                                    });
+                                }, 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, 
+                            // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+                            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(({ filePath, id, name }) => ({
+                                    href: `/${filePath.startsWith('/') ? filePath.slice(1) : filePath}`,
+                                    id,
+                                    name,
+                                }))
+                                    .sort((a, b) => a.name.localeCompare(b.name)) }) }))] }) })] }));
+}
+
+export { ProductDetailsPanel };

package/dist/pages/product/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-MXfPm","heading":"product-details-panel-module-rtZYR","sku":"product-details-panel-module-IbS9-","price-action-container":"product-details-panel-module-wHZCr","price":"product-details-panel-module-dI2JL","action-container":"product-details-panel-module-QLafW","description":"product-details-panel-module-9L-Nm","feature-list":"product-details-panel-module-NC2nx"};
+
+export { styles as default };

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

@@ -0,0 +1 @@
+export declare function ProductDetailsRecentlyViewedSection(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs, 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 { useCultureCode } from '../../../../../intl/use-culture-code.js';
+import { useFetchRecentlyViewedProducts } from '../../../../../shared/api/bff/hooks/use-fetch-recently-viewed-products.js';
+import { Heading } from '../../../../../typography/heading/heading.js';
+import styles from './product-details-recently-viewed-section.module.css.js';
+
+function ProductDetailsRecentlyViewedSection() {
+    const cultureCode = useCultureCode();
+    const { data: products, isLoading } = useFetchRecentlyViewedProducts({
+        cultureCode,
+    });
+    if (isLoading || !products || products.length === 0)
+        return null;
+    return (jsxs("section", { className: styles['recently-viewed'], "data-test-selector": "recentlyViewed", children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(CardCarousel, { hasOverflow: true, cards: products.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.productId))) })] }));
+}
+
+export { ProductDetailsRecentlyViewedSection };

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

@@ -0,0 +1,3 @@
+var styles = {"recently-viewed":"product-details-recently-viewed-section-module-cGFgH"};
+
+export { styles as default };

package/dist/pages/product/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/product-details-page/product-details.d.ts

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

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

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+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 { useMarkProductAsRecentlyViewed } from '../../../shared/api/storefront/hooks/product/use-mark-product-as-viewed.js';
+import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
+import { Heading } from '../../../typography/heading/heading.js';
+import { Page } from '../../components/page/page.js';
+import { ProductDetailsPageLayout } from '../layouts/product-details-page-layout/product-details-page-layout.js';
+import { ProductDetailImages } from './components/product-details-images/product-detail-images.js';
+import { ProductDetailsPanel } from './components/product-details-panel/product-details-panel.js';
+import { ProductDetailsRecentlyViewedSection } from './components/product-details-recently-viewed-section/product-details-recently-viewed-section.js';
+
+function ProductDetails({ data, priceComponent, }) {
+    const { breadCrumb, included, page, product, usps } = data;
+    const { mutate } = useMarkProductAsRecentlyViewed();
+    const isProductMarktedAsViewed = useRef(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || isProductMarktedAsViewed.current)
+            return;
+        isProductMarktedAsViewed.current = true;
+        mutate({ productId: product.id });
+    }, [mutate, product.id]);
+    useDataLayer({
+        event: {
+            event: 'view_item',
+        },
+        product,
+    });
+    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadcrumb: breadCrumb, canonicalUrl: page.canonicalPath, "data-test-selector": "productDetailsPage", meta: {
+            description: page.metaDescription,
+            keywords: page.metaKeywords,
+        }, openGraph: {
+            image: page.openGraphImage,
+            title: page.openGraphTitle,
+            url: page.openGraphUrl,
+        }, windowTitle: page.title, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: 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 }), recentlyViewedSection: jsx(ProductDetailsRecentlyViewedSection, {}), usp: usps && usps.length > 0 && jsx(ProductUSPCarousel, { usps: usps }) }) }));
+}
+
+export { ProductDetails };

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

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

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

@@ -0,0 +1,3 @@
+var styles = {"no-results":"no-results-module-HGe-Y","title":"no-results-module-zlHBh","body":"no-results-module-t2hI7","buttons":"no-results-module-nl-AB"};
+
+export { styles as default };

package/dist/pages/product/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,
+            }, route: { prefetch: true }, title: category.name }, category.href || index))) }));
+}
+
+export { ProductListingPageCategoryCarousel };

package/dist/pages/{product-listing-page → product/product-listing-page}/product-listing-page-data-types.d.ts

@@ -1,4 +1,5 @@
-import { ImageType, ResponsiveImageType } from '../../shared/model/image';
+import { PageModel } from '../../../shared/api/bff/model/bff.model';
+import { ImageType, ResponsiveImageType } from '../../../shared/model/image';
 export interface PromoBannerType {
     href: string;
     image: ResponsiveImageType;
@@ -17,6 +18,7 @@ export interface ProductListingPageData {
     category: CategoryType | undefined;
     categoryPages: string;
     hierarchicalCategories: string[];
+    page: PageModel;
     promoBanners?: {
         top: PromoBannerType[] | undefined;
     };

package/dist/pages/{product-listing-page → product/product-listing-page}/product-listing-page-provider/product-listing-page-context.d.ts

@@ -5,4 +5,4 @@ export interface ProductListingPageContextType {
     isError?: boolean;
     isLoading?: boolean;
 }
-export declare const ProductListingPageContext: React.Context<ProductListingPageContextType>;
+export declare const ProductListingPageContext: import("react").Context<ProductListingPageContextType>;

package/dist/pages/product/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/product-listing-page/product-listing-page-provider/product-listing-page-provider.js

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

package/dist/pages/product/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/product-listing-page/product-listing-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-listing":"product-listing-page-module-U0zLZ","promos":"product-listing-page-module-VvYG3","action-bar":"product-listing-page-module-jGACo","sidebar-toggle":"product-listing-page-module-qhR-J","sort":"product-listing-page-module-3LRKg","count":"product-listing-page-module-3Jtw-","categories":"product-listing-page-module-UwMEE","product-grid-container":"product-listing-page-module-cUe4a","product-grid":"product-listing-page-module-dtbXB","pagination":"product-listing-page-module-zKOQv","sidebar":"product-listing-page-module-bIfdi"};
+
+export { styles as default };

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
+import { ConnectedProductCard } from '../../../../cards/product-card/connected-product-card.js';
+import { ProductOverview } from '../../components/product-overview.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,
+        }), onClick: () => sendProductClickFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), onFavoriting: () => sendAddToWishListFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            currencyCode: hit.currencyCode,
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, route: { prefetch: true }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function ProductListingProductOverview() {
+    return jsx(ProductOverview, { ProductHitCard: ProductHitCard });
+}
+
+export { ProductListingProductOverview };

package/dist/pages/product/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/product-listing-page/product-listing.js

@@ -0,0 +1,49 @@
+"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 { PromoBanners } from '../../../promos/promo-banners/promo-banners.js';
+import { scrollToTop } from '../../../shared/utils/scrolling.js';
+import { Sidebar } from '../../../sidebar/sidebar.js';
+import { ToggleSidebarButton } from '../../../sidebar/toggle-sidebar-button.js';
+import { Page } from '../../components/page/page.js';
+import { LoadingPage } from '../../loading-page/loading-page.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, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadcrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], "data-test-selector": "productListingPage", meta: {
+                description: data.page.metaDescription,
+                keywords: data.page.metaKeywords,
+            }, openGraph: {
+                image: data.page.openGraphImage,
+                title: data.page.openGraphTitle,
+                url: data.page.openGraphUrl,
+            }, title: [...category].pop(), windowTitle: data.page.title, 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, { className: styles['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/product/search-result-page/search-result-product-overview/search-result-product-overview.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
+import { ConnectedProductCard } from '../../../../cards/product-card/connected-product-card.js';
+import { ProductOverview } from '../../components/product-overview.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,
+        }), onClick: () => {
+            sendProductClickFromSearchResultPageEvent({
+                objectId: hit.objectId,
+                position: hit.position,
+            });
+        }, onFavoriting: () => sendAddToWishListFromSearchResultPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            currencyCode: hit.currencyCode,
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function SearchResultProductOverview() {
+    return jsx(ProductOverview, { ProductHitCard: ProductHitCard });
+}
+
+export { SearchResultProductOverview };