@sonic-equipment/ui 141.0.0 → 143.0.0

package/dist/intl/intl-provider.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { IntlContext } from './intl-context.js';
 
 function IntlProvider({ children, cultureCode: _cultureCode, formattedMessage, }) {
     const [cultureCode, updateCultureCode] = useState(_cultureCode);
-    return (jsx(IntlContext.Provider, { value: {
-            cultureCode,
-            formattedMessage,
-            updateCultureCode,
-        }, children: children }));
+    const value = useMemo(() => ({
+        cultureCode,
+        formattedMessage,
+        updateCultureCode,
+    }), [cultureCode, formattedMessage]);
+    return jsx(IntlContext.Provider, { value: value, children: children });
 }
 
 export { IntlProvider };

package/dist/intl/missing-translation-provider.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import { useFetchTranslations } from '../shared/api/storefront/hooks/translation/use-fetch-translations.js';
 import { useFeatureFlags } from '../shared/feature-flags/use-feature-flags.js';
 import { IntlContext } from './intl-context.js';
@@ -24,14 +24,15 @@ function MissingTranslationProvider({ children, }) {
                 : `⭐️${message}⭐️`
             : message;
     }, [intlProps, missing, showTranslations, translations]);
+    const value = useMemo(() => ({
+        ...intlProps,
+        formattedMessage,
+    }), [intlProps, formattedMessage]);
     if (!missing && !showTranslations)
         return jsx(Fragment, { children: children });
     if (missing && (isLoading || !translations))
         return null;
-    return (jsx(IntlContext.Provider, { value: {
-            ...intlProps,
-            formattedMessage,
-        }, children: children }));
+    return jsx(IntlContext.Provider, { value: value, children: children });
 }
 
 export { MissingTranslationProvider };

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Your email and password were not recognized.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';
+export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Your email and password were not recognized.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';

package/dist/lists/feature-list/feature-list.js

@@ -16,7 +16,9 @@ function FeatureValue({ value }) {
     return jsx("div", { className: styles.value, children: value });
 }
 function FeatureList({ className, features, style }) {
-    return (jsx("div", { className: clsx(styles['feature-list'], className), children: features.map(({ id, key, value }) => (jsxs("div", { className: styles.row, children: [jsx("div", { className: clsx(styles.column, styles['column-label'], styles[`alignment-${style?.keyAlignment || 'left'}`]), children: key && jsx(FeatureKey, { ...key }) }), jsx("div", { className: clsx(styles.column, styles['column-value'], styles[`alignment-${style?.valueAlignment || 'right'}`]), children: Array.isArray(value) ? (value.map((value, index) => (jsx(FeatureValue, { value: value }, `${id}-${index}`)))) : (jsx(FeatureValue, { value: value })) })] }, id))) }));
+    return (jsx("div", { className: clsx(styles['feature-list'], className), children: features.map(({ id, key, value }) => (jsxs("div", { className: styles.row, children: [jsx("div", { className: clsx(styles.column, styles['column-label'], styles[`alignment-${style?.keyAlignment || 'left'}`]), children: key && jsx(FeatureKey, { ...key }) }), jsx("div", { className: clsx(styles.column, styles['column-value'], styles[`alignment-${style?.valueAlignment || 'right'}`]), children: Array.isArray(value) ? (value.map((value, index) => (
+                    // eslint-disable-next-line @eslint-react/no-array-index-key
+                    jsx(FeatureValue, { value: value }, `${id}-${index}`)))) : (jsx(FeatureValue, { value: value })) })] }, id))) }));
 }
 
 export { FeatureList };

