@sonic-equipment/ui 132.0.0 → 133.0.0

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

@@ -6,53 +6,36 @@ import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
 import { Select } from '../../../forms/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { useAwaitableMutation } from '../../../shared/api/shared/hooks/use-awaitable-mutation.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { usePatchSession } from '../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { useFetchCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
 import { useFetchCountries } from '../../../shared/api/storefront/hooks/website/use-fetch-countries.js';
-import { patchCart } from '../../../shared/api/storefront/services/cart-service.js';
-import { patchBillToAddress } from '../../../shared/api/storefront/services/customer-service.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 { CHECKOUT_PATHS } from '../constants.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { EDIT_ADDRESS_FORM_ID, EditAddresses } from './components/edit-address.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
+import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import styles from './shipping-page.module.css.js';
 
-const REVIEW_AND_SUBMIT_PATH = '/CheckoutReviewAndSubmit';
-function usePatchCartAndBillingAddress() {
-    return useAwaitableMutation({
-        mutationFn: async ({ billTo, cart, notes, }) => {
-            await Promise.all([
-                billTo && patchBillToAddress({ billTo }),
-                patchCart({ cart: { ...cart, notes } }),
-            ].filter(Boolean));
-        },
-        onSuccess: ({ queryClient }) => {
-            queryClient.removeQueries({ queryKey: ['customer'] });
-            queryClient.removeQueries({ queryKey: ['carts'] });
-            queryClient.removeQueries({ queryKey: ['session'] });
-        },
-    });
-}
 function ShippingPage() {
     const isAuthenticated = useIsAuthenticated();
-    const { data: cart, error, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
+    const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
     const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
         enabled: hasNo(cart?.billTo?.address1),
     });
     const { data: session } = useFetchSession();
     const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
-    const { isError, isLoading: isPatching, isSuccess, mutate: patchCartAndBillingAddress, } = usePatchCartAndBillingAddress();
+    const { error: errorPatchBillingAddress, isError, isLoading: isPatching, isSuccess, mutate: patchShippingDetails, } = usePatchShippingDetails();
     const isLoading = isLoadingCart || isLoadingCountries || isLoadingFulfillmentMethods;
     const t = useFormattedMessage();
     const { isNavigating, navigate } = useNavigate();
@@ -72,13 +55,13 @@ function ShippingPage() {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate('/cart');
+            return navigate(CHECKOUT_PATHS.CART);
         if (hasNo(cart.billTo))
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
     }, [cart, navigate, isAuthenticated, isNavigating]);
     useEffect(() => {
         /* Guards for when the bill to address is saved and we should navigate to the next page */
@@ -92,10 +75,10 @@ function ShippingPage() {
             return location?.reload();
         if (hasNo(cart?.billTo?.address1))
             return;
-        return navigate(REVIEW_AND_SUBMIT_PATH);
+        return navigate(CHECKOUT_PATHS.REVIEW_AND_SUBMIT);
     }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
-    if (error)
-        return jsx(ErrorPage, { error: error });
+    if (errorFetchCart)
+        return jsx(ErrorPage, { error: errorFetchCart });
     if (isLoading || isNavigating || isError || isSuccess)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
@@ -106,33 +89,36 @@ function ShippingPage() {
         (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: {
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: CHECKOUT_PATHS.CHECKOUT_SHIPPING,
+                label: t('Shipping details'),
+            },
+        ], title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
                     ? cart.fulfillmentMethod
-                    : undefined, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate }), children: jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: async (value) => {
-                                        await patchSession({
-                                            session: {
-                                                ...session,
-                                                fulfillmentMethod: value,
-                                            },
-                                        });
-                                        await refetchCart();
-                                    }, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ notes }) => {
-                            if (!cart.billTo)
-                                return;
-                            await patchCartAndBillingAddress({ cart, notes });
-                        }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
-                            if (!cart.billTo)
-                                return;
-                            await patchCartAndBillingAddress({
-                                billTo: { ...cart.billTo, ...address },
-                                cart,
-                                notes,
-                            });
-                        } }))] }) }) }));
+                    : undefined, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: async (value) => {
+                                            await patchSession({
+                                                session: {
+                                                    ...session,
+                                                    fulfillmentMethod: value,
+                                                },
+                                            });
+                                            await refetchCart();
+                                        }, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ notes }) => {
+                                if (!cart.billTo)
+                                    return;
+                                await patchShippingDetails({ cart, notes });
+                            }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+                                if (!cart.billTo)
+                                    return;
+                                await patchShippingDetails({
+                                    billTo: { ...cart.billTo, ...address },
+                                    cart,
+                                    notes,
+                                });
+                            } }))] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
 }
 
 export { ShippingPage };

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

