@sonic-equipment/ui 135.0.0 → 136.0.0

package/dist/algolia/algolia-initialization.js

@@ -2,6 +2,7 @@
 import { config } from '../config.js';
 import Cookies from 'js-cookie';
 import aa from 'search-insights';
+import { logger } from '../logging/logger.js';
 import { request } from '../shared/fetch/request.js';
 import { createUUID } from '../shared/utils/uuid.js';
 
@@ -14,7 +15,7 @@ aa('init', {
 });
 aa('getUserToken', {}, (err, value) => {
     if (err)
-        return console.error(err);
+        return logger.error(err);
     userToken = value === undefined ? generateUserToken() : String(value);
 });
 aa('onUserTokenChange', value => {

package/dist/algolia/algolia-insights-provider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { useCultureCode } from '../intl/use-culture-code.js';
 import { getLanguageCodeFromCultureCode } from '../intl/utils.js';
 import { environment } from '../shared/utils/environment.js';
@@ -13,12 +13,12 @@ function AlgoliaInsightsProvider({ children, value, }) {
     const algoliaIndex = getAlgoliaIndex(environment, getLanguageCodeFromCultureCode(cultureCode));
     const [globalState] = useAlgoliaInsightsGlobalState();
     const context = useContext(AlgoliaInsightsProviderContext);
-    const combinedValue = {
+    const combinedValue = useMemo(() => ({
         index: algoliaIndex.default,
         ...globalState,
         ...context,
         ...value,
-    };
+    }), [algoliaIndex.default, context, globalState, value]);
     return (jsx(AlgoliaInsightsProviderContext.Provider, { value: combinedValue, children: children }));
 }
 

package/dist/algolia/algolia-searchclient-offline.js

@@ -1,11 +1,12 @@
 "use client";
+import { logger } from '../logging/logger.js';
+
 const searchClientLogger = (searchClient) => {
     return {
         ...searchClient,
         search: (async (queries, requestOptions) => {
             const response = await searchClient.search(queries, requestOptions);
-            // eslint-disable-next-line no-console
-            console.log('Algolia::SearchClient::search', {
+            logger.info('Algolia::SearchClient::search', {
                 args: { queries, requestOptions },
                 response,
             });

package/dist/algolia/use-algolia-insights.js

@@ -1,6 +1,7 @@
 "use client";
 import { useContext, useMemo } from 'react';
 import aa from 'search-insights';
+import { logger } from '../logging/logger.js';
 import { currencySymbolToISO } from '../shared/model/currency.js';
 import { ensureArray } from '../shared/utils/array.js';
 import { userToken } from './algolia-initialization.js';
@@ -18,7 +19,7 @@ function useAlgoliaInsights() {
         context,
         sendAddToCartFromProductDetailsPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (context.queryId) {
                 aa('addedToCartObjectIDsAfterSearch', {
                     currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
@@ -55,9 +56,9 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromProductListPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'PLP: AddToCart ClickedAfterSearch',
@@ -76,7 +77,7 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromSearchEvent({ cartLine, queryId }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'SRP: AddToCart ClickedAfterSearch',
@@ -95,9 +96,9 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromSearchResultPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'SRP: AddToCart ClickedAfterSearch',
@@ -116,10 +117,10 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromProductDetailsPageEvent({ objectId, position }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (context.queryId) {
                 if (!position)
-                    return console.warn('Unable to send clickedObjectIDsAfterSearch event, no position', context, objectId);
+                    return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no position', context, objectId);
                 aa('clickedObjectIDsAfterSearch', {
                     eventName: 'PDP: Product Added to Wishlist',
                     index: context.index,
@@ -140,9 +141,9 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromProductListPageEvent({ objectId, position }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'PLP: Product Added to Wishlist',
                 index: context.index,
@@ -154,7 +155,7 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromSearchEvent({ objectId, position, queryId }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Added to Wishlist',
                 index: context.index,
@@ -166,9 +167,9 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromSearchResultPageEvent({ objectId, position, }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Added to Wishlist',
                 index: context.index,
@@ -180,11 +181,11 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromProductListPageEvent({ objectId, position }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'PLP: Product Clicked',
                 index: context.index,
@@ -200,9 +201,9 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromSearchEvent({ objectId, position, queryId }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Clicked',
                 index: context.index,
@@ -218,11 +219,11 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromSearchResultPageEvent({ objectId, position }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Clicked',
                 index: context.index,
@@ -238,9 +239,9 @@ function useAlgoliaInsights() {
         },
         sendPurchaseEventFromPaymentPage({ cart }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!cart.cartLines || cart.cartLines.length === 0)
-                return console.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
+                return logger.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
             aa('purchasedObjectIDs', {
                 currency: currencySymbolToISO[cart.currencySymbol],
                 eventName: 'Purchase Successful',

package/dist/buttons/link/link.d.ts

@@ -2,8 +2,9 @@ import { AnchorHTMLAttributes } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     areaSelected?: boolean;
     color?: 'primary' | 'secondary';
+    currentColor?: boolean;
     hasUnderline?: boolean;
     isDisabled?: boolean;
     role?: 'option';
 }
-export declare function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, currentColor, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link/link.js

@@ -3,11 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
+function Link({ children, className, color = 'primary', currentColor, hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
     return (jsx("a", { className: clsx({
             [styles.hover]: Boolean(props.href),
             [styles['has-underline']]: hasUnderline && props.href,
-        }, styles['link'], styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
+            [styles[color]]: !currentColor,
+            [styles['current-color']]: currentColor,
+        }, styles['link'], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
 }
 
 export { Link };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type BorderType = 'top' | 'middle' | 'middle-accentuated' | 'bottom';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    allowCollapse?: boolean;
     allowToggle?: boolean;
     borderType?: BorderType | BorderType[];
     children: ReactNode;
@@ -12,4 +13,4 @@ export interface AccordionItemProps {
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion-item.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import clsx from 'clsx';
 import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
 import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
@@ -7,16 +8,24 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
-    const { isOpen, toggle } = useDisclosure(initialIsOpen);
+function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+    const { close, isOpen, open, toggle } = useDisclosure(initialIsOpen);
+    useEffect(() => {
+        if (initialIsOpen) {
+            open();
+        }
+        else {
+            close();
+        }
+    }, [close, initialIsOpen, open]);
     const panelId = `panel-${id}`;
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
             [styles['is-open']]: isOpen,
             [styles['allow-toggle']]: allowToggle,
-        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+        }), children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle)
                             toggle();
-                    }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
+                    }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] })) : (jsx("span", { className: styles.button, children: title })) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
 }
 
 export { AccordionItem };

package/dist/exports.d.ts

@@ -73,6 +73,7 @@ export * from './display/product-sku/product-sku';
 export * from './filters/active-filters/active-filters';
 export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
+export * from './footer/footer';
 export * from './forms/checkbox/checkbox';
 export * from './forms/color-checkbox/color-checkbox';
 export * from './forms/field-error/field-error';
@@ -130,6 +131,8 @@ export * from './lists/ul/list';
 export * from './loading/blank-page-spacer';
 export * from './loading/loading-overlay';
 export * from './loading/progress-circle';
+export * from './logging/logger';
+export * from './logging/use-log-error';
 export * from './media/image-grid/images-grid';
 export * from './media/image-lightbox/image-lightbox';
 export * from './media/image/image';
@@ -290,6 +293,7 @@ export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';
 export * from './shared/utils/date';
+export * from './shared/utils/debug';
 export * from './shared/utils/environment';
 export * from './shared/utils/event-emitter';
 export * from './shared/utils/merge';

package/dist/footer/footer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { FooterLink, LinkBlock } from './footer.model';
+export interface FooterProps {
+    bottomLinks: FooterLink[];
+    copyright: string;
+    countrySelector: ReactNode;
+    linkBlocks: LinkBlock[];
+}
+export declare function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/footer/footer.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Accordion } from '../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { RouteLink } from '../shared/routing/route-link.js';
+import styles from './footer.module.css.js';
+
+function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }) {
+    const isXl = useIsBreakpoint('xl');
+    return (jsxs("footer", { className: styles.footer, children: [jsx("div", { className: styles['main-links'], children: linkBlocks.map(linkBlock => (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${linkBlock.key}`, initialIsOpen: isXl, title: linkBlock.header, children: jsx("ul", { className: styles['list'], children: linkBlock.links.map(link => (jsx("li", { children: jsx(RouteLink, { currentColor: true, href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }) }, link.key))) }) }) }) }, linkBlock.key))) }), jsxs("div", { className: styles['bottom-section'], children: [jsx("p", { className: styles.copyright, children: copyright }), jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(RouteLink, { className: styles['bottom-link'], currentColor: true, href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) }), countrySelector] })] }));
+}
+
+export { Footer };

package/dist/footer/footer.model.d.ts

@@ -0,0 +1,18 @@
+export interface FooterLink {
+    externalLink?: string;
+    internalLink?: string;
+    isButton: boolean;
+    key: string;
+    openInNewTab: boolean;
+    title?: string;
+}
+export interface LinkBlock {
+    header: string;
+    key: string;
+    links: FooterLink[];
+}
+export interface FooterModel {
+    bottomLinks: FooterLink[];
+    copyright: string;
+    linkBlocks: LinkBlock[];
+}

package/dist/footer/footer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"footer":"footer-module-YzJ68","main-links":"footer-module-rFBXC","link-block":"footer-module-P5FXP","link-block-heading":"footer-module-umuTh","list":"footer-module-FM4hU","bottom-section":"footer-module-TZq-4","copyright":"footer-module-qlHSS","bottom-links":"footer-module-5eyFH","bottom-link":"footer-module-0gJpF"};
+
+export { styles as default };

package/dist/index.js

@@ -78,6 +78,7 @@ export { ProductSku } from './display/product-sku/product-sku.js';
 export { ActiveFilters } from './filters/active-filters/active-filters.js';
 export { MultiSelect } from './filters/multi-select/multi-select.js';
 export { Pagination } from './filters/pagination/pagination.js';
+export { Footer } from './footer/footer.js';
 export { Checkbox } from './forms/checkbox/checkbox.js';
 export { ColorCheckbox } from './forms/color-checkbox/color-checkbox.js';
 export { FieldError } from './forms/field-error/field-error.js';
@@ -133,6 +134,8 @@ export { List, ListItem } from './lists/ul/list.js';
 export { BlankPageSpacer } from './loading/blank-page-spacer.js';
 export { LoadingOverlay } from './loading/loading-overlay.js';
 export { ProgressCircle } from './loading/progress-circle.js';
+export { consoleLogger, initLogger, logger } from './logging/logger.js';
+export { useLogError } from './logging/use-log-error.js';
 export { ImagesGrid } from './media/image-grid/images-grid.js';
 export { ImageLightbox } from './media/image-lightbox/image-lightbox.js';
 export { Image } from './media/image/image.js';
@@ -290,6 +293,7 @@ export { withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
 export { convertDateUnitToPluralOrSingle, formatDateToLocaleString, getDateUnitObject } from './shared/utils/date.js';
+export { trackPropertyChange } from './shared/utils/debug.js';
 export { environment, environments } from './shared/utils/environment.js';
 export { EventEmitter } from './shared/utils/event-emitter.js';
 export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';

package/dist/intl/utils.js

@@ -1,3 +1,4 @@
+import { logger } from '../logging/logger.js';
 import { isLanguageCode } from './types.js';
 
 function getLanguageCodeFromCultureCode(cultureCode) {
@@ -21,7 +22,7 @@ function spireTranslateAdapter(translate) {
             }, [])
             : []));
         if (optional && message === undefined)
-            console.warn(`Missing translation with id: ${id}`);
+            logger.warn(`Missing translation with id: ${id}`);
         return message || fallbackValue || id;
     };
 }

package/dist/logging/logger.d.ts

@@ -0,0 +1,11 @@
+export interface Logger {
+    debug(message: unknown, ...args: unknown[]): void;
+    error(message: unknown, error: unknown): void;
+    error(message: unknown, error: unknown, ...args: unknown[]): void;
+    error(error: unknown): void;
+    info(message: unknown, ...args: unknown[]): void;
+    warn(message: unknown, ...args: unknown[]): void;
+}
+export declare const consoleLogger: Logger;
+export declare let logger: Logger;
+export declare function initLogger(replacementLogger: Logger): Logger;

package/dist/logging/logger.js

@@ -0,0 +1,22 @@
+const consoleLogger = {
+    debug(...args) {
+        // eslint-disable-next-line no-console
+        return console.debug('⚡️', ...args);
+    },
+    error(...args) {
+        return console.error('❌', ...args);
+    },
+    info(...args) {
+        // eslint-disable-next-line no-console
+        return console.log('✅', ...args);
+    },
+    warn(...args) {
+        return console.warn('⚠️', ...args);
+    },
+};
+let logger = consoleLogger;
+function initLogger(replacementLogger) {
+    return (logger = replacementLogger);
+}
+
+export { consoleLogger, initLogger, logger };

package/dist/logging/use-log-error.d.ts

@@ -0,0 +1 @@
+export declare function useLogError(error?: unknown): void;

package/dist/logging/use-log-error.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { logger } from './logger.js';
+
+function useLogError(error) {
+    return useEffect(() => {
+        if (!error)
+            return;
+        logger.error(error);
+    }, [error]);
+}
+
+export { useLogError };

package/dist/notifications/announcements/announcement-provider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useLogError } from '../../logging/use-log-error.js';
 import { useFetchAnnouncements } from '../../shared/api/bff/hooks/use-fetch-announcements.js';
 import { useLocalStorage } from '../../shared/hooks/use-local-storage.js';
 import { ConnectedAnnouncement } from './connected-announcement.js';
@@ -14,11 +15,7 @@ function AnnouncementProvider() {
     const { data: announcements, error } = useFetchAnnouncements({
         cultureCode,
     });
-    useEffect(() => {
-        if (!error)
-            return;
-        console.error(error);
-    }, [error]);
+    useLogError(error);
     const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
     return (jsx(TransitionGroup, { className: styles['announcement-provider'], children: filteredAnnouncements?.map(announcement => (jsx(CSSTransition, { classNames: {

package/dist/pages/checkout/payment-page/components/adyen-payment.js

@@ -42,34 +42,44 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
                 if (!state.details.redirectResult) {
                     return onError(new Error('No redirectResult'), null);
                 }
-                const result = await getAdyenPaymentDetails({
-                    redirectResult: state.details.redirectResult,
-                });
-                if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
-                    return onError(new Error('Invalid amount'), result);
-                if (customerId !== adyenCustomerId)
-                    return onError(new Error('Invalid customer'), result);
-                return handlePaymentResponse(result, onComplete, onError);
+                try {
+                    const result = await getAdyenPaymentDetails({
+                        redirectResult: state.details.redirectResult,
+                    });
+                    if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
+                        return onError(new Error('Invalid amount'), result);
+                    if (customerId !== adyenCustomerId)
+                        return onError(new Error('Invalid customer'), result);
+                    return handlePaymentResponse(result, onComplete, onError);
+                }
+                catch (error) {
+                    return onError(error, null);
+                }
             }),
             onSubmit: (async (state, _component) => {
-                dropinDivRef.current?.classList.add(styles.loading);
-                if (state.data.paymentMethod.type === 'paybybank') {
-                    state.data.countryCode = countryCode;
-                }
-                const result = await postAdyenPayment({
-                    currencyCode,
-                    data: state.data,
-                    orderAmount,
-                    returnUrl,
-                    webOrderNumber: adyenSession.webOrderNumber,
-                });
-                if (result.action) {
-                    if (result.action.type === 'redirect') {
-                        return handleRedirectPaymentAction(result);
+                try {
+                    dropinDivRef.current?.classList.add(styles.loading);
+                    if (state.data.paymentMethod.type === 'paybybank') {
+                        state.data.countryCode = countryCode;
+                    }
+                    const result = await postAdyenPayment({
+                        currencyCode,
+                        data: state.data,
+                        orderAmount,
+                        returnUrl,
+                        webOrderNumber: adyenSession.webOrderNumber,
+                    });
+                    if (result.action) {
+                        if (result.action.type === 'redirect') {
+                            return handleRedirectPaymentAction(result);
+                        }
+                        return onError(new Error('Invalid payment response'), result);
                     }
-                    return onError(new Error('Invalid payment response'), result);
+                    return handlePaymentResponse(result, onComplete, onError);
+                }
+                catch (error) {
+                    return onError(error, null);
                 }
-                return handlePaymentResponse(result, onComplete, onError);
             }),
             session: {
                 ...adyenSession,

package/dist/pages/checkout/payment-page/components/payment.js

@@ -12,7 +12,9 @@ import { TextField } from '../../../../forms/text-field/text-field.js';
 import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { logger } from '../../../../logging/logger.js';
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-invalidate-current-cart.js';
 import { usePatchCart } from '../../../../shared/api/storefront/hooks/cart/use-patch-cart.js';
 import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-place-order.js';
 import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
@@ -27,10 +29,13 @@ import styles from './payment.module.css.js';
 
 function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
-    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart({
+        skipInvalidation: true,
+    });
     const { isLoading: isPatchingSession } = usePatchSession();
     const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
+    const invalidateCurrentCart = useInvalidateCurrentCart();
     const dropinRef = useRef(null);
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
@@ -151,7 +156,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
         if (isAdyenPayment) {
             /* Adyen Payment */
             if (!dropinRef.current) {
-                console.warn('Adyen Dropin not ready');
+                logger.warn('Adyen Dropin not ready');
                 return;
             }
             dropinRef.current.showValidation();
@@ -168,20 +173,26 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
             };
             try {
-                cartRef.current = await patchCart({
-                    cart: updatedCart,
-                });
-            }
-            catch (error) {
-                console.error(error);
-                setAPIError(error);
-            }
-            try {
-                dropinRef.current.submit();
+                try {
+                    cartRef.current = await patchCart({
+                        cart: updatedCart,
+                    });
+                }
+                catch (error) {
+                    setAPIError(error);
+                    throw error;
+                }
+                try {
+                    dropinRef.current.submit();
+                }
+                catch (error) {
+                    setPaymentError(error);
+                    throw error;
+                }
             }
             catch (error) {
-                console.error(error);
-                setPaymentError(error);
+                logger.error(error);
+                invalidateCurrentCart();
             }
         }
         else {
@@ -196,8 +207,9 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 return onPaymentComplete({ cartId: cart.trackId });
             }
             catch (error) {
-                console.error(error);
+                logger.error(error);
                 setPaymentError(error);
+                invalidateCurrentCart();
             }
         }
     }
@@ -224,7 +236,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             return onPaymentComplete({ cartId: cart.trackId });
         }
         catch (error) {
-            console.error(error);
+            logger.error(error);
             setAPIError(error);
         }
     }, [onPaymentComplete, onPlaceOrderCompleted, placeOrder]);
@@ -232,7 +244,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
         invalidateAdyen();
         // invalidateCurrentCart()
         setPaymentError(error);
-        console.error(error);
+        logger.error(error);
         _onError?.(error, result);
     }, [_onError, invalidateAdyen]);
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {

package/dist/pages/checkout/shipping-page/components/edit-address.d.ts

@@ -1,4 +1,4 @@
-import { CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { BillToModel, CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
 interface Address {
     address1: string;
@@ -13,7 +13,8 @@ interface Address {
     phone: string;
     postalCode: string;
 }
-export declare function EditAddresses({ countries, isLoading, isPickup, onSubmit, }: {
+export declare function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+    billTo: BillToModel | undefined | null;
     countries: CountryModel[];
     isLoading: boolean;
     isPickup: boolean;

package/dist/pages/checkout/shipping-page/components/edit-address.js

@@ -15,10 +15,10 @@ import { SonicAddress } from './sonic-address.js';
 import styles from './edit-address.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
+function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
-    const [companyName, setCompanyName] = useState('');
-    const [lastName, setLastName] = useState('');
+    const [companyName, setCompanyName] = useState(billTo?.companyName || '');
+    const [lastName, setLastName] = useState(billTo?.lastName || '');
     const { data: cart } = useFetchCurrentCart();
     return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
                             e.preventDefault();
@@ -43,7 +43,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                 },
                                 notes: formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                        }, children: [jsx(TextField, { defaultValue: billTo?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: billTo?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: billTo?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: billTo?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: billTo?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", selectedCountry: countries.find(country => country.id === billTo?.country?.id) }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                                         if (!value)
                                             return value;
                                         return (validatePhone(value) ||
@@ -53,7 +53,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                             return value;
                                         return (validateEmail(value) ||
                                             t('Please enter a valid e-mail address'));
-                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditAddresses };

package/dist/pages/checkout/shipping-page/shipping-page-content.d.ts

@@ -5,10 +5,11 @@ export interface ShippingPageContentProps {
     editAddress: ReactNode;
     errorPatchBillingAddress?: unknown;
     fulfillmentMethods: string[] | undefined;
+    isGuest: boolean;
     isLoadingFulfillmentMethods: boolean;
     isPatching: boolean;
     isPatchingSession: boolean;
     onChangeFulfillmentMethod: (value: string) => void;
     readOnlyAddress: ReactNode;
 }
-export declare function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }: ShippingPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }: ShippingPageContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,7 @@ import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/comp
 import { EDIT_ADDRESS_FORM_ID } from './components/edit-address.js';
 import styles from './shipping-page.module.css.js';
 
-function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
+function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
     const t = useFormattedMessage();
     const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
@@ -34,7 +34,7 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
                 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: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
+                    : 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: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
 }
 
 export { ShippingPageContent };

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

@@ -75,13 +75,14 @@ function ShippingPage() {
     if (isLoading || isNavigating || isError || isSuccess)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
+        hasNo(session) ||
         hasNo(cart) ||
         hasNo(cart.cartLines) ||
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo) ||
         (hasNo(cart.billTo.address1) && hasNo(countries)))
         return null;
-    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                 if (!cart.billTo)
                     return;
                 await patchShippingDetails({
@@ -93,7 +94,7 @@ function ShippingPage() {
                     cart,
                     event: { event: 'add_shipping_info' },
                 }));
-            } }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
+            } }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isGuest: session.isGuest, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
             await patchSession({
                 session: {
                     ...session,

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

@@ -37,7 +37,7 @@ function SearchResultsPageContent({ keyword }) {
     const { hits, isLoading } = useAlgoliaHits();
     const hasHits = hits.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs(Fragment, { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
                     replacementValues: { 0: keyword },
                 }) })), jsxs("div", { style: {
                     display: hasHits ? undefined : 'none',

package/dist/shared/ga/data-layer.js

@@ -1,8 +1,9 @@
+import { logger } from '../../logging/logger.js';
+
 const _dataLayer = [];
 _dataLayer.push = (function (_push) {
     return (...items) => {
-        // eslint-disable-next-line no-console
-        console.log('dataLayer.push', items.length === 1 ? items[0] : items);
+        logger.info('dataLayer.push', items.length === 1 ? items[0] : items);
         return _push(...items);
     };
 })(_dataLayer.push.bind(_dataLayer));

package/dist/shared/providers/global-state-provider.js

@@ -73,11 +73,9 @@ function useGlobalState(key, initialState) {
             state.removeEventListener('stateChanged', updateState);
         };
     }, [state]);
-    function updateGlobalState(valueOrFn) {
-        state.value =
-            valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn;
-    }
-    return [rerenderState, useCallback(updateGlobalState, [updateGlobalState])];
+    const setGlobalState = useCallback((valueOrFn) => (state.value =
+        valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn), [state]);
+    return [rerenderState, setGlobalState];
 }
 
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState };

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

@@ -0,0 +1,2 @@
+export declare function trackPropertyChange(name: string, value: unknown): void;
+export declare function trackPropertyChange(obj: Record<string, unknown>): void;

package/dist/shared/utils/debug.js

@@ -0,0 +1,21 @@
+import { logger } from '../../logging/logger.js';
+
+const prevState = {};
+function trackPropertyChange(name, value) {
+    if (typeof name === 'string') {
+        if (value === prevState[name]) {
+            logger.info(name, value === prevState[name]);
+        }
+        else {
+            logger.warn(name, value === prevState[name]);
+        }
+        prevState[name] = value;
+    }
+    else {
+        for (const [key, value] of Object.entries(name)) {
+            trackPropertyChange(key, value);
+        }
+    }
+}
+
+export { trackPropertyChange };

package/dist/shared/utils/environment.js

@@ -1,3 +1,5 @@
+import { logger } from '../../logging/logger.js';
+
 const environments = [
     'marketingLocal',
     'sandbox',
@@ -26,7 +28,7 @@ function getEnvironment() {
     }
     else if (typeof window === 'undefined') {
         environmentUrl = 'production';
-        console.error('Unable to detect environment url');
+        logger.error('Unable to detect environment url');
     }
     else {
         environmentUrl = `${window.location.hostname}:${window.location.port}`;
@@ -52,7 +54,7 @@ function getEnvironment() {
     }
     else {
         environment = 'production';
-        console.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
+        logger.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
     }
     return environment;
 }

package/dist/styles.css

@@ -265,6 +265,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  color: currentcolor;
   cursor: pointer;
   font: inherit;
   gap: var(--space-4);
@@ -318,6 +319,7 @@
   --accordion-item-border-color: var(--seperator-color);
   --accordion-item-border-accentuated-color: var(--color-brand-dark-gray);
   --accordion-item-border: 1px solid var(--accordion-item-border-color);
+  --accordion-item-hover-color: var(--color-brand-light-gray);
 }
 
   .accordion-module-9WvAH.accordion-module-6CcEH {
@@ -326,6 +328,7 @@
 
   .accordion-module-9WvAH.accordion-module-CaVdG {
     --color: var(--color-white);
+    --accordion-item-hover-color: transparent;
   }
 
   .accordion-module-9WvAH.accordion-module-CaVdG .accordion-module-lf9d- button[aria-expanded='true'] {
@@ -398,8 +401,7 @@
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo {
       display: grid;
       grid-template-rows: 0fr;
-      transition:
-        grid-template-rows var(--transition-duration) linear,
+      transition: grid-template-rows var(--transition-duration) linear,
         padding-block var(--transition-duration) linear;
     }
 
@@ -438,7 +440,7 @@
 
   @media (hover: hover) {
         .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-QEO2d .accordion-module--Rwpb:hover {
-          background-color: var(--color-brand-light-gray);
+          background-color: var(--accordion-item-hover-color);
         }
     }
 
@@ -4085,6 +4087,101 @@ button.swiper-pagination-bullet {
     line-height: 1.5;
   }
 
+.footer-module-YzJ68 {
+  --padding-inline: var(--space-24);
+
+  display: block;
+  background-color: var(--color-black);
+  color: var(--color-white);
+  padding-block-start: var(--space-32);
+}
+
+  .footer-module-YzJ68,
+  .footer-module-YzJ68 * {
+    box-sizing: border-box;
+  }
+
+  .footer-module-YzJ68 ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .footer-module-YzJ68 .footer-module-rFBXC {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    margin-block-end: var(--space-32);
+    padding-inline: var(--padding-inline);
+  }
+
+  .footer-module-YzJ68 .footer-module-rFBXC .footer-module-P5FXP .footer-module-umuTh {
+        margin-bottom: var(--space-12);
+        color: inherit;
+      }
+
+  .footer-module-YzJ68 .footer-module-rFBXC .footer-module-P5FXP .footer-module-FM4hU {
+        display: grid;
+        margin-bottom: var(--space-16);
+        gap: var(--space-12);
+      }
+
+  .footer-module-YzJ68 .footer-module-TZq-4 {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--color-brand-dark-gray);
+    gap: var(--space-32);
+    padding-block: var(--space-32);
+    padding-inline: var(--padding-inline);
+  }
+
+  .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-qlHSS {
+      margin: 0;
+    }
+
+  .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-5eyFH {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-32);
+    }
+
+  @media (width >= 1024px) {.footer-module-YzJ68 {
+    padding-top: var(--space-56)
+}
+
+    .footer-module-YzJ68 .footer-module-rFBXC {
+      display: grid;
+      gap: var(--space-32);
+      grid-template-columns: repeat(auto-fit, 220px);
+      margin-block-end: 104px;
+    }
+
+    .footer-module-YzJ68 .footer-module-TZq-4 {
+      flex-direction: row;
+      justify-content: space-between;
+      padding-block: var(--space-16);
+    }
+
+      .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-5eyFH {
+        flex-direction: row;
+      }
+
+      .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-0gJpF {
+        position: relative;
+      }
+
+        .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-0gJpF:not(:last-child)::after {
+          position: absolute;
+          right: -17px;
+          color: currentcolor;
+          content: '|';
+        }
+  }
+
 .switch-module-ywpXc {
   --pin-color: var(--color-white);
   --box-color: var(--color-brand-light-gray);
@@ -4820,7 +4917,7 @@ button.swiper-pagination-bullet {
   align-items: center;
   background-color: var(--color-white);
   gap: var(--space-8);
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: auto 1fr auto;
   padding-block: var(--space-4);
   padding-inline: var(--space-16);
 }
@@ -4832,6 +4929,7 @@ button.swiper-pagination-bullet {
 
   .header-layout-module-VlTuk .header-layout-module-oKPyL {
     width: var(--space-100);
+    justify-self: center;
   }
 
   .header-layout-module-VlTuk .header-layout-module-aBOJL {
@@ -4840,12 +4938,11 @@ button.swiper-pagination-bullet {
 
   .header-layout-module-VlTuk .header-layout-module--ICLK {
     display: none;
-    place-items: center;
+    justify-items: center;
   }
 
   .header-layout-module-VlTuk .header-layout-module-HjY-a {
     display: flex;
-    margin-left: auto;
   }
 
   .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
@@ -4857,14 +4954,10 @@ button.swiper-pagination-bullet {
     }
 
   @media (width >= 1024px) {.header-layout-module-VlTuk {
-    padding-block: var(--space-24);
+    padding-block: var(--space-12);
     padding-inline: var(--space-32)
 }
 
-    .header-layout-module-VlTuk .header-layout-module-oKPyL {
-      margin-bottom: var(--space-8);
-    }
-
     .header-layout-module-VlTuk .header-layout-module-aBOJL {
       display: none;
     }

package/package.json

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