@sonic-equipment/ui 126.0.0 → 128.0.0

package/dist/pages/checkout/shipping-page/shipping-page.js

@@ -0,0 +1,114 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect, useCallback } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useFetchCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
+import { usePatchCart } from '../../../shared/api/storefront/hooks/cart/use-patch-cart.js';
+import { usePatchBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
+import { useFetchCountries } from '../../../shared/api/storefront/hooks/website/use-fetch-countries.js';
+import { useNavigate } from '../../../shared/routing/route-provider.js';
+import { hasNo } from '../../../shared/utils/types.js';
+import { Page } from '../../components/page/page.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { EDIT_ADDRESS_FORM_ID, EditAddresses } from './components/edit-address.js';
+import { ReadOnlyAddresses } from './components/readonly-address.js';
+
+const REVIEW_AND_SUBMIT_PATH = '/CheckoutReviewAndSubmit';
+function usePatchCartAndBillingAddress() {
+    const { isError: isPatchingBillToAddressError, isLoading: isPatchBillToAddress, isSuccess: isPatchingBillToAddressSuccess, mutate: patchBillToAddress, } = usePatchBillToAddress();
+    const { isError: isPatchCartError, isLoading: isPatchingCart, isSuccess: isPatchCartSuccess, mutate: patchCart, } = usePatchCart();
+    const mutate = useCallback(async ({ billTo, cart, notes, }) => {
+        await Promise.all([
+            billTo &&
+                patchBillToAddress({
+                    billTo,
+                }),
+            patchCart({ cart: { ...cart, notes } }),
+        ].filter(Boolean));
+    }, [patchBillToAddress, patchCart]);
+    return {
+        isError: isPatchingBillToAddressError || isPatchCartError,
+        isPatching: isPatchBillToAddress || isPatchingCart,
+        isSuccess: isPatchingBillToAddressSuccess || isPatchCartSuccess,
+        mutate,
+    };
+}
+function ShippingPage() {
+    const isAuthenticated = useIsAuthenticated();
+    const { data: cart, error, isLoading: isLoadingCart } = useFetchCurrentCart();
+    const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
+        enabled: hasNo(cart?.billTo?.address1),
+    });
+    const { isError, isPatching, isSuccess, mutate: patchCartAndBillingAddress, } = usePatchCartAndBillingAddress();
+    const isLoading = isLoadingCart || isLoadingCountries;
+    const t = useFormattedMessage();
+    const { isNavigating, navigate } = useNavigate();
+    const hasBillToAddress = useMemo(() => {
+        return Boolean(cart?.billTo?.address1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [Boolean(cart)]);
+    useEffect(() => {
+        if (isNavigating)
+            return;
+        if (isAuthenticated === undefined)
+            return;
+        if (!isAuthenticated)
+            return navigate('/signin?returnUrl=/CheckoutShipping');
+        if (hasNo(cart))
+            return;
+        if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
+            return navigate('/cart');
+        if (hasNo(cart.billTo))
+            return navigate('/signin?returnUrl=/CheckoutShipping');
+    }, [cart, navigate, isAuthenticated, isNavigating]);
+    useEffect(() => {
+        if (isPatching)
+            return;
+        if (!isSuccess)
+            return;
+        if (isNavigating)
+            return;
+        if (isError)
+            return location?.reload();
+        navigate(REVIEW_AND_SUBMIT_PATH);
+    }, [isSuccess, navigate, isNavigating, isPatching, isError]);
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (isLoading || isNavigating || isError)
+        return jsx(LoadingPage, {});
+    if (!isAuthenticated ||
+        hasNo(cart) ||
+        hasNo(cart.cartLines) ||
+        cart.cartLines.length === 0 ||
+        hasNo(cart.billTo) ||
+        (hasNo(cart.billTo.address1) && hasNo(countries)))
+        return null;
+    return (jsx(Page, { breadCrumb: [
+            { href: '/', label: t('Home') },
+            { href: '/CheckoutShipping', label: t('Shipping details') },
+        ], title: t('Shipping details'), children: jsx(CheckoutPageLayout, { actions: {
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching && jsx(FormattedMessage, { id: "Updating address" }), type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate }), children: hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, notes: cart.notes, onSubmit: async ({ notes }) => {
+                    if (!cart.billTo)
+                        return;
+                    await patchCartAndBillingAddress({ cart, notes });
+                    navigate(REVIEW_AND_SUBMIT_PATH);
+                }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, onSubmit: async ({ address, notes }) => {
+                    if (!cart.billTo)
+                        return;
+                    await patchCartAndBillingAddress({
+                        billTo: { ...cart.billTo, ...address },
+                        cart,
+                        notes,
+                    });
+                    navigate(REVIEW_AND_SUBMIT_PATH);
+                } })) }) }));
+}
+
+export { ShippingPage };