@@ -1,3 +1,3 @@
-var styles = {"fulfillment-select-wrapper":"shipping-page-module-v6oci"};
+var styles = {"fulfillment-select-wrapper":"shipping-page-module-v6oci","error-message":"shipping-page-module-FK0yX"};
 
 export { styles as default };

package/dist/pages/components/page/page.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { BreadcrumbLink } from '../../../breadcrumbs/breadcrumb';
-export interface PageProps {
+import { PageMetaDataProps } from '../page-meta-data/page-meta-data';
+export interface PageProps extends PageMetaDataProps {
     breadCrumb: BreadcrumbLink[];
     children: ReactNode;
     className?: string;
     title?: string;
 }
-export declare function Page({ breadCrumb, children, className, title }: PageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,13 +4,14 @@ import clsx from 'clsx';
 import { Breadcrumb } from '../../../breadcrumbs/breadcrumb.js';
 import { Heading } from '../../../typography/heading/heading.js';
 import { PageContainer } from '../page-container/page-container.js';
+import { PageMetaData } from '../page-meta-data/page-meta-data.js';
 import styles from './page.module.css.js';
 
 function PageTitle({ 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] }));
+function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }) {
+    return (jsxs(PageContainer, { className: clsx(styles.page, className), children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx("div", { className: styles.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
 }
 
 export { Page };

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

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

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

@@ -21,8 +21,8 @@ function removeElements(selector) {
 function PageMetaData(props) {
     if (typeof document === 'undefined')
         return null;
-    if (props.title) {
-        document.title = props.title;
+    if (props.windowTitle) {
+        document.title = props.windowTitle;
     }
     if (props.canonicalUrl) {
         addOrUpdateElement('link[rel="canonical"]', {

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

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 { 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';
@@ -17,14 +16,7 @@ function ProductDetailsPage({ pageUrl }) {
         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 })] }));
+    return jsx(ProductDetails, { data: data });
 }
 
 export { ProductDetailsPage };

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

@@ -13,20 +13,26 @@ import { ProductDetailsPanel } from './components/product-details-panel/product-
 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;
+    const { breadCrumb, included, page, product, recentlyViewed, usps } = data;
     useDataLayer({
         event: {
             event: 'view_item',
         },
         product,
     });
-    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: {
+    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadCrumb: breadCrumb, canonicalUrl: page.canonicalPath, 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 }), recentlyViewed: recentlyViewedComponent ||
-                (recentlyViewed !== undefined && recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
+                (recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
 }
 
 export { ProductDetails };

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

@@ -18,7 +18,7 @@ export interface ProductListingPageData {
     category: CategoryType | undefined;
     categoryPages: string;
     hierarchicalCategories: string[];
-    page?: PageModel;
+    page: PageModel;
     promoBanners?: {
         top: PromoBannerType[] | undefined;
     };

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

@@ -1,10 +1,9 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 { 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';
@@ -24,14 +23,7 @@ function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
         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 })] }));
+    return jsx(ProductListing, { data: data, searchClient: searchClient });
 }
 
 export { ProductListingPage };

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

@@ -24,7 +24,14 @@ 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));
+    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'], 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();

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

@@ -14,7 +14,6 @@ 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 { PageMetaData } from '../../components/page-meta-data/page-meta-data.js';
 import { LoadingPage } from '../../loading-page/loading-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';
