@sonic-equipment/ui 127.0.0 → 128.0.0

package/dist/cart-totals/cart-totals.js

@@ -4,7 +4,7 @@ import { Heading } from '../typography/heading/heading.js';
 import styles from './cart-totals.module.css.js';
 
 function CartTotals({ fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
-    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, children: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, children: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: total })] }) })] }));
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfullmentMethod", children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, "data-test-selector": "shippingCost", children: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, "data-test-selector": "vatAmount", children: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: total })] }) })] }));
 }
 
 export { CartTotals };

package/dist/global-search/search-input/connected-search-input.js

@@ -10,7 +10,7 @@ function ConnectedSearchInput() {
     const { autocomplete, formRef, inputRef } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
     const t = useFormattedMessage();
-    const navigate = useNavigate();
+    const { navigate } = useNavigate();
     return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
             if (!inputRef.current?.value)
                 return;

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.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | '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' | '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.' | 'Company name' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Fulfillment method' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'of' | 'Order number' | 'Order' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | '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' | '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 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.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | '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.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | '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' | '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.' | 'Company name' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Fulfillment method' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'of' | 'Order number' | 'Order' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | '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' | '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 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.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | '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';

package/dist/loading/loading-overlay.js

@@ -3,7 +3,7 @@ import { ProgressCircle } from './progress-circle.js';
 import styles from './loading-overlay.module.css.js';
 
 function LoadingOverlay() {
-    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, {}) }));
+    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, { variant: "gray" }) }));
 }
 
 export { LoadingOverlay };

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

@@ -35,25 +35,27 @@ function PaymentPage() {
     const t = useFormattedMessage();
     const [isProcessing, setIsProcessing] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
-    const navigate = useNavigate();
+    const { isNavigating, navigate } = useNavigate();
     const onPaymentComplete = useCallback(() => navigate('/CheckoutConfirmation'), [navigate]);
     useEffect(() => {
+        if (isNavigating)
+            return;
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate('/sign-in?returnUrl=/CheckoutShipping');
+            return navigate('/signin?returnUrl=/CheckoutShipping');
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
             return navigate('/cart');
         if (hasNo(cart.billTo))
-            return navigate('/sign-in?returnUrl=/CheckoutShipping');
+            return navigate('/signin?returnUrl=/CheckoutShipping');
         if (hasNo(cart.billTo.address1))
             return navigate('/CheckoutShipping');
-    }, [cart, navigate, isAuthenticated]);
+    }, [cart, navigate, isAuthenticated, isNavigating]);
     if (error)
         return jsx(ErrorPage, { error: error });
-    if (isLoading)
+    if (isLoading || isNavigating)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
         hasNo(atp) ||

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