package/dist/pages/{page → components/page}/page.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BreadcrumbLink } from '../../breadcrumbs/breadcrumb';
+import { BreadcrumbLink } from '../../../breadcrumbs/breadcrumb';
 export interface PageProps {
     breadCrumb: BreadcrumbLink[];
     children: ReactNode;

package/dist/pages/{page → components/page}/page.js

@@ -1,15 +1,13 @@
 "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 { Breadcrumb } from '../../../breadcrumbs/breadcrumb.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 }));
+    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, className: styles.title, size: "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] }));

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

@@ -0,0 +1,3 @@
+var styles = {"page":"page-module-a5vPb","breadcrumb":"page-module-q0jaH","title":"page-module-K7Gmw"};
+
+export { styles as default };

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

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

package/dist/pages/components/page-meta-data/page-meta-data.d.ts

@@ -0,0 +1,16 @@
+interface PageMetaDataProps {
+    alternateLanguageUrls?: Record<string, string> | null;
+    canonicalUrl: string;
+    meta?: {
+        description: string;
+        keywords: string;
+    };
+    openGraph?: {
+        image: string;
+        title: string;
+        url: string;
+    };
+    title: string;
+}
+export declare function PageMetaData(props: PageMetaDataProps): null;
+export {};

package/dist/pages/components/page-meta-data/page-meta-data.js

@@ -0,0 +1,95 @@
+function addOrUpdateElement(selector, { attributes, tag, }) {
+    const existingElement = document?.querySelector(selector);
+    if (existingElement) {
+        Object.entries(attributes).forEach(([key, value]) => {
+            existingElement.setAttribute(key, value);
+        });
+    }
+    else {
+        const newElement = document?.createElement(tag);
+        if (!newElement)
+            return;
+        Object.entries(attributes).forEach(([key, value]) => {
+            newElement.setAttribute(key, value);
+        });
+        document?.head.append(newElement);
+    }
+}
+function removeElements(selector) {
+    document?.querySelectorAll(selector).forEach(element => element.remove());
+}
+function PageMetaData(props) {
+    if (typeof document === 'undefined')
+        return null;
+    if (props.title) {
+        document.title = props.title;
+    }
+    if (props.canonicalUrl) {
+        addOrUpdateElement('link[rel="canonical"]', {
+            attributes: { href: props.canonicalUrl, rel: 'canonical' },
+            tag: 'link',
+        });
+    }
+    else {
+        removeElements('link[rel="canonical"]');
+    }
+    if (props.alternateLanguageUrls) {
+        Object.entries(props.alternateLanguageUrls).forEach(([hreflang, url]) => {
+            addOrUpdateElement(`link[rel="alternate"][hreflang="${hreflang}"]`, {
+                attributes: { href: url, hreflang, rel: 'alternate' },
+                tag: 'link',
+            });
+        });
+    }
+    else {
+        removeElements('link[rel="alternate"]');
+    }
+    if (props.meta?.description) {
+        addOrUpdateElement('meta[name="description"]', {
+            attributes: { content: props.meta.description, name: 'description' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[name="description"]');
+    }
+    if (props.meta?.keywords) {
+        addOrUpdateElement('meta[name="keywords"]', {
+            attributes: { content: props.meta.keywords, name: 'keywords' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[name="keywords"]');
+    }
+    if (props.openGraph?.title) {
+        addOrUpdateElement('meta[property="og:title"]', {
+            attributes: { content: props.openGraph.title, property: 'og:title' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:title"]');
+    }
+    if (props.openGraph?.url) {
+        addOrUpdateElement('meta[property="og:url"]', {
+            attributes: { content: props.openGraph.url, property: 'og:url' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:url"]');
+    }
+    if (props.openGraph?.image) {
+        addOrUpdateElement('meta[property="og:image"]', {
+            attributes: { content: props.openGraph.image, property: 'og:image' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:image"]');
+    }
+    return null;
+}
+
+export { PageMetaData };

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

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { isRequestError } from '../../shared/fetch/request.js';
 import { environment } from '../../shared/utils/environment.js';
 import { Heading } from '../../typography/heading/heading.js';
-import { Page } from '../page/page.js';
+import { Page } from '../components/page/page.js';
 
 function ErrorPage({ error }) {
     useEffect(() => {

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","recently-viewed":"product-details-page-layout-module-Cl9u-","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-details-page → product/product-details-page}/components/product-details-images/product-detail-images.js

@@ -1,12 +1,12 @@
 "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 { 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;

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

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

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

@@ -1,15 +1,15 @@
 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 { 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, }) {

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","price-action-container":"product-details-panel-module-wHZCr","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-details-page → product/product-details-page}/components/product-details-recently-viewed/product-details-recently-viewed.d.ts

@@ -1,4 +1,4 @@
-import { ProductSummary } from '../../../../shared/api/bff/model/bff.model';
+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 → product/product-details-page}/components/product-details-recently-viewed/product-details-recently-viewed.js

@@ -1,8 +1,8 @@
 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';
+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: {

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs, Fragment } 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 { PageMetaData } from '../../components/page-meta-data/page-meta-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 (jsxs(Fragment, { children: [data.page && (jsx(PageMetaData, { alternateLanguageUrls: data.page.alternateLanguageUrls, canonicalUrl: data.page.canonicalPath, meta: {
+                    description: data.page.metaDescription,
+                    keywords: data.page.metaKeywords,
+                }, openGraph: {
+                    image: data.page.openGraphImage,
+                    title: data.page.openGraphTitle,
+                    url: data.page.openGraphUrl,
+                }, title: data.page.title })), jsx(ProductDetails, { data: data })] }));
+}
+
+export { ProductDetailsPage };

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

@@ -1,4 +1,4 @@
-import { ProductDetailsPageDataResponse } from '../../shared/api/bff/model/bff.model';
+import { ProductDetailsPageDataResponse } from '../../../shared/api/bff/model/bff.model';
 export declare function ProductDetails({ data, priceComponent, recentlyViewedComponent, }: {
     data: ProductDetailsPageDataResponse;
     priceComponent?: React.ReactNode;

package/dist/pages/{product-details-page → product/product-details-page}/product-details.js

@@ -1,13 +1,13 @@
 "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 { useDataLayer } from '../../shared/ga/use-data-layer.js';
-import { Heading } from '../../typography/heading/heading.js';
+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 { 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 { 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';

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

@@ -1,9 +1,9 @@
 "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 { 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 }) {

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-listing-page → product/product-listing-page}/product-listing-page-category-carousel/product-listing-page-category-carousel.js

@@ -1,9 +1,9 @@
 "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';
+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({

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs, Fragment } 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 { PageMetaData } from '../../components/page-meta-data/page-meta-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 (jsxs(Fragment, { children: [data.page && (jsx(PageMetaData, { alternateLanguageUrls: data.page.alternateLanguageUrls, canonicalUrl: data.page.canonicalPath, meta: {
+                    description: data.page.metaDescription,
+                    keywords: data.page.metaKeywords,
+                }, openGraph: {
+                    image: data.page.openGraphImage,
+                    title: data.page.openGraphTitle,
+                    url: data.page.openGraphUrl,
+                }, title: data.page.title })), 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","header":"product-listing-page-module-9a0ps","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"};
+
+export { styles as default };

package/dist/pages/{product-listing-page → product/product-listing-page}/product-listing-product-overview/product-listing-product-overview.js

@@ -1,11 +1,11 @@
 "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';
+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();

package/dist/pages/{product-listing-page → product/product-listing-page}/product-listing.js

@@ -1,21 +1,21 @@
 "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 { 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/hooks/use-scroll-to.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';

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

@@ -1,11 +1,11 @@
 "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';
+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();