@@ -28,13 +27,11 @@ function SearchResultsPage({ location, searchClient, }) {
     const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
     if (!keyword)
         return jsx("h1", { children: "No search results...." });
-    return (jsxs(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: [jsx(PageMetaData
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], 
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-            , { 
-                // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-                canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, title: t('Search') }), jsx(Page, { breadCrumb: [], className: styles['search-results'], title: t("'{0}' in all products", {
-                    replacementValues: { 0: keyword },
-                }), children: jsx(SearchResultsPageContent, { keyword: keyword }) })] }));
+            canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, className: styles['search-results'], title: t("'{0}' in all products", {
+                replacementValues: { 0: keyword },
+            }), windowTitle: `${t('Search')} - ${t('Sonic Equipment')}`, children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
 }
 function SearchResultsPageContent({ keyword }) {
     const { hits, isLoading } = useAlgoliaHits();

package/dist/shared/api/bff/model/bff.model.d.ts

@@ -142,10 +142,10 @@ export interface Usp {
 }
 export interface ProductDetailsPageDataResponse {
     breadCrumb: BreadCrumb[];
-    included?: ProductSummary[];
-    page?: PageModel;
+    included: ProductSummary[];
+    page: PageModel;
     product: ProductDetails;
-    recentlyViewed?: ProductSummary[];
+    recentlyViewed: ProductSummary[];
     usps?: Usp[];
 }
 export interface ProductListingPageDataResponse {
@@ -156,7 +156,7 @@ export interface ProductListingPageDataResponse {
     categories: Category | null;
     categoryPages: string;
     hierarchicalCategories: string[];
-    page?: PageModel;
+    page: PageModel;
     promoBanners: PromoBanners | null;
 }
 export {};

package/dist/shared/api/bff/services/bff-service.js

@@ -40,7 +40,7 @@ async function fetchProductListingPageData({ cultureCode, pageUrl, }) {
         url: `${config.BFF_API_URL}/plp/?pageUrl=${pageUrl}`,
     });
     return {
-        breadCrumb: body.breadCrumb,
+        ...body,
         category: body.categories
             ? {
                 href: body.categories.path,
@@ -53,9 +53,6 @@ async function fetchProductListingPageData({ cultureCode, pageUrl, }) {
                 title: body.categories.shortDescription,
             }
             : undefined,
-        categoryPages: body.categoryPages,
-        hierarchicalCategories: body.hierarchicalCategories,
-        page: body.page,
         promoBanners: body.promoBanners
             ? {
                 top: body.promoBanners.top || undefined,

package/dist/shared/api/storefront/hooks/cart/use-fetch-cart-by-id.d.ts

@@ -0,0 +1,8 @@
+import { CartModel } from '../../model/storefront.model';
+export interface UseFetchCartByIdArgs<T> {
+    enabled?: boolean;
+    forceRecalculation?: boolean;
+    id: string;
+    select?: (data: CartModel) => T;
+}
+export declare function useFetchCartById<T = CartModel>({ enabled, forceRecalculation, id, select, }: UseFetchCartByIdArgs<T>): import("@tanstack/react-query").UseQueryResult<T, Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-cart-by-id.js

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { TIME } from '../../../../utils/time.js';
+import { fetchCart } from '../../services/cart-service.js';
+
+function useFetchCartById({ enabled = true, forceRecalculation = true, id, select, }) {
+    return useQuery({
+        enabled,
+        gcTime: 15 * TIME.MINUTE,
+        placeholderData: prev => prev,
+        queryFn: () => {
+            return fetchCart({ forceRecalculation, id });
+        },
+        queryKey: ['carts', id],
+        retry: 3,
+        select: select || (cartModel => cartModel),
+        staleTime: 15 * TIME.MINUTE,
+    });
+}
+
+export { useFetchCartById };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-count.d.ts

@@ -1 +1 @@
-export declare function useFetchCurrentCartCount(): number | undefined;
+export declare function useFetchCurrentCartCount(): number;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js

@@ -1,8 +1,8 @@
-import { useFetchCurrentCartLines } from './use-fetch-current-cart-lines.js';
+import { useFetchCurrentCart } from './use-fetch-current-cart.js';
 
 function useFetchCurrentCartCount() {
-    const { data } = useFetchCurrentCartLines();
-    return data?.reduce((acc, cartLine) => acc + (cartLine.qtyOrdered || 0), 0);
+    const { data } = useFetchCurrentCart();
+    return data?.totalCountDisplay || 0;
 }
 
 export { useFetchCurrentCartCount };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart.d.ts

@@ -1,6 +1,3 @@
 import { CartModel } from '../../model/storefront.model';
-export declare function useFetchCurrentCart<T = CartModel>({ enabled, forceRecalculation, select, }?: {
-    enabled?: boolean;
-    forceRecalculation?: boolean;
-    select?: (data: CartModel) => T;
-}): import("@tanstack/react-query").UseQueryResult<T, Error>;
+import { UseFetchCartByIdArgs } from './use-fetch-cart-by-id';
+export declare function useFetchCurrentCart<T = CartModel>(args?: Omit<UseFetchCartByIdArgs<T>, 'id'>): import("@tanstack/react-query").UseQueryResult<T, Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart.js

@@ -1,20 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
-import { TIME } from '../../../../utils/time.js';
-import { fetchCurrentCart } from '../../services/cart-service.js';
+import { useFetchCartById } from './use-fetch-cart-by-id.js';
 
-function useFetchCurrentCart({ enabled = true, forceRecalculation = true, select, } = {}) {
-    return useQuery({
-        enabled,
-        gcTime: 15 * TIME.MINUTE,
-        placeholderData: prev => prev,
-        queryFn: () => {
-            return fetchCurrentCart({ forceRecalculation });
-        },
-        queryKey: ['carts', 'current'],
-        retry: 3,
-        select: select || (cartModel => cartModel),
-        staleTime: 15 * TIME.MINUTE,
-    });
+function useFetchCurrentCart(args) {
+    return useFetchCartById({ ...args, id: 'current' });
 }
 
 export { useFetchCurrentCart };

package/dist/shared/api/storefront/hooks/cart/use-patch-cart.js

@@ -1,17 +1,20 @@
+import { useCallback } from 'react';
 import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
 import { patchCart } from '../../services/cart-service.js';
 
 function usePatchCart({ skipInvalidation = false, } = {}) {
+    const onError = useCallback(({ args: [{ cart }], queryClient }) => {
+        queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
+    }, []);
+    const onSuccess = useCallback(({ args: [{ cart }], queryClient }) => {
+        if (skipInvalidation)
+            return;
+        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
+    }, [skipInvalidation]);
     return useAwaitableMutation({
         mutationFn: patchCart,
-        onError: ({ args: [{ cart }], queryClient }) => {
-            queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
-        },
-        onSuccess: ({ args: [{ cart }], data: updatedCart, queryClient }) => {
-            if (skipInvalidation)
-                return;
-            queryClient.setQueriesData({ exact: true, queryKey: ['carts', updatedCart.id] }, { ...updatedCart, cartLines: cart.cartLines });
-        },
+        onError,
+        onSuccess,
     });
 }
 

package/dist/shared/api/storefront/hooks/cart/use-place-order.js

@@ -4,10 +4,10 @@ import { placeOrder } from '../../services/cart-service.js';
 
 const usePlaceOrder = () => {
     const onComplete = useCallback(({ args: [{ cart }], queryClient }) => {
-        queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
+        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
     }, []);
     const onSuccess = useCallback(({ data: updatedCart, queryClient }) => {
-        queryClient.setQueryData(['carts', updatedCart.id], updatedCart);
+        queryClient.removeQueries({ queryKey: ['carts', updatedCart.id] });
     }, []);
     return useAwaitableMutation({
         mutationFn: placeOrder,

package/dist/shared/model/address.d.ts

@@ -1,2 +1,15 @@
 export declare const validatePhone: (value: string) => boolean;
 export declare const validateEmail: (value: string) => boolean;
+export interface AddressType {
+    address1?: string;
+    address2?: string;
+    address3?: string;
+    city?: string;
+    companyName?: string;
+    country?: string;
+    email?: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    postalCode?: string;
+}

package/dist/shared/providers/react-query-container.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
-export declare function ReactQueryContainer({ children }: {
+export declare function ReactQueryContainer({ children, enableDevTools, }: {
     children: ReactNode;
+    enableDevTools?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/shared/providers/react-query-container.js

@@ -15,8 +15,8 @@ const queryClient = new QueryClient({
         },
     },
 });
-function ReactQueryContainer({ children }) {
-    return (jsxs(QueryClientProvider, { client: queryClient, children: [environment !== 'production' && (jsx(ReactQueryDevtools, { initialIsOpen: false })), children] }));
+function ReactQueryContainer({ children, enableDevTools = environment !== 'production', }) {
+    return (jsxs(QueryClientProvider, { client: queryClient, children: [enableDevTools && jsx(ReactQueryDevtools, { initialIsOpen: false }), children] }));
 }
 
 export { ReactQueryContainer };

package/dist/shared/utils/date.d.ts

@@ -1,3 +1,4 @@
+import { CultureCode } from '../../intl/types';
 export type DateUnit = 'day' | 'week' | 'month';
 export type DateUnitObject = {
     number: number;
@@ -9,3 +10,4 @@ export type DateThreshold = {
 };
 export declare function getDateUnitObject(date: Date): DateUnitObject;
 export declare function convertDateUnitToPluralOrSingle(unit: DateUnit, number: number): 'day' | 'days' | 'week' | 'weeks' | 'month' | 'months';
+export declare function formatDateToLocaleString(date?: Date, cultureCode?: CultureCode): string;

package/dist/shared/utils/date.js

@@ -54,5 +54,15 @@ function convertDateUnitToPluralOrSingle(unit, number) {
             return 'months';
     }
 }
+function formatDateToLocaleString(date, cultureCode) {
+    if (!date || !cultureCode)
+        return '';
+    return date.toLocaleDateString(cultureCode, {
+        day: 'numeric',
+        month: 'long',
+        weekday: 'long',
+        year: 'numeric',
+    });
+}
 
-export { convertDateUnitToPluralOrSingle, getDateUnitObject };
+export { convertDateUnitToPluralOrSingle, formatDateToLocaleString, getDateUnitObject };