@@ -15,13 +15,13 @@ import styles from './readonly-address.module.css.js';
 const ACCOUNT_ADDRESSES_PATH = '/MyAccount/Addresses';
 function ReadOnlyAddresses({ billTo, isLoading, notes, onSubmit, shipTo, }) {
     const t = useFormattedMessage();
-    return (jsxs(Form, { id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+    return (jsxs(Form, { "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
             e.preventDefault();
             const formData = new FormData(e.currentTarget);
             onSubmit({
                 notes: formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, 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: "Shipping address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })] })] }));
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, 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: "Shipping address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })] })] }));
 }
 
 export { ReadOnlyAddresses };

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

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

package/dist/shared/api/shared/hooks/use-awaitable-mutation.d.ts

@@ -20,7 +20,10 @@ interface UseAwaitableMutationArgs<T extends (...args: any) => Promise<TResult>,
     }) => void;
 }
 export declare function useAwaitableMutation<T extends (...args: any) => Promise<TResult>, TResult = InferPromiseResult<T>>({ mutationFn, onComplete, onError, onSuccess, }: UseAwaitableMutationArgs<T, TResult>): {
+    error: unknown;
+    isError: boolean;
     isLoading: boolean;
+    isSuccess: boolean;
     mutate: (...args: Parameters<T>) => Promise<TResult>;
 };
 export {};

package/dist/shared/api/shared/hooks/use-awaitable-mutation.js

@@ -4,6 +4,8 @@ import { useQueryClient } from '@tanstack/react-query';
 function useAwaitableMutation({ mutationFn, onComplete, onError, onSuccess, }) {
     const queryClient = useQueryClient();
     const [isLoading, setIsLoading] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [error, setError] = useState();
     const mutate = useCallback(async (...args) => {
         let result;
         let error;
@@ -11,11 +13,13 @@ function useAwaitableMutation({ mutationFn, onComplete, onError, onSuccess, }) {
             setIsLoading(true);
             const _result = await mutationFn(...args);
             result = _result;
+            setIsSuccess(true);
             onSuccess?.({ args, data: _result, queryClient });
             return result;
         }
         catch (err) {
             error = err;
+            setError(error);
             onError?.({ args, error, queryClient });
             throw err;
         }
@@ -25,7 +29,10 @@ function useAwaitableMutation({ mutationFn, onComplete, onError, onSuccess, }) {
         }
     }, [mutationFn, onComplete, onError, onSuccess, queryClient]);
     return {
+        error,
+        isError: Boolean(error),
         isLoading,
+        isSuccess,
         mutate,
     };
 }

package/dist/shared/api/storefront/hooks/authentication/use-patch-session.d.ts

@@ -1,4 +1,7 @@
 export declare function usePatchSession(): {
+    error: unknown;
+    isError: boolean;
     isLoading: boolean;
+    isSuccess: boolean;
     mutate: (args_0: any) => Promise<import("../../model/storefront.model").SessionModel>;
 };

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

@@ -1,7 +1,10 @@
 export declare function usePatchCart({ skipInvalidation, }?: {
     skipInvalidation?: boolean;
 }): {
+    error: unknown;
+    isError: boolean;
     isLoading: boolean;
+    isSuccess: boolean;
     mutate: (args_0: {
         cart: import("../../model/storefront.model").PatchCartModel;
     }) => Promise<import("../../model/storefront.model").CartModel>;

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

@@ -1,5 +1,8 @@
 export declare const usePlaceOrder: () => {
+    error: unknown;
+    isError: boolean;
     isLoading: boolean;
+    isSuccess: boolean;
     mutate: (args_0: {
         cart: import("../../model/storefront.model").CartModel;
         isPending?: boolean;

package/dist/shared/api/storefront/hooks/customer/use-patch-bill-to-address.d.ts

@@ -1,5 +1,8 @@
 export declare function usePatchBillToAddress(): {
+    error: unknown;
+    isError: boolean;
     isLoading: boolean;
+    isSuccess: boolean;
     mutate: (args_0: {
         billTo: import("../../model/storefront.model").BillToModel;
     }) => Promise<import("../../model/storefront.model").BillToModel>;

package/dist/shared/routing/route-provider.d.ts

@@ -4,6 +4,10 @@ export interface NavigateOptions {
     replace?: boolean;
 }
 export type NavigateFn = (href: string, options?: NavigateOptions) => void;
+export interface UseNavigateReturnType {
+    isNavigating: boolean;
+    navigate: NavigateFn;
+}
 export interface RouteContext {
     basePath?: string;
     navigate: NavigateFn;
@@ -15,5 +19,5 @@ export interface RouteProviderProps {
 }
 export declare function RouteProvider({ basePath, children, navigate, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useOnNavigate(callback?: NavigateFn): NavigateFn;
-export declare function useNavigate(): NavigateFn;
+export declare function useNavigate(): UseNavigateReturnType;
 export declare function useBasePath(): string | undefined;

package/dist/shared/routing/route-provider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import { useGlobalState } from '../providers/global-state-provider.js';
 
 function RouteProvider({ basePath, children, navigate, }) {
@@ -22,20 +22,24 @@ function useOnNavigate(callback) {
     }, []);
 }
 function useNavigate() {
+    const isNavigatingRef = useRef(false);
     const [state] = useGlobalState('routing');
     const trigger = useOnNavigate();
     if (!state) {
         throw new Error('RouteProvider not found');
     }
-    return useCallback((href, options) => {
+    const navigate = useCallback((href, options) => {
         trigger(href, options);
         if (href.toLowerCase().startsWith('http')) {
             if (typeof window === 'undefined')
                 return;
+            isNavigatingRef.current = true;
             return (window.location.href = href);
         }
+        isNavigatingRef.current = true;
         return state.navigate(href, options);
     }, [state, trigger]);
+    return { isNavigating: isNavigatingRef.current, navigate };
 }
 function useBasePath() {
     const [state] = useGlobalState('routing');

package/dist/shared/routing/with-routing.js

@@ -3,7 +3,7 @@ import { useNavigate, useBasePath } from './route-provider.js';
 
 function withRouting(component) {
     const Component = ({ href, onClick, route, ...rest }) => {
-        const navigate = useNavigate();
+        const { navigate } = useNavigate();
         const basePath = useBasePath();
         if (basePath &&
             href &&

package/package.json

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