package/dist/lists/orderline-list/orderline-list.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 interface OrderLineListProps {
     children?: ReactNode;
-    onRemoveAll?: () => void;
+    onRemoveAll?: VoidFunction;
 }
 export declare function OrderLineList({ children, onRemoveAll }: OrderLineListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lists/orderline-list/orderline-list.js

@@ -12,6 +12,7 @@ import styles from './orderline-list.module.css.js';
 function OrderLineList({ children, onRemoveAll }) {
     const t = useFormattedMessage();
     const { close, isOpen, open } = useDisclosure();
+    // eslint-disable-next-line @eslint-react/no-children-count
     const count = React.Children.count(children);
     const productString = count === 1 ? t('Product') : t('Products');
     function handleRemoveAll() {
@@ -19,7 +20,11 @@ function OrderLineList({ children, onRemoveAll }) {
             return;
         open();
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: Children.map(children, (child, index) => (jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: 
+                        // eslint-disable-next-line @eslint-react/no-children-map
+                        Children.map(children, (child, index) => (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
 }
 
 export { OrderLineList };

package/dist/lists/product-overview-grid/product-overview-grid.js

@@ -4,7 +4,11 @@ import { ProgressCircle } from '../../loading/progress-circle.js';
 import styles from './product-overview-grid.module.css.js';
 
 function ProductOverviewGrid({ children, isLoading, }) {
-    return (jsxs("div", { className: styles['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles['loading-panel'], children: jsx(ProgressCircle, { className: styles['progress-circle'] }) }))] }));
+    return (jsxs("div", { className: styles['product-grid'], children: [
+            // eslint-disable-next-line @eslint-react/no-children-map
+            Children.map(children, (child, index) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsx("div", { className: styles['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles['loading-panel'], children: jsx(ProgressCircle, { className: styles['progress-circle'] }) }))] }));
 }
 
 export { ProductOverviewGrid };

package/dist/media/image/image.d.ts

@@ -6,7 +6,7 @@ interface ImageProps {
     height?: number;
     image: ImageType | ResponsiveImageType | undefined;
     loading?: 'lazy' | 'eager';
-    onError?: () => void;
+    onError?: VoidFunction;
     title: string;
     width?: number;
 }

package/dist/media/image-lightbox/image-lightbox.js

@@ -26,10 +26,14 @@ function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm
         const scrollPercentage = clientY / height;
         onZoom?.({ index: currentIndex, scrollPercentage });
     }
-    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
+    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
                             nextEl: nextEl.current,
                             prevEl: prevEl.current,
-                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles.slide, children: jsx("button", { className: styles['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next" })] }))] })] }));
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        jsx(SwiperSlide, { className: styles.slide, children: jsx("button", { className: styles['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next" })] }))] })] }));
 }
 
 export { ImageLightbox };

package/dist/media/zoom-image/zoom-image.d.ts

@@ -3,6 +3,6 @@ import { ImageType } from '../../shared/model/image';
 export declare function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }: {
     currentImage: ImageType | undefined;
     isZoomed?: boolean;
-    onClose?: () => void;
+    onClose?: VoidFunction;
     scrollFromTopPercentage?: number;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/message/message.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export interface MessageProps {
     children?: ReactNode;
+    className?: string;
     type?: 'default' | 'info' | 'danger' | 'success' | 'warning';
 }
-export declare function Message({ children, type }: MessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Message({ children, className, type, }: MessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/message/message.js

@@ -12,8 +12,8 @@ const icons = {
     success: jsx(SolidOkayIcon, {}),
     warning: jsx(SolidNoticeIcon, {}),
 };
-function Message({ children, type = 'default' }) {
-    return (jsxs("div", { className: clsx(styles.message, styles[type]), role: "note", children: [type !== 'default' && (jsx("div", { className: styles.icon, role: "presentation", children: icons[type] })), jsx("div", { className: styles.body, children: children })] }));
+function Message({ children, className, type = 'default', }) {
+    return (jsxs("div", { className: clsx(styles.message, styles[type], className), role: "note", children: [type !== 'default' && (jsx("div", { className: styles.icon, role: "presentation", children: icons[type] })), jsx("div", { className: styles.body, children: children })] }));
 }
 
 export { Message };

package/dist/modals/favorite/add-to-favorite-dialog.d.ts

@@ -1,6 +1,6 @@
 interface AddToFavoriteDialogProps {
     isOpen: boolean;
-    onCancel: () => void;
+    onCancel: VoidFunction;
     onSubmit: (wishListId: string) => void;
 }
 export declare function AddToFavoriteDialog({ isOpen, onCancel, onSubmit, }: AddToFavoriteDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/modals/modal/modal.js

@@ -4,6 +4,7 @@ import { ModalOverlay, Modal as Modal$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
 import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
+import resetStyles from '../../shared/reset.module.css.js';
 import styles from './modal.module.css.js';
 
 const getDocument = () => typeof window === 'undefined' ? undefined : window.document;
@@ -26,7 +27,7 @@ function Modal({ children, className, hasCloseButton, isDismissable, isFullScree
                 e.preventDefault();
                 e.stopPropagation();
             });
-        }, className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, UNSTABLE_portalContainer: document.body, children: jsxs(Modal$1, { className: clsx(styles.modal, {
+        }, className: clsx(styles['modal-overlay'], resetStyles.reset, typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, UNSTABLE_portalContainer: document.body, children: jsxs(Modal$1, { className: clsx(styles.modal, {
                 [styles['is-full-screen']]: isFullScreen,
             }, typeof className === 'string' ? undefined : className?.modal), children: [hasCloseButton && (jsx("div", { className: clsx(styles.close, typeof className === 'string' ? className : className?.close), children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange?.(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? className : className?.content), children: children })] }) }));
 }

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

@@ -6,7 +6,7 @@ import { Announcement } from './announcement.js';
 
 const now = () => new Date();
 function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announcement }, onDismiss, }) {
-    const [isVisible, setIsVisible] = useState((!startDate || startDate <= now()) && (!endDate || endDate > now()));
+    const [isVisible, setIsVisible] = useState(() => (!startDate || startDate <= now()) && (!endDate || endDate > now()));
     const getIsVisible = useCallback(() => isVisible, [isVisible]);
     useEffect(() => {
         if (endDate && now() >= endDate)

package/dist/pages/checkout/components/billing-and-invoice-information.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Address } from '../../../address/address.js';
+import { AddressInfoDisplay } from '../../../address-info-display/address-info-display.js';
 import { InfoDisplay } from '../../../display/info-display/info-display.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import styles from './billing-and-invoice-information.module.css.js';
 
 function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(Address, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(Address, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
+    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(AddressInfoDisplay, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(AddressInfoDisplay, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
 }
 
 export { BillingAndInvoiceInformation };

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

@@ -3,6 +3,7 @@ import { useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import { useIntersectionObserver } from '../../../../shared/hooks/use-intersection-observer.js';
 import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
+import { useIsScrolledBeyondElement } from '../../../../shared/hooks/use-is-scrolled-beyond-element.js';
 import { useWatchCssProperty } from '../../../../shared/hooks/use-watch-css-property.js';
 import styles from './checkout-page-layout.module.css.js';
 
@@ -11,6 +12,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
     const topRef = useRef(null);
     const bottomRef = useRef(null);
     const headerHeight = useWatchCssProperty('--header-height');
+    const isScrolledBeyond = useIsScrolledBeyondElement(bottomRef.current || undefined);
     const observables = useMemo(() => [
         {
             options: {
@@ -24,7 +26,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
         isDisabled: isXXL,
         observables,
     });
-    return (jsxs("div", { className: styles['checkout-page-layout'], children: [!isXXL && (jsxs(Fragment, { children: [mobileSummary, jsx("div", { ref: topRef }), jsxs("div", { className: clsx(styles['top-actions'], styles.actions), children: [actions?.primary, actions?.secondary] }), !isIntersecting && (jsxs("div", { className: clsx(styles['top-actions-sticky'], styles.actions), children: [actions?.primary, actions?.secondary] }))] })), jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsxs("div", { className: styles['sticky-side'], children: [overview, jsxs("div", { ref: bottomRef, className: styles.actions, children: [actions?.primary, actions?.secondary] })] }) })] })] }));
+    return (jsxs("div", { className: styles['checkout-page-layout'], children: [!isXXL && (jsxs(Fragment, { children: [mobileSummary, jsx("div", { ref: topRef }), jsxs("div", { className: clsx(styles['top-actions'], styles.actions), children: [actions?.primary, actions?.secondary] }), !isIntersecting && !isScrolledBeyond && (jsxs("div", { className: clsx(styles['top-actions-sticky'], styles.actions), children: [actions?.primary, actions?.secondary] }))] })), jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsxs("div", { className: styles['sticky-side'], children: [overview, jsxs("div", { ref: bottomRef, className: styles.actions, children: [actions?.primary, actions?.secondary] })] }) })] })] }));
 }
 
 export { CheckoutPageLayout };

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

@@ -46,8 +46,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const currencyCode = currencySymbolToISO[cart.currencySymbol];
     const lastVATNumber = useRef(cart.customerVatNumber);
     if (!currencyCode)
-        throw new Error('Currency code not found for cart with currency symbol: ' +
-            cart.currencySymbol);
+        throw new Error(`Currency code not found for cart with currency symbol: ${cart.currencySymbol}`);
     const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
         cart.paymentOptions &&
         cart.billTo?.id &&

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.d.ts

@@ -0,0 +1,6 @@
+export interface CurrencyChangeDialogProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    onSubmit: () => void;
+}
+export declare function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }: CurrencyChangeDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Dialog } from '../../../../modals/dialog/dialog.js';
+import { RouteLink } from '../../../../shared/routing/route-link.js';
+import { PATHS } from '../../../paths.js';
+
+function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }) {
+    const t = useFormattedMessage();
+    return (jsx(Dialog, { isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: onSubmit, shouldCloseOnInteractOutside: true, submitLabel: "Continue", title: t('Currency Change'), children: jsxs("p", { children: [jsx(FormattedMessage, { id: "You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, " }), jsx(RouteLink, { hasUnderline: true, color: "secondary", href: PATHS.CART, onClick: onSubmit, children: jsx(FormattedMessage, { id: "please go back to your cart." }) }), ' ', jsx(FormattedMessage, { id: "If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country." })] }) }));
+}
+
+export { CurrencyChangeDialog };

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

@@ -1,27 +1,29 @@
-import { BillToModel, CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { BillToModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { Country } from '../../../../shared/model/countries-languages';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
-interface Address {
+export interface Address {
     address1: string;
     address2: string;
     address3: string;
     attention: string;
     city: string;
     companyName: string;
-    country: CountryModel;
+    country: Country;
     email: string;
     firstName: string;
     lastName: string;
     phone: string;
     postalCode: string;
 }
-export declare function EditAddressesForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+export interface EditAddressesFormData {
+    address: Address;
+    notes: string | undefined;
+}
+export declare function EditAddressesForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
-    countries: CountryModel[];
+    countries: Country[];
+    currentCountry: Country | undefined;
     isLoading: boolean;
     isPickup: boolean;
-    onSubmit: (event: {
-        address: Address;
-        notes: string;
-    }) => void;
+    onSubmit: (event: EditAddressesFormData) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,12 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Form } from 'react-aria-components';
-import { CountrySelect } from '../../../../country-selector/country-select/country-select.js';
+import { CountrySelect } from '../../../../country-select/country-select.js';
 import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 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 { Message } from '../../../../message/message.js';
 import { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { validatePhone, validateEmail } from '../../../../shared/model/address.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
@@ -15,11 +16,13 @@ import { SonicAddress } from './sonic-address.js';
 import styles from './edit-address-form.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditAddressesForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+function EditAddressesForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState(billTo?.companyName || '');
     const [lastName, setLastName] = useState(billTo?.lastName || '');
     const { data: cart } = useFetchCurrentCart();
+    const [selectedCountry, setSelectedCountry] = useState(currentCountry);
+    const currencyHasChanged = selectedCountry?.currencyCode !== currentCountry?.currencyCode;
     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();
                             const formData = new FormData(e.currentTarget);
@@ -42,9 +45,13 @@ function EditAddressesForm({ billTo, countries, isLoading, isPickup, onSubmit, }
                                     phone: formData.get('phone')?.toString() || '',
                                     postalCode: formData.get('postalCode')?.toString() || '',
                                 },
-                                notes: formData.get('notes')?.toString() || '',
+                                notes: cart?.notes === formData.get('notes')
+                                    ? undefined
+                                    : formData.get('notes')?.toString() || '',
                             });
-                        }, 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", defaultSelectedCountry: countries.find(country => country.id === billTo?.country?.id), isDisabled: isLoading, name: "countrySelect" }) }), 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 => {
+                        }, 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 }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
+                                                '0': selectedCountry?.currencyCode || t('Unknown'),
+                                            } }) }))] }), 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) ||

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

@@ -1,3 +1,3 @@
-var styles = {"form":"edit-address-form-module-s19Fg","span-2":"edit-address-form-module-O1w3c","use-invoice-checkbox":"edit-address-form-module-2bfdq"};
+var styles = {"form":"edit-address-form-module-s19Fg","span-2":"edit-address-form-module-O1w3c","currency-warning":"edit-address-form-module-lLT5t","use-invoice-checkbox":"edit-address-form-module-2bfdq"};
 
 export { styles as default };

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

@@ -3,9 +3,9 @@ export declare function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes,
     billTo: BillToModel | undefined | null;
     isLoading: boolean;
     isPickup: boolean;
-    notes: string;
+    notes: string | undefined;
     onSubmit: ({ notes }: {
-        notes: string;
+        notes: string | undefined;
     }) => void;
     shipTo: ShipToModel | undefined | null;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Form } from 'react-aria-components';
-import { Address } from '../../../../address/address.js';
+import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';
 import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 import { TextField } from '../../../../forms/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
@@ -20,9 +20,11 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
             e.preventDefault();
             const formData = new FormData(e.currentTarget);
             onSubmit({
-                notes: formData.get('notes')?.toString() || '',
+                notes: notes === formData.get('notes')
+                    ? undefined
+                    : formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address: {
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(AddressInfoDisplay, { address: {
                                     address1: billTo.address1,
                                     address2: billTo.address2,
                                     address3: billTo.address3,
@@ -34,7 +36,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     lastName: billTo.lastName,
                                     phone: billTo.phone,
                                     postalCode: billTo.postalCode,
-                                } })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address: {
+                                } })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(AddressInfoDisplay, { address: {
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.d.ts

@@ -1,16 +1,16 @@
-import { BillToModel, CartModel, SessionModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { BillToModel, CartModel, PatchBillToModel, PatchCartModel, SessionModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare function usePatchShippingDetails(): {
     error: unknown;
     isError: boolean;
     isLoading: boolean;
     isSuccess: boolean;
     mutate: (args_0: {
-        billTo?: BillToModel;
-        cart: CartModel;
+        billTo?: PatchBillToModel;
+        cart: PatchCartModel;
         notes: string | undefined;
     }) => Promise<{
         patchedBillTo: BillToModel | undefined;
-        patchedCart: CartModel;
+        patchedCart: CartModel | undefined;
         patchedSession: SessionModel | undefined;
     }>;
 };

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.js

@@ -18,9 +18,11 @@ function usePatchShippingDetails() {
                     },
                 })
                 : undefined;
-            const patchedCart = await patchCart({
-                cart: { ...cart, billTo: patchedBillTo, notes },
-            });
+            const patchedCart = patchedBillTo || notes !== undefined
+                ? await patchCart({
+                    cart: { ...cart, billTo: patchedBillTo, notes },
+                })
+                : undefined;
             return { patchedBillTo, patchedCart, patchedSession };
         },
         onSuccess: ({ data: { patchedBillTo, patchedCart, patchedSession }, queryClient, }) => {
@@ -32,7 +34,9 @@ function usePatchShippingDetails() {
             else if (patchedBillTo) {
                 queryClient.removeQueries({ queryKey: ['session'] });
             }
-            queryClient.setQueryData(['carts', patchedCart.id], patchedCart);
+            if (patchedCart) {
+                queryClient.setQueryData(['carts', patchedCart.id], patchedCart);
+            }
         },
     });